@tendaui/components 1.0.0 → 1.0.2

package/radio/type.ts

@@ -0,0 +1,115 @@
+import { TNode, SizeEnum } from "../common";
+import { MouseEvent, ChangeEvent } from "react";
+
+export interface TdRadioProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: boolean;
+  /**
+   * 是否选中
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * 是否选中，非受控属性
+   * @default false
+   */
+  defaultChecked?: boolean;
+  /**
+   * 单选内容，同 label
+   */
+  children?: TNode;
+  /**
+   * 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 主文案
+   */
+  label?: TNode;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 单选按钮的值
+   */
+  value?: T;
+  /**
+   * 选中状态变化时触发
+   */
+  onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLDivElement> }) => void;
+  /**
+   * 点击时触发，一般用于外层阻止冒泡场景
+   */
+  onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
+}
+
+export interface TdRadioGroupProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: boolean;
+  /**
+   * 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled
+   */
+  disabled?: boolean;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同
+   */
+  options?: Array<RadioOption>;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 组件尺寸【讨论中】
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 组件风格
+   * @default radio
+   */
+  theme?: "radio" | "button";
+  /**
+   * 选中的值
+   */
+  value?: T;
+  /**
+   * 选中的值，非受控属性
+   */
+  defaultValue?: T;
+  /**
+   * 单选组件按钮形式
+   * @default outline
+   */
+  variant?: "outline" | "primary-filled" | "default-filled";
+  /**
+   * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性
+   */
+  onChange?: (value: T, context: { e: ChangeEvent<HTMLDivElement>; name?: string }) => void;
+}
+
+export type RadioOption = string | number | RadioOptionObj;
+
+export interface RadioOptionObj {
+  label?: string | TNode;
+  value?: string | number | boolean;
+  disabled?: boolean;
+}
+
+export type RadioValue = string | number | boolean;

package/radio/useKeyboard.ts

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { off, on } from "../utils/listener";
+import { CHECKED_CODE_REG } from "../common";
+/** 键盘操作 */
+export default function useKeyboard(
+  radioGroupRef: React.MutableRefObject<HTMLDivElement>,
+  setInnerValue: (value: any, context: { e: KeyboardEvent }) => void
+) {
+  const checkRadioInGroup = (e: KeyboardEvent) => {
+    if (CHECKED_CODE_REG.test(e.key) || CHECKED_CODE_REG.test(e.code)) {
+      const inputNode = (e.target as HTMLElement).querySelector("input");
+      if (!inputNode) return;
+      const data = inputNode.dataset || {};
+      if (inputNode.checked && data.allowUncheck) {
+        setInnerValue(undefined, { e });
+      } else {
+        // Number
+        let value: number | string | boolean = !isNaN(Number(data.value)) ? Number(data.value) : data.value;
+        // Boolean
+        value = (typeof value === "string" && { true: true, false: false }[value]) || value;
+        // String
+        value = typeof value === "string" && value[0] === "'" ? value.replace(/'/g, "") : value;
+        setInnerValue(value, { e });
+      }
+    }
+  };
+
+  useEffect(() => {
+    on(radioGroupRef.current, "keydown", checkRadioInGroup);
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      off(radioGroupRef.current, "keydown", checkRadioInGroup);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

package/select/hooks/useOptions.ts

@@ -38,10 +38,12 @@ function UseOptions(
       const handlerOptionElement = (v) => {
         if (React.isValidElement<SelectOption>(v)) {
           if (v.type === OptionGroup) {
+            const children = v.props.children;
+            const childrenArray = Array.isArray(children) ? children : children ? [children] : [];
             return {
               ...v.props,
               group: v.props.label,
-              children: v.props.children?.map((v) => handlerOptionElement(v))
+              children: childrenArray.map((v) => handlerOptionElement(v))
             };
           }
           return {
@@ -74,25 +76,26 @@ function UseOptions(
     const labelKey = keys?.label || "label";
 
     setSelectedOptions((oldSelectedOptions: SelectOption[]) => {
-      const createOptionFromValue = (item: OptionValueType) => {
+      const createOptionFromValue = (item: OptionValueType): SelectOption => {
         if (valueType === "value") {
           return (
             valueToOption[item as string | number] ||
-            oldSelectedOptions.find((option) => get(option, valueKey) === item) || {
+            oldSelectedOptions.find((option) => get(option, valueKey) === item) ||
+            ({
               [valueKey]: item,
               [labelKey]: item
-            }
+            } as SelectOption)
           );
         }
         if (typeof item === "object" && item !== null) {
-          return item;
+          return item as SelectOption;
         }
-        return [];
+        return { [valueKey]: item, [labelKey]: item } as SelectOption;
       };
 
       // 多选
       if (Array.isArray(value)) {
-        return value.map(createOptionFromValue);
+        return value.map(createOptionFromValue).filter((opt): opt is SelectOption => opt !== null && opt !== undefined);
       }
 
       // 单选

package/select/hooks/usePanelVirtualScroll.ts

@@ -42,7 +42,7 @@ const usePanelVirtualScroll = ({ popupContentRef, scroll, options, size }: Panel
     translateY = null,
     handleRowMounted = null
   } = useVirtualScroll(popupContentRef, {
-    data: options || [],
+    data: (options || []) as { [key: string]: unknown }[],
     scroll: scrollParams
   });