@webiny/app-admin 5.43.2 → 6.0.0-alpha.0

package/components/IconPicker/IconPickerComponent.js

@@ -1,101 +1,81 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconPickerComponent = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _mobxReactLite = require("mobx-react-lite");
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _close = require("@material-design-icons/svg/outlined/close.svg");
-var _Menu = require("@webiny/ui/Menu");
-var _Tabs = require("@webiny/ui/Tabs");
-var _Typography = require("@webiny/ui/Typography");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _Progress = require("@webiny/ui/Progress");
-var _IconRenderer = require("./IconRenderer");
-var _IconPicker = require("./IconPicker.styles");
-var _IconPickerTab = require("./IconPickerTab");
-var _IconPickerPresenterProvider = require("./IconPickerPresenterProvider");
-var _IconType = require("./config/IconType");
-var _excluded = ["presenter", "label", "description", "removable"];
-var IconPickerComponent = exports.IconPickerComponent = (0, _mobxReactLite.observer)(function (_ref) {
-  var presenter = _ref.presenter,
-    label = _ref.label,
-    description = _ref.description,
-    removable = _ref.removable,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var value = props.value,
-    onChange = props.onChange;
-  var _ref2 = props.validation || {},
-    validationIsValid = _ref2.isValid,
-    validationMessage = _ref2.message;
-  var _presenter$vm = presenter.vm,
-    activeTab = _presenter$vm.activeTab,
-    isMenuOpened = _presenter$vm.isMenuOpened,
-    isLoading = _presenter$vm.isLoading,
-    iconTypes = _presenter$vm.iconTypes,
-    selectedIcon = _presenter$vm.selectedIcon,
-    size = _presenter$vm.size;
-  (0, _react.useEffect)(function () {
-    if (onChange && selectedIcon && !(0, _isEqual.default)(selectedIcon, value)) {
+import React, { useEffect, useCallback, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import isEqual from "lodash/isEqual";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, PopoverPrimitive } from "@webiny/admin-ui";
+import { IconPickerContent, IconPickerTrigger } from "./components";
+import { IconPickerPresenterProvider } from "./IconPickerPresenterProvider";
+import { ICON_PICKER_SIZE } from "./types";
+export const IconPickerComponent = observer(({
+  presenter,
+  label,
+  description,
+  removable,
+  required,
+  disabled,
+  ...props
+}) => {
+  const {
+    value,
+    onChange
+  } = props;
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = props.validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  const {
+    activeTab,
+    isMenuOpened,
+    isLoading,
+    iconTypes,
+    selectedIcon,
+    size
+  } = presenter.vm;
+  useEffect(() => {
+    if (onChange && selectedIcon && !isEqual(selectedIcon, value)) {
       onChange(selectedIcon);
     }
   }, [JSON.stringify(selectedIcon)]);
-  var setActiveTab = function setActiveTab(index) {
-    return presenter.setActiveTab(index);
-  };
-  var openMenu = function openMenu() {
-    return presenter.openMenu();
-  };
-  var closeMenu = function closeMenu() {
-    return presenter.closeMenu();
-  };
-  var removeIcon = (0, _react.useCallback)(function () {
+  const removeIcon = useCallback(() => {
     if (onChange) {
       presenter.setIcon(null);
       onChange(undefined);
     }
   }, [onChange]);
-  return /*#__PURE__*/_react.default.createElement(_IconPickerPresenterProvider.IconPickerPresenterProvider, {
+  const handleOnOpenChange = useCallback(open => {
+    if (open) {
+      return presenter.openMenu();
+    } else {
+      return presenter.closeMenu();
+    }
+  }, [presenter.openMenu, presenter.closeMenu]);
+  return /*#__PURE__*/React.createElement(IconPickerPresenterProvider, {
     presenter: presenter
-  }, /*#__PURE__*/_react.default.createElement(_IconPicker.IconPickerWrapper, null, label && /*#__PURE__*/_react.default.createElement(_IconPicker.IconPickerLabel, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "body1"
-  }, label)), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description
+  }), /*#__PURE__*/React.createElement(PopoverPrimitive, {
     open: isMenuOpened,
-    handle: /*#__PURE__*/_react.default.createElement(_IconPicker.IconPickerInput, null, selectedIcon ? /*#__PURE__*/_react.default.createElement(_IconRenderer.IconProvider, {
-      icon: selectedIcon
-    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, null)) : /*#__PURE__*/_react.default.createElement(_IconPicker.PlaceholderIcon, {
-      width: 32,
-      height: 32
-    })),
-    onClose: closeMenu,
-    onOpen: openMenu,
-    portalZIndex: 20
-  }, /*#__PURE__*/_react.default.createElement(_IconPicker.MenuHeader, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "body1"
-  }, "Select an icon"), value && removable && /*#__PURE__*/_react.default.createElement(_IconPicker.RemoveButton, {
-    onClick: removeIcon
-  }, "Remove"), /*#__PURE__*/_react.default.createElement(_close.ReactComponent, {
-    onClick: closeMenu
-  })), /*#__PURE__*/_react.default.createElement(_IconPicker.MenuContent, {
-    size: size
-  }, isLoading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
-    value: activeTab,
-    onActivate: function onActivate(value) {
-      return setActiveTab(value);
+    onOpenChange: handleOnOpenChange
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, null, /*#__PURE__*/React.createElement(IconPickerTrigger, {
+    icon: selectedIcon
+  })), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
+    style: {
+      width: size === ICON_PICKER_SIZE.SMALL ? "248px" : "328px"
     }
-  }, iconTypes.map(function (iconType) {
-    return /*#__PURE__*/_react.default.createElement(_IconType.IconTypeProvider, {
-      key: iconType.name,
-      type: iconType.name
-    }, /*#__PURE__*/_react.default.createElement(_IconPickerTab.IconPickerTabRenderer, null));
-  })))), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description)));
+  }, /*#__PURE__*/React.createElement(IconPickerContent, {
+    loading: isLoading,
+    removable: value && removable,
+    iconTypes: iconTypes,
+    activeTab: activeTab,
+    removeIcon: removeIcon
+  }))), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid
+  }));
 });
 
 //# sourceMappingURL=IconPickerComponent.js.map

