refactor: rewrite using typescript

Author: wangxingkang

.editorconfig

@@ -1,9 +1,11 @@
-# top-most EditorConfig file
+# 🎨 editorconfig.org
+
 root = true
 
-# Unix-style newlines with a newline ending every file
-[*.{js,css}]
+[*]
+charset = utf-8
 end_of_line = lf
-insert_final_newline = true
 indent_style = space
 indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

src/index.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import classNames from 'classnames';
+
+export interface CheckboxChangeEvent {
+  target: CheckboxChangeEventTarget;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  nativeEvent: React.ChangeEvent<HTMLInputElement>['nativeEvent'];
+}
+
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+  checked: boolean;
+}
+
+export interface CheckboxRef {
+  focus: () => void;
+  blur: () => void;
+  input: HTMLInputElement | null;
+}
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  prefixCls?: string;
+  onChange?: (e: CheckboxChangeEvent) => void;
+}
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
+  const {
+    prefixCls = 'rc-checkbox',
+    className,
+    style,
+    checked,
+    disabled,
+    defaultChecked = false,
+    type = 'checkbox',
+    onChange,
+    ...inputProps
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [rawValue, setRawValue] = useMergedState(defaultChecked, {
+    value: checked,
+  });
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRef.current?.focus();
+    },
+    blur: () => {
+      inputRef.current?.blur();
+    },
+    input: inputRef.current,
+  }));
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-checked`]: rawValue,
+    [`${prefixCls}-disabled`]: disabled,
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    const checked = e.target.checked;
+
+    if (!('checked' in props)) {
+      setRawValue(checked);
+    }
+
+    onChange?.({
+      target: {
+        ...props,
+        checked,
+      },
+      stopPropagation() {
+        e.stopPropagation();
+      },
+      preventDefault() {
+        e.preventDefault();
+      },
+      nativeEvent: e.nativeEvent,
+    });
+  };
+
+  return (
+    <span className={classString} style={style}>
+      <input
+        {...inputProps}
+        className={`${prefixCls}-input`}
+        ref={inputRef}
+        onChange={handleChange}
+        disabled={disabled}
+        checked={!!rawValue}
+        type={type}
+      />
+      <span className={`${prefixCls}-inner`} />
+    </span>
+  );
+});
+
+export default Checkbox;

src/index.jsx

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "strict": true,
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-checkbox": ["src/index.tsx"]
+    }
+  }
+}