Skip to content

Commit

Permalink
feat: add Input element for Skeleton (#20264)
Browse files Browse the repository at this point in the history 
* complete skeleton input element (#18237)

* update test snapshots

* update skeleton doc

* add more test for skeleton input

* fix test snapshots issue
  • Loading branch information
@Rustin170506 @zombieJ
Rustin170506 authored and zombieJ committed Dec 19, 2019
1 parent e0aeb4f commit 1c4bae5
Show file tree
Hide file tree
Showing 10 changed files with 365 additions and 69 deletions.
36 changes: 36 additions & 0 deletions components/skeleton/Input.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as React from 'react';
import omit from 'omit.js';
import classNames from 'classnames';
import Element, { SkeletonElementProps } from './Element';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
size?: 'large' | 'small' | 'default';
}

// eslint-disable-next-line react/prefer-stateless-function
class SkeletonInput extends React.Component<SkeletonInputProps, any> {
static defaultProps: Partial<SkeletonInputProps> = {
size: 'default',
};

renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, className, active } = this.props;
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const otherProps = omit(this.props, ['prefixCls']);
const cls = classNames(prefixCls, className, `${prefixCls}-element`, {
[`${prefixCls}-active`]: active,
});
return (
<div className={cls}>
<Element prefixCls={`${prefixCls}-input`} {...otherProps} />
</div>
);
};

render() {
return <ConfigConsumer>{this.renderSkeletonInput}</ConfigConsumer>;
}
}

export default SkeletonInput;
3 changes: 3 additions & 0 deletions components/skeleton/Skeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import SkeletonButton from './Button';
import Element from './Element';
import SkeletonAvatar, { AvatarProps } from './Avatar';
import SkeletonInput from './Input';

/* This only for skeleton internal. */
interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {}
Expand Down Expand Up @@ -72,6 +73,8 @@ class Skeleton extends React.Component<SkeletonProps, any> {

static Avatar: typeof SkeletonAvatar;

static Input: typeof SkeletonInput;

static defaultProps: Partial<SkeletonProps> = {
avatar: false,
title: true,
Expand Down
234 changes: 183 additions & 51 deletions components/skeleton/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,60 @@ exports[`renders ./components/skeleton/demo/basic.md correctly 1`] = `
</div>
`;

exports[`renders ./components/skeleton/demo/button.md correctly 1`] = `
exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
<div
class="article"
>
<div>
<h4>
Ant Design, a design language
</h4>
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
</div>
<button
class="ant-btn"
type="button"
>
<span>
Show Skeleton
</span>
</button>
</div>
`;

exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = `
<div
class="ant-skeleton ant-skeleton-with-avatar"
>
<div
class="ant-skeleton-header"
>
<span
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
/>
</div>
<div
class="ant-skeleton-content"
>
<h3
class="ant-skeleton-title"
style="width:50%"
/>
<ul
class="ant-skeleton-paragraph"
>
<li />
<li />
<li />
<li />
</ul>
</div>
</div>
`;

exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
<div>
<div>
<form
Expand Down Expand Up @@ -460,58 +513,137 @@ exports[`renders ./components/skeleton/demo/button.md correctly 1`] = `
/>
</div>
</div>
</div>
`;

exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
<div
class="article"
>
<br />
<div>
<h4>
Ant Design, a design language
</h4>
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
</div>
<button
class="ant-btn"
type="button"
>
<span>
Show Skeleton
</span>
</button>
</div>
`;

exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = `
<div
class="ant-skeleton ant-skeleton-with-avatar"
>
<div
class="ant-skeleton-header"
>
<span
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
/>
</div>
<div
class="ant-skeleton-content"
>
<h3
class="ant-skeleton-title"
style="width:50%"
/>
<ul
class="ant-skeleton-paragraph"
<form
class="ant-form ant-form-inline"
style="margin-bottom:16px"
>
<li />
<li />
<li />
<li />
</ul>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="InputActive"
>
InputActive
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-label"
>
<label
class=""
title="InputSize"
>
InputSize
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
</form>
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-input"
style="width:300px"
/>
</div>
</div>
</div>
`;
Expand Down
40 changes: 40 additions & 0 deletions components/skeleton/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,46 @@ exports[`Skeleton button element size 3`] = `
</div>
`;

exports[`Skeleton input element active 1`] = `
<div
class="ant-skeleton ant-skeleton-element ant-skeleton-active"
>
<span
class="ant-skeleton-input"
/>
</div>
`;

exports[`Skeleton input element size 1`] = `
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-input ant-skeleton-input-sm"
/>
</div>
`;

exports[`Skeleton input element size 2`] = `
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-input"
/>
</div>
`;

exports[`Skeleton input element size 3`] = `
<div
class="ant-skeleton ant-skeleton-element"
>
<span
class="ant-skeleton-input ant-skeleton-input-lg"
/>
</div>
`;

exports[`Skeleton paragraph rows 1`] = `
<div
class="ant-skeleton"
Expand Down
16 changes: 16 additions & 0 deletions components/skeleton/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ describe('Skeleton', () => {
);
const genSkeletonButton = props => mount(<Skeleton.Button {...props} />);
const genSkeletonAvatar = props => mount(<Skeleton.Avatar {...props} />);
const genSkeletonInput = props => mount(<Skeleton.Input {...props} />);

mountTest(Skeleton);

Expand Down Expand Up @@ -112,4 +113,19 @@ describe('Skeleton', () => {
expect(wrapperSquare.render()).toMatchSnapshot();
});
});

describe('input element', () => {
it('active', () => {
const wrapper = genSkeletonInput({ active: true });
expect(wrapper.render()).toMatchSnapshot();
});
it('size', () => {
const wrapperSmall = genSkeletonInput({ size: 'small' });
expect(wrapperSmall.render()).toMatchSnapshot();
const wrapperDefault = genSkeletonInput({ size: 'default' });
expect(wrapperDefault.render()).toMatchSnapshot();
const wrapperLarge = genSkeletonInput({ size: 'large' });
expect(wrapperLarge.render()).toMatchSnapshot();
});
});
});
Loading

0 comments on commit 1c4bae5

Please sign in to comment.