@qn-pandora/pandora-component 3.0.0 → 3.1.0

package/es/index.d.ts

@@ -2,7 +2,7 @@ export * from '@qn-pandora/pandora-component-icons';
 export { SDK_PREFIX } from './constants/style';
 export { default as Button, IButtonProps } from './components/Button';
 export { default as Card } from './components/Card';
-export { default as Collapse } from './components/Collapse';
+export { default as Collapse, ECollapseType } from './components/Collapse';
 export { default as ConfigProvider } from './components/ConfigProvider';
 export { default as NameLimiter, INameLimiterProps } from './components/NameLimiter';
 export { default as Input, TInputProps } from './components/Input';
@@ -14,6 +14,7 @@ export * from './components/DateTimePicker/constants';
 export * from './components/DateTimePicker/transform';
 export { default as Style } from './components/Style';
 export { default as SolidRadioGroup, ISolidRadioGroupProps, IOption as ISolidRadioGroupOption } from './components/SolidRadioGroup';
+export { default as RadioGroup } from './components/RadioGroup';
 export { default as Menu, IOption as IMenuOption } from './components/Menu';
 export { default as Spin, SpinMode } from './components/Spin';
 export { default as Modal } from './components/Modal';

package/es/index.js

@@ -2,7 +2,7 @@ export * from '@qn-pandora/pandora-component-icons';
 export { SDK_PREFIX } from './constants/style';
 export { default as Button } from './components/Button';
 export { default as Card } from './components/Card';
-export { default as Collapse } from './components/Collapse';
+export { default as Collapse, ECollapseType } from './components/Collapse';
 export { default as ConfigProvider } from './components/ConfigProvider';
 export { default as NameLimiter } from './components/NameLimiter';
 export { default as Input } from './components/Input';
@@ -14,6 +14,7 @@ export * from './components/DateTimePicker/constants';
 export * from './components/DateTimePicker/transform';
 export { default as Style } from './components/Style';
 export { default as SolidRadioGroup } from './components/SolidRadioGroup';
+export { default as RadioGroup } from './components/RadioGroup';
 export { default as Menu } from './components/Menu';
 export { default as Spin, SpinMode } from './components/Spin';
 export { default as Modal } from './components/Modal';

package/es/index.less

@@ -3,10 +3,11 @@
 @import './components/AutoComplete/style.less';
 @import './components/Breadcrumb/style.less';
 @import './components/Button/style.less';
-@import './components/CheckTransformList/style.less';
 @import './components/Card/style.less';
+@import './components/CheckTransformList/style.less';
 @import './components/Checkbox/style.less';
 @import './components/CheckboxList/style.less';
+@import './components/Collapse/style.less';
 @import './components/CollapsiblePanel/style.less';
 @import './components/DateTimePicker/style.less';
 @import './components/Drawer/style.less';
@@ -18,10 +19,10 @@
 @import './components/NameExplainTooltip/style.less';
 @import './components/NameLimiter/style.less';
 @import './components/OptionList/style.less';
+@import './components/RadioGroup/style.less';
 @import './components/RangeInput/style.less';
 @import './components/RemarkName/style.less';
 @import './components/Selector/style.less';
-@import './components/SolidRadioGroup/style.less';
 @import './components/Spin/style.less';
 @import './components/Steps/style.less';
 @import './components/Table/style.less';
@@ -32,8 +33,6 @@
 @import './components/TreeSelector/style.less';
 @import './components/Card/RowExtra/style.less';
 @import './components/Card/SearchInput/style.less';
-@import './components/Collapse/Panel/style.less';
-@import './components/Collapse/stories/style.stories.less';
 @import './components/DateTimePicker/Base/style.less';
 @import './components/DateTimePicker/BaseMobile/style.less';
 @import './components/DateTimePicker/DisplayInput/style.less';
@@ -47,4 +46,5 @@
 @import './components/Timeline/TimelineItem/style.less';
 @import './components/Transfer/List/style.less';
 @import './components/Transfer/ListBody/style.less';
-@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
+@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
+@import './components/DateTimePicker/Collapse/Panel/style.less';

package/es/style/theme.less

@@ -123,8 +123,8 @@
 @zindex-popover: 1200; // antd
 @zindex-tooltip: 1300; // antd
 // pandora色