package/components/IconPicker/IconPickerComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_mobxReactLite","_isEqual","_interopRequireDefault","_close","_Menu","_Tabs","_Typography","_FormElementMessage","_Progress","_IconRenderer","_IconPicker","_IconPickerTab","_IconPickerPresenterProvider","_IconType","_excluded","IconPickerComponent","exports","observer","_ref","presenter","label","description","removable","props","_objectWithoutProperties2","default","value","onChange","_ref2","validation","validationIsValid","isValid","validationMessage","message","_presenter$vm","vm","activeTab","isMenuOpened","isLoading","iconTypes","selectedIcon","size","useEffect","isEqual","JSON","stringify","setActiveTab","index","openMenu","closeMenu","removeIcon","useCallback","setIcon","undefined","createElement","IconPickerPresenterProvider","IconPickerWrapper","IconPickerLabel","Typography","use","Menu","open","handle","IconPickerInput","IconProvider","icon","IconRenderer","PlaceholderIcon","width","height","onClose","onOpen","portalZIndex","MenuHeader","RemoveButton","onClick","ReactComponent","MenuContent","CircularProgress","Tabs","onActivate","map","iconType","IconTypeProvider","key","name","type","IconPickerTabRenderer","FormElementMessage","error"],"sources":["IconPickerComponent.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport isEqual from \"lodash/isEqual\";\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/close.svg\";\n\nimport { Menu } from \"@webiny/ui/Menu\";\nimport { Tabs } from \"@webiny/ui/Tabs\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\n\nimport { IconPickerPresenter } from \"./IconPickerPresenter\";\nimport { IconProvider, IconRenderer } from \"./IconRenderer\";\nimport {\n    IconPickerWrapper,\n    IconPickerLabel,\n    IconPickerInput,\n    MenuContent,\n    MenuHeader,\n    PlaceholderIcon,\n    RemoveButton\n} from \"./IconPicker.styles\";\nimport { IconPickerTabRenderer } from \"./IconPickerTab\";\nimport { IconPickerPresenterProvider } from \"./IconPickerPresenterProvider\";\nimport { IconTypeProvider } from \"./config/IconType\";\nimport { Icon, ICON_PICKER_SIZE } from \"./types\";\n\nexport interface IconPickerProps extends FormComponentProps<Icon | undefined> {\n    label?: string;\n    description?: string;\n    size?: ICON_PICKER_SIZE;\n    removable?: boolean;\n}\n\nexport interface IconPickerComponentProps extends IconPickerProps {\n    presenter: IconPickerPresenter;\n}\n\nexport const IconPickerComponent = observer(\n    ({ presenter, label, description, removable, ...props }: IconPickerComponentProps) => {\n        const { value, onChange } = props;\n        const { isValid: validationIsValid, message: validationMessage } = props.validation || {};\n        const { activeTab, isMenuOpened, isLoading, iconTypes, selectedIcon, size } = presenter.vm;\n\n        useEffect(() => {\n            if (onChange && selectedIcon && !isEqual(selectedIcon, value)) {\n                onChange(selectedIcon);\n            }\n        }, [JSON.stringify(selectedIcon)]);\n\n        const setActiveTab = (index: number) => presenter.setActiveTab(index);\n\n        const openMenu = () => presenter.openMenu();\n        const closeMenu = () => presenter.closeMenu();\n\n        const removeIcon = useCallback(() => {\n            if (onChange) {\n                presenter.setIcon(null);\n                onChange(undefined);\n            }\n        }, [onChange]);\n\n        return (\n            <IconPickerPresenterProvider presenter={presenter}>\n                <IconPickerWrapper>\n                    {label && (\n                        <IconPickerLabel>\n                            <Typography use={\"body1\"}>{label}</Typography>\n                        </IconPickerLabel>\n                    )}\n\n                    <Menu\n                        open={isMenuOpened}\n                        handle={\n                            <IconPickerInput>\n                                {selectedIcon ? (\n                                    <IconProvider icon={selectedIcon}>\n                                        <IconRenderer />\n                                    </IconProvider>\n                                ) : (\n                                    <PlaceholderIcon width={32} height={32} />\n                                )}\n                            </IconPickerInput>\n                        }\n                        onClose={closeMenu}\n                        onOpen={openMenu}\n                        portalZIndex={20}\n                    >\n                        <MenuHeader>\n                            <Typography use={\"body1\"}>Select an icon</Typography>\n                            {value && removable && (\n                                <RemoveButton onClick={removeIcon}>Remove</RemoveButton>\n                            )}\n                            <CloseIcon onClick={closeMenu} />\n                        </MenuHeader>\n                        <MenuContent size={size}>\n                            {isLoading && <CircularProgress />}\n                            <Tabs value={activeTab} onActivate={value => setActiveTab(value)}>\n                                {iconTypes.map(iconType => (\n                                    <IconTypeProvider key={iconType.name} type={iconType.name}>\n                                        <IconPickerTabRenderer />\n                                    </IconTypeProvider>\n                                ))}\n                            </Tabs>\n                        </MenuContent>\n                    </Menu>\n\n                    {validationIsValid === false && (\n                        <FormElementMessage error>{validationMessage}</FormElementMessage>\n                    )}\n                    {validationIsValid !== false && description && (\n                        <FormElementMessage>{description}</FormElementMessage>\n                    )}\n                </IconPickerWrapper>\n            </IconPickerPresenterProvider>\n        );\n    }\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useCallback","useMemo","observer","isEqual","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","PopoverPrimitive","IconPickerContent","IconPickerTrigger","IconPickerPresenterProvider","ICON_PICKER_SIZE","IconPickerComponent","presenter","label","description","removable","required","disabled","props","value","onChange","isValid","validationIsValid","message","validationMessage","validation","invalid","activeTab","isMenuOpened","isLoading","iconTypes","selectedIcon","size","vm","JSON","stringify","removeIcon","setIcon","undefined","handleOnOpenChange","open","openMenu","closeMenu","createElement","text","onOpenChange","Trigger","icon","Content","style","width","SMALL","loading"],"sources":["IconPickerComponent.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport isEqual from \"lodash/isEqual\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentProps,\n    PopoverPrimitive\n} from \"@webiny/admin-ui\";\nimport { IconPickerContent, IconPickerTrigger } from \"./components\";\nimport { IconPickerPresenter } from \"./IconPickerPresenter\";\nimport { IconPickerPresenterProvider } from \"./IconPickerPresenterProvider\";\nimport { Icon, ICON_PICKER_SIZE } from \"./types\";\n\nexport interface IconPickerProps extends FormComponentProps {\n    size?: ICON_PICKER_SIZE;\n    removable?: boolean;\n    value?: Icon;\n    onChange?: (value: Icon | undefined) => void;\n}\n\nexport interface IconPickerComponentProps extends IconPickerProps {\n    presenter: IconPickerPresenter;\n}\n\nexport const IconPickerComponent = observer(\n    ({\n        presenter,\n        label,\n        description,\n        removable,\n        required,\n        disabled,\n        ...props\n    }: IconPickerComponentProps) => {\n        const { value, onChange } = props;\n        const { isValid: validationIsValid, message: validationMessage } = props.validation || {};\n        const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n        const { activeTab, isMenuOpened, isLoading, iconTypes, selectedIcon, size } = presenter.vm;\n\n        useEffect(() => {\n            if (onChange && selectedIcon && !isEqual(selectedIcon, value)) {\n                onChange(selectedIcon);\n            }\n        }, [JSON.stringify(selectedIcon)]);\n\n        const removeIcon = useCallback(() => {\n            if (onChange) {\n                presenter.setIcon(null);\n                onChange(undefined);\n            }\n        }, [onChange]);\n\n        const handleOnOpenChange = useCallback(\n            (open: boolean) => {\n                if (open) {\n                    return presenter.openMenu();\n                } else {\n                    return presenter.closeMenu();\n                }\n            },\n            [presenter.openMenu, presenter.closeMenu]\n        );\n\n        return (\n            <IconPickerPresenterProvider presenter={presenter}>\n                <FormComponentLabel text={label} required={required} disabled={disabled} />\n                <FormComponentDescription text={description} />\n                <PopoverPrimitive open={isMenuOpened} onOpenChange={handleOnOpenChange}>\n                    <PopoverPrimitive.Trigger>\n                        <IconPickerTrigger icon={selectedIcon} />\n                    </PopoverPrimitive.Trigger>\n                    <PopoverPrimitive.Content\n                        style={{ width: size === ICON_PICKER_SIZE.SMALL ? \"248px\" : \"328px\" }}\n                    >\n                        <IconPickerContent\n                            loading={isLoading}\n                            removable={value && removable}\n                            iconTypes={iconTypes}\n                            activeTab={activeTab}\n                            removeIcon={removeIcon}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive>\n                <FormComponentErrorMessage text={validationMessage} invalid={invalid} />\n            </IconPickerPresenterProvider>\n        );\n    }\n);\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconPickerPresenter.d.ts

@@ -6,12 +6,12 @@ export interface IconPickerPresenterInterface {
     setIcon(icon: Icon): void;
     addIcon(icon: Icon): void;
     setFilter(value: string): void;
-    setActiveTab(index: number): void;
+    setActiveTab(index: string): void;
     openMenu(): void;
     closeMenu(): void;
     get vm(): {
         isLoading: boolean;
-        activeTab: number;
+        activeTab?: string;
         isMenuOpened: boolean;
         icons: Icon[];
         iconTypes: IconType[];
@@ -30,7 +30,7 @@ export declare class IconPickerPresenter implements IconPickerPresenterInterface
     constructor(repository: IconRepository, size?: string);
     load(icon?: Icon | null): Promise<void>;
     get vm(): {
-        activeTab: number;
+        activeTab: string | undefined;
         isMenuOpened: boolean;
         isLoading: boolean;
         icons: Icon[];
@@ -42,11 +42,12 @@ export declare class IconPickerPresenter implements IconPickerPresenterInterface
     addIcon(icon: Icon): void;
     closeMenu(): void;
     openMenu(): void;
-    setActiveTab(index: number): void;
+    setActiveTab(value?: string): void;
     setIcon(icon: Icon | null): void;
     setFilter(value: string): void;
     private getFilteredIcons;
     private getActiveTabByType;
+    private getDefaultTab;
     private resetActiveTab;
     private detectSelectedIcon;
 }

package/components/IconPicker/IconPickerPresenter.js

@@ -1,118 +1,77 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconPickerPresenter = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _mobx = require("mobx");
-var IconPickerPresenter = exports.IconPickerPresenter = /*#__PURE__*/function () {
-  function IconPickerPresenter(repository, size) {
-    (0, _classCallCheck2.default)(this, IconPickerPresenter);
-    (0, _defineProperty2.default)(this, "selectedIcon", null);
-    (0, _defineProperty2.default)(this, "filter", "");
-    (0, _defineProperty2.default)(this, "activeTab", 0);
-    (0, _defineProperty2.default)(this, "isMenuOpened", false);
+import { makeAutoObservable, toJS } from "mobx";
+export class IconPickerPresenter {
+  selectedIcon = null;
+  filter = "";
+  activeTab = undefined;
+  isMenuOpened = false;
+  constructor(repository, size) {
     this.repository = repository;
     this.size = size;
-    (0, _mobx.makeAutoObservable)(this);
+    makeAutoObservable(this);
   }
-  return (0, _createClass2.default)(IconPickerPresenter, [{
-    key: "load",
-    value: async function load() {
-      var icon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      if (icon?.value) {
-        this.selectedIcon = icon;
-      }
-      await this.repository.loadIcons();
-      if (icon && !icon?.value) {
-        this.detectSelectedIcon(icon);
-      }
-    }
-  }, {
-    key: "vm",
-    get: function get() {
-      return {
-        activeTab: this.activeTab,
-        isMenuOpened: this.isMenuOpened,
-        isLoading: this.repository.getLoading().isLoading,
-        icons: this.getFilteredIcons(),
-        iconTypes: this.repository.getIconTypes(),
-        // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.
-        selectedIcon: (0, _mobx.toJS)(this.selectedIcon),
-        filter: this.filter,
-        size: this.size
-      };
-    }
-  }, {
-    key: "addIcon",
-    value: function addIcon(icon) {
-      this.repository.addIcon(icon);
-    }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      this.isMenuOpened = false;
-    }
-  }, {
-    key: "openMenu",
-    value: function openMenu() {
-      this.isMenuOpened = true;
-      this.resetActiveTab();
-    }
-  }, {
-    key: "setActiveTab",
-    value: function setActiveTab(index) {
-      this.activeTab = index;
-    }
-  }, {
-    key: "setIcon",
-    value: function setIcon(icon) {
+  async load(icon = null) {
+    if (icon?.value) {
       this.selectedIcon = icon;
     }
-  }, {
-    key: "setFilter",
-    value: function setFilter(value) {
-      this.filter = value;
-    }
-  }, {
-    key: "getFilteredIcons",
-    value: function getFilteredIcons() {
-      var _this = this;
-      var hyphenUnderscoreRegex = /[-_]/g;
-      var icons = this.repository.getIcons();
-      return icons.filter(function (icon) {
-        return icon.name.replace(hyphenUnderscoreRegex, " ").toLowerCase().includes(_this.filter.toLowerCase());
-      });
-    }
-  }, {
-    key: "getActiveTabByType",
-    value: function getActiveTabByType(type) {
-      var iconTypes = this.repository.getIconTypes();
-      var index = iconTypes.findIndex(function (iconsByType) {
-        return iconsByType.name === type;
-      });
-      return index !== -1 ? index : 0;
+    await this.repository.loadIcons();
+    if (icon && !icon?.value) {
+      this.detectSelectedIcon(icon);
     }
-  }, {
-    key: "resetActiveTab",
-    value: function resetActiveTab() {
-      this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : 0);
-    }
-  }, {
-    key: "detectSelectedIcon",
-    value: function detectSelectedIcon(icon) {
-      var iconByName = this.repository.getIcons().find(function (x) {
-        return x.name === icon.name && icon.type === x.type;
-      });
-      if (iconByName) {
-        this.selectedIcon = iconByName;
-      }
+  }
+  get vm() {
+    return {
+      activeTab: this.activeTab,
+      isMenuOpened: this.isMenuOpened,
+      isLoading: this.repository.getLoading().isLoading,
+      icons: this.getFilteredIcons(),
+      iconTypes: this.repository.getIconTypes(),
+      // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.
+      selectedIcon: toJS(this.selectedIcon),
+      filter: this.filter,
+      size: this.size
+    };
+  }
+  addIcon(icon) {
+    this.repository.addIcon(icon);
+  }
+  closeMenu() {
+    this.isMenuOpened = false;
+  }
+  openMenu() {
+    this.isMenuOpened = true;
+    this.resetActiveTab();
+  }
+  setActiveTab(value) {
+    this.activeTab = value;
+  }
+  setIcon(icon) {
+    this.selectedIcon = icon;
+  }
+  setFilter(value) {
+    this.filter = value;
+  }
+  getFilteredIcons() {
+    const hyphenUnderscoreRegex = /[-_]/g;
+    const icons = this.repository.getIcons();
+    return icons.filter(icon => icon.name.replace(hyphenUnderscoreRegex, " ").toLowerCase().includes(this.filter.toLowerCase()));
+  }
+  getActiveTabByType(type) {
+    const iconTypes = this.repository.getIconTypes();
+    const iconType = iconTypes.find(iconsByType => iconsByType.name === type);
+    return iconType?.name || iconTypes[0].name;
+  }
+  getDefaultTab() {
+    return this.repository.getIconTypes()[0].name;
+  }
+  resetActiveTab() {
+    this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : this.getDefaultTab());
+  }
+  detectSelectedIcon(icon) {
+    const iconByName = this.repository.getIcons().find(x => x.name === icon.name && icon.type === x.type);
+    if (iconByName) {
+      this.selectedIcon = iconByName;
     }
-  }]);
-}();
+  }
+}
 
 //# sourceMappingURL=IconPickerPresenter.js.map

package/components/IconPicker/IconPickerPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","IconPickerPresenter","exports","repository","size","_classCallCheck2","default","_defineProperty2","makeAutoObservable","_createClass2","key","value","load","icon","arguments","length","undefined","selectedIcon","loadIcons","detectSelectedIcon","get","activeTab","isMenuOpened","isLoading","getLoading","icons","getFilteredIcons","iconTypes","getIconTypes","toJS","filter","addIcon","closeMenu","openMenu","resetActiveTab","setActiveTab","index","setIcon","setFilter","_this","hyphenUnderscoreRegex","getIcons","name","replace","toLowerCase","includes","getActiveTabByType","type","findIndex","iconsByType","iconByName","find","x"],"sources":["IconPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\n\nimport { IconRepository } from \"./IconRepository\";\nimport { Icon } from \"./types\";\nimport { IconType } from \"./config\";\n\nexport interface IconPickerPresenterInterface {\n    load(icon: Icon): Promise<void>;\n    setIcon(icon: Icon): void;\n    addIcon(icon: Icon): void;\n    setFilter(value: string): void;\n    setActiveTab(index: number): void;\n    openMenu(): void;\n    closeMenu(): void;\n    get vm(): {\n        isLoading: boolean;\n        activeTab: number;\n        isMenuOpened: boolean;\n        icons: Icon[];\n        iconTypes: IconType[];\n        selectedIcon: Icon | null;\n        filter: string;\n        size?: string;\n    };\n}\n\nexport class IconPickerPresenter implements IconPickerPresenterInterface {\n    private repository: IconRepository;\n    private selectedIcon: Icon | null = null;\n    private filter = \"\";\n    private activeTab = 0;\n    private isMenuOpened = false;\n    private size: string | undefined;\n\n    constructor(repository: IconRepository, size?: string) {\n        this.repository = repository;\n        this.size = size;\n        makeAutoObservable(this);\n    }\n\n    async load(icon: Icon | null = null) {\n        if (icon?.value) {\n            this.selectedIcon = icon;\n        }\n\n        await this.repository.loadIcons();\n\n        if (icon && !icon?.value) {\n            this.detectSelectedIcon(icon);\n        }\n    }\n\n    get vm() {\n        return {\n            activeTab: this.activeTab,\n            isMenuOpened: this.isMenuOpened,\n            isLoading: this.repository.getLoading().isLoading,\n            icons: this.getFilteredIcons(),\n            iconTypes: this.repository.getIconTypes(),\n            // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.\n            selectedIcon: toJS(this.selectedIcon),\n            filter: this.filter,\n            size: this.size\n        };\n    }\n\n    addIcon(icon: Icon) {\n        this.repository.addIcon(icon);\n    }\n\n    closeMenu(): void {\n        this.isMenuOpened = false;\n    }\n\n    openMenu(): void {\n        this.isMenuOpened = true;\n        this.resetActiveTab();\n    }\n\n    setActiveTab(index: number) {\n        this.activeTab = index;\n    }\n\n    setIcon(icon: Icon | null) {\n        this.selectedIcon = icon;\n    }\n\n    setFilter(value: string) {\n        this.filter = value;\n    }\n\n    private getFilteredIcons() {\n        const hyphenUnderscoreRegex = /[-_]/g;\n        const icons = this.repository.getIcons();\n\n        return icons.filter(icon =>\n            icon.name\n                .replace(hyphenUnderscoreRegex, \" \")\n                .toLowerCase()\n                .includes(this.filter.toLowerCase())\n        );\n    }\n\n    private getActiveTabByType(type: string) {\n        const iconTypes = this.repository.getIconTypes();\n        const index = iconTypes.findIndex(iconsByType => iconsByType.name === type);\n\n        return index !== -1 ? index : 0;\n    }\n\n    private resetActiveTab() {\n        this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : 0);\n    }\n\n    private detectSelectedIcon(icon: Icon) {\n        const iconByName = this.repository\n            .getIcons()\n            .find(x => x.name === icon.name && icon.type === x.type);\n\n        if (iconByName) {\n            this.selectedIcon = iconByName;\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["makeAutoObservable","toJS","IconPickerPresenter","selectedIcon","filter","activeTab","undefined","isMenuOpened","constructor","repository","size","load","icon","value","loadIcons","detectSelectedIcon","vm","isLoading","getLoading","icons","getFilteredIcons","iconTypes","getIconTypes","addIcon","closeMenu","openMenu","resetActiveTab","setActiveTab","setIcon","setFilter","hyphenUnderscoreRegex","getIcons","name","replace","toLowerCase","includes","getActiveTabByType","type","iconType","find","iconsByType","getDefaultTab","iconByName","x"],"sources":["IconPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\n\nimport { IconRepository } from \"./IconRepository\";\nimport { Icon } from \"./types\";\nimport { IconType } from \"./config\";\n\nexport interface IconPickerPresenterInterface {\n    load(icon: Icon): Promise<void>;\n    setIcon(icon: Icon): void;\n    addIcon(icon: Icon): void;\n    setFilter(value: string): void;\n    setActiveTab(index: string): void;\n    openMenu(): void;\n    closeMenu(): void;\n    get vm(): {\n        isLoading: boolean;\n        activeTab?: string;\n        isMenuOpened: boolean;\n        icons: Icon[];\n        iconTypes: IconType[];\n        selectedIcon: Icon | null;\n        filter: string;\n        size?: string;\n    };\n}\n\nexport class IconPickerPresenter implements IconPickerPresenterInterface {\n    private repository: IconRepository;\n    private selectedIcon: Icon | null = null;\n    private filter = \"\";\n    private activeTab: string | undefined = undefined;\n    private isMenuOpened = false;\n    private size: string | undefined;\n\n    constructor(repository: IconRepository, size?: string) {\n        this.repository = repository;\n        this.size = size;\n        makeAutoObservable(this);\n    }\n\n    async load(icon: Icon | null = null) {\n        if (icon?.value) {\n            this.selectedIcon = icon;\n        }\n\n        await this.repository.loadIcons();\n\n        if (icon && !icon?.value) {\n            this.detectSelectedIcon(icon);\n        }\n    }\n\n    get vm() {\n        return {\n            activeTab: this.activeTab,\n            isMenuOpened: this.isMenuOpened,\n            isLoading: this.repository.getLoading().isLoading,\n            icons: this.getFilteredIcons(),\n            iconTypes: this.repository.getIconTypes(),\n            // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.\n            selectedIcon: toJS(this.selectedIcon),\n            filter: this.filter,\n            size: this.size\n        };\n    }\n\n    addIcon(icon: Icon) {\n        this.repository.addIcon(icon);\n    }\n\n    closeMenu(): void {\n        this.isMenuOpened = false;\n    }\n\n    openMenu(): void {\n        this.isMenuOpened = true;\n        this.resetActiveTab();\n    }\n\n    setActiveTab(value?: string) {\n        this.activeTab = value;\n    }\n\n    setIcon(icon: Icon | null) {\n        this.selectedIcon = icon;\n    }\n\n    setFilter(value: string) {\n        this.filter = value;\n    }\n\n    private getFilteredIcons() {\n        const hyphenUnderscoreRegex = /[-_]/g;\n        const icons = this.repository.getIcons();\n\n        return icons.filter(icon =>\n            icon.name\n                .replace(hyphenUnderscoreRegex, \" \")\n                .toLowerCase()\n                .includes(this.filter.toLowerCase())\n        );\n    }\n\n    private getActiveTabByType(type: string) {\n        const iconTypes = this.repository.getIconTypes();\n        const iconType = iconTypes.find(iconsByType => iconsByType.name === type);\n\n        return iconType?.name || iconTypes[0].name;\n    }\n\n    private getDefaultTab() {\n        return this.repository.getIconTypes()[0].name;\n    }\n\n    private resetActiveTab() {\n        this.setActiveTab(\n            this.selectedIcon\n                ? this.getActiveTabByType(this.selectedIcon.type)\n                : this.getDefaultTab()\n        );\n    }\n\n    private detectSelectedIcon(icon: Icon) {\n        const iconByName = this.repository\n            .getIcons()\n            .find(x => x.name === icon.name && icon.type === x.type);\n\n        if (iconByName) {\n            this.selectedIcon = iconByName;\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconPickerPresenter.test.js

@@ -1,15 +1,13 @@
-"use strict";
-
-var _IconPickerPresenter = require("./IconPickerPresenter");
-var _IconRepository = require("./IconRepository");
-var mockIconTypes = [{
+import { IconPickerPresenter } from "./IconPickerPresenter";
+import { IconRepository } from "./IconRepository";
+const mockIconTypes = [{
   name: "icon"
 }, {
   name: "emoji"
 }, {
   name: "custom"
 }];
-var mockIcons = [{
+const mockIcons = [{
   type: "emoji",
   name: "thumbs_up",
   value: "👍",
@@ -21,26 +19,26 @@ var mockIcons = [{
   value: '<path fill="currentColor" d="M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z"/>',
   category: "Business"
 }];
-var mockIconPackProviders = [{
+const mockIconPackProviders = [{
   name: "mock_icons",
-  getIcons: async function getIcons() {
+  getIcons: async () => {
     return mockIcons;
   }
 }];
-describe("IconPickerPresenter", function () {
-  var icon = {
+describe("IconPickerPresenter", () => {
+  const icon = {
     type: "icon",
     name: "solid_bullseye",
     value: '<path fill="currentColor" d="M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z"/>',
     category: "Business",
     color: "#282fe6"
   };
-  var presenter;
-  beforeEach(function () {
-    var repository = new _IconRepository.IconRepository(mockIconTypes, mockIconPackProviders);
-    presenter = new _IconPickerPresenter.IconPickerPresenter(repository);
+  let presenter;
+  beforeEach(() => {
+    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+    presenter = new IconPickerPresenter(repository);
   });
-  it("should create an IconPickerPresenter with the `vm` definition", async function () {
+  it("should create an IconPickerPresenter with the `vm` definition", async () => {
     // let's load icons and set a predefined `selectedIcon`
     await presenter.load(icon);
 
@@ -50,7 +48,7 @@ describe("IconPickerPresenter", function () {
     // `vm` should have the expected `icons` definition
     expect(presenter.vm.icons).toEqual(mockIcons);
   });
-  it("should be able to select an icon", async function () {
+  it("should be able to select an icon", async () => {
     // let's load icons
     await presenter.load();
 
@@ -60,7 +58,7 @@ describe("IconPickerPresenter", function () {
     // `vm` should have the expected `selectedIcon` value
     expect(presenter.vm.selectedIcon).toEqual(presenter.vm.icons[0]);
   });
-  it("should be able to add an icon", async function () {
+  it("should be able to add an icon", async () => {
     // let's load icons
     await presenter.load();
 
@@ -71,9 +69,9 @@ describe("IconPickerPresenter", function () {
     expect(presenter.vm.icons.length).toBe(3);
 
     // `vm` should have the expected `icons` value
-    expect(presenter.vm.icons).toEqual([].concat(mockIcons, [icon]));
+    expect(presenter.vm.icons).toEqual([...mockIcons, icon]);
   });
-  it("should be able to filter icons by name", async function () {
+  it("should be able to filter icons by name", async () => {
     // let's load icons
     await presenter.load();
 
@@ -86,15 +84,15 @@ describe("IconPickerPresenter", function () {
     // `vm` should have filtered icon
     expect(presenter.vm.icons[0]).toEqual(mockIcons[1]);
   });
-  it("should be able to set active tab on menu open", async function () {
+  it("should be able to set active tab on menu open", async () => {
     // let's load icons and set a predefined `selectedIcon`
     await presenter.load(mockIcons[0]);
 
     // default `isMenuOpened` should be false
     expect(presenter.vm.isMenuOpened).toBe(false);
 
-    // default `activeTab` should be 0
-    expect(presenter.vm.activeTab).toBe(0);
+    // default `activeTab` should be handled by the component itself
+    expect(presenter.vm.activeTab).toBe(undefined);
 
     // should be able to set `isMenuOpened`
     // should be able to set `activeTab` based on `selectedIcon` type
@@ -104,7 +102,7 @@ describe("IconPickerPresenter", function () {
     expect(presenter.vm.isMenuOpened).toBe(true);
 
     // `vm` should have the expected `activeTab` value
-    expect(presenter.vm.activeTab).toBe(1);
+    expect(presenter.vm.activeTab).toBe("emoji");
   });
 });