Merge pull request arco-design#2594 from arco-design/feat/slider-multi

feat: slider supports multiple points
xulingling0 · Mar 15, 2024 · 86b4e21 · 86b4e21
2 parents 3f86cde + eb4c2ad
commit 86b4e21
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 97 deletions.
diff --git a/.github/workflows/deploy-site-preview.yml b/.github/workflows/deploy-site-preview.yml
@@ -1,8 +1,7 @@
 name: deploy-site-preview
 on:
-  workflow_run:
-    workflows: ['pr_check']
-    types: completed
+  pull_request:
+    types: [opened, synchronize, reopened]
 
   push:
     tags:
@@ -65,7 +64,7 @@ jobs:
 
       - name: get PreviewID
         run: |
-          if ${{ github.event_name == 'pull_request' }}; then
+          if ${{ github.event_name == 'push' }}; then
             echo "PreviewID=${{ github.event.number }}" >> $GITHUB_ENV
           else
             echo "PreviewID=main" >> $GITHUB_ENV

diff --git a/components/Slider/__demo__/input.md b/components/Slider/__demo__/input.md
@@ -7,15 +7,15 @@ title:
 
 ## zh-CN
 
-当 `showInput` 为 true 时，将显示输入框。当设置 `onlyMarkValue` 为 `true` 时，输入框始终不会显示。
+当 `showInput` 为 true 时，将显示输入框。当设置 `onlyMarkValue` 为 `true` 或者范围内多点选择时，输入框始终不会显示。
 
 当 `showInput` 传入 `InputNumberProps` 时，`min`、`max`、`step` 属性会以 `SliderProps` 为先。
 
 **分段输入条设置的分段步长对 InputNumber 无效**
 
 ## en-US
 
-When `showInput` is set to true, the input box will be displayed. But when setting `onlyMarkValue` to `true`, the input box will never be displayed.
+When `showInput` is set to true, the input box will be displayed. But when setting `onlyMarkValue` to `true` or selecting multiple points within the range, the input box will never be displayed.
 
 When `showInput` is passed `InputNumberProps`, the `min`, `max`, `step` properties will be preceded by `SliderProps`.
 

diff --git a/components/Slider/__demo__/marks.md b/components/Slider/__demo__/marks.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 添加标签文本
   en-US: Marks

diff --git a/components/Slider/__demo__/range-multi.md b/components/Slider/__demo__/range-multi.md
@@ -0,0 +1,33 @@
+---
+order: 4
+title:
+  zh-CN: 多点选择
+  en-US: Multiple Dots
+---
+
+## zh-CN
+
+范围内多个点选择。(`2.61.0` 支持)
+
+## en-US
+
+Select multiple points within the range. (in `2.61.0`)
+
+
+```js
+import { useState } from 'react';
+import { Slider, Typography } from '@arco-design/web-react';
+
+function App() {
+  const [value, setValue] = useState([0, 20, 50]);
+  return (
+    <div style={{ width: 200 }}>
+      <Slider range value={value} onChange={setValue} />
+      <br/>
+      <Typography.Text code>value: {JSON.stringify(value)}</Typography.Text>
+    </div>
+  );
+}
+
+export default App;
+```
diff --git a/components/Slider/__test__/__snapshots__/demo.test.ts.snap b/components/Slider/__test__/__snapshots__/demo.test.ts.snap
@@ -1524,6 +1524,70 @@ exports[`renders Slider/demo/range.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders Slider/demo/range-multi.md correctly 1`] = `
+<div
+  style="width:200px"
+>
+  <div
+    class="arco-slider"
+  >
+    <div
+      class="arco-slider-wrapper"
+    >
+      <div
+        class="arco-slider-road"
+      >
+        <div
+          class="arco-slider-bar"
+          style="left:0%;right:50%"
+        />
+        <div
+          aria-disabled="false"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="0"
+          class="arco-slider-button"
+          role="slider"
+          style="left:0%"
+          tabindex="0"
+        />
+        <div
+          aria-disabled="false"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="20"
+          aria-valuetext="20"
+          class="arco-slider-button"
+          role="slider"
+          style="left:20%"
+          tabindex="0"
+        />
+        <div
+          aria-disabled="false"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="50"
+          aria-valuetext="50"
+          class="arco-slider-button"
+          role="slider"
+          style="left:50%"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>
+  <br />
+  <span
+    class="arco-typography"
+  >
+    <code>
+      value: [0,20,50]
+    </code>
+  </span>
+</div>
+`;
+
 exports[`renders Slider/demo/reversed.md correctly 1`] = `
 Array [
   <div

diff --git a/components/Slider/dots.tsx b/components/Slider/dots.tsx
@@ -11,7 +11,7 @@ type MaskType = {
 
 interface MaskProps {
   data: MaskType[];
-  value?: number[];
+  valueRange?: [number, number];
   vertical?: boolean;
   prefixCls?: string;
   reverse?: boolean;
@@ -20,7 +20,7 @@ interface MaskProps {
 }
 
 const Dots = function (props: MaskProps) {
-  const { data = [], value = [], vertical, prefixCls, reverse, intervalConfigs } = props;
+  const { data = [], valueRange = [], vertical, prefixCls, reverse, intervalConfigs } = props;
   if (!data.length) return null;
 
   return (
@@ -47,7 +47,7 @@ const Dots = function (props: MaskProps) {
             ) : (
               <div
                 className={cs(`${prefixCls}-dot`, {
-                  [`${prefixCls}-dot-active`]: valueInRange(key, value),
+                  [`${prefixCls}-dot-active`]: valueInRange(key, valueRange),
                 })}
               />
             )}

diff --git a/components/Slider/hooks/useLegalValue.ts b/components/Slider/hooks/useLegalValue.ts
@@ -78,10 +78,12 @@ export default function useLegalValue(props: {
       if (isRange) {
         if (isArray(val)) {
           beginVal = getLegalValue(val[0]);
-          endVal = getLegalValue(val[1]);
-        } else {
-          console.error('value must be an array when range is true');
+          // endVal = getLegalValue(val[1]);
+          return val.map((v) => {
+            return getLegalValue(v);
+          });
         }
+        console.error('value must be an array when range is true');
       } else if (isNumber(val)) {
         endVal = getLegalValue(val);
       } else {