kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-10 09:03:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(button): reduce duplicate code blocks

Browse Source
This commit is contained in:
unix
2020-05-15 12:34:16 +08:00
parent a012413374
commit 465ceeea80
2 changed files with 13 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/button/button.tsx
View File

@@ -47,6 +47,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
const [dripX, setDripX] = useState<number>(0)
const [dripY, setDripY] = useState<number>(0)
const groupConfig = useButtonGroupContext()
const filteredProps = filterPropsWithGroup(btnProps, groupConfig)
const {
children,
disabled,
@@ -63,22 +64,13 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
iconRight,
className,
...props
} = filterPropsWithGroup(btnProps, groupConfig)
} = filteredProps
const { bg, border, color } = useMemo(() => getButtonColors(theme, type, disabled, ghost), [
const { bg, border, color } = useMemo(() => getButtonColors(theme, filteredProps), [
theme,
type,
disabled,
ghost,
])
const hover = useMemo(() => getButtonHoverColors(theme, type, disabled, loading, shadow, ghost), [
theme,
type,
disabled,
loading,
shadow,
ghost,
filteredProps,
])
const hover = useMemo(() => getButtonHoverColors(theme, filteredProps), [theme, filteredProps])
const { cursor, events } = useMemo(() => getButtonCursor(disabled, loading), [disabled, loading])
const { height, minWidth, padding, width, fontSize } = useMemo(() => getButtonSize(size, auto), [
size,
@@ -151,7 +143,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: ${color};

23
components/button/styles.ts
View File

@@ -1,5 +1,6 @@
import { ZeitUIThemes } from '../styles/themes'
import { NormalSizes, ButtonTypes } from '../utils/prop-types'
import { ButtonProps } from 'components/button/button'
export interface ButtonColorGroup {
bg: string
@@ -37,12 +38,8 @@ export const getButtonGhostColors = (
return colors[type] || null
}
export const getButtonColors = (
theme: ZeitUIThemes,
type: ButtonTypes,
disabled: boolean,
ghost: boolean,
): ButtonColorGroup => {
export const getButtonColors = (theme: ZeitUIThemes, props: ButtonProps): ButtonColorGroup => {
const { type, disabled, ghost } = props
const colors: { [key in ButtonTypes]?: ButtonColorGroup } = {
default: {
bg: theme.palette.background,
@@ -118,14 +115,8 @@ export const getButtonGhostHoverColors = (
return colors[type] || null
}
export const getButtonHoverColors = (
theme: ZeitUIThemes,
type: ButtonTypes,
disabled: boolean,
loading: boolean,
shadow: boolean,
ghost: boolean,
): ButtonColorGroup => {
export const getButtonHoverColors = (theme: ZeitUIThemes, props: ButtonProps): ButtonColorGroup => {
const { type, disabled, loading, shadow, ghost } = props
const colors: { [key in ButtonTypes]?: any } = {
default: {
bg: theme.palette.background,
@@ -168,10 +159,10 @@ export const getButtonHoverColors = (
}
if (loading)
return {
...getButtonColors(theme, type, disabled, ghost),
...getButtonColors(theme, props),
color: 'transparent',
}
if (shadow) return getButtonColors(theme, type, disabled, ghost)
if (shadow) return getButtonColors(theme, props)
if (ghost) return getButtonGhostHoverColors(theme, type) || defaultHover
return colors[type] || defaultHover
}