@tendaui/components 1.0.0 → 1.0.2

package/slider/Slider.tsx

@@ -0,0 +1,270 @@
+import React, { useMemo, useRef } from "react";
+import classNames from "classnames";
+import { isFunction, isNumber, isString } from "lodash-es";
+
+import { largeNumberToFixed } from "@tendaui/utils/js/input-number/large-number";
+import { accAdd, numberToPercent } from "../utils/number";
+import useConfig from "../hooks/useConfig";
+import useControlled from "../hooks/useControlled";
+import useDefaultProps from "../hooks/useDefaultProps";
+import InputNumber from "../input-number/InputNumber";
+import { sliderDefaultProps } from "./defaultProps";
+import SliderHandleButton from "./SliderHandleButton";
+
+import type { StyledProps, TNode } from "../common";
+import type { MouseCallback } from "../hooks/useMouseEvent";
+import type { SliderValue, TdSliderProps } from "./type";
+
+export interface SliderProps<T extends SliderValue = SliderValue> extends TdSliderProps<T>, StyledProps {}
+
+const LEFT_NODE = 0;
+const RIGHT_NODE = 1;
+type SliderHandleNode = typeof LEFT_NODE | typeof RIGHT_NODE;
+
+const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref) => {
+  const { classPrefix } = useConfig();
+  const props = useDefaultProps(originalProps, sliderDefaultProps);
+  const {
+    disabled,
+    inputNumberProps,
+    label,
+    layout,
+    marks,
+    max,
+    min,
+    range,
+    step,
+    tooltipProps,
+    className,
+    style,
+    onChange
+  } = props;
+
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [value, internalOnChange] = useControlled(props, "value", onChange);
+  const isVertical = layout === "vertical";
+
+  const renderValue = Array.isArray(value) ? value : [min, Math.min(max, value)];
+  const start = (renderValue[LEFT_NODE] - min) / (max - min);
+  const width = (renderValue[RIGHT_NODE] - renderValue[LEFT_NODE]) / (max - min);
+  const end = start + width;
+
+  const precision = useMemo(() => {
+    if (!Number.isInteger(step)) return step.toString().split(".")[1].length;
+    return undefined;
+  }, [step]);
+
+  const dots = useMemo<{ value: number; label: TNode; position: number }[]>(() => {
+    // 当 marks 为数字数组
+    if (Array.isArray(marks)) {
+      if (marks.some((mark) => typeof mark !== "number")) {
+        console.warn('The props "marks" only support number!');
+        return [];
+      }
+      return marks.map((mark) => ({ value: mark, position: (mark - min) / (max - min), label: mark }));
+    }
+    // 当 marks 为对象
+    if (marks && typeof marks === "object") {
+      const result = [];
+      Object.keys(marks).forEach((key) => {
+        const numberKey = Number(key);
+        if (typeof numberKey !== "number") {
+          console.warn('The props "marks" key only support number!');
+        } else {
+          result.push({
+            value: numberKey,
+            label: marks[numberKey],
+            position: (numberKey - min) / (max - min)
+          });
+        }
+      });
+      return result;
+    }
+    return [];
+  }, [max, min, marks]);
+
+  const allDots = useMemo(() => {
+    // 默认
+    const result = [];
+    for (let i = min; i <= max; i = accAdd(i, step)) {
+      result.push({
+        value: i,
+        position: (i - min) / (max - min)
+      });
+    }
+    return result;
+  }, [max, min, step]);
+
+  const startDirection = isVertical ? "bottom" : "left";
+  const stepDirection = isVertical ? "top" : "left";
+  const sizeKey = isVertical ? "height" : "width";
+  const renderDots = isVertical ? dots.map((item) => ({ ...item, position: 1 - item.position })) : dots;
+
+  const handleInputChange = (newValue: number, nodeIndex: SliderHandleNode) => {
+    const safeValue = Number(newValue.toFixed(32));
+    let resultValue = Math.max(Math.min(max, safeValue), min);
+    if (precision) resultValue = Number(largeNumberToFixed(String(resultValue), precision));
+    // 判断是否出现左值大于右值
+    if (nodeIndex === LEFT_NODE && value && safeValue > value[RIGHT_NODE]) resultValue = value[RIGHT_NODE];
+    // 判断是否出现右值大于左值
+    if (nodeIndex === RIGHT_NODE && value && safeValue < value[LEFT_NODE]) resultValue = value[LEFT_NODE];
+    if (Array.isArray(value)) {
+      const arrValue = value.slice();
+      arrValue[nodeIndex] = resultValue;
+      internalOnChange(arrValue);
+    } else {
+      internalOnChange(resultValue);
+    }
+  };
+
+  const createInput = (nodeIndex: SliderHandleNode) => {
+    const inputProps = typeof inputNumberProps === "object" ? inputNumberProps : {};
+    const currentValue = renderValue[nodeIndex];
+
+    return (
+      <InputNumber
+        value={currentValue}
+        onChange={(v: number) => {
+          if (typeof v !== "undefined") {
+            handleInputChange(Number(v), nodeIndex);
+          }
+        }}
+        className={classNames(`${classPrefix}-slider-input`, { "is-vertical": isVertical })}
+        disabled={disabled}
+        theme="column"
+        min={min}
+        max={max}
+        {...inputProps}
+      />
+    );
+  };
+
+  const nearbyValueChange = (value: number) => {
+    const buttonBias =
+      Math.abs(value - renderValue[LEFT_NODE]) > Math.abs(value - renderValue[RIGHT_NODE]) ? RIGHT_NODE : LEFT_NODE;
+    handleInputChange(value, buttonBias);
+  };
+
+  const setPosition = (position: number, nodeIndex?: SliderHandleNode) => {
+    let index = 0;
+    let minDistance = 1;
+    for (let i = 0; i < allDots.length; i++) {
+      const diff = Math.abs(allDots[i].position - position);
+      if (minDistance > diff) {
+        index = i;
+        minDistance = diff;
+      }
+    }
+    const { value } = allDots[index];
+    if (nodeIndex === undefined && range) {
+      nearbyValueChange(value);
+    } else {
+      handleInputChange(value, nodeIndex);
+    }
+  };
+
+  const onSliderChange = (event: MouseCallback, nodeIndex?: SliderHandleNode) => {
+    if (disabled || !sliderRef.current) return;
+
+    const clientKey = isVertical ? "clientY" : "clientX";
+    const sliderPositionInfo = sliderRef.current.getBoundingClientRect();
+    const sliderOffset = sliderPositionInfo[startDirection];
+    const position = ((event[clientKey] - sliderOffset) / sliderPositionInfo[sizeKey]) * (isVertical ? -1 : 1);
+    setPosition(position, nodeIndex);
+  };
+
+  const handleClickMarks = (event: React.MouseEvent, value: number) => {
+    event.stopPropagation();
+    nearbyValueChange(value);
+  };
+
+  const createHandleButton = (nodeIndex: SliderHandleNode, style: React.CSSProperties) => {
+    const currentValue = renderValue[nodeIndex];
+    // 模板替换
+    let tipLabel: React.ReactNode = currentValue;
+
+    if (isFunction(label)) {
+      tipLabel = label({ value: currentValue, position: nodeIndex === LEFT_NODE ? "start" : "end" });
+    }
+    if (isString(label)) {
+      tipLabel = label.replace(/\$\{value\}/g, currentValue.toString());
+    }
+    if (isNumber(tipLabel) && precision) tipLabel = largeNumberToFixed(String(tipLabel), precision);
+
+    return (
+      <SliderHandleButton
+        toolTipProps={{ content: tipLabel, ...tooltipProps }}
+        hideTips={label === false}
+        classPrefix={classPrefix}
+        style={style}
+        onChange={(e) => onSliderChange(e, nodeIndex)}
+      />
+    );
+  };
+
+  return (
+    <div
+      style={{ ...style }}
+      className={classNames(`${classPrefix}-slider__container`, { "is-vertical": isVertical })}
+      ref={ref}
+    >
+      <div
+        ref={sliderRef}
+        className={classNames(`${classPrefix}-slider`, className, {
+          [`${classPrefix}-is-disabled`]: disabled,
+          [`${classPrefix}-slider--vertical`]: isVertical,
+          [`${classPrefix}-slider--with-input`]: inputNumberProps
+        })}
+        onClick={onSliderChange}
+      >
+        <div className={classNames(`${classPrefix}-slider__rail`)}>
+          <div
+            style={{ [startDirection]: numberToPercent(start), [sizeKey]: numberToPercent(width) }}
+            className={classNames(`${classPrefix}-slider__track`)}
+          ></div>
+          {range ? createHandleButton(LEFT_NODE, { [startDirection]: numberToPercent(start) }) : null}
+          {createHandleButton(RIGHT_NODE, { [startDirection]: numberToPercent(end) })}
+          <div className={`${classPrefix}-slider__stops`}>
+            {renderDots.map(({ position, value }) => {
+              if (position === 0 || position === 1) {
+                return null;
+              }
+              return (
+                <div
+                  key={value}
+                  style={{ [stepDirection]: numberToPercent(position) }}
+                  className={classNames(`${classPrefix}-slider__stop`)}
+                ></div>
+              );
+            })}
+          </div>
+          <div className={classNames(`${classPrefix}-slider__mark`)}>
+            {renderDots.map(({ position, value, label }) => (
+              <div
+                key={value}
+                onClick={(event) => handleClickMarks(event, value)}
+                style={{ [stepDirection]: numberToPercent(position) }}
+                className={classNames(`${classPrefix}-slider__mark-text`)}
+              >
+                {label}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {inputNumberProps ? (
+        <div className={classNames(`${classPrefix}-slider__input-container`, { "is-vertical": isVertical })}>
+          {range && createInput(LEFT_NODE)}
+          {range && <div className={`${classPrefix}-slider__center-line`}></div>}
+          {createInput(RIGHT_NODE)}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+Slider.displayName = "Slider";
+
+export default Slider as <T extends SliderValue = SliderValue>(
+  props: SliderProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement;

package/slider/SliderHandleButton.tsx

@@ -0,0 +1,50 @@
+import React, { useRef, useState } from "react";
+import classNames from "classnames";
+import useMouseEvent, { type MouseCallback } from "../hooks/useMouseEvent";
+
+interface SliderHandleButtonProps {
+  onChange: (event: MouseCallback) => void;
+  classPrefix: string;
+  style: React.CSSProperties;
+  hideTips: boolean;
+  toolTipProps?: any;
+}
+
+const SliderHandleButton: React.FC<SliderHandleButtonProps> = ({ onChange, style, classPrefix }) => {
+  const sliderNodeRef = useRef<HTMLDivElement>(null);
+  const [popupVisible, setPopupVisible] = useState(false);
+
+  const { isMoving } = useMouseEvent(sliderNodeRef, {
+    onEnter() {
+      setPopupVisible(true);
+    },
+    onDown: () => {
+      setPopupVisible(true);
+    },
+    onMove: (e) => {
+      setPopupVisible(true);
+      onChange(e);
+    },
+    onLeave: () => {
+      setPopupVisible(false);
+    },
+    onUp: (e) => {
+      setPopupVisible(false);
+      onChange(e);
+    }
+  });
+
+  const handleNode = (
+    <div ref={sliderNodeRef} style={style} className={`${classPrefix}-slider__button-wrapper`}>
+      <div
+        className={classNames(`${classPrefix}-slider__button`, {
+          [`${classPrefix}-slider__button--dragging`]: isMoving
+        })}
+      ></div>
+    </div>
+  );
+
+  return handleNode;
+};
+
+export default SliderHandleButton;

package/slider/defaultProps.ts

@@ -0,0 +1,15 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdSliderProps } from "./type";
+
+export const sliderDefaultProps: TdSliderProps = {
+  inputNumberProps: false,
+  label: true,
+  layout: "horizontal",
+  max: 100,
+  min: 0,
+  range: false,
+  step: 1
+};

package/slider/index.ts

@@ -0,0 +1,9 @@
+import _Slider from "./Slider";
+
+import "./style/index.js";
+
+export type { SliderProps } from "./Slider";
+export * from "./type";
+
+export const Slider = _Slider;
+export default Slider;

package/slider/style/css.js

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

package/slider/style/index.js

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

package/slider/type.ts

@@ -0,0 +1,77 @@
+import { InputNumberProps } from "../input-number";
+import { TNode } from "../common";
+import React from "react";
+
+export interface TooltipProps {
+  content?: string | React.ReactNode;
+  [key: string]: any;
+}
+
+export interface TdSliderProps<T = SliderValue> {
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
+   * @default false
+   */
+  inputNumberProps?: boolean | InputNumberProps<number>;
+  /**
+   * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+   * @default true
+   */
+  label?: string | boolean | TNode<{ value: SliderValue; position?: "start" | "end" }>;
+  /**
+   * 滑块布局方向
+   * @default horizontal
+   */
+  layout?: "vertical" | "horizontal";
+  /**
+   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
+   */
+  marks?: Array<number> | SliderMarks;
+  /**
+   * 滑块范围最大值
+   * @default 100
+   */
+  max?: number;
+  /**
+   * 滑块范围最小值
+   * @default 0
+   */
+  min?: number;
+  /**
+   * 双游标滑块
+   * @default false
+   */
+  range?: boolean;
+  /**
+   * 步长
+   * @default 1
+   */
+  step?: number;
+  /**
+   * 透传提示组件属性
+   */
+  tooltipProps?: TooltipProps;
+  /**
+   * 滑块值
+   */
+  value?: SliderValue;
+  /**
+   * 滑块值，非受控属性
+   */
+  defaultValue?: SliderValue;
+  /**
+   * 滑块值变化时触发
+   */
+  onChange?: (value: T) => void;
+}
+
+export interface SliderMarks {
+  [mark: number]: string | TNode<{ value: number }>;
+}
+
+export type SliderValue = number | Array<number>;

package/style/all.js

@@ -0,0 +1,26 @@
+import "../alert/style/index.js";
+import "../badge/style/index.js";
+import "../button/style/index.js";
+import "../checkbox/style/index.js";
+import "../color-picker/style/index.js";
+import "../dialog/style/index.js";
+import "../drawer/style/index.js";
+import "../fireworks/style/index.js";
+import "../form/style/index.js";
+import "../input/style/index.js";
+import "../input-number/style/index.js";
+import "../ip-input/style/index.js";
+import "../layout/style/index.js";
+import "../list/style/index.js";
+import "../loading/style/index.js";
+import "../notification/style/index.js";
+import "../popup/style/index.js";
+import "../radio/style/index.js";
+import "../select/style/index.js";
+import "../select-input/style/index.js";
+import "../slider/style/index.js";
+import "../switch/style/index.js";
+import "../tab/style/index.js";
+import "../table/style/index.js";
+import "../tag/style/index.js";
+import "../tag-input/style/index.js";

package/styles/_global.scss

@@ -1,39 +1,39 @@
-@import './_vars.scss';
-
-@import './mixins/_scrollbar.scss';
-
-// 响应式断点 后面支持紧凑模式可以迁移过去
-:root {
-  --td-screen-xs: #{$screen-xs};
-  --td-screen-sm: #{$screen-sm};
-  --td-screen-md: #{$screen-md};
-  --td-screen-lg: #{$screen-lg};
-  --td-screen-xl: #{$screen-xl};
-  --td-screen-xxl: #{$screen-xxl};
-}
-
-// 统一的scrollbar
-.narrow-scrollbar {
-  @include scrollbar(8px, 2px);
-}
-
-// 统一的可旋转箭头
-.#{$prefix}-fake-arrow {
-  path {
-    transition: d $anim-duration-base;
-    stroke: currentcolor;
-  }
-
-  &--active {
-    path {
-      d: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
-    }
-  }
-}
-
-.#{$prefix}-slide-down-enter-active,
-.#{$prefix}-slide-down-leave-active {
-  transition:
-    height $anim-duration-base $anim-time-fn-easing,
-    max-height $anim-duration-base $anim-time-fn-easing;
-}
+@import './_vars.scss';
+
+@import './mixins/_scrollbar.scss';
+
+// 响应式断点 后面支持紧凑模式可以迁移过去
+:root {
+  --td-screen-xs: #{$screen-xs};
+  --td-screen-sm: #{$screen-sm};
+  --td-screen-md: #{$screen-md};
+  --td-screen-lg: #{$screen-lg};
+  --td-screen-xl: #{$screen-xl};
+  --td-screen-xxl: #{$screen-xxl};
+}
+
+// 统一的scrollbar
+.narrow-scrollbar {
+  @include scrollbar(8px, 2px);
+}
+
+// 统一的可旋转箭头
+.#{$prefix}-fake-arrow {
+  path {
+    transition: d $anim-duration-base;
+    stroke: currentcolor;
+  }
+
+  &--active {
+    path {
+      d: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
+    }
+  }
+}
+
+.#{$prefix}-slide-down-enter-active,
+.#{$prefix}-slide-down-leave-active {
+  transition:
+    height $anim-duration-base $anim-time-fn-easing,
+    max-height $anim-duration-base $anim-time-fn-easing;
+}