@tendaui/components 1.0.0 → 1.0.2

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

@@ -0,0 +1,100 @@
+/* eslint-disable no-use-before-define */
+export interface Coordinate {
+  x: number;
+  y: number;
+}
+
+export type DraggableEvent = MouseEvent;
+
+interface DraggableCallback {
+  (coordinate: Coordinate, event?: DraggableEvent): void;
+}
+
+export interface DraggableProps {
+  start?: DraggableCallback;
+  drag?: DraggableCallback;
+  end?: DraggableCallback;
+}
+
+interface DraggableHandles {
+  start: (event: DraggableEvent) => void;
+  drag: (event: DraggableEvent) => void;
+  end: (event: DraggableEvent) => void;
+}
+
+// 配置项
+const defaultsOptions: DraggableProps = {
+  start: (coordinate: Coordinate, event: DraggableEvent) => {},
+  drag: (coordinate: Coordinate, event: DraggableEvent) => {},
+  end: (coordinate: Coordinate, event: DraggableEvent) => {},
+};
+
+export class Draggable {
+  private dragging = false;
+
+  private $el: HTMLElement;
+
+  private props: DraggableProps;
+
+  private handles: DraggableHandles;
+
+  constructor(el: HTMLElement, options?: DraggableProps) {
+    this.$el = el;
+    this.props = { ...defaultsOptions, ...options };
+    this.handles = {
+      start: this.#dragStart.bind(this),
+      drag: this.#drag.bind(this),
+      end: this.#dragEnd.bind(this),
+    };
+    this.$el.addEventListener('mousedown', this.handles.start, false);
+  }
+
+  #dragStart(event: DraggableEvent) {
+    if (this.dragging) {
+      return;
+    }
+    // event.preventDefault();
+    window.addEventListener('mousemove', this.handles.drag, false);
+    window.addEventListener('mouseup', this.handles.end, false);
+    window.addEventListener('contextmenu', this.handles.end, false);
+    this.dragging = true;
+    this.props.start(this.#getCoordinate(event), event);
+  }
+
+  #drag(event: DraggableEvent) {
+    if (!this.dragging) {
+      return;
+    }
+    this.props.drag(this.#getCoordinate(event), event);
+  }
+
+  #dragEnd(event: DraggableEvent) {
+    setTimeout(() => {
+      this.dragging = false;
+      this.props.end(this.#getCoordinate(event), event);
+    }, 0);
+    window.removeEventListener('mousemove', this.handles.drag, false);
+    window.removeEventListener('mouseup', this.handles.end, false);
+    window.removeEventListener('contextmenu', this.handles.end, false);
+  }
+
+  #getCoordinate(event: DraggableEvent) {
+    const rect = this.$el.getBoundingClientRect();
+    const mouseEvent = event;
+    const left = mouseEvent.clientX - rect.left;
+    const top = mouseEvent.clientY - rect.top;
+    return {
+      y: Math.min(Math.max(0, top), rect.height),
+      x: Math.min(Math.max(0, left), rect.width),
+    };
+  }
+
+  destroy() {
+    this.$el.removeEventListener('mousedown', this.handles.start, false);
+    window.removeEventListener('mousemove', this.handles.drag, false);
+    window.removeEventListener('mouseup', this.handles.end, false);
+    window.removeEventListener('contextmenu', this.handles.end, false);
+  }
+}
+
+export default Draggable;

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

