@opensumi/ide-components 2.12.1-next-079c1930

package/lib/dialog/styles.less

@@ -0,0 +1,85 @@
+.wrapper {
+  .kt-modal-body {
+    background: var(--kt-modal-background);
+    border-color: var(--notifications-border);
+  }
+
+  .kt-modal-footer {
+    align-items: center;
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  .kticon-info-circle {
+    color: var(--kt-modalInfoIcon-foreground);
+  }
+
+  .kt-modal-close-x {
+    margin: 50% 50% 0 0;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    color: var(--kt-notificationsCloseIcon-foreground);
+  }
+}
+
+.kt-dialog-content {
+  display: flex;
+
+  .kt-dialog-content_area {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+
+    .kt-dialog-content_title {
+      line-height: 22px;
+      font-size: 14px;
+      margin: 0px 0px 8px 0px;
+    }
+  }
+}
+
+.footer {
+  border-top: 1px solid var(--notifications-border);
+}
+
+.kt-dialog-icon {
+  margin-right: 12px;
+
+  &:before {
+    font-size: 20px;
+  }
+}
+
+.kt-dialog-closex {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.kt-dialog-buttonWrap {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 14px;
+  justify-content: flex-end;
+
+  button {
+    margin: 10px 0 0 8px;
+  }
+}
+
+.kt-dialog-message {
+  color: var(--kt-modal-foreground);
+  line-height: 22px;
+  font-size: 14px;
+  word-break: break-all;
+  overflow: hidden;
+  flex: 1;
+  align-items: center;
+  display: inline-flex;
+}

package/lib/dropdown/dropdown.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+declare const Placements: ["topLeft", "topCenter", "topRight", "bottomLeft", "bottomCenter", "bottomRight"];
+declare type Placement = (typeof Placements)[number];
+declare type OverlayFunc = () => React.ReactNode;
+interface Align {
+    points?: [string, string];
+    offset?: [number, number];
+    targetOffset?: [number, number];
+    overflow?: {
+        adjustX?: boolean;
+        adjustY?: boolean;
+    };
+    useCssRight?: boolean;
+    useCssBottom?: boolean;
+    useCssTransform?: boolean;
+}
+export interface DropDownProps {
+    trigger?: ('click' | 'hover' | 'contextMenu')[];
+    overlay: React.ReactNode | OverlayFunc;
+    onVisibleChange?: (visible: boolean) => void;
+    visible?: boolean;
+    disabled?: boolean;
+    align?: Align;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    prefixCls?: string;
+    className?: string;
+    transitionName?: string;
+    placement?: Placement;
+    overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
+    forceRender?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    openClassName?: string;
+}
+export default class Dropdown extends React.Component<DropDownProps, any> {
+    static defaultProps: {
+        mouseEnterDelay: number;
+        mouseLeaveDelay: number;
+        placement: "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+    };
+    getTransitionName(): string;
+    renderOverlay: (prefixCls: string) => React.ReactNode;
+    renderDropDown: () => JSX.Element;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=dropdown.d.ts.map

package/lib/dropdown/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,UAAU,mFAOf,CAAC;AACF,aAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7C,aAAK,WAAW,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC;AAEzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC,EAAE,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,WAAW,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,EAAE,GAAG,CAAC;IACvE,MAAM,CAAC,YAAY;;;;MAIjB;IAEF,iBAAiB;IAWjB,aAAa,cAAe,MAAM,qBA0CjC;IAED,cAAc,oBAoCb;IAED,MAAM;CAGP"}

package/lib/dropdown/dropdown.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const rc_dropdown_1 = (0, tslib_1.__importDefault)(require("rc-dropdown"));
+const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
+const RightOutlined_1 = (0, tslib_1.__importDefault)(require("@ant-design/icons/RightOutlined"));
+const type_1 = require("../utils/type");
+const warning_1 = require("../utils/warning");
+const Placements = (0, type_1.tuple)('topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight');
+class Dropdown extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.renderOverlay = (prefixCls) => {
+            // rc-dropdown already can process the function of overlay, but we have check logic here.
+            // So we need render the element to check and pass back to rc-dropdown.
+            const { overlay } = this.props;
+            let overlayNode;
+            if (typeof overlay === 'function') {
+                overlayNode = overlay();
+            }
+            else {
+                overlayNode = overlay;
+            }
+            overlayNode = react_1.default.Children.only(overlayNode);
+            const overlayProps = overlayNode.props;
+            // Warning if use other mode
+            (0, warning_1.warning)(!overlayProps.mode || overlayProps.mode === 'vertical', `[Dropdown] mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`);
+            // menu cannot be selectable in dropdown defaultly
+            // menu should be focusable in dropdown defaultly
+            const { selectable = false, focusable = true } = overlayProps;
+            const expandIcon = (react_1.default.createElement("span", { className: `${prefixCls}-menu-submenu-arrow` },
+                react_1.default.createElement(RightOutlined_1.default, { className: `${prefixCls}-menu-submenu-arrow-icon` })));
+            const fixedModeOverlay = typeof overlayNode.type === 'string'
+                ? overlay
+                : react_1.default.cloneElement(overlayNode, {
+                    mode: 'vertical',
+                    selectable,
+                    focusable,
+                    expandIcon,
+                });
+            return fixedModeOverlay;
+        };
+        this.renderDropDown = () => {
+            const { prefixCls: customizePrefixCls, children, trigger, disabled, getPopupContainer, } = this.props;
+            const prefixCls = customizePrefixCls || 'kt-dropdown';
+            const child = react_1.default.Children.only(children);
+            const dropdownTrigger = react_1.default.cloneElement(child, {
+                className: (0, classnames_1.default)(child.props.className, `${prefixCls}-trigger`),
+                disabled,
+            });
+            const triggerActions = disabled ? [] : trigger;
+            let alignPoint;
+            if (triggerActions && triggerActions.indexOf('contextMenu') !== -1) {
+                alignPoint = true;
+            }
+            return (react_1.default.createElement(rc_dropdown_1.default, Object.assign({ alignPoint: alignPoint }, this.props, { prefixCls: prefixCls, getPopupContainer: getPopupContainer, transitionName: this.getTransitionName(), trigger: triggerActions, overlay: () => this.renderOverlay(prefixCls) }), dropdownTrigger));
+        };
+    }
+    getTransitionName() {
+        const { placement = '', transitionName } = this.props;
+        if (transitionName !== undefined) {
+            return transitionName;
+        }
+        if (placement.indexOf('top') >= 0) {
+            return 'slide-down';
+        }
+        return 'slide-up';
+    }
+    render() {
+        return this.renderDropDown();
+    }
+}
+exports.default = Dropdown;
+Dropdown.defaultProps = {
+    mouseEnterDelay: 0.15,
+    mouseLeaveDelay: 0.1,
+    placement: 'bottomLeft',
+};
+//# sourceMappingURL=dropdown.js.map

package/lib/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/dropdown/dropdown.tsx"],"names":[],"mappings":"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"}

package/lib/dropdown/index.d.ts

@@ -0,0 +1,5 @@
+import Dropdown from './dropdown';
+import './style.less';
+export { DropDownProps } from './dropdown';
+export { Dropdown };
+//# sourceMappingURL=index.d.ts.map

package/lib/dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dropdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/lib/dropdown/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const tslib_1 = require("tslib");
+const dropdown_1 = (0, tslib_1.__importDefault)(require("./dropdown"));
+exports.Dropdown = dropdown_1.default;
+require("./style.less");
+//# sourceMappingURL=index.js.map

package/lib/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dropdown/index.tsx"],"names":[],"mappings":";;;;AAAA,uEAAkC;AAKzB,mBALF,kBAAQ,CAKE;AAJjB,wBAAsB"}

package/lib/dropdown/style.less

@@ -0,0 +1,254 @@
+@import '../style/variable.less';
+@import '../style/mixins.less';
+
+@dropdown-prefix-cls: ~'@{kt-prefix}-dropdown';
+
+.@{dropdown-prefix-cls} {
+  .reset-component;
+
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: @zindex-dropdown;
+  display: block;
+
+  &::before {
+    position: absolute;
+    top: -7px;
+    right: 0;
+    bottom: -7px;
+    left: -7px;
+    z-index: -9999;
+    opacity: 0.0001;
+    content: ' ';
+  }
+
+  &-wrap {
+    position: relative;
+
+    .@{kt-prefix}-btn > .@{iconfont-css-prefix}-down {
+      .iconfont-size-under-12px(10px);
+    }
+
+    .@{iconfont-css-prefix}-down::before {
+      transition: transform 0.2s;
+    }
+  }
+
+  &-wrap-open {
+    .@{iconfont-css-prefix}-down::before {
+      transform: rotate(180deg);
+    }
+  }
+
+  &-hidden,
+  &-menu-hidden {
+    display: none;
+  }
+
+  &-menu {
+    position: relative;
+    margin: 0;
+    padding: @dropdown-edge-child-vertical-padding 0;
+    text-align: left;
+    list-style-type: none;
+    background-color: @component-background;
+    background-clip: padding-box;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-shadow: @box-shadow-base;
+    -webkit-transform: translate3d(0, 0, 0);
+
+    &-item-group-title {
+      padding: 5px @control-padding-horizontal;
+      color: @text-color-secondary;
+      transition: all 0.3s;
+    }
+
+    &-submenu-popup {
+      position: absolute;
+      z-index: @zindex-dropdown;
+
+      > .@{dropdown-prefix-cls}-menu {
+        transform-origin: 0 0;
+      }
+
+      ul,
+      li {
+        list-style: none;
+      }
+
+      ul {
+        margin-right: 0.3em;
+        margin-left: 0.3em;
+        padding: 0;
+      }
+    }
+
+    &-item,
+    &-submenu-title {
+      clear: both;
+      margin: 0;
+      padding: @dropdown-vertical-padding @control-padding-horizontal;
+      color: @text-color;
+      font-weight: normal;
+      font-size: @dropdown-font-size;
+      line-height: @dropdown-line-height;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      > .anticon:first-child,
+      > span > .anticon:first-child {
+        min-width: 12px;
+        margin-right: 8px;
+        font-size: @font-size-sm;
+      }
+
+      > a {
+        display: block;
+        margin: -5px -@control-padding-horizontal;
+        padding: 5px @control-padding-horizontal;
+        color: @text-color;
+        transition: all 0.3s;
+      }
+
+      &:first-child {
+        & when (@dropdown-edge-child-vertical-padding = 0) {
+          border-radius: @border-radius-base @border-radius-base 0 0;
+        }
+      }
+
+      &:last-child {
+        & when (@dropdown-edge-child-vertical-padding = 0) {
+          border-radius: 0 0 @border-radius-base @border-radius-base;
+        }
+      }
+
+      &-selected,
+      &-selected > a {
+        color: @dropdown-selected-color;
+        background-color: @item-active-bg;
+      }
+
+      &:hover {
+        background-color: @item-hover-bg;
+      }
+
+      &-disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+
+        &:hover {
+          color: @disabled-color;
+          background-color: @component-background;
+          cursor: not-allowed;
+        }
+      }
+
+      &-divider {
+        height: 1px;
+        margin: 4px 0;
+        overflow: hidden;
+        line-height: 0;
+        background-color: @border-color-split;
+      }
+
+      .@{dropdown-prefix-cls}-menu-submenu-arrow {
+        position: absolute;
+        right: @padding-xs;
+        &-icon {
+          color: @text-color-secondary;
+          font-style: normal;
+          .iconfont-size-under-12px(10px);
+        }
+      }
+    }
+
+    &-item-group-list {
+      margin: 0 8px;
+      padding: 0;
+      list-style: none;
+    }
+
+    &-submenu-title {
+      padding-right: 26px;
+    }
+
+    &-submenu-vertical {
+      position: relative;
+    }
+
+    &-submenu-vertical > & {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      min-width: 100%;
+      margin-left: 4px;
+      transform-origin: 0 0;
+    }
+
+    &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
+      &,
+      .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
+        color: @disabled-color;
+        background-color: @component-background;
+        cursor: not-allowed;
+      }
+    }
+
+    // https://github.com/ant-design/ant-design/issues/19264
+    &-submenu-selected &-submenu-title {
+      color: @primary-color;
+    }
+  }
+
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
+  &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
+  &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
+  &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
+  &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
+    animation-name: antSlideUpOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: antSlideDownOut;
+  }
+}
+
+.@{dropdown-prefix-cls}-trigger,
+.@{dropdown-prefix-cls}-link {
+  > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
+    .iconfont-size-under-12px(10px);
+  }
+}
+
+.@{dropdown-prefix-cls}-button {
+  white-space: nowrap;
+
+  &.@{kt-prefix}-btn-group > .@{kt-prefix}-btn:last-child:not(:first-child) {
+    padding-right: @padding-xs;
+    padding-left: @padding-xs;
+  }
+  .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
+    .iconfont-size-under-12px(10px);
+  }
+}

