Skip to content

Commit

Permalink
feat: add hideLabel tooltipOnDot showArrow
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaiQiangReal
DaiQiangReal committed Nov 27, 2023
1 parent 6cfb424 commit 0241bbb
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 3 deletions.
3 changes: 3 additions & 0 deletions content/input/slider/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<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 |- |
| 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 |- |
Expand Down
3 changes: 3 additions & 0 deletions content/input/slider/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<number, string \> | 无 | - |
| 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 | - |
Expand Down
3 changes: 3 additions & 0 deletions packages/semi-foundation/slider/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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<string, any>;
showArrow?: boolean;
className?: string;
showBoundary?: boolean;
railStyle?: Record<string, any>;
Expand Down
16 changes: 13 additions & 3 deletions packages/semi-ui/slider/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
// 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,
Expand All @@ -44,7 +45,9 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
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,
Expand All @@ -56,10 +59,12 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
static defaultProps: Partial<SliderProps> = {
// 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,
Expand Down Expand Up @@ -313,6 +318,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
const handleContents = !range ? (
<Tooltip
content={tipChildren.min}
showArrow={this.props.showArrow}
position="top"
trigger="custom"
rePosKey={minPercent}
Expand Down Expand Up @@ -515,14 +521,15 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
[`${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
<span
key={mark}
onClick={this.foundation.handleWrapClick}
className={markClass}
style={{ [stylePos]: `calc(${markPercent * 100}% - 2px)` }}
/>
/>;
return activeResult ? (
this.props.tooltipOnDot?<Tooltip content={marks[mark]}>{dotDOM}</Tooltip>:dotDOM
) : null;
})}
</div>
Expand All @@ -531,6 +538,9 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
};

renderLabel = () => {
if (this.props.hideLabel) {
return null;
}
const { min, max, vertical, marks, verticalReverse } = this.props;
const stylePos = vertical ? 'top' : 'left';
const labelContent =
Expand Down

0 comments on commit 0241bbb

Please sign in to comment.