@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js

@@ -0,0 +1,106 @@
+"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.SimpleOverlay = exports.DataListModalWrapper = exports.DataListModalOverlay = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");
+
+var SimpleOverlay = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1dhql4g0",
+  label: "SimpleOverlay"
+})(function (_ref) {
+  var showOverlay = _ref.showOverlay;
+  return {
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: showOverlay ? "rgba(0, 0, 0, 0.32)" : "transparent",
+    transition: "150ms all ease-in-out",
+    pointerEvents: showOverlay ? "auto" : "none",
+    zIndex: showOverlay ? 5 : -1,
+    opacity: showOverlay ? 1 : 0
+  };
+});
+exports.SimpleOverlay = SimpleOverlay;
+var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1dhql4g1",
+  label: "DataListModalWrapper"
+})(function (_ref2) {
+  var showOverlay = _ref2.showOverlay;
+  return {
+    position: "absolute",
+    top: "0px",
+    left: "50%",
+    width: "90%",
+    height: "auto",
+    maxWidth: "426px",
+    maxHeight: "520px",
+    overflow: "auto",
+    backgroundColor: "var(--mdc-theme-surface)",
+    boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
+    borderRadius: "0px 0px 4px 4px",
+    transition: "150ms opacity ease-in-out",
+    pointerEvents: showOverlay ? "auto" : "none",
+    zIndex: showOverlay ? 5 : -1,
+    opacity: showOverlay ? 1 : 0,
+    transform: showOverlay ? "translateX(-50%)" : "translateX(-1000px)",
+    "& .input-wrapper": {
+      paddingBottom: "16px"
+    },
+    "& .datalist-modal__footer": {
+      padding: "24px",
+      display: "flex",
+      justifyContent: "space-between",
+      "& .mdc-button": {
+        borderRadius: 4,
+        padding: "0px 32px"
+      },
+      "& .datalist-modal__footer__action--secondary": {
+        color: "var(--mdc-theme-text-primary-on-background)",
+        border: "1px solid var(--mdc-theme-on-background)"
+      },
+      "& .datalist-modal__footer__action--primary": {
+        backgroundColor: "var(--mdc-theme-secondary)"
+      }
+    }
+  };
+});
+exports.DataListModalWrapper = DataListModalWrapper;
+
+var DataListModalOverlay = function DataListModalOverlay(_ref3) {
+  var onDismiss = _ref3.onDismiss,
+      children = _ref3.children;
+
+  var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
+      isOpen = _useContext.isOpen,
+      setIsOpen = _useContext.setIsOpen;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SimpleOverlay, {
+    onClick: function onClick(e) {
+      e.stopPropagation(); // Close the modal.
+
+      setIsOpen(false);
+
+      if (typeof onDismiss === "function") {
+        onDismiss();
+      }
+    },
+    showOverlay: isOpen
+  }), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
+    showOverlay: isOpen
+  }, children));
+};
+
+exports.DataListModalOverlay = DataListModalOverlay;

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled<\"div\", SimpleOverlayProps>(\"div\")(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\nexport const DataListModalWrapper = styled<\"div\", DataListModalWrapperProps>(\"div\")(\n    ({ showOverlay }) => ({\n        position: \"absolute\",\n        top: \"0px\",\n        left: \"50%\",\n        width: \"90%\",\n        height: \"auto\",\n        maxWidth: \"426px\",\n        maxHeight: \"520px\",\n        overflow: \"auto\",\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n        borderRadius: \"0px 0px 4px 4px\",\n        transition: \"150ms opacity ease-in-out\",\n        pointerEvents: showOverlay ? \"auto\" : \"none\",\n        zIndex: showOverlay ? 5 : -1,\n        opacity: showOverlay ? 1 : 0,\n        transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n        \"& .input-wrapper\": {\n            paddingBottom: \"16px\"\n        },\n\n        \"& .datalist-modal__footer\": {\n            padding: \"24px\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            \"& .mdc-button\": {\n                borderRadius: 4,\n                padding: \"0px 32px\"\n            },\n            \"& .datalist-modal__footer__action--secondary\": {\n                color: \"var(--mdc-theme-text-primary-on-background)\",\n                border: \"1px solid var(--mdc-theme-on-background)\"\n            },\n            \"& .datalist-modal__footer__action--primary\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen}>{children}</DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAGO,IAAMA,aAAa,oBAAGC,eAAH,EAAqC,KAArC;EAAA;EAAA;AAAA,GAA4C;EAAA,IAAGC,WAAH,QAAGA,WAAH;EAAA,OAAsB;IACxFC,KAAK,EAAE,MADiF;IAExFC,MAAM,EAAE,MAFgF;IAGxFC,QAAQ,EAAE,UAH8E;IAIxFC,GAAG,EAAE,CAJmF;IAKxFC,IAAI,EAAE,CALkF;IAMxFC,eAAe,EAAEN,WAAW,GAAG,qBAAH,GAA2B,aANiC;IAOxFO,UAAU,EAAE,uBAP4E;IAQxFC,aAAa,EAAER,WAAW,GAAG,MAAH,GAAY,MARkD;IASxFS,MAAM,EAAET,WAAW,GAAG,CAAH,GAAO,CAAC,CAT6D;IAUxFU,OAAO,EAAEV,WAAW,GAAG,CAAH,GAAO;EAV6D,CAAtB;AAAA,CAA5C,CAAnB;;AAgBA,IAAMW,oBAAoB,oBAAGZ,eAAH,EAA4C,KAA5C;EAAA;EAAA;AAAA,GAC7B;EAAA,IAAGC,WAAH,SAAGA,WAAH;EAAA,OAAsB;IAClBG,QAAQ,EAAE,UADQ;IAElBC,GAAG,EAAE,KAFa;IAGlBC,IAAI,EAAE,KAHY;IAIlBJ,KAAK,EAAE,KAJW;IAKlBC,MAAM,EAAE,MALU;IAMlBU,QAAQ,EAAE,OANQ;IAOlBC,SAAS,EAAE,OAPO;IAQlBC,QAAQ,EAAE,MARQ;IASlBR,eAAe,EAAE,0BATC;IAUlBS,SAAS,EAAE,iCAVO;IAWlBC,YAAY,EAAE,iBAXI;IAYlBT,UAAU,EAAE,2BAZM;IAalBC,aAAa,EAAER,WAAW,GAAG,MAAH,GAAY,MAbpB;IAclBS,MAAM,EAAET,WAAW,GAAG,CAAH,GAAO,CAAC,CAdT;IAelBU,OAAO,EAAEV,WAAW,GAAG,CAAH,GAAO,CAfT;IAgBlBiB,SAAS,EAAEjB,WAAW,GAAG,kBAAH,GAAwB,qBAhB5B;IAkBlB,oBAAoB;MAChBkB,aAAa,EAAE;IADC,CAlBF;IAsBlB,6BAA6B;MACzBC,OAAO,EAAE,MADgB;MAEzBC,OAAO,EAAE,MAFgB;MAGzBC,cAAc,EAAE,eAHS;MAIzB,iBAAiB;QACbL,YAAY,EAAE,CADD;QAEbG,OAAO,EAAE;MAFI,CAJQ;MAQzB,gDAAgD;QAC5CG,KAAK,EAAE,6CADqC;QAE5CC,MAAM,EAAE;MAFoC,CARvB;MAYzB,8CAA8C;QAC1CjB,eAAe,EAAE;MADyB;IAZrB;EAtBX,CAAtB;AAAA,CAD6B,CAA1B;;;AAiDA,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAA4D,QAGnE;EAAA,IAFFC,SAEE,SAFFA,SAEE;EAAA,IADFC,QACE,SADFA,QACE;;EACF,kBAA8B,IAAAC,iBAAA,EAAWC,wDAAX,CAA9B;EAAA,IAAQC,MAAR,eAAQA,MAAR;EAAA,IAAgBC,SAAhB,eAAgBA,SAAhB;;EACA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,aAAD;IACI,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAF,GADU,CAEV;;MACAF,SAAS,CAAC,KAAD,CAAT;;MAEA,IAAI,OAAOL,SAAP,KAAqB,UAAzB,EAAqC;QACjCA,SAAS;MACZ;IACJ,CATL;IAUI,WAAW,EAAEI;EAVjB,EADJ,eAaI,6BAAC,oBAAD;IAAsB,WAAW,EAAEA;EAAnC,GAA4CH,QAA5C,CAbJ,CADJ;AAiBH,CAtBM"}

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface DataListModalOverlayActionProps {
+    icon: React.ReactNode;
+    "data-testid"?: string;
+}
+export declare const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps>;

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js