package/lib/icon/icon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defaultIconfont } from './iconfont/iconManager';
+import { IIconShapeOptions } from './util';
+import './styles.less';
+export declare type DefaultIconKeys = keyof typeof defaultIconfont;
+export interface IIconResourceOptions {
+    isDirectory?: boolean;
+    isOpenedDirectory?: boolean;
+    isSymbolicLink?: boolean;
+}
+export interface IiconContext<T extends string> {
+    getIcon: (iconKey: DefaultIconKeys | T, options?: IIconShapeOptions) => string;
+    getResourceIcon?: (url: string, options?: IIconResourceOptions) => string;
+}
+export declare const IconContext: React.Context<IiconContext<any>>;
+export declare function IconContextProvider(props: React.PropsWithChildren<{
+    value: IiconContext<any>;
+}>): JSX.Element;
+export interface IconBaseProps<T> extends IIconShapeOptions {
+    title?: string;
+    icon?: DefaultIconKeys | T;
+    iconClass?: string;
+    tooltip?: string;
+    size?: 'small' | 'large';
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    resourceOptions?: IIconResourceOptions;
+}
+export declare type IconProps<T = any> = IconBaseProps<T> & React.HTMLAttributes<HTMLSpanElement>;
+export declare const _InternalIcon: React.ForwardRefExoticComponent<IconBaseProps<any> & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Icon: <T = any>(props: IconProps<T>, ref: React.Ref<HTMLSpanElement>) => React.ReactElement;
+//# sourceMappingURL=icon.d.ts.map

