64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { View, Text } from '@tarojs/components'
|
|
import { FC, ReactNode } from 'react'
|
|
import classnames from 'classnames'
|
|
import styles from './index.module.scss'
|
|
|
|
type ButtonType = 'primary' | 'danger' | 'warning' | 'info'
|
|
type ButtonSize = 'normal' | 'small'
|
|
|
|
interface PropsType {
|
|
size?: ButtonSize
|
|
type?: ButtonType
|
|
round?: boolean // 大圆角
|
|
disabled?: boolean
|
|
plain?: boolean // plain
|
|
circle?: boolean // 小圆角
|
|
children?: ReactNode
|
|
onClick?: Function
|
|
customClassName?: string
|
|
customStyles?: React.CSSProperties
|
|
customTextClassName?: string
|
|
}
|
|
|
|
const NormalButton: FC<PropsType> = (props) => {
|
|
const {
|
|
type = 'primary',
|
|
size = 'normal',
|
|
round = false,
|
|
disabled = false,
|
|
children,
|
|
onClick,
|
|
plain = false,
|
|
circle = false,
|
|
customStyles = {},
|
|
customClassName = '',
|
|
customTextClassName = ''
|
|
} = props
|
|
const getClassName = () => {
|
|
const classObject = {
|
|
[styles[`button--disabled`]]: disabled,
|
|
[styles[`button--${size}`]]: size,
|
|
[styles[`button--${type}`]]: type,
|
|
[styles['button--round']]: round,
|
|
[styles['button--plain']]: plain,
|
|
[styles['button--circle']]: circle,
|
|
}
|
|
return classObject
|
|
}
|
|
|
|
const handleClick = (event) => {
|
|
if (disabled) {
|
|
return
|
|
}
|
|
onClick && onClick(event)
|
|
}
|
|
|
|
|
|
return (
|
|
<View className={classnames(styles['button'], getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
|
|
<View className={classnames(styles['button--text'], customTextClassName)}>{children}</View>
|
|
</View>
|
|
)
|
|
}
|
|
export default NormalButton
|