diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx index b300adfe5..c824a8ea6 100644 --- a/components/checkbox/Checkbox.jsx +++ b/components/checkbox/Checkbox.jsx @@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types'; import classNames from 'classnames'; import VcCheckbox from '../vc-checkbox'; import { getOptionProps, getAttrs } from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; function noop() {} export default { @@ -11,22 +12,20 @@ export default { prop: 'checked', }, props: { - prefixCls: { - default: 'ant-checkbox', - type: String, - }, + prefixCls: PropTypes.string, defaultChecked: PropTypes.bool, checked: PropTypes.bool, disabled: PropTypes.bool, - isGroup: Boolean, + isGroup: PropTypes.bool, value: PropTypes.any, - name: String, - id: String, - indeterminate: Boolean, + name: PropTypes.string, + id: PropTypes.string, + indeterminate: PropTypes.bool, type: PropTypes.string.def('checkbox'), - autoFocus: Boolean, + autoFocus: PropTypes.bool, }, inject: { + configProvider: { default: () => ({}) }, checkboxGroupContext: { default: () => null }, }, methods: { @@ -48,7 +47,10 @@ export default { const props = getOptionProps(this); const children = $slots.default; const { mouseenter = noop, mouseleave = noop, ...restListeners } = $listeners; - const { prefixCls, indeterminate, ...restProps } = props; + const { prefixCls: customizePrefixCls, indeterminate, ...restProps } = props; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('checkbox', customizePrefixCls); + const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index 21e74b3a5..8cc4c1c6d 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -1,5 +1,7 @@ import Checkbox from './Checkbox'; import hasProp from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; + function noop() {} export default { name: 'ACheckboxGroup', @@ -8,7 +10,6 @@ export default { }, props: { prefixCls: { - default: 'ant-checkbox', type: String, }, defaultValue: { @@ -30,6 +31,9 @@ export default { checkboxGroupContext: this, }; }, + inject: { + configProvider: { default: () => ({}) }, + }, data() { const { value, defaultValue } = this; return { @@ -75,7 +79,10 @@ export default { }, render() { const { $props: props, $data: state, $slots } = this; - const { prefixCls, options } = props; + const { prefixCls: customizePrefixCls, options } = props; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('checkbox', customizePrefixCls); + let children = $slots.default; const groupPrefixCls = `${prefixCls}-group`; if (options && options.length > 0) { diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.jsx index 5d55cd2c6..2bf16ae1e 100644 --- a/components/collapse/Collapse.jsx +++ b/components/collapse/Collapse.jsx @@ -1,7 +1,10 @@ import animation from '../_util/openAnimation'; -import { getOptionProps, initDefaultProps } from '../_util/props-util'; +import { getOptionProps, initDefaultProps, getComponentFromProp, isValidElement } from '../_util/props-util'; +import { cloneElement } from '../_util/vnode'; import VcCollapse, { collapseProps } from '../vc-collapse'; import Icon from '../icon'; +import { ConfigConsumerProps } from '../config-provider'; + export default { name: 'ACollapse', model: { @@ -13,20 +16,33 @@ export default { bordered: true, openAnimation: animation, }), + inject: { + configProvider: { default: () => ({}) }, + }, methods: { - renderExpandIcon() { - return ; + renderExpandIcon(panelProps, prefixCls) { + const expandIcon = getComponentFromProp(this, 'expandIcon', panelProps); + const icon = expandIcon || ; + return isValidElement(expandIcon ? icon[0] : icon) + ? cloneElement(icon, { + class: `${prefixCls}-arrow`, + }) + : icon; }, }, render() { - const { prefixCls, bordered, $listeners } = this; + const { prefixCls: customizePrefixCls, bordered, $listeners } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('collapse', customizePrefixCls); + const collapseClassName = { [`${prefixCls}-borderless`]: !bordered, }; const rcCollapeProps = { props: { ...getOptionProps(this), - expandIcon: this.renderExpandIcon, + prefixCls, + expandIcon: (panelProps) => this.renderExpandIcon(panelProps, prefixCls), }, class: collapseClassName, on: $listeners, diff --git a/components/collapse/CollapsePanel.jsx b/components/collapse/CollapsePanel.jsx index 4ece57792..e51134392 100644 --- a/components/collapse/CollapsePanel.jsx +++ b/components/collapse/CollapsePanel.jsx @@ -1,19 +1,27 @@ import { getOptionProps, getComponentFromProp } from '../_util/props-util'; import VcCollapse, { panelProps } from '../vc-collapse'; +import { ConfigConsumerProps } from '../config-provider'; export default { name: 'ACollapsePanel', props: { ...panelProps(), }, + inject: { + configProvider: { default: () => ({}) }, + }, render() { - const { prefixCls, showArrow = true, $listeners } = this; + const { prefixCls: customizePrefixCls, showArrow = true, $listeners } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('collapse', customizePrefixCls); + const collapsePanelClassName = { [`${prefixCls}-no-arrow`]: !showArrow, }; const rcCollapePanelProps = { props: { ...getOptionProps(this), + prefixCls, }, class: collapsePanelClassName, on: $listeners, diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js new file mode 100644 index 000000000..08f3edb31 --- /dev/null +++ b/components/collapse/__tests__/index.test.js @@ -0,0 +1,17 @@ +import { mount } from '@vue/test-utils'; +import Collapse from '..'; + +describe('Collapse', () => { + it('should support remove expandIcon', () => { + const wrapper = mount({ + render() { + return ( + null}> + + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); +}); diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md index 90cb0be6e..fbbbb4a20 100644 --- a/components/collapse/demo/custom.md +++ b/components/collapse/demo/custom.md @@ -1,21 +1,21 @@ #### 自定义面板 -自定义各个面板的背景色、圆角和边距。 +自定义各个面板的背景色、圆角、边距和图标。 #### Custom Panel -Customize the background, border and margin styles for each panel. +Customize the background, border and margin styles and icon for each panel. ```html