feat(ui): add checkbox component

Author: xiejay97

packages/ui/src/components/anchor/Anchor.tsx

@@ -1,5 +1,5 @@
 import type { DElementSelector } from '../../hooks/element-ref';
-import type { DStateBackflowContextData } from '../../hooks/state-backflow';
+import type { Draft } from 'immer';
 
 import { isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -13,11 +13,12 @@ import {
   useRefCallback,
   useRootContentConfig,
   useValueChange,
-  DStateBackflowContext,
 } from '../../hooks';
 import { getClassName, CustomScroll } from '../../utils';
 
 export interface DAnchorContextData {
+  updateLinks: (identity: string, href: string | undefined, el: HTMLLIElement | null) => void;
+  removeLinks: (identity: string) => void;
   anchorActiveHref: string | null;
   onLinkClick: (href: string) => void;
 }
@@ -55,7 +56,7 @@ export function DAnchor(props: DAnchorProps) {
   const asyncCapture = useAsync();
   const [customScroll] = useState(() => new CustomScroll());
   const [dotStyle, setDotStyle] = useImmer<React.CSSProperties>({});
-  const [links, setLinks] = useImmer(new Map<string, { href: string; el: HTMLLIElement | null }>());
+  const [links, setLinks] = useImmer(new Map<string, { href: string; el: HTMLLIElement }>());
   const [activeHref, setActiveHref] = useState<string | null>(null);
 
   const pageRef = useRefSelector(dPage ?? null);
@@ -97,8 +98,8 @@ export function DAnchor(props: DAnchorProps) {
       if (newHref) {
         for (const { href, el } of links.values()) {
           if (href === newHref) {
-            const rect = el?.getBoundingClientRect();
-            if (rect && anchorEl) {
+            const rect = el.getBoundingClientRect();
+            if (anchorEl) {
               draft.top = rect.top + rect.height / 2 - anchorEl.getBoundingClientRect().top;
             }
             break;
@@ -157,51 +158,46 @@ export function DAnchor(props: DAnchorProps) {
   }, [asyncCapture, rootContentRef, updateAnchor]);
   //#endregion
 
-  const contextValue = useMemo<DAnchorContextData>(
-    () => ({
-      anchorActiveHref: activeHref,
-      onLinkClick,
-    }),
-    [activeHref, onLinkClick]
-  );
-
-  const stateBackflowContextValue = useMemo<DStateBackflowContextData>(
+  const stateBackflow = useMemo<Pick<DAnchorContextData, 'updateLinks' | 'removeLinks'>>(
     () => ({
-      addState: (identity, href, el) => {
-        setLinks((draft) => {
-          draft.set(identity, { href, el });
-        });
-      },
-      updateState: (identity, href, el) => {
-        setLinks((draft) => {
-          draft.set(identity, { href, el });
-        });
+      updateLinks: (identity, href, el) => {
+        if (href && el) {
+          setLinks((draft) => {
+            draft.set(identity, { href, el: el as Draft<HTMLLIElement> });
+          });
+        }
       },
-      removeState: (identity) => {
+      removeLinks: (identity) => {
         setLinks((draft) => {
           draft.delete(identity);
         });
       },
     }),
     [setLinks]
   );
+  const contextValue = useMemo<DAnchorContextData>(
+    () => ({
+      ...stateBackflow,
+      anchorActiveHref: activeHref,
+      onLinkClick,
+    }),
+    [activeHref, onLinkClick, stateBackflow]
+  );
 
   return (
-    <DStateBackflowContext.Provider value={stateBackflowContextValue}>
-      <DAnchorContext.Provider value={contextValue}>
-        <ul {...restProps} ref={anchorRef} className={getClassName(className, `${dPrefix}anchor`)}>
-          <div className={`${dPrefix}anchor__indicator`}>
-            {dIndicator === 'dot' ? (
-              <span className={`${dPrefix}anchor__dot-indicator`} style={dotStyle}></span>
-            ) : dIndicator === 'line' ? (
-              <span className={`${dPrefix}anchor__line-indicator`} style={dotStyle}></span>
-            ) : (
-              dIndicator
-            )}
-          </div>
-          {children}
-        </ul>
-      </DAnchorContext.Provider>
-    </DStateBackflowContext.Provider>
+    <DAnchorContext.Provider value={contextValue}>
+      <ul {...restProps} ref={anchorRef} className={getClassName(className, `${dPrefix}anchor`)}>
+        <div className={`${dPrefix}anchor__indicator`}>
+          {dIndicator === 'dot' ? (
+            <span className={`${dPrefix}anchor__dot-indicator`} style={dotStyle}></span>
+          ) : dIndicator === 'line' ? (
+            <span className={`${dPrefix}anchor__line-indicator`} style={dotStyle}></span>
+          ) : (
+            dIndicator
+          )}
+        </div>
+        {children}
+      </ul>
+    </DAnchorContext.Provider>
   );
 }

packages/ui/src/components/anchor/AnchorLink.tsx

@@ -14,14 +14,14 @@ export function DAnchorLink(props: DAnchorLinkProps) {
 
   //#region Context
   const dPrefix = usePrefixConfig();
-  const [{ anchorActiveHref, onLinkClick }] = useCustomContext(DAnchorContext);
+  const [{ updateLinks, removeLinks, anchorActiveHref, onLinkClick }] = useCustomContext(DAnchorContext);
   //#endregion
 
   //#region Ref
   const [linkEl, linkRef] = useRefCallback<HTMLLIElement>();
   //#endregion
 
-  useStateBackflow(href, linkEl);
+  useStateBackflow(updateLinks, removeLinks, href, linkEl);
 
   const handleClick = useCallback(
     (e) => {

packages/ui/src/components/button/ButtonGroup.tsx

@@ -39,6 +39,14 @@ export function DButtonGroup(props: DButtonGroupProps) {
   const size = dSize ?? gSize;
   const disabled = dDisabled || gDisabled;
 
+  const generalStateContextValue = useMemo<DGeneralStateContextData>(
+    () => ({
+      gSize: size,
+      gDisabled: disabled,
+    }),
+    [disabled, size]
+  );
+
   const contextValue = useMemo<DButtonGroupContextData>(
     () => ({
       buttonGroupType: dType,
@@ -48,14 +56,6 @@ export function DButtonGroup(props: DButtonGroupProps) {
     [dType, dTheme, dDisabled]
   );
 
-  const generalStateContextValue = useMemo<DGeneralStateContextData>(
-    () => ({
-      gSize: size,
-      gDisabled: disabled,
-    }),
-    [disabled, size]
-  );
-
   return (
     <DGeneralStateContext.Provider value={generalStateContextValue}>
       <DButtonGroupContext.Provider value={contextValue}>

packages/ui/src/components/button/README.zh-Hant.md

@@ -22,7 +22,7 @@ title: 按钮
 | dLoading | 设置按钮载入状态 | boolean | false |
 | dBlock | 将按钮宽度调整为其父宽度 | boolean | false |
 | dShape | 设置按钮形状 | 'circle' \| 'round' | - |
-| dSize | 设置按钮尺寸 | 'smaller' \| 'larger' | - |
+| dSize | 设置尺寸 | 'smaller' \| 'larger' | - |
 | dIcon | 设置按钮的图标 | React.ReactNode | - |
 | dIconRight | 设置图标在右侧 | boolean | false |
 <!-- prettier-ignore-end -->

packages/ui/src/components/button/demos/7.Size.md

@@ -1,7 +1,7 @@
 ---
 title:
   en-US: Size
-  zh-Hant: 按钮尺寸
+  zh-Hant: 尺寸
 ---
 
 # en-US
@@ -10,7 +10,7 @@ Adjust the button size by setting `dSize` to `larger` and `smaller`.
 
 # zh-Hant
 
-通过设置 `dSize` 为 `larger` `smaller` 调整按钮尺寸。
+通过设置 `dSize` 为 `larger` `smaller` 调整尺寸。
 
 ```tsx
 import { DButton, DIcon } from '@react-devui/ui';

packages/ui/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,112 @@
+import type { Updater } from '../../hooks/two-way-binding';
+
+import React, { useCallback, useId } from 'react';
+
+import { usePrefixConfig, useComponentConfig, useCustomContext, useTwoWayBinding, useGeneralState, useStateBackflow } from '../../hooks';
+import { getClassName } from '../../utils';
+import { DCheckboxGroupContext } from './CheckboxGroup';
+
+export type DCheckboxRef = HTMLInputElement;
+
+export interface DCheckboxProps extends React.HTMLAttributes<HTMLElement> {
+  dModel?: [boolean, Updater<boolean>?];
+  dFormControlName?: string;
+  dIndeterminate?: boolean;
+  dAriaControls?: string;
+  dSize?: 'smaller' | 'larger';
+  dDisabled?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dValue?: any;
+  onModelChange?: (checked: boolean) => void;
+}
+
+const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (props, ref) => {
+  const {
+    dModel,
+    dFormControlName,
+    dIndeterminate = false,
+    dAriaControls,
+    dSize,
+    dDisabled = false,
+    dValue,
+    onModelChange,
+    id,
+    className,
+    children,
+    onChange,
+    ...restProps
+  } = useComponentConfig(DCheckbox.name, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  const { gSize, gDisabled } = useGeneralState();
+  const [{ updateCheckboxs, removeCheckboxs, checkboxGroupValue, onCheckedChange }, checkboxGroupContext] =
+    useCustomContext(DCheckboxGroupContext);
+  //#endregion
+
+  const uniqueId = useId();
+  const _id = id ?? `${dPrefix}checkbox-${uniqueId}`;
+
+  useStateBackflow(updateCheckboxs, removeCheckboxs, _id, dValue);
+
+  const inGroup = checkboxGroupContext !== null;
+
+  const [checked, changeChecked, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding(
+    false,
+    inGroup ? [checkboxGroupValue?.includes(dValue) ?? false] : dModel,
+    onModelChange,
+    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+  );
+
+  const size = dSize ?? gSize;
+  const disabled = dDisabled || gDisabled || controlDisabled;
+
+  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      onChange?.(e);
+
+      if (!disabled) {
+        if (inGroup) {
+          onCheckedChange?.(dValue, !checked);
+        } else {
+          changeChecked(!checked);
+        }
+      }
+    },
+    [onChange, disabled, inGroup, onCheckedChange, dValue, checked, changeChecked]
+  );
+
+  return (
+    <div
+      {...restProps}
+      className={getClassName(className, `${dPrefix}checkbox`, {
+        [`${dPrefix}checkbox--${size}`]: size,
+        'is-indeterminate': dIndeterminate,
+        'is-checked': !dIndeterminate && checked,
+        'is-disabled': disabled,
+      })}
+    >
+      <div className={`${dPrefix}checkbox__input-wrapper`}>
+        <input
+          {...ariaAttribute}
+          ref={ref}
+          id={_id}
+          className={getClassName(`${dPrefix}checkbox__input`, validateClassName)}
+          type="checkbox"
+          disabled={disabled}
+          aria-labelledby={`${dPrefix}checkbox-label-${uniqueId}`}
+          aria-checked={dIndeterminate ? 'mixed' : checked}
+          aria-controls={dAriaControls}
+          onChange={handleChange}
+        />
+        {!dIndeterminate && checked && <div className={`${dPrefix}checkbox__tick`}></div>}
+        {dIndeterminate && <div className={`${dPrefix}checkbox__indeterminate`}></div>}
+      </div>
+      <label id={`${dPrefix}checkbox-label-${uniqueId}`} className={`${dPrefix}checkbox__label`} htmlFor={_id}>
+        {children}
+      </label>
+    </div>
+  );
+};
+
+export const DCheckbox = React.forwardRef(Checkbox);