@qn-pandora/pandora-component 4.0.12 → 4.0.14

package/es/index.d.ts

@@ -40,4 +40,5 @@ export { default as CheckTransformList } from './components/CheckTransformList';
 export { default as InputNumber } from './components/InputNumber';
 export { default as InputNumberWithUnit } from './components/InputNumberWithUnit';
 export { default as Transfer } from './components/Transfer';
+export { default as Descriptions } from './components/Descriptions';
 export * from './utils/time';

package/es/index.js

@@ -40,4 +40,5 @@ export { default as CheckTransformList } from './components/CheckTransformList';
 export { default as InputNumber } from './components/InputNumber';
 export { default as InputNumberWithUnit } from './components/InputNumberWithUnit';
 export { default as Transfer } from './components/Transfer';
+export { default as Descriptions } from './components/Descriptions';
 export * from './utils/time';

package/es/index.less

@@ -1,50 +1,52 @@
 @import './style\mixin.less';
 @import './style\theme.less';
-@import './components\Breadcrumb\style.less';
 @import './components\AutoComplete\style.less';
-@import './components\Card\style.less';
+@import './components\Breadcrumb\style.less';
 @import './components\Button\style.less';
-@import './components\CheckboxList\style.less';
+@import './components\Card\style.less';
 @import './components\Checkbox\style.less';
-@import './components\Collapse\style.less';
+@import './components\CheckboxList\style.less';
 @import './components\CheckTransformList\style.less';
+@import './components\Collapse\style.less';
 @import './components\CollapsiblePanel\style.less';
 @import './components\DateTimePicker\style.less';
+@import './components\Descriptions\style.less';
 @import './components\Drawer\style.less';
-@import './components\FileResumable\style.less';
 @import './components\Input\style.less';
+@import './components\FileResumable\style.less';
 @import './components\KeyValuePair\style.less';
 @import './components\Menu\style.less';
 @import './components\Modal\style.less';
 @import './components\NameExplainTooltip\style.less';
 @import './components\NameLimiter\style.less';
-@import './components\RadioGroup\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\RemarkName\style.less';
 @import './components\Spin\style.less';
-@import './components\Steps\style.less';
-@import './components\Tabs\style.less';
 @import './components\Table\style.less';
+@import './components\Tabs\style.less';
+@import './components\Steps\style.less';
 @import './components\TagList\style.less';
 @import './components\Timeline\style.less';
-@import './components\TreeSelector\style.less';
 @import './components\Transfer\style.less';
-@import './components\Card\SearchInput\style.less';
+@import './components\TreeSelector\style.less';
 @import './components\Card\RowExtra\style.less';
+@import './components\Card\SearchInput\style.less';
 @import './components\DateTimePicker\Base\style.less';
 @import './components\DateTimePicker\BaseMobile\style.less';
+@import './components\Drawer\CloseIcon\style.less';
 @import './components\DateTimePicker\DisplayInput\style.less';
+@import './components\OptionList\InlineOptionList\style.less';
 @import './components\OptionList\OptionItem\style.less';
 @import './components\OptionList\PopoverOptionList\style.less';
-@import './components\OptionList\InlineOptionList\style.less';
-@import './components\Steps\ControlButton\style.less';
 @import './components\Table\ColumnTag\style.less';
-@import './components\TagList\Tag\style.less';
-@import './components\TagList\TagSwitch\style.less';
+@import './components\Steps\ControlButton\style.less';
 @import './components\Timeline\TimelineItem\style.less';
+@import './components\TagList\TagSwitch\style.less';
 @import './components\Transfer\List\style.less';
+@import './components\TagList\Tag\style.less';
 @import './components\Transfer\ListBody\style.less';
-@import './components\DateTimePicker\BaseMobile\Absolute\style.less';
-@import './components\DateTimePicker\Collapse\Panel\style.less';
+@import './components\DateTimePicker\Collapse\Panel\style.less';
+@import './components\DateTimePicker\BaseMobile\Absolute\style.less';

