Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Pass data and aria props to the date picker input.
Pass data and aria props to the alert div.
add wrapProps to ModalProps
  • Loading branch information
Matt Lein authored and afc163 committed Jun 25, 2018
1 parent f0b684d commit e63f9d4
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 3 deletions.
27 changes: 27 additions & 0 deletions components/alert/__tests__/index.test.js
Expand Up @@ -28,4 +28,31 @@ describe('Alert', () => {
jest.runAllTimers();
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');
});
});
});
6 changes: 3 additions & 3 deletions components/alert/index.tsx
Expand Up @@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import Icon from '../icon';
import classNames from 'classnames';
import getDataAttributes from '../_util/getDataAttributes';
import getDataOrAriaProps from '../_util/getDataOrAriaProps';

function noop() { }

Expand Down Expand Up @@ -115,7 +115,7 @@ export default class Alert extends React.Component<AlertProps, any> {
</a>
) : null;

const dataAttributeProps = getDataAttributes(this.props);
const dataOrAriaProps = getDataOrAriaProps(this.props);

return this.state.closed ? null : (
<Animate
Expand All @@ -124,7 +124,7 @@ export default class Alert extends React.Component<AlertProps, any> {
transitionName={`${prefixCls}-slide-up`}
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}
<span className={`${prefixCls}-message`}>{message}</span>
<span className={`${prefixCls}-description`}>{description}</span>
Expand Down
26 changes: 26 additions & 0 deletions components/date-picker/__tests__/DatePicker.test.js
Expand Up @@ -139,4 +139,30 @@ describe('DatePicker', () => {
openPanel(wrapper);
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');
});
});
3 changes: 3 additions & 0 deletions components/date-picker/createPicker.tsx
Expand Up @@ -7,6 +7,7 @@ import omit from 'omit.js';
import Icon from '../icon';
import warning from '../_util/warning';
import interopDefault from '../_util/interopDefault';
import getDataOrAriaProps from '../_util/getDataOrAriaProps';

export interface PickerProps {
value?: moment.Moment;
Expand Down Expand Up @@ -156,6 +157,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
/>
) : null;

const dataOrAriaProps = getDataOrAriaProps(props);
const input = ({ value: inputValue }: { value: moment.Moment | null }) => (
<div>
<input
Expand All @@ -165,6 +167,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
value={(inputValue && inputValue.format(props.format)) || ''}
placeholder={placeholder}
className={props.pickerInputClass}
{...dataOrAriaProps}
/>
{clearIcon}
<span className={`${prefixCls}-picker-icon`} />
Expand Down
1 change: 1 addition & 0 deletions components/modal/Modal.tsx
Expand Up @@ -50,6 +50,7 @@ export interface ModalProps {
maskStyle?: React.CSSProperties;
mask?: boolean;
keyboard?: boolean;
wrapProps?: any;
}

export interface ModalFuncProps {
Expand Down

0 comments on commit e63f9d4

Please sign in to comment.