FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize code

Browse Source
This commit is contained in:
Fat Snake
2024-01-14 00:51:03 +08:00
parent 97c23334f7
commit b0be3bc4a7
63 changed files with 217 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/Card.tsx
View File

@@ -1,8 +1,7 @@
import React from 'react'
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/card.scss'
interface CardProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />

7
src/components/common/FitCenter.tsx
View File

@@ -1,12 +1,11 @@
import React from 'react'
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/fit-center.scss'
interface FitCenterProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
vertical?: boolean
}
const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
return (
<div
className={`fit-center${className ? ` ${className}` : ''}${

4
src/components/common/FitFullscreen.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react'
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/fit-fullscreen.scss'
interface FitFullscreenProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
zIndex?: number
backgroundColor?: string
}

5
src/components/common/FlexBox.tsx
View File

@@ -1,8 +1,7 @@
import React from 'react'
import { DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/flex-box.scss'
interface FlexBoxProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
direction?: 'horizontal' | 'vertical'
gap?: number
}

3
src/components/common/FullscreenLoadingMask.tsx
View File

@@ -1,10 +1,9 @@
import React from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/fullscreen-loading-mask.scss'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import FitFullscreen from '@/components/common/FitFullscreen'
const FullscreenLoadingMask: React.FC = () => {
const FullscreenLoadingMask = () => {
const loadingIcon = (
<>
<Icon

16
src/components/common/HideScrollbar.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react'
import { TouchEvent, MouseEvent, KeyboardEvent, DetailedHTMLProps, HTMLAttributes } from 'react'
import '@/assets/css/components/common/hide-scrollbar.scss'
interface HideScrollbarProps
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
isPreventScroll?: boolean
isPreventVerticalScroll?: boolean
isPreventHorizontalScroll?: boolean
@@ -210,7 +210,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
}, [autoHideWaitingTime, horizontalScrollbarPosition])
const handleDefaultTouchStart = useCallback(
(event: React.TouchEvent) => {
(event: TouchEvent) => {
if (event.touches.length !== 1 || isPreventScroll) {
lastTouchPositionRef.current = { x: -1, y: -1 }
return
@@ -223,7 +223,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
)
const handleDefaultTouchmove = useCallback(
(event: React.TouchEvent) => {
(event: TouchEvent) => {
if (event.touches.length !== 1 || isPreventScroll) {
lastTouchPositionRef.current = { x: -1, y: -1 }
return
@@ -252,7 +252,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
[isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
)
const handleDefaultMouseDown = (event: React.MouseEvent) => {
const handleDefaultMouseDown = (event: MouseEvent) => {
if (isPreventAnyScroll)
if (event.button === 1) {
event.preventDefault()
@@ -260,7 +260,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
}
const handleDefaultKeyDown = useCallback(
(event: React.KeyboardEvent) => {
(event: KeyboardEvent) => {
if (
isPreventScroll &&
[
@@ -297,7 +297,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
)
const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
return (event: React.MouseEvent) => {
return (event: MouseEvent) => {
switch (eventFlag) {
case 'down':
lastScrollbarClickPositionRef.current = {
@@ -348,7 +348,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
}
const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
return (event: React.TouchEvent) => {
return (event: TouchEvent) => {
switch (eventFlag) {
case 'start':
if (event.touches.length !== 1) {

3
src/components/common/Indicator.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import _ from 'lodash'
import '@/assets/css/components/common/indicator.scss'
@@ -8,7 +7,7 @@ interface IndicatorProps {
onSwitch?: (index: number) => void
}
const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
const handleClick = (index: number) => {
return () => {
onSwitch?.(index)

8
src/components/common/LoadingMask.tsx
View File

@@ -1,13 +1,13 @@
import React from 'react'
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/loading-mask.scss'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
interface LoadingMaskProps extends React.PropsWithChildren {
interface LoadingMaskProps extends PropsWithChildren {
hidden?: boolean
maskContent?: React.ReactNode
maskContent?: ReactNode
}
const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
const LoadingMask = (props: LoadingMaskProps) => {
const loadingIcon = (
<>
<Icon

6
src/components/common/Permission.tsx
View File

@@ -1,12 +1,12 @@
import React from 'react'
import { PropsWithChildren } from 'react'
import { hasPathPermission, hasPermission } from '@/util/auth'
interface PermissionProps extends React.PropsWithChildren {
interface PermissionProps extends PropsWithChildren {
operationCode?: string
path?: string
}
const Permission: React.FC<PermissionProps> = (props) => {
const Permission = (props: PermissionProps) => {
if (
(!props.operationCode || hasPermission(props.operationCode)) &&
(!props.path || hasPathPermission(props.path))

3
src/components/common/Sidebar/Footer.tsx
View File

@@ -1,4 +1,3 @@
import React, { useState } from 'react'
import Icon from '@ant-design/icons'
import { COLOR_ERROR } from '@/constants/common.constants'
import { getRedirectUrl } from '@/util/route'
@@ -6,7 +5,7 @@ import { useUpdatedEffect } from '@/util/hooks'
import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
import { r_auth_logout } from '@/services/auth'
const Footer: React.FC = () => {
const Footer = () => {
const matches = useMatches()
const lastMatch = matches.reduce((_, second) => second)
const location = useLocation()

8
src/components/common/Sidebar/Item.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import { ReactNode, MouseEvent } from 'react'
import Icon from '@ant-design/icons'
import Submenu from '@/components/common/Sidebar/Submenu'
@@ -6,15 +6,15 @@ type ItemProps = {
icon?: IconComponent
text?: string
path: string
children?: React.ReactNode
children?: ReactNode
end?: boolean
}
const Item: React.FC<ItemProps> = (props) => {
const Item = (props: ItemProps) => {
const [submenuTop, setSubmenuTop] = useState(0)
const [submenuLeft, setSubmenuLeft] = useState(0)
const showSubmenu = (e: React.MouseEvent) => {
const showSubmenu = (e: MouseEvent) => {
const parentElement = e.currentTarget.parentElement
if (parentElement?.childElementCount === 2) {
const parentClientRect = parentElement.getBoundingClientRect()

4
src/components/common/Sidebar/ItemList.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import { PropsWithChildren } from 'react'
const ItemList: React.FC<React.PropsWithChildren> = (props) => {
const ItemList = (props: PropsWithChildren) => {
return <ul>{props.children}</ul>
}

4
src/components/common/Sidebar/Scroll.tsx
View File

@@ -1,11 +1,11 @@
import React from 'react'
import { PropsWithChildren } from 'react'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
export interface SidebarScrollElement {
refreshLayout(): void
}
const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
const Scroll = forwardRef<SidebarScrollElement, PropsWithChildren>((props, ref) => {
useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
return {
refreshLayout() {

9
src/components/common/Sidebar/Separate.tsx
View File

@@ -1,8 +1,9 @@
import React from 'react'
import { DetailedHTMLProps, HTMLAttributes } from 'react'
const Separate: React.FC<
React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
> = ({ className, ...props }) => {
const Separate = ({
className,
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
}

6
src/components/common/Sidebar/Submenu.tsx
View File

@@ -1,11 +1,11 @@
import React from 'react'
import { PropsWithChildren } from 'react'
interface SidebarSubmenuProps extends React.PropsWithChildren {
interface SidebarSubmenuProps extends PropsWithChildren {
submenuTop: number
submenuLeft: number
}
const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
const Submenu = (props: SidebarSubmenuProps) => {
return (
<ul
className={'submenu'}

15
src/components/common/Sidebar/index.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import { PropsWithChildren, ReactNode } from 'react'
import Icon from '@ant-design/icons'
import '@/assets/css/components/common/sidebar.scss'
import { getLocalStorage, setLocalStorage } from '@/util/browser'
@@ -9,21 +9,14 @@ import Separate from '@/components/common/Sidebar/Separate'
import Submenu from '@/components/common/Sidebar/Submenu'
import Footer from '@/components/common/Sidebar/Footer'
interface SidebarProps extends React.PropsWithChildren {
interface SidebarProps extends PropsWithChildren {
title: string
width?: string
onSidebarSwitch?: (hidden: boolean) => void
bottomFixed?: React.ReactNode
bottomFixed?: ReactNode
}
const Sidebar: React.FC<SidebarProps> & {
Item: typeof Item
ItemList: typeof ItemList
Scroll: typeof Scroll
Separate: typeof Separate
Submenu: typeof Submenu
Footer: typeof Footer
} = (props) => {
const Sidebar = (props: SidebarProps) => {
const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
const switchSidebar = () => {