diff --git a/CHANGELOG.md b/CHANGELOG.md index f5906507ed..d41e9f2086 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,20 @@ --- +## 0.11.2 `fixing` + +- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。 +- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771) +- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。 +- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu) +- Table + - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。 + - 更新 dataSource 时，选中项现在会被清空。 + - 修复一个全选框和禁用的选择项配合的问题。 +- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。 +- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。 +- 组件和文档的样式小调整。 + ## 0.11.1 `2015-12-29` - 修复一个 Table 无法修改 pageSize 的问题。 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7c6f5b9990..4dfa808ad4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,7 +32,7 @@ P.S. ## Providing a demo while reporting a bug -It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/9zrstuto/70/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug. +It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/0dso5y0x/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug. ## Tips about Feature Request diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md new file mode 100644 index 0000000000..841d9f86b8 --- /dev/null +++ b/components/dropdown/demo/sub-menu.md @@ -0,0 +1,29 @@ +# 多级菜单 + +- order: 5 + +传入的菜单里有多个层级。 + +--- + +````jsx +import { Menu, Dropdown, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; + +const menu = + 第一个菜单项 + 第二个菜单项 + + 第三个菜单项 + 第四个菜单项 + +; + +ReactDOM.render( + + + 多级菜单 + + +, mountNode); +```` diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index adf393555a..1c44242cfa 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -9,8 +9,12 @@ export default React.createClass({ }; }, render: function () { + const { overlay, ...otherProps } = this.props; + const menu = React.cloneElement(overlay, { + openTransitionName: 'zoom-big', + }); return ( - + ); } }); diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index b1ac4660f2..724bbabae6 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -108,6 +108,7 @@ class FormItem extends React.Component { const itemClassName = { [`${prefixCls}-item`]: true, [`${prefixCls}-item-compact`]: this._isCompact(props.children), + [`${prefixCls}-item-with-help`]: !!props.help, }; return ( diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 6ecfd53f40..64ee51e626 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -120,13 +120,13 @@ const Demo = React.createClass({ + wrapperCol={{span: 16}} + help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长"> -

仅支持上传一张。

 diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 15c2208f5c..ccad718e30 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -40,35 +40,43 @@ const AntMenu = React.createClass({ this.props.onClose(e); }, render() { - let openAnimation = ''; - switch (this.props.mode) { - case 'horizontal': - openAnimation = 'slide-up'; - break; - case 'vertical': - openAnimation = 'zoom-big'; - break; - case 'inline': - openAnimation = animation; - break; - default: + let openAnimation = this.props.openAnimation || this.props.openTransitionName; + if (!openAnimation) { + switch (this.props.mode) { + case 'horizontal': + openAnimation = 'slide-up'; + break; + case 'vertical': + openAnimation = 'zoom-big'; + break; + case 'inline': + openAnimation = animation; + break; + default: + } } - // 这组属性的目的是 - // 弹出型的菜单需要点击后立即关闭 - // 另外，弹出型的菜单的受控模式没有使用场景 - let props = { - openKeys: this.state.openKeys, - onClick: this.handleClick, - onOpen: this.handleOpenKeys, - onClose: this.handleCloseKeys, - }; + let props = {}; const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme; - if (this.props.mode === 'inline') { - return ; + if (this.props.mode !== 'inline') { + // 这组属性的目的是 + // 弹出型的菜单需要点击后立即关闭 + // 另外，弹出型的菜单的受控模式没有使用场景 + props = { + openKeys: this.state.openKeys, + onClick: this.handleClick, + onOpen: this.handleOpenKeys, + onClose: this.handleCloseKeys, + openTransitionName: openAnimation, + className, + }; } else { - return ; + props = { + openAnimation, + className, + }; } + return ; } }); diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index cfe89f6525..9505a04464 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -45,10 +45,10 @@ const App = React.createClass({ return ; }); return
- {provinceOptions} - {cityOptions}
; diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md new file mode 100644 index 0000000000..eb23cc632c --- /dev/null +++ b/components/table/demo/row-selection-and-operation.md @@ -0,0 +1,75 @@ +# 选择和操作 + +- order: 4 + +选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。 + +不支持跨页选择，选中项只限当页，换页后将会清空。 + +--- + +````jsx +import { Table, Button } from 'antd'; + +const columns = [{ + title: '姓名', + dataIndex: 'name', +}, { + title: '年龄', + dataIndex: 'age', +}, { + title: '住址', + dataIndex: 'address', +}]; + +const data = []; +for (let i = 0; i < 46; i++) { + data.push({ + key: i, + name: '李大嘴' + i, + age: 32, + address: '西湖区湖底公园' + i + '号' + }); +} + +const App = React.createClass({ + getInitialState() { + return { + selectedRowKeys: [], + loading: false, + }; + }, + start() { + this.setState({ loading: true }); + // 模拟 ajax 请求，完成后清空 + setTimeout(() => { + this.setState({ + selectedRowKeys: [], + loading: false, + }); + }, 1000); + }, + onSelectChange(selectedRowKeys) { + console.log('selectedRowKeys changed: ' + selectedRowKeys); + this.setState({ selectedRowKeys }); + }, + render() { + const { loading, selectedRowKeys } = this.state; + const rowSelection = { + selectedRowKeys, + onChange: this.onSelectChange, + }; + const hasSelected = selectedRowKeys.length > 0; + return
+
+ + {hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''} +
+ + ; + } +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md index 7740a541a3..cfe6473a09 100644 --- a/components/table/demo/row-selection-props.md +++ b/components/table/demo/row-selection-props.md @@ -47,12 +47,15 @@ const rowSelection = { disabled: record.name === '胡彦祖' // 配置无法勾选的列 }; }, + onChange(selectedRowKeys) { + console.log('selectedRowKeys changed: ' + selectedRowKeys); + }, onSelect: function(record, selected, selectedRows) { console.log(record, selected, selectedRows); }, onSelectAll: function(selected, selectedRows) { console.log(selected, selectedRows); - } + }, }; ReactDOM.render(
diff --git a/components/table/demo/row-selection-radio-props.md b/components/table/demo/row-selection-radio-props.md deleted file mode 100644 index d8fa9578dd..0000000000 --- a/components/table/demo/row-selection-radio-props.md +++ /dev/null @@ -1,65 +0,0 @@ -# 单选 - -- order: 4 - -配置单选框的默认属性。 - ---- - -````jsx -import { Table } from 'antd'; - -const columns = [{ - title: '姓名', - dataIndex: 'name', - render: function(text) { - return {text}; - } -}, { - title: '年龄', - dataIndex: 'age' -}, { - title: '住址', - dataIndex: 'address' -}]; -const data = [{ - id: '1', - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号' -}, { - id: '2', - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号' -}, { - id: '3', - name: '李大嘴', - age: 32, - address: '西湖区湖底公园1号' -}]; - -// 通过 rowSelection 对象表明需要行选择 -const rowSelection = { - type: 'radio', - getCheckboxProps: function(record) { - return { - defaultChecked: record.name === '李大嘴', // 配置默认勾选的列 - disabled: record.name === '胡彦祖' // 配置无法勾选的列 - }; - }, - onSelect: function(record, selected, selectedRows) { - console.log(record, selected, selectedRows); - }, - onSelectAll: function(selected, selectedRows) { - console.log(selected, selectedRows); - } -}; - -function rowKey(record) { - return record.id; -} - -ReactDOM.render(
-, mountNode); -```` diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 17e2d59335..980f4bd019 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -41,6 +41,9 @@ const data = [{ // 通过 rowSelection 对象表明需要行选择 const rowSelection = { + onChange(selectedRowKeys) { + console.log('selectedRowKeys changed: ' + selectedRowKeys); + }, onSelect: function(record, selected, selectedRows) { console.log(record, selected, selectedRows); }, diff --git a/components/table/index.jsx b/components/table/index.jsx index 0bcbcbbaba..c2c0e73049 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -23,7 +23,7 @@ let AntTable = React.createClass({ getInitialState() { return { // 减少状态 - selectedRowKeys: [], + selectedRowKeys: this.props.selectedRowKeys || [], filters: {}, selectionDirty: false, sortColumn: '', @@ -67,19 +67,12 @@ let AntTable = React.createClass({ }, getDefaultSelection() { - let selectedRowKeys = []; - if (this.props.rowSelection && this.props.rowSelection.getCheckboxProps) { - let data = this.getCurrentPageData(); - data.filter((item) => { - if (this.props.rowSelection.getCheckboxProps) { - return this.props.rowSelection.getCheckboxProps(item).defaultChecked; - } - return true; - }).map((record, rowIndex) => { - selectedRowKeys.push(this.getRecordKey(record, rowIndex)); - }); + if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) { + return []; } - return selectedRowKeys; + return this.getCurrentPageData() + .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked) + .map((record, rowIndex) => this.getRecordKey(record, rowIndex)); }, componentWillReceiveProps(nextProps) { @@ -88,22 +81,29 @@ let AntTable = React.createClass({ pagination: objectAssign({}, this.state.pagination, nextProps.pagination) }); } - // 外界只有 dataSource 的变化会触发新请求 + // dataSource 的变化会清空选中项 if ('dataSource' in nextProps && nextProps.dataSource !== this.props.dataSource) { - let selectedRowKeys = this.state.selectedRowKeys; - // 把不在当前页的选中项去掉 - let currentPageRowKeys = - this.getCurrentPageData(nextProps.dataSource).map( - (record, i) => this.getRecordKey(record, i) - ); - selectedRowKeys = selectedRowKeys.filter((key) => { - return currentPageRowKeys.indexOf(key) >= 0; - }); this.setState({ selectionDirty: false, - selectedRowKeys, }); + this.setSelectedRowKeys([]); + } + if (nextProps.rowSelection && + 'selectedRowKeys' in nextProps.rowSelection) { + this.setState({ + selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [], + }); + } + }, + + setSelectedRowKeys(selectedRowKeys) { + if (this.props.rowSelection && + !('selectedRowKeys' in this.props.rowSelection)) { + this.setState({ selectedRowKeys }); + } + if (this.props.rowSelection && this.props.rowSelection.onChange) { + this.props.rowSelection.onChange(selectedRowKeys); } }, @@ -159,20 +159,17 @@ let AntTable = React.createClass({ } }); const newState = { - selectedRowKeys: [], selectionDirty: false, filters }; this.setState(newState); + this.setSelectedRowKeys([]); this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); }, handleSelect(record, rowIndex, e) { - let checked = e.target.checked; - let defaultSelection = []; - if (!this.state.selectionDirty) { - defaultSelection = this.getDefaultSelection(); - } + const checked = e.target.checked; + const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); let key = this.getRecordKey(record, rowIndex); if (checked) { @@ -183,9 +180,9 @@ let AntTable = React.createClass({ }); } this.setState({ - selectedRowKeys: selectedRowKeys, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { let data = this.getCurrentPageData(); let selectedRows = data.filter((row, i) => { @@ -196,19 +193,16 @@ let AntTable = React.createClass({ }, handleRadioSelect: function (record, rowIndex, e) { - let checked = e.target.checked; - let defaultSelection = []; - if (!this.state.selectionDirty) { - defaultSelection = this.getDefaultSelection(); - } + const checked = e.target.checked; + const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); let key = this.getRecordKey(record, rowIndex); selectedRowKeys = [key]; this.setState({ - selectedRowKeys: selectedRowKeys, radioIndex: key, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { let data = this.getCurrentPageData(); let selectedRows = data.filter((row, i) => { @@ -219,20 +213,31 @@ let AntTable = React.createClass({ }, handleSelectAllRow(e) { - let checked = e.target.checked; - let data = this.getCurrentPageData(); - let selectedRowKeys = checked ? data.filter((item) => { - if (this.props.rowSelection.getCheckboxProps) { - return !this.props.rowSelection.getCheckboxProps(item).disabled; - } - return true; - }).map((item, i) => { - return this.getRecordKey(item, i); - }) : []; + const checked = e.target.checked; + const data = this.getCurrentPageData(); + const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); + const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); + const changableRowKeys = data.filter(item => + !this.props.rowSelection.getCheckboxProps || + !this.props.rowSelection.getCheckboxProps(item).disabled + ).map((item, i) => this.getRecordKey(item, i)); + if (checked) { + changableRowKeys.forEach(key => { + if (selectedRowKeys.indexOf(key) < 0) { + selectedRowKeys.push(key); + } + }); + } else { + changableRowKeys.forEach(key => { + if (selectedRowKeys.indexOf(key) >= 0) { + selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1); + } + }); + } this.setState({ - selectedRowKeys: selectedRowKeys, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelectAll) { let selectedRows = data.filter((row, i) => { return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; @@ -249,12 +254,11 @@ let AntTable = React.createClass({ pagination.current = pagination.current || 1; } const newState = { - // 防止内存泄漏，只维持当页 - selectedRowKeys: [], selectionDirty: false, pagination }; this.setState(newState); + this.setSelectedRowKeys([]); this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); }, @@ -333,7 +337,14 @@ let AntTable = React.createClass({ className: 'ant-table-selection-column' }; } else { - let checkboxAll = ; + const checkboxAllDisabled = data.every(item => + this.props.rowSelection.getCheckboxProps && + this.props.rowSelection.getCheckboxProps(item).disabled); + const checkboxAll = ( + + ); selectionColumn = { key: 'selection-column', title: checkboxAll, diff --git a/components/table/index.md b/components/table/index.md index c186449016..baf7ccfc9f 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -54,9 +54,9 @@ const columns = [{ ### Table -| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------------|--------------------------|-----------------|---------------------|---------| -| rowSelection | 列表项是否可选择 | Object | | false | +| rowSelection | 列表项是否可选择 | Object | [配置项](#rowSelection) | null | | pagination | 分页器 | Object | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 | | | size | 正常或迷你类型 | String | `default` or `small`| default | | dataSource | 数据数组 | Array | | | @@ -87,6 +87,20 @@ const columns = [{ | width | 列宽度 | String or Number | | 无 | | className | 列的 className | String | | 无 | +### rowSelection + +选择功能的配置。 + +| 参数 | 说明 | 类型 | 默认值 | +|------------------|--------------------------|-----------------|---------------------|---------| +| type | 多选/单选，`checkbox` or `radio` | String | `checkbox` | +| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | [] | +| onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | - | +| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | +| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - | +| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(record, selected, selectedRows) | - | + + ## 注意 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。 diff --git a/docs/getting-started.md b/docs/getting-started.md index 19f2f15fe6..3284ffc4e1 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -11,7 +11,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。 -- [antd JSFiddle](http://jsfiddle.net/9zrstuto/70/) +- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/) ## 标准开发 @@ -63,7 +63,7 @@ const App = React.createClass({ }, render() { return
- +
当前日期：{this.state.date.toString()}
; } diff --git a/package.json b/package.json index 8cf16bb4f6..b91bfbf839 100644 --- a/package.json +++ b/package.json @@ -102,10 +102,10 @@ "lodash": "^3.10.0", "nico-jsx": "~0.7.0", "pre-commit": "1.x", - "react": "~0.14.5", - "react-addons-test-utils": "~0.14.5", + "react": "0.14.x", + "react-addons-test-utils": "0.14.x", "react-copy-to-clipboard": "^3.0.4", - "react-dom": "~0.14.5", + "react-dom": "0.14.x", "react-router": "~1.0.3", "react-stateless-wrapper": "~1.0.2", "reqwest": "~2.0.5", diff --git a/site/static/style.css b/site/static/style.css index 51be095263..6f86ef9108 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -584,6 +584,7 @@ footer ul li > a { .markdown pre { border-radius: 6px; + background: #f9f9f9; } .markdown pre code { @@ -1710,11 +1711,12 @@ footer ul li > a { width: 48%; display: inline-block; vertical-align: top; - padding-right: 15px; + padding-right: 8px; } .code-boxes-col-2-1:last-child { padding-right: 0; + padding-left: 8px; } .code-box { diff --git a/style/components/dropdown.less b/style/components/dropdown.less index 3aab30681a..3603f28376 100644 --- a/style/components/dropdown.less +++ b/style/components/dropdown.less @@ -30,7 +30,8 @@ } } - &-hidden { + &-hidden, + &-menu-hidden { display: none; } @@ -46,15 +47,11 @@ box-shadow: @box-shadow-base; background-clip: padding-box; border: 1px solid @border-color-base; - overflow: hidden; - > li { - margin: 0; - padding: 0; - } - - & > &-item { + &-item, + &-submenu-title { padding: 7px 15px; + margin: 0; clear: both; font-size: 12px; font-weight: normal; @@ -86,14 +83,12 @@ } } - &:last-child { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + &:first-child { + border-radius: @border-radius-base @border-radius-base 0 0; } - &:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; + &:last-child { + border-radius: 0 0 @border-radius-base @border-radius-base; } &-divider { @@ -103,6 +98,36 @@ line-height: 0; } } + + &-submenu-title:after { + font-family: "anticon" !important; + position: absolute; + content: "\e600"; + right: 15px; + color: #999; + .iconfont-size-under-12px(8px); + } + + &-submenu-vertical { + position: relative; + } + + &-submenu-vertical > & { + top: 0; + left: 100%; + position: absolute; + min-width: 100%; + margin-left: 4px; + transform-origin: 0 0; + } + + &-submenu:first-child &-submenu-title { + border-radius: @border-radius-base @border-radius-base 0 0; + } + + &-submenu:last-child &-submenu-title { + border-radius: 0 0 @border-radius-base @border-radius-base; + } } &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, diff --git a/style/components/form.less b/style/components/form.less index dd95fc3724..6e9466140d 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -71,6 +71,10 @@ input[type="checkbox"] { margin-bottom: @form-item-margin-bottom; color: #666; + &.@{css-prefix}form-item-with-help { + margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base; + } + > label { color: @label-color; text-align: right; @@ -104,10 +108,7 @@ input[type="checkbox"] { } .@{css-prefix}form-explain { - position: absolute; - font-size: @font-size-base; - line-height: @line-height-base; - bottom: -@line-height-computed; + float: left; } diff --git a/style/components/select.less b/style/components/select.less index 7e2fefe422..cf273624e1 100644 --- a/style/components/select.less +++ b/style/components/select.less @@ -377,6 +377,8 @@ color: #666; white-space: nowrap; cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; overflow: hidden; transition: background 0.3s ease;