@qn-pandora/pandora-component 3.0.2 → 4.0.0

package/es/components/Button/style.less

@@ -5,9 +5,9 @@
   box-shadow: none;
 
   &.@{sdk-prefix}-button-disabled {
-    background: @button-disabled-bg!important;
-    color: @button-disabled-color!important;
-    border-color: @button-disabled-border-color!important;
+    background: @button-disabled-bg;
+    color: @button-disabled-color;
+    border-color: @button-disabled-border-color;
     pointer-events: none;
     text-shadow: none;
   }
@@ -23,17 +23,6 @@
       border-color: @button-default-hover-border-color;
     }
   }
-  &.@{sdk-prefix}-type-primary {
-    background: @button-primary-bg;
-    color: @button-primary-color;
-    border: 1px solid @button-primary-border-color;
-    &:hover,
-    &:focus {
-      background: @button-primary-hover-bg;
-      color: @button-primary-hover-color;
-      border-color: @button-primary-hover-border-color;
-    }
-  }
 
   // size
   &.@{sdk-prefix}-size-large {

package/es/components/Card/style.css

@@ -80,14 +80,14 @@
   margin-top: 0;
   margin-bottom: 0;
 }
-.ant-card-head .ant-tabs {
+.ant-card-head .ant-tabs-top {
   clear: both;
   margin-bottom: -17px;
   color: rgba(0, 0, 0, 0.65);
   font-weight: normal;
   font-size: 14px;
 }
-.ant-card-head .ant-tabs-bar {
+.ant-card-head .ant-tabs-top-bar {
   border-bottom: 1px solid #e5e5e5;
 }
 .ant-card-extra {
@@ -679,6 +679,12 @@
           box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 .ant-tabs-dropdown-menu-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   min-width: 120px;
   margin: 0;
   padding: 5px 12px;
@@ -693,6 +699,26 @@
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
+.ant-tabs-dropdown-menu-item > span {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  white-space: nowrap;
+}
+.ant-tabs-dropdown-menu-item-remove {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  margin-left: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.ant-tabs-dropdown-menu-item-remove:hover {
+  color: #2c6dd2;
+}
 .ant-tabs-dropdown-menu-item:hover {
   background: rgba(44, 109, 210, 0.05);
 }

package/es/components/CheckTransformList/Item/index.js

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { Checkbox, Input } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
+import { formatString } from '../../../utils/language';
+import { CheckTransformListLocale } from '../../../constants/language/check_transform_list/type';
 import { SDK_PREFIX } from '../../../constants/style';
 import NameLimiter from '../../../components/NameLimiter';
 var Search = Input.Search;
 export default function Item(props) {
     var label = props.label, type = props.type, isCheckedAll = props.isCheckedAll, indeterminate = props.indeterminate, onCheckAllChange = props.onCheckAllChange, options = props.options, onCheckboxChange = props.onCheckboxChange, prefix = props.prefix, setPrefix = props.setPrefix;
+    var locale = React.useContext(ConfigContext).locale;
     var handOnchange = React.useCallback(function (e) {
         var value = e.target.value;
         setPrefix(value);
@@ -12,11 +16,11 @@ export default function Item(props) {
     return (React.createElement("div", { className: SDK_PREFIX + "-check-transform" },
         label && (React.createElement("div", { className: SDK_PREFIX + "-check-transform-header" }, label)),
         React.createElement("div", { className: SDK_PREFIX + "-check-transform-search" },
-            React.createElement(Search, { placeholder: "\u641C\u7D22", value: prefix, onChange: handOnchange })),
+            React.createElement(Search, { placeholder: formatString(CheckTransformListLocale.placeholder, locale), value: prefix, onChange: handOnchange })),
         React.createElement("div", { className: SDK_PREFIX + "-check-transform-checkBox" },
             type === 'left' && (React.createElement(React.Fragment, null,
-                React.createElement(Checkbox, { onChange: onCheckAllChange, checked: isCheckedAll, indeterminate: indeterminate }, "\u5168\u9009"))),
-            type === 'right' && (React.createElement("div", { className: SDK_PREFIX + "--check-transform-header" }, "\u5DF2\u9009")),
+                React.createElement(Checkbox, { onChange: onCheckAllChange, checked: isCheckedAll, indeterminate: indeterminate }, formatString(CheckTransformListLocale.select_all, locale)))),
+            type === 'right' && (React.createElement("div", { className: SDK_PREFIX + "--check-transform-header" }, formatString(CheckTransformListLocale.selected))),
             React.createElement("div", { className: SDK_PREFIX + "-check-transform-checkbox-group" }, options.map(function (item) {
                 return (React.createElement("div", { key: item.value },
                     React.createElement(Checkbox, { value: item.value, checked: item.checked, onChange: onCheckboxChange },

package/es/components/CheckTransformList/style.css

@@ -201,7 +201,7 @@
 .ant-checkbox-inner::after {
   position: absolute;
   top: 50%;
-  left: 22%;
+  left: 21.5%;
   display: table;
   width: 5.71428571px;
   height: 9.14285714px;
@@ -381,6 +381,7 @@
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -390,12 +391,20 @@
 }
 .ant-input-affix-wrapper::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input-affix-wrapper::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input-affix-wrapper::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input-affix-wrapper:placeholder-shown {
   text-overflow: ellipsis;
@@ -410,11 +419,11 @@
 }
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-rtl .ant-input-affix-wrapper:focus,
 .ant-input-rtl .ant-input-affix-wrapper-focused {
@@ -424,6 +433,9 @@
 .ant-input-affix-wrapper-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -434,6 +446,9 @@
 .ant-input-affix-wrapper[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -523,7 +538,7 @@ textarea.ant-input-affix-wrapper {
   margin-left: 4px;
 }
 .anticon.ant-input-clear-icon {
-  margin: 0 4px;
+  margin: 0;
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
   vertical-align: -1px;
@@ -540,8 +555,8 @@ textarea.ant-input-affix-wrapper {
 .anticon.ant-input-clear-icon-hidden {
   visibility: hidden;
 }
-.anticon.ant-input-clear-icon:last-child {
-  margin-right: 0;
+.anticon.ant-input-clear-icon-has-suffix {
+  margin: 0 4px;
 }
 .ant-input-affix-wrapper-textarea-with-clear-btn {
   padding: 0 !important;
@@ -577,18 +592,27 @@ textarea.ant-input-affix-wrapper {
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
 }
 .ant-input::-moz-placeholder {
   opacity: 1;
 }
 .ant-input::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input:placeholder-shown {
   text-overflow: ellipsis;
@@ -603,11 +627,11 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input:focus,
 .ant-input-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-rtl .ant-input:focus,
 .ant-input-rtl .ant-input-focused {
@@ -617,6 +641,9 @@ textarea.ant-input-affix-wrapper {
 .ant-input-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -627,6 +654,9 @@ textarea.ant-input-affix-wrapper {
 .ant-input[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -814,10 +844,6 @@ textarea.ant-input {
 .ant-input-group-sm .ant-select-single .ant-select-selector {
   height: 26px;
 }
-.ant-input-group .ant-input-affix-wrapper:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -826,6 +852,11 @@ textarea.ant-input {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
+.ant-input-group .ant-input-affix-wrapper:not(:first-child),
+.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 .ant-input-group.ant-input-group-compact {
   display: block;
 }
@@ -1080,9 +1111,9 @@ textarea.ant-input {
 .ant-input-textarea-rtl.ant-input-textarea-show-count::after {
   text-align: left;
 }
-.ant-input-affix-wrapper-rtl .ant-input-clear-icon:last-child {
-  margin-right: 4px;
-  margin-left: 0;
+.ant-input-affix-wrapper-rtl .ant-input-clear-icon-has-suffix {
+  margin-right: 0;
+  margin-left: 4px;
 }
 .ant-input-affix-wrapper-rtl .ant-input-clear-icon {
   right: auto;
@@ -1390,11 +1421,9 @@ textarea.ant-input {
   overflow: hidden;
 }
 .pandora-sdk-name-limit-tooltip .ant-tooltip-inner {
-  max-width: 400px !important;
-  max-height: 200px !important;
+  max-width: 400px;
+  max-height: 200px;
   overflow: auto;
-  line-height: 22px;
-  font-size: 12px;
 }
 .ant-btn {
   padding: 4px 15px;

package/es/components/Checkbox/style.css

@@ -87,7 +87,7 @@
 .ant-checkbox-inner::after {
   position: absolute;
   top: 50%;
-  left: 22%;
+  left: 21.5%;
   display: table;
   width: 5.71428571px;
   height: 9.14285714px;

package/es/components/CheckboxList/index.d.ts

@@ -7,6 +7,7 @@ export interface IOptionItem {
     indeterminate?: boolean | ((item: IOptionItem) => boolean);
     disabled?: boolean | ((item: IOptionItem) => boolean);
 }
+export { CheckboxValueType };
 export interface ICheckboxListProps {
     /**
      * 选项可以是对象数组，也可以是字符串数组;
@@ -23,5 +24,6 @@ export interface ICheckboxListProps {
      */
     itemClassName?: string;
     onChange?: (value: CheckboxValueType[]) => void;
+    disabled?: boolean;
 }
 export default function CheckboxList(props: ICheckboxListProps): JSX.Element;

package/es/components/CheckboxList/index.js

@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import { SDK_PREFIX } from '../../constants/style';
 var CheckboxGroup = Checkbox.Group;
 export default function CheckboxList(props) {
-    var options = props.options, itemClassName = props.itemClassName, value = props.value, onChange = props.onChange;
-    return (React.createElement(CheckboxGroup, { value: value, onChange: onChange }, options &&
+    var options = props.options, itemClassName = props.itemClassName, value = props.value, onChange = props.onChange, disabled = props.disabled;
+    return (React.createElement(CheckboxGroup, { value: value, onChange: onChange, disabled: disabled }, options &&
         options.map(function (option) {
             // 将 option string的形式进行格式化
             var optionItem = typeof option === 'string' ? { value: option } : option;

package/es/components/CheckboxList/style.css

@@ -87,7 +87,7 @@
 .ant-checkbox-inner::after {
   position: absolute;
   top: 50%;
-  left: 22%;
+  left: 21.5%;
   display: table;
   width: 5.71428571px;
   height: 9.14285714px;
@@ -259,8 +259,10 @@
   padding: 0 7px;
 }
 .pandora-sdk-checkbox-item {
-  line-height: 25px !important;
   white-space: nowrap;
   width: 100%;
-  margin-left: 0 !important;
+}
+.pandora-sdk-checkbox-item.ant-checkbox-wrapper {
+  margin-left: 0;
+  line-height: 25px;
 }

package/es/components/CheckboxList/style.less

@@ -2,8 +2,10 @@
 @import '../../style/theme.less';
 
 .@{sdk-prefix}-checkbox-item {
-  line-height: 25px !important;
   white-space: nowrap;
   width: 100%;
-  margin-left: 0 !important;
+  &.@{ant-prefix}-checkbox-wrapper {
+    margin-left: 0;
+    line-height: 25px;
+  }
 }

package/es/components/Collapse/Panel/index.d.ts

@@ -1,41 +1,9 @@
-import * as React from 'react';
-interface IPanelProps {
-    /**
-     * 当前panel的key
-     */
-    panelKey?: string;
-    /**
-     * tab的标题
-     */
-    title: string;
-    /**
-     * 当前panel是都激活
-     * @default true
-     */
-    isActive?: boolean;
-    /**
-     * title的样式
-     */
-    titleClassName?: string;
-    /**
-     * content的样式
-     */
-    contentClassName?: string;
-    /**
-     * 容器样式
-     */
-    className?: string;
-    /**
-     * panel折叠状态发生变化
-     */
-    onToggle?: (isActive: boolean, key?: string) => void;
-    /**
-     * 是否禁止toggle
-     */
-    disableToggle?: boolean;
+/// <reference types="react" />
+import { CollapsePanelProps } from 'antd/es/collapse';
+import { ECollapseType } from '../index';
+export interface ICollapsePanelProps extends CollapsePanelProps {
+    children?: any;
+    type?: ECollapseType;
 }
-/**
- * 折叠面板组件封装
- */
-export default function Panel(props: React.PropsWithChildren<IPanelProps>): JSX.Element;
-export {};
+export declare function CollapsePanel(props: ICollapsePanelProps): JSX.Element;
+export default CollapsePanel;

package/es/components/Collapse/Panel/index.js

@@ -1,51 +1,40 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-import * as React from 'react';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo } from 'react';
+import { Collapse as BaseCollapse } from 'antd';
 import classnames from 'classnames';
-import { Icon as LegacyIcon } from '@ant-design/compatible';
 import { SDK_PREFIX } from '../../../constants/style';
-var useEffect = React.useEffect, useCallback = React.useCallback, useState = React.useState;
-/**
- * 折叠面板组件封装
- */
-export default function Panel(props) {
-    var _a, _b;
-    var _c = props.isActive, baseIsActive = _c === void 0 ? true : _c, disableToggle = props.disableToggle, onToggle = props.onToggle, panelKey = props.panelKey, title = props.title, titleClassName = props.titleClassName, className = props.className, contentClassName = props.contentClassName;
-    var _d = __read(useState(baseIsActive || false), 2), isActive = _d[0], setIsActive = _d[1];
-    useEffect(function () {
-        if (baseIsActive !== isActive) {
-            setIsActive(baseIsActive || false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [baseIsActive]);
-    var onTogglePanel = useCallback(function () {
-        if (disableToggle) {
-            return;
-        }
-        setIsActive(!isActive);
-        if (onToggle) {
-            onToggle(!isActive, panelKey);
+import { ECollapseType } from '../index';
+export function CollapsePanel(props) {
+    var type = props.type, header = props.header, key = props.key, children = props.children, className = props.className, others = __rest(props, ["type", "header", "key", "children", "className"]);
+    var newHeader = useMemo(function () {
+        if (type === ECollapseType.Primary) {
+            return (React.createElement("span", null,
+                React.createElement("div", { className: SDK_PREFIX + "-header-line" }),
+                React.createElement("span", null, header)));
         }
-    }, [disableToggle, panelKey, isActive, onToggle]);
-    return (React.createElement("div", { className: classnames(SDK_PREFIX + "-panel", className), key: panelKey },
-        React.createElement("div", { className: classnames(titleClassName, (_a = {}, _a[SDK_PREFIX + "-panel-disable"] = disableToggle, _a), SDK_PREFIX + "-panel-title"), onClick: onTogglePanel },
-            React.createElement("span", null, title),
-            disableToggle ? null : (React.createElement(LegacyIcon, { type: isActive ? 'down' : 'up', className: SDK_PREFIX + "-panel-icon" }))),
-        React.createElement("div", { className: classnames(SDK_PREFIX + "-panel-content", contentClassName, (_b = {},
-                _b[SDK_PREFIX + "-panel-hidden"] = !isActive,
-                _b)) }, props.children)));
+        return header;
+    }, [header, type]);
+    return (React.createElement(BaseCollapse.Panel, __assign({ className: classnames(className), header: newHeader, key: key }, others), children));
 }
+export default CollapsePanel;

package/es/components/Collapse/index.d.ts

@@ -1,24 +1,19 @@
-import * as React from 'react';
-interface ICollapseProps {
-    /**
-     * 根节点 class name
-     */
+/// <reference types="react" />
+import { CollapseProps } from 'antd/es/collapse';
+export declare enum ECollapseType {
+    Normal = "normal",
+    Simple = "simple",
+    Primary = "primary",
+    Dashed = "dashed"
+}
+export interface ICollapse extends CollapseProps {
     className?: string;
-    /**
-     * 默认展开的panel的keys
-     */
-    defaultActiveKey?: string[] | 'all' | 'none';
-    /**
-     * 手风琴模式，最多智能打开一个折叠板
-     * @default false
-     */
-    accordion?: boolean;
+    children?: any;
+    type?: ECollapseType;
+    onDelete?: (index: number) => void;
 }
-/**
- * 折叠面板组件封装
- */
-declare function Collapse(props: React.PropsWithChildren<ICollapseProps>): JSX.Element;
-declare namespace Collapse {
-    var Panel: typeof import("./Panel").default;
+export declare function Collapse(props: ICollapse): JSX.Element;
+export declare namespace Collapse {
+    var Panel: typeof import("./Panel").CollapsePanel;
 }
 export default Collapse;

package/es/components/Collapse/index.js

@@ -9,34 +9,60 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import * as React from 'react';
-import { get } from 'lodash';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo, useCallback } from 'react';
+import { Collapse as BaseCollapse } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import classnames from 'classnames';
+import { SDK_PREFIX } from '../../constants/style';
 import Panel from './Panel';
-/**
- * 折叠面板组件封装
- */
-function Collapse(props) {
-    var children = props.children, defaultActiveKey = props.defaultActiveKey, className = props.className;
+export var ECollapseType;
+(function (ECollapseType) {
+    ECollapseType["Normal"] = "normal";
+    ECollapseType["Simple"] = "simple";
+    ECollapseType["Primary"] = "primary";
+    ECollapseType["Dashed"] = "dashed";
+})(ECollapseType || (ECollapseType = {}));
+export function Collapse(props) {
+    var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? ECollapseType.Simple : _a, _b = props.expandIconPosition, expandIconPosition = _b === void 0 ? 'left' : _b, onDelete = props.onDelete, others = __rest(props, ["children", "className", "type", "expandIconPosition", "onDelete"]);
+    var position = useMemo(function () {
+        return type === ECollapseType.Primary ? 'right' : expandIconPosition;
+    }, [expandIconPosition, type]);
+    var showArrow = useMemo(function () {
+        return type !== ECollapseType.Dashed;
+    }, [type]);
+    var getExtra = useCallback(function (index) {
+        if (type === ECollapseType.Dashed) {
+            return (React.createElement(DeleteOutlined, { onClick: function () {
+                    if (onDelete) {
+                        onDelete(index);
+                    }
+                } }));
+        }
+        return undefined;
+    }, [type, onDelete]);
     var getPanels = React.useCallback(function () {
         var newChildren = [];
         React.Children.forEach(children, function (child, index) {
             if (!child) {
                 return;
             }
-            var key = get(child, 'key') || "" + index;
-            var isActive = false;
-            if (defaultActiveKey && typeof defaultActiveKey === 'string') {
-                isActive = defaultActiveKey === 'none' ? false : true;
-            }
-            else {
-                isActive = (defaultActiveKey || []).indexOf(key) > -1;
-            }
-            var props = __assign(__assign({}, child.props), { panelKey: key, isActive: isActive });
+            var props = __assign(__assign({}, child.props), { showArrow: showArrow, extra: getExtra(index), type: type });
             newChildren.push(React.cloneElement(child, props));
         });
         return newChildren;
-    }, [children, defaultActiveKey]);
-    return React.createElement("div", { className: className }, getPanels());
+    }, [children, showArrow, type, getExtra]);
+    return (React.createElement(BaseCollapse, __assign({ className: classnames(SDK_PREFIX + "-collapse", [SDK_PREFIX + "-collapse-" + type], className), expandIconPosition: position }, others), getPanels()));
 }
 Collapse.Panel = Panel;
 export default Collapse;