feat: update checkbox && collapse

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: {
+    prefixCls: PropTypes.string,
-      default: 'ant-checkbox',
-      type: String,
-    },
     defaultChecked: PropTypes.bool,
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
-    isGroup: Boolean,
+    isGroup: PropTypes.bool,
     value: PropTypes.any,
-    name: String,
+    name: PropTypes.string,
-    id: String,
+    id: PropTypes.string,
-    indeterminate: Boolean,
+    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,

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) {

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() {
+    renderExpandIcon(panelProps, prefixCls) {
-      return <Icon type="right" class="arrow" />;
+      const expandIcon = getComponentFromProp(this, 'expandIcon', panelProps);
+      const icon = expandIcon || <Icon type="right" rotate={panelProps.isActive ? 90 : undefined} />;
+      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,

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,

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 (
+          <Collapse expandIcon={() => null}>
+            <Collapse.Panel header="header" />
+          </Collapse>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

components/collapse/demo/custom.md

@@ -1,21 +1,21 @@
 <cn>
 #### 自定义面板
-自定义各个面板的背景色、圆角和边距。
+自定义各个面板的背景色、圆角、边距和图标。
 </cn>
 
 <us>
 #### Custom Panel
-Customize the background, border and margin styles for each panel.
+Customize the background, border and margin styles and icon for each panel.
 </us>
 
 ```html
 <template>
   <div>
     <a-collapse defaultActiveKey="1" :bordered="false">
-      <a-collapse-panel key="1" :style="customStyle">
+      <template v-slot:expandIcon="props">
-        <template slot="header">
+        <a-icon  type="caret-right" rotate="{isActive ? 90 : 0}" />
-          This is panel header 1<a-icon type="question-circle-o" />
+      </template>
-        </template>
+      <a-collapse-panel  header="This is panel header 1" key="1" :style="customStyle">
         <p>{{text}}</p>
       </a-collapse-panel>
       <a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">

components/collapse/index.en-US.md

@@ -4,12 +4,14 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` |
+| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
-| activeKey(v-model) | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
-| bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
 | defaultActiveKey | Key of the initial active panel | string | - |
+| bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
+| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` |
+| expandIcon | allow to customize collapse icon | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|v-slot:expandIcon="props" |
 | destroyInactivePanel | Destroy Inactive Panel | boolean | `false` |
 
+
 ### events
 | Events Name | Description | Arguments |
 | --- | --- | --- |
@@ -24,3 +26,16 @@
 | header | Title of the panel | string | - |
 | key | Unique key identifying the panel from among its siblings | string | - |
 | showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
+
+## FAQ
+
+### How to let the arrow to be on the right?
+
+You can adjust style of the arrow:
+
+```
+.ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
+  left: initial;
+  right: 16px;
+}
+```

components/collapse/index.zh-CN.md

@@ -6,6 +6,10 @@
 | --- | --- | --- | --- |
 | activeKey(v-model) | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
 | defaultActiveKey | 初始化选中面板的 key | string | 无 |
+| bordered | 带边框风格的折叠面板 | boolean | `true` |
+| accordion | 手风琴模式 | boolean | `false` |
+| expandIcon | 自定义切换图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|v-slot:expandIcon="props" |
+| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
@@ -20,3 +24,17 @@
 | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
 | header | 面板头内容 | string\|slot | 无 |
 | key | 对应 activeKey | string | 无 |
+| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
+
+## FAQ
+
+### 我希望箭头在右边，怎么做？
+
+通过样式调整，将箭头放到右边就行啦
+
+```
+.ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
+  left: initial;
+  right: 16px;
+}
+```