mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
Pass data and aria props to the date picker input.
Pass data and aria props to the alert div. add wrapProps to ModalProps
This commit is contained in:
parent
f0b684de6a
commit
e63f9d4beb
@ -28,4 +28,31 @@ describe('Alert', () => {
|
|||||||
jest.runAllTimers();
|
jest.runAllTimers();
|
||||||
expect(afterClose).toBeCalled();
|
expect(afterClose).toBeCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('data and aria props', () => {
|
||||||
|
it('sets data attributes on input', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Alert data-test="test-id" data-id="12345" />
|
||||||
|
);
|
||||||
|
const input = wrapper.find('.ant-alert').getDOMNode();
|
||||||
|
expect(input.getAttribute('data-test')).toBe('test-id');
|
||||||
|
expect(input.getAttribute('data-id')).toBe('12345');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets aria attributes on input', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Alert aria-describedby="some-label" />
|
||||||
|
);
|
||||||
|
const input = wrapper.find('.ant-alert').getDOMNode();
|
||||||
|
expect(input.getAttribute('aria-describedby')).toBe('some-label');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets role attribute on input', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Alert role="status" />
|
||||||
|
);
|
||||||
|
const input = wrapper.find('.ant-alert').getDOMNode();
|
||||||
|
expect(input.getAttribute('role')).toBe('status');
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
|
|||||||
import Animate from 'rc-animate';
|
import Animate from 'rc-animate';
|
||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import getDataAttributes from '../_util/getDataAttributes';
|
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
|
||||||
|
|
||||||
function noop() { }
|
function noop() { }
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ export default class Alert extends React.Component<AlertProps, any> {
|
|||||||
</a>
|
</a>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
const dataAttributeProps = getDataAttributes(this.props);
|
const dataOrAriaProps = getDataOrAriaProps(this.props);
|
||||||
|
|
||||||
return this.state.closed ? null : (
|
return this.state.closed ? null : (
|
||||||
<Animate
|
<Animate
|
||||||
@ -124,7 +124,7 @@ export default class Alert extends React.Component<AlertProps, any> {
|
|||||||
transitionName={`${prefixCls}-slide-up`}
|
transitionName={`${prefixCls}-slide-up`}
|
||||||
onEnd={this.animationEnd}
|
onEnd={this.animationEnd}
|
||||||
>
|
>
|
||||||
<div data-show={this.state.closing} className={alertCls} style={style} {...dataAttributeProps}>
|
<div data-show={this.state.closing} className={alertCls} style={style} {...dataOrAriaProps}>
|
||||||
{showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
|
{showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
|
||||||
<span className={`${prefixCls}-message`}>{message}</span>
|
<span className={`${prefixCls}-message`}>{message}</span>
|
||||||
<span className={`${prefixCls}-description`}>{description}</span>
|
<span className={`${prefixCls}-description`}>{description}</span>
|
||||||
|
@ -139,4 +139,30 @@ describe('DatePicker', () => {
|
|||||||
openPanel(wrapper);
|
openPanel(wrapper);
|
||||||
expect(hasSelected(wrapper, moment('2016-11-22'))).toBe(true);
|
expect(hasSelected(wrapper, moment('2016-11-22'))).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('sets data attributes on input', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<DatePicker data-test="test-id" data-id="12345" />
|
||||||
|
);
|
||||||
|
const input = wrapper.find('.ant-calendar-picker-input').getDOMNode();
|
||||||
|
expect(input.getAttribute('data-test')).toBe('test-id');
|
||||||
|
expect(input.getAttribute('data-id')).toBe('12345');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets aria attributes on input', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<DatePicker aria-label="some-label" aria-labelledby="label-id" />
|
||||||
|
);
|
||||||
|
const input = wrapper.find('.ant-calendar-picker-input').getDOMNode();
|
||||||
|
expect(input.getAttribute('aria-label')).toBe('some-label');
|
||||||
|
expect(input.getAttribute('aria-labelledby')).toBe('label-id');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets role attribute on input', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<DatePicker role="search" />
|
||||||
|
);
|
||||||
|
const input = wrapper.find('.ant-calendar-picker-input').getDOMNode();
|
||||||
|
expect(input.getAttribute('role')).toBe('search');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -7,6 +7,7 @@ import omit from 'omit.js';
|
|||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
import warning from '../_util/warning';
|
import warning from '../_util/warning';
|
||||||
import interopDefault from '../_util/interopDefault';
|
import interopDefault from '../_util/interopDefault';
|
||||||
|
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
|
||||||
|
|
||||||
export interface PickerProps {
|
export interface PickerProps {
|
||||||
value?: moment.Moment;
|
value?: moment.Moment;
|
||||||
@ -156,6 +157,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
|||||||
/>
|
/>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
|
const dataOrAriaProps = getDataOrAriaProps(props);
|
||||||
const input = ({ value: inputValue }: { value: moment.Moment | null }) => (
|
const input = ({ value: inputValue }: { value: moment.Moment | null }) => (
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
@ -165,6 +167,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
|||||||
value={(inputValue && inputValue.format(props.format)) || ''}
|
value={(inputValue && inputValue.format(props.format)) || ''}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
className={props.pickerInputClass}
|
className={props.pickerInputClass}
|
||||||
|
{...dataOrAriaProps}
|
||||||
/>
|
/>
|
||||||
{clearIcon}
|
{clearIcon}
|
||||||
<span className={`${prefixCls}-picker-icon`} />
|
<span className={`${prefixCls}-picker-icon`} />
|
||||||
|
@ -50,6 +50,7 @@ export interface ModalProps {
|
|||||||
maskStyle?: React.CSSProperties;
|
maskStyle?: React.CSSProperties;
|
||||||
mask?: boolean;
|
mask?: boolean;
|
||||||
keyboard?: boolean;
|
keyboard?: boolean;
|
||||||
|
wrapProps?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ModalFuncProps {
|
export interface ModalFuncProps {
|
||||||
|
Loading…
Reference in New Issue
Block a user