-@zindex-layout-navbar: 1210; // phoenix
-@zindex-layout-sidebar: 1200; // phoenix
+@zindex-layout-navbar: 1100; // phoenix
+@zindex-layout-sidebar: 1000; // phoenix
 @zindex-toaster: 3000; // app-platform phoenix
 
 // 组件色变量=========================================================
@@ -370,3 +370,10 @@
 }
 
 @icon-hover-color: rgba(19, 107, 255, 0.1);
+
+// radio--------------
+// antd覆盖色
+@radio-dot-color: @theme-color;
+@radio-button-color: @heading-color;
+@radio-button-active-color: @theme-color;
+@radio-button-hover-color: @theme-color;

package/es/utils/language.d.ts

@@ -0,0 +1 @@
+export declare function formatString(path: any, locale?: import("antd/es/locale-provider").Locale): any;

package/es/utils/language.js

@@ -0,0 +1,15 @@
+import { get, isString } from 'lodash';
+import zhCN from 'antd/es/locale-provider/zh_CN';
+import { component_zh } from '../constants/language/zh';
+import { component_en } from '../constants/language/en';
+export function formatString(path, locale) {
+    if (locale === void 0) { locale = zhCN; }
+    if (isString(path)) {
+        var message = get(locale === zhCN ? component_zh : component_en, path);
+        if (message && isString(message)) {
+            return message;
+        }
+        return path;
+    }
+    return path;
+}

package/es/utils/languageLocale.d.ts

@@ -0,0 +1 @@
+export declare function languageLocale<T>(prefix: string, obj: T): T;

package/es/utils/languageLocale.js

@@ -0,0 +1,9 @@
+import { flatten, unflatten } from 'flat';
+export function languageLocale(prefix, obj) {
+    var flattenObj = flatten(obj);
+    var result = {};
+    Object.keys(flattenObj).map(function (key) {
+        result[key] = "" + prefix + key;
+    });
+    return unflatten(result);
+}

package/lib/components/AutoComplete/style.css

@@ -479,7 +479,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: absolute;
-  top: 53%;
+  top: 50%;
   right: 11px;
   width: 12px;
   height: 12px;
@@ -660,6 +660,9 @@
   color: rgba(0, 0, 0, 0.25);
   cursor: not-allowed;
 }
+.ant-select-item-option-disabled.ant-select-item-option-selected {
+  background-color: #f5f5f5;
+}
 .ant-select-item-option-grouped {
   padding-left: 24px;
 }

package/lib/components/Button/index.js

@@ -54,7 +54,7 @@ function Button(props) {
         return classnames_1.default(className, style_1.SDK_PREFIX + "-button", style_1.SDK_PREFIX + "-size-" + size, (_a = {},
             _a[style_1.SDK_PREFIX + "-button-disabled"] = disabled,
             _a));
-    }, [size, disabled]);
+    }, [size, disabled, className]);
     var btn = (React.createElement(antd_1.Button, __assign({}, otherProps, { icon: typeof icon === 'string' ? React.createElement(compatible_1.Icon, { type: icon }) : icon, className: rootCls, onClick: handleClick })));
     if (title) {
         return (React.createElement(antd_1.Tooltip, { title: title, getPopupContainer: getPopupContainer }, btn));

package/lib/components/Card/style.css

@@ -384,8 +384,15 @@
 .ant-tabs-rtl.ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
 .ant-tabs-rtl.ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
 .ant-tabs-rtl.ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
-  margin-right: 0;
-  margin-left: 2px;
+  margin-right: 2px;
+  margin-left: 0;
+}
+.ant-tabs-rtl.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-add,
+.ant-tabs-rtl.ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-nav-add,
+.ant-tabs-rtl.ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-nav-add,
+.ant-tabs-rtl.ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-nav-add {
+  margin-right: 2px;
+  margin-left: 0;
 }
 .ant-tabs-dropdown-rtl {
   direction: rtl;
@@ -862,6 +869,7 @@
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add {
   min-width: 40px;
+  margin-left: 2px;
   padding: 0 8px;
   background: #fafafa;
   border: 1px solid #e5e5e5;

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

@@ -12,11 +12,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
+var language_1 = require("../../../utils/language");
+var type_1 = require("../../../constants/language/check_transform_list/type");
 var style_1 = require("../../../constants/style");
 var NameLimiter_1 = __importDefault(require("../../../components/NameLimiter"));
 var Search = antd_1.Input.Search;
 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(config_provider_1.ConfigContext).locale;
     var handOnchange = React.useCallback(function (e) {
         var value = e.target.value;
         setPrefix(value);
@@ -24,11 +28,11 @@ function Item(props) {
     return (React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform" },
         label && (React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-header" }, label)),
         React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-search" },
-            React.createElement(Search, { placeholder: "\u641C\u7D22", value: prefix, onChange: handOnchange })),
+            React.createElement(Search, { placeholder: language_1.formatString(type_1.CheckTransformListLocale.placeholder, locale), value: prefix, onChange: handOnchange })),
         React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-checkBox" },
             type === 'left' && (React.createElement(React.Fragment, null,
-                React.createElement(antd_1.Checkbox, { onChange: onCheckAllChange, checked: isCheckedAll, indeterminate: indeterminate }, "\u5168\u9009"))),
-            type === 'right' && (React.createElement("div", { className: style_1.SDK_PREFIX + "--check-transform-header" }, "\u5DF2\u9009")),
+                React.createElement(antd_1.Checkbox, { onChange: onCheckAllChange, checked: isCheckedAll, indeterminate: indeterminate }, language_1.formatString(type_1.CheckTransformListLocale.select_all, locale)))),
+            type === 'right' && (React.createElement("div", { className: style_1.SDK_PREFIX + "--check-transform-header" }, language_1.formatString(type_1.CheckTransformListLocale.selected))),
             React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-checkbox-group" }, options.map(function (item) {
                 return (React.createElement("div", { key: item.value },
                     React.createElement(antd_1.Checkbox, { value: item.value, checked: item.checked, onChange: onCheckboxChange },

package/lib/components/CheckTransformList/index.js

@@ -90,7 +90,7 @@ function CheckTransformList(props) {
                 return !lodash_1.includes(filterLeftOptions.map(function (option) { return option.value; }), item);
             }));
         }
-    }, [filterLeftOptions, setCheckList]);
+    }, [filterLeftOptions, setCheckList, checkedList]);
     var handOnchange = useCallback(function (e) {
         var value = e.target.value;
         if (e.target.checked) {

package/lib/components/CheckTransformList/style.css

@@ -496,8 +496,8 @@ textarea.ant-input-affix-wrapper {
   outline: none;
 }
 .ant-input-affix-wrapper > input.ant-input:focus {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
 }
 .ant-input-affix-wrapper::before {
   width: 0;
@@ -522,7 +522,7 @@ textarea.ant-input-affix-wrapper {
 .ant-input-suffix {
   margin-left: 4px;
 }
-.ant-input-clear-icon {
+.anticon.ant-input-clear-icon {
   margin: 0 4px;
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
@@ -531,16 +531,16 @@ textarea.ant-input-affix-wrapper {
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
 }
-.ant-input-clear-icon:hover {
+.anticon.ant-input-clear-icon:hover {
   color: rgba(0, 0, 0, 0.45);
 }
-.ant-input-clear-icon:active {
+.anticon.ant-input-clear-icon:active {
   color: rgba(0, 0, 0, 0.65);
 }
-.ant-input-clear-icon-hidden {
+.anticon.ant-input-clear-icon-hidden {
   visibility: hidden;
 }
-.ant-input-clear-icon:last-child {
+.anticon.ant-input-clear-icon:last-child {
   margin-right: 0;
 }
 .ant-input-affix-wrapper-textarea-with-clear-btn {
@@ -755,6 +755,16 @@ textarea.ant-input {
 .ant-input-group-addon .ant-select-focused .ant-select-selector {
   color: #7a869a;
 }
+.ant-input-group-addon .ant-cascader-picker {
+  margin: -9px -12px;
+  background-color: transparent;
+}
+.ant-input-group-addon .ant-cascader-picker .ant-cascader-input {
+  text-align: left;
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 .ant-input-group > .ant-input:first-child,
 .ant-input-group-addon:first-child {
   border-top-right-radius: 0;

package/lib/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/lib/components/Collapse/Panel/index.js

@@ -1,19 +1,25 @@
 "use strict";
-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);
+};
+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;
 };
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
@@ -26,38 +32,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
 var classnames_1 = __importDefault(require("classnames"));
-var compatible_1 = require("@ant-design/compatible");
 var style_1 = require("../../../constants/style");
-var useEffect = React.useEffect, useCallback = React.useCallback, useState = React.useState;
-/**
- * 折叠面板组件封装
- */
-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);
-        }
-    }, [baseIsActive]);
-    var onTogglePanel = useCallback(function () {
-        if (disableToggle) {
-            return;
-        }
-        setIsActive(!isActive);
-        if (onToggle) {
-            onToggle(!isActive, panelKey);
+var index_1 = require("../index");
+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 = react_1.useMemo(function () {
+        if (type === index_1.ECollapseType.Primary) {
+            return (react_1.default.createElement("span", null,
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-header-line" }),
+                react_1.default.createElement("span", null, header)));
         }
-    }, [disableToggle, panelKey, isActive]);
-    return (React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-panel", className), key: panelKey },
-        React.createElement("div", { className: classnames_1.default(titleClassName, (_a = {}, _a[style_1.SDK_PREFIX + "-panel-disable"] = disableToggle, _a), style_1.SDK_PREFIX + "-panel-title"), onClick: onTogglePanel },
-            React.createElement("span", null, title),
-            disableToggle ? null : (React.createElement(compatible_1.Icon, { type: isActive ? 'down' : 'up', className: style_1.SDK_PREFIX + "-panel-icon" }))),
-        React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-panel-content", contentClassName, (_b = {},
-                _b[style_1.SDK_PREFIX + "-panel-hidden"] = !isActive,
-                _b)) }, props.children)));
+        return header;
+    }, [header, type]);
+    return (react_1.default.createElement(antd_1.Collapse.Panel, __assign({ className: classnames_1.default(className), header: newHeader, key: key }, others), children));
 }
-exports.default = Panel;
+exports.CollapsePanel = CollapsePanel;
+exports.default = CollapsePanel;

package/lib/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/lib/components/Collapse/index.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
@@ -21,34 +32,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var classnames_1 = __importDefault(require("classnames"));
+var style_1 = require("../../constants/style");
 var Panel_1 = __importDefault(require("./Panel"));
-/**
- * 折叠面板组件封装
- */
+var ECollapseType;
+(function (ECollapseType) {
+    ECollapseType["Normal"] = "normal";
+    ECollapseType["Simple"] = "simple";
+    ECollapseType["Primary"] = "primary";
+    ECollapseType["Dashed"] = "dashed";
+})(ECollapseType = exports.ECollapseType || (exports.ECollapseType = {}));
 function Collapse(props) {
-    var children = props.children, defaultActiveKey = props.defaultActiveKey, className = props.className;
-    var getPanels = React.useCallback(function () {
+    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 = react_1.useMemo(function () {
+        return type === ECollapseType.Primary ? 'right' : expandIconPosition;
+    }, [expandIconPosition, type]);
+    var showArrow = react_1.useMemo(function () {
+        return type !== ECollapseType.Dashed;
+    }, [type]);
+    var getExtra = react_1.useCallback(function (index) {
+        if (type === ECollapseType.Dashed) {
+            return (react_1.default.createElement(icons_1.DeleteOutlined, { onClick: function () {
+                    if (onDelete) {
+                        onDelete(index);
+                    }
+                } }));
+        }
+        return undefined;
+    }, [type, onDelete]);
+    var getPanels = react_1.default.useCallback(function () {
         var newChildren = [];
-        React.Children.forEach(children, function (child, index) {
+        react_1.default.Children.forEach(children, function (child, index) {
             if (!child) {
                 return;
             }
-            var key = lodash_1.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 });
-            newChildren.push(React.cloneElement(child, props));
+            var props = __assign(__assign({}, child.props), { showArrow: showArrow, extra: getExtra(index), type: type });
+            newChildren.push(react_1.default.cloneElement(child, props));
         });
         return newChildren;
-    }, [children, defaultActiveKey]);
-    return React.createElement("div", { className: className }, getPanels());
+    }, [children, showArrow, type, getExtra]);
+    return (react_1.default.createElement(antd_1.Collapse, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-collapse", [style_1.SDK_PREFIX + "-collapse-" + type], className), expandIconPosition: position }, others), getPanels()));
 }
+exports.Collapse = Collapse;
 Collapse.Panel = Panel_1.default;
 exports.default = Collapse;