@luscii-healthtech/web-ui 2.7.1 → 2.8.0

package/dist/components/CheckBoxListModal/CheckboxListModal.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export interface Item {
+    id: string;
+    label: string;
+    isChecked: boolean;
+    group?: string;
+    isPinned?: boolean;
+}
+export interface Group {
+    title?: string;
+    items: Item[];
+}
+interface CheckboxListModalTexts {
+    title: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    searchPlaceHolder?: string;
+    emptyState: string;
+}
+export interface CheckboxListModalProps {
+    texts: CheckboxListModalTexts;
+    initialItems: Array<Item>;
+    isLoadingInitialItems?: boolean;
+    isOpen: boolean;
+    onSave: (newItems: Item[]) => void;
+    onCloseClick: () => void;
+    filterItem: (item: Item, searchQuery: string) => boolean;
+    className?: string;
+    hasSearch: boolean;
+}
+export declare const CheckboxListModal: ({ texts, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem, className, hasSearch, }: CheckboxListModalProps) => JSX.Element;
+export {};

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIn
 export { default as Menu } from "./components/Menu/Menu";
 export { List, ListProps, ListItemProps, OnAssetLoadErrorPayload, } from "./components/List/List";
 export { CheckboxList, CheckboxListProps, } from "./components/CheckboxList/CheckboxList";
+export { CheckboxListModal, CheckboxListModalProps, } from "./components/CheckBoxListModal/CheckboxListModal";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";

package/dist/web-ui-tailwind.css

@@ -1613,6 +1613,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -2065,6 +2069,10 @@ video {
   width: 26rem;
 }
 
+.w-130 {
+  width: 32.5rem;
+}
+
 .w-auto {
   width: auto;
 }

package/dist/web-ui.cjs.development.js

@@ -18,6 +18,7 @@ var ClipboardJS = _interopDefault(require('clipboard'));
 var ReactSelect = require('react-select');
 var ReactSelect__default = _interopDefault(ReactSelect);
 var dragula = _interopDefault(require('react-dragula'));
+var groupBy = _interopDefault(require('lodash/groupBy'));
 var debounce = _interopDefault(require('lodash.debounce'));
 var ReactQuill = _interopDefault(require('react-quill'));
 require('react-quill/dist/quill.snow.css');
@@ -3280,7 +3281,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     type: "strong",
     text: groupTitle || "",
     className: " ml-4"
-  }), " ", ":"), /*#__PURE__*/React__default.createElement(Checkbox, {
+  }), " "), /*#__PURE__*/React__default.createElement(Checkbox, {
     onChange: handleGroupClick,
     className: "ml-auto",
     isChecked: groupCheckboxState === CheckboxState.CHECKED,
@@ -3327,6 +3328,170 @@ var CheckboxList = function CheckboxList(_ref) {
   }));
 };
 
