accept icons in button component

This commit is contained in:
Pavel Prichodko 2023-01-23 14:46:43 +01:00
parent ad76bbabee
commit 1cf0c8b1e7
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
1 changed files with 85 additions and 11 deletions

View File

@ -9,12 +9,10 @@ const Base = styled(Stack, {
name: 'Button',
accessibilityRole: 'button',
cursor: 'pointer',
borderRadius: 12,
cursor: 'pointer',
display: 'inline-flex',
paddingHorizontal: 16,
paddingTop: 7,
paddingBottom: 9,
alignItems: 'center',
animation: 'fast',
userSelect: 'none',
@ -30,26 +28,102 @@ const Base = styled(Stack, {
hoverStyle: { backgroundColor: '$successHover' },
pressStyle: { backgroundColor: '$successHover' },
},
outline: {
borderWidth: 1,
borderColor: '$neutral-30',
hoverStyle: { borderColor: '$neutral-30' },
pressStyle: { borderColor: '$neutral-50' },
},
ghost: {
backgroundColor: 'transparent',
hoverStyle: { backgroundColor: '$neutral-10' },
pressStyle: { backgroundColor: '$neutral-20' },
},
},
size: {
40: {
paddingHorizontal: 16,
paddingTop: 7,
paddingBottom: 9,
},
32: {
paddingHorizontal: 16,
paddingTop: 4,
paddingBottom: 6,
},
},
iconOnly: {
true: {
paddingHorizontal: 8,
},
},
} as const,
})
const ButtonText = styled(Paragraph, {
textAlign: 'center',
weight: 'medium',
display: 'inline-flex',
alignItems: 'center',
space: 4,
variants: {
type: {
primary: {
color: '$white-100',
},
positive: {
color: '$white-100',
},
outline: {
color: '$neutral-100',
},
ghost: {
color: '$neutral-100',
},
},
} as const,
})
type BaseProps = GetProps<typeof Base>
type Props = {
type?: BaseProps['type']
type Props = BaseProps & {
children: string
icon?: React.ReactNode
type?: BaseProps['type']
size?: BaseProps['size']
iconAfter?: React.ReactNode
onPress?: () => void
} & Omit<BaseProps, 'type'>
}
const Button = (props: Props) => {
const { type = 'primary', children, onPress, ...rest } = props
const {
type = 'primary',
size = 40,
children,
onPress,
icon,
iconAfter,
...rest
} = props
const iconOnly = !children && Boolean(icon)
return (
<Base {...rest} type={type} onPress={onPress}>
<Paragraph color="$white-100" textAlign="center" weight="medium">
<Base
{...rest}
type={type}
size={size}
iconOnly={iconOnly}
onPress={onPress}
>
<ButtonText type={type}>
{icon}
{children}
</Paragraph>
{iconAfter}
</ButtonText>
</Base>
)
}