package/lib/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAkB,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3D,OAAO,eAAe,CAAC;AAEvB,oBAAY,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM;IAC5C,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAC/E,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,oBAAoB,KAAK,MAAM,CAAC;CAC3E;AAED,eAAO,MAAM,WAAW,kCAEtB,CAAC;AAEH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC,eAQ/F;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,CAAE,SAAQ,iBAAiB;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,eAAe,GAAG,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAEnD,eAAe,CAAC,EAAE,oBAAoB,CAAC;CACxC;AAED,oBAAY,SAAS,CAAC,CAAC,GAAG,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;AA6E1F,eAAO,MAAM,aAAa,oIAAyD,CAAC;AAEpF,eAAO,MAAM,IAAI,sCAEV,MAAM,GAAG,CAAC,eAAe,CAAC,KAC5B,MAAM,YAAY,CAAC"}

package/lib/icon/icon.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = exports._InternalIcon = exports.IconContextProvider = exports.IconContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
+const iconManager_1 = require("./iconfont/iconManager");
+const util_1 = require("./util");
+require("./styles.less");
+exports.IconContext = react_1.default.createContext({
+    getIcon: (iconKey, options) => iconKey,
+});
+function IconContextProvider(props) {
+    return (react_1.default.createElement(exports.IconContext.Provider, { value: props.value },
+        react_1.default.createElement(exports.IconContext.Consumer, null, (value) => props.value === value ? props.children : null)));
+}
+exports.IconContextProvider = IconContextProvider;
+/**
+ * 在 IDE 集成环境下使用自定义图标时，建议提供自定义 IconKeys 类型
+ * @example
+ * ```ts
+ * const demo = () => (
+ *    <Icon<'foo' | 'bar'> icon='bar' />
+ * );
+ * //自定义前缀
+ * const demo = () => (
+ *    <Icon<'foo' | 'bar'> iconClass=`${customPrefix} bar` />
+ * );
+ * ```
+ */
+// tslint:disable-next-line:only-arrow-functions
+const IconBase = function (props, ref) {
+    const { size = 'small', loading, icon, iconClass, className, tooltip, rotate, anim, fill, disabled, onClick, children, resourceOptions } = props, restProps = (0, tslib_1.__rest)(props, ["size", "loading", "icon", "iconClass", "className", "tooltip", "rotate", "anim", "fill", "disabled", "onClick", "children", "resourceOptions"]);
+    const iconShapeOptions = { rotate, anim, fill };
+    let iconClx;
+    if (icon) {
+        // 因为 getIcon 默认是倒序查找优先级
+        // 这里的逻辑会导致是优先用 defaultIconFont 里面去查找
+        // 所以这里应该是跟 getIcon 逻辑表现不太一样
+        // 此外这里的 useContext 的话，作用看起来意义不大了，因为 getIcon 是个函数，本质上无法做到通知
+        // 这里为了兼容被废弃的 icon 使用了 `defaultIconMap` 去取值
+        // 但是上方的类型 DefaultIconKeys 里面已经不包含被废弃的 icon 了，避免继续使用废弃的图标
+        if (iconManager_1.defaultIconMap[icon]) {
+            iconClx = (0, util_1.getKaitianIcon)(icon, iconShapeOptions);
+        }
+        else {
+            const { getIcon, getResourceIcon } = react_1.default.useContext(exports.IconContext);
+            if (resourceOptions && getResourceIcon) {
+                iconClx = getResourceIcon(icon, resourceOptions);
+            }
+            else {
+                iconClx = getIcon(icon, iconShapeOptions);
+            }
+        }
+    }
+    else {
+        iconClx = iconClass;
+    }
+    return (react_1.default.createElement("span", Object.assign({}, restProps, { title: tooltip, onClick: onClick, ref: ref, className: (0, classnames_1.default)('kt-icon', iconClx, className, {
+            'kt-icon-loading': loading,
+            'kt-icon-disabled': !!disabled,
+            [`kt-icon-${size}`]: !!size,
+            'kt-icon-clickable': !!onClick,
+            'kt-icon-resource': !!resourceOptions,
+            'expanded': !!resourceOptions && resourceOptions.isOpenedDirectory,
+        }) }), children));
+};
+// for ts type usage for iconfont-cn.tsx
+exports._InternalIcon = react_1.default.forwardRef(IconBase);
+exports.Icon = react_1.default.forwardRef(IconBase);
+//# sourceMappingURL=icon.js.map

