提交 99e030cc 编写于 作者: A afc163

Merge branch 'master' into feature-3.4.0

......@@ -63,6 +63,7 @@ if (process.env.RUN_ENV === 'DEMO') {
'eol-last': 0,
'prefer-rest-params': 0,
'react/no-multi-comp': 0,
'react/prefer-stateless-function': 0,
'jsx-a11y/href-no-hash': 0,
'import/newline-after-import': 0,
});
......
<!--
两会期间,如果遇到官网无法访问,请使用代理或者访问国内镜像 http://ant-design.gitee.io
-->
<!--
IMPORTANT: Please use the following link to create a new issue:
......@@ -12,6 +16,4 @@ If your issue was not created using the app above, it will be closed immediately
http://new-issue.ant.design
不是用上面的链接创建的 issue 会被立即关闭。
两会期间,如果遇到官网无法访问,可以先使用代理访问或者访问国内镜像 http://ant-design.gitee.io
-->
......@@ -14,7 +14,28 @@ timeline: true
* Major version release is not included in this schedule for breaking change and new features.
---
## 3.3.2
`2018-03-24`
- 🐞 `Carousel`: Upgrade `react-slick` version to fix width calculation. [#3659](https://github.com/ant-design/ant-design/issues/3659)
- 💄 `Rate`: Adjust `disabled` style. [#9747](https://github.com/ant-design/ant-design/issues/9747)
- 💄 `Modal`: Adjust `confirm-modal` style to fix multiple line display issue. [#9374](https://github.com/ant-design/ant-design/issues/9374)
- 💄 `Menu`: Adjust style to fix mouse trigger event region. [#9666](https://github.com/ant-design/ant-design/pull/9666) [@dgeibi](https://github.com/dgeibi)
- 🐞 `Upload`: Fix type of `file` on `beforeUpload` function. [#9775](https://github.com/ant-design/ant-design/issues/9775)
- 🐞 `Button`: Fix `two-chinese-words` space not re-calculate when text changed. [4502ad8](https://github.com/ant-design/ant-design/commit/4502ad8376e536c450fa4f27d2a5855be5a153e7)
## 3.3.1
`2018-03-18`
- 💄 Tweak danger button focus style.
- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639)
- 🐞 Fix missing key of `column.title` in Table .[#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55)
- 🐞 Fix `scroll: { x: true }` not working if `.ant-table-scroll table` width is `auto`. [#9704](https://github.com/ant-design/ant-design/pull/9704)
- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831)
- 🐞 Fix isMoment call in `TimePicker` will report error in parcel. [85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4)
- 🐞 Tweak `Table` border radius. [#9674](https://github.com/ant-design/ant-design/pull/9674)
## 3.3.0
`2018-03-12`
......
......@@ -14,6 +14,28 @@ timeline: true
* 主版本号:含有破坏性更新和新特性,不在发布周期内。
---
## 3.3.2
`2018-03-24`
- 🐞 `Carousel`: 升级 `react-slick` 版本以修复宽度计算错误。 [#3659](https://github.com/ant-design/ant-design/issues/3659)
- 💄 `Rate`: 调整 `disabled` 样式。 [#9747](https://github.com/ant-design/ant-design/issues/9747)
- 💄 `Modal`: 调整 `confirm-modal` 样式以修复标题多行展示问题。 [#9374](https://github.com/ant-design/ant-design/issues/9374)
- 💄 `Menu`: 调整样式以修复鼠标事件范围。[#9666](https://github.com/ant-design/ant-design/pull/9666) [@dgeibi](https://github.com/dgeibi)
- 🐞 `Upload`: 修复 `beforeUpload``file` 类型错误。 [#9775](https://github.com/ant-design/ant-design/issues/9775)
- 🐞 `Button`: 修复文本改变时,空格插入没有重新计算 [4502ad8](https://github.com/ant-design/ant-design/commit/4502ad8376e536c450fa4f27d2a5855be5a153e7)
## 3.3.1
`2018-03-18`
- 💄 调整 danger Button 的 `focus` 样式。
- 🐞 修复 enterButton 的值为 button 元素时显示错误的问题。 [#9639](https://github.com/ant-design/ant-design/issues/9639)
- 🐞 修复 Table 中的 `column.title` 的缺少 key 的问题。 [#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55)
- 🐞 修复 `scroll: { x: true }``.ant-table-scroll table`宽度为 `auto`的情况下不工作的问题。[#9704](https://github.com/ant-design/ant-design/pull/9704)
- 🐞 修复表单校验文字消失的时候输入框会抖一下的问题。 [#8831](https://github.com/ant-design/ant-design/issues/8831)
- 🐞 修复 `TimePicker` 里的 isMoment 调用在 parcel 里会报错的问题。[85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4)
- 💄 调整 Table 的圆角样式。 [#9674](https://github.com/ant-design/ant-design/pull/9674)
## 3.3.0
......
......@@ -11,7 +11,7 @@
[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design)
[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://www.npmtrends.com/antd)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)
......@@ -25,7 +25,7 @@
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
- 使用 TypeScript 构建,提供完整的类型定义文件。
- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架
- 全链路开发和设计工具体系
## 支持环境
......
......@@ -11,7 +11,7 @@
[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design)
[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmcharts.com/compare/antd?minimal=true)
[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://www.npmtrends.com/antd)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)
......@@ -29,7 +29,7 @@ An enterprise-class UI design language and React-based implementation.
- An enterprise-class UI design system for desktop applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with predictable static types.
- Work with great development and design resources and tools.
- The whole package of development and design resources and tools.
## Environment Support
......
......@@ -95,6 +95,7 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
};
private fixedNode: HTMLElement;
private placeholderNode: HTMLElement;
setAffixStyle(e: any, affixStyle: React.CSSProperties | null) {
const { onChange = noop, target = getDefaultTarget } = this.props;
......@@ -123,6 +124,21 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
this.setState({ placeholderStyle: placeholderStyle as React.CSSProperties });
}
syncPlaceholderStyle(e: any) {
const { affixStyle } = this.state;
if (!affixStyle) {
return;
}
this.placeholderNode.style.cssText = '';
this.setAffixStyle(e, {
...affixStyle,
width: this.placeholderNode.offsetWidth,
});
this.setPlaceholderStyle({
width: this.placeholderNode.offsetWidth,
});
}
@throttleByAnimationFrameDecorator()
updatePosition(e: any) {
let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
......@@ -194,6 +210,10 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
}
this.setPlaceholderStyle(null);
}
if (e.type === 'resize') {
this.syncPlaceholderStyle(e);
}
}
componentDidMount() {
......@@ -245,6 +265,10 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
this.fixedNode = node;
}
savePlaceholderNode = (node: HTMLDivElement) => {
this.placeholderNode = node;
}
render() {
const className = classNames({
[this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
......@@ -253,7 +277,7 @@ export default class Affix extends React.Component<AffixProps, AffixState> {
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
return (
<div {...props} style={placeholderStyle}>
<div {...props} style={placeholderStyle} ref={this.savePlaceholderNode}>
<div className={className} ref={this.saveFixedNode} style={this.state.affixStyle}>
{this.props.children}
</div>
......
......@@ -15,6 +15,7 @@ Alert component for feedback.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| afterClose | Called when close animation is finished | () => void | - |
| banner | Whether to show as banner | boolean | false |
| closable | Whether Alert can be closed | boolean | - |
| closeText | Close text to show | string\|ReactNode | - |
......@@ -23,4 +24,4 @@ Alert component for feedback.
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
| iconType | Icon type, effective when `showIcon` is `true` | string | - |
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
| onClose | Callback when Alert is closed | Function | - |
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
......@@ -22,7 +22,7 @@ export interface AlertProps {
/** Callback when close Alert */
onClose?: React.MouseEventHandler<HTMLAnchorElement>;
/** Trigger when animation ending of Alert */
afterClose?: Function;
afterClose?: () => void;
/** Whether to show icon */
showIcon?: boolean;
iconType?: string;
......
......@@ -16,6 +16,7 @@ title: Alert
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | 关闭动画结束后的回掉 | () => void | - |
| banner | 是否用作顶部公告 | boolean | false |
| closable | 默认不显示关闭按钮 | boolean | 无 |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
......@@ -24,4 +25,4 @@ title: Alert
| showIcon | 是否显示辅助图标 | boolean | false,`banner` 模式下默认值为 true |
| iconType | 自定义图标类型,`showIcon``true` 时有效 | string | - |
| type | 指定警告提示的样式,有四种选择 `success``info``warning``error` | string | `info``banner` 模式下默认值为 `warning` |
| onClose | 关闭时触发的回调函数 | Function | 无 |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
......@@ -113,7 +113,10 @@
top: auto;
display: block;
position: relative;
transform: none !important;
}
&-not-a-wrapper .@{badge-prefix-cls}-count {
transform: none;
}
}
......
......@@ -28,6 +28,24 @@ describe('Button', () => {
expect(wrapper2).toMatchSnapshot();
});
it('renders Chinese characters correctly in HOC', () => {
const Text = props => <span>{props.children}</span>;
const wrapper = mount(
<Button><Text>按钮</Text></Button>
);
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
wrapper.setProps({
children: <Text>大按钮</Text>,
});
wrapper.update();
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(false);
wrapper.setProps({
children: <Text>按钮</Text>,
});
wrapper.update();
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
});
it('have static perperty for type detecting', () => {
const wrapper = mount(
<Button>Button Text</Button>
......
......@@ -95,13 +95,7 @@ export default class Button extends React.Component<ButtonProps, any> {
}
componentDidMount() {
// Fix for HOC usage like <FormatMessage />
const buttonText = (findDOMNode(this) as HTMLElement).innerText;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
this.setState({
hasTwoCNChar: true,
});
}
this.fixTwoCNChar();
}
componentWillReceiveProps(nextProps: ButtonProps) {
......@@ -119,6 +113,10 @@ export default class Button extends React.Component<ButtonProps, any> {
}
}
componentDidUpdate() {
this.fixTwoCNChar();
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
......@@ -128,6 +126,23 @@ export default class Button extends React.Component<ButtonProps, any> {
}
}
fixTwoCNChar() {
// Fix for HOC usage like <FormatMessage />
const node = (findDOMNode(this) as HTMLElement);
const buttonText = node.textContent || node.innerText;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
if (!this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: true,
});
}
} else if (this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: false,
});
}
}
handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
// Add click effect
this.setState({ clicked: true });
......
......@@ -54,11 +54,14 @@
.button-variant-danger(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover,
&:focus {
&:hover {
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
}
&:focus {
.button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
}
&:active,
&.active {
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
......@@ -202,6 +205,7 @@
&:active,
&.active {
background: @btn-default-bg;
text-decoration: none;
}
}
......
......@@ -6,6 +6,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
>
<div
class="slick-initialized slick-slider"
dir="ltr"
>
<div
class="slick-list"
......@@ -110,6 +111,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
>
<div
class="slick-initialized slick-slider"
dir="ltr"
>
<div
class="slick-list"
......@@ -214,6 +216,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
>
<div
class="slick-initialized slick-slider"
dir="ltr"
>
<div
class="slick-list"
......@@ -273,6 +276,7 @@ exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
>
<div
class="slick-initialized slick-slider slick-vertical"
dir="ltr"
>
<div
class="slick-list"
......
......@@ -214,3 +214,29 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
</div>
</div>
`;
exports[`Cascader support controlled mode 1`] = `
<span
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
>
Zhejiang / Hangzhou / West Lake
</span>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
readonly=""
type="text"
value=""
/>
<i
class="anticon anticon-cross-circle ant-cascader-picker-clear"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
</span>
`;
......@@ -46,6 +46,16 @@ describe('Cascader', () => {
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
});
it('support controlled mode', () => {
const wrapper = mount(
<Cascader options={options} />
);
wrapper.setProps({
value: ['zhejiang', 'hangzhou', 'xihu'],
});
expect(wrapper.render()).toMatchSnapshot();
});
it('popup correctly with defaultValue', () => {
const wrapper = mount(
<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />
......
......@@ -17,7 +17,7 @@ describe('DatePicker', () => {
focusTest(DatePicker);
beforeEach(() => {
MockDate.set(new Date('2016-11-22'));
MockDate.set(moment('2016-11-22'));
});
afterEach(() => {
......
......@@ -56,6 +56,8 @@ export default class FormItem extends React.Component<FormItemProps, any> {
context: FormItemContext;
state = { helpShow: false };
componentDidMount() {
warning(
this.getControls(this.props.children, true).length <= 1,
......@@ -89,7 +91,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
const child = childrenArray[i] as React.ReactElement<any>;
if (child.type &&
(child.type as any === FormItem || (child.type as any).displayName === 'FormItem')) {
(child.type as any === FormItem || (child.type as any).displayName === 'FormItem')) {
continue;
}
if (!child.props) {
......@@ -126,6 +128,10 @@ export default class FormItem extends React.Component<FormItemProps, any> {
return this.getChildProp(FIELD_DATA_PROP);
}
onHelpAnimEnd = (_key: string, helpShow: boolean) => {
this.setState({ helpShow });
}
renderHelp() {
const prefixCls = this.props.prefixCls;
const help = this.getHelpMsg();
......@@ -135,7 +141,13 @@ export default class FormItem extends React.Component<FormItemProps, any> {
</div>
) : null;
return (
<Animate transitionName="show-help" component="" transitionAppear key="help">
<Animate
transitionName="show-help"
component=""
transitionAppear
key="help"
onEnd={this.onHelpAnimEnd}
>
{children}
</Animate>
);
......@@ -298,7 +310,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
const style = props.style;
const itemClassName = {
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg() || this.state.helpShow,
[`${prefixCls}-item-no-colon`]: !props.colon,
[`${props.className}`]: !!props.className,
};
......
......@@ -107,8 +107,8 @@ ReactDOM.render(
display: flex;
}
.ant-advanced-search-form .ant-form-item-label {
overflow: visible;
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
````
......
......@@ -18,41 +18,43 @@ import { Button, Modal, Form, Input, Radio } from 'antd';
const FormItem = Form.Item;
const CollectionCreateForm = Form.create()(
(props) => {
const { visible, onCancel, onCreate, form } = props;
const { getFieldDecorator } = form;
return (
<Modal
visible={visible}
title="Create a new collection"
okText="Create"
onCancel={onCancel}
onOk={onCreate}
>
<Form layout="vertical">
<FormItem label="Title">
{getFieldDecorator('title', {
rules: [{ required: true, message: 'Please input the title of collection!' }],
})(
<Input />
)}
</FormItem>
<FormItem label="Description">
{getFieldDecorator('description')(<Input type="textarea" />)}
</FormItem>
<FormItem className="collection-create-form_last-form-item">
{getFieldDecorator('modifier', {
initialValue: 'public',
})(
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
)}
</FormItem>
</Form>
</Modal>
);
class extends React.Component {
render() {
const { visible, onCancel, onCreate, form } = this.props;
const { getFieldDecorator } = form;
return (
<Modal
visible={visible}
title="Create a new collection"
okText="Create"
onCancel={onCancel}
onOk={onCreate}
>
<Form layout="vertical">
<FormItem label="Title">
{getFieldDecorator('title', {
rules: [{ required: true, message: 'Please input the title of collection!' }],
})(
<Input />
)}
</FormItem>
<FormItem label="Description">
{getFieldDecorator('description')(<Input type="textarea" />)}
</FormItem>
<FormItem className="collection-create-form_last-form-item">
{getFieldDecorator('modifier', {
initialValue: 'public',
})(
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
)}
</FormItem>
</Form>
</Modal>
);
}
}
);
......@@ -67,7 +69,7 @@ class CollectionsPage extends React.Component {
this.setState({ visible: false });
}
handleCreate = () => {
const form = this.form;
const form = this.formRef.props.form;
form.validateFields((err, values) => {
if (err) {
return;
......@@ -78,15 +80,15 @@ class CollectionsPage extends React.Component {
this.setState({ visible: false });
});
}
saveFormRef = (form) => {
this.form = form;
saveFormRef = (formRef) => {
this.formRef = formRef;
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
wrappedComponentRef={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
......
......@@ -73,7 +73,6 @@ input[type="checkbox"] {
.reset-component;
margin-bottom: @form-item-margin-bottom;
vertical-align: top;
transition: margin .15s steps(1);
// nested FormItem
&-control > &:last-child,
......@@ -93,7 +92,6 @@ input[type="checkbox"] {
&-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - @form-help-margin-top;
transition: none;
}
&-label {
......@@ -375,7 +373,7 @@ form {
margin-bottom: 24px;
}
> div {
> .@{form-prefix-cls}-item-control-wrapper, > .@{form-prefix-cls}-item-label {
display: inline-block;
vertical-align: middle;
}
......
import InputNumber from '..';
import focusTest from '../../../tests/shared/focusTest';
focusTest(InputNumber);
......@@ -39,21 +39,38 @@ export default class Search extends React.Component<SearchProps, any> {
this.input = node;
}
getButtonOrIcon() {
const { enterButton, prefixCls, size } = this.props;
if (!enterButton) {
return <Icon className={`${prefixCls}-icon`} type="search" key="searchIcon" />;
}
const enterButtonAsElement = enterButton as React.ReactElement<any>;
if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
return React.cloneElement(enterButtonAsElement, enterButtonAsElement.type === Button ? {
className: `${prefixCls}-button`,
size,
onClick: this.onSearch,
} : {
onClick: this.onSearch,
});
}
return (
<Button
className={`${prefixCls}-button`}
type="primary"
size={size}
onClick={this.onSearch}
key="enterButton"
>
{enterButton === true ? <Icon type="search" /> : enterButton}
</Button>
);
}
render() {
const { className, prefixCls, inputPrefixCls, size, enterButton, suffix, ...others } = this.props;
const { className, prefixCls, inputPrefixCls, size, suffix, enterButton, ...others } = this.props;
delete (others as any).onSearch;
const buttonOrIcon = enterButton
? (
<Button
className={`${prefixCls}-button`}
type="primary"
size={size}
onClick={this.onSearch}
key="enterButton"
>
{enterButton === true ? <Icon type="search" /> : enterButton}
</Button>
) : <Icon className={`${prefixCls}-icon`} type="search" key="searchIcon" />;
const buttonOrIcon = this.getButtonOrIcon();
const searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon;
const inputClassName = classNames(prefixCls, className, {
[`${prefixCls}-enter-button`]: !!enterButton,
......
import React from 'react';
import { mount } from 'enzyme';
import Search from '../Search';
import Button from '../../button';
import focusTest from '../../../tests/shared/focusTest';
describe('Input.Search', () => {
focusTest(Search);
it('should support custom button', () => {
const wrapper = mount(
<Search enterButton={<button>ok</button>} />
);
expect(wrapper.render()).toMatchSnapshot();
});
it('should support custom Button', () => {
const wrapper = mount(
<Search enterButton={<Button>ok</Button>} />
);
expect(wrapper.render()).toMatchSnapshot();
});
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Input.Search should support custom Button 1`] = `
<span
class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
>
<input
class="ant-input"
type="text"
/>
<span
class="ant-input-suffix"
>
<button
class="ant-btn ant-input-search-button"
type="button"
>
<span>
ok
</span>
</button>
</span>
</span>
`;
exports[`Input.Search should support custom button 1`] = `
<span
class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
>
<input
class="ant-input"
type="text"
/>
<span
class="ant-input-suffix"
>
<button>
ok
</button>
</span>
</span>
`;
......@@ -327,6 +327,9 @@
z-index: 2;
line-height: 0;
color: @input-color;
:not(.anticon) {
line-height: @line-height-base;
}
}
.@{inputClass}-prefix {
......
......@@ -1396,7 +1396,6 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -1415,7 +1414,6 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......
......@@ -66,7 +66,6 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -1554,7 +1553,6 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......
......@@ -2394,7 +2394,6 @@ exports[`Locale Provider should display the text as ar 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="الصفحة السابقة"
>
<a
......@@ -6992,7 +6991,6 @@ exports[`Locale Provider should display the text as bg 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Предишна страница"
>
<a
......@@ -11590,7 +11588,6 @@ exports[`Locale Provider should display the text as ca 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Pàgina prèvia"
>
<a
......@@ -16188,7 +16185,6 @@ exports[`Locale Provider should display the text as cs 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Předchozí strana"
>
<a
......@@ -20786,7 +20782,6 @@ exports[`Locale Provider should display the text as de 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Vorherige Seite"
>
<a
......@@ -25384,7 +25379,6 @@ exports[`Locale Provider should display the text as el 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Προηγούμενη Σελίδα"
>
<a
......@@ -29982,7 +29976,6 @@ exports[`Locale Provider should display the text as en 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -34580,7 +34573,6 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -39178,7 +39170,6 @@ exports[`Locale Provider should display the text as es 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Página anterior"
>
<a
......@@ -43776,7 +43767,6 @@ exports[`Locale Provider should display the text as et 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Eelmine leht"
>
<a
......@@ -48374,7 +48364,6 @@ exports[`Locale Provider should display the text as fa 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="صفحه قبلی"
>
<a
......@@ -52972,7 +52961,6 @@ exports[`Locale Provider should display the text as fi 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Edellinen sivu"
>
<a
......@@ -57570,7 +57558,6 @@ exports[`Locale Provider should display the text as fr 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Page précédente"
>
<a
......@@ -62168,7 +62155,6 @@ exports[`Locale Provider should display the text as fr 2`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Page précédente"
>
<a
......@@ -66766,7 +66752,6 @@ exports[`Locale Provider should display the text as is 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Fyrri síða"
>
<a
......@@ -71364,7 +71349,6 @@ exports[`Locale Provider should display the text as it 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Pagina precedente"
>
<a
......@@ -75962,7 +75946,6 @@ exports[`Locale Provider should display the text as ja 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="前のページ"
>
<a
......@@ -80560,7 +80543,6 @@ exports[`Locale Provider should display the text as ko 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="이전 페이지"
>
<a
......@@ -85158,7 +85140,6 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Rûpelê Pêş"
>
<a
......@@ -89756,7 +89737,6 @@ exports[`Locale Provider should display the text as nb 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Forrige side"
>
<a
......@@ -94354,7 +94334,6 @@ exports[`Locale Provider should display the text as nl 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Vorige pagina"
>
<a
......@@ -98952,7 +98931,6 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Vorige pagina"
>
<a
......@@ -103550,7 +103528,6 @@ exports[`Locale Provider should display the text as pl 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Poprzednia strona"
>
<a
......@@ -108148,7 +108125,6 @@ exports[`Locale Provider should display the text as pt 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Página Anterior"
>
<a
......@@ -112746,7 +112722,6 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Página anterior"
>
<a
......@@ -117344,7 +117319,6 @@ exports[`Locale Provider should display the text as ru 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Назад"
>
<a
......@@ -121942,7 +121916,6 @@ exports[`Locale Provider should display the text as sk 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Predchádzajúca strana"
>
<a
......@@ -126540,7 +126513,6 @@ exports[`Locale Provider should display the text as sr 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Prethodna strana"
>
<a
......@@ -131138,7 +131110,6 @@ exports[`Locale Provider should display the text as sv 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Föreg sida"
>
<a
......@@ -135736,7 +135707,6 @@ exports[`Locale Provider should display the text as th 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="หน้าก่อนหน้า"
>
<a
......@@ -140334,8 +140304,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
title="Önceki Sayfa"
>
<a
class="ant-pagination-item-link"
......@@ -140390,7 +140359,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
aria-disabled="false"
class=" ant-pagination-next"
tabindex="0"
title="Next Page"
title="Sonraki Sayfa"
>
<a
class="ant-pagination-item-link"
......@@ -140417,9 +140386,9 @@ exports[`Locale Provider should display the text as tr 1`] = `
<div
class="ant-select-selection-selected-value"
style="display: block; opacity: 1;"
title="10 / page"
title="10 / sayfa"
>
10 / page
10 / sayfa
</div>
</div>
<span
......@@ -144932,7 +144901,6 @@ exports[`Locale Provider should display the text as uk 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Попередня сторінка"
>
<a
......@@ -149530,7 +149498,6 @@ exports[`Locale Provider should display the text as vi 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Trang Trước"
>
<a
......@@ -154128,7 +154095,6 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="上一页"
>
<a
......@@ -158726,7 +158692,6 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="上一頁"
>
<a
import Pagination from 'rc-pagination/lib/locale/en_US';
import Pagination from 'rc-pagination/lib/locale/tr_TR';
import DatePicker from '../date-picker/locale/tr_TR';
import TimePicker from '../time-picker/locale/tr_TR';
import Calendar from '../calendar/locale/tr_TR';
......
......@@ -18,13 +18,17 @@ class MenuItem extends React.Component<any, any> {
render() {
const { inlineCollapsed } = this.context;
const props = this.props;
return <Tooltip
title={inlineCollapsed && props.level === 1 ? props.children : ''}
placement="right"
overlayClassName={`${props.rootPrefixCls}-inline-collapsed-tooltip`}
>
<Item {...props} ref={this.saveMenuItem} />
</Tooltip>;
const item = <Item {...props} ref={this.saveMenuItem} />;
if (inlineCollapsed && props.level === 1) {
return <Tooltip
title={props.children}
placement="right"
overlayClassName={`${props.rootPrefixCls}-inline-collapsed-tooltip`}
>
{item}
</Tooltip>;
}
return item;
}
}
......
......@@ -63,8 +63,6 @@
&:before {
position: absolute;
background-color: transparent;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
......@@ -286,6 +284,9 @@
&:hover {
color: @menu-highlight-color;
}
&:before {
bottom: -2px;
}
}
}
......
......@@ -25,6 +25,10 @@
font-weight: 500;
font-size: @font-size-lg;
line-height: 22px;
display: block;
// create BFC to avoid
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
overflow: auto;
}
.@{confirm-prefix-cls}-content {
......@@ -38,7 +42,6 @@
font-size: 22px;
margin-right: 16px;
float: left;
min-height: 48px;
}
}
......
......@@ -8,7 +8,6 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -281,7 +280,6 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a>
......@@ -477,7 +475,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -547,7 +544,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -667,7 +663,6 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -899,7 +894,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -975,7 +969,6 @@ exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......
......@@ -66,7 +66,7 @@
&-active {
border-color: @primary-color;
font-weight: 500;
font-weight: @pagination-font-weight-active;
a {
color: @primary-color;
......
......@@ -15,7 +15,7 @@
outline: none;
&-disabled &-star {
cursor: not-allowed;
cursor: default;
&:hover {
transform: scale(1);
}
......
......@@ -40,7 +40,7 @@ Select component to select value from options.
| mode | Set mode of Select (Support after 2.9) | 'default' \| 'multiple' \| 'tags' \| 'combobox' | 'default' |
| notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |
| placeholder | Placeholder of select | string\|ReactNode | - |
| showSearch | Whether show search input in single mode. | boolean | false |
| showArrow | Whether to show the drop-down arrow | boolean | true |
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Slider should show tooltip when hovering slider handler 1`] = `
<div>
<div
class="ant-tooltip ant-tooltip-placement-top "
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
/>
<div
class="ant-tooltip-inner"
>
30
</div>
</div>
</div>
</div>
`;
exports[`Slider should show tooltip when hovering slider handler 2`] = `
<div>
<div
class="ant-tooltip ant-tooltip-placement-top ant-tooltip-hidden"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
/>
<div
class="ant-tooltip-inner"
>
30
</div>
</div>
</div>
</div>
`;
import React from 'react';
import { render, mount } from 'enzyme';
import Slider from '..';
describe('Slider', () => {
it('should show tooltip when hovering slider handler', () => {
const wrapper = mount(
<Slider defaultValue={30} />
);
wrapper.find('.ant-slider-handle').at(0).simulate('mouseEnter');
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
wrapper.find('.ant-slider-handle').at(0).simulate('mouseLeave');
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
});
});
......@@ -71,8 +71,8 @@
// LINK
@link-color : @primary-color;
@link-hover-color : @primary-5;
@link-active-color : @primary-7;
@link-hover-color : color(~`colorPalette("@{link-color}", 5)`);
@link-active-color : color(~`colorPalette("@{link-color}", 7)`);
@link-decoration : none;
@link-hover-decoration : none;
......@@ -423,6 +423,7 @@
// ---
@switch-height: 22px;
@switch-sm-height: 16px;
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;
......@@ -431,6 +432,7 @@
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;
// Breadcrumb
// ---
......
......@@ -107,7 +107,7 @@
&:before,
&:after {
left: 100%;
margin-left: -12.5px;
margin-left: @switch-sm-checked-margin-left;
}
.@{switch-prefix-cls}-inner {
......
......@@ -754,7 +754,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
);
}
column.title = (
<span>
<span key={key}>
{column.title}
{sortButton}
{filterDropdown}
......
......@@ -79,7 +79,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......
......@@ -374,7 +374,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -393,7 +392,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......
......@@ -350,7 +350,6 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -369,7 +368,6 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -542,7 +540,6 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -561,7 +558,6 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -815,7 +811,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -834,7 +829,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -1017,7 +1011,6 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -1036,7 +1029,6 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -1193,7 +1185,6 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -1212,7 +1203,6 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -1301,41 +1291,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-form-item-label"
>
<label
class=""
title="Pagination"
>
Pagination
</label>
</div>
<div
class="ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control"
>
<span
class="ant-form-item-children"
>
<span
checked=""
class="ant-switch ant-switch-checked"
tabindex="0"
>
<span
class="ant-switch-inner"
/>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
......@@ -1632,6 +1587,113 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-form-item-label"
>
<label
class=""
title="Pagination"
>
Pagination
</label>
</div>
<div
class="ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control"
>
<span
class="ant-form-item-children"
>
<div
class="ant-radio-group"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="top"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Top
</span>
</label>
<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="bottom"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Bottom
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="both"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Both
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="none"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
None
</span>
</label>
</div>
</span>
</div>
</div>
</div>
</form>
</div>
<div
......@@ -1643,40 +1705,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-spin-container"
>
<ul
class="ant-pagination ant-table-pagination"
unselectable="unselectable"
>
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
class="ant-pagination-item-link"
/>
</li>
<li
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
tabindex="0"
title="1"
>
<a>
1
</a>
</li>
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
class="ant-pagination-item-link"
/>
</li>
</ul>
<div
class="ant-table ant-table-default ant-table-scroll-position-left"
>
......@@ -2609,7 +2637,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -2628,7 +2655,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -2816,7 +2842,6 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -2835,7 +2860,6 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -3332,7 +3356,6 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -3608,7 +3631,6 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -3627,7 +3649,6 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -3833,7 +3854,6 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -3852,7 +3872,6 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -4294,7 +4313,6 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -4313,7 +4331,6 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -5626,7 +5643,6 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -6957,7 +6973,6 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -8036,7 +8051,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -8351,7 +8365,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -8370,7 +8383,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -8658,7 +8670,6 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -8677,7 +8688,6 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -8949,7 +8959,6 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -8968,7 +8977,6 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -9239,7 +9247,6 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -9258,7 +9265,6 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -9564,7 +9570,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -9583,7 +9588,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -10148,7 +10152,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -10759,7 +10762,6 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -10969,7 +10971,6 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -10988,7 +10989,6 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......@@ -11139,7 +11139,6 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-prev"
tabindex="0"
title="Previous Page"
>
<a
......@@ -11158,7 +11157,6 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
<li
aria-disabled="true"
class="ant-pagination-disabled ant-pagination-next"
tabindex="0"
title="Next Page"
>
<a
......
......@@ -65,7 +65,7 @@ const title = () => 'Here is title';
const showHeader = true;
const footer = () => 'Here is footer';
const scroll = { y: 240 };
const pagination = { position: 'both' };
const pagination = { position: 'bottom' };
class Demo extends React.Component {
state = {
......@@ -74,7 +74,7 @@ class Demo extends React.Component {
pagination,
size: 'default',
expandedRowRender,
title: false,
title: undefined,
showHeader,
footer,
rowSelection: {},
......@@ -115,8 +115,11 @@ class Demo extends React.Component {
this.setState({ scroll: enable ? scroll : undefined });
}
handlePaginationChange = (enable) => {
this.setState({ pagination: enable ? pagination : false });
handlePaginationChange = (e) => {
const { value } = e.target;
this.setState({
pagination: value === 'none' ? false : { position: value },
});
}
render() {
......@@ -131,9 +134,6 @@ class Demo extends React.Component {
<FormItem label="loading">
<Switch checked={state.loading} onChange={this.handleToggle('loading')} />
</FormItem>
<FormItem label="Pagination">
<Switch checked={state.pagination} onChange={this.handlePaginationChange} />
</FormItem>
<FormItem label="Title">
<Switch checked={!!state.title} onChange={this.handleTitleChange} />
</FormItem>
......@@ -159,6 +159,17 @@ class Demo extends React.Component {
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</FormItem>
<FormItem label="Pagination">
<Radio.Group
value={state.pagination ? state.pagination.position : 'none'}
onChange={this.handlePaginationChange}
>
<Radio.Button value="top">Top</Radio.Button>
<Radio.Button value="bottom">Bottom</Radio.Button>
<Radio.Button value="both">Both</Radio.Button>
<Radio.Button value="none">None</Radio.Button>
</Radio.Group>
</FormItem>
</Form>
</div>
<Table {...this.state} columns={columns} dataSource={data} />
......
......@@ -15,7 +15,7 @@ title:
## en-US
To fix some columns and scroll inside other columns, and you must set `scoll.x` meanwhile.
To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.
> Specify the width of columns if header and cell do not align properly.
......
......@@ -91,12 +91,12 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
onMouseEnter: () => {}, // mouse enter row
onXxxx...
};
)}
}}
onHeaderRow={(column) => {
return {
onClick: () => {}, // click header row
};
)}
}}
/>
```
......@@ -120,6 +120,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
| title | Title of this column | string\|ReactNode | - |
......
......@@ -93,12 +93,12 @@ const columns = [{
onMouseEnter: () => {}, // 鼠标移入行
onXxxx...
};
)}
}}
onHeaderRow={(column) => {
return {
onClick: () => {}, // 点击表头行
};
)}
}}
/>
```
......@@ -121,6 +121,7 @@ const columns = [{
| fixed | 列是否固定,可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
| key | React 需要的 key,如果已经设置了唯一的 `dataIndex`,可以忽略这个属性 | string | - |
| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | Function\|boolean | - |
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
| title | 列头显示文字 | string\|ReactNode | - |
......
......@@ -13,6 +13,7 @@ export interface ColumnProps<T> {
key?: React.Key;
dataIndex?: string;
render?: (text: any, record: T, index: number) => React.ReactNode;
align?: 'left' | 'right' | 'center';
filters?: ColumnFilterItem[];
onFilter?: (value: any, record: T) => boolean;
filterMultiple?: boolean;
......
......@@ -11,7 +11,6 @@
.@{table-prefix-cls} {
.reset-component;
position: relative;
border-radius: @border-radius-base @border-radius-base 0 0;
clear: both;
&-body {
......@@ -34,14 +33,6 @@
font-weight: 500;
border-bottom: @border-width-base @border-style-base @border-color-split;
&:first-child {
border-top-left-radius: @border-radius-base;
}
&:last-child {
border-top-right-radius: @border-radius-base;
}
&[colspan] {
text-align: center;
border-bottom: 0;
......@@ -78,6 +69,16 @@
}
}
&-thead > tr:first-child > th {
&:first-child {
border-top-left-radius: @border-radius-base;
}
&:last-child {
border-top-right-radius: @border-radius-base;
}
}
&-tbody > tr > td {
border-bottom: @border-width-base @border-style-base @border-color-split;
transition: all .3s;
......@@ -138,7 +139,8 @@
overflow: hidden;
.@{table-prefix-cls}-bordered & {
&,
table {
table,
.@{table-prefix-cls}-thead > tr:first-child > th {
border-radius: 0;
}
}
......@@ -256,11 +258,11 @@
}
&-up:after {
bottom: -2px;
bottom: 0;
}
&-down:after {
top: 2px;
top: 0;
}
.@{iconfont-css-prefix}-caret-up,
......@@ -488,7 +490,6 @@
overflow: auto;
overflow-x: hidden;
table {
width: auto;
min-width: 100%;
}
}
......
......@@ -4,6 +4,7 @@ import RcTimePicker from 'rc-time-picker/lib/TimePicker';
import classNames from 'classnames';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from './locale/en_US';
import interopDefault from '../_util/interopDefault';
export function generateShowHourMinuteSecond(format: string) {
// Ref: http://momentjs.com/docs/#/parsing/string-format/
......@@ -74,7 +75,7 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {
constructor(props: TimePickerProps) {
super(props);
const value = props.value || props.defaultValue;
if (value && !moment.isMoment(value)) {
if (value && !interopDefault(moment).isMoment(value)) {
throw new Error(
'The value/defaultValue of TimePicker must be a moment object after `antd@2.0`, ' +
'see: https://u.ant.design/time-picker-value',
......
......@@ -25,7 +25,7 @@ Any data whose entries are defined in a hierarchical manner is fit to use this c
| dropdownStyle | To set the style of the dropdown menu | object | - |
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode, halfChecked: string[]}` | boolean | false |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: ReactNode, halfChecked: string[]}` | boolean | false |
| loadData | Load data asynchronously. | function(node) | - |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false |
| placeholder | Placeholder of the select input | string | - |
......
......@@ -25,7 +25,7 @@ title: TreeSelect
| dropdownStyle | 下拉菜单的样式 | object | - |
| filterTreeNode | 是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回bool值) | Function |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 value 类型从 `string` 变为 `{key: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false |
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 value 类型从 `string` 变为 `{value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false |
| loadData | 异步加载数据 | function(node) | - |
| multiple | 支持多选(当设置 treeCheckable 时自动变为true) | boolean | false |
| placeholder | 选择框默认文字 | string | - |
......
......@@ -180,13 +180,14 @@ export default class Upload extends React.Component<UploadProps, UploadState> {
}
beforeUpload = (file: UploadFile, fileList: UploadFile[]) => {
const newFile = fileToObject(file);
if (!this.props.beforeUpload) {
return true;
}
const result = this.props.beforeUpload(file, fileList);
const result = this.props.beforeUpload(newFile, fileList);
if (result === false) {
this.onChange({
file,
file: newFile,
fileList: uniqBy(fileList.concat(this.state.fileList), (item: any) => item.uid),
});
return false;
......
......@@ -23,7 +23,7 @@ You can use this [example](https://github.com/ant-design/antd-init/tree/master/e
### 1) Using `theme` property (recommended way)
Specify the `theme` property in the `package.json` or `.roadhogrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
Specify the `theme` property in the `package.json` or `.webpackrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
- example of directly specifying the custom values as an object:
```js
"theme": {
......
......@@ -24,7 +24,7 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言,并定
### 1) theme 属性(推荐)
配置在 `package.json``.roadhogrc` 下的 `theme` 字段。theme 可以为配置为一个对象或文件路径。
配置在 `package.json``.webpackrc` 下的 `theme` 字段。theme 可以配置为一个对象或文件路径。
```js
"theme": {
......
......@@ -5,25 +5,23 @@ title: Getting Started
Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
---
> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
Before delving into Ant Design React, a good knowledge of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
---
## First Example
## Playground
The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.
The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug.
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
## Standard Development Flow
## First Local Development
During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
Such features, together with packaging the production version, are covered in this work flow.
### 1. Installation
[antd-init](https://github.com/ant-design/antd-init/) is a demo only scaffold tool. If you want to create real world projects, [dva-cli](https://github.com/dvajs/dva-cli) is our recommendation.
[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [dva-cli](https://github.com/dvajs/dva-cli) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation.
```bash
$ npm install antd-init -g
......@@ -31,8 +29,9 @@ $ npm install antd-init -g
Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
> Also, you can use scaffold/demo which is provided by community:
> Also, you can try other scaffolds which is provided below:
>
> - [Ant Design Pro](http://pro.ant.design/)
> - [antd-admin](https://github.com/zuiidea/antd-admin)
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
......
......@@ -5,24 +5,25 @@ title: 快速上手
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
---
> 在开始之前,推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/),并正确安装和配置了 [Node.js](https://nodejs.org/) v6.5 或以上。
> 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识,并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React,将 UI 框架作为你的第一步可能不是最好的主意。
在开始之前,推荐先学习 [React](http://facebook.github.io/react/)[ES2015](http://babeljs.io/docs/learn-es2015/),并正确安装和配置了 [Node.js](https://nodejs.org/) v6.5 或以上。
---
## 第一个例子
## 在线演示
最简单的使用方式参照以下 CodeSandbox 演示,也推荐 Fork 本例来进行 `Bug Report`,注意不要在实际项目中这样使用
最简单的使用方式参照以下 CodeSandbox 演示,也推荐 Fork 本例来进行 `Bug Report`
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
## 标准开发
## 第一个本地实例
实际项目开发中,你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发,下面我们用一个简单的实例来说明。
### 1. 安装脚手架工具
[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具,真实项目建议使用 [dva-cli](https://github.com/dvajs/dva-cli)
[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具,实际业务项目建议使用 [dva-cli](https://github.com/dvajs/dva-cli)[create-react-app](https://github.com/facebookincubator/create-react-app) 进行搭建
```bash
$ npm install antd-init -g
......@@ -30,8 +31,9 @@ $ npm install antd-init -g
更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/)[开发工具文档](http://ant-tool.github.io/)
> 除了官方提供的脚手架,您也可以使用社区提供的脚手架和范例:
> 您也可以使用以下脚手架和范例:
>
> - [Ant Design Pro](http://pro.ant.design/)
> - [antd-admin](https://github.com/zuiidea/antd-admin)
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
......
......@@ -30,7 +30,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
- An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with complete defined types.
- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
- The whole package of development and design resources and tools.
## Environment Support
......
......@@ -30,7 +30,7 @@ title: Ant Design of React
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
- 使用 TypeScript 构建,提供完整的类型定义文件。
- 基于 npm + webpack + babel 的工作流,支持 ES2015 和 TypeScript
- 全链路开发和设计工具体系
## 支持环境
......
......@@ -64,12 +64,14 @@ $ npm install antd babel-plugin-import --save
Edit `.webpackrc` to integrate `babel-plugin-import`.
```diff
{
+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ],
+ ]
}
```
> Notice: dva-cli's build and dev is based on roadhog, view [roadhog#Configuration](https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration) for more `.roadhogrc` Configuration.
> Notice: dva-cli's build and dev is based on roadhog, view [roadhog#Configuration](https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration) for more `.webpackrc` Configuration.
## Define Router
......@@ -149,8 +151,6 @@ dva manages the domain model with `model`, with reducers for synchronous state u
Let's create a model `models/products.js` by typing:
```javascript
import dva from 'dva';
export default {
namespace: 'products',
state: [],
......
......@@ -66,12 +66,14 @@ $ npm install antd babel-plugin-import --save
编辑 `.webpackrc`,使 `babel-plugin-import` 插件生效。
```diff
{
+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ],
+ ]
}
```
> 注:dva-cli 基于 roadhog 实现 build 和 dev,更多 `.roadhogrc` 的配置详见 [roadhog#配置](https://github.com/sorrycc/roadhog#配置)
> 注:dva-cli 基于 roadhog 实现 build 和 dev,更多 `.webpackrc` 的配置详见 [roadhog#配置](https://github.com/sorrycc/roadhog#配置)
## 定义路由
......@@ -151,8 +153,6 @@ dva 通过 model 的概念把一个领域的模型管理起来,包含同步更
新建 model `models/products.js`
```javascript
import dva from 'dva';
export default {
namespace: 'products',
state: [],
......
......@@ -25,6 +25,7 @@ Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/rea
Markdown renderer | [react-markdown](http://rexxars.github.io/react-markdown/)
Infinite Scroll | [react-virtualized](https://github.com/bvaughn/react-virtualized)
Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap)
Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify)
Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
<style>
......
......@@ -25,6 +25,7 @@ title: 社区精选组件
Markdown 渲染 | [react-markdown](http://rexxars.github.io/react-markdown/)
无限滚动 | [react-virtualized](https://github.com/bvaughn/react-virtualized)
地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap)
右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify)
Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
<style>
......
......@@ -208,3 +208,4 @@ There are a lot of great boilerplates like create-react-app in the React communi
- [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate)
- [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit)
- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design)
- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd)
......@@ -208,3 +208,4 @@ React 生态圈中还有很多优秀的脚手架,使用它们并引入 antd
- [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)
- [cra-ts-antd](https://github.com/comerc/cra-ts-antd)
- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design)
- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd)
{
"name": "antd",
"version": "3.3.0",
"version": "3.3.2",
"title": "Ant Design",
"description": "An enterprise-class UI design language and React-based implementation",
"homepage": "http://ant.design/",
......@@ -62,7 +62,7 @@
"rc-input-number": "~4.0.0",
"rc-menu": "~6.2.0",
"rc-notification": "~3.0.0",
"rc-pagination": "~1.15.0",
"rc-pagination": "~1.16.0",
"rc-progress": "~2.2.2",
"rc-rate": "~2.4.0",
"rc-select": "~7.7.0",
......@@ -78,15 +78,15 @@
"rc-upload": "~2.4.0",
"rc-util": "^4.0.4",
"react-lazy-load": "^3.0.12",
"react-slick": "~0.20.0",
"react-slick": "~0.21.0",
"shallowequal": "^1.0.1",
"warning": "~3.0.0"
},
"devDependencies": {
"@babel/types": "7.0.0-beta.40",
"@types/react": "^16.0.0",
"@types/react-dom": "^16.0.0",
"ansi-styles": "^3.2.0",
"ant-design-palettes": "^1.0.0",
"antd-tools": "^5.1.2",
"babel-cli": "^6.18.0",
"babel-eslint": "^8.1.1",
......@@ -101,7 +101,6 @@
"bisheng-plugin-description": "^0.1.1",
"bisheng-plugin-react": "^0.6.0",
"bisheng-plugin-toc": "^0.4.0",
"color-standalone": "^0.11.6",
"commander": "^2.11.0",
"cross-env": "^5.0.3",
"css-split-webpack-plugin": "^0.2.3",
......
import React from 'react';
import Color from 'color-standalone';
import { generate } from 'ant-design-palettes';
import ColorBlock from './ColorBlock';
const hueStep = 2; // 色相阶梯
const saturationStep = 16; // 饱和度阶梯,浅色部分
const saturationStep2 = 5; // 饱和度阶梯,深色部分
const brightnessStep1 = 5; // 亮度阶梯,浅色部分
const brightnessStep2 = 15; // 亮度阶梯,深色部分
const lightColorCount = 5; // 浅色数量,主色上
const darkColorCount = 4; // 深色数量,主色下
function getHue(hsv, i, light) {
let hue;
// 根据色相不同,色相转向不同
if (hsv.h >= 60 && hsv.h <= 240) {
hue = light ? hsv.h - (hueStep * i) : hsv.h + (hueStep * i);
} else {
hue = light ? hsv.h + (hueStep * i) : hsv.h - (hueStep * i);
}
if (hue < 0) {
hue += 360;
} else if (hue >= 360) {
hue -= 360;
}
return hue;
}
function getSaturation(hsv, i, light) {
let saturation;
if (light) {
saturation = hsv.s - (saturationStep * i);
} else if (i === darkColorCount) {
saturation = hsv.s + (saturationStep);
} else {
saturation = hsv.s + (saturationStep2 * i);
}
// 边界值修正
if (saturation > 100) {
saturation = 100;
}
// 第一格的 s 限制在 6-10 之间
if (light && i === lightColorCount && saturation > 10) {
saturation = 10;
}
if (saturation < 6) {
saturation = 6;
}
return saturation;
}
function getValue(hsv, i, light) {
if (light) {
return hsv.v + (brightnessStep1 * i);
}
return hsv.v - (brightnessStep2 * i);
}
export default function ColorPatterns({ color }) {
const patterns = [];
const pColor = Color(color);
let index = 0;
for (let i = lightColorCount; i > 0; i -= 1) {
const hsv = pColor.clone().hsv();
const colorString = Color({
h: getHue(hsv, i, true),
s: getSaturation(hsv, i, true),
v: getValue(hsv, i, true),
}).hexString();
index += 1;
patterns.push(
<ColorBlock color={colorString} index={index} key={index} />
);
}
index += 1;
patterns.push(
<ColorBlock color={pColor.hexString()} index={index} key={index} />
);
for (let i = 1; i <= darkColorCount; i += 1) {
const hsv = pColor.clone().hsv();
const colorString = Color({
h: getHue(hsv, i),
s: getSaturation(hsv, i),
v: getValue(hsv, i),
}).hexString();
index += 1;
patterns.push(
<ColorBlock color={colorString} index={index} key={index} />
);
}
return patterns;
return generate(color).map((colorString, i) => (
<ColorBlock color={colorString} index={i} key={colorString} />
));
}
import glob from 'glob';
import { render } from 'enzyme';
import MockDate from 'mockdate';
import moment from 'moment';
export default function demoTest(component, options = {}) {
const files = glob.sync(`./components/${component}/demo/*.md`);
......@@ -11,7 +12,7 @@ export default function demoTest(component, options = {}) {
testMethod = test.skip;
}
testMethod(`renders ${file} correctly`, () => {
MockDate.set(new Date('2016-11-22').getTime() + (new Date().getTimezoneOffset() * 60 * 1000));
MockDate.set(moment('2016-11-22'));
const demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
const wrapper = render(demo);
expect(wrapper).toMatchSnapshot();
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册