dce-reactkit 3.11.4 → 3.12.0

package/dist/cjs/types/components/ItemPicker/index.d.ts

@@ -14,6 +14,7 @@ type Props = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
+    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React.FC<Props>;
 export default ItemPicker;

package/dist/cjs/types/components/TabBox.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 type Props = {
     title: React.ReactNode;
     children: React.ReactNode;
+    topRightChildren?: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };

package/dist/esm/index.js

@@ -1599,7 +1599,9 @@ const style$7 = `
 
   /* Container for Title */
   .TabBox-title-container {
-    /* Place on Left */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     position: relative;
     left: 0;
     text-align: left;
@@ -1632,6 +1634,19 @@ const style$7 = `
     background: #fdfdfd;
   }
 
+  .TabBox-title-right-container {
+    display: flex;
+    flex-direction: row;
+    align-items: bottom;
+    height: 2.4rem;
+    overflow: visible;
+  }
+
+  .TabBox-title-right-contents {
+    margin-right: 0.5rem;
+    margin-bottom: 0.2rem;
+  }
+
   /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
   .TabBox-children {
     position: relative;
@@ -1645,19 +1660,16 @@ const TabBox = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------------------------- Setup ------------------------------- */
     /*------------------------------------------------------------------------*/
-    /* -------------- Props ------------- */
-    const { title, children, noBottomPadding, noBottomMargin, } = props;
+    const { title, children, topRightChildren, noBottomPadding, noBottomMargin, } = props;
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
-    /*----------------------------------------*/
-    /* --------------- Main UI -------------- */
-    /*----------------------------------------*/
-    // Full UI
     return (React__default.createElement("div", { className: `TabBox-container ${noBottomMargin ? '' : 'mb-2'}` },
         React__default.createElement("style", null, style$7),
         React__default.createElement("div", { className: "TabBox-title-container" },
-            React__default.createElement("div", { className: "TabBox-title" }, title)),
+            React__default.createElement("div", { className: "TabBox-title" }, title),
+            topRightChildren && (React__default.createElement("div", { className: "TabBox-title-right-container" },
+                React__default.createElement("div", { className: "TabBox-title-right-contents" }, topRightChildren)))),
         React__default.createElement("div", { className: `TabBox-box ps-2 pt-2 pe-2 ${noBottomPadding ? '' : 'pb-2'}` },
             React__default.createElement("div", { className: "TabBox-children" }, children))));
 };
@@ -2667,17 +2679,62 @@ const ItemPicker = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { title, items, onChanged, noBottomMargin, } = props;
+    const { title, items, onChanged, noBottomMargin, hideSelectAllOrNoneButtons, } = props;
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
+    /**
+     * Updates the checked state of an item (including all children)
+     * @author Yuen Ler Chow
+     * @param item the item to update
+     * @param checked the new checked state
+     * @returns the updated item
+     */
+    const updateItemChecked = (item, checked) => {
+        if (item.isGroup) {
+            return Object.assign(Object.assign({}, item), { children: item.children.map((child) => {
+                    return updateItemChecked(child, checked);
+                }) });
+        }
+        return Object.assign(Object.assign({}, item), { checked });
+    };
+    /**
+     * Selects all items in the list
+     * @author Yuen Ler Chow
+     */
+    const handleSelectAll = () => {
+        const updatedItems = items.map((item) => {
+            return updateItemChecked(item, true);
+        });
+        onChanged(updatedItems);
+    };
+    /**
+     * Deselects all items in the list
+     * @author Yuen Ler Chow
+     */
+    const handleDeselectAll = () => {
+        const updatedItems = items.map((item) => {
+            return updateItemChecked(item, false);
+        });
+        onChanged(updatedItems);
+    };
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
     /*----------------------------------------*/
     /* --------------- Main UI -------------- */
     /*----------------------------------------*/
-    return (React__default.createElement(TabBox, { title: title, noBottomMargin: noBottomMargin },
+    // Select all/none
+    const selectAllOrNone = (!hideSelectAllOrNoneButtons
+        ? (React__default.createElement("div", { className: "d-flex h-100 align-items-end flex-row" },
+            React__default.createElement("div", { className: "d-flex justify-content-end" },
+                React__default.createElement("div", { className: "me-2", style: { fontSize: '1.2rem' } }, "Select"),
+                React__default.createElement("div", { className: "btn-group", role: "group" },
+                    React__default.createElement("button", { type: "button", style: { borderRight: '0.1rem solid white' }, "aria-label": "Select all contexts", className: "btn btn-secondary py-0", onClick: handleSelectAll }, "All"),
+                    React__default.createElement("button", { type: "button", "aria-label": "Deselect all contexts", className: "btn btn-secondary py-0", onClick: handleDeselectAll }, "None")))))
+        : undefined);
+    // Main UI
+    return (React__default.createElement(TabBox, { title: title, noBottomMargin: noBottomMargin, topRightChildren: selectAllOrNone },
         React__default.createElement("div", { style: { overflowX: 'auto' } },
             React__default.createElement(NestableItemList, { items: items, onChanged: onChanged }))));
 };