diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 5fb7ab4a8d..c32fcc1e51 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -20,10 +20,11 @@ timeline: true `2019-01-19` - 🌟 Update the "Use in creact-react-app" document to be compatible with upgraded creact-react-app and react-scripts-rewired. [#14385](https://github.com/ant-design/ant-design/pull/14385) -- 💄 Fix using autoprefixer 9.4.5 in postcss (webpack) will throw an error `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed`. [#14312](https://github.com/ant-design/ant-design/pull/14312) -- 💄 Fix InputNumber style not correct in MenuItem. [#14373](https://github.com/ant-design/ant-design/pull/14373) -- 💄 Fix Input.Search with enterButton style issue. [#14397](https://github.com/ant-design/ant-design/pull/14397) -- 💄 Fix Slider focus style. [9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607) +- 🐞 Fix using autoprefixer 9.4.5 in postcss (webpack) will throw an error `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed`. [#14312](https://github.com/ant-design/ant-design/pull/14312) +- 🐞 Fix InputNumber style not correct in MenuItem. [#14373](https://github.com/ant-design/ant-design/pull/14373) +- 🐞 Fix Input.Search with enterButton style issue. [#14397](https://github.com/ant-design/ant-design/pull/14397) +- 🐞 Fix Input.TextArea autosize not correct when input number. [#14375](https://github.com/ant-design/ant-design/pull/14375) +- 🐞 Fix Slider focus style. [9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607) - 🐞 Fix the problem that the `prefixCls` property is passed to the `Empty` . [#14404](https://github.com/ant-design/ant-design/pull/14404) - 🐞 Fix the problem that Radio `onChange` will be override by RadioGroup `onChange`.[#14364](https://github.com/ant-design/ant-design/pull/14364) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 45c34d52cf..5cd09870f5 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -19,10 +19,11 @@ timeline: true `2019-01-19` - 🌟 更新《在 creact-react-app 中使用》文档以兼容升级后的 creact-react-app 和 react-scripts-rewired。[#14385](https://github.com/ant-design/ant-design/pull/14385) -- 💄 修复在 postcss（webpack）中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312) -- 💄 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373) -- 💄 修复 Input.Search 使用 `enterButton` 时的样式问题。[#14397](https://github.com/ant-design/ant-design/pull/14397) -- 💄 修复 Slider focus 时的样式错误。[9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607) +- 🐞 修复在 postcss（webpack）中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312) +- 🐞 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373) +- 🐞 修复 Input.Search 使用 `enterButton` 时的样式问题。[#14397](https://github.com/ant-design/ant-design/pull/14397) +- 🐞 修复 Input.TextArea 中输入数字时 `autosize` 高度无法自适应的问题。[#14375](https://github.com/ant-design/ant-design/pull/14375) +- 🐞 修复 Slider focus 时的样式错误。[9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607) - 🐞 修复 `prefixCls` 属性被传递到了 Empty 元素上的问题。[#14404](https://github.com/ant-design/ant-design/pull/14404) - 🐞 修复 RadioGroup `onChange` 将覆盖 Radio `onChange` 的问题。[#14364](https://github.com/ant-design/ant-design/pull/14364) diff --git a/README-zh_CN.md b/README-zh_CN.md index 9e40e5de57..e8d118ad5f 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -52,6 +52,10 @@ npm install antd --save ``` +```bash +yarn add antd +``` + ## 🔨 示例 ```jsx diff --git a/README.md b/README.md index e302548d07..accce8a610 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,10 @@ English | [简体中文](./README-zh_CN.md) npm install antd --save ``` +```bash +yarn add antd +``` + ## 🔨 Usage ```jsx diff --git a/components/_util/isFlexSupported.tsx b/components/_util/isFlexSupported.tsx deleted file mode 100644 index dd6a5ae7ed..0000000000 --- a/components/_util/isFlexSupported.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export default function isFlexSupported() { - if (typeof window !== 'undefined' && window.document && window.document.documentElement) { - const { documentElement } = window.document; - return ( - 'flex' in documentElement.style || - 'webkitFlex' in documentElement.style || - 'Flex' in documentElement.style || - 'msFlex' in documentElement.style - ); - } - return false; -} diff --git a/components/_util/styleChecker.tsx b/components/_util/styleChecker.tsx new file mode 100644 index 0000000000..8c3de765f9 --- /dev/null +++ b/components/_util/styleChecker.tsx @@ -0,0 +1,13 @@ +function isStyleSupport(styleName: string | Array): boolean { + if (typeof window !== 'undefined' && window.document && window.document.documentElement) { + const styleNameList = Array.isArray(styleName) ? styleName : [styleName]; + const { documentElement } = window.document; + + return styleNameList.some(name => name in documentElement.style); + } + return false; +} + +export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']); + +export default isStyleSupport; diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index 617f07f0e8..ae50661f41 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -169,7 +169,10 @@ export default class ScrollNumber extends Component if (style && style.borderColor) { - newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`; + newProps.style = { + ...style, + boxShadow: `0 0 0 1px ${style.borderColor} inset`, + }; } if (displayComponent) { return React.cloneElement(displayComponent, { diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 5cc142ca9a..93cdea2029 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -92,7 +92,7 @@ export type GetFieldDecoratorOptions = { // function create export type WrappedFormUtils = { /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */ - getFieldsValue(fieldNames?: Array): Object; + getFieldsValue(fieldNames?: Array): { [field: string]: any }; /** 获取一个输入控件的值*/ getFieldValue(fieldName: string): any; /** 设置一组输入控件的值*/ diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 37eb89487f..7c54d8f037 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -11,7 +11,7 @@ title: ## en-US -Demostration for validataion configuration for form controls which are not show in the above demos. +Demonstration of validation configuration for form controls which are not shown in the demos above. ````jsx import { diff --git a/components/grid/col.tsx b/components/grid/col.tsx index 8b7261e9be..ececcf2a96 100644 --- a/components/grid/col.tsx +++ b/components/grid/col.tsx @@ -6,26 +6,29 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]); +// https://github.com/ant-design/ant-design/issues/14324 +type ColSpanType = number | string; + export interface ColSize { - span?: number; - order?: number; - offset?: number; - push?: number; - pull?: number; + span?: ColSpanType; + order?: ColSpanType; + offset?: ColSpanType; + push?: ColSpanType; + pull?: ColSpanType; } export interface ColProps extends React.HTMLAttributes { - span?: number; - order?: number; - offset?: number; - push?: number; - pull?: number; - xs?: number | ColSize; - sm?: number | ColSize; - md?: number | ColSize; - lg?: number | ColSize; - xl?: number | ColSize; - xxl?: number | ColSize; + span?: ColSpanType; + order?: ColSpanType; + offset?: ColSpanType; + push?: ColSpanType; + pull?: ColSpanType; + xs?: ColSpanType | ColSize; + sm?: ColSpanType | ColSize; + md?: ColSpanType | ColSize; + lg?: ColSpanType | ColSize; + xl?: ColSpanType | ColSize; + xxl?: ColSpanType | ColSize; prefixCls?: string; } diff --git a/components/input/Input.tsx b/components/input/Input.tsx index ba32e9412e..969a0780b5 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -185,38 +185,36 @@ class Input extends React.Component { } renderLabeledInput(prefixCls: string, children: React.ReactElement) { - const props = this.props; + const { addonBefore, addonAfter, style, size, className } = this.props; // Not wrap when there is not addons - if (!props.addonBefore && !props.addonAfter) { + if (!addonBefore && !addonAfter) { return children; } const wrapperClassName = `${prefixCls}-group`; const addonClassName = `${wrapperClassName}-addon`; - const addonBefore = props.addonBefore ? ( - {props.addonBefore} - ) : null; - const addonAfter = props.addonAfter ? ( - {props.addonAfter} + const addonBeforeNode = addonBefore ? ( + {addonBefore} ) : null; + const addonAfterNode = addonAfter ? {addonAfter} : null; - const className = classNames(`${prefixCls}-wrapper`, { + const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, { [wrapperClassName]: addonBefore || addonAfter, }); - const groupClassName = classNames(`${prefixCls}-group-wrapper`, { - [`${prefixCls}-group-wrapper-sm`]: props.size === 'small', - [`${prefixCls}-group-wrapper-lg`]: props.size === 'large', + const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, { + [`${prefixCls}-group-wrapper-sm`]: size === 'small', + [`${prefixCls}-group-wrapper-lg`]: size === 'large', }); // Need another wrapper for changing display:table to display:inline-block // and put style prop in wrapper return ( - - - {addonBefore} + + + {addonBeforeNode} {React.cloneElement(children, { style: null })} - {addonAfter} + {addonAfterNode} ); @@ -251,7 +249,7 @@ class Input extends React.Component { } renderInput(prefixCls: string) { - const { className } = this.props; + const { className, addonBefore, addonAfter } = this.props; const { value } = this.state; // Fix https://fb.me/react-unknown-prop const otherProps = omit(this.props, [ @@ -273,7 +271,9 @@ class Input extends React.Component { {...otherProps} value={fixControlledValue(value)} onChange={this.handleChange} - className={classNames(this.getInputClassName(prefixCls), className)} + className={classNames(this.getInputClassName(prefixCls), { + [className!]: className && !addonBefore && !addonAfter, + })} onKeyDown={this.handleKeyDown} ref={this.saveInput} />, diff --git a/components/input/Search.tsx b/components/input/Search.tsx index 92b8bd2167..743c055615 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -41,76 +41,100 @@ export default class Search extends React.Component { this.input = node; }; - getButtonOrIcon(prefixCls: string) { + renderSuffix = (prefixCls: string) => { + const { suffix, enterButton } = this.props; + if (enterButton) return suffix; + + const node = ( + + ); + + if (suffix) { + let cloneSuffix = suffix; + if (React.isValidElement(cloneSuffix) && !cloneSuffix.key) { + cloneSuffix = React.cloneElement(cloneSuffix, { + key: 'originSuffix', + }); + } + return [cloneSuffix, node]; + } + + return node; + }; + + renderAddonAfter = (prefixCls: string) => { const { enterButton, size, disabled } = this.props; + if (!enterButton) return null; + const btnClassName = `${prefixCls}-button`; + const enterButtonAsElement = enterButton as React.ReactElement; - let node; - if (!enterButton) { - node = ; - } else if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') { - node = React.cloneElement( - enterButtonAsElement, - enterButtonAsElement.type === Button + if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') { + return React.cloneElement(enterButtonAsElement, { + onClick: this.onSearch, + ...(enterButtonAsElement.type === Button ? { - className: `${prefixCls}-button`, + className: btnClassName, size, } - : {}, - ); - } else { - node = ( - - ); + : {}), + }); } - return React.cloneElement(node, { - onClick: this.onSearch, - }); - } + + return ( + + ); + }; renderSearch = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, inputPrefixCls: customizeInputPrefixCls, - className, size, - suffix, enterButton, - ...others + className, + ...restProps } = this.props; - delete (others as any).onSearch; + + delete (restProps as any).onSearch; + const prefixCls = getPrefixCls('input-search', customizePrefixCls); const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); - const buttonOrIcon = this.getButtonOrIcon(prefixCls); - let searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon; - if (Array.isArray(searchSuffix)) { - searchSuffix = (searchSuffix as React.ReactElement[]).map((item, index) => { - if (!React.isValidElement(item) || item.key) { - return item; - } - return React.cloneElement(item, { key: index }); + + let inputClassName; + + if (enterButton) { + inputClassName = classNames(prefixCls, className, { + [`${prefixCls}-enter-button`]: !!enterButton, + [`${prefixCls}-${size}`]: !!size, }); + } else { + inputClassName = classNames(prefixCls, className); } - const inputClassName = classNames(prefixCls, className, { - [`${prefixCls}-enter-button`]: !!enterButton, - [`${prefixCls}-${size}`]: !!size, - }); + return ( ); }; diff --git a/components/input/__tests__/__snapshots__/Search.test.js.snap b/components/input/__tests__/__snapshots__/Search.test.js.snap index c5e7dc86a3..fa59d332b9 100644 --- a/components/input/__tests__/__snapshots__/Search.test.js.snap +++ b/components/input/__tests__/__snapshots__/Search.test.js.snap @@ -2,45 +2,53 @@ exports[`Input.Search should support custom Button 1`] = ` - - + + `; exports[`Input.Search should support custom button 1`] = ` - - + + `; diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index b61e93c5d4..8b9292b0a9 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -1029,64 +1029,72 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `

- - + + + +

- - + + diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap index e0003219d8..dd83ff4501 100644 --- a/components/input/__tests__/__snapshots__/index.test.js.snap +++ b/components/input/__tests__/__snapshots__/index.test.js.snap @@ -375,6 +375,7 @@ exports[`Input.Search should support suffix 1`] = ` > .@{ant-prefix}-input-suffix { - right: @control-padding-horizontal; - } + .@{ant-prefix}-input-group-addon { + border: 0; + padding: 0; - > .@{ant-prefix}-input-suffix > .@{search-prefix}-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - > .@{iconfont-css-prefix}-search { - font-size: @font-size-lg; - } - } - - &.@{search-prefix}-enter-button { - display: table; - - > * { - display: table-cell; - } - - > .@{ant-prefix}-input { - .input; + .@{search-prefix}-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; width: 100%; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0; - } - - > .@{ant-prefix}-input-suffix { - position: static; - transform: none; } } } diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index b422182e2f..1046859b57 100644 --- a/components/menu/MenuItem.tsx +++ b/components/menu/MenuItem.tsx @@ -11,6 +11,7 @@ interface MenuItemProps { title?: React.ReactNode; children?: React.ReactNode; className?: string; + style?: React.CSSProperties; onClick?: (param: ClickParam) => void; onMouseEnter?: (event: string, e: MouseEvent) => void; onMouseLeave?: (event: string, e: MouseEvent) => void; diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx index b168c07aa9..264396358d 100644 --- a/components/menu/SubMenu.tsx +++ b/components/menu/SubMenu.tsx @@ -3,7 +3,15 @@ import * as PropTypes from 'prop-types'; import { SubMenu as RcSubMenu } from 'rc-menu'; import classNames from 'classnames'; -class SubMenu extends React.Component { +export interface SubMenuProps { + rootPrefixCls?: string; + className?: string; + disabled?: boolean; + title?: React.ReactNode; + onTitleClick?: (key: string, domEvent?: Event) => void; +} + +class SubMenu extends React.Component { static contextTypes = { antdMenuTheme: PropTypes.string, }; diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js index 8328285aff..05ad2acd80 100644 --- a/components/radio/__tests__/group.test.js +++ b/components/radio/__tests__/group.test.js @@ -2,6 +2,7 @@ import React from 'react'; import { mount, render } from 'enzyme'; import Radio from '../radio'; import RadioGroup from '../group'; +import RadioButton from '../radioButton'; describe('Radio', () => { function createRadioGroup(props) { @@ -99,6 +100,29 @@ describe('Radio', () => { expect(onChange.mock.calls.length).toBe(2); }); + it('Trigger onChange when both of radioButton and radioGroup exists', () => { + const onChange = jest.fn(); + + const wrapper = mount( + + A + B + C + , + ); + const radios = wrapper.find('input'); + + // uncontrolled component + wrapper.setState({ value: 'B' }); + radios.at(0).simulate('change'); + expect(onChange.mock.calls.length).toBe(1); + + // controlled component + wrapper.setProps({ value: 'A' }); + radios.at(1).simulate('change'); + expect(onChange.mock.calls.length).toBe(2); + }); + it("won't fire change events when value not changes", () => { const onChange = jest.fn(); diff --git a/components/radio/radioButton.tsx b/components/radio/radioButton.tsx index b131e47057..7667260388 100644 --- a/components/radio/radioButton.tsx +++ b/components/radio/radioButton.tsx @@ -18,7 +18,6 @@ export default class RadioButton extends React.Component const { prefixCls: customizePrefixCls, ...radioProps }: RadioButtonProps = this.props; const prefixCls = getPrefixCls('radio-button', customizePrefixCls); if (this.context.radioGroup) { - radioProps.onChange = this.context.radioGroup.onChange; radioProps.checked = this.props.value === this.context.radioGroup.value; radioProps.disabled = this.props.disabled || this.context.radioGroup.disabled; } diff --git a/components/spin/style/index.less b/components/spin/style/index.less index d4533ed89e..6b81ebfcae 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -90,6 +90,7 @@ height: 100%; width: 100%; z-index: 10; + display: ~'none \9\0'; } } diff --git a/components/table/style/index.less b/components/table/style/index.less index 1ed0b0389d..2f43169569 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -563,6 +563,11 @@ table { width: auto; min-width: 100%; + + // https://github.com/ant-design/ant-design/issues/14545 + .@{table-prefix-cls}-fixed-columns-in-body { + visibility: hidden; + } } } diff --git a/components/table/style/size.less b/components/table/style/size.less index 7c957bbda1..cec976be2b 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -74,7 +74,7 @@ padding: @table-padding-vertical-sm @table-padding-horizontal-sm; } > .@{table-prefix-cls}-thead > tr > th { - background-color: @component-background; + background-color: transparent; border-bottom: @border-width-base @border-style-base @border-color-split; } > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort { diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 69c4954bc0..499dab8bd9 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -7,7 +7,7 @@ import classNames from 'classnames'; import Icon from '../icon'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; -import isFlexSupported from '../_util/isFlexSupported'; +import { isFlexSupported } from '../_util/styleChecker'; export type TabsType = 'line' | 'card' | 'editable-card'; export type TabsPosition = 'top' | 'right' | 'bottom' | 'left'; @@ -83,7 +83,7 @@ export default class Tabs extends React.Component { componentDidMount() { const NO_FLEX = ' no-flex'; const tabNode = ReactDOM.findDOMNode(this) as Element; - if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) { + if (tabNode && !isFlexSupported && tabNode.className.indexOf(NO_FLEX) === -1) { tabNode.className += NO_FLEX; } } diff --git a/components/tree-select/interface.tsx b/components/tree-select/interface.tsx index 7b54a849e2..c1e5840780 100644 --- a/components/tree-select/interface.tsx +++ b/components/tree-select/interface.tsx @@ -34,7 +34,6 @@ export interface TreeSelectProps extends AbstractSelectProps { defaultValue?: string | number | Array; dropdownStyle?: React.CSSProperties; filterTreeNode?: (inputValue: string, treeNode: any) => boolean | boolean; - getPopupContainer?: (triggerNode?: Element) => HTMLElement; labelInValue?: boolean; loadData?: (node: any) => void; maxTagCount?: number; diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index f69247cfd3..0deaf4a9b5 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -5,156 +5,117 @@ 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/)(> 8.0.0) 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 base of [React](https://reactjs.org) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed. --- -## Playground +## First Example -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. +There is the simplest example to show usage of Ant Design React. - + -## First Local Development +### 1. Create one codesandbox -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. +Visit http://u.ant.design/codesandbox-repro to create a codesandbox, don't forget to press save button. -### 1. Installation +### 2. Using antd component -[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [create-umi](https://github.com/umijs/create-umi) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation. +Replace the content of `index.js` with the following code. +As you can see, there is no difference between antd's components and usual React components. -```bash -$ npm install antd-init -g +```jsx +import React from "react"; +import ReactDOM from "react-dom"; +import { DatePicker, message } from "antd"; +import "antd/dist/antd.css"; +import "./index.css"; + +class App extends React.Component { + state = { + date: null, + }; + + handleChange = date => { + message.info(`Selected Date: ${date.format("YYYY-MM-DD")}`); + this.setState({ date }); + }; + + render() { + const { date } = this.state; + return ( +
+ +
+ Selected Date: {date ? date.format("YYYY-MM-DD") : "None"} +
+
+ ); + } +} + +ReactDOM.render(, document.getElementById("root")); ``` -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. +### 3. Explore in more components -Also, you can try other scaffolds provided below: +You can look up compnents in side menu, find one like [Alert](/components/alert). Plenty of examples are provided in component page, +API documentation too. + +Click the corner icon at first example, there are source codes to use out of box. Now you are try import `Alert` in previous codesandbox: + +```diff +- import { DatePicker, message } from 'antd'; ++ import { DatePicker, message, Alert } from 'antd'; +``` + +Add jsx part in `render` function. + +```diff + this.handleChange(value)} /> +
+- Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'} ++ +
+``` + +Then you can see the result at preview section. + +codesandbox screenshot + +OK! Now you know how to use antd components in a clear way, welcome to explore more usages in this codesandbox. +We also strongly recommend to use codesandbox to provide a reproducible demo while reporting a bug. + +### 4. Next Step + +In real world you gonna need a whole package of `compile/build/deploy/lint/debug` development workflow +which you can read ariticles afterwards or try other scaffolds provided below: - [Ant Design Pro](http://pro.ant.design/) - [antd-admin](https://github.com/zuiidea/antd-admin) - [d2-admin](https://github.com/d2-projects/d2-admin) - more scaffolds at [Scaffold Market](http://scaffold.ant.design/) -### 2. Create a New Project - -A new project can be created using CLI tools. - -```bash -$ mkdir antd-demo && cd antd-demo -$ antd-init -``` - -`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself. - -### 3. Use antd's Components - -By default, besides the scaffolding needed to start the development, a fully working Todo application is created. -You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`. - -Replace the content of `index.js` with the following code. -As you can see, there is no difference between antd's components and usual React components. - -```jsx -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocaleProvider, DatePicker, message } from 'antd'; -// The default locale is en-US, but we can change it to other language -import frFR from 'antd/lib/locale-provider/fr_FR'; -import moment from 'moment'; -import 'moment/locale/fr'; - -moment.locale('fr'); - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - date: '', - }; - } - handleChange(date) { - message.info('Selected Date: ' + (date ? date.toString() : '')); - this.setState({ date }); - } - render() { - return ( - -
- this.handleChange(value)} /> -
Date: {this.state.date && this.state.date.toString()}
-
- - ); - } -} - -ReactDOM.render(, document.getElementById('root')); -``` - -> All the components in antd are listed in the sidebar. - -### 4. Development & Debugging - -Run your project and visit http://127.0.0.1:8000 - -```bash -$ npm start -``` - -### 5. Building & Deployment - -```bash -$ npm run build -``` - -Entry files will be built and generated in `dist` directory, where we can deploy it to different environments. - -> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world. -> But you can use those tools in your project, depending on your context and needs. - ## Compatibility Ant Design React supports all the modern browsers and IE9+. -You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers. +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --------- | --------- | --------- | --------- | --------- | --------- | +| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions -If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims. +We offset very limit support for IE9/10, some styles and animation would be mininal under them, also we are using Flex layout in few components. -> Please avoid using both the babel and shim methods at the same time. +> Note, different with Ant Design, Ant Design Pro support to IE11+. -> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround. +Polyfills are needed for IE browsers, we recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/). -```html - - - - - - - - - - - - - - - - - -``` +Ant Design 3.0 support both React 15 and 16 now though, we strongly suggest React 16 for better performance and few bugs. #### IE8 note > We don't support IE8 after `antd@2.0`. -You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `babel@6.x` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8). - -> More about how to use React in IE8: https://github.com/xcatliu/react-ie8 - ## Customized Work Flow If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code. @@ -165,7 +126,6 @@ If you are trying [parcel](https://parceljs.org), here is [a demo repository](ht There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute. - ## Import on Demand If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance. @@ -199,8 +159,3 @@ And this plugin can load styles too, read [usage](https://github.com/ant-design/ - [Customize Theme](/docs/react/customize-theme) - [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont) - -## Tips - -- You can use any `npm` modules. -- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow. diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index d024afd146..944ff2266e 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -5,55 +5,22 @@ title: 快速上手 Ant Design React 致力于提供给程序员**愉悦**的开发体验。 -> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。 +> 在开始之前，推荐先学习 [React](http://reactjs.org) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。 > 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。 --- -## 在线演示 +## 第一个例子 -最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。 +这是一个最简单的 Ant Design 组件的在线演示。 - + -## 第一个本地实例 +### 1. 创建一个 codesandbox -实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。 -我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。 +访问 http://u.ant.design/codesandbox-repro 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。 -### 1. 安装脚手架工具 - -[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 [create-umi](https://github.com/umijs/create-umi) 或 [create-react-app](https://github.com/facebookincubator/create-react-app) 进行搭建。 - -```bash -$ 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) -- [d2-admin](https://github.com/d2-projects/d2-admin) -- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/) - -### 2. 创建一个项目 - -使用命令行进行初始化。 - -```bash -$ mkdir antd-demo && cd antd-demo -$ antd-init -``` - -antd-init 会自动安装 npm 依赖，若有问题则可自行安装。 - -若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。 - -### 3. 使用组件 - -脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。 +### 2. 使用组件 直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。 @@ -65,26 +32,29 @@ import { LocaleProvider, DatePicker, message } from 'antd'; import zhCN from 'antd/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; +import "antd/dist/antd.css"; +import "./index.css"; moment.locale('zh-cn'); class App extends React.Component { - constructor(props) { - super(props); - this.state = { - date: '', - }; - } - handleChange(date) { - message.info('您选择的日期是: ' + (date ? date.toString() : '')); + state = { + date: null, + }; + + handleChange = (date) => { + message.info(`您选择的日期是: ${date.format('YYYY-MM-DD')}`); this.setState({ date }); } render() { + const { date } = this.state; return (
- this.handleChange(value)} /> -
当前日期：{this.state.date && this.state.date.toString()}
+ +
+ 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'} +
); @@ -94,70 +64,64 @@ class App extends React.Component { ReactDOM.render(, document.getElementById('root')); ``` -> 你可以在左侧菜单选用更多组件。 +### 3. 探索更多组件用法 -### 4. 开发调试 +你可以在左侧菜单查看组件列表，比如 [Alert](/components/alert-cn) 组件，组件文档中提供了各类演示，最下方有组件 API 文档可以查阅。 +在代码演示部分找到第一个例子，点击右下角的图标展开代码。 -一键启动调试，访问 http://127.0.0.1:8000 查看效果。 +然后依照演示代码的写法，在之前的 codesandbox 里修改 `index.js`，首先在 `import` 内引入 Alert 组件： -```bash -$ npm start +```diff +- import { LocaleProvider, DatePicker, message } from 'antd'; ++ import { LocaleProvider, DatePicker, message, Alert } from 'antd'; ``` -### 5. 构建和部署 +然后在 `render` 内添加相应的 jsx 代码： -```bash -$ npm run build +```diff + this.handleChange(value)} /> +
+- 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'} ++ +
``` -入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。 +在右侧预览区就可以看到如图的效果。 -> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。 +codesandbox screenshot + +好的，现在你已经会使用基本的 antd 组件了，你可以在这个例子中继续探索其他组件的用法。 +如果你遇到组件的 bug，也推荐建一个可重现的 codesandbox 来报告 bug。 + +### 4. 下一步 + +实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例： + +- [Ant Design Pro](http://pro.ant.design/) +- [antd-admin](https://github.com/zuiidea/antd-admin) +- [d2-admin](https://github.com/d2-projects/d2-admin) +- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/) ## 兼容性 Ant Design React 支持所有的现代浏览器和 IE9+。 -对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。 +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --------- | --------- | --------- | --------- | --------- | --------- | +| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions -如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。 +我们对 IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题。 -> 避免同时使用 babel 和 shim 两种兼容方法，以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题 +> 注意，不同于 Ant Design，Ant Design Pro 是只支持到 IE11+ 的。 -> 如果在 IE 浏览器中遇到 `startsWith` 的[问题](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445)，请引入 [es6-shim](https://github.com/paulmillr/es6-shim) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。 +对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。 -```html - - - - - - - - - - - - - - - - - -``` +Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。 #### IE8 note > `antd@2.0` 之后将不再支持 IE8。 -IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。 - -另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。 - -> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8 - ## 自行构建 如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。 @@ -199,8 +163,3 @@ import { Button } from 'antd'; - [改变主题](/docs/react/customize-theme) - [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont) - -## 小贴士 - -- 你可以享用 `npm` 生态圈里的所有模块。 -- 我们使用了 `babel`，试试用 [ES2015+](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。 diff --git a/docs/spec/download.en-US.md b/docs/spec/download.en-US.md index d3249a12e5..f567695943 100644 --- a/docs/spec/download.en-US.md +++ b/docs/spec/download.en-US.md @@ -79,15 +79,6 @@ Please find below some of the design resources and tools about Ant Design that w A series prototypes that help creating application structure and user flow - -
- -
-
- Web Font - Icon font package for your local reference -
-
diff --git a/docs/spec/download.zh-CN.md b/docs/spec/download.zh-CN.md index 5c0c997dc1..1a8e273375 100644 --- a/docs/spec/download.zh-CN.md +++ b/docs/spec/download.zh-CN.md @@ -81,15 +81,6 @@ title: 设计资源 一套页面逻辑原型库，帮你梳理页面逻辑
- -
- -
-
- Web Font - 网络字体图标的本地文件包 -
-
diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index 0eabfa2e67..a79522e6ad 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -14,13 +14,13 @@ title: 足不出户 ## 覆盖层 -推荐示例 +推荐示例 -推荐示例 +推荐示例 不推荐示例 -二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。 +二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤销』即可。
diff --git a/site/theme/static/icons.less b/site/theme/static/icons.less index 77497ee82a..118300c5c7 100644 --- a/site/theme/static/icons.less +++ b/site/theme/static/icons.less @@ -28,7 +28,7 @@ ul.anticons-list { display: block; text-align: center; transform: scale(0.83); - font-family: 'Lucida Console', Consolas; + font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; white-space: nowrap; .ant-badge { transition: color 0.3s ease-in-out;