impact-ui 3.7.27 → 3.7.28-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-ui",
-  "version": "3.7.27",
+  "version": "3.7.28-alpha.2",
   "description": "Impact Analytics UI library",
   "main": "dist/index.js",
   "files": [

package/src/components/BottomSheet/index.js

@@ -25,7 +25,7 @@ export const BottomSheet = ({
 
   useEffect(() => {
     if (open) {
-      setContentHeight("auto");
+      // setContentHeight("auto");
       const timeout = setTimeout(() => {
         const height =
           document.querySelector(".ia_modalBody")?.scrollHeight + 105;
@@ -33,9 +33,10 @@ export const BottomSheet = ({
         setContentHeight(cappedHeight);
       }, 0);
       return () => clearTimeout(timeout);
-    } else {
-      setContentHeight("auto");
-    }
+    } 
+    // else {
+    //   setContentHeight("auto");
+    // }
   }, [open, children, maxHeight]);
 
   const hasFooter = footerOptions && Object.keys(footerOptions)?.length > 0;

package/src/components/TableOld/AgGridHeader.js

@@ -463,7 +463,6 @@ function AgGridHeader({
 
               </div>
             )}
-            {customIcon && customIcon}
             {rest?.column?.colDef?.sortable && (
               <img
                 src={

package/src/stories/BottomSheet.stories.js

@@ -1,6 +1,8 @@
 import React, { Fragment, useState } from "react";
 import { BottomSheet as BottomSheetWrapper } from "../components/BottomSheet";
 import { Button } from "../components/Button";
+import { Table } from "../components/Table";
+import { Select } from "../components/Select";
 import { fn } from "@storybook/test";
 
 export default {
@@ -224,3 +226,232 @@ Default.args = {
   ),
   withExpandIcon: false,
 };
+
+const SelectCellRenderer = (params) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentOptions, setCurrentOptions] = useState([]);
+  const [isSelectAll, setIsSelectAll] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState([]);
+
+  const optionsMap = {
+    vendorColor: [
+      { label: "Gold", value: "gold" },
+      { label: "Silver", value: "silver" },
+      { label: "Rose Gold", value: "rose_gold" },
+      { label: "Black", value: "black" },
+      { label: "Gold", value: "gold" },
+      { label: "Silver", value: "silver" },
+      { label: "Rose Gold", value: "rose_gold" },
+      { label: "Black", value: "black" },
+      { label: "Gold", value: "gold" },
+      { label: "Silver", value: "silver" },
+      { label: "Rose Gold", value: "rose_gold" },
+      { label: "Black", value: "black" },
+      { label: "Gold", value: "gold" },
+      { label: "Silver", value: "silver" },
+      { label: "Rose Gold", value: "rose_gold" },
+      { label: "Black", value: "black" },
+      { label: "Gold", value: "gold" },
+      { label: "Silver", value: "silver" },
+      { label: "Rose Gold", value: "rose_gold" },
+      { label: "Black", value: "black" },
+    ],
+    applicationEmbellishment: [
+      { label: "Stone", value: "stone" },
+      { label: "Enamel", value: "enamel" },
+      { label: "Plain", value: "plain" },
+    ],
+    productGrpDesc: [
+      { label: "Watches", value: "watches" },
+      { label: "Jewelry", value: "jewelry" },
+      { label: "Accessories", value: "accessories" },
+    ],
+    collection: [
+      { label: "Classic", value: "classic" },
+      { label: "Modern", value: "modern" },
+      { label: "Heritage", value: "heritage" },
+    ],
+    gender: [
+      { label: "Male", value: "male" },
+      { label: "Female", value: "female" },
+      { label: "Unisex", value: "unisex" },
+    ],
+    metalColor: [
+      { label: "Yellow Gold", value: "yellow_gold" },
+      { label: "White Gold", value: "white_gold" },
+      { label: "Rose Gold", value: "rose_gold" },
+    ],
+    dial: [
+      { label: "Round", value: "round" },
+      { label: "Square", value: "square" },
+      { label: "Oval", value: "oval" },
+    ],
+    logoSilhouette: [
+      { label: "Embossed", value: "embossed" },
+      { label: "Printed", value: "printed" },
+      { label: "None", value: "none" },
+    ],
+    subCollection: [
+      { label: "Premium", value: "premium" },
+      { label: "Standard", value: "standard" },
+      { label: "Limited Edition", value: "limited_edition" },
+    ],
+    movementType: [
+      { label: "Automatic", value: "automatic" },
+      { label: "Quartz", value: "quartz" },
+      { label: "Mechanical", value: "mechanical" },
+    ],
+  };
+
+  const fieldOptions =
+    optionsMap[params.colDef.field] || [
+      { label: "Option 1", value: "1" },
+      { label: "Option 2", value: "2" },
+      { label: "Option 3", value: "3" },
+    ];
+
+  return (
+    <Select
+      placeholder={"Select"}
+      initialOptions={fieldOptions}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      currentOptions={currentOptions}
+      setCurrentOptions={setCurrentOptions}
+      selectedOptions={selectedOptions}
+      setSelectedOptions={setSelectedOptions}
+      isSelectAll={isSelectAll}
+      setIsSelectAll={setIsSelectAll}
+      withPortal
+      isAgGridCellRenderer
+      column={params.column}
+    />
+  );
+};
+
+const tableColumnDefs = [
+  {
+    field: "placeholderChoiceId",
+    headerName: "Placeholder Choice ID",
+    minWidth: 180,
+    pinned: "left",
+  },
+  {
+    field: "vendorColor",
+    headerName: "Vendor Color",
+    minWidth: 160,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "applicationEmbellishment",
+    headerName: "Application Embellishment",
+    minWidth: 200,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "productGrpDesc",
+    headerName: "Product Grp Desc",
+    minWidth: 170,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "collection",
+    headerName: "Collection",
+    minWidth: 150,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "gender",
+    headerName: "Gender",
+    minWidth: 150,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "metalColor",
+    headerName: "Metal Color",
+    minWidth: 160,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "dial",
+    headerName: "Dial",
+    minWidth: 140,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "logoSilhouette",
+    headerName: "Logo Silhouette",
+    minWidth: 170,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "subCollection",
+    headerName: "Sub Collection",
+    minWidth: 170,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+  {
+    field: "movementType",
+    headerName: "Movement Type",
+    minWidth: 170,
+    cellRenderer: SelectCellRenderer,
+    cellClass: "cell-renderer",
+  },
+];
+
+const tableRowData = [
+  { placeholderChoiceId: "SGH Collect Mag..." },
+];
+
+const WithTableContent = (args) => {
+  const [open, setOpen] = useState(args.open);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open Bottom Sheet</Button>
+      <BottomSheetWrapper
+        {...args}
+        open={open}
+        onClose={handleClose}
+        footerOptions={
+          <Fragment>
+            <Button variant="url" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={() => {}}>
+              Save
+            </Button>
+          </Fragment>
+        }
+      >
+        <Table
+          rowData={tableRowData}
+          columnDefs={tableColumnDefs}
+          cardContainer={false}
+          rowHeight="default"
+          pagination={true}
+          paginationPageSize={10}
+        />
+      </BottomSheetWrapper>
+    </>
+  );
+};
+
+export const WithSelectTable = (args) => <WithTableContent {...args} />;
+
+WithSelectTable.args = {
+  title: "Add Choice",
+  withExpandIcon: true,
+};