package/es/style/theme.less

@@ -109,6 +109,7 @@
 // pandora色
 @border-color-normal: #e5e5e5;
 @border-color-1: #d9d9d9;
+@border-color-2: #bfbfbf;
 @modal-header-border-color: rgba(0, 0, 0, 0.09);
 
 // icon------------------------
@@ -388,5 +389,8 @@
 @editor_nav_border_color: #d8d8d8;
 @editor_nav_line_color: #fcce72;
 @image-operator-hover-bg: rgba(51, 51, 51, 0.7);
-@agent-user-color: #853ee8; // 智能机器人智能鼓用户头像颜色
-@agent-user-message-background-color: #f7f7f8; // 用户框背景色
+@agent-agent-message-background-color: #f7f7f8; // 用户框背景色
+@agent-user-avatar-color: #e6902d; // 机器人用户头像颜色;
+
+// close icon hover 颜色
+@close-icon-hover-color: #f4f5f6;

package/es/utils/dom.d.ts

@@ -0,0 +1 @@
+export declare function doesDOMMatchSelector(selector: string, element: HTMLElement): boolean;

package/es/utils/dom.js

@@ -0,0 +1,42 @@
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+// 判断css选择器selector是否命中element
+export function doesDOMMatchSelector(selector, element) {
+    var e_1, _a;
+    var _b;
+    // Check if the browser supports matches() method
+    if (typeof element.matches === 'function') {
+        return element.matches(selector);
+    }
+    // Check if the browser supports webkitMatchesSelector() method
+    if (typeof element.webkitMatchesSelector === 'function') {
+        return element.webkitMatchesSelector(selector);
+    }
+    // If none of the above methods are supported, fall back to querySelectorAll()
+    var matches = ((_b = element.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selector)) || [];
+    try {
+        for (var _c = __values(Array.from(matches)), _d = _c.next(); !_d.done; _d = _c.next()) {
+            var el = _d.value;
+            if (el === element) {
+                return true;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return false;
+}

package/lib/components/Descriptions/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DescriptionsProps } from 'antd/es/descriptions';
+import type { DescriptionsItemProps } from 'antd/es/descriptions/Item';
+export declare type TItem = DescriptionsItemProps & {
+    labelCol?: number;
+    remark?: string;
+};
+interface IDescriptionsProps extends DescriptionsProps {
+    labelCol?: number;
+    items: TItem[];
+}
+declare const Descriptions: React.FC<IDescriptionsProps>;
+export default Descriptions;

package/lib/components/Descriptions/index.js

@@ -0,0 +1,69 @@
+"use strict";
+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];
+        }
+        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;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
+var classnames_1 = __importDefault(require("classnames"));
+var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
+var style_1 = require("../../constants/style");
+var Item = antd_1.Descriptions.Item;
+var DEFAYLT_MAX_COL = 24;
+var Descriptions = function (props) {
+    var items = props.items, className = props.className, labelStyle = props.labelStyle, labelCol = props.labelCol, other = __rest(props, ["items", "className", "labelStyle", "labelCol"]);
+    var getRealLabelWith = react_1.useCallback(function (labelCol) {
+        if (!labelCol)
+            return;
+        if (labelCol <= 1)
+            return 1;
+        if (labelCol >= DEFAYLT_MAX_COL)
+            return DEFAYLT_MAX_COL;
+        return (Math.round(labelCol) / DEFAYLT_MAX_COL) * 100;
+    }, []);
+    var getLabelStyle = react_1.useCallback(function (labelStyle, labelCol) {
+        var col = getRealLabelWith(labelCol);
+        return labelCol ? __assign(__assign({}, labelStyle), { width: col + "%" }) : labelStyle;
+    }, [getRealLabelWith]);
+    var realLabelStyle = react_1.useMemo(function () {
+        return getLabelStyle(labelStyle, labelCol);
+    }, [labelStyle, labelCol, getLabelStyle]);
+    return (react_1.default.createElement(antd_1.Descriptions, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-descriptions", className), labelStyle: realLabelStyle }, other), items.map(function (item, index) {
+        var label = item.label, labelCol = item.labelCol, labelStyle = item.labelStyle, other = __rest(item, ["label", "labelCol", "labelStyle"]);
+        return (react_1.default.createElement(Item, __assign({ key: index, labelStyle: getLabelStyle(labelStyle, labelCol), label: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", null,
+                    item.label,
+                    !!item.remark && (react_1.default.createElement(antd_1.Tooltip, { title: item.remark },
+                        react_1.default.createElement(pandora_component_icons_1.QuestionCircleOutlined, { className: style_1.SDK_PREFIX + "-remark-icon" }))))) }, other), item.children));
+    })));
+};
+exports.default = Descriptions;