@@ -0,0 +1,39 @@
+"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.DataListModalOverlayAction = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = require("../../../Button");
+
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");
+
+var _excluded = ["icon"];
+
+var DataListModalOverlayAction = function DataListModalOverlayAction(_ref) {
+  var icon = _ref.icon,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_DataListModalOverlayContext.DataListModalOverlayContext),
+      isOpen = _useContext.isOpen,
+      setIsOpen = _useContext.setIsOpen;
+
+  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    "data-testid": rest["data-testid"],
+    icon: icon,
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  });
+};
+
+exports.DataListModalOverlayAction = DataListModalOverlayAction;

package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DataListModalOverlayAction","icon","rest","useContext","DataListModalOverlayContext","isOpen","setIsOpen"],"sources":["DataListModalOverlayAction.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { IconButton } from \"../../../Button\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport interface DataListModalOverlayActionProps {\n    icon: React.ReactNode;\n    \"data-testid\"?: string;\n}\n\nexport const DataListModalOverlayAction: React.FC<DataListModalOverlayActionProps> = ({\n    icon,\n    ...rest\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n\n    return (\n        <IconButton\n            data-testid={rest[\"data-testid\"]}\n            icon={icon}\n            onClick={() => setIsOpen(!isOpen)}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAOO,IAAMA,0BAAqE,GAAG,SAAxEA,0BAAwE,OAG/E;EAAA,IAFFC,IAEE,QAFFA,IAEE;EAAA,IADCC,IACD;;EACF,kBAA8B,IAAAC,iBAAA,EAAWC,wDAAX,CAA9B;EAAA,IAAQC,MAAR,eAAQA,MAAR;EAAA,IAAgBC,SAAhB,eAAgBA,SAAhB;;EAEA,oBACI,6BAAC,kBAAD;IACI,eAAaJ,IAAI,CAAC,aAAD,CADrB;IAEI,IAAI,EAAED,IAFV;IAGI,OAAO,EAAE;MAAA,OAAMK,SAAS,CAAC,CAACD,MAAF,CAAf;IAAA;EAHb,EADJ;AAOH,CAbM"}

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface DataListModalOverlayProviderContext {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+}
+export declare const DataListModalOverlayContext: React.Context<DataListModalOverlayProviderContext>;
+export interface DataListModalOverlayProviderProps {
+    children?: React.ReactChild | React.ReactChild[];
+}
+export declare const DataListModalOverlayProvider: React.FC<DataListModalOverlayProviderProps>;
+export {};

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataListModalOverlayProvider = exports.DataListModalOverlayContext = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DataListModalOverlayContext = /*#__PURE__*/_react.default.createContext({
+  isOpen: false,
+  setIsOpen: function setIsOpen() {
+    return void 0;
+  }
+});
+
+exports.DataListModalOverlayContext = DataListModalOverlayContext;
+
+var DataListModalOverlayProvider = function DataListModalOverlayProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(DataListModalOverlayContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      setIsOpen: setIsOpen
+    }
+  }, children);
+};
+
+exports.DataListModalOverlayProvider = DataListModalOverlayProvider;