package/lib/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/icon/icon.tsx"],"names":[],"mappings":";;;;AAAA,+DAA0B;AAC1B,yEAA6B;AAE7B,wDAAyE;AACzE,iCAA2D;AAE3D,yBAAuB;AAeV,QAAA,WAAW,GAAG,eAAK,CAAC,aAAa,CAAoB;IAChE,OAAO,EAAE,CAAC,OAAO,EAAE,OAA2B,EAAE,EAAE,CAAC,OAAO;CAC3D,CAAC,CAAC;AAEH,SAAgB,mBAAmB,CAAC,KAA4D;IAC9F,OAAO,CACL,8BAAC,mBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK;QACtC,8BAAC,mBAAW,CAAC,QAAQ,QAClB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACpC,CACF,CACxB,CAAC;AACJ,CAAC;AARD,kDAQC;AAkBD;;;;;;;;;;;;GAYG;AAEH,gDAAgD;AAChD,MAAM,QAAQ,GAAG,UACf,KAAmB,EACnB,GAA+B;IAE/B,MAAM,EACJ,IAAI,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,EAC7B,SAAS,EAAE,SAAS,EAAE,OAAO,EAC7B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAC5B,OAAO,EAAE,QAAQ,EAAE,eAAe,KAChC,KAAK,EADgC,SAAS,uBAC9C,KAAK,EALH,gJAKL,CAAQ,CAAC;IACV,MAAM,gBAAgB,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAEhD,IAAI,OAA2B,CAAC;IAChC,IAAI,IAAI,EAAE;QACR,wBAAwB;QACxB,qCAAqC;QACrC,4BAA4B;QAC5B,2DAA2D;QAC3D,2CAA2C;QAC3C,yDAAyD;QACzD,IAAI,4BAAc,CAAC,IAAuB,CAAC,EAAE;YAC3C,OAAO,GAAG,IAAA,qBAAc,EAAC,IAAc,EAAE,gBAAgB,CAAC,CAAC;SAC5D;aAAM;YACL,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,eAAK,CAAC,UAAU,CAAC,mBAAW,CAAC,CAAC;YACnE,IAAI,eAAe,IAAI,eAAe,EAAE;gBACtC,OAAO,GAAG,eAAe,CAAC,IAAc,EAAE,eAAe,CAAC,CAAC;aAC5D;iBAAM;gBACL,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;aAC3C;SACF;KACF;SAAM;QACL,OAAO,GAAG,SAAS,CAAC;KACrB;IAED,OAAO,CACL,wDACM,SAAS,IACb,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAG,EACZ,SAAS,EACT,OAAO,EACP,SAAS,EACT;YACE,iBAAiB,EAAE,OAAO;YAC1B,kBAAkB,EAAE,CAAC,CAAC,QAAQ;YAC9B,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;YAC3B,mBAAmB,EAAE,CAAC,CAAC,OAAO;YAC9B,kBAAkB,EAAE,CAAC,CAAC,eAAe;YACrC,UAAU,EAAE,CAAC,CAAC,eAAe,IAAI,eAAe,CAAC,iBAAiB;SACnE,CACF,KAEA,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,wCAAwC;AAC3B,QAAA,aAAa,GAAG,eAAK,CAAC,UAAU,CAA6B,QAAQ,CAAC,CAAC;AAEvE,QAAA,IAAI,GAAG,eAAK,CAAC,UAAU,CAA6B,QAAQ,CAGlD,CAAC"}