@tendaui/components 1.2.3 → 1.3.0

package/slider/SliderHandleButton.tsx

@@ -1,50 +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;
+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/_example/custom-label.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const CustomLabelExample = () => {
+  const [value, setValue] = useState<number>(50);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider
+        value={value}
+        onChange={(val) => setValue(val as number)}
+        label={({ value, position }) => (
+          <span style={{ color: position === "start" ? "blue" : "green" }}>{value}%</span>
+        )}
+      />
+    </div>
+  );
+};
+
+export default CustomLabelExample;

package/slider/_example/default.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const BasicExample = () => {
+  const [value, setValue] = useState<number>(30);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider value={value} onChange={(val) => setValue(val as number)} label={({ value }) => `${value}%`} />
+      <div style={{ marginTop: "16px", color: "#666" }}>当前值：{value}</div>
+    </div>
+  );
+};
+
+export default BasicExample;

package/slider/_example/disabled.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Slider } from "@tendaui/react";
+
+const DisabledExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+    <div style={{ width: "400px" }}>
+      <div style={{ marginBottom: "8px", color: "#666" }}>正常</div>
+      <Slider defaultValue={50} />
+    </div>
+    <div style={{ width: "400px" }}>
+      <div style={{ marginBottom: "8px", color: "#666" }}>禁用</div>
+      <Slider defaultValue={50} disabled />
+    </div>
+  </div>
+);
+
+export default DisabledExample;

package/slider/_example/marks.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const MarksExample = () => {
+  const [value1, setValue1] = useState<number>(30);
+  const [value2, setValue2] = useState<number>(50);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "60px", margin: "8px 0 16px 0" }}>
+      <div style={{ width: "400px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>数组形式刻度</div>
+        <Slider value={value1} onChange={(val) => setValue1(val as number)} marks={[0, 25, 50, 75, 100]} />
+      </div>
+      <div style={{ width: "400px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>对象形式刻度（自定义文案）</div>
+        <Slider
+          value={value2}
+          onChange={(val) => setValue2(val as number)}
+          marks={{
+            0: "低",
+            25: "中低",
+            50: "中",
+            75: "中高",
+            100: "高"
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MarksExample;

package/slider/_example/range.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const RangeExample = () => {
+  const [value, setValue] = useState<number[]>([20, 70]);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider value={value} onChange={(val) => setValue(val as number[])} range />
+      <div style={{ marginTop: "16px", color: "#666" }}>
+        当前范围：{value[0]} - {value[1]}
+      </div>
+    </div>
+  );
+};
+
+export default RangeExample;

package/slider/_example/step.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const StepExample = () => {
+  const [value, setValue] = useState<number>(30);
+  return (
+    <div style={{ width: "400px", padding: "20px 0" }}>
+      <Slider value={value} onChange={(val) => setValue(val as number)} step={10} label />
+      <div style={{ marginTop: "16px", color: "#666" }}>步长为 10，当前值：{value}</div>
+    </div>
+  );
+};
+
+export default StepExample;

package/slider/_example/vertical.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { Slider, SliderValue } from "@tendaui/react";
+
+const VerticalExample = () => {
+  const [value, setValue] = useState<SliderValue>(40);
+  const [rangeValue, setRangeValue] = useState<SliderValue>([20, 70]);
+
+  return (
+    <div style={{ display: "flex", gap: "80px", padding: "20px" }}>
+      <div style={{ height: "250px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>单滑块</div>
+        <Slider value={value} onChange={setValue} layout="vertical" />
+      </div>
+      <div style={{ height: "250px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>范围滑块</div>
+        <Slider value={rangeValue} onChange={setRangeValue} layout="vertical" range />
+      </div>
+      <div style={{ height: "250px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>带输入框</div>
+        <Slider value={value} onChange={setValue} layout="vertical" inputNumberProps={{ theme: "row" }} />
+      </div>
+    </div>
+  );
+};
+
+export default VerticalExample;

package/slider/_example/with-input-number.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Slider } from "@tendaui/react";
+
+const WithInputExample = () => {
+  const [value1, setValue1] = useState<number>(50);
+  const [value2, setValue2] = useState<number[]>([20, 80]);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+      <div style={{ width: "500px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>单滑块 + 数字输入框</div>
+        <Slider value={value1} onChange={(val) => setValue1(val as number)} inputNumberProps={true} />
+      </div>
+      <div style={{ width: "500px" }}>
+        <div style={{ marginBottom: "8px", color: "#666" }}>范围滑块 + 数字输入框</div>
+        <Slider value={value2} onChange={(val) => setValue2(val as number[])} range inputNumberProps={true} />
+      </div>
+    </div>
+  );
+};
+
+export default WithInputExample;

package/slider/defaultProps.ts

@@ -1,15 +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
-};
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 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/style/css.js

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

package/slider/style/index.js

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

package/slider/type.ts

@@ -2,7 +2,7 @@ import { InputNumberProps } from "../input-number";
 import { TNode } from "../common";
 import React from "react";
 
-export interface TooltipProps {
+interface TooltipProps {
   content?: string | React.ReactNode;
   [key: string]: any;
 }

package/styles/_global.scss

@@ -1,39 +1,40 @@
-@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;
-}
+@use "./_vars.scss" as *;
+@use './_vars.scss' as *;
+
+@use './mixins/_scrollbar.scss' as *;
+
+// 响应式断�?后面支持紧凑模式可以迁移过去
+: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;
+}