From 0241bbba45d5c7783c379b80637b3a7ea751ebc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=A3=E5=BC=BA?= Date: Mon, 27 Nov 2023 16:31:39 +0800 Subject: [PATCH] feat: add hideLabel tooltipOnDot showArrow --- content/input/slider/index-en-US.md | 3 +++ content/input/slider/index.md | 3 +++ packages/semi-foundation/slider/foundation.ts | 3 +++ packages/semi-ui/slider/index.tsx | 16 +++++++++++++--- 4 files changed, 22 insertions(+), 3 deletions(-) diff --git a/content/input/slider/index-en-US.md b/content/input/slider/index-en-US.md index 3c98d6cdce..3a79e61346 100644 --- a/content/input/slider/index-en-US.md +++ b/content/input/slider/index-en-US.md @@ -247,15 +247,18 @@ import { Slider } from '@douyinfe/semi-ui'; | 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 |- | +| hideLabel | Whether to hide the label | boolean | false | 2.48.0 | | 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 | - |- | | 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 |- | +| showArrow | whether the tooltip has an arrow | boolean | true | 2.48.0| | 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 |- | +| tooltipOnDot | Whether the mark on the slide rail has a tooltip | false | 2.48.0 | | 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 |- | diff --git a/content/input/slider/index.md b/content/input/slider/index.md index 0fc71df58c..92fe8d598e 100644 --- a/content/input/slider/index.md +++ b/content/input/slider/index.md @@ -234,15 +234,18 @@ import { Slider } from '@douyinfe/semi-ui'; | 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 | - | +| hideLabel | 是否隐藏标签 | boolean | false | 2.48.0 | | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | - | | marks | 刻度，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内 | Record | 无 | - | | max | 最大值 | number | 100 | - | | min | 最小值 | number | 0 | - | | railStyle | 滑块轨道的样式 | CSSProperties | - | 0.31.0 | | range | 是否支持两边同时可滑动 | boolean | false | - | +| showArrow | tooltip 是否带箭头 | boolean | true | 2.48.0| | showBoundary | 是否在 hover 时展示最大值最小值 | boolean | false | - | | step | 步长 | number | 1 | - | | tipFormatter | 设置Tooltip的展示格式，默认显示当前选值 | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v | - | +| tooltipOnDot | 滑轨上的 mark 是否带有 tooltip | false | 2.48.0 | | tooltipVisible | 是否始终显示Tooltip | boolean | 无 | - | | value | 设置当前取值 | number \| number[] | | - | | vertical | 是否设置方向为垂直 | boolean | false | - | diff --git a/packages/semi-foundation/slider/foundation.ts b/packages/semi-foundation/slider/foundation.ts index 64d4c4b45c..7bbd0eb729 100644 --- a/packages/semi-foundation/slider/foundation.ts +++ b/packages/semi-foundation/slider/foundation.ts @@ -12,6 +12,7 @@ export type tipFormatterBasicType = string | number | boolean | null; export interface SliderProps{ defaultValue?: number | number[]; disabled?: boolean; + hideLabel?: boolean; included?: boolean; // Whether to juxtapose. Allow dragging marks?: Marks; // Scale max?: number; @@ -24,8 +25,10 @@ export interface SliderProps{ onAfterChange?: (value: SliderProps['value']) => void; // triggered when mouse up and clicked onChange?: (value: SliderProps['value']) => void; onMouseUp?: (e: any) => void; + tooltipOnDot?: boolean; tooltipVisible?: boolean; style?: Record; + showArrow?: boolean; className?: string; showBoundary?: boolean; railStyle?: Record; diff --git a/packages/semi-ui/slider/index.tsx b/packages/semi-ui/slider/index.tsx index 8e3111fa85..fcb650a881 100644 --- a/packages/semi-ui/slider/index.tsx +++ b/packages/semi-ui/slider/index.tsx @@ -32,6 +32,7 @@ export default class Slider extends BaseComponent { // allowClear: PropTypes.bool, defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.array]), disabled: PropTypes.bool, + hideLabel: PropTypes.bool, included: PropTypes.bool, // Whether to juxtapose. Allow dragging marks: PropTypes.object, // Scale max: PropTypes.number, @@ -44,7 +45,9 @@ export default class Slider extends BaseComponent { onAfterChange: PropTypes.func, // OnmouseUp and triggered when clicked onChange: PropTypes.func, onMouseUp: PropTypes.func, + tooltipOnDot: PropTypes.bool, tooltipVisible: PropTypes.bool, + showArrow: PropTypes.bool, style: PropTypes.object, className: PropTypes.string, showBoundary: PropTypes.bool, @@ -56,10 +59,12 @@ export default class Slider extends BaseComponent { static defaultProps: Partial = { // allowClear: false, disabled: false, + hideLabel: false, included: true, // No is juxtaposition. Allow dragging max: 100, min: 0, range: false, // Whether both sides + showArrow: true, step: 1, tipFormatter: (value: tipFormatterBasicType | tipFormatterBasicType[]) => value, vertical: false, @@ -313,6 +318,7 @@ export default class Slider extends BaseComponent { const handleContents = !range ? ( { [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active', }); const markPercent = (Number(mark) - min) / (max - min); - return activeResult ? ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions + const dotDOM = // eslint-disable-next-line jsx-a11y/no-static-element-interactions + />; + return activeResult ? ( + this.props.tooltipOnDot?{dotDOM}:dotDOM ) : null; })} @@ -531,6 +538,9 @@ export default class Slider extends BaseComponent { }; renderLabel = () => { + if (this.props.hideLabel) { + return null; + } const { min, max, vertical, marks, verticalReverse } = this.props; const stylePos = vertical ? 'top' : 'left'; const labelContent =