ant-design/components/slider/index.tsx

233 lines
7.0 KiB
TypeScript
Raw Normal View History

import classNames from 'classnames';
import type { SliderProps as RcSliderProps } from 'rc-slider';
import RcSlider from 'rc-slider';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { TooltipPlacement } from '../tooltip';
import warning from '../_util/warning';
import SliderTooltip from './SliderTooltip';
2016-08-10 09:46:56 +08:00
export type SliderMarks = RcSliderProps['marks'];
2016-08-10 09:46:56 +08:00
interface HandleGeneratorInfo {
2020-06-15 17:50:36 +08:00
value?: number;
dragging?: boolean;
index: number;
2018-12-07 20:02:01 +08:00
}
export type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;
export interface SliderTooltipProps {
prefixCls?: string;
open?: boolean;
placement?: TooltipPlacement;
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
formatter?: null | ((value?: number) => React.ReactNode);
}
export interface SliderBaseProps {
2017-02-17 11:59:30 +08:00
prefixCls?: string;
/**
* @deprecated `tooltipPrefixCls` is deprecated which will be removed in next major version.
* Please use `tooltip.prefixCls` instead.
*/
2017-02-17 11:59:30 +08:00
tooltipPrefixCls?: string;
reverse?: boolean;
2016-08-10 09:46:56 +08:00
min?: number;
max?: number;
step?: null | number;
2016-08-10 09:46:56 +08:00
marks?: SliderMarks;
dots?: boolean;
included?: boolean;
disabled?: boolean;
vertical?: boolean;
/**
* @deprecated `tipFormatter` is deprecated which will be removed in next major version. Please
* use `tooltip.formatter` instead.
*/
2020-06-15 17:50:36 +08:00
tipFormatter?: null | ((value?: number) => React.ReactNode);
2017-09-10 02:32:00 +08:00
className?: string;
id?: string;
2018-11-13 22:55:17 +08:00
style?: React.CSSProperties;
/**
* @deprecated `tooltipVisible` is deprecated which will be removed in next major version. Please
* use `tooltip.open` instead.
*/
tooltipVisible?: boolean;
/**
* @deprecated `tooltipPlacement` is deprecated which will be removed in next major version.
* Please use `tooltip.placement` instead.
*/
tooltipPlacement?: TooltipPlacement;
tooltip?: SliderTooltipProps;
/**
* @deprecated `getTooltipPopupContainer` is deprecated which will be removed in next major
* version. Please use `tooltip.getPopupContainer` instead.
*/
getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
autoFocus?: boolean;
2016-08-10 09:46:56 +08:00
}
export interface SliderSingleProps extends SliderBaseProps {
range?: false;
value?: number;
defaultValue?: number;
onChange?: (value: number) => void;
onAfterChange?: (value: number) => void;
handleStyle?: React.CSSProperties;
trackStyle?: React.CSSProperties;
railStyle?: React.CSSProperties;
}
export interface SliderRangeProps extends SliderBaseProps {
range: true | SliderRange;
value?: [number, number];
defaultValue?: [number, number];
onChange?: (value: [number, number]) => void;
onAfterChange?: (value: [number, number]) => void;
handleStyle?: React.CSSProperties[];
trackStyle?: React.CSSProperties[];
railStyle?: React.CSSProperties;
}
interface SliderRange {
draggableTrack?: boolean;
}
export type Opens = { [index: number]: boolean };
const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
(props, ref: any) => {
const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
const [opens, setOpens] = React.useState<Opens>({});
2017-12-01 18:01:14 +08:00
const toggleTooltipOpen = (index: number, open: boolean) => {
setOpens((prev: Opens) => ({ ...prev, [index]: open }));
};
2019-08-05 18:38:10 +08:00
const getTooltipPlacement = (tooltipPlacement?: TooltipPlacement, vertical?: boolean) => {
if (tooltipPlacement) {
return tooltipPlacement;
}
if (!vertical) {
return 'top';
}
return direction === 'rtl' ? 'left' : 'right';
};
const { prefixCls: customizePrefixCls, range, className, ...restProps } = props;
const prefixCls = getPrefixCls('slider', customizePrefixCls);
const cls = classNames(className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
// make reverse default on rtl direction
if (direction === 'rtl' && !restProps.vertical) {
restProps.reverse = !restProps.reverse;
}
// Range config
const [mergedRange, draggableTrack] = React.useMemo(() => {
if (!range) {
return [false];
}
return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
}, [range]);
// Warning for deprecated usage
if (process.env.NODE_ENV !== 'production') {
[
['tooltipPrefixCls', 'prefixCls'],
['getTooltipPopupContainer', 'getPopupContainer'],
['tipFormatter', 'formatter'],
['tooltipPlacement', 'placement'],
['tooltipVisible', 'open'],
].forEach(([deprecatedName, newName]) => {
warning(
!(deprecatedName in props),
'Slider',
`\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`tooltip.${newName}\` instead.`,
);
});
}
const handleRender: RcSliderProps['handleRender'] = (node, info) => {
const { index, dragging } = info;
const rootPrefixCls = getPrefixCls();
const { tooltip = {}, vertical } = props;
const tooltipProps: SliderTooltipProps = {
formatter:
props.tipFormatter ??
// eslint-disable-next-line func-names
function (value) {
return typeof value === 'number' ? value.toString() : '';
},
open: props.tooltipVisible,
placement: props.tooltipPlacement,
getPopupContainer: props.getTooltipPopupContainer,
...tooltip,
};
const {
open: tooltipOpen,
placement: tooltipPlacement,
getPopupContainer: getTooltipPopupContainer,
prefixCls: customizeTooltipPrefixCls,
formatter: tipFormatter,
} = tooltipProps;
const isTipFormatter = tipFormatter ? opens[index] || dragging : false;
const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
const passedProps = {
...node.props,
onMouseEnter: () => toggleTooltipOpen(index, true),
onMouseLeave: () => toggleTooltipOpen(index, false),
};
const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
return (
<SliderTooltip
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(info.value) : ''}
open={open}
placement={getTooltipPlacement(tooltipPlacement, vertical)}
transitionName={`${rootPrefixCls}-zoom-down`}
key={index}
overlayClassName={`${prefixCls}-tooltip`}
getPopupContainer={getTooltipPopupContainer || getPopupContainer}
>
{React.cloneElement(node, passedProps)}
</SliderTooltip>
);
};
return (
<RcSlider
{...(restProps as SliderRangeProps)}
step={restProps.step!}
range={mergedRange}
draggableTrack={draggableTrack}
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
className={cls}
ref={ref}
prefixCls={prefixCls}
handleRender={handleRender}
/>
);
},
);
if (process.env.NODE_ENV !== 'production') {
Slider.displayName = 'Slider';
}
export default Slider;