package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DataListModalOverlayContext","React","createContext","isOpen","setIsOpen","DataListModalOverlayProvider","children","useState"],"sources":["DataListModalOverlayContext.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface DataListModalOverlayProviderContext {\n    isOpen: boolean;\n    setIsOpen: (value: boolean) => void;\n}\nexport const DataListModalOverlayContext = React.createContext<DataListModalOverlayProviderContext>(\n    {\n        isOpen: false,\n        setIsOpen: () => {\n            return void 0;\n        }\n    }\n);\n\nexport interface DataListModalOverlayProviderProps {\n    children?: React.ReactChild | React.ReactChild[];\n}\n\nexport const DataListModalOverlayProvider: React.FC<DataListModalOverlayProviderProps> = ({\n    children\n}) => {\n    const [isOpen, setIsOpen] = React.useState<boolean>(false);\n\n    return (\n        <DataListModalOverlayContext.Provider value={{ isOpen, setIsOpen }}>\n            {children}\n        </DataListModalOverlayContext.Provider>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AAMO,IAAMA,2BAA2B,gBAAGC,cAAA,CAAMC,aAAN,CACvC;EACIC,MAAM,EAAE,KADZ;EAEIC,SAAS,EAAE,qBAAM;IACb,OAAO,KAAK,CAAZ;EACH;AAJL,CADuC,CAApC;;;;AAaA,IAAMC,4BAAyE,GAAG,SAA5EA,4BAA4E,OAEnF;EAAA,IADFC,QACE,QADFA,QACE;;EACF,sBAA4BL,cAAA,CAAMM,QAAN,CAAwB,KAAxB,CAA5B;EAAA;EAAA,IAAOJ,MAAP;EAAA,IAAeC,SAAf;;EAEA,oBACI,6BAAC,2BAAD,CAA6B,QAA7B;IAAsC,KAAK,EAAE;MAAED,MAAM,EAANA,MAAF;MAAUC,SAAS,EAATA;IAAV;EAA7C,GACKE,QADL,CADJ;AAKH,CAVM"}

package/List/DataList/DataListModalOverlay/index.d.ts

@@ -0,0 +1,3 @@
+export { DataListModalOverlay } from "./DataListModalOverlay";
+export { DataListModalOverlayAction } from "./DataListModalOverlayAction";
+export { DataListModalOverlayContext, DataListModalOverlayProvider } from "./DataListModalOverlayContext";

package/List/DataList/DataListModalOverlay/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DataListModalOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlay.DataListModalOverlay;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayAction", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayAction.DataListModalOverlayAction;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayContext", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayContext.DataListModalOverlayContext;
+  }
+});
+Object.defineProperty(exports, "DataListModalOverlayProvider", {
+  enumerable: true,
+  get: function get() {
+    return _DataListModalOverlayContext.DataListModalOverlayProvider;
+  }
+});
+
+var _DataListModalOverlay = require("./DataListModalOverlay");
+
+var _DataListModalOverlayAction = require("./DataListModalOverlayAction");
+
+var _DataListModalOverlayContext = require("./DataListModalOverlayContext");

