fix: rename defaultChecked to initialChecked

feat(toggle): add component

components/checkbox/checkbox.tsx

@@ -18,16 +18,15 @@ export interface CheckboxEvent {
 interface Props {
   checked?: boolean
   disabled?: boolean
-  defaultChecked?: boolean
+  initialChecked?: boolean
   onChange?: (e: CheckboxEvent) => void
   className?: string
   value?: string
 }
 
 const defaultProps = {
-  checked: false,
   disabled: false,
-  defaultChecked: false,
+  initialChecked: false,
   className: '',
   value: '',
 }
@@ -36,9 +35,9 @@ type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>
 export type CheckboxProps = Props & typeof defaultProps & NativeAttrs
 
 const Checkbox: React.FC<CheckboxProps> = React.memo(({
-  checked, defaultChecked, disabled, onChange, className, children, value, ...props
+  checked, initialChecked, disabled, onChange, className, children, value, ...props
 }) => {
-  const [selfChecked, setSelfChecked] = useState(defaultChecked)
+  const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked)
   const { updateState, inGroup, disabledAll, values } = useCheckbox()
   const isDisabled = inGroup ? disabledAll || disabled : disabled
 
@@ -83,9 +82,10 @@ const Checkbox: React.FC<CheckboxProps> = React.memo(({
   }, [updateState, onChange, isDisabled, selfChecked])
   
   useEffect(() => {
+    if (checked === undefined) return
     setSelfChecked(checked)
   }, [checked])
-  
+
   return (
     <label className={`${className}`} {...props}>
       <CheckboxIcon disabled={isDisabled} checked={selfChecked} />

components/index.ts

@@ -43,3 +43,4 @@ export { default as Collapse } from './collapse'
 export { default as Loading } from './loading'
 export { default as Textarea } from './textarea'
 export { default as Table } from './table'
+export { default as Toggle } from './toggle'

pages/docs/components/checkbox.mdx

@@ -54,8 +54,8 @@ Displays a boolean value.
 
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
-| **checked** | checked or not | `boolean` | - | `false` |
-| **defaultChecked** | checked or not on initial | `boolean` | - | `false` |
+| **checked** | checked or not | `boolean` | - | - |
+| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
 | **onChange** | change event handler | `CheckboxEvent` | - | - |
 | **value** | unique identification value (only in group) | `string` | - | - |
 | **disabled** | disable checkbox | `boolean` | - | `false` |
@@ -70,6 +70,21 @@ Displays a boolean value.
 | **onChange** | change event handler | `(values: string[]) => void` | - | - |
 | ... | native props | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
 
+<Attributes.Title>CheckboxEvent</Attributes.Title>
+
+```ts
+interface CheckboxEventTarget {
+  checked: boolean
+}
+
+export interface CheckboxEvent {
+  target: CheckboxEventTarget
+  stopPropagation: () => void
+  preventDefault: () => void
+  nativeEvent: React.ChangeEvent
+}
+```
+
 </Attributes>
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>