mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
fix: Slider disabled status in form (#43142)
* fix slider component disabled status in form * add test case & update demo * fix related test cases
This commit is contained in:
Starpuccino
GitHub
parent
5728abe94e
commit
5c350a80e2
@ -25451,7 +25451,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
|
||||
|
||||
exports[`ConfigProvider components Slider configProvider componentDisabled 1`] = `
|
||||
<div
|
||||
class="config-slider config-slider-horizontal"
|
||||
class="config-slider config-slider-disabled config-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="config-slider-rail"
|
||||
@ -25464,14 +25464,13 @@ exports[`ConfigProvider components Slider configProvider componentDisabled 1`] =
|
||||
class="config-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-disabled="true"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="config-slider-handle config-tooltip-open"
|
||||
role="slider"
|
||||
style="left: 0%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="config-tooltip config-zoom-big-fast-appear config-zoom-big-fast-appear-prepare config-zoom-big-fast config-slider-tooltip config-tooltip-placement-top"
|
||||
|
||||
@ -5226,6 +5226,78 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Slider"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-14 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-disabled ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 0%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 0%; transform: translateX(-50%);"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -2719,6 +2719,59 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Slider"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-14 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-disabled ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left:0%;width:0%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left:0%;transform:translateX(-50%)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -991,6 +991,59 @@ exports[`Form form should support disabled 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Slider"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-14 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-disabled ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 0%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 0%; transform: translateX(-50%);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ import zhCN from '../../locale/zh_CN';
|
||||
import Modal from '../../modal';
|
||||
import Radio from '../../radio';
|
||||
import Select from '../../select';
|
||||
import Slider from '../../slider';
|
||||
import Switch from '../../switch';
|
||||
import TreeSelect from '../../tree-select';
|
||||
import Upload from '../../upload';
|
||||
@ -1160,6 +1161,9 @@ describe('Form', () => {
|
||||
<Form.Item label="Button">
|
||||
<Button>Button</Button>
|
||||
</Form.Item>
|
||||
<Form.Item label="Slider">
|
||||
<Slider />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const { container } = render(<App />);
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
InputNumber,
|
||||
Radio,
|
||||
Select,
|
||||
Slider,
|
||||
Switch,
|
||||
TreeSelect,
|
||||
Upload,
|
||||
@ -109,6 +110,9 @@ const FormDisabledDemo: React.FC = () => {
|
||||
<Form.Item label="Button">
|
||||
<Button>Button</Button>
|
||||
</Form.Item>
|
||||
<Form.Item label="Slider">
|
||||
<Slider />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -5,6 +5,7 @@ import type { SliderRef } from 'rc-slider/lib/Slider';
|
||||
import React from 'react';
|
||||
import warning from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import type { TooltipPlacement } from '../tooltip';
|
||||
import SliderTooltip from './SliderTooltip';
|
||||
import useStyle from './style';
|
||||
@ -103,6 +104,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
range,
|
||||
className,
|
||||
rootClassName,
|
||||
disabled,
|
||||
// Deprecated Props
|
||||
tooltipPrefixCls: legacyTooltipPrefixCls,
|
||||
tipFormatter: legacyTipFormatter,
|
||||
@ -114,6 +116,8 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
} = props;
|
||||
|
||||
const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
|
||||
const contextDisabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = disabled ?? contextDisabled;
|
||||
const [opens, setOpens] = React.useState<Opens>({});
|
||||
|
||||
const toggleTooltipOpen = (index: number, open: boolean) => {
|
||||
@ -238,6 +242,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
|
||||
range={mergedRange}
|
||||
draggableTrack={draggableTrack}
|
||||
className={cls}
|
||||
disabled={mergedDisabled}
|
||||
ref={ref}
|
||||
prefixCls={prefixCls}
|
||||
handleRender={handleRender}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user