@@ -0,0 +1,95 @@
+import Color from './color';
+import { ALPHA_FORMAT_MAP, COLOR_FORMAT_INPUTS, FORMATS } from './constants';
+import type { AlphaConvertibleFormat, BasicColorFormat, ColorFormat } from './types';
+
+/**
+ * 兜底处理用户传入的格式，例如：
+ * - 传入 `RGB`， 但 `enableAlpha` ，则返回 `RGBA`
+ */
+export const initColorFormat = (format: ColorFormat, enableAlpha: boolean) => {
+  if (enableAlpha && format in ALPHA_FORMAT_MAP) {
+    return format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format as AlphaConvertibleFormat] : format;
+  }
+  return format as BasicColorFormat;
+};
+
+/**
+ * 获取不同格式的输入输出值
+ * - encode：将字符串转换为单独的颜色值，例如 `{r: 255, g: 255, b: 255}`
+ * - decode：获取完整的颜色字符串，例如 `rgb(255, 255, 255)`
+ */
+export const getColorFormatMap = (color: Color, type: 'encode' | 'decode') => {
+  if (type === 'encode') {
+    return {
+      HSV: color.getHsva(),
+      HSVA: color.getHsva(),
+      HSL: color.getHsla(),
+      HSLA: color.getHsla(),
+      RGB: color.getRgba(),
+      RGBA: color.getRgba(),
+      CMYK: color.getCmyk(),
+      CSS: {
+        css: color.css,
+      },
+      HEX: {
+        hex: color.hex,
+      },
+      HEX8: {
+        hex: color.hex8, // 为了减少转换 hex8 的 key 也对应 hex
+      },
+    };
+  }
+
+  // decode
+  return color.getFormatsColorMap();
+};
+
+/**
+ * 获取下拉框的格式选项
+ */
+export const getColorFormatOptions = (enableAlpha: boolean) => (
+  enableAlpha
+    ? FORMATS.map((item) => (item in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[item as AlphaConvertibleFormat] : item))
+    : FORMATS
+);
+
+/**
+ * 获取当前格式的输入框配置
+ */
+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;
+  } else {
+    finalFormat = format;
+  }
+
+  if (!COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]) return [];
+
+  const configs = [
+    ...(COLOR_FORMAT_INPUTS[finalFormat as BasicColorFormat]),
+  ];
+
+  // CMYK 格式不支持透明度
+  if (enableAlpha && format !== 'CMYK') {
+    configs.push({
+      type: 'inputNumber',
+      key: 'a',
+      min: 0,
+      max: 100,
+      format: (value: number) => `${value}%`,
+      flex: 1.15,
+    });
+  }
+
+  return configs;
+};

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

@@ -0,0 +1,243 @@
+import { isString, isNull } from 'lodash-es';
+/* eslint-disable no-param-reassign */
+/**
+ * 用于反解析渐变字符串为对象
+ * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
+ */
+import tinyColor from 'tinycolor2';
+
+/**
+ * Utility combine multiple regular expressions.
+ *
+ * @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
+ * @param {string} flags Normal RegExp flags.
+ */
+const combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => {
+  let source = '';
+  for (let i = 0; i < regexpList.length; i++) {
+    if (isString(regexpList[i])) {
+      source += regexpList[i];
+    } else {
+      source += (regexpList[i] as RegExp).source;
+    }
+  }
+  return new RegExp(source, flags);
+};
+
+interface RegExpLib {
+  gradientSearch: RegExp;
+  colorStopSearch: RegExp;
+}
+
+interface ColorStop {
+  color: string;
+  position?: string;
+}
+
+interface ParseGradientResult {
+  original: string;
+  colorStopList?: ColorStop[];
+  line?: string;
+  angle?: string;
+  sideCorner?: string;
+}
+
+/**
+ * Generate the required regular expressions once.
+ *
+ * Regular Expressions are easier to manage this way and can be well described.
+ *
+ * @result {object} Object containing regular expressions.
+ */
+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 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))?))/;
+  const rComma = /\s*,\s*/; // Allow space around comma.
+  const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form
+  const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
+  const // "(1, 2, 3)"
+    rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
+  const // "(1, 2, 3, 4)"
+    rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
+  const // ".9", "-5px", "100%".
+    rKeyword = /[_a-z-][_a-z0-9-]*/;
+  const // "red", "transparent".
+    rColor = combineRegExp(
+      ['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'],
+      '',
+    );
+  const rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
+  const // Single Color Stop, optional %, optional length.
+    rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
+  const // List of color stops min 1.
+    rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');
+  const // Angle or SideCorner
+    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,
+    ); // Capture 1:"color" and 2:"position" (optional).
+
+  return {
+    gradientSearch: rGradientSearch,
+    colorStopSearch: rColorStopSearch,
+  };
+};
+
+/**
+ * Actually parse the input gradient parameters string into an object for reusability.
+ *
+ *
+ * @note Really this only supports the standard syntax not historical versions, see MDN for details
+ *       https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
+ *
+ * @param regExpLib
+ * @param {string} input
+ * @returns {object|undefined}
+ */
+const parseGradient = (regExpLib: RegExpLib, input: string) => {
+  let result: ParseGradientResult;
+  let matchColorStop: any;
+  let stopResult: ColorStop;
+
+  // reset search position, because we reuse regex.
+  regExpLib.gradientSearch.lastIndex = 0;
+
+  const matchGradient = regExpLib.gradientSearch.exec(input);
+  if (!isNull(matchGradient)) {
+    result = {
+      original: matchGradient[0],
+      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];
+    }
+
+    // reset search position, because we reuse regex.
+    regExpLib.colorStopSearch.lastIndex = 0;
+
+    // Loop though all the color-stops.
+    matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    while (!isNull(matchColorStop)) {
+      stopResult = {
+        color: matchColorStop[1],
+      };
+
+      // Position (optional).
+      if (matchColorStop[2]) {
+        // eslint-disable-next-line prefer-destructuring
+        stopResult.position = matchColorStop[2];
+      }
+      result.colorStopList.push(stopResult);
+
+      // Continue searching from previous position.
+      matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
+    }
+  }
+
+  // Can be undefined if match not found.
+  return result;
+};
+
+export interface GradientColorPoint {
+  id?: string;
+  color?: string;
+  left?: number;
+}
+
+export interface GradientColors {
+  points: GradientColorPoint[];
+  degree: number;
+}
+
+const REGEXP_LIB = generateRegExp();
+const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
+
+/**
+ * 验证是否是渐变字符串
+ * @param input
+ * @returns
+ */
+export const isGradientColor = (input: string): null | RegExpExecArray => {
+  REG_GRADIENT.lastIndex = 0;
+  return REG_GRADIENT.exec(input);
+};
+
+// 边界字符串和角度关系
+const sideCornerDegreeMap = {
+  top: 0,
+  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,
+};
+
+/**
+ * 解析渐变字符串为 GradientColors 对象
+ * @param input
+ * @returns
+ */
+export const parseGradientString = (input: string): GradientColors | false => {
+  const match = isGradientColor(input);
+  if (!match) return false;
+
+  const gradientColors: GradientColors = {
+    points: [],
+    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;
+      }
+
+      point.left = left;
+      return point;
+    }
+  );
+  gradientColors.points = points;
+
+  let degree = parseInt(result.angle, 10);
+  if (Number.isNaN(degree)) {
+    /* 如果角度不存在，使用 CSS 渐变的默认逻辑（180 deg）
+       https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients */
+    degree = sideCornerDegreeMap[result.sideCorner as keyof typeof sideCornerDegreeMap] || 180;
+  }
+  gradientColors.degree = degree;
+
+  return gradientColors;
+};
+
+export default parseGradientString;

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

