@tendaui/components 1.0.0

package/button/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/button/_index.scss";

package/button/type.ts

@@ -0,0 +1,82 @@
+import { TNode, TElement, SizeEnum } from "../common";
+import { MouseEvent } from "react";
+
+export interface TdButtonProps {
+  /**
+   * 是否为块级元素
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 按钮内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 按钮内容
+   */
+  content?: TNode;
+  /**
+   * 禁用状态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件
+   */
+  form?: string;
+  /**
+   * 是否为幽灵按钮（镂空按钮）
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染
+   * @default ''
+   */
+  href?: string;
+  /**
+   * 按钮内部图标，可完全自定义
+   */
+  icon?: TElement;
+  /**
+   * 是否显示为加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
+   * @default rectangle
+   */
+  shape?: "rectangle" | "square" | "round" | "circle";
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 右侧内容，可用于定义右侧图标
+   */
+  suffix?: TElement;
+  /**
+   * 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题
+   */
+  tag?: "button" | "a" | "div";
+  /**
+   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+   */
+  theme?: "default" | "primary" | "danger" | "warning" | "success";
+  /**
+   * 按钮类型
+   * @default button
+   */
+  type?: "submit" | "reset" | "button";
+  /**
+   * 按钮形式，基础、线框、虚线、文字
+   * @default base
+   */
+  variant?: "base" | "outline" | "dashed" | "text";
+  /**
+   * 点击时触发
+   */
+  onClick?: (e: MouseEvent<HTMLElement>) => void;
+}

package/checkbox/Checkbox.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import forwardRefWithStatics from "../utils/forwardRefWithStatics";
+import Check, { CheckProps } from "../common/Check";
+import CheckboxGroup from "./CheckboxGroup";
+import { checkboxDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export type CheckboxProps = Omit<CheckProps, "type">;
+
+const Checkbox = forwardRefWithStatics(
+  (props: CheckboxProps, ref: React.Ref<HTMLLabelElement>) => (
+    <Check ref={ref} type="checkbox" {...useDefaultProps<CheckboxProps>(props, checkboxDefaultProps)} />
+  ),
+  { Group: CheckboxGroup }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;

package/checkbox/CheckboxGroup.tsx

@@ -0,0 +1,207 @@
+import React, { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import classNames from "classnames";
+import { isNumber } from "lodash-es";
+import useConfig from "../hooks/useConfig";
+import { CheckContext, CheckContextValue, CheckProps } from "../common/Check";
+import { CheckboxGroupValue, CheckboxOption, CheckboxOptionObj, TdCheckboxGroupProps, TdCheckboxProps } from "./type";
+import { StyledProps } from "../common";
+import useControlled from "../hooks/useControlled";
+import Checkbox from "./Checkbox";
+import { checkboxGroupDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+import type { CheckboxProps } from "./Checkbox";
+
+export interface CheckboxGroupProps<T extends CheckboxGroupValue = CheckboxGroupValue>
+  extends TdCheckboxGroupProps<T>,
+    StyledProps {
+  children?: React.ReactNode;
+}
+
+// 将 checkBox 的 value 转换为 string|number
+const getCheckboxValue = (v: CheckboxOption): string | number => {
+  switch (typeof v) {
+    case "number":
+      return v as number;
+    case "string":
+      return v as string;
+    case "object": {
+      const vs = v as CheckboxOptionObj;
+      return vs.value;
+    }
+    default:
+      return undefined;
+  }
+};
+
+/**
+ * 多选选项组，里面可以嵌套 <Checkbox />
+ */
+const CheckboxGroup = <T extends CheckboxGroupValue = CheckboxGroupValue>(props: CheckboxGroupProps<T>) => {
+  type ItemType = T[number];
+  const { classPrefix } = useConfig();
+  const {
+    onChange,
+    disabled,
+    className,
+    style,
+    children,
+    max,
+    options = []
+  } = useDefaultProps<CheckboxGroupProps<T>>(props, checkboxGroupDefaultProps as Partial<CheckboxGroupProps<T>>);
+
+  // 去掉所有 checkAll 之后的 options
+  const intervalOptions =
+    Array.isArray(options) && options.length > 0
+      ? options
+      : React.Children.map(
+          children,
+          (child: ReactElement<CheckboxProps>) =>
+            typeof child.type === "function" &&
+            "displayName" in child.type &&
+            child.type.displayName === "Checkbox" &&
+            child.props
+        ) || [];
+
+  const optionsWithoutCheckAll = intervalOptions.filter((t) => typeof t !== "object" || !t.checkAll);
+  const optionsWithoutCheckAllValues = [];
+  optionsWithoutCheckAll.forEach((v: string | number) => {
+    const vs = getCheckboxValue(v);
+    optionsWithoutCheckAllValues.push(vs);
+  });
+
+  const [internalValue, setInternalValue] = useControlled(props, "value", onChange);
+  const [localMax, setLocalMax] = useState(max);
+
+  const getCheckedSet = useCallback(() => {
+    if (!Array.isArray(internalValue)) {
+      return new Set<ItemType>([]);
+    }
+    return new Set<ItemType>([].concat(internalValue));
+  }, [internalValue]);
+  const checkedSet = useMemo(() => getCheckedSet(), [getCheckedSet]);
+
+  // 用于决定全选状态的属性
+  const indeterminate = useMemo(() => {
+    const list = Array.from(checkedSet);
+    return list.length !== 0 && list.length !== optionsWithoutCheckAll.length;
+  }, [checkedSet, optionsWithoutCheckAll]);
+
+  const checkAllChecked = useMemo(() => {
+    const list = Array.from(checkedSet);
+    return list.length === optionsWithoutCheckAll.length;
+  }, [checkedSet, optionsWithoutCheckAll]);
+
+  useEffect(() => {
+    if (!isNumber(max)) {
+      return;
+    }
+    if (max < checkedSet.size) {
+      console.warn("[TDesign] max should be less than the length of value, change is invalid");
+    } else {
+      // Use setTimeout to avoid calling setState synchronously within an effect
+      setTimeout(() => {
+        setLocalMax(max);
+      }, 0);
+    }
+  }, [max, checkedSet]);
+
+  const context: CheckContextValue = {
+    inject: (
+      checkProps: CheckProps & {
+        // check 组件不关心 value 的类型，只关心是否存在，所以为了兼容 checkbox group 的类型
+        // 此处覆盖 checkbox 默认 value 的类型，使用 checkbox group 的 generic type 代替
+        value: ItemType;
+      }
+    ) => {
+      // 如果已经受控，则不注入
+      if (typeof checkProps.checked !== "undefined") {
+        return checkProps;
+      }
+
+      const { value: checkValue } = checkProps;
+
+      return {
+        ...checkProps,
+        checked: checkProps.checkAll ? checkAllChecked : checkedSet.has(checkValue),
+        indeterminate: checkProps.checkAll ? indeterminate : checkProps.indeterminate,
+        disabled: checkProps.disabled || disabled || (checkedSet.size >= localMax && !checkedSet.has(checkValue)),
+        onChange(checked, { e }) {
+          if (typeof checkProps.onChange === "function") {
+            checkProps.onChange(checked, { e });
+          }
+
+          const checkedSet = getCheckedSet();
+          // 全选时的逻辑处理
+          if (checkProps.checkAll) {
+            checkedSet.clear();
+            if (checked) {
+              optionsWithoutCheckAllValues.forEach((v) => {
+                checkedSet.add(v);
+              });
+            }
+          } else if (checked) {
+            if (checkedSet.size >= localMax && isNumber(max)) return;
+            checkedSet.add(checkValue);
+          } else {
+            checkedSet.delete(checkValue);
+          }
+
+          const currentOptionChecked = optionsWithoutCheckAll.find((item: CheckboxProps) => item.value === checkValue);
+
+          // 此处 `as` 是因为 `Array.from` 会导致 `checkSet` 的 generic type 丢失
+          setInternalValue(Array.from(checkedSet) as T, {
+            e,
+            current: checkProps.checkAll ? undefined : (checkValue as TdCheckboxProps),
+            type: checked ? "check" : "uncheck",
+            option: checkProps.checkAll ? undefined : currentOptionChecked
+          });
+        }
+      };
+    }
+  };
+
+  // options 和 children 的抉择,在未明确说明时，暂时以 options 优先
+  const useOptions = Array.isArray(options) && options.length !== 0;
+
+  return (
+    <div className={classNames(`${classPrefix}-checkbox-group`, className)} style={style}>
+      <CheckContext.Provider value={context}>
+        {useOptions
+          ? options.map((v: CheckboxOption, index) => {
+              switch (typeof v) {
+                case "string":
+                  return (
+                    <Checkbox key={index} label={v} value={v}>
+                      {v}
+                    </Checkbox>
+                  );
+                case "number": {
+                  return (
+                    <Checkbox key={index} label={v} value={v}>
+                      {String(v)}
+                    </Checkbox>
+                  );
+                }
+                case "object": {
+                  const vs = v as CheckboxOptionObj;
+                  // CheckAll 的 checkBox 不存在 value,故用 checkAll_index 来保证尽量不和用户的 value 冲突.
+                  return vs.checkAll ? (
+                    <Checkbox {...vs} key={`checkAll_${index}`} indeterminate={indeterminate} />
+                  ) : (
+                    <Checkbox {...vs} key={index} disabled={vs.disabled || disabled} />
+                  );
+                }
+                default:
+                  return null;
+              }
+            })
+          : children}
+      </CheckContext.Provider>
+    </div>
+  );
+};
+
+CheckboxGroup.displayName = "CheckboxGroup";
+
+export default CheckboxGroup;

package/checkbox/defaultProps.ts

@@ -0,0 +1,14 @@
+import { CheckboxGroupValue, TdCheckboxProps, TdCheckboxGroupProps } from "./type";
+
+export const checkboxDefaultProps: TdCheckboxProps = {
+  checkAll: false,
+  defaultChecked: false,
+  disabled: undefined,
+  indeterminate: false,
+  readonly: false
+};
+
+export const checkboxGroupDefaultProps: Partial<TdCheckboxGroupProps> = {
+  max: undefined,
+  defaultValue: [] as CheckboxGroupValue
+};

package/checkbox/index.ts

@@ -0,0 +1,10 @@
+import _Checkbox from "./Checkbox";
+
+import "./style/index.js";
+
+export type { CheckboxProps } from "./Checkbox";
+export type { CheckboxGroupProps } from "./CheckboxGroup";
+export * from "./type";
+
+export const Checkbox = _Checkbox;
+export default Checkbox;

package/checkbox/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/checkbox/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/checkbox/_index.scss";

package/checkbox/type.ts

@@ -0,0 +1,117 @@
+import { TNode } from "../common";
+import { MouseEvent, ChangeEvent } from "react";
+
+export interface TdCheckboxProps {
+  /**
+   * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
+   * @default false
+   */
+  checkAll?: boolean;
+  /**
+   * 是否选中
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * 是否选中，非受控属性
+   * @default false
+   */
+  defaultChecked?: boolean;
+  /**
+   * 多选框内容，同 label
+   */
+  children?: TNode;
+  /**
+   * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 是否为半选
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * 主文案
+   */
+  label?: TNode;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 只读状态
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * HTML 原生属性
+   * @default ''
+   */
+  title?: string;
+  /**
+   * 多选框的值
+   */
+  value?: string | number | boolean;
+  /**
+   * 值变化时触发
+   */
+  onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLInputElement> }) => void;
+  /**
+   * 点击时触发，一般用于外层阻止冒泡场景
+   */
+  onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
+}
+
+export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
+  /**
+   * 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 支持最多选中的数量
+   */
+  max?: number;
+  /**
+   * 统一设置内部复选框 HTML 属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」
+   */
+  options?: Array<CheckboxOption>;
+  /**
+   * 选中值
+   * @default []
+   */
+  value?: T;
+  /**
+   * 选中值，非受控属性
+   * @default []
+   */
+  defaultValue?: T;
+  /**
+   * 值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项
+   */
+  onChange?: (value: T, context: CheckboxGroupChangeContext) => void;
+}
+
+export type CheckboxOption = string | number | CheckboxOptionObj;
+
+export interface CheckboxOptionObj {
+  label?: string | TNode;
+  value?: string | number;
+  disabled?: boolean;
+  name?: string;
+  checkAll?: true;
+}
+
+export type CheckboxGroupValue = Array<string | number | boolean>;
+
+export interface CheckboxGroupChangeContext {
+  e: ChangeEvent<HTMLDivElement>;
+  current: CheckboxOption | TdCheckboxProps;
+  option: CheckboxOption | TdCheckboxProps;
+  type: "check" | "uncheck";
+}

package/common/Check.tsx

@@ -0,0 +1,131 @@
+import React, { forwardRef, useContext, MouseEvent, ChangeEvent } from "react";
+import classNames from "classnames";
+import { isBoolean } from "lodash-es";
+import { omit } from "../utils/helper";
+import { StyledProps } from "../common";
+import useConfig from "../hooks/useConfig";
+import useControlled from "../hooks/useControlled";
+import { TdCheckboxProps } from "../checkbox/type";
+
+export interface CheckProps extends TdCheckboxProps, StyledProps {
+  type: "radio" | "radio-button" | "checkbox";
+  allowUncheck?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+  stopLabelTrigger?: boolean;
+}
+
+/**
+ * Check 组件支持使用 CheckContext 进行状态托管
+ */
+export const CheckContext = React.createContext<CheckContextValue>(null);
+
+/**
+ * 托管 Check 组件的状态，请提供 inject() 方法注入托管好的 props
+ */
+export interface CheckContextValue {
+  inject: (props: CheckProps) => CheckProps;
+}
+
+const Check = forwardRef<HTMLLabelElement, CheckProps>((_props, ref) => {
+  // 支持从 Context 注入
+  const context = useContext(CheckContext);
+  const props = context ? context.inject(_props) : _props;
+
+  const {
+    allowUncheck = false,
+    type,
+    disabled,
+    name,
+    value,
+    onChange,
+    indeterminate,
+    children,
+    label,
+    className,
+    style,
+    readonly,
+    onClick,
+    ...htmlProps
+  } = props;
+
+  const { classPrefix } = useConfig();
+
+  const TOnChange: (
+    checked: boolean,
+    context: { e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLInputElement> }
+  ) => void = onChange;
+
+  const [internalChecked, setInternalChecked] = useControlled(props, "checked", TOnChange);
+
+  const labelClassName = classNames(`${classPrefix}-${type}`, className, {
+    [`${classPrefix}-is-checked`]: internalChecked,
+    [`${classPrefix}-is-disabled`]: disabled,
+    [`${classPrefix}-is-indeterminate`]: indeterminate
+  });
+
+  const isDisabled = disabled || readonly;
+
+  const input = (
+    <input
+      readOnly={readonly}
+      type={type === "radio-button" ? "radio" : type}
+      className={`${classPrefix}-${type}__former`}
+      checked={internalChecked}
+      disabled={disabled}
+      name={name}
+      tabIndex={-1}
+      value={isBoolean(value) ? Number(value) : value}
+      data-value={typeof value === "string" ? `'${value}'` : value}
+      data-allow-uncheck={allowUncheck || undefined}
+      onClick={(e) => {
+        e.stopPropagation();
+        if ((type === "radio-button" || type === "radio") && allowUncheck && internalChecked) {
+          setInternalChecked(!e.currentTarget.checked, { e });
+        }
+      }}
+      onChange={(e) => {
+        if (isDisabled) return;
+        setInternalChecked(e.currentTarget.checked, { e });
+      }}
+    />
+  );
+  // Checkbox/ Radio 内容为空则不再渲染 span，不存在 0:Number 的情况
+  const showLabel = !!(children || label);
+
+  const handleLabelClick = (event: MouseEvent<HTMLSpanElement>) => {
+    // 在tree等组件中使用  阻止label触发checked 与expand冲突
+    if (props.stopLabelTrigger) {
+      event.preventDefault();
+    }
+  };
+
+  const onInnerClick = (e: MouseEvent<HTMLLabelElement>) => {
+    if (isDisabled) return;
+    onClick?.({ e });
+  };
+
+  return (
+    <label
+      ref={ref}
+      tabIndex={disabled ? undefined : 0}
+      className={labelClassName}
+      title={props.title}
+      style={style}
+      {...omit(htmlProps, ["checkAll", "stopLabelTrigger"])}
+      onClick={onInnerClick}
+    >
+      {input}
+      <span className={`${classPrefix}-${type}__input`} />
+      {showLabel && (
+        <span key="label" className={`${classPrefix}-${type}__label`} onClick={handleLabelClick}>
+          {children || label}
+        </span>
+      )}
+    </label>
+  );
+});
+
+Check.displayName = "Check";
+
+export default Check;

package/common/FakeArrow.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import { ClassName } from "../common";
+
+import useConfig from "../hooks/useConfig";
+
+// 翻转箭头统一组件
+function FakeArrow(props: {
+  className?: ClassName;
+  isActive?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}) {
+  const { classPrefix } = useConfig();
+  return (
+    <svg
+      style={props.style}
+      className={classNames(
+        `${classPrefix}-fake-arrow`,
+        {
+          [`${classPrefix}-fake-arrow--active`]: props?.isActive && !props?.disabled
+        },
+        props?.className
+      )}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" strokeOpacity="0.9" strokeWidth="1.3" />
+    </svg>
+  );
+}
+
+export default FakeArrow;

package/common/PluginContainer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ConfigProvider, { ConfigProviderProps } from "../config-provider";
+
+/**
+ *
+ * @param notSet 默认不传设置为true，函数是调用唤起组件不需要同步设置全局上下文信息
+ * @returns
+ */
+const PluginContainer: React.FC<ConfigProviderProps> = (props) => (
+  <>
+    {props?.globalConfig?.isContextEffectPlugin ? (
+      <ConfigProvider notSet {...props}>
+        {props?.children}
+      </ConfigProvider>
+    ) : (
+      props?.children
+    )}
+  </>
+);
+
+export default PluginContainer;