@tendaui/components 1.2.4 → 1.3.0

package/select-input/type.ts

@@ -1,280 +1,280 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { InputProps } from '../input';
-import { PopupProps } from '../popup';
-import {
-  TagInputProps,
-  TagInputValue,
-  TagInputChangeContext,
-} from '../tag-input';
-import { TagProps } from '../tag';
-import { PopupVisibleChangeContext } from '../popup';
-import { TNode, TElement, SizeEnum } from '../common';
-import {
-  MouseEvent,
-  KeyboardEvent,
-  ClipboardEvent,
-  FocusEvent,
-  FormEvent,
-  CompositionEvent,
-} from 'react';
-
-export interface TdSelectInputProps {
-  /**
-   * 是否允许输入
-   * @default false
-   */
-  allowInput?: boolean;
-  /**
-   * 宽度随内容自适应
-   * @default false
-   */
-  autoWidth?: boolean;
-  /**
-   * 自动聚焦
-   * @default false
-   */
-  autofocus?: boolean;
-  /**
-   * 无边框模式
-   * @default false
-   */
-  borderless?: boolean;
-  /**
-   * 是否可清空
-   * @default false
-   */
-  clearable?: boolean;
-  /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
-   */
-  collapsedItems?: TNode<{
-    value: SelectInputValue;
-    collapsedSelectedItems: SelectInputValue;
-    count: number;
-    onClose: (context: { index: number; e?: MouseEvent }) => void;
-  }>;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 透传 Input 输入框组件全部属性
-   */
-  inputProps?: InputProps;
-  /**
-   * 输入框的值
-   */
-  inputValue?: string;
-  /**
-   * 输入框的值，非受控属性
-   */
-  defaultInputValue?: string;
-  /**
-   * 定义字段别名，示例：`{ label: 'text', value: 'id', children: 'list' }`
-   */
-  keys?: SelectInputKeys;
-  /**
-   * 左侧文本
-   */
-  label?: TNode;
-  /**
-   * 是否处于加载状态
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠
-   * @default 0
-   */
-  minCollapsedNum?: number;
-  /**
-   * 是否为多选模式，默认为单选
-   * @default false
-   */
-  multiple?: boolean;
-  /**
-   * 下拉框内容，可完全自定义
-   */
-  panel?: TNode;
-  /**
-   * 占位符
-   * @default ''
-   */
-  placeholder?: string;
-  /**
-   * 透传 Popup 浮层组件全部属性
-   */
-  popupProps?: PopupProps;
-  /**
-   * 是否显示下拉框
-   */
-  popupVisible?: boolean;
-  /**
-   * 是否显示下拉框，非受控属性
-   */
-  defaultPopupVisible?: boolean;
-  /**
-   * 组件前置图标
-   */
-  prefixIcon?: TElement;
-  /**
-   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
-   * @default false
-   */
-  readonly?: boolean;
-  /**
-   * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
-   * @default false
-   */
-  reserveKeyword?: boolean;
-  /**
-   * 组件尺寸
-   * @default medium
-   */
-  size?: SizeEnum;
-  /**
-   * 输入框状态
-   * @default default
-   */
-  status?: 'default' | 'success' | 'warning' | 'error';
-  /**
-   * 后置图标前的后置内容
-   */
-  suffix?: TNode;
-  /**
-   * 组件后置图标
-   */
-  suffixIcon?: TElement;
-  /**
-   * 多选场景下，自定义选中标签的内部内容。注意和 `valueDisplay` 区分，`valueDisplay`  是用来定义全部标签内容，而非某一个标签
-   */
-  tag?: string | TNode<{ value: string | number }>;
-  /**
-   * 透传 TagInput 组件全部属性
-   */
-  tagInputProps?: TagInputProps;
-  /**
-   * 透传 Tag 标签组件全部属性
-   */
-  tagProps?: TagProps;
-  /**
-   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
-   */
-  tips?: TNode;
-  /**
-   * 全部标签值。值为数组表示多个标签，值为非数组表示单个数值
-   */
-  value?: SelectInputValue;
-  /**
-   * 自定义值呈现的全部内容，参数为所有标签的值
-   */
-  valueDisplay?:
-    | string
-    | TNode<{
-        value: TagInputValue;
-        onClose: (index: number, item?: any) => void;
-      }>;
-  /**
-   * 失去焦点时触发，`context.inputValue` 表示输入框的值；`context.tagInputValue` 表示标签输入框的值
-   */
-  onBlur?: (value: SelectInputValue, context: SelectInputBlurContext) => void;
-  /**
-   * 清空按钮点击时触发
-   */
-  onClear?: (context: { e: MouseEvent<SVGSVGElement> }) => void;
-  /**
-   * 按键按下 Enter 时触发
-   */
-  onEnter?: (
-    value: SelectInputValue,
-    context: {
-      e: KeyboardEvent<HTMLDivElement>;
-      inputValue: string;
-      tagInputValue?: TagInputValue;
-    },
-  ) => void;
-  /**
-   * 聚焦时触发
-   */
-  onFocus?: (value: SelectInputValue, context: SelectInputFocusContext) => void;
-  /**
-   * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等
-   */
-  onInputChange?: (
-    value: string,
-    context?: SelectInputValueChangeContext,
-  ) => void;
-  /**
-   * 进入输入框时触发
-   */
-  onMouseenter?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 离开输入框时触发
-   */
-  onMouseleave?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 粘贴事件，`pasteValue` 表示粘贴板的内容
-   */
-  onPaste?: (context: {
-    e: ClipboardEvent<HTMLDivElement>;
-    pasteValue: string;
-  }) => void;
-  /**
-   * 下拉框显示或隐藏时触发
-   */
-  onPopupVisibleChange?: (
-    visible: boolean,
-    context: PopupVisibleChangeContext,
-  ) => void;
-  /**
-   * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
-   */
-  onTagChange?: (
-    value: TagInputValue,
-    context: SelectInputChangeContext,
-  ) => void;
-}
-
-export interface SelectInputKeys {
-  label?: string;
-  value?: string;
-  children?: string;
-}
-
-export type SelectInputValue =
-  | string
-  | number
-  | boolean
-  | Date
-  | Object
-  | Array<any>
-  | Array<SelectInputValue>;
-
-export type SelectInputBlurContext = PopupVisibleChangeContext & {
-  inputValue: string;
-  tagInputValue?: TagInputValue;
-};
-
-export interface SelectInputFocusContext {
-  inputValue: string;
-  tagInputValue?: TagInputValue;
-  e: FocusEvent<HTMLInputElement>;
-}
-
-export interface SelectInputValueChangeContext {
-  e?:
-    | Event
-    | FormEvent<HTMLInputElement>
-    | MouseEvent<HTMLElement | SVGElement>
-    | FocusEvent<HTMLInputElement>
-    | KeyboardEvent<HTMLInputElement>
-    | CompositionEvent<HTMLDivElement>;
-  trigger: 'input' | 'clear' | 'blur' | 'focus' | 'initial' | 'change';
-}
-
-export type SelectInputChangeContext = TagInputChangeContext;
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { InputProps } from '../input';
+import { PopupProps } from '../popup';
+import {
+  TagInputProps,
+  TagInputValue,
+  TagInputChangeContext,
+} from '../tag-input';
+import { TagProps } from '../tag';
+import { PopupVisibleChangeContext } from '../popup';
+import { TNode, TElement, SizeEnum } from '../common';
+import {
+  MouseEvent,
+  KeyboardEvent,
+  ClipboardEvent,
+  FocusEvent,
+  FormEvent,
+  CompositionEvent,
+} from 'react';
+
+export interface TdSelectInputProps {
+  /**
+   * 是否允许输入
+   * @default false
+   */
+  allowInput?: boolean;
+  /**
+   * 宽度随内容自适应
+   * @default false
+   */
+  autoWidth?: boolean;
+  /**
+   * 自动聚焦
+   * @default false
+   */
+  autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
+   */
+  collapsedItems?: TNode<{
+    value: SelectInputValue;
+    collapsedSelectedItems: SelectInputValue;
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 透传 Input 输入框组件全部属性
+   */
+  inputProps?: InputProps;
+  /**
+   * 输入框的值
+   */
+  inputValue?: string;
+  /**
+   * 输入框的值，非受控属性
+   */
+  defaultInputValue?: string;
+  /**
+   * 定义字段别名，示例：`{ label: 'text', value: 'id', children: 'list' }`
+   */
+  keys?: SelectInputKeys;
+  /**
+   * 左侧文本
+   */
+  label?: TNode;
+  /**
+   * 是否处于加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠
+   * @default 0
+   */
+  minCollapsedNum?: number;
+  /**
+   * 是否为多选模式，默认为单选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 下拉框内容，可完全自定义
+   */
+  panel?: TNode;
+  /**
+   * 占位符
+   * @default ''
+   */
+  placeholder?: string;
+  /**
+   * 透传 Popup 浮层组件全部属性
+   */
+  popupProps?: PopupProps;
+  /**
+   * 是否显示下拉框
+   */
+  popupVisible?: boolean;
+  /**
+   * 是否显示下拉框，非受控属性
+   */
+  defaultPopupVisible?: boolean;
+  /**
+   * 组件前置图标
+   */
+  prefixIcon?: TElement;
+  /**
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+   * @default false
+   */
+  reserveKeyword?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
+  /**
+   * 输入框状态
+   * @default default
+   */
+  status?: 'default' | 'success' | 'warning' | 'error';
+  /**
+   * 后置图标前的后置内容
+   */
+  suffix?: TNode;
+  /**
+   * 组件后置图标
+   */
+  suffixIcon?: TElement;
+  /**
+   * 多选场景下，自定义选中标签的内部内容。注意和 `valueDisplay` 区分，`valueDisplay`  是用来定义全部标签内容，而非某一个标签
+   */
+  tag?: string | TNode<{ value: string | number }>;
+  /**
+   * 透传 TagInput 组件全部属性
+   */
+  tagInputProps?: TagInputProps;
+  /**
+   * 透传 Tag 标签组件全部属性
+   */
+  tagProps?: TagProps;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: TNode;
+  /**
+   * 全部标签值。值为数组表示多个标签，值为非数组表示单个数值
+   */
+  value?: SelectInputValue;
+  /**
+   * 自定义值呈现的全部内容，参数为所有标签的值
+   */
+  valueDisplay?:
+    | string
+    | TNode<{
+        value: TagInputValue;
+        onClose: (index: number, item?: any) => void;
+      }>;
+  /**
+   * 失去焦点时触发，`context.inputValue` 表示输入框的值；`context.tagInputValue` 表示标签输入框的值
+   */
+  onBlur?: (value: SelectInputValue, context: SelectInputBlurContext) => void;
+  /**
+   * 清空按钮点击时触发
+   */
+  onClear?: (context: { e: MouseEvent<SVGSVGElement> }) => void;
+  /**
+   * 按键按下 Enter 时触发
+   */
+  onEnter?: (
+    value: SelectInputValue,
+    context: {
+      e: KeyboardEvent<HTMLDivElement>;
+      inputValue: string;
+      tagInputValue?: TagInputValue;
+    },
+  ) => void;
+  /**
+   * 聚焦时触发
+   */
+  onFocus?: (value: SelectInputValue, context: SelectInputFocusContext) => void;
+  /**
+   * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等
+   */
+  onInputChange?: (
+    value: string,
+    context?: SelectInputValueChangeContext,
+  ) => void;
+  /**
+   * 进入输入框时触发
+   */
+  onMouseenter?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 离开输入框时触发
+   */
+  onMouseleave?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 粘贴事件，`pasteValue` 表示粘贴板的内容
+   */
+  onPaste?: (context: {
+    e: ClipboardEvent<HTMLDivElement>;
+    pasteValue: string;
+  }) => void;
+  /**
+   * 下拉框显示或隐藏时触发
+   */
+  onPopupVisibleChange?: (
+    visible: boolean,
+    context: PopupVisibleChangeContext,
+  ) => void;
+  /**
+   * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
+   */
+  onTagChange?: (
+    value: TagInputValue,
+    context: SelectInputChangeContext,
+  ) => void;
+}
+
+export interface SelectInputKeys {
+  label?: string;
+  value?: string;
+  children?: string;
+}
+
+export type SelectInputValue =
+  | string
+  | number
+  | boolean
+  | Date
+  | Object
+  | Array<any>
+  | Array<SelectInputValue>;
+
+export type SelectInputBlurContext = PopupVisibleChangeContext & {
+  inputValue: string;
+  tagInputValue?: TagInputValue;
+};
+
+export interface SelectInputFocusContext {
+  inputValue: string;
+  tagInputValue?: TagInputValue;
+  e: FocusEvent<HTMLInputElement>;
+}
+
+export interface SelectInputValueChangeContext {
+  e?:
+    | Event
+    | FormEvent<HTMLInputElement>
+    | MouseEvent<HTMLElement | SVGElement>
+    | FocusEvent<HTMLInputElement>
+    | KeyboardEvent<HTMLInputElement>
+    | CompositionEvent<HTMLDivElement>;
+  trigger: 'input' | 'clear' | 'blur' | 'focus' | 'initial' | 'change';
+}
+
+export type SelectInputChangeContext = TagInputChangeContext;

package/slider/Slider.tsx

@@ -22,7 +22,7 @@ const RIGHT_NODE = 1;
 type SliderHandleNode = typeof LEFT_NODE | typeof RIGHT_NODE;
 
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref) => {
-  const { classPrefix } = useConfig();
+  const { classPrefix, direction } = useConfig();
   const props = useDefaultProps(originalProps, sliderDefaultProps);
   const {
     disabled,
@@ -43,6 +43,7 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
   const sliderRef = useRef<HTMLDivElement>(null);
   const [value, internalOnChange] = useControlled(props, "value", onChange);
   const isVertical = layout === "vertical";
+  const isRtl = direction === "rtl";
 
   const renderValue = Array.isArray(value) ? value : [min, Math.min(max, value)];
   const start = (renderValue[LEFT_NODE] - min) / (max - min);
@@ -95,8 +96,8 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
     return result;
   }, [max, min, step]);
 