@@ -0,0 +1,7 @@
+export * from "./cmyk";
+export * from "./color";
+export * from "./constants";
+export * from "./draggable";
+export * from "./format";
+export * from "./gradient";
+export * from "./types";

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

@@ -0,0 +1,33 @@
+import { ALPHA_FORMAT_MAP, FORMATS } from './constants';
+
+/**
+ * 非透明色类型
+ */
+export type BasicColorFormat = typeof FORMATS[number];
+
+/**
+ * 支持转为透明格式的非透明色类型
+ */
+export type AlphaConvertibleFormat = keyof typeof ALPHA_FORMAT_MAP;
+
+/**
+ * 透明色类型
+ */
+export type AlphaColorFormat = typeof ALPHA_FORMAT_MAP[AlphaConvertibleFormat];
+
+/**
+ * 完整的颜色格式类型
+ */
+export type ColorFormat = BasicColorFormat | AlphaColorFormat;
+
+/**
+ * 不同颜色格式对应的输入框配置
+ */
+export interface ColorInputProp {
+  key: string;
+  min?: number;
+  max?: number;
+  type: 'input' | 'inputNumber';
+  flex?: number;
+  format?: Function;
+}

package/common/observe.ts

@@ -0,0 +1,33 @@
+export default function observe(
+  element: HTMLElement,
+  root: HTMLElement,
+  callback: Function,
+  marginBottom: number
+): IntersectionObserver {
+  if (typeof window === "undefined") return null;
+  if (!window || !window.IntersectionObserver) {
+    callback();
+    return null;
+  }
+  let io: IntersectionObserver = null;
+  try {
+    io = new window.IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting) {
+          callback();
+          io.unobserve(element);
+        }
+      },
+      {
+        rootMargin: `0px 0px ${marginBottom}px 0px`,
+        root
+      }
+    );
+    io.observe(element);
+  } catch (e) {
+    console.error(e);
+    callback();
+  }
+  return io;
+}

package/common.ts

@@ -27,6 +27,7 @@ export type HorizontalAlignEnum = "left" | "center" | "right";
 export type VerticalAlignEnum = "top" | "middle" | "bottom";
 
 export type LayoutEnum = "vertical" | "horizontal";
+
 // TElement 表示 API 只接受传入组件
 export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
 
@@ -63,6 +64,8 @@ export interface ScrollToElementParams {
   /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
   time?: number;
   behavior?: "auto" | "smooth";
+  /** 跳转元素的 key */
+  key?: string | number;
 }
 
 /**
@@ -74,3 +77,20 @@ export type PlainObject = { [key: string]: unknown };
  * @deprecated use TScroll instead
  */
 export type InfinityScroll = TScroll;
