66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import classnames from 'classnames'
|
|
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
|
import IconFont from '../iconfont'
|
|
import styles from './index.module.scss'
|
|
|
|
type CheckboxSize = 'normal' | 'small'
|
|
|
|
type params = {
|
|
onSelect?: () => void //选择触发
|
|
onClose?: () => void //取消触发
|
|
status?: boolean //是否选中
|
|
disabled?: boolean //是否禁用
|
|
circle?: boolean
|
|
round?: boolean
|
|
size?: CheckboxSize
|
|
}
|
|
export default forwardRef((props: params, ref) => {
|
|
const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal' } = props
|
|
const [selected, SetSelected] = useState(false)
|
|
const onSelectEven = () => {
|
|
if (disabled) return false
|
|
let res = !selected
|
|
if (res) {
|
|
onSelect?.()
|
|
} else {
|
|
onClose?.()
|
|
}
|
|
SetSelected(res)
|
|
}
|
|
|
|
const getMainClassName = () => {
|
|
const classObject = {
|
|
[styles['checkbox_main--selected']]: selected,
|
|
[styles[`checkbox_main--${size}`]]: size,
|
|
[styles['checkbox_main--round']]: round,
|
|
[styles['checkbox_main--circle']]: circle,
|
|
}
|
|
return classObject
|
|
}
|
|
|
|
const getClassName = () => {
|
|
const classObject = {
|
|
[styles.no_checkbox_item]: disabled,
|
|
[styles.checkbox_item_select]: selected,
|
|
}
|
|
return classObject
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
onSelectEven,
|
|
}))
|
|
useEffect(() => {
|
|
SetSelected(status)
|
|
}, [status])
|
|
return (
|
|
<>
|
|
<View className={classnames(styles.checkbox_main, getMainClassName())} onClick={() => onSelectEven()}>
|
|
<View className={classnames(styles.checkbox_item, getClassName())}>
|
|
{selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
|
|
</View>
|
|
</View>
|
|
</>
|
|
)
|
|
})
|