package/List/DataList/DataListModalOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DataListModalOverlay } from \"./DataListModalOverlay\";\nexport { DataListModalOverlayAction } from \"./DataListModalOverlayAction\";\nexport {\n    DataListModalOverlayContext,\n    DataListModalOverlayProvider\n} from \"./DataListModalOverlayContext\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA"}

package/List/DataList/DataListWithSections.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ListItem, ListProps } from "..";
+import { PaginationProp, SortersProp } from "./types";
+interface DataListData {
+    [key: string]: Record<string, any>[];
+}
+interface DataListWithSectionsProps {
+    children?: ((props: any) => React.ReactNode) | null;
+    title?: React.ReactNode;
+    data?: DataListData | null;
+    refresh?: (() => void) | null;
+    loading?: boolean;
+    loader?: React.ReactNode;
+    noData?: React.ReactNode;
+    pagination?: PaginationProp;
+    setSorters?: Function | null;
+    sorters?: SortersProp | null;
+    actions?: React.ReactNode;
+    filters?: React.ReactNode;
+    multiSelectActions?: React.ReactNode;
+    multiSelectAll?: (value: boolean, data: DataListData | null) => void;
+    isAllMultiSelected?: (data: DataListData | null) => boolean;
+    isNoneMultiSelected?: (data: DataListData | null) => boolean;
+    showOptions?: {
+        refresh?: boolean;
+        pagination?: boolean;
+        filters?: boolean;
+        sorters?: boolean;
+        [key: string]: any;
+    };
+    search?: React.ReactElement;
+    modalOverlay?: React.ReactElement;
+    modalOverlayAction?: React.ReactElement;
+    subHeader?: React.ReactElement;
+    meta?: Record<string, any> | null;
+    setPage?: ((page: string) => void) | null;
+    setPerPage?: ((page: string) => void) | null;
+    perPageOptions?: number[];
+}
+export declare const DataListWithSections: React.FC<DataListWithSectionsProps>;
+interface ScrollListWithSectionsProps extends ListProps {
+    children: React.ReactElement<typeof ListItem>[];
+}
+export declare const ScrollListWithSections: React.FC<ScrollListWithSectionsProps>;
+export {};