+
+export const ARROW_DOWN_REG = /^ArrowDown$/i;
+export const ARROW_UP_REG = /^ArrowUp$/i;
+export const ARROW_LEFT_REG = /^ArrowLeft$/i;
+export const ARROW_RIGHT_REG = /^ArrowRight$/i;
+export const ESCAPE_REG = /^Escape$/i;
+export const SPACE_REG = /^Space$/i;
+export const ENTER_REG = /^Enter$/i;
+export const SHIFT_REG = /^(Shift|ShiftLeft|ShiftRight)$/i;
+export const CLEAR_REG = /^KeyC$/i;
+export const ALL_REG = /^(KeyA|KeyL)$/i;
+export const CHECKED_CODE_REG = /^(Enter|Space)$/i;
+
+export const THEME_MODE = "theme-mode";
+
+export type ScrollContainer = string | (() => HTMLElement | Window) | HTMLElement | Window | null;
+export type ScrollContainerElement = HTMLElement | Window;

package/config-provider/ConfigContext.tsx

@@ -2,13 +2,15 @@ import { createContext } from "react";
 import { GlobalConfigProvider } from "./type";
 import Icon from "@tendaui/icons";
 export const defaultClassPrefix = "t";
+import defaultLocale from "../locale/zh_CN";
 
 export const defaultGlobalConfig: GlobalConfigProvider = {
   classPrefix: defaultClassPrefix,
   attach: null,
   form: {},
   icon: {} as Record<string, typeof Icon>,
-  isContextEffectPlugin: false
+  isContextEffectPlugin: false,
+  ...defaultLocale
 };
 
 export const defaultContext = {
@@ -19,3 +21,4 @@ export type Config = typeof defaultContext;
 
 const ConfigContext = createContext(defaultContext);
 export default ConfigContext;
+export type Locale = typeof defaultLocale;

package/config-provider/index.ts

@@ -1,7 +1,7 @@
 import ConfigProvider, { merge } from "./ConfigProvider";
 import ConfigContext from "./ConfigContext";
 
-export type { Config } from "./ConfigContext";
+export type { Config, Locale } from "./ConfigContext";
 export type { ConfigProviderProps } from "./ConfigProvider";
 export * from "./type";
 

package/dialog/DialogCard.tsx

@@ -12,7 +12,7 @@ import { StyledProps, TNode } from "../common";
 import parseTNode from "../utils/parseTNode";
 import useConfig from "../hooks/useConfig";
 import useGlobalIcon from "../hooks/useGlobalIcon";
-// import { useLocaleReceiver } from '../locale/LocalReceiver';
+import { useLocaleReceiver } from "../locale/LocalReceiver";
 import { dialogCardDefaultProps } from "./defaultProps";
 import useDefaultProps from "../hooks/useDefaultProps";
 
@@ -44,11 +44,9 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
     InfoCircleFilledIcon: TdInfoCircleFilledIcon,
     CheckCircleFilledIcon: TdCheckCircleFilledIcon
   });
-  // const [local, t] = useLocaleReceiver('dialog');
-  // const confirmText = t(local.confirm);
-  // const cancelText = t(local.cancel);
-  const confirmText = "确认";
-  const cancelText = "取消";
+  const [local, t] = useLocaleReceiver("dialog");
+  const confirmText = t(local.confirm);
+  const cancelText = t(local.cancel);
   const {
     theme,
     header,

package/dialog/hooks/useDialogPosition.ts

@@ -27,8 +27,7 @@ export default function useDialogPosition(visible: boolean | undefined, dialogCa
     if (!visible) return;
     // 动画渲染初始位置
     if (mousePosRef.current && dialogCardRef.current) {
-      // eslint-disable-next-line
-      dialogCardRef.current.style.transformOrigin = `${mousePosRef.current.x - dialogCardRef.current.offsetLeft}px ${
+      dialogCardRef.current.style.transformOrigin = `${mousePosRef.current.x - dialogCardRef.current.offsetLeft}px ${
         mousePosRef.current.y - dialogCardRef.current.offsetTop
       }px`;
     }

package/dialog/plugin.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "../utils/react-render";
 import DialogComponent, { DialogProps } from "./Dialog";
-import { getAttach } from "../utils/dom";
+import { getAttach } from "../common/Portal";
 import { DialogOptions, DialogMethod, DialogConfirmMethod, DialogAlertMethod, DialogInstance } from "./type";
 import PluginContainer from "../common/PluginContainer";
 import ConfigProvider from "../config-provider";
@@ -25,7 +25,8 @@ const createDialog: DialogPluginType = (props: DialogOptions): DialogInstance =>
     </PluginContainer>,
     fragment
   );
-  const container = getAttach(options.attach);
+  const attachResult = getAttach(options.attach);
+  const container = (attachResult && attachResult instanceof HTMLElement ? attachResult : null) || document.body;
 
   if (container) {
     container.appendChild(fragment);