import * as React from 'react' ; import ClassNames from 'classnames' ; import RcCheckbox from 'rc-checkbox' ; import { CheckboxProps } from './interface' ; import { omit } from '../utils' ; import './style/index.scss' ; const { useRef , useState } = React ; const noop = ( ) => { } ; const defaultProps = { onChange : noop , onBlur : noop , onFocus : noop , autoFocus : false , disabled : false , indeterminate : false , prefixCls : 'cp-ui-checkbox' , onKeyDown : noop , onKeyPress : noop , onMouseEnter : noop , onMouseLeave : noop } ; interface CheckStateObjProps { isChange : boolean ; checked : boolean ; } interface CheckboxStateProps { setCheckState : React . Dispatch < React . SetStateAction < CheckStateObjProps > > ; checkState : CheckStateObjProps ; } param prefixCls param disabled param checked param indeterminate const wrapperClassName = ( prefixCls , disabled , checked , indeterminate ) => { return ClassNames ( prefixCls , { [ `${ prefixCls }-disabled` ] : disabled , [ `${ prefixCls }-checked` ] : checked , [ `${ prefixCls }-indeterminate` ] : indeterminate } ) ; } ; const getClassName = ( { disabled , checked , defaultChecked , indeterminate , prefixCls } , { checkState } ) => { if ( checkState . isChange ) { return wrapperClassName ( prefixCls , disabled , checkState . checked , indeterminate ) ; } if ( defaultChecked === undefined && checked === undefined ) { return wrapperClassName ( prefixCls , disabled , false , indeterminate ) ; } return wrapperClassName ( prefixCls , disabled , checked !== undefined ? ! ! checked : defaultChecked , indeterminate ) ; } ; const getOtherProps = ( props ) => { const omitStrs = [ 'onChange' , 'onMouseEnter' , 'onMouseLeave' , 'prefixCls' , 'indeterminate' , 'classNames' , 'children' , 'checked' ] ; let omitProps = omit ( props , omitStrs ) ; return omitProps ; } ; const handleChange = ( e , { onChange } , setCheckState ) => { const checked = ( e . target as HTMLInputElement ) . checked ; setCheckState ( { isChange : true , checked : checked } ) ; onChange ( e ) ; } ; const Checkbox = props => { const [ checkState , setCheckState ] = useState < CheckStateObjProps > ( { isChange : false , checked : props . checked !== undefined ? ! ! props . checked : false } ) ; const { children , prefixCls , onMouseEnter , onMouseLeave } = props ; const otherProps = getOtherProps ( props ) ; const checkboxRef = useRef ( null ) ; return ( < label className = { getClassName ( props , { checkState , setCheckState } ) } onMouseEnter = { onMouseEnter } onMouseLeave = { onMouseLeave } > < span className = { `${ prefixCls }-select` } > < RcCheckbox onChange = { e => handleChange ( e , props , setCheckState ) } { ... otherProps } ref = { checkboxRef } checked = { checkState . checked } / > < span className = { `${ prefixCls }-select-inner` } /> < /span> < span className = { `${ prefixCls }-label` } > { children } < /span> < /label>); } ; Checkbox . defaultProps = defaultProps ; export default Checkbox ;