package/List/DataList/DataListWithSections.js

@@ -0,0 +1,356 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollListWithSections = exports.DataListWithSections = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Loader = _interopRequireDefault(require("./Loader"));
+
+var _NoData = _interopRequireDefault(require("./NoData"));
+
+var _Typography = require("../../Typography");
+
+var _emotion = require("emotion");
+
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _Checkbox = require("../../Checkbox");
+
+var _Menu = require("../../Menu");
+
+var _Grid = require("../../Grid");
+
+var _icons = require("./icons");
+
+var _ = require("..");
+
+var _DataListModalOverlay = require("./DataListModalOverlay");
+
+var ListContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exlqcq90",
+  label: "ListContainer"
+})({
+  position: "relative",
+  height: "100%",
+  ".mdc-list": {
+    paddingBottom: 0,
+    paddingTop: 0
+  },
+  ".mdc-list-item": {
+    borderBottom: "1px solid var(--mdc-theme-on-background)",
+    padding: "10px 20px 10px 20px",
+    height: "auto",
+    minHeight: 40,
+    ".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline": {
+      display: "block"
+    },
+    ".mdc-list-item__graphic": {
+      marginRight: 20
+    },
+    ".mdc-list-item__text": {
+      width: "100%",
+      margin: "-20px 0",
+      padding: "20px 0"
+    },
+    ".mdc-list-item__meta": {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      flexDirection: "column",
+      position: "relative",
+      padding: "5px 0",
+      boxSizing: "border-box",
+      height: "100%",
+      whiteSpace: "nowrap",
+      marginTop: -10,
+      marginBottom: -10,
+      ".webiny-list-actions": {
+        display: "none"
+      },
+      ".webiny-list-top-caption, .webiny-list-bottom-caption": {
+        //position: 'absolute',
+        width: "100%",
+        textAlign: "right"
+      },
+      ".webiny-list-top-caption": {
+        marginBottom: 20
+      }
+    },
+    "&:hover": {
+      ".mdc-list-item__meta": {
+        ".webiny-list-top-caption, .webiny-list-bottom-caption": {
+          display: "none"
+        },
+        ".webiny-list-actions": {
+          display: "flex",
+          height: "100%",
+          alignItems: "center"
+        }
+      }
+    }
+  }
+});
+var listHeader = /*#__PURE__*/(0, _emotion.css)({
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  color: "var(--mdc-theme-text-primary-on-background)",
+  width: "100%"
+}, "label:listHeader;");
+var listSubHeader = /*#__PURE__*/(0, _emotion.css)({
+  width: "100%",
+  "&.mdc-layout-grid": {
+    borderBottom: "1px solid var(--mdc-theme-on-background)",
+    padding: "10px 24px 10px 12px",
+    color: "var(--mdc-theme-text-primary-on-background)"
+  }
+}, "label:listSubHeader;");
+var ListHeaderItem = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "exlqcq91",
+  label: "ListHeaderItem"
+})({
+  display: "inline-block",
+  verticalAlign: "middle",
+  "&.disabled": {
+    opacity: 0.5,
+    pointerEvents: "none"
+  }
+});
+var listTitle = /*#__PURE__*/(0, _emotion.css)({
+  display: "flex",
+  alignItems: "center"
+}, "label:listTitle;");
+var listActions = /*#__PURE__*/(0, _emotion.css)({
+  textAlign: "right"
+}, "label:listActions;");
+var scrollList = /*#__PURE__*/(0, _emotion.css)({
+  overflow: "auto",
+  height: "calc(100vh - 235px)"
+}, "label:scrollList;");
+var dataListContent = /*#__PURE__*/(0, _emotion.css)({
+  position: "relative",
+  height: "100%",
+  overflow: "auto"
+}, "label:dataListContent;");
+
+var MultiSelectAll = function MultiSelectAll(props) {
+  var multiSelectActions = props.multiSelectActions;
+
+  if (!multiSelectActions) {
+    return null;
+  }
+  /**
+   * We can safely cast because we have defaults.
+   */
+
+
+  var _ref = props,
+      isAllMultiSelected = _ref.isAllMultiSelected,
+      isNoneMultiSelected = _ref.isNoneMultiSelected,
+      multiSelectAll = _ref.multiSelectAll,
+      data = _ref.data;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof multiSelectAll === "function" && /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+    indeterminate: !isAllMultiSelected(data) && !isNoneMultiSelected(data),
+    value: isAllMultiSelected(data),
+    onClick: function onClick() {
+      multiSelectAll(!isAllMultiSelected(data), data);
+    }
+  })));
+};
+
+var MultiSelectActions = function MultiSelectActions(props) {
+  var multiSelectActions = props.multiSelectActions;
+
+  if (!multiSelectActions) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, multiSelectActions);
+};
+
+var RefreshButton = function RefreshButton(props) {
+  var refresh = props.refresh;
+
+  if (!refresh) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_icons.RefreshIcon, {
+    onClick: function onClick() {
+      return refresh();
+    }
+  }));
+};
+
+var Sorters = function Sorters(props) {
+  var sorters = props.sorters;
+
+  if (!sorters) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_icons.SortIcon, null)
+  }, sorters.map(function (sorter) {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+      key: sorter.label,
+      onClick: function onClick() {
+        if (sorters && props.setSorters) {
+          props.setSorters(sorter.value);
+        }
+      }
+    }, sorter.label);
+  })));
+};
+
+var Filters = function Filters(props) {
+  var filters = props.filters;
+
+  if (!filters) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_icons.FilterIcon, null)
+  }, filters));
+};
+
+var Pagination = function Pagination(props) {
+  var pagination = props.pagination;
+
+  if (!pagination) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pagination.setNextPage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ListHeaderItem, {
+    className: (0, _classnames.default)({
+      disabled: !pagination.hasPreviousPage
+    })
+  }, /*#__PURE__*/_react.default.createElement(_icons.PreviousPageIcon, {
+    onClick: function onClick() {
+      if (pagination.setPreviousPage && pagination.hasPreviousPage) {
+        pagination.setPreviousPage();
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(ListHeaderItem, {
+    className: (0, _classnames.default)({
+      disabled: !pagination.hasNextPage
+    })
+  }, /*#__PURE__*/_react.default.createElement(_icons.NextPageIcon, {
+    onClick: function onClick() {
+      if (pagination.setNextPage && pagination.hasNextPage) {
+        pagination.setNextPage();
+      }
+    }
+  }))), Array.isArray(pagination.perPageOptions) && pagination.setPerPage && /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_icons.OptionsIcon, null)
+  }, pagination.setPerPage && pagination.perPageOptions.map(function (perPage) {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+      key: perPage,
+      onClick: function onClick() {
+        return pagination.setPerPage && pagination.setPerPage(perPage);
+      }
+    }, perPage);
+  }))));
+};
+
+var Search = function Search(props) {
+  if (!props.search) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 7
+  }, /*#__PURE__*/_react.default.cloneElement(props.search, props));
+};
+
+var DataListWithSections = function DataListWithSections(props) {
+  var render = null;
+
+  if (props.loading) {
+    render = props.loader;
+  } else if ((0, _isEmpty.default)(props.data)) {
+    render = props.noData;
+  } else {
+    var ch = props.children;
+    render = typeof ch === "function" ? ch(props) : null;
+  }
+
+  var showOptions = props.showOptions || {};
+  var listHeaderActionsCellSpan = props.actions ? 7 : 0;
+  var listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;
+  return /*#__PURE__*/_react.default.createElement(_DataListModalOverlay.DataListModalOverlayProvider, null, /*#__PURE__*/_react.default.createElement(ListContainer, {
+    className: "webiny-data-list",
+    "data-testid": "ui.list.data-list"
+  }, (props.title || props.actions) && /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+    className: listHeader
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: listHeaderTitleCellSpan,
+    className: listTitle
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, props.title)), props.actions && /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: listHeaderActionsCellSpan,
+    className: listActions
+  }, props.actions)), Object.keys(showOptions).length > 0 && /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+    className: listSubHeader
+  }, /*#__PURE__*/_react.default.createElement(Search, props), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: props.search ? 5 : 12,
+    style: {
+      justifySelf: "end"
+    }
+  }, /*#__PURE__*/_react.default.createElement(MultiSelectAll, props), showOptions.refresh && /*#__PURE__*/_react.default.createElement(RefreshButton, props), showOptions.pagination && /*#__PURE__*/_react.default.createElement(Pagination, props), showOptions.sorters && /*#__PURE__*/_react.default.createElement(Sorters, props), showOptions.filters && /*#__PURE__*/_react.default.createElement(Filters, props), props.modalOverlayAction ? /*#__PURE__*/_react.default.createElement(ListHeaderItem, null, props.modalOverlayAction) : null, /*#__PURE__*/_react.default.createElement(MultiSelectActions, props))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(dataListContent, "webiny-data-list__content")
+  }, props.subHeader, render, props.modalOverlay)));
+};
+
+exports.DataListWithSections = DataListWithSections;
+DataListWithSections.defaultProps = {
+  children: null,
+  title: null,
+  data: null,
+  meta: null,
+  loading: false,
+  refresh: function refresh() {
+    return void 0;
+  },
+  setPage: null,
+  setPerPage: null,
+  perPageOptions: [10, 25, 50],
+  filters: null,
+  sorters: null,
+  setSorters: null,
+  actions: null,
+  multiSelectAll: _noop.default,
+  isAllMultiSelected: function isAllMultiSelected() {
+    return false;
+  },
+  isNoneMultiSelected: function isNoneMultiSelected() {
+    return false;
+  },
+  loader: /*#__PURE__*/_react.default.createElement(_Loader.default, null),
+  noData: /*#__PURE__*/_react.default.createElement(_NoData.default, null),
+  showOptions: {
+    refresh: true,
+    pagination: true,
+    sorters: true,
+    filters: true
+  }
+};
+
+var ScrollListWithSections = function ScrollListWithSections(props) {
+  return /*#__PURE__*/_react.default.createElement(_.List, Object.assign({}, props, {
+    className: (0, _classnames.default)(props.className, scrollList)
+  }), props.children);
+};
+
+exports.ScrollListWithSections = ScrollListWithSections;