From 9b5082fee975d09ac99d5a7670675972f9d1a2ac Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Wed, 13 Mar 2019 09:38:54 +0800 Subject: [PATCH] feat: update breadcrumb && button --- components/breadcrumb/Breadcrumb.jsx | 11 +++++-- components/breadcrumb/BreadcrumbItem.jsx | 11 +++++-- components/button/button-group.jsx | 39 +++++++++++++++--------- components/button/button.jsx | 21 +++++++++---- components/button/buttonTypes.js | 4 +-- components/button/demo/basic.md | 4 +++ components/button/demo/size.md | 3 +- components/button/index.en-US.md | 9 +++++- components/button/index.zh-CN.md | 11 +++++-- 9 files changed, 83 insertions(+), 30 deletions(-) diff --git a/components/breadcrumb/Breadcrumb.jsx b/components/breadcrumb/Breadcrumb.jsx index 858cdf8bf..9a7ed20e1 100644 --- a/components/breadcrumb/Breadcrumb.jsx +++ b/components/breadcrumb/Breadcrumb.jsx @@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types'; import { cloneElement } from '../_util/vnode'; import { filterEmpty, getComponentFromProp, getSlotOptions } from '../_util/props-util'; import warning from '../_util/warning'; +import { ConfigConsumerProps } from '../config-provider'; import BreadcrumbItem from './BreadcrumbItem'; const Route = PropTypes.shape({ @@ -10,7 +11,7 @@ const Route = PropTypes.shape({ }).loose; const BreadcrumbProps = { - prefixCls: PropTypes.string.def('ant-breadcrumb'), + prefixCls: PropTypes.string, routes: PropTypes.arrayOf(Route), params: PropTypes.any, separator: PropTypes.any, @@ -32,6 +33,9 @@ function getBreadcrumbName(route, params) { export default { name: 'ABreadcrumb', props: BreadcrumbProps, + inject: { + configProvider: { default: () => ({}) }, + }, methods: { defaultItemRender({ route, params, routes, paths }) { const isLastItem = routes.indexOf(route) === routes.length - 1; @@ -41,7 +45,10 @@ export default { }, render() { let crumbs; - const { prefixCls, routes, params = {}, $slots, $scopedSlots } = this; + const { prefixCls: customizePrefixCls, routes, params = {}, $slots, $scopedSlots } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); + const children = filterEmpty($slots.default); const separator = getComponentFromProp(this, 'separator'); if (routes && routes.length > 0) { diff --git a/components/breadcrumb/BreadcrumbItem.jsx b/components/breadcrumb/BreadcrumbItem.jsx index ae85a36fa..eb5bd902c 100644 --- a/components/breadcrumb/BreadcrumbItem.jsx +++ b/components/breadcrumb/BreadcrumbItem.jsx @@ -1,16 +1,23 @@ import PropTypes from '../_util/vue-types'; import { hasProp, getComponentFromProp } from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; export default { name: 'ABreadcrumbItem', __ANT_BREADCRUMB_ITEM: true, props: { - prefixCls: PropTypes.string.def('ant-breadcrumb'), + prefixCls: PropTypes.string, href: PropTypes.string, separator: PropTypes.any, }, + inject: { + configProvider: { default: () => ({}) }, + }, render() { - const { prefixCls, $slots } = this; + const { prefixCls: customizePrefixCls, $slots } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); + const children = $slots.default; let link; if (hasProp(this, 'href')) { diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx index 126b49b69..9c5351dc5 100644 --- a/components/button/button-group.jsx +++ b/components/button/button-group.jsx @@ -1,7 +1,8 @@ import { filterEmpty } from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; + const ButtonGroupProps = { prefixCls: { - default: 'ant-btn-group', type: String, }, size: { @@ -14,6 +15,9 @@ export { ButtonGroupProps }; export default { name: 'AButtonGroup', props: ButtonGroupProps, + inject: { + configProvider: { default: () => ({}) }, + }, data() { return { sizeMap: { @@ -22,20 +26,27 @@ export default { }, }; }, - computed: { - classes() { - const { prefixCls, size, sizeMap } = this; - const sizeCls = sizeMap[size] || ''; - return [ - { - [`${prefixCls}`]: true, - [`${prefixCls}-${sizeCls}`]: sizeCls, - }, - ]; - }, - }, render() { - const { classes, $slots } = this; + const { prefixCls: customizePrefixCls, size, sizeMap, $slots } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('btn-group', customizePrefixCls); + + // large => lg + // small => sm + let sizeCls = ''; + switch (size) { + case 'large': + sizeCls = 'lg'; + break; + case 'small': + sizeCls = 'sm'; + default: + break; + } + const classes = { + [`${prefixCls}`]: true, + [`${prefixCls}-${sizeCls}`]: sizeCls, + }; return
{filterEmpty($slots.default)}
; }, }; diff --git a/components/button/button.jsx b/components/button/button.jsx index 3c9355e8a..697c6a09e 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -1,22 +1,26 @@ import Wave from '../_util/wave'; import Icon from '../icon'; -const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; -const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); import buttonTypes from './buttonTypes'; import { filterEmpty } from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; + +const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; +const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); const props = buttonTypes(); export default { name: 'AButton', inheritAttrs: false, __ANT_BUTTON: true, props, + inject: { + configProvider: { default: () => ({}) }, + }, data() { return { sizeMap: { large: 'lg', small: 'sm', }, - // clicked: false, sLoading: !!this.loading, hasTwoCNChar: false, }; @@ -24,7 +28,7 @@ export default { computed: { classes() { const { - prefixCls, + prefixCls: customizePrefixCls, type, shape, size, @@ -36,6 +40,10 @@ export default { icon, $slots, } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('btn', customizePrefixCls); + const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false; + const sizeCls = sizeMap[size] || ''; const children = filterEmpty($slots.default); return { @@ -46,7 +54,7 @@ export default { [`${prefixCls}-icon-only`]: !children && children !== 0 && icon, [`${prefixCls}-loading`]: sLoading, [`${prefixCls}-background-ghost`]: ghost || type === 'ghost', - [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar, + [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace, [`${prefixCls}-block`]: block, }; }, @@ -142,7 +150,8 @@ export default { const iconType = sLoading ? 'loading' : icon; const iconNode = iconType ? : null; const children = filterEmpty($slots.default); - const kids = children.map(child => this.insertSpace(child, this.isNeedInserted())); + const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false; + const kids = children.map(child => this.insertSpace(child, this.isNeedInserted() && autoInsertSpace)); if ($attrs.href !== undefined) { return ( diff --git a/components/button/buttonTypes.js b/components/button/buttonTypes.js index 66e592a33..568fba24d 100644 --- a/components/button/buttonTypes.js +++ b/components/button/buttonTypes.js @@ -1,10 +1,10 @@ import PropTypes from '../_util/vue-types'; export default () => ({ - prefixCls: PropTypes.string.def('ant-btn'), + prefixCls: PropTypes.string, type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'), htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'), icon: PropTypes.string, - shape: PropTypes.oneOf(['circle', 'circle-outline']), + shape: PropTypes.oneOf(['circle', 'circle-outline', 'round']), size: PropTypes.oneOf(['small', 'large', 'default']).def('default'), loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), disabled: PropTypes.bool, diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index 55943099f..6f161311f 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -16,6 +16,10 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto Default Dashed Danger + + 按钮 + + 按钮 ``` diff --git a/components/button/demo/size.md b/components/button/demo/size.md index 0b290eaa2..5de008533 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -25,6 +25,7 @@ If a large or small button is desired, set the `size` property to either `large` Danger
+ Download Download
@@ -51,4 +52,4 @@ export default { }, } -``` \ No newline at end of file +``` diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 9c3ea1361..55a5aa56c 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -9,7 +9,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. | htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | icon | set the icon of button, see: Icon component | string | - | | loading | set the loading status of button | boolean \| { delay: number } | false | -| shape | can be set to `circle` or omitted | string | - | +| shape | can be set to `circle`, `round` or omitted | string | - | | size | can be set to `small` `large` or omitted | string | `default` | | type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` | | block | option to fit button width to its parent width | boolean | `false` | @@ -20,4 +20,11 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. | click | set the handler to handle `click` event | (event) => void | `` will be rendered into ``, and all the properties which are not listed above will be transferred to the `` will be rendered into `Hello world!`. + +## FAQ + +### How to remove space between 2 chinese characters + +Use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`. diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index afd88a3a8..fb3eeae9e 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -1,6 +1,6 @@ ## API -通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled` +通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。 按钮的属性说明如下： @@ -11,7 +11,7 @@ | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | icon | 设置按钮的图标类型 | string | - | | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | -| shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - | +| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | | type | 设置按钮类型，可选值为 `primary` `dashed` `danger` | string | - | | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | @@ -22,4 +22,11 @@ | click | 点击按钮时的回调 | (event) => void | `Hello world!` 最终会被渲染为 ``，并且除了上表中的属性，其它属性都会直接传到原生 button 上。 +`` 则会渲染为 `Hello world!`。 + +## FAQ + +### 如何移除 2 个汉字之间的空格 + +设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。