+var SearchIcon = function SearchIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.5 13.9996H14.71L14.43 13.7296C15.63 12.3296 16.25 10.4196 15.91 8.38965C15.44 5.60965 13.12 3.38965 10.32 3.04965C6.09001 2.52965 2.53002 6.08965 3.05002 10.3196C3.39002 13.1196 5.61002 15.4396 8.39002 15.9096C10.42 16.2496 12.33 15.6296 13.73 14.4296L14 14.7096V15.4996L18.25 19.7496C18.66 20.1596 19.33 20.1596 19.74 19.7496C20.15 19.3396 20.15 18.6696 19.74 18.2596L15.5 13.9996ZM9.50002 13.9996C7.01002 13.9996 5.00002 11.9896 5.00002 9.49965C5.00002 7.00965 7.01002 4.99965 9.50002 4.99965C11.99 4.99965 14 7.00965 14 9.49965C14 11.9896 11.99 13.9996 9.50002 13.9996Z",
+    fill: "currentColor"
+  }));
+};
+
+var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
+    icon: SearchIcon,
+    type: "text",
+    clearable: true,
+    ref: ref
+  }));
+});
+
+var transformToGroups = function transformToGroups(items) {
+  var pinned = items.find(function (option) {
+    return option.isPinned;
+  });
+  var itemsWithGroup = items.filter(function (option) {
+    return option.group;
+  });
+  var groups = Object.entries(groupBy(itemsWithGroup, "group")).map(function (group) {
+    return {
+      title: group[0],
+      items: group[1].sort(function (a, b) {
+        return a.label > b.label ? 1 : b.label > a.label ? -1 : 0;
+      })
+    };
+  });
+  var itemsWithoutGroup = items.filter(function (option) {
+    return !option.group;
+  });
+  var restGroup = {
+    name: undefined,
+    items: itemsWithoutGroup
+  };
+
+  if (pinned) {
+    var myGroup = {
+      items: [pinned]
+    };
+    return [myGroup].concat(groups, [restGroup]);
+  }
+
+  return [].concat(groups, [restGroup]);
+};
+
+var CheckboxListModal = function CheckboxListModal(_ref) {
+  var texts = _ref.texts,
+      initialItems = _ref.initialItems,
+      isLoadingInitialItems = _ref.isLoadingInitialItems,
+      isOpen = _ref.isOpen,
+      onSave = _ref.onSave,
+      onCloseClick = _ref.onCloseClick,
+      _ref$filterItem = _ref.filterItem,
+      filterItem = _ref$filterItem === void 0 ? function () {
+    return true;
+  } : _ref$filterItem,
+      className = _ref.className,
+      _ref$hasSearch = _ref.hasSearch,
+      hasSearch = _ref$hasSearch === void 0 ? false : _ref$hasSearch;
+  var containerClassName = classNames(className);
+
+  var _useState = React.useState([]),
+      items = _useState[0],
+      setItems = _useState[1];
+
+  var _useState2 = React.useState([]),
+      visibleItems = _useState2[0],
+      setVisibleItems = _useState2[1];
+
+  var _useState3 = React.useState([]),
+      groups = _useState3[0],
+      setGroups = _useState3[1];
+
+  var _useState4 = React.useState(""),
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  React.useEffect(function () {
+    setItems(initialItems);
+  }, [initialItems]);
+  React.useEffect(function () {
+    setVisibleItems(items.filter(function (item) {
+      return filterItem(item, search);
+    }));
+  }, [items, search]);
+  React.useEffect(function () {
+    setGroups(transformToGroups(visibleItems));
+  }, [visibleItems]);
+
+  var handleOnItemChange = function handleOnItemChange(event) {
+    var updatedItems = [].concat(items);
+    var index = updatedItems.findIndex(function (item) {
+      return item.id === event.id;
+    });
+    updatedItems[index].isChecked = event.newCheckedValue;
+    setItems(updatedItems);
+  };
+
+  var handleOnCloseClick = function handleOnCloseClick(event) {
+    event.stopPropagation();
+    onCloseClick();
+  };
+
+  var handleOnSaveClick = function handleOnSaveClick() {
+    onSave(items.filter(function (item) {
+      return item.isChecked;
+    }));
+    onCloseClick();
+  };
+
+  var handleOnSearchChange = function handleOnSearchChange(event) {
+    var _event$currentTarget$;
+
+    setSearch((_event$currentTarget$ = event.currentTarget.value) != null ? _event$currentTarget$ : "");
+  };
+
+  var closeButton = /*#__PURE__*/React.createElement(SecondaryButton, {
+    text: texts.cancelLabel,
+    onClick: handleOnCloseClick,
+    key: "close-checkbox-list-modal",
+    className: "mr-2"
+  });
+  var saveButton = /*#__PURE__*/React.createElement(PrimaryButton, {
+    text: texts.confirmLabel,
+    onClick: handleOnSaveClick,
+    key: "save-selected-checkbox-list-items"
+  });
+  return /*#__PURE__*/React.createElement(ModalWithButtons, {
+    isOpen: isOpen,
+    title: texts.title,
+    onCloseClick: handleOnCloseClick,
+    withPadding: true,
+    shouldCloseOnOverlayClick: true,
+    className: containerClassName,
+    buttons: [closeButton, saveButton],
+    buttonsAlignment: "justify-end"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-h-135 overflow-y-auto pr-4"
+  }, isLoadingInitialItems && /*#__PURE__*/React.createElement(LoadingIndicator, null), hasSearch && !isLoadingInitialItems && /*#__PURE__*/React.createElement(SearchInput, {
+    className: "w-130 mb-2",
+    value: search,
+    placeholder: texts.searchPlaceHolder,
+    onChange: handleOnSearchChange
+  }), !isLoadingInitialItems && (items == null ? void 0 : items.length) > 0 && /*#__PURE__*/React.createElement(CheckboxList, {
+    groups: groups,
+    onChange: handleOnItemChange
+  }), !isLoadingInitialItems && (items == null ? void 0 : items.length) === 0 && /*#__PURE__*/React.createElement(Text, {
+    text: texts.emptyState
+  })));
+};
+
 var TEXT_TYPE_OPTIONS = {
   DEFAULT: "default",
   STRONG: "strong",
@@ -5296,31 +5461,6 @@ function ViewItem(_ref) {
   })));
 }
 
-var SearchIcon = function SearchIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.5 13.9996H14.71L14.43 13.7296C15.63 12.3296 16.25 10.4196 15.91 8.38965C15.44 5.60965 13.12 3.38965 10.32 3.04965C6.09001 2.52965 2.53002 6.08965 3.05002 10.3196C3.39002 13.1196 5.61002 15.4396 8.39002 15.9096C10.42 16.2496 12.33 15.6296 13.73 14.4296L14 14.7096V15.4996L18.25 19.7496C18.66 20.1596 19.33 20.1596 19.74 19.7496C20.15 19.3396 20.15 18.6696 19.74 18.2596L15.5 13.9996ZM9.50002 13.9996C7.01002 13.9996 5.00002 11.9896 5.00002 9.49965C5.00002 7.00965 7.01002 4.99965 9.50002 4.99965C11.99 4.99965 14 7.00965 14 9.49965C14 11.9896 11.99 13.9996 9.50002 13.9996Z",
-    fill: "currentColor"
-  }));
-};
-
-var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
-    icon: SearchIcon,
-    type: "text",
-    clearable: true,
-    ref: ref
-  }));
-});
-
 /**
  * Decorator for any input component. Adds a label and additional information to be shown.
  *
@@ -6357,6 +6497,7 @@ exports.ChatBoxIcon = ChatBoxIcon;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
 exports.CheckboxList = CheckboxList;
+exports.CheckboxListModal = CheckboxListModal;
 exports.ChevronDoubleIcon = ChevronDoubleIcon;
 exports.ConfirmationDialog = ConfirmationDialog;
 exports.CrossIcon = CrossIcon;