-  const startDirection = isVertical ? "bottom" : "left";
-  const stepDirection = isVertical ? "top" : "left";
+  const startDirection = isVertical ? "bottom" : isRtl ? "right" : "left";
+  const stepDirection = isVertical ? "top" : isRtl ? "right" : "left";
   const sizeKey = isVertical ? "height" : "width";
   const renderDots = isVertical ? dots.map((item) => ({ ...item, position: 1 - item.position })) : dots;
 
@@ -168,8 +169,15 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
 
     const clientKey = isVertical ? "clientY" : "clientX";
     const sliderPositionInfo = sliderRef.current.getBoundingClientRect();
-    const sliderOffset = sliderPositionInfo[startDirection];
-    const position = ((event[clientKey] - sliderOffset) / sliderPositionInfo[sizeKey]) * (isVertical ? -1 : 1);
+    let position = 0;
+    if (isVertical) {
+      const sliderOffset = sliderPositionInfo[startDirection];
+      position = ((event[clientKey] - sliderOffset) / sliderPositionInfo[sizeKey]) * -1;
+    } else if (isRtl) {
+      position = (sliderPositionInfo.right - event[clientKey]) / sliderPositionInfo.width;
+    } else {
+      position = (event[clientKey] - sliderPositionInfo.left) / sliderPositionInfo.width;
+    }
     setPosition(position, nodeIndex);
   };