package/lib/components/Descriptions/style.css

@@ -0,0 +1,337 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-popover {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1200;
+  font-weight: normal;
+  white-space: normal;
+  text-align: left;
+  cursor: auto;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+.ant-popover::after {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.01);
+  content: '';
+}
+.ant-popover-hidden {
+  display: none;
+}
+.ant-popover-placement-top,
+.ant-popover-placement-topLeft,
+.ant-popover-placement-topRight {
+  padding-bottom: 10px;
+}
+.ant-popover-placement-right,
+.ant-popover-placement-rightTop,
+.ant-popover-placement-rightBottom {
+  padding-left: 10px;
+}
+.ant-popover-placement-bottom,
+.ant-popover-placement-bottomLeft,
+.ant-popover-placement-bottomRight {
+  padding-top: 10px;
+}
+.ant-popover-placement-left,
+.ant-popover-placement-leftTop,
+.ant-popover-placement-leftBottom {
+  padding-right: 10px;
+}
+.ant-popover-inner {
+  background-color: #ffffff;
+  background-clip: padding-box;
+  border-radius: 2px;
+  -webkit-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);
+          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);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ant-popover {
+    /* IE10+ */
+  }
+  .ant-popover-inner {
+    -webkit-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);
+            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-popover-title {
+  min-width: 177px;
+  min-height: 32px;
+  margin: 0;
+  padding: 5px 16px 4px;
+  color: #333;
+  font-weight: 500;
+  border-bottom: 1px solid #e5e5e5;
+}
+.ant-popover-inner-content {
+  padding: 12px 16px;
+  color: rgba(0, 0, 0, 0.65);
+}
+.ant-popover-message {
+  position: relative;
+  padding: 4px 0 12px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+.ant-popover-message > .anticon {
+  position: absolute;
+  top: 8.0005px;
+  color: #f0a818;
+  font-size: 14px;
+}
+.ant-popover-message-title {
+  padding-left: 22px;
+}
+.ant-popover-buttons {
+  margin-bottom: 4px;
+  text-align: right;
+}
+.ant-popover-buttons button {
+  margin-left: 8px;
+}
+.ant-popover-arrow {
+  position: absolute;
+  display: block;
+  width: 8.48528137px;
+  height: 8.48528137px;
+  overflow: hidden;
+  background: transparent;
+  pointer-events: none;
+}
+.ant-popover-arrow-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 6px;
+  height: 6px;
+  margin: auto;
+  background-color: #ffffff;
+  content: '';
+  pointer-events: auto;
+}
+.ant-popover-placement-top .ant-popover-arrow,
+.ant-popover-placement-topLeft .ant-popover-arrow,
+.ant-popover-placement-topRight .ant-popover-arrow {
+  bottom: 1.51471863px;
+}
+.ant-popover-placement-top .ant-popover-arrow-content,
+.ant-popover-placement-topLeft .ant-popover-arrow-content,
+.ant-popover-placement-topRight .ant-popover-arrow-content {
+  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+          box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateY(-4.24264069px) rotate(45deg);
+          transform: translateY(-4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-top .ant-popover-arrow {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ant-popover-placement-topLeft .ant-popover-arrow {
+  left: 16px;
+}
+.ant-popover-placement-topRight .ant-popover-arrow {
+  right: 16px;
+}
+.ant-popover-placement-right .ant-popover-arrow,
+.ant-popover-placement-rightTop .ant-popover-arrow,
+.ant-popover-placement-rightBottom .ant-popover-arrow {
+  left: 1.51471863px;
+}
+.ant-popover-placement-right .ant-popover-arrow-content,
+.ant-popover-placement-rightTop .ant-popover-arrow-content,
+.ant-popover-placement-rightBottom .ant-popover-arrow-content {
+  -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+          box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateX(4.24264069px) rotate(45deg);
+          transform: translateX(4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-right .ant-popover-arrow {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.ant-popover-placement-rightTop .ant-popover-arrow {
+  top: 12px;
+}
+.ant-popover-placement-rightBottom .ant-popover-arrow {
+  bottom: 12px;
+}
+.ant-popover-placement-bottom .ant-popover-arrow,
+.ant-popover-placement-bottomLeft .ant-popover-arrow,
+.ant-popover-placement-bottomRight .ant-popover-arrow {
+  top: 1.51471863px;
+}
+.ant-popover-placement-bottom .ant-popover-arrow-content,
+.ant-popover-placement-bottomLeft .ant-popover-arrow-content,
+.ant-popover-placement-bottomRight .ant-popover-arrow-content {
+  -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+          box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+  -webkit-transform: translateY(4.24264069px) rotate(45deg);
+          transform: translateY(4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-bottom .ant-popover-arrow {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ant-popover-placement-bottomLeft .ant-popover-arrow {
+  left: 16px;
+}
+.ant-popover-placement-bottomRight .ant-popover-arrow {
+  right: 16px;
+}
+.ant-popover-placement-left .ant-popover-arrow,
+.ant-popover-placement-leftTop .ant-popover-arrow,
+.ant-popover-placement-leftBottom .ant-popover-arrow {
+  right: 1.51471863px;
+}
+.ant-popover-placement-left .ant-popover-arrow-content,
+.ant-popover-placement-leftTop .ant-popover-arrow-content,
+.ant-popover-placement-leftBottom .ant-popover-arrow-content {
+  -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+          box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateX(-4.24264069px) rotate(45deg);
+          transform: translateX(-4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-left .ant-popover-arrow {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.ant-popover-placement-leftTop .ant-popover-arrow {
+  top: 12px;
+}
+.ant-popover-placement-leftBottom .ant-popover-arrow {
+  bottom: 12px;
+}
+.ant-popover-pink .ant-popover-inner {
+  background-color: #eb2f96;
+}
+.ant-popover-pink .ant-popover-arrow-content {
+  background-color: #eb2f96;
+}
+.ant-popover-magenta .ant-popover-inner {
+  background-color: #eb2f96;
+}
+.ant-popover-magenta .ant-popover-arrow-content {
+  background-color: #eb2f96;
+}
+.ant-popover-red .ant-popover-inner {
+  background-color: #f5222d;
+}
+.ant-popover-red .ant-popover-arrow-content {
+  background-color: #f5222d;
+}
+.ant-popover-volcano .ant-popover-inner {
+  background-color: #fa541c;
+}
+.ant-popover-volcano .ant-popover-arrow-content {
+  background-color: #fa541c;
+}
+.ant-popover-orange .ant-popover-inner {
+  background-color: #fa8c16;
+}
+.ant-popover-orange .ant-popover-arrow-content {
+  background-color: #fa8c16;
+}
+.ant-popover-yellow .ant-popover-inner {
+  background-color: #fadb14;
+}
+.ant-popover-yellow .ant-popover-arrow-content {
+  background-color: #fadb14;
+}
+.ant-popover-gold .ant-popover-inner {
+  background-color: #faad14;
+}
+.ant-popover-gold .ant-popover-arrow-content {
+  background-color: #faad14;
+}
+.ant-popover-cyan .ant-popover-inner {
+  background-color: #13c2c2;
+}
+.ant-popover-cyan .ant-popover-arrow-content {
+  background-color: #13c2c2;
+}
+.ant-popover-lime .ant-popover-inner {
+  background-color: #a0d911;
+}
+.ant-popover-lime .ant-popover-arrow-content {
+  background-color: #a0d911;
+}
+.ant-popover-green .ant-popover-inner {
+  background-color: #52c41a;
+}
+.ant-popover-green .ant-popover-arrow-content {
+  background-color: #52c41a;
+}
+.ant-popover-blue .ant-popover-inner {
+  background-color: #1890ff;
+}
+.ant-popover-blue .ant-popover-arrow-content {
+  background-color: #1890ff;
+}
+.ant-popover-geekblue .ant-popover-inner {
+  background-color: #2f54eb;
+}
+.ant-popover-geekblue .ant-popover-arrow-content {
+  background-color: #2f54eb;
+}
+.ant-popover-purple .ant-popover-inner {
+  background-color: #722ed1;
+}
+.ant-popover-purple .ant-popover-arrow-content {
+  background-color: #722ed1;
+}
+.ant-popover-rtl {
+  direction: rtl;
+  text-align: right;
+}
+.ant-popover-rtl .ant-popover-message-title {
+  padding-right: 22px;
+  padding-left: 16px;
+}
+.ant-popover-rtl .ant-popover-buttons {
+  text-align: left;
+}
+.ant-popover-rtl .ant-popover-buttons button {
+  margin-right: 8px;
+  margin-left: 0;
+}
+.ant-btn {
+  padding: 4px 15px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+}
+.pandora-sdk-descriptions .pandora-sdk-remark-icon {
+  margin-left: 5px;
+}
+.pandora-sdk-descriptions .ant-descriptions-item-label {
+  color: #999;
+}
+.pandora-sdk-descriptions .ant-descriptions-item-content {
+  color: #333;
+}

package/lib/components/Descriptions/style.less

@@ -0,0 +1,15 @@
+@import 'antd/lib/popover/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-descriptions {
+  .@{sdk-prefix}-remark-icon {
+    margin-left: 5px;
+  }
+  .@{ant-prefix}-descriptions-item-label {
+    color: @font-color-9;
+  }
+
+  .@{ant-prefix}-descriptions-item-content {
+    color: @font-color-7;
+  }
+}

package/lib/components/Drawer/CloseIcon/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface IProps {
+    className?: string;
+    onClick?: (e: any) => void;
+}
+export declare const CloseIcon: React.FC<IProps>;
+export default CloseIcon;

package/lib/components/Drawer/CloseIcon/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var antd_1 = require("antd");
+var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
+var style_1 = require("../../../constants/style");
+var language_1 = require("../../../utils/language");
+var type_1 = require("../../../constants/language/modal/type");
+exports.CloseIcon = function (props) {
+    var className = props.className, onClick = props.onClick;
+    return (react_1.default.createElement(antd_1.Tooltip, { title: language_1.formatString(type_1.ModalLocale.close_tooltip) },
+        react_1.default.createElement(pandora_component_icons_1.Close, { className: classnames_1.default(style_1.SDK_PREFIX + "-close-icon", className), onClick: onClick })));
+};
+exports.default = exports.CloseIcon;

package/lib/components/Drawer/CloseIcon/style.css

@@ -0,0 +1,12 @@
+.ant-btn {
+  padding: 4px 15px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+}
+.pandora-sdk-close-icon {
+  font-size: 20px;
+}
+.pandora-sdk-close-icon:hover {
+  background: #f4f5f6;
+}

package/lib/components/Drawer/CloseIcon/style.less

@@ -0,0 +1,8 @@
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-close-icon {
+  font-size: 20px;
+  &:hover {
+    background: @close-icon-hover-color;
+  }
+}