kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 04:35:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(prettier): format code style

Browse Source
This commit is contained in:
unix
2020-05-06 14:18:28 +08:00
parent cf8e277324
commit 112c826575
263 changed files with 4927 additions and 3992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/button-dropdown/button-dropdown.tsx
View File

@@ -36,7 +36,14 @@ const stopPropagation = (event: MouseEvent<HTMLElement>) => {
}
const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = ({
children, type, size, auto, className, disabled, loading, ...props
children,
type,
size,
auto,
className,
disabled,
loading,
...props
}) => {
const ref = useRef<HTMLDivElement>(null)
const theme = useTheme()
@@ -44,23 +51,33 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
const sizes = getButtonSize(size, auto)
const itemChildren = pickChild(children, ButtonDropdownItem)[1]
const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(itemChildren, 'main', true)
const [visible, setVisible] = useState<boolean>(false)
const clickHandler = useCallback((event: MouseEvent<HTMLDetailsElement>) => {
event.preventDefault()
stopPropagation(event)
if (disabled || loading) return
setVisible(!visible)
}, [visible])
const initialValue = useMemo(() => ({
type, size, auto, disabled, loading,
}), [type, size])
const clickHandler = useCallback(
(event: MouseEvent<HTMLDetailsElement>) => {
event.preventDefault()
stopPropagation(event)
if (disabled || loading) return
setVisible(!visible)
},
[visible],
)
const initialValue = useMemo(
() => ({
type,
size,
auto,
disabled,
loading,
}),
[type, size],
)
const bgColor = useMemo(() => {
if (disabled || loading) return theme.palette.accents_1
return visible ? colors.hoverBgColor : colors.bgColor
}, [visible, colors, theme.palette])
useClickAway(ref, () => setVisible(false))
return (
@@ -74,66 +91,66 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
<div className="content">{itemChildrenWithoutMain}</div>
</details>
<style jsx>{`
.btn-dropdown {
display: inline-flex;
position: relative;
box-sizing: border-box;
border: 1px solid ${theme.palette.border};
border-radius: ${theme.layout.radius};
}
.btn-dropdown > :global(button) {
border-top-left-radius: ${theme.layout.radius};
border-bottom-left-radius: ${theme.layout.radius};
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
list-style: none;
outline: none;
color: ${colors.color};
background-color: ${bgColor};
height: ${sizes.height};
border-left: 1px solid ${colors.borderLeftColor};
border-top-right-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
cursor: ${(disabled || loading) ? 'not-allowed' : 'pointer'};
display: flex;
justify-content: center;
align-items: center;
width: auto;
padding: 0 1px;
transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
}
summary:hover {
border-color: ${colors.hoverBorder};
background-color: ${colors.hoverBgColor};
}
.content {
position: absolute;
right: 0;
left: 0;
z-index: 90;
width: 100%;
border-radius: ${theme.layout.radius};
box-shadow: ${theme.expressiveness.shadowLarge};
transform: translateY(${theme.layout.gapHalf});
background-color: ${theme.palette.background};
}
.content > :global(button:first-of-type) {
border-top-left-radius: ${theme.layout.radius};
border-top-right-radius: ${theme.layout.radius};
}
.content > :global(button:last-of-type) {
border-bottom-left-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
}
`}</style>
.btn-dropdown {
display: inline-flex;
position: relative;
box-sizing: border-box;
border: 1px solid ${theme.palette.border};
border-radius: ${theme.layout.radius};
}
.btn-dropdown > :global(button) {
border-top-left-radius: ${theme.layout.radius};
border-bottom-left-radius: ${theme.layout.radius};
}
summary {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
list-style: none;
outline: none;
color: ${colors.color};
background-color: ${bgColor};
height: ${sizes.height};
border-left: 1px solid ${colors.borderLeftColor};
border-top-right-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
display: flex;
justify-content: center;
align-items: center;
width: auto;
padding: 0 1px;
transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
}
summary:hover {
border-color: ${colors.hoverBorder};
background-color: ${colors.hoverBgColor};
}
.content {
position: absolute;
right: 0;
left: 0;
z-index: 90;
width: 100%;
border-radius: ${theme.layout.radius};
box-shadow: ${theme.expressiveness.shadowLarge};
transform: translateY(${theme.layout.gapHalf});
background-color: ${theme.palette.background};
}
.content > :global(button:first-of-type) {
border-top-left-radius: ${theme.layout.radius};
border-top-right-radius: ${theme.layout.radius};
}
.content > :global(button:last-of-type) {
border-bottom-left-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
}
`}</style>
</div>
</ButtonDropdownContext.Provider>
)
@@ -142,9 +159,10 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
type MemoButtonDropdownComponent<P = {}> = React.NamedExoticComponent<P> & {
Item: typeof ButtonDropdownItem
}
type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
type ComponentProps = Partial<typeof defaultProps> &
Omit<Props, keyof typeof defaultProps> &
NativeAttrs
ButtonDropdown.defaultProps = defaultProps
export default React.memo(ButtonDropdown) as MemoButtonDropdownComponent<ComponentProps>