From 415fa383e3854b19f92426c632e8065a2457a65d Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 22 Oct 2015 21:01:52 +0800 Subject: [PATCH] unify all size prop to: large default small --- components/button/button-group.jsx | 10 +++++++++- components/button/button.jsx | 9 ++++++++- components/button/demo/button-group.md | 6 +++--- components/button/demo/size.md | 6 +++--- components/button/index.md | 2 +- components/pagination/demo/mini.md | 2 +- components/pagination/index.jsx | 6 +++++- components/pagination/index.md | 2 +- components/select/index.jsx | 3 ++- components/select/index.md | 2 +- components/table/index.jsx | 2 +- components/table/index.md | 2 +- components/tabs/demo/size.md | 2 +- components/tabs/index.jsx | 4 ++-- 14 files changed, 39 insertions(+), 19 deletions(-) diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx index d4c94effca..4fa7390a3a 100644 --- a/components/button/button-group.jsx +++ b/components/button/button-group.jsx @@ -6,9 +6,17 @@ const prefix = 'ant-btn-group-'; export default class ButtonGroup extends React.Component { render() { const {size, className, ...others} = this.props; + + // large => lg + // small => sm + const sizeCls = ({ + 'large': 'lg', + 'small': 'sm' + })[size] || ''; + const classes = rcUtil.classSet({ 'ant-btn-group': true, - [prefix + size]: size, + [prefix + sizeCls]: sizeCls, [className]: className }); diff --git a/components/button/button.jsx b/components/button/button.jsx index ec365a8213..352cfa9f56 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -28,11 +28,18 @@ export default class Button extends React.Component { const props = this.props; const {type, shape, size, onClick, className, htmlType, children, ...others} = props; + // large => lg + // small => sm + const sizeCls = ({ + 'large': 'lg', + 'small': 'sm' + })[size] || ''; + const classes = rcUtil.classSet({ 'ant-btn': true, [prefix + type]: type, [prefix + shape]: shape, - [prefix + size]: size, + [prefix + sizeCls]: sizeCls, [prefix + 'loading']: ('loading' in props && props.loading !== false), [className]: className }); diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md index def363d9c4..ff57244d4b 100644 --- a/components/button/demo/button-group.md +++ b/components/button/demo/button-group.md @@ -4,7 +4,7 @@ 可以将多个 `Button` 放入 `ButtonGroup` 的容器中。 -通过设置 `size` 为 `lg` `sm` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。 +通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。 --- @@ -64,7 +64,7 @@ ReactDOM.render(

尺寸

- + @@ -74,7 +74,7 @@ ReactDOM.render(
- + diff --git a/components/button/demo/size.md b/components/button/demo/size.md index 4e0695a99a..7c6e70946d 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -4,7 +4,7 @@ 按钮有大、中、小三种尺寸。 -通过设置 `size` 为 `lg` `sm` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。 +通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。 --- @@ -12,9 +12,9 @@ var Button = antd.Button; ReactDOM.render(
- + - +
, document.getElementById('components-button-demo-size')); ```` diff --git a/components/button/index.md b/components/button/index.md index 39a33002af..44163c0143 100644 --- a/components/button/index.md +++ b/components/button/index.md @@ -24,7 +24,7 @@ type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button` shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined -size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined +size | 设置按钮大小，可选值为 `small` `large` 或者不设 | Enum | undefined loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false onClick | `click` 事件的 handler | Function | `function() {}` diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md index ebabf3351f..d9f5182db5 100644 --- a/components/pagination/demo/mini.md +++ b/components/pagination/demo/mini.md @@ -14,6 +14,6 @@ function onChange(page) { } ReactDOM.render( - , + , document.getElementById('components-pagination-demo-mini')); ```` diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 1d83308545..f51230c115 100644 --- a/components/pagination/index.jsx +++ b/components/pagination/index.jsx @@ -6,9 +6,13 @@ const prefixCls = 'ant-pagination'; export default class AntPagination extends React.Component { render() { + let className = this.props.className; + if (this.props.size === 'small') { + className += ' mini'; + } return ; + {...this.props} className={className} />; } } diff --git a/components/pagination/index.md b/components/pagination/index.md index 66059abb4e..13db48135a 100644 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -28,5 +28,5 @@ | showSizeChanger | 是否可以改变 pageSize | Bool | false | | onShowSizeChange | pageSize 变化的回调 | Function | noop | | showQuickJumper | 是否可以快速跳转至某页 | Bool | false | -| className | 当为「mini」时，是小尺寸分页 | String | ant-pagination | +| size | 当为「small」时，是小尺寸分页 | String | "" | | simple | 当添加该属性时，显示为简单分页 | Object | 无 | diff --git a/components/select/index.jsx b/components/select/index.jsx index e113c3d127..f29c4a06e1 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -7,7 +7,8 @@ let AntSelect = React.createClass({ prefixCls: 'ant-select', transitionName: 'slide-up', optionLabelProp: 'children', - showSearch: false + showSearch: false, + size: 'default' }; }, render() { diff --git a/components/select/index.md b/components/select/index.md index 4abd1515af..af8f991158 100644 --- a/components/select/index.md +++ b/components/select/index.md @@ -37,7 +37,7 @@ | searchPlaceholder | 搜索框默认文字 | string | 无 | | optionFilterProp | 输入项过滤对应的 option 属性 | string | value | | combobox | 输入框自动提示模式 | | false | -| size | 选择框大小 | String | 无 | +| size | 选择框大小，可选 `large` `small` | String | default | ### Option props diff --git a/components/table/index.jsx b/components/table/index.jsx index e53e17f99a..756a6399bc 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -65,7 +65,7 @@ let AntTable = React.createClass({ useFixedHeader: false, rowSelection: null, className: '', - size: 'normal', + size: 'default', bordered: false, onChange: function () { } diff --git a/components/table/index.md b/components/table/index.md index fe3656dc91..4f851d3045 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -63,7 +63,7 @@ var dataSource = new Table.DataSource({ |---------------|--------------------------|-----------------|---------------------|---------| | rowSelection | 列表项是否可选择 | Object | | false | | pagination | 分页器 | Object | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 | | -| size | 正常或迷你类型 | String | `normal` or `small` | normal | +| size | 正常或迷你类型 | String | `default` or `small`| default | | dataSource | 数据源，可以为数组（本地模式）或一个数据源描述对象（远程模式） | Array or Object | | | | columns | 表格列的配置描述，具体项见下表 | Array | | 无 | | rowKey | 表格列 key 的取值 | Function(recode, index):string | | record.key | diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md index b6a632a4dd..3f65ac135d 100644 --- a/components/tabs/demo/size.md +++ b/components/tabs/demo/size.md @@ -11,7 +11,7 @@ var Tabs = antd.Tabs; var TabPane = Tabs.TabPane; ReactDOM.render( - + 选项卡一内容 选项卡二内容 选项卡三内容 diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx index be2ce808ba..c279a17548 100644 --- a/components/tabs/index.jsx +++ b/components/tabs/index.jsx @@ -5,7 +5,7 @@ const prefixCls = 'ant-tabs'; class AntTabs extends React.Component { render() { let className = (this.props.className || ''); - if (this.props.size === 'mini') { + if (this.props.size === 'small' || this.props.size === 'mini') { className += ' ' + prefixCls + '-mini'; } if (this.props.tabPosition === 'left' || this.props.tabPosition === 'right') { @@ -17,7 +17,7 @@ class AntTabs extends React.Component { AntTabs.defaultProps = { prefixCls: prefixCls, - size: 'normal' + size: 'default' }; AntTabs.TabPane = Tabs.TabPane;