@tendaui/components 1.2.4 → 1.3.1

package/color-picker/utils/color-picker/format.ts

@@ -1,6 +1,6 @@
-import Color from './color';
-import { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, FORMATS } from './constants';
-import type { AlphaConvertibleFormat, BasicColorFormat, ColorFormat } from './types';
+import Color from "./color";
+import { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, FORMATS } from "./constants";
+import type { AlphaConvertibleFormat, BasicColorFormat, ColorFormat } from "./types";
 
 /**
  * 兜底处理用户传入的格式，例如：
@@ -18,8 +18,8 @@ export const initColorFormat = (format: ColorFormat, enableAlpha: boolean) => {
  * - encode：将字符串转换为单独的颜色值，例如 `{r: 255, g: 255, b: 255}`
  * - decode：获取完整的颜色字符串，例如 `rgb(255, 255, 255)`
  */
-export const getColorFormatMap = (color: Color, type: 'encode' | 'decode') => {
-  if (type === 'encode') {
+export const getColorFormatMap = (color: Color, type: "encode" | "decode") => {
+  if (type === "encode") {
     return {
       HSV: color.getHsva(),
       HSVA: color.getHsva(),
@@ -29,14 +29,14 @@ export const getColorFormatMap = (color: Color, type: 'encode' | 'decode') => {
       RGBA: color.getRgba(),
       CMYK: color.getCmyk(),
       CSS: {
-        css: color.css,
+        css: color.css
       },
       HEX: {
-        hex: color.hex,
+        hex: color.hex
       },
       HEX8: {
-        hex: color.hex8, // 为了减少转换 hex8 的 key 也对应 hex
-      },
+        hex: color.hex8 // 为了减少转换 hex8 的 key 也对应 hex
+      }
     };
   }
 
@@ -47,47 +47,42 @@ export const getColorFormatMap = (color: Color, type: 'encode' | 'decode') => {
 /**
  * 获取下拉框的格式选项
  */
-export const getColorFormatOptions = (enableAlpha: boolean) => (
+export const getColorFormatOptions = (enableAlpha: boolean) =>
   enableAlpha
     ? FORMATS.map((item) => (item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item as AlphaConvertibleFormat] : item))
-    : FORMATS
-);
+    : FORMATS;
 
 /**
  * 获取当前格式的输入框配置
  */
-export const getColorFormatInputs = (
-  format: ColorFormat = 'RGB',
-  enableAlpha: boolean
-) => {
+export const getColorFormatInputs = (format: ColorFormat = "RGB", enableAlpha: boolean) => {
   let finalFormat;
 
   /* 为了减少 `ALPHA_FORMAT_MAP` 中的重复代码
      `RGBA/HEX8/HSLA/HSVA` 会被转换为 `RGB/HEX/HSL/HSV` 后再匹配
      但在下一步会 push 一个代表透明度的输入框 */
   if (enableAlpha) {
-    finalFormat = Object.keys(ALPHA_FORMAT_MAP).find(
-      (key) => key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key as AlphaConvertibleFormat] === format
-    ) || format;
+    finalFormat =
+      Object.keys(ALPHA_FORMAT_MAP).find(
+        (key) => key in ALPHA_FORMAT_MAP && ALPHA_FORMAT_MAP[key as AlphaConvertibleFormat] === format
+      ) || format;
   } else {
     finalFormat = format;
   }
 
   if (!COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]) return [];
 
-  const configs = [
-    ...(COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]),
-  ];
+  const configs = [...COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]];
 
   // CMYK 格式不支持透明度
-  if (enableAlpha && format !== 'CMYK') {
+  if (enableAlpha && format !== "CMYK") {
     configs.push({
-      type: 'inputNumber',
-      key: 'a',
+      type: "inputNumber",
+      key: "a",
       min: 0,
       max: 100,
       format: (value: number) => `${value}%`,
-      flex: 1.15,
+      flex: 1.15
     });
   }
 

package/color-picker/utils/color-picker/gradient.ts

@@ -1,10 +1,10 @@
-import { isString, isNull } from 'lodash-es';
-/* eslint-disable no-param-reassign */
+import { isString, isNull } from "lodash-es";
+
 /**
  * 用于反解析渐变字符串为对象
  * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
  */
-import tinyColor from 'tinycolor2';
+import tinyColor from "tinycolor2";
 
 /**
  * Utility combine multiple regular expressions.
@@ -13,7 +13,7 @@ import tinyColor from 'tinycolor2';
  * @param {string} flags Normal RegExp flags.
  */
 const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => {
-  let source = '';
+  let source = "";
   for (let i = 0; i < regexpList.length; i++) {
     if (isString(regexpList[i])) {
       source += regexpList[i];
@@ -51,7 +51,7 @@ interface ParseGradientResult {
  */
 const generateRegExp = (): RegExpLib => {
   // Note any variables with "Capture" in name include capturing bracket set(s).
-  const searchFlags = 'gi'; // ignore case for angles, "rgb" etc
+  const searchFlags = "gi"; // ignore case for angles, "rgb" etc
   const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types
   // optional 2nd part
   const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
@@ -66,25 +66,25 @@ const generateRegExp = (): RegExpLib => {
     rKeyword = /[_a-z-][_a-z0-9-]*/;
   const // "red", "transparent".
     rColor = combineRegExp(
-      ['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'],
-      '',
+      ["(?:", rColorHex, "|", "(?:rgb|hsl)", rDigits3, "|", "(?:rgba|hsla)", rDigits4, "|", rKeyword, ")"],
+      ""
     );
-  const rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
+  const rColorStop = combineRegExp([rColor, "(?:\\s+", rValue, "(?:\\s+", rValue, ")?)?"], "");
   const // Single Color Stop, optional %, optional length.
-    rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
+    rColorStopList = combineRegExp(["(?:", rColorStop, rComma, ")*", rColorStop], "");
   const // List of color stops min 1.
-    rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');
+    rLineCapture = combineRegExp(["(?:(", rAngle, ")|", rSideCornerCapture, ")"], "");
   const // Angle or SideCorner
-    rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
+    rGradientSearch = combineRegExp(["(?:(", rLineCapture, ")", rComma, ")?(", rColorStopList, ")"], searchFlags);
   const // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
     rColorStopSearch = combineRegExp(
-      ['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'],
-      searchFlags,
+      ["\\s*(", rColor, ")", "(?:\\s+", "(", rValue, "))?", "(?:", rComma, "\\s*)?"],
+      searchFlags
     ); // Capture 1:"color" and 2:"position" (optional).
 
   return {
     gradientSearch: rGradientSearch,
-    colorStopSearch: rColorStopSearch,
+    colorStopSearch: rColorStopSearch
   };
 };
 
@@ -111,22 +111,19 @@ const parseGradient = (regExpLib: RegExpLib, input: string) => {
   if (!isNull(matchGradient)) {
     result = {
       original: matchGradient[0],
-      colorStopList: [],
+      colorStopList: []
     };
 
     // Line (Angle or Side-Corner).
     if (matchGradient[1]) {
-      // eslint-disable-next-line prefer-destructuring
       result.line = matchGradient[1];
     }
     // Angle or undefined if side-corner.
     if (matchGradient[2]) {
-      // eslint-disable-next-line prefer-destructuring
       result.angle = matchGradient[2];
     }
     // Side-corner or undefined if angle.
     if (matchGradient[3]) {
-      // eslint-disable-next-line prefer-destructuring
       result.sideCorner = matchGradient[3];
     }
 
@@ -137,12 +134,11 @@ const parseGradient = (regExpLib: RegExpLib, input: string) => {
     matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
     while (!isNull(matchColorStop)) {
       stopResult = {
-        color: matchColorStop[1],
+        color: matchColorStop[1]
       };
 
       // Position (optional).
       if (matchColorStop[2]) {
-        // eslint-disable-next-line prefer-destructuring
         stopResult.position = matchColorStop[2];
       }
       result.colorStopList.push(stopResult);
@@ -186,14 +182,14 @@ const sideCornerDegreeMap = {
   right: 90,
   bottom: 180,
   left: 270,
-  'top left': 315,
-  'left top': 315,
-  'top right': 45,
-  'right top': 45,
-  'bottom left': 225,
-  'left bottom': 225,
-  'bottom right': 135,
-  'right bottom': 135,
+  "top left": 315,
+  "left top": 315,
+  "top right": 45,
+  "right top": 45,
+  "bottom left": 225,
+  "left bottom": 225,
+  "bottom right": 135,
+  "right bottom": 135
 };
 
 /**
@@ -207,26 +203,24 @@ export const parseGradientString = (input: string): GradientColors | false => {
 
   const gradientColors: GradientColors = {
     points: [],
-    degree: 0,
+    degree: 0
   };
 
   const result: ParseGradientResult = parseGradient(REGEXP_LIB, match[1]);
   if (result.original.trim() !== match[1].trim()) return false;
 
-  const points: GradientColorPoint[] = result.colorStopList.map(
-    ({ color, position }, index, array) => {
-      const point = Object.create(null);
-      point.color = tinyColor(color).toRgbString();
-
-      let left = parseFloat(position);
-      if (Number.isNaN(left)) {
-        left = (index / (array.length - 1)) * 100;
-      }
+  const points: GradientColorPoint[] = result.colorStopList.map(({ color, position }, index, array) => {
+    const point = Object.create(null);
+    point.color = tinyColor(color).toRgbString();
 
-      point.left = left;
-      return point;
+    let left = parseFloat(position);
+    if (Number.isNaN(left)) {
+      left = (index / (array.length - 1)) * 100;
     }
-  );
+
+    point.left = left;
+    return point;
+  });
   gradientColors.points = points;
 
   let degree = parseInt(result.angle, 10);

package/color-picker/utils/color-picker/types.ts

@@ -1,9 +1,9 @@
-import { ALPHA_FORMAT_MAP, FORMATS } from './constants';
+import { ALPHA_FORMAT_MAP, FORMATS } from "./constants";
 
 /**
  * 非透明色类型
  */
-export type BasicColorFormat = typeof FORMATS[number];
+export type BasicColorFormat = (typeof FORMATS)[number];
 
 /**
  * 支持转为透明格式的非透明色类型
@@ -13,7 +13,7 @@ export type AlphaConvertibleFormat = keyof typeof ALPHA_FORMAT_MAP;
 /**
  * 透明色类型
  */
-export type AlphaColorFormat = typeof ALPHA_FORMAT_MAP[AlphaConvertibleFormat];
+export type AlphaColorFormat = (typeof ALPHA_FORMAT_MAP)[AlphaConvertibleFormat];
 
 /**
  * 完整的颜色格式类型
@@ -27,7 +27,7 @@ export interface ColorInputProp {
   key: string;
   min?: number;
   max?: number;
-  type: 'input' | 'inputNumber';
+  type: "input" | "inputNumber";
   flex?: number;
   format?: Function;
 }

package/config-provider/ConfigContext.tsx

@@ -6,6 +6,7 @@ import defaultLocale from "../locale/zh_CN";
 
 export const defaultGlobalConfig: GlobalConfigProvider = {
   classPrefix: defaultClassPrefix,
+  direction: "ltr",
   attach: null,
   form: {},
   icon: {} as Record<string, typeof Icon>,

package/config-provider/ConfigProvider.tsx

@@ -36,6 +36,7 @@ export const setGlobalConfig = (configInfo?: GlobalConfigProvider) => {
 export default function ConfigProvider({ children, globalConfig, notSet }: ConfigProviderProps) {
   const defaultData = cloneDeep(defaultGlobalConfig);
   const mergedGlobalConfig = merge(defaultData, globalConfig);
+  const direction = mergedGlobalConfig.direction || "ltr";
 
   useEffect(() => {
     if (!notSet) {
@@ -44,7 +45,23 @@ export default function ConfigProvider({ children, globalConfig, notSet }: Confi
     }
   }, [mergedGlobalConfig, notSet]);
 
-  return <ConfigContext.Provider value={{ globalConfig: mergedGlobalConfig }}>{children}</ConfigContext.Provider>;
+  useEffect(() => {
+    if (notSet || typeof document === "undefined") return;
+    document.documentElement.setAttribute("dir", direction);
+    document.body.setAttribute("dir", direction);
+  }, [direction, notSet]);
+
+  return (
+    <ConfigContext.Provider value={{ globalConfig: mergedGlobalConfig }}>
+      <div
+        className={`${mergedGlobalConfig.classPrefix}-config-provider`}
+        dir={direction}
+        style={{ display: "contents" }}
+      >
+        {children}
+      </div>
+    </ConfigContext.Provider>
+  );
 }
 
 ConfigProvider.getGlobalConfig = getGlobalConfig;

package/config-provider/type.ts

@@ -9,6 +9,11 @@ export interface TdConfigProviderProps {
 }
 
 export interface GlobalConfigProvider {
+  /**
+   * 文本方向，'rtl' 表示从右往左
+   * @default 'ltr'
+   */
+  direction?: "ltr" | "rtl";
   /**
    * 警告全局配置
    */

package/dialog/_example/base.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function Base() {
+  const [visible, setVisible] = useState(false);
+
+  const onConfirm = (context) => {
+    console.log("点击了确认按钮", context);
+    setVisible(false);
+  };
+
+  const onClose = (context) => {
+    console.log("关闭弹窗", context);
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        打开对话框
+      </Button>
+      <Dialog header="基础对话框" visible={visible} onClose={onClose} onConfirm={onConfirm}>
+        <p>这是一个基础对话框示例。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/confirm-loading.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function ConfirmLoading() {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleConfirm = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setVisible(false);
+    }, 2000);
+  };
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        异步确认
+      </Button>
+      <Dialog
+        header="异步确认"
+        visible={visible}
+        confirmLoading={loading}
+        onClose={() => setVisible(false)}
+        onConfirm={handleConfirm}
+      >
+        <p>点击确认按钮后会显示加载状态，2秒后自动关闭。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/custom-buttons.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function CustomButtons() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        自定义按钮
+      </Button>
+      <Dialog
+        header="自定义按钮"
+        visible={visible}
+        confirmBtn={{ content: "我知道了", theme: "primary" }}
+        cancelBtn={{ content: "稍后再说", variant: "outline" }}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <p>这是一个带自定义按钮文字的对话框。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/full-screen.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function FullScreen() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        全屏对话框
+      </Button>
+      <Dialog
+        header="全屏对话框"
+        mode="full-screen"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <div style={{ padding: "20px" }}>
+          <p>这是一个全屏对话框，适合展示大量内容。</p>
+          <p>可以在这里放置复杂的表单、数据展示等。</p>
+        </div>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/hide-buttons.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function HideButtons() {
+  const [noCancelVisible, setNoCancelVisible] = useState(false);
+  const [noFooterVisible, setNoFooterVisible] = useState(false);
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px" }}>
+        <Button theme="primary" onClick={() => setNoCancelVisible(true)}>
+          无取消按钮
+        </Button>
+        <Button theme="primary" onClick={() => setNoFooterVisible(true)}>
+          无底部操作栏
+        </Button>
+      </div>
+
+      <Dialog
+        header="无取消按钮"
+        visible={noCancelVisible}
+        cancelBtn={null}
+        onClose={() => setNoCancelVisible(false)}
+        onConfirm={() => setNoCancelVisible(false)}
+      >
+        <p>这是一个只有确认按钮的对话框。</p>
+      </Dialog>
+
+      <Dialog
+        header="无底部操作栏"
+        visible={noFooterVisible}
+        footer={false}
+        onClose={() => setNoFooterVisible(false)}
+      >
+        <p>这是一个没有底部操作栏的对话框，点击右上角关闭按钮关闭。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/modeless.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function Modeless() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        非模态对话框
+      </Button>
+      <Dialog
+        header="非模态对话框"
+        mode="modeless"
+        draggable
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <p>这是一个非模态对话框，可以拖拽移动。</p>
+        <p>可以同时操作页面上的其他内容。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/placement.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function Placement() {
+  const [topVisible, setTopVisible] = useState(false);
+  const [centerVisible, setCenterVisible] = useState(false);
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px" }}>
+        <Button theme="primary" onClick={() => setTopVisible(true)}>
+          顶部对话框
+        </Button>
+        <Button theme="primary" onClick={() => setCenterVisible(true)}>
+          居中对话框
+        </Button>
+      </div>
+
+      <Dialog
+        header="顶部对话框"
+        placement="top"
+        visible={topVisible}
+        onClose={() => setTopVisible(false)}
+        onConfirm={() => setTopVisible(false)}
+      >
+        <p>这是一个显示在顶部的对话框。</p>
+      </Dialog>
+
+      <Dialog
+        header="居中对话框"
+        placement="center"
+        visible={centerVisible}
+        onClose={() => setCenterVisible(false)}
+        onConfirm={() => setCenterVisible(false)}
+      >
+        <p>这是一个垂直居中的对话框。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/plugin-example.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Button, DialogPlugin } from "@tendaui/react";
+
+export default function PluginExample() {
+  const buttonStyle = { marginRight: 16 };
+
+  const showDialog = () => {
+    const myDialog = DialogPlugin({
+      header: "DialogPlugin 调用",
+      body: "这是通过 DialogPlugin 函数调用的对话框",
+      onConfirm: ({ e }) => {
+        console.log("confirm clicked", e);
+        myDialog.hide();
+      },
+      onClose: ({ trigger }) => {
+        console.log("trigger:", trigger);
+        myDialog.hide();
+      }
+    });
+  };
+
+  const showConfirm = () => {
+    const confirmDialog = DialogPlugin.confirm({
+      header: "确认操作",
+      body: "确定要执行此操作吗？",
+      confirmBtn: "确定",
+      cancelBtn: "取消",
+      onConfirm: () => {
+        confirmDialog.hide();
+      },
+      onClose: () => {
+        confirmDialog.hide();
+      }
+    });
+  };
+
+  const showAlert = () => {
+    const alertDialog = DialogPlugin.alert({
+      header: "提示",
+      body: "这是一条重要提示信息。",
+      confirmBtn: { content: "我知道了", theme: "primary" },
+      onConfirm: () => {
+        alertDialog.hide();
+      },
+      onClose: () => {
+        alertDialog.hide();
+      }
+    });
+  };
+
+  return (
+    <div>
+      <p style={{ marginBottom: "16px", color: "#666" }}>
+        函数调用方式：DialogPlugin(options) / DialogPlugin.confirm(options) / DialogPlugin.alert(options)
+      </p>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>
+        <Button theme="primary" onClick={showDialog} style={buttonStyle}>
+          DialogPlugin
+        </Button>
+        <Button theme="primary" onClick={showConfirm} style={buttonStyle}>
+          DialogPlugin.confirm
+        </Button>
+        <Button theme="primary" onClick={showAlert} style={buttonStyle}>
+          DialogPlugin.alert
+        </Button>
+      </div>
+    </div>
+  );
+}