GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: Slider disabled status in form (#43142) 

* fix slider component disabled status in form

* add test case & update demo

* fix related test cases
pull/43162/head
Starpuccino 1 year ago
committed by GitHub
parent
5728abe94e
commit
5c350a80e2
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 193 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
  2. 72
      components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
  3. 53
      components/form/__tests__/__snapshots__/demo.test.tsx.snap
  4. 53
      components/form/__tests__/__snapshots__/index.test.tsx.snap
  5. 4
      components/form/__tests__/index.test.tsx
  6. 4
      components/form/demo/disabled.tsx
  7. 5
      components/slider/index.tsx

5
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -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"

72
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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>,
]
`;

53
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -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>,
]
`;

53
components/form/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -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>
`;

4
components/form/__tests__/index.test.tsx
View File

@ -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 />);

4
components/form/demo/disabled.tsx
View File

@ -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
components/slider/index.tsx
View File

@ -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}

Write Preview
Loading…
Cancel
Save