Browse Source

fix: change slider onAfterChange props meaning

代强 3 years ago
parent
commit
c97891f3fa
3 changed files with 46 additions and 44 deletions
  1. 22 22
      content/input/slider/index-en-US.md
  2. 22 22
      content/input/slider/index.md
  3. 2 0
      packages/semi-ui/slider/index.tsx

+ 22 - 22
content/input/slider/index-en-US.md

@@ -240,29 +240,29 @@ import { Slider } from '@douyinfe/semi-ui';
 
 ## API Reference
 
-| Property       | Instructions                                                                               | type          | Default | Version | 
-| -------------- | ------------------------------------------------------------------------------------------ | ------------- | ------- |------ |
-| aria-label| [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen | string |-|-|
+| Property       | Instructions                                                                                                                                                                                                                                                                                          | type          | Default | Version | 
+| -------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------- | ------- |------ |
+| aria-label| [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen                                                                          | string |-|-|
 | aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling | string |-|-|
-| aria-valuetext| [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) used to provide a user-friendly name for the current value of the slider | string |-|-|
-| defaultValue   | Default value                                                                              | number \| number[] | 0       |- |
-| disabled       | Disable slider                                                                             | boolean       | false   |- |
-| included       | Takes effect when `marks` is not null, true means containment and false means coordination | boolean       | true    |- |
-| marks          | Tick mark of Slider, type of key must be number, and must in closed interval [min, max]    | Record<number, string \>        | -       |- |
-| max            | Maximum value of the slider.                                                               | number        | 100     |- |
-| min            | Minimum value of the slider.                                                               | number        | 0       |- |
-| railStyle | Style for slide rail | CSSProperties | - |0.31.0|
-| range          | Toggle whether it is allow to move slider from both sides                                  | boolean       | false   |- |
-| showBoundary   | Toggle whether show max/min value when hover                                               | boolean       | false   |- |
-| step           | Increment between successive values                                                        | number        | 1       |- |
-| tipFormatter   | Format Tooltip content, by default display current value                                   | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any      | v => v  |- |
-| tooltipVisible | Toggle whether to display tooltip all the time                                             | boolean       | -       |- |
-| value          | Set current value, used in controlled component                                            | number \| number[] |         |- |
-| vertical       | Toggle whether to display slider vertically                                                | boolean       | false   |- |
-| verticalReverse | Vertical but reverse direction >=1.29.0| boolean | false |-|
-| onAfterChange  | Triggered when onmouseup is invoked, passed in current value as params                     | (value: number \| number[]) => void      | -       |- |
-| onChange       | Callback function when slider value changes                                                | (value: number \| number[]) => void      | -       |- |
-| getAriaValueText | Used to provide a user-friendly name for the current value of the slider, important for screen reader users,  The parameters value and index are the current slider value, order | (value: number, index?: number) => string |-|-|
+| aria-valuetext| [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) used to provide a user-friendly name for the current value of the slider                                                                                                                  | string |-|-|
+| defaultValue   | Default value                                                                                                                                                                                                                                                                                         | number \| number[] | 0       |- |
+| disabled       | Disable slider                                                                                                                                                                                                                                                                                        | boolean       | false   |- |
+| included       | Takes effect when `marks` is not null, true means containment and false means coordination                                                                                                                                                                                                            | boolean       | true    |- |
+| marks          | Tick mark of Slider, type of key must be number, and must in closed interval [min, max]                                                                                                                                                                                                               | Record<number, string \>        | -       |- |
+| max            | Maximum value of the slider.                                                                                                                                                                                                                                                                          | number        | 100     |- |
+| min            | Minimum value of the slider.                                                                                                                                                                                                                                                                          | number        | 0       |- |
+| railStyle | Style for slide rail                                                                                                                                                                                                                                                                                  | CSSProperties | - |0.31.0|
+| range          | Toggle whether it is allow to move slider from both sides                                                                                                                                                                                                                                             | boolean       | false   |- |
+| showBoundary   | Toggle whether show max/min value when hover                                                                                                                                                                                                                                                          | boolean       | false   |- |
+| step           | Increment between successive values                                                                                                                                                                                                                                                                   | number        | 1       |- |
+| tipFormatter   | Format Tooltip content, by default display current value                                                                                                                                                                                                                                              | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any      | v => v  |- |
+| tooltipVisible | Toggle whether to display tooltip all the time                                                                                                                                                                                                                                                        | boolean       | -       |- |
+| value          | Set current value, used in controlled component                                                                                                                                                                                                                                                       | number \| number[] |         |- |
+| vertical       | Toggle whether to display slider vertically                                                                                                                                                                                                                                                           | boolean       | false   |- |
+| verticalReverse | Vertical but reverse direction >=1.29.0                                                                                                                                                                                                                                                               | boolean | false |-|
+| onAfterChange  | Triggered when slider changed, passed in current value as params                                                                                                                                                                                                                                      | (value: number \| number[]) => void      | -       |- |
+| onChange       | Callback function when slider value changes                                                                                                                                                                                                                                                           | (value: number \| number[]) => void      | -       |- |
+| getAriaValueText | Used to provide a user-friendly name for the current value of the slider, important for screen reader users,  The parameters value and index are the current slider value, order                                                                                                                      | (value: number, index?: number) => string |-|-|
 ## Accessibility
 
 ### ARIA

+ 22 - 22
content/input/slider/index.md

@@ -227,29 +227,29 @@ import { Slider } from '@douyinfe/semi-ui';
 ```
 
 ## API参考
-| 属性  | 说明        | 类型   | 默认值 | 版本 | 
-|-------|-------------|-----------------|--------|-------|
-| aria-label| [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)属性,用来给当前元素加上的标签描述, 提升可访问性 | string |-|-|
+| 属性  | 说明                                                                                                                                                                 | 类型   | 默认值 | 版本 | 
+|-------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|--------|-------|
+| aria-label| [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)属性,用来给当前元素加上的标签描述, 提升可访问性                                       | string |-|-|
 | aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)属性,表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string |-|-|
-| aria-valuetext| [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext)属性,为滑块的当前值提供用户友好的名称。| string |-|-|
-| defaultValue | 设置初始取值 | number \| number[] | 0 |-|
-| disabled | 滑块是否禁用 | boolean | false |-|
-| included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列 | boolean | true |-|
-| marks | 刻度,key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内 | Record<number, string \> | 无 |-|
-| max | 最大值 | number | 100 |-|
-| min | 最小值 | number | 0 |-|
-| railStyle | 滑块轨道的样式 | CSSProperties | - |0.31.0|
-| range | 是否支持两边同时可滑动 | boolean | false |-|
-| showBoundary | 是否在 hover 时展示最大值最小值 | boolean | false |-|
-| step | 步长 | number | 1 |-|
-| tipFormatter | 设置Tooltip的展示格式,默认显示当前选值  | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v |-|
-| tooltipVisible | 是否始终显示Tooltip | boolean | 无 |-|
-| value | 设置当前取值 | number \| number[] |  |-|
-| vertical | 是否设置方向为垂直 | boolean | false |-|
-| verticalReverse | 反转垂直方向,即上大下小 >=1.29.0| boolean | false |-|
-| onAfterChange | 与 `onmouseup` 触发时机一致,把当前值作为参数传入 | (value: number \| number[]) => void | 无 |-|
-| onChange | 当 Slider 的值发生改变时的回调 | (value: number \| number[]) => void | 无 |-|
-| getAriaValueText | 用于给滑块的当前值提供一个用户友好的名称,对屏幕阅读器用户很重要,参数value为当前滑块的值,index为当前滑块的顺序 | (value: number, index?: number) => string |-|-|
+| aria-valuetext| [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext)属性,为滑块的当前值提供用户友好的名称。                                    | string |-|-|
+| defaultValue | 设置初始取值                                                                                                                                                             | number \| number[] | 0 |-|
+| disabled | 滑块是否禁用                                                                                                                                                             | boolean | false |-|
+| included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列                                                                                                                      | boolean | true |-|
+| marks | 刻度,key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内                                                                                                                       | Record<number, string \> | 无 |-|
+| max | 最大值                                                                                                                                                                | number | 100 |-|
+| min | 最小值                                                                                                                                                                | number | 0 |-|
+| railStyle | 滑块轨道的样式                                                                                                                                                            | CSSProperties | - |0.31.0|
+| range | 是否支持两边同时可滑动                                                                                                                                                        | boolean | false |-|
+| showBoundary | 是否在 hover 时展示最大值最小值                                                                                                                                                | boolean | false |-|
+| step | 步长                                                                                                                                                                 | number | 1 |-|
+| tipFormatter | 设置Tooltip的展示格式,默认显示当前选值                                                                                                                                            | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v |-|
+| tooltipVisible | 是否始终显示Tooltip                                                                                                                                                      | boolean | 无 |-|
+| value | 设置当前取值                                                                                                                                                             | number \| number[] |  |-|
+| vertical | 是否设置方向为垂直                                                                                                                                                          | boolean | false |-|
+| verticalReverse | 反转垂直方向,即上大下小 >=1.29.0                                                                                                                                              | boolean | false |-|
+| onAfterChange | 值变化时触发,把当前值作为参数传入                                                                                                                                                  | (value: number \| number[]) => void | 无 |-|
+| onChange | 当 Slider 的值发生改变时的回调                                                                                                                                                | (value: number \| number[]) => void | 无 |-|
+| getAriaValueText | 用于给滑块的当前值提供一个用户友好的名称,对屏幕阅读器用户很重要,参数value为当前滑块的值,index为当前滑块的顺序                                                                                                      | (value: number, index?: number) => string |-|-|
 
 ## Accessibility
 

+ 2 - 0
packages/semi-ui/slider/index.tsx

@@ -275,6 +275,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             const nextValue = this.props.value;
             const prevValue = this.state.currentValue;
             this.foundation.handleValueChange(prevValue, nextValue);
+            // trigger onAfterChange when value is controlled and changed
+            this.props.onAfterChange(this.props.value);
         }
     }