mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
🔨 Merge master into feature
This commit is contained in:
afc163
commit
c29daf952a
@ -15,6 +15,45 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.11.3 🎅🏻
|
||||
|
||||
`2018-12-22`
|
||||
|
||||
- ⚡️ Upgrade our toolchains (babel and webpack) to latest version and prettier all codes!
|
||||
- Table
|
||||
- 🐞 **Fixed that dropdown menu action not clickable**. [#13563](https://github.com/ant-design/ant-design/issues/13563)
|
||||
- 🐞 Fixed hovering components on Table sortable column. [#13467](https://github.com/ant-design/ant-design/issues/13467)
|
||||
- 🐞 Fixed crash issue of selection Table under IE9/10. [#13540](https://github.com/ant-design/ant-design/issues/13540)
|
||||
- 🐞 Fixed check-all checkbox state when Table `childrenColumnName` is specified. [#13710](https://github.com/ant-design/ant-design/issues/13710)
|
||||
- 💄 Remove work break styles in table cell for consistent behavior. [#13624](https://github.com/ant-design/ant-design/issues/13624)
|
||||
- 💄 Rewrote the custom filter demo of Table. [Link](https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel)
|
||||
- 🐞 Fixed padding of Button which children is `0`. [#13596](https://github.com/ant-design/ant-design/pull/13596) [@951565664](https://github.com/951565664)
|
||||
- 💄 Chore Card header and loading UI.
|
||||
- 💄 Optimized Spin wrapper styles and improve performance slightly. [2c7112b](https://github.com/ant-design/ant-design/commit/2c7112be7bf32c6e8362334b86b0799cc3a4a6c4)
|
||||
- 🐞 Fixed border color of validated Input.Group. [#13529](https://github.com/ant-design/ant-design/issues/13529) [@morenyang](https://github.com/morenyang)
|
||||
- 🐞 Fixed submenu animation of vertical-type Menu. [#13597](https://github.com/ant-design/ant-design/issues/13597)
|
||||
- 🐞 Fixed width of WeekPicker. [#13629](https://github.com/ant-design/ant-design/issues/13629)
|
||||
- 🐞 Fixed cursor style of disabled Radio.Button. [#13642](https://github.com/ant-design/ant-design/pull/13642) [@gianpaj](https://github.com/gianpaj)
|
||||
- Dropdown
|
||||
- 🐞 Fixed slight shift when menu is poped in Chrome. [#12115](https://github.com/ant-design/ant-design/issues/12115) [@gurungrahul2](https://github.com/gurungrahul2)
|
||||
- 🐞 Fixed unexpected scrollbar caused by dropdown placed at screen edge. [00564dd](https://github.com/ant-design/ant-design/commit/3aeca7c10ec6ee3441f024fe7fdb5ae9e00564dd)
|
||||
- 🐞 Fixed `offset` props when Bdage `count` is specified as a ReactNode. [#13694](https://github.com/ant-design/ant-design/issues/13694)
|
||||
- 🐞 Remove nested Form.Item negetive margin. [#13748](https://github.com/ant-design/ant-design/issues/13748)
|
||||
- 📝 Added a Select demo of [Hide Already Selected](https://ant.design/components/select/#components-select-demo-hide-selected). [#13552](https://github.com/ant-design/ant-design/pull/13552) [@SergeyVolynkin](https://github.com/SergeyVolynkin)
|
||||
- 🐞 Fixed padding of Comment actions. [#13713](https://github.com/ant-design/ant-design/issues/13713)
|
||||
- 🐞 Fixed broken arrow style when customize Popover's background color. [#13533](https://github.com/ant-design/ant-design/issues/13533) [@gurungrahul2](https://github.com/gurungrahul2)
|
||||
- 🐞 Corrected Drawer `style` prop to outside wrapper. [#11504](https://github.com/ant-design/ant-design/issues/11504)
|
||||
- 🐞 Fixed one problem of incorrect state when Affix first mounted. [#13737](https://github.com/ant-design/ant-design/pull/13737) [@xuxinhang](https://github.com/xuxinhang)
|
||||
- 🐞 Fixed Tabs cursor style of disabled tab. [#13709](https://github.com/ant-design/ant-design/issues/13709)
|
||||
- 🌟 Added some less variables of [Tabs](https://github.com/ant-design/ant-design/pull/13727), [Table](https://github.com/ant-design/ant-design/pull/13754), [Alert](https://github.com/ant-design/ant-design/pull/13768).
|
||||
- TypeScript
|
||||
- ⚡️ Enhanced Table `ColumnProps` types about `dataIndex`. [#13605](https://github.com/ant-design/ant-design/pull/13605) [@bondBo](https://github.com/bondBo)
|
||||
- ⚡️ Enhanced Table `TableRowSelection.onChange` arguments with generic types.[#13761](https://github.com/ant-design/ant-design/issues/13761) [@hahabazinga](https://github.com/hahabazinga)
|
||||
- 🐞 Fixed type of LocaleProvider's `children`. [#12974](https://github.com/ant-design/ant-design/issues/12974)
|
||||
- 🐞 Fixed type of RangePicker `onOk`'s arguments. [#13650](https://github.com/ant-design/ant-design/pull/13650) [@iugo](https://github.com/iugo)
|
||||
- 🐞 Fixed Comment `author` type from string to ReactNode。[#13670](https://github.com/ant-design/ant-design/pull/13670) [@reichjustin](https://github.com/reichjustin)
|
||||
- 🐞 Fixed type of Select `dropdownProps`'s arguments. [#13617](https://github.com/ant-design/ant-design/pull/13617) [@SylvanasGone](https://github.com/SylvanasGone)
|
||||
|
||||
## 3.11.2
|
||||
|
||||
`2018-12-10`
|
||||
|
||||
@ -15,6 +15,45 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.11.3 🎅🏻
|
||||
|
||||
`2018-12-22`
|
||||
|
||||
- ⚡️ 升级内部依赖到 babel@7 和 webpack@4，并使用 prettier 格式化了所有代码。
|
||||
- Table
|
||||
- 🐞 **修复 Table 列筛选菜单按钮不可点击的问题**。[#13563](https://github.com/ant-design/ant-design/issues/13563)
|
||||
- 🐞 修复 Table 列设置排序后影响列头自定义浮出组件的展现问题。[#13467](https://github.com/ant-design/ant-design/issues/13467)
|
||||
- 🐞 修复 Table 选择时在 IE9/10 下崩溃的问题。[#13540](https://github.com/ant-design/ant-design/issues/13540)
|
||||
- 🐞 修复 Table 指定 `childrenColumnName` 时，全选框无法自动勾选的问题。[#13710](https://github.com/ant-design/ant-design/issues/13710)
|
||||
- 💄 移除 Table 下英文单词断行的样式。[#13624](https://github.com/ant-design/ant-design/issues/13624)
|
||||
- 💄 优化了 Table 自定义列搜索例子的实现和 UI。[演示](https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel)
|
||||
- 🐞 修复 Button 内容为 `0` 时的样式。[#13596](https://github.com/ant-design/ant-design/pull/13596) [@951565664](https://github.com/951565664)
|
||||
- 💄 微调 Card 头部和加载中的样式细节。
|
||||
- 💄 优化 Spin 样式并略微提升了切换状态的性能。[2c7112b](https://github.com/ant-design/ant-design/commit/2c7112be7bf32c6e8362334b86b0799cc3a4a6c4)
|
||||
- 🐞 修复一个 Input.Group 使用 compact 时校验状态边框样式的问题。[#13529](https://github.com/ant-design/ant-design/issues/13529) [@morenyang](https://github.com/morenyang)
|
||||
- 🐞 修复 Menu 在 vertical 模式下的展开收起动画。[#13597](https://github.com/ant-design/ant-design/issues/13597)
|
||||
- 🐞 修复 WeekPicker 的宽度样式异常。[#13629](https://github.com/ant-design/ant-design/issues/13629)
|
||||
- 🐞 修复 Radio.Button 失效状态下的鼠标手势。[#13642](https://github.com/ant-design/ant-design/pull/13642) [@gianpaj](https://github.com/gianpaj)
|
||||
- Dropdown
|
||||
- 🐞 修复 Chrome 下菜单弹出时有轻微移动的问题。[#12115](https://github.com/ant-design/ant-design/issues/12115) [@gurungrahul2](https://github.com/gurungrahul2)
|
||||
- 🐞 修复一个屏幕边缘的 Dropdown 菜单引起的浏览器滚动条异常出现的问题。[00564dd](https://github.com/ant-design/ant-design/commit/3aeca7c10ec6ee3441f024fe7fdb5ae9e00564dd)
|
||||
- 🐞 修复 Badge 的 `count` 是自定义 ReactNode 时 `offset` 属性失效的问题。[#13694](https://github.com/ant-design/ant-design/issues/13694)
|
||||
- 🐞 去掉 Form.Item 内嵌负边距，改用其他的方式实现单行多个表单项。[#13748](https://github.com/ant-design/ant-design/issues/13748)
|
||||
- 📝 补充了一个 Select 选择后隐藏选项的[例子](https://ant.design/components/select-cn/#components-select-demo-hide-selected)。[#13552](https://github.com/ant-design/ant-design/pull/13552) [@SergeyVolynkin](https://github.com/SergeyVolynkin)
|
||||
- 🐞 修复 Comment 的操作链接边距样式。[#13713](https://github.com/ant-design/ant-design/issues/13713)
|
||||
- 🐞 修复自定义 Popover 背景色时箭头样式突兀的问题。[#13533](https://github.com/ant-design/ant-design/issues/13533) [@gurungrahul2](https://github.com/gurungrahul2)
|
||||
- 🐞 修正 Drawer 的 `style` 属性到最外层容器上。[#11504](https://github.com/ant-design/ant-design/issues/11504)
|
||||
- 🐞 修复一个 Affix 初始化时固定状态不正确的问题。[#13737](https://github.com/ant-design/ant-design/pull/13737) [@xuxinhang](https://github.com/xuxinhang)
|
||||
- 🐞 修复 Tabs 失效页签的鼠标手型。[#13709](https://github.com/ant-design/ant-design/issues/13709)
|
||||
- 🌟 补充 [Tabs](https://github.com/ant-design/ant-design/pull/13727)、[Table](https://github.com/ant-design/ant-design/pull/13754)、[Alert](https://github.com/ant-design/ant-design/pull/13768) 组件的一些样式变量。
|
||||
- TypeScript
|
||||
- ⚡️ 完善 Table 的 `ColumnProps` 定义，增强对 `dataIndex` 的校验。[#13605](https://github.com/ant-design/ant-design/pull/13605) [@bondBo](https://github.com/bondBo)
|
||||
- ⚡️ 完善 Table 的 `TableRowSelection.onChange` 参数泛型定义。[#13761](https://github.com/ant-design/ant-design/issues/13761) [@hahabazinga](https://github.com/hahabazinga)
|
||||
- 🐞 修复 LocaleProvider 的 `children` 类型。 [#12974](https://github.com/ant-design/ant-design/issues/12974)
|
||||
- 🐞 修复 RangePicker 的 `onOk` 的参数类型。[#13650](https://github.com/ant-design/ant-design/pull/13650) [@iugo](https://github.com/iugo)
|
||||
- 🐞 修正 Comment `author` 属性的类型为 ReactNode。[#13670](https://github.com/ant-design/ant-design/pull/13670) [@reichjustin](https://github.com/reichjustin)
|
||||
- 🐞 修复 Select `dropdownProps` 的参数定义。[#13617](https://github.com/ant-design/ant-design/pull/13617) [@SylvanasGone](https://github.com/SylvanasGone)
|
||||
|
||||
## 3.11.2
|
||||
|
||||
`2018-12-10`
|
||||
|
||||
@ -4328,6 +4328,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
style="margin-bottom:0"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
|
||||
@ -4349,114 +4350,104 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<div
|
||||
class="ant-col-11"
|
||||
class="ant-row ant-form-item ant-form-item-with-help"
|
||||
style="display:inline-block;width:calc(50% - 12px)"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item ant-form-item-with-help"
|
||||
class="ant-form-item-control-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-wrapper"
|
||||
class="ant-form-item-control has-error"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control has-error"
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
class="ant-calendar-picker"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
class="ant-calendar-picker-input ant-input"
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
value=""
|
||||
/>
|
||||
<i
|
||||
class="anticon anticon-calendar ant-calendar-picker-icon"
|
||||
<div>
|
||||
<input
|
||||
class="ant-calendar-picker-input ant-input"
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
value=""
|
||||
/>
|
||||
<i
|
||||
class="anticon anticon-calendar ant-calendar-picker-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
>
|
||||
Please select the correct date
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-form-explain"
|
||||
>
|
||||
Please select the correct date
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col-2"
|
||||
<span
|
||||
style="display:inline-block;width:24px;text-align:center"
|
||||
>
|
||||
<span
|
||||
style="display:inline-block;width:100%;text-align:center"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
</div>
|
||||
-
|
||||
</span>
|
||||
<div
|
||||
class="ant-col-11"
|
||||
class="ant-row ant-form-item"
|
||||
style="display:inline-block;width:calc(50% - 12px)"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
class="ant-form-item-control-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-wrapper"
|
||||
class="ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control"
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
class="ant-calendar-picker"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
>
|
||||
<div>
|
||||
<input
|
||||
class="ant-calendar-picker-input ant-input"
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
value=""
|
||||
/>
|
||||
<i
|
||||
class="anticon anticon-calendar ant-calendar-picker-icon"
|
||||
<div>
|
||||
<input
|
||||
class="ant-calendar-picker-input ant-input"
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
value=""
|
||||
/>
|
||||
<i
|
||||
class="anticon anticon-calendar ant-calendar-picker-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,8 +23,6 @@ import {
|
||||
Form, Row, Col, Input, Button, Icon,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
class AdvancedSearchForm extends React.Component {
|
||||
state = {
|
||||
expand: false,
|
||||
@ -38,7 +36,7 @@ class AdvancedSearchForm extends React.Component {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
children.push(
|
||||
<Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
|
||||
<FormItem label={`Field ${i}`}>
|
||||
<Form.Item label={`Field ${i}`}>
|
||||
{getFieldDecorator(`field-${i}`, {
|
||||
rules: [{
|
||||
required: true,
|
||||
@ -47,7 +45,7 @@ class AdvancedSearchForm extends React.Component {
|
||||
})(
|
||||
<Input placeholder="placeholder" />
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,7 @@ import {
|
||||
Form, Select, Input, Button,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
class App extends React.Component {
|
||||
handleSubmit = (e) => {
|
||||
@ -42,7 +41,7 @@ class App extends React.Component {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="Note"
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
@ -52,8 +51,8 @@ class App extends React.Component {
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Gender"
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
@ -69,14 +68,14 @@ class App extends React.Component {
|
||||
<Option value="female">female</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
wrapperCol={{ span: 12, offset: 5 }}
|
||||
>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -24,8 +24,7 @@ import {
|
||||
Form, Input, Select, Button,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
class PriceInput extends React.Component {
|
||||
static getDerivedStateFromProps(nextProps) {
|
||||
@ -122,15 +121,15 @@ class Demo extends React.Component {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<Form layout="inline" onSubmit={this.handleSubmit}>
|
||||
<FormItem label="Price">
|
||||
<Form.Item label="Price">
|
||||
{getFieldDecorator('price', {
|
||||
initialValue: { number: 0, currency: 'rmb' },
|
||||
rules: [{ validator: this.checkPrice }],
|
||||
})(<PriceInput />)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,6 @@ import {
|
||||
Form, Input, Icon, Button,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
let id = 0;
|
||||
|
||||
class DynamicFieldSet extends React.Component {
|
||||
@ -80,7 +78,7 @@ class DynamicFieldSet extends React.Component {
|
||||
getFieldDecorator('keys', { initialValue: [] });
|
||||
const keys = getFieldValue('keys');
|
||||
const formItems = keys.map((k, index) => (
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
|
||||
label={index === 0 ? 'Passengers' : ''}
|
||||
required={false}
|
||||
@ -104,19 +102,19 @@ class DynamicFieldSet extends React.Component {
|
||||
onClick={() => this.remove(k)}
|
||||
/>
|
||||
) : null}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
));
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
{formItems}
|
||||
<FormItem {...formItemLayoutWithOutLabel}>
|
||||
<Form.Item {...formItemLayoutWithOutLabel}>
|
||||
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
|
||||
<Icon type="plus" /> Add field
|
||||
</Button>
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayoutWithOutLabel}>
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayoutWithOutLabel}>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,6 @@ import {
|
||||
Form, Input, Button, Checkbox,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 8 },
|
||||
@ -55,7 +53,7 @@ class DynamicRule extends React.Component {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div>
|
||||
<FormItem {...formItemLayout} label="Name">
|
||||
<Form.Item {...formItemLayout} label="Name">
|
||||
{getFieldDecorator('username', {
|
||||
rules: [{
|
||||
required: true,
|
||||
@ -64,8 +62,8 @@ class DynamicRule extends React.Component {
|
||||
})(
|
||||
<Input placeholder="Please input your name" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...formItemLayout} label="Nickname">
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="Nickname">
|
||||
{getFieldDecorator('nickname', {
|
||||
rules: [{
|
||||
required: this.state.checkNick,
|
||||
@ -74,20 +72,20 @@ class DynamicRule extends React.Component {
|
||||
})(
|
||||
<Input placeholder="Please input your nickname" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...formTailLayout}>
|
||||
</Form.Item>
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Checkbox
|
||||
checked={this.state.checkNick}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
Nickname is required
|
||||
</Checkbox>
|
||||
</FormItem>
|
||||
<FormItem {...formTailLayout}>
|
||||
</Form.Item>
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" onClick={this.check}>
|
||||
Check
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,6 @@ import {
|
||||
Button, Modal, Form, Input, Radio,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
|
||||
// eslint-disable-next-line
|
||||
class extends React.Component {
|
||||
@ -37,17 +35,17 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
|
||||
onOk={onCreate}
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<FormItem label="Title">
|
||||
<Form.Item label="Title">
|
||||
{getFieldDecorator('title', {
|
||||
rules: [{ required: true, message: 'Please input the title of collection!' }],
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem label="Description">
|
||||
</Form.Item>
|
||||
<Form.Item label="Description">
|
||||
{getFieldDecorator('description')(<Input type="textarea" />)}
|
||||
</FormItem>
|
||||
<FormItem className="collection-create-form_last-form-item">
|
||||
</Form.Item>
|
||||
<Form.Item className="collection-create-form_last-form-item">
|
||||
{getFieldDecorator('modifier', {
|
||||
initialValue: 'public',
|
||||
})(
|
||||
@ -56,7 +54,7 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
|
||||
<Radio value="private">Private</Radio>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@ -20,8 +20,6 @@ We can store form data into upper component or [Redux](https://github.com/reactj
|
||||
````jsx
|
||||
import { Form, Input } from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const CustomizedForm = Form.create({
|
||||
name: 'global_state',
|
||||
onFieldsChange(props, changedFields) {
|
||||
@ -42,11 +40,11 @@ const CustomizedForm = Form.create({
|
||||
const { getFieldDecorator } = props.form;
|
||||
return (
|
||||
<Form layout="inline">
|
||||
<FormItem label="Username">
|
||||
<Form.Item label="Username">
|
||||
{getFieldDecorator('username', {
|
||||
rules: [{ required: true, message: 'Username is required!' }],
|
||||
})(<Input />)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
});
|
||||
|
||||
@ -18,8 +18,6 @@ import {
|
||||
Form, Icon, Input, Button,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
function hasErrors(fieldsError) {
|
||||
return Object.keys(fieldsError).some(field => fieldsError[field]);
|
||||
}
|
||||
@ -49,7 +47,7 @@ class HorizontalLoginForm extends React.Component {
|
||||
const passwordError = isFieldTouched('password') && getFieldError('password');
|
||||
return (
|
||||
<Form layout="inline" onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
validateStatus={userNameError ? 'error' : ''}
|
||||
help={userNameError || ''}
|
||||
>
|
||||
@ -58,8 +56,8 @@ class HorizontalLoginForm extends React.Component {
|
||||
})(
|
||||
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
validateStatus={passwordError ? 'error' : ''}
|
||||
help={passwordError || ''}
|
||||
>
|
||||
@ -68,8 +66,8 @@ class HorizontalLoginForm extends React.Component {
|
||||
})(
|
||||
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
@ -77,7 +75,7 @@ class HorizontalLoginForm extends React.Component {
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,6 @@ import {
|
||||
Form, Input, Button, Radio,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
class FormLayoutDemo extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
@ -44,7 +42,7 @@ class FormLayoutDemo extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
<Form layout={formLayout}>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="Form Layout"
|
||||
{...formItemLayout}
|
||||
>
|
||||
@ -53,22 +51,22 @@ class FormLayoutDemo extends React.Component {
|
||||
<Radio.Button value="vertical">Vertical</Radio.Button>
|
||||
<Radio.Button value="inline">Inline</Radio.Button>
|
||||
</Radio.Group>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Field A"
|
||||
{...formItemLayout}
|
||||
>
|
||||
<Input placeholder="input placeholder" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Field B"
|
||||
{...formItemLayout}
|
||||
>
|
||||
<Input placeholder="input placeholder" />
|
||||
</FormItem>
|
||||
<FormItem {...buttonItemLayout}>
|
||||
</Form.Item>
|
||||
<Form.Item {...buttonItemLayout}>
|
||||
<Button type="primary">Submit</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -18,8 +18,6 @@ import {
|
||||
Form, Icon, Input, Button, Checkbox,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
class NormalLoginForm extends React.Component {
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
@ -34,21 +32,21 @@ class NormalLoginForm extends React.Component {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit} className="login-form">
|
||||
<FormItem>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('userName', {
|
||||
rules: [{ required: true, message: 'Please input your username!' }],
|
||||
})(
|
||||
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [{ required: true, message: 'Please input your Password!' }],
|
||||
})(
|
||||
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('remember', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: true,
|
||||
@ -60,7 +58,7 @@ class NormalLoginForm extends React.Component {
|
||||
Log in
|
||||
</Button>
|
||||
Or <a href="">register now!</a>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,8 +18,7 @@ import {
|
||||
Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
const AutoCompleteOption = AutoComplete.Option;
|
||||
|
||||
const residences = [{
|
||||
@ -134,7 +133,7 @@ class RegistrationForm extends React.Component {
|
||||
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="E-mail"
|
||||
>
|
||||
@ -147,8 +146,8 @@ class RegistrationForm extends React.Component {
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Password"
|
||||
>
|
||||
@ -161,8 +160,8 @@ class RegistrationForm extends React.Component {
|
||||
})(
|
||||
<Input type="password" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Confirm Password"
|
||||
>
|
||||
@ -175,8 +174,8 @@ class RegistrationForm extends React.Component {
|
||||
})(
|
||||
<Input type="password" onBlur={this.handleConfirmBlur} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label={(
|
||||
<span>
|
||||
@ -192,8 +191,8 @@ class RegistrationForm extends React.Component {
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Habitual Residence"
|
||||
>
|
||||
@ -203,8 +202,8 @@ class RegistrationForm extends React.Component {
|
||||
})(
|
||||
<Cascader options={residences} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Phone Number"
|
||||
>
|
||||
@ -213,8 +212,8 @@ class RegistrationForm extends React.Component {
|
||||
})(
|
||||
<Input addonBefore={prefixSelector} style={{ width: '100%' }} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Website"
|
||||
>
|
||||
@ -229,8 +228,8 @@ class RegistrationForm extends React.Component {
|
||||
<Input />
|
||||
</AutoComplete>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Captcha"
|
||||
extra="We must make sure that your are a human."
|
||||
@ -247,17 +246,17 @@ class RegistrationForm extends React.Component {
|
||||
<Button>Get captcha</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem {...tailFormItemLayout}>
|
||||
</Form.Item>
|
||||
<Form.Item {...tailFormItemLayout}>
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
})(
|
||||
<Checkbox>I have read the <a href="">agreement</a></Checkbox>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...tailFormItemLayout}>
|
||||
</Form.Item>
|
||||
<Form.Item {...tailFormItemLayout}>
|
||||
<Button type="primary" htmlType="submit">Register</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@ import {
|
||||
Form, DatePicker, TimePicker, Button,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { MonthPicker, RangePicker } = DatePicker;
|
||||
|
||||
class TimeRelatedForm extends React.Component {
|
||||
@ -69,62 +68,62 @@ class TimeRelatedForm extends React.Component {
|
||||
};
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="DatePicker"
|
||||
>
|
||||
{getFieldDecorator('date-picker', config)(
|
||||
<DatePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="DatePicker[showTime]"
|
||||
>
|
||||
{getFieldDecorator('date-time-picker', config)(
|
||||
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="MonthPicker"
|
||||
>
|
||||
{getFieldDecorator('month-picker', config)(
|
||||
<MonthPicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="RangePicker"
|
||||
>
|
||||
{getFieldDecorator('range-picker', rangeConfig)(
|
||||
<RangePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="RangePicker[showTime]"
|
||||
>
|
||||
{getFieldDecorator('range-time-picker', rangeConfig)(
|
||||
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="TimePicker"
|
||||
>
|
||||
{getFieldDecorator('time-picker', config)(
|
||||
<TimePicker />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
wrapperCol={{
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 16, offset: 8 },
|
||||
}}
|
||||
>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -20,10 +20,7 @@ import {
|
||||
Row, Col,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const RadioButton = Radio.Button;
|
||||
const RadioGroup = Radio.Group;
|
||||
const { Option } = Select;
|
||||
|
||||
class Demo extends React.Component {
|
||||
handleSubmit = (e) => {
|
||||
@ -51,13 +48,13 @@ class Demo extends React.Component {
|
||||
};
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Plain Text"
|
||||
>
|
||||
<span className="ant-form-text">China</span>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Select"
|
||||
hasFeedback
|
||||
@ -72,9 +69,9 @@ class Demo extends React.Component {
|
||||
<Option value="usa">U.S.A</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Select[multiple]"
|
||||
>
|
||||
@ -89,9 +86,9 @@ class Demo extends React.Component {
|
||||
<Option value="blue">Blue</Option>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="InputNumber"
|
||||
>
|
||||
@ -99,18 +96,18 @@ class Demo extends React.Component {
|
||||
<InputNumber min={1} max={10} />
|
||||
)}
|
||||
<span className="ant-form-text"> machines</span>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Switch"
|
||||
>
|
||||
{getFieldDecorator('switch', { valuePropName: 'checked' })(
|
||||
<Switch />
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Slider"
|
||||
>
|
||||
@ -120,33 +117,33 @@ class Demo extends React.Component {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Radio.Group"
|
||||
>
|
||||
{getFieldDecorator('radio-group')(
|
||||
<RadioGroup>
|
||||
<Radio.Group>
|
||||
<Radio value="a">item 1</Radio>
|
||||
<Radio value="b">item 2</Radio>
|
||||
<Radio value="c">item 3</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Radio.Button"
|
||||
>
|
||||
{getFieldDecorator('radio-button')(
|
||||
<RadioGroup>
|
||||
<RadioButton value="a">item 1</RadioButton>
|
||||
<RadioButton value="b">item 2</RadioButton>
|
||||
<RadioButton value="c">item 3</RadioButton>
|
||||
</RadioGroup>
|
||||
<Radio.Group>
|
||||
<Radio.Button value="a">item 1</Radio.Button>
|
||||
<Radio.Button value="b">item 2</Radio.Button>
|
||||
<Radio.Button value="c">item 3</Radio.Button>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
@ -167,7 +164,7 @@ class Demo extends React.Component {
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Rate"
|
||||
>
|
||||
@ -176,9 +173,9 @@ class Demo extends React.Component {
|
||||
})(
|
||||
<Rate />
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Upload"
|
||||
extra="longgggggggggggggggggggggggggggggggggg"
|
||||
@ -193,9 +190,9 @@ class Demo extends React.Component {
|
||||
</Button>
|
||||
</Upload>
|
||||
)}
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Dragger"
|
||||
>
|
||||
@ -213,13 +210,13 @@ class Demo extends React.Component {
|
||||
</Upload.Dragger>
|
||||
)}
|
||||
</div>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
wrapperCol={{ span: 12, offset: 6 }}
|
||||
>
|
||||
<Button type="primary" htmlType="submit">Submit</Button>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -23,11 +23,10 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
|
||||
|
||||
````jsx
|
||||
import {
|
||||
Form, Input, DatePicker, Col, TimePicker, Select, Cascader, InputNumber,
|
||||
Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,
|
||||
} from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const { Option } = Select;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
@ -42,24 +41,24 @@ const formItemLayout = {
|
||||
|
||||
ReactDOM.render(
|
||||
<Form>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Fail"
|
||||
validateStatus="error"
|
||||
help="Should be combination of numbers & alphabets"
|
||||
>
|
||||
<Input placeholder="unavailable choice" id="error" />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Warning"
|
||||
validateStatus="warning"
|
||||
>
|
||||
<Input placeholder="Warning" id="warning" />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Validating"
|
||||
hasFeedback
|
||||
@ -67,27 +66,27 @@ ReactDOM.render(
|
||||
help="The information is being validated..."
|
||||
>
|
||||
<Input placeholder="I'm the content is being validated" id="validating" />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Success"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<Input placeholder="I'm the content" id="success" />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Warning"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<Input placeholder="Warning" id="warning2" />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Fail"
|
||||
hasFeedback
|
||||
@ -95,27 +94,27 @@ ReactDOM.render(
|
||||
help="Should be combination of numbers & alphabets"
|
||||
>
|
||||
<Input placeholder="unavailable choice" id="error2" />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Success"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<DatePicker style={{ width: '100%' }} />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Warning"
|
||||
hasFeedback
|
||||
validateStatus="warning"
|
||||
>
|
||||
<TimePicker style={{ width: '100%' }} />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Error"
|
||||
hasFeedback
|
||||
@ -126,9 +125,9 @@ ReactDOM.render(
|
||||
<Option value="2">Option 2</Option>
|
||||
<Option value="3">Option 3</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Validating"
|
||||
hasFeedback
|
||||
@ -136,37 +135,36 @@ ReactDOM.render(
|
||||
help="The information is being validated..."
|
||||
>
|
||||
<Cascader defaultValue={['1']} options={[]} />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="inline"
|
||||
{...formItemLayout}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<Col span={11}>
|
||||
<FormItem validateStatus="error" help="Please select the correct date">
|
||||
<DatePicker />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
|
||||
-
|
||||
</span>
|
||||
</Col>
|
||||
<Col span={11}>
|
||||
<FormItem>
|
||||
<DatePicker />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</FormItem>
|
||||
<Form.Item
|
||||
validateStatus="error"
|
||||
help="Please select the correct date"
|
||||
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<span style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>
|
||||
-
|
||||
</span>
|
||||
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Success"
|
||||
hasFeedback
|
||||
validateStatus="success"
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
mountNode
|
||||
);
|
||||
|
||||
@ -16,8 +16,6 @@ title:
|
||||
````jsx
|
||||
import { Form, InputNumber } from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
function validatePrimeNumber(number) {
|
||||
if (number === 11) {
|
||||
return {
|
||||
@ -56,7 +54,7 @@ class RawForm extends React.Component {
|
||||
const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
||||
return (
|
||||
<Form>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
label="Prime between 8 & 12"
|
||||
validateStatus={number.validateStatus}
|
||||
@ -68,7 +66,7 @@ class RawForm extends React.Component {
|
||||
value={number.value}
|
||||
onChange={this.handleNumberChange}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -74,12 +74,6 @@ input[type='checkbox'] {
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
vertical-align: top;
|
||||
|
||||
// nested FormItem
|
||||
&-control > &:last-child,
|
||||
& [class^='@{ant-prefix}-col-'] > &:only-child {
|
||||
margin-bottom: -@form-item-margin-bottom;
|
||||
}
|
||||
|
||||
&-control {
|
||||
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
|
||||
position: relative;
|
||||
|
||||
@ -130,8 +130,8 @@ export default class Select<T = SelectValue> extends React.Component<SelectProps
|
||||
|
||||
warning(
|
||||
props.mode !== 'combobox',
|
||||
'The combobox mode of Select is deprecated,' +
|
||||
'it will be removed in next major version,' +
|
||||
'The combobox mode of Select is deprecated, ' +
|
||||
'it will be removed in next major version, ' +
|
||||
'please use AutoComplete instead',
|
||||
);
|
||||
}
|
||||
|
||||
@ -85,12 +85,12 @@ export type TableSelectWay = 'onSelect' | 'onSelectMultiple' | 'onSelectAll' | '
|
||||
export interface TableRowSelection<T> {
|
||||
type?: RowSelectionType;
|
||||
selectedRowKeys?: string[] | number[];
|
||||
onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => void;
|
||||
onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => void;
|
||||
getCheckboxProps?: (record: T) => Object;
|
||||
onSelect?: SelectionSelectFn<T>;
|
||||
onSelectMultiple?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => void;
|
||||
onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => void;
|
||||
onSelectInvert?: (selectedRows: Object[]) => void;
|
||||
onSelectMultiple?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
|
||||
onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
|
||||
onSelectInvert?: (selectedRowKeys: string[] | number[]) => void;
|
||||
selections?: SelectionItem[] | boolean;
|
||||
hideDefaultSelections?: boolean;
|
||||
fixed?: boolean;
|
||||
|
||||
@ -158,12 +158,6 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-tab-disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: @disabled-color;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-tab {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
@ -191,11 +185,19 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-tab-active {
|
||||
color: @tabs-highlight-color;
|
||||
font-weight: 500;
|
||||
&-disabled {
|
||||
&,
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
color: @tabs-highlight-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -349,11 +349,6 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
|
||||
style="height:32px"
|
||||
/>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -471,11 +466,6 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
|
||||
style="height:32px"
|
||||
/>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -86,11 +86,6 @@ exports[`Transfer should render correctly 1`] = `
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -201,11 +196,6 @@ exports[`Transfer should render correctly 1`] = `
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -277,11 +267,6 @@ exports[`Transfer should show sorted targetkey 1`] = `
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -419,11 +404,6 @@ exports[`Transfer should show sorted targetkey 1`] = `
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -102,11 +102,6 @@ exports[`List should render correctly 1`] = `
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
Not Found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -9,10 +9,6 @@ import Search from './search';
|
||||
import Item from './item';
|
||||
import triggerEvent from '../_util/triggerEvent';
|
||||
|
||||
function isIEorEDGE() {
|
||||
return (document as any).documentMode || /Edge/.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function isRenderResultPlainObject(result: any) {
|
||||
@ -59,7 +55,6 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
|
||||
timer: number;
|
||||
triggerScrollTimer: number;
|
||||
fixIERepaintTimer: number;
|
||||
notFoundNode: HTMLDivElement;
|
||||
|
||||
constructor(props: TransferListProps) {
|
||||
@ -80,7 +75,6 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.timer);
|
||||
clearTimeout(this.triggerScrollTimer);
|
||||
clearTimeout(this.fixIERepaintTimer);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(...args: any[]) {
|
||||
@ -117,12 +111,10 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
triggerEvent(listNode, 'scroll');
|
||||
}
|
||||
}, 0);
|
||||
this.fixIERepaint();
|
||||
};
|
||||
|
||||
handleClear = () => {
|
||||
this.props.handleClear();
|
||||
this.fixIERepaint();
|
||||
};
|
||||
|
||||
matchFilter = (text: string, item: TransferItem) => {
|
||||
@ -143,24 +135,6 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
};
|
||||
};
|
||||
|
||||
saveNotFoundRef = (node: HTMLDivElement) => {
|
||||
this.notFoundNode = node;
|
||||
};
|
||||
|
||||
// Fix IE/Edge repaint
|
||||
// https://github.com/ant-design/ant-design/issues/9697
|
||||
// https://stackoverflow.com/q/27947912/3040605
|
||||
fixIERepaint() {
|
||||
if (!isIEorEDGE()) {
|
||||
return;
|
||||
}
|
||||
this.fixIERepaintTimer = window.setTimeout(() => {
|
||||
if (this.notFoundNode) {
|
||||
this.notFoundNode.className = this.notFoundNode.className;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
prefixCls,
|
||||
@ -236,6 +210,10 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const searchNotFound = showItems.every(item => item === null) && (
|
||||
<div className={`${prefixCls}-body-not-found`}>{notFoundContent}</div>
|
||||
);
|
||||
|
||||
const listBody = bodyDom || (
|
||||
<div
|
||||
className={classNames(
|
||||
@ -252,9 +230,7 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
>
|
||||
{showItems}
|
||||
</Animate>
|
||||
<div className={`${prefixCls}-body-not-found`} ref={this.saveNotFoundRef}>
|
||||
{notFoundContent}
|
||||
</div>
|
||||
{searchNotFound}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -125,17 +125,12 @@
|
||||
padding-top: 0;
|
||||
color: @disabled-color;
|
||||
text-align: center;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-content:empty + &-body-not-found {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "3.11.2",
|
||||
"version": "3.11.3",
|
||||
"title": "Ant Design",
|
||||
"description": "An enterprise-class UI design language and React-based implementation",
|
||||
"homepage": "http://ant.design/",
|
||||
@ -67,7 +67,7 @@
|
||||
"rc-input-number": "~4.3.7",
|
||||
"rc-menu": "~7.4.12",
|
||||
"rc-notification": "~3.3.0",
|
||||
"rc-pagination": "~1.17.3",
|
||||
"rc-pagination": "~1.17.5",
|
||||
"rc-progress": "~2.2.6",
|
||||
"rc-rate": "~2.4.2",
|
||||
"rc-select": "^8.6.7",
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<![endif]-->
|
||||
<script>
|
||||
if (!window.Intl) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js"\>\<\/script>');
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
|
||||
@ -39,15 +39,7 @@ class Banner extends React.PureComponent {
|
||||
<div className="banner-bg-wrapper">
|
||||
<svg width="400px" height="576px" viewBox="0 0 400 576" fill="none">
|
||||
<TweenOne component="g" animation={[{ opacity: 0, type: 'from' }, { ...loop, y: 15 }]}>
|
||||
<ellipse
|
||||
id="Oval-9-Copy-4"
|
||||
cx="100"
|
||||
cy="100"
|
||||
rx="6"
|
||||
ry="6"
|
||||
stroke="#2F54EB"
|
||||
strokeWidth="1.6"
|
||||
/>
|
||||
<ellipse cx="100" cy="100" rx="6" ry="6" stroke="#2F54EB" strokeWidth="1.6" />
|
||||
</TweenOne>
|
||||
<TweenOne component="g" animation={[{ opacity: 0, type: 'from' }, { ...loop, y: -15 }]}>
|
||||
<g transform="translate(200 450)">
|
||||
|
||||
@ -107,7 +107,6 @@ export default function BannerImage() {
|
||||
<g id="Group-13" transform="translate(0.000000, 41.000000)">
|
||||
<TweenOneG animation={animate.y}>
|
||||
<ellipse
|
||||
id="Oval-9-Copy-4"
|
||||
fillOpacity="0.4"
|
||||
fill="#2F54EB"
|
||||
opacity="0.3"
|
||||
@ -118,19 +117,10 @@ export default function BannerImage() {
|
||||
/>
|
||||
</TweenOneG>
|
||||
<TweenOneG animation={{ ...animate.yR, delay: 100 }}>
|
||||
<circle
|
||||
id="Oval-9-Copy-4"
|
||||
fillOpacity="0.4"
|
||||
fill="#2F54EB"
|
||||
opacity="0.3"
|
||||
cx="402"
|
||||
cy="3"
|
||||
r="3"
|
||||
/>
|
||||
<circle fillOpacity="0.4" fill="#2F54EB" opacity="0.3" cx="402" cy="3" r="3" />
|
||||
</TweenOneG>
|
||||
<TweenOneG animation={{ ...animate.y, delay: 100 }}>
|
||||
<ellipse
|
||||
id="Oval-9-Copy-4"
|
||||
stroke="#13C2C2"
|
||||
strokeWidth="1.6"
|
||||
cx="419"
|
||||
@ -141,7 +131,6 @@ export default function BannerImage() {
|
||||
</TweenOneG>
|
||||
<TweenOneG animation={{ ...animate.yR, delay: 150 }}>
|
||||
<rect
|
||||
id="Rectangle-22"
|
||||
fill="#FFE600"
|
||||
opacity="0.6"
|
||||
transform="translate(285.224453, 179.218136) rotate(-340.000000) translate(-285.224453, -179.218136) "
|
||||
@ -154,7 +143,6 @@ export default function BannerImage() {
|
||||
</TweenOneG>
|
||||
<TweenOneG animation={{ ...animate.y, delay: 200 }}>
|
||||
<rect
|
||||
id="Rectangle-22"
|
||||
stroke="#F5222D"
|
||||
strokeWidth="1.6"
|
||||
transform="translate(184.000000, 18.000000) rotate(8.000000) translate(-184.000000, -18.000000) "
|
||||
@ -168,7 +156,6 @@ export default function BannerImage() {
|
||||
<TweenOneG animation={{ ...animate.yR, delay: 200 }}>
|
||||
<path
|
||||
d="M11.6005591,127.582431 L14.1769733,132.010943 C15.1767883,133.729492 14.5941396,135.933161 12.8755911,136.932976 C12.325874,137.25279 11.7012453,137.421269 11.0652659,137.421269 L5.91243747,137.421269 C3.92421237,137.421269 2.31243747,135.809494 2.31243747,133.821269 C2.31243747,133.185289 2.48091636,132.560661 2.80073009,132.010943 L5.37714432,127.582431 C6.37695929,125.863883 8.58062832,125.281234 10.2991769,126.281049 C10.8384011,126.594758 11.2868499,127.043207 11.6005591,127.582431 Z"
|
||||
id="Triangle-2"
|
||||
stroke="#13C2C2"
|
||||
strokeWidth="1.6"
|
||||
transform="translate(8.489147, 131.606717) rotate(18.000000) translate(-8.489147, -131.606717) "
|
||||
@ -177,7 +164,6 @@ export default function BannerImage() {
|
||||
<TweenOneG animation={{ ...animate.y, delay: 300 }}>
|
||||
<path
|
||||
d="M168.708021,336.081114 L171.995111,342.213024 C172.516977,343.186539 172.150843,344.398784 171.177328,344.920649 C170.88673,345.076428 170.562126,345.157945 170.232408,345.157945 L163.658227,345.157945 C162.553657,345.157945 161.658227,344.262514 161.658227,343.157945 C161.658227,342.828226 161.739744,342.503622 161.895523,342.213024 L165.182613,336.081114 C165.704478,335.1076 166.916723,334.741466 167.890238,335.263331 C168.237419,335.449442 168.52191,335.733933 168.708021,336.081114 Z"
|
||||
id="Triangle-2"
|
||||
stroke="#2F54EB"
|
||||
strokeWidth="1.6"
|
||||
transform="translate(166.945513, 340.091794) rotate(18.000000) translate(-166.945513, -340.091794) "
|
||||
|
||||
@ -25,31 +25,19 @@ const page1Data = [
|
||||
>
|
||||
<circle id="Oval-12-Copy-6" fill="#1D39C4" opacity="0.45" cx="60" cy="157" r="25" />
|
||||
<circle id="Oval-12-Copy" fill="#1D39C4" opacity="0.35" cx="167.5" cy="65.5" r="11.5" />
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
stroke="#1D39C4"
|
||||
opacity="0.7"
|
||||
x="0.5"
|
||||
y="54.5"
|
||||
width="14"
|
||||
height="14"
|
||||
rx="1"
|
||||
/>
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="195.5" cy="117.5" r="3.5" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="117" cy="2" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="82" cy="36" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="26.5" cy="102.5" r="1.5" />
|
||||
<circle id="Oval-8" stroke="#1D39C4" opacity="0.65" cx="180.5" cy="8.5" r="4.5" />
|
||||
<rect stroke="#1D39C4" opacity="0.7" x="0.5" y="54.5" width="14" height="14" rx="1" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="195.5" cy="117.5" r="3.5" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="117" cy="2" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="82" cy="36" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="26.5" cy="102.5" r="1.5" />
|
||||
<circle stroke="#1D39C4" opacity="0.65" cx="180.5" cy="8.5" r="4.5" />
|
||||
<g
|
||||
id="Group-18"
|
||||
transform="translate(197.000000, 157.000000)"
|
||||
opacity="0.7"
|
||||
stroke="#1D39C4"
|
||||
>
|
||||
<path
|
||||
d="M10.7320508,3 L15.0621778,10.5 C15.6144626,11.4565852 15.2867123,12.6797661 14.330127,13.2320508 C14.0260886,13.4075875 13.6812003,13.5 13.330127,13.5 L4.66987298,13.5 C3.56530348,13.5 2.66987298,12.6045695 2.66987298,11.5 C2.66987298,11.1489267 2.76228551,10.8040384 2.93782217,10.5 L7.26794919,3 C7.82023394,2.04341475 9.04341475,1.71566444 10,2.26794919 C10.3040384,2.44348586 10.5565141,2.69596158 10.7320508,3 Z"
|
||||
id="Polygon-2"
|
||||
/>
|
||||
<path d="M10.7320508,3 L15.0621778,10.5 C15.6144626,11.4565852 15.2867123,12.6797661 14.330127,13.2320508 C14.0260886,13.4075875 13.6812003,13.5 13.330127,13.5 L4.66987298,13.5 C3.56530348,13.5 2.66987298,12.6045695 2.66987298,11.5 C2.66987298,11.1489267 2.76228551,10.8040384 2.93782217,10.5 L7.26794919,3 C7.82023394,2.04341475 9.04341475,1.71566444 10,2.26794919 C10.3040384,2.44348586 10.5565141,2.69596158 10.7320508,3 Z" />
|
||||
</g>
|
||||
<g
|
||||
id="Group-17"
|
||||
@ -59,7 +47,6 @@ const page1Data = [
|
||||
>
|
||||
<path
|
||||
d="M13.7320508,6 L18.0621778,13.5 C18.6144626,14.4565852 18.2867123,15.6797661 17.330127,16.2320508 C17.0260886,16.4075875 16.6812003,16.5 16.330127,16.5 L7.66987298,16.5 C6.56530348,16.5 5.66987298,15.6045695 5.66987298,14.5 C5.66987298,14.1489267 5.76228551,13.8040384 5.93782217,13.5 L10.2679492,6 C10.8202339,5.04341475 12.0434148,4.71566444 13,5.26794919 C13.3040384,5.44348586 13.5565141,5.69596158 13.7320508,6 Z"
|
||||
id="Polygon-2"
|
||||
transform="translate(12.000000, 11.140576) rotate(25.000000) translate(-12.000000, -11.140576) "
|
||||
/>
|
||||
</g>
|
||||
@ -81,20 +68,10 @@ const page1Data = [
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
>
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
stroke="#1D39C4"
|
||||
opacity="0.7"
|
||||
x="192.5"
|
||||
y="62.5"
|
||||
width="14"
|
||||
height="14"
|
||||
rx="1"
|
||||
/>
|
||||
<rect stroke="#1D39C4" opacity="0.7" x="192.5" y="62.5" width="14" height="14" rx="1" />
|
||||
<circle id="Oval-12-Copy-2" fill="#1D39C4" opacity="0.45" cx="21.5" cy="90.5" r="21.5" />
|
||||
<circle id="Oval-12-Copy-3" fill="#1D39C4" opacity="0.35" cx="162.5" cy="163.5" r="14.5" />
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
stroke="#1D39C4"
|
||||
opacity="0.7"
|
||||
transform="translate(77.500000, 287.500000) rotate(30.000000) translate(-77.500000, -287.500000) "
|
||||
@ -104,11 +81,11 @@ const page1Data = [
|
||||
height="10"
|
||||
rx="1"
|
||||
/>
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="164.5" cy="117.5" r="3.5" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="96" cy="2" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="141" cy="36" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="34.5" cy="142.5" r="1.5" />
|
||||
<circle id="Oval-8" stroke="#1D39C4" opacity="0.65" cx="24.5" cy="30.5" r="4.5" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="164.5" cy="117.5" r="3.5" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="96" cy="2" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="141" cy="36" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="34.5" cy="142.5" r="1.5" />
|
||||
<circle stroke="#1D39C4" opacity="0.65" cx="24.5" cy="30.5" r="4.5" />
|
||||
<g
|
||||
id="Group-19"
|
||||
transform="translate(12.000000, 173.000000)"
|
||||
@ -117,7 +94,6 @@ const page1Data = [
|
||||
>
|
||||
<path
|
||||
d="M13.5216765,6.597413 L17.8518036,14.097413 C18.4040883,15.0539982 18.076338,16.2771791 17.1197527,16.8294638 C16.8157143,17.0050005 16.4708261,17.097413 16.1197527,17.097413 L7.45949871,17.097413 C6.35492921,17.097413 5.45949871,16.2019825 5.45949871,15.097413 C5.45949871,14.7463397 5.55191124,14.4014514 5.7274479,14.097413 L10.0575749,6.597413 C10.6098597,5.64082775 11.8330405,5.31307744 12.7896257,5.86536219 C13.0936641,6.04089886 13.3461399,6.29337458 13.5216765,6.597413 Z"
|
||||
id="Polygon-2"
|
||||
transform="translate(11.789626, 11.737989) rotate(40.000000) translate(-11.789626, -11.737989) "
|
||||
/>
|
||||
</g>
|
||||
@ -142,26 +118,16 @@ const page1Data = [
|
||||
>
|
||||
<circle id="Oval-12-Copy-4" fill="#1D39C4" opacity="0.35" cx="77" cy="152" r="10" />
|
||||
<circle id="Oval-12-Copy-5" fill="#1D39C4" opacity="0.45" cx="194.5" cy="74.5" r="20.5" />
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
stroke="#1D39C4"
|
||||
opacity="0.7"
|
||||
x="0.5"
|
||||
y="99.5"
|
||||
width="13"
|
||||
height="13"
|
||||
rx="1"
|
||||
/>
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="44.5" cy="117.5" r="3.5" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="132" cy="2" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="177" cy="36" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="147.5" cy="182.5" r="1.5" />
|
||||
<circle id="Oval-8" stroke="#1D39C4" opacity="0.65" cx="172" cy="182" r="7" />
|
||||
<circle id="Oval-8" stroke="#1D39C4" opacity="0.65" cx="110" cy="280" r="5" />
|
||||
<rect stroke="#1D39C4" opacity="0.7" x="0.5" y="99.5" width="13" height="13" rx="1" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="44.5" cy="117.5" r="3.5" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="132" cy="2" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="177" cy="36" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="147.5" cy="182.5" r="1.5" />
|
||||
<circle stroke="#1D39C4" opacity="0.65" cx="172" cy="182" r="7" />
|
||||
<circle stroke="#1D39C4" opacity="0.65" cx="110" cy="280" r="5" />
|
||||
<g id="Group-20" transform="translate(70.000000, 23.000000)" opacity="0.7" stroke="#1D39C4">
|
||||
<path
|
||||
d="M13.0221683,6.597413 L16.8974466,13.309592 C17.4497314,14.2661772 17.1219811,15.489358 16.1653958,16.0416428 C15.8613574,16.2171794 15.5164692,16.309592 15.1653958,16.309592 L7.41483918,16.309592 C6.31026968,16.309592 5.41483918,15.4141615 5.41483918,14.309592 C5.41483918,13.9585186 5.5072517,13.6136304 5.68278837,13.309592 L9.55806669,6.597413 C10.1103514,5.64082775 11.3335323,5.31307744 12.2901175,5.86536219 C12.5941559,6.04089886 12.8466316,6.29337458 13.0221683,6.597413 Z"
|
||||
id="Polygon-2"
|
||||
transform="translate(11.290118, 11.262929) rotate(40.000000) translate(-11.290118, -11.262929) "
|
||||
/>
|
||||
</g>
|
||||
@ -186,22 +152,13 @@ const page1Data = [
|
||||
>
|
||||
<circle id="Oval-12-Copy-4" fill="#1D39C4" opacity="0.35" cx="71" cy="65" r="10" />
|
||||
<circle id="Oval-12-Copy-5" fill="#1D39C4" opacity="0.45" cx="172.5" cy="154.5" r="20.5" />
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
stroke="#1D39C4"
|
||||
opacity="0.7"
|
||||
x="0.5"
|
||||
y="99.5"
|
||||
width="13"
|
||||
height="13"
|
||||
rx="1"
|
||||
/>
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="44.5" cy="117.5" r="3.5" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.5" cx="132" cy="2" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="39" cy="34" r="2" />
|
||||
<circle id="Path" fill="#1D39C4" opacity="0.6" cx="147.5" cy="182.5" r="1.5" />
|
||||
<circle id="Oval-8" stroke="#1D39C4" opacity="0.65" cx="55" cy="177" r="7" />
|
||||
<circle id="Oval-8" stroke="#1D39C4" opacity="0.65" cx="110" cy="280" r="5" />
|
||||
<rect stroke="#1D39C4" opacity="0.7" x="0.5" y="99.5" width="13" height="13" rx="1" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="44.5" cy="117.5" r="3.5" />
|
||||
<circle fill="#1D39C4" opacity="0.5" cx="132" cy="2" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="39" cy="34" r="2" />
|
||||
<circle fill="#1D39C4" opacity="0.6" cx="147.5" cy="182.5" r="1.5" />
|
||||
<circle stroke="#1D39C4" opacity="0.65" cx="55" cy="177" r="7" />
|
||||
<circle stroke="#1D39C4" opacity="0.65" cx="110" cy="280" r="5" />
|
||||
<g
|
||||
id="Group-21"
|
||||
transform="translate(171.000000, 25.000000)"
|
||||
@ -210,7 +167,6 @@ const page1Data = [
|
||||
>
|
||||
<path
|
||||
d="M12.833668,6.38747836 L16.7089463,13.0996573 C17.2612311,14.0562426 16.9334808,15.2794234 15.9768955,15.8317081 C15.6728571,16.0072448 15.3279688,16.0996573 14.9768955,16.0996573 L7.22633886,16.0996573 C6.12176936,16.0996573 5.22633886,15.2042268 5.22633886,14.0996573 C5.22633886,13.748584 5.31875139,13.4036957 5.49428806,13.0996573 L9.36956638,6.38747836 C9.92185113,5.43089311 11.1450319,5.1031428 12.1016172,5.65542755 C12.4056556,5.83096421 12.6581313,6.08343994 12.833668,6.38747836 Z"
|
||||
id="Polygon-2"
|
||||
transform="translate(11.101617, 11.052994) rotate(40.000000) translate(-11.101617, -11.052994) "
|
||||
/>
|
||||
</g>
|
||||
|
||||
@ -51,15 +51,7 @@ const svgBgChild = [
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
>
|
||||
<g transform="translate(-79.000000, -21.000000)">
|
||||
<circle
|
||||
id="Oval-13"
|
||||
stroke="none"
|
||||
fill="#EBEDF0"
|
||||
fillRule="evenodd"
|
||||
cx="98.5"
|
||||
cy="98.5"
|
||||
r="98.5"
|
||||
/>
|
||||
<circle stroke="none" fill="#EBEDF0" fillRule="evenodd" cx="98.5" cy="98.5" r="98.5" />
|
||||
<rect
|
||||
id="Rectangle-33"
|
||||
stroke="none"
|
||||
@ -72,18 +64,9 @@ const svgBgChild = [
|
||||
height="300"
|
||||
rx="1"
|
||||
/>
|
||||
<circle
|
||||
id="Oval-13"
|
||||
stroke="#EBEDF0"
|
||||
strokeWidth="16"
|
||||
fill="none"
|
||||
cx="1402"
|
||||
cy="151"
|
||||
r="70"
|
||||
/>
|
||||
<circle stroke="#EBEDF0" strokeWidth="16" fill="none" cx="1402" cy="151" r="70" />
|
||||
<path
|
||||
d="M385.032144,960.394832 L394.316344,976.475539 C394.868629,977.432124 394.540879,978.655305 393.584293,979.20759 C393.280255,979.383126 392.935367,979.475539 392.584293,979.475539 L374.015893,979.475539 C372.911323,979.475539 372.015893,978.580108 372.015893,977.475539 C372.015893,977.124466 372.108305,976.779577 372.283842,976.475539 L381.568042,960.394832 C382.120327,959.438247 383.343508,959.110497 384.300093,959.662781 C384.604131,959.838318 384.856607,960.090794 385.032144,960.394832 Z"
|
||||
id="Polygon-2"
|
||||
stroke="none"
|
||||
fill="#A3B1BF"
|
||||
fillRule="evenodd"
|
||||
@ -91,7 +74,6 @@ const svgBgChild = [
|
||||
/>
|
||||
<path
|
||||
d="M545.537489,211.431472 L552.545207,223.569196 C553.097492,224.525781 552.769741,225.748962 551.813156,226.301246 C551.509118,226.476783 551.164229,226.569196 550.813156,226.569196 L536.79772,226.569196 C535.693151,226.569196 534.79772,225.673765 534.79772,224.569196 C534.79772,224.218122 534.890133,223.873234 535.06567,223.569196 L542.073387,211.431472 C542.625672,210.474887 543.848853,210.147137 544.805438,210.699421 C545.109477,210.874958 545.361952,211.127434 545.537489,211.431472 Z"
|
||||
id="Polygon-2"
|
||||
stroke="none"
|
||||
fill="#A3B1BF"
|
||||
fillRule="evenodd"
|
||||
@ -114,8 +96,8 @@ const svgBgChild = [
|
||||
<g id="Group-29" transform="translate(283.000000, 920.000000)" fill="#2F54EB">
|
||||
<image xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/VrADJaRPMnFjmtmIhObV.svg" />
|
||||
</g>
|
||||
<circle id="Oval-8" stroke="#13C2C2" strokeWidth="4" opacity="0.95" cx="1096" cy="11" r="11" />
|
||||
<circle id="Oval-8" stroke="#13C2C2" strokeWidth="4" cx="11" cy="667" r="11" />
|
||||
<circle stroke="#13C2C2" strokeWidth="4" opacity="0.95" cx="1096" cy="11" r="11" />
|
||||
<circle stroke="#13C2C2" strokeWidth="4" cx="11" cy="667" r="11" />
|
||||
<g id="Group-11" transform="translate(1207.000000, 419.000000)" fill="#13C2C2">
|
||||
<image xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/MnLEmwjipfhzPUmBJnJE.svg" />
|
||||
</g>
|
||||
|
||||
@ -30,16 +30,15 @@ const page3Data = [
|
||||
];
|
||||
|
||||
const svgBg = [
|
||||
<circle id="Oval-8" stroke="#13C2C2" cx="530" cy="195" r="5" />,
|
||||
<circle id="Oval-8" fillOpacity="0.4" fill="#9EE6E6" cx="606" cy="76" r="3" />,
|
||||
<circle id="Oval-8" stroke="#13C2C2" cx="165" cy="540" r="5" />,
|
||||
<circle id="Oval-8" stroke="#CED4D9" cx="701.5" cy="650" r="3.5" />,
|
||||
<circle id="Oval-8" stroke="#F5222D" cx="526.5" cy="381.5" r="3.5" />,
|
||||
<circle id="Oval-8" fillOpacity="0.4" fill="#9EE6E6" cx="944" cy="251" r="5" />,
|
||||
<circle stroke="#13C2C2" cx="530" cy="195" r="5" />,
|
||||
<circle fillOpacity="0.4" fill="#9EE6E6" cx="606" cy="76" r="3" />,
|
||||
<circle stroke="#13C2C2" cx="165" cy="540" r="5" />,
|
||||
<circle stroke="#CED4D9" cx="701.5" cy="650" r="3.5" />,
|
||||
<circle stroke="#F5222D" cx="526.5" cy="381.5" r="3.5" />,
|
||||
<circle fillOpacity="0.4" fill="#9EE6E6" cx="944" cy="251" r="5" />,
|
||||
<g transform="translate(0, 180)">
|
||||
<path
|
||||
d="M1182.79367,448.230356 L1186.00213,453.787581 C1186.55442,454.744166 1186.22667,455.967347 1185.27008,456.519632 C1184.96604,456.695168 1184.62116,456.787581 1184.27008,456.787581 L1177.85315,456.787581 C1176.74858,456.787581 1175.85315,455.89215 1175.85315,454.787581 C1175.85315,454.436507 1175.94556,454.091619 1176.1211,453.787581 L1179.32957,448.230356 C1179.88185,447.273771 1181.10503,446.946021 1182.06162,447.498305 C1182.36566,447.673842 1182.61813,447.926318 1182.79367,448.230356 Z"
|
||||
id="Polygon-2"
|
||||
stroke="#CED4D9"
|
||||
transform="translate(1181.061784, 452.008801) rotate(40.000000) translate(-1181.061784, -452.008801) "
|
||||
/>
|
||||
@ -47,13 +46,11 @@ const svgBg = [
|
||||
<g transform="translate(0, 100)">
|
||||
<path
|
||||
d="M1376.79367,204.230356 L1380.00213,209.787581 C1380.55442,210.744166 1380.22667,211.967347 1379.27008,212.519632 C1378.96604,212.695168 1378.62116,212.787581 1378.27008,212.787581 L1371.85315,212.787581 C1370.74858,212.787581 1369.85315,211.89215 1369.85315,210.787581 C1369.85315,210.436507 1369.94556,210.091619 1370.1211,209.787581 L1373.32957,204.230356 C1373.88185,203.273771 1375.10503,202.946021 1376.06162,203.498305 C1376.36566,203.673842 1376.61813,203.926318 1376.79367,204.230356 Z"
|
||||
id="Polygon-2"
|
||||
stroke="#2F54EB"
|
||||
transform="translate(1375.061784, 208.008801) rotate(40.000000) translate(-1375.061784, -208.008801) "
|
||||
/>
|
||||
</g>,
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
strokeOpacity="0.4"
|
||||
stroke="#1D39C4"
|
||||
transform="translate(949.801502, 129.801502) rotate(30.000000) translate(-949.801502, -129.801502) "
|
||||
@ -64,7 +61,6 @@ const svgBg = [
|
||||
rx="1"
|
||||
/>,
|
||||
<rect
|
||||
id="Rectangle-14"
|
||||
stroke="#CED4D9"
|
||||
transform="translate(111.673081, 158.673081) rotate(30.000000) translate(-111.673081, -158.673081) "
|
||||
x="107.288047"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user