elab_components 0.0.1 → 0.0.2

package/dist/App.d.ts

@@ -1,5 +1,4 @@
 /** @format */
 import React from 'react';
-import './App.css';
 declare function App(): React.JSX.Element;
 export default App;

package/dist/components/Grid/index.d.ts

@@ -19,7 +19,6 @@ interface IGrid extends GridProps {
     onSelectionChange: (event: GridSelectionChangeEvent) => void;
     onHeaderSelectionChange: (event: GridHeaderSelectionChangeEvent) => void;
     columnConfigs: any;
-    detailComponent: Function;
     expandChange: Function;
     page: State;
     pageSizeValue: number | string | undefined;
@@ -39,6 +38,9 @@ interface IGrid extends GridProps {
     apiColumnConfig: any;
     searchKeyword: string;
     setSearchKeyword: Function;
+    advanceFilterData: any;
+    advanceFilterDataActive: boolean;
+    filterSubmit: any;
     allColumnsField: Array<{
         field: string;
         title: string;

package/dist/index.esm.js

@@ -2,16 +2,16 @@ import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { Button, DropDownButton, SplitButton, Toolbar, ButtonGroup } from '@progress/kendo-react-buttons';
 import styled from 'styled-components';
 import { Window, Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
-import { MultiSelect, DropDownList } from '@progress/kendo-react-dropdowns';
+import { MultiSelect, DropDownList, ComboBox } from '@progress/kendo-react-dropdowns';
 import { Editor } from '@progress/kendo-react-editor';
 import { ArcGauge } from '@progress/kendo-react-gauges';
-import { Grid, getSelectedState, GridColumn } from '@progress/kendo-react-grid';
+import { Grid, getSelectedState, GridToolbar, GridColumn } from '@progress/kendo-react-grid';
 import { getter, process as process$1 } from '@progress/kendo-data-query';
 import { ExcelExport } from '@progress/kendo-react-excel-export';
 import { Input, Checkbox, Switch, NumericTextBox, MaskedTextBox } from '@progress/kendo-react-inputs';
+import { DatePicker, TimePicker, MultiViewCalendar, Calendar, DateInput, DateRangePicker, DateTimePicker } from '@progress/kendo-react-dateinputs';
 import { TreeView } from '@progress/kendo-react-treeview';
 import { Chart } from '@progress/kendo-react-charts';
-import { TimePicker, MultiViewCalendar, Calendar, DateInput, DateRangePicker, DateTimePicker } from '@progress/kendo-react-dateinputs';
 import { Drawer } from '@progress/kendo-react-layout';
 export { DrawerContent as OkDrawerContent } from '@progress/kendo-react-layout';
 
@@ -42,7 +42,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/** @format */\r\n@import '@progress/kendo-theme-material/dist/all';\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\r\n    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\r\n    'Helvetica Neue', sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n    monospace;\r\n}\r\n";
+var css_248z = "/** @format */\r\n@import '@progress/kendo-theme-material/dist/all';\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\r\n    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\r\n    'Helvetica Neue', sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n    monospace;\r\n}\r\n\r\n.k-grid-toolbar {\r\n  border-width: none;\r\n}\r\n.k-toolbar {\r\n  padding-inline: 0px;\r\n  padding: 10px 0px;\r\n}\r\n.k-button {\r\n  text-transform: none;\r\n}\r\n\r\n.button-container {\r\n  margin-left: auto;\r\n  display: flex;\r\n  gap: 15px;\r\n}\r\n\r\n.button-container .custom-button {\r\n  background-color: transparent;\r\n  border: none;\r\n  box-shadow: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.button-container .button-content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n}\r\n\r\n.button-container .icon {\r\n  font-size: 20px;\r\n  font-weight: bold;\r\n}\r\n\r\n.button-container .text {\r\n  font-size: 16px;\r\n}\r\n";
 styleInject(css_248z);
 
 /******************************************************************************
@@ -165,15 +165,93 @@ var OkInput = function (_a) {
 };
 var templateObject_1$g;
 
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);
+
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return props => /*#__PURE__*/React.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = conf => {
+    var {
+        attr,
+        size,
+        title
+      } = props,
+      svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /*#__PURE__*/React.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function HiViewColumns (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"currentColor","aria-hidden":"true"},"child":[{"tag":"path","attr":{"d":"M15 3.75H9v16.5h6V3.75ZM16.5 20.25h3.375c1.035 0 1.875-.84 1.875-1.875V5.625c0-1.036-.84-1.875-1.875-1.875H16.5v16.5ZM4.125 3.75H7.5v16.5H4.125a1.875 1.875 0 0 1-1.875-1.875V5.625c0-1.036.84-1.875 1.875-1.875Z"},"child":[]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function PiExportBold (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 256 256","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M220,112v96a20,20,0,0,1-20,20H56a20,20,0,0,1-20-20V112A20,20,0,0,1,56,92H76a12,12,0,0,1,0,24H60v88H196V116H180a12,12,0,0,1,0-24h20A20,20,0,0,1,220,112ZM96.49,72.49,116,53v83a12,12,0,0,0,24,0V53l19.51,19.52a12,12,0,1,0,17-17l-40-40a12,12,0,0,0-17,0l-40,40a12,12,0,1,0,17,17Z"},"child":[]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function MdFilterList (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"},"child":[]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function IoClose (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"},"child":[]}]})(props);
+}
+
 /** @format */
 var StyledGrid = styled(Grid)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
 var OkGrid = function (_a) {
     var props = __rest(_a, []);
-    var resizable = props.resizable, reorderable = props.reorderable, data = props.data, pageSizeValue = props.pageSizeValue, filterable = props.filterable, style = props.style, sortable = props.sortable, groupable = props.groupable, editField = props.editField, skip = props.skip, take = props.take, detail = props.detail, expandField = props.expandField, dataItemKey = props.dataItemKey, columnConfigs = props.columnConfigs, setSelectedState = props.setSelectedState, selectedState = props.selectedState; props.setPageSizeValue; props.setPage; var columnOption = props.columnOption, setColumnOption = props.setColumnOption, expandChange = props.expandChange, setSearchKeyword = props.setSearchKeyword, searchKeyword = props.searchKeyword, allColumnsField = props.allColumnsField, expandedRows = props.expandedRows;
+    var resizable = props.resizable, reorderable = props.reorderable, data = props.data, pageSizeValue = props.pageSizeValue, filterable = props.filterable, style = props.style, sortable = props.sortable, groupable = props.groupable, editField = props.editField, skip = props.skip, take = props.take, dataItemKey = props.dataItemKey, columnConfigs = props.columnConfigs, setSelectedState = props.setSelectedState, selectedState = props.selectedState; props.setPageSizeValue; props.setPage; var columnOption = props.columnOption, setColumnOption = props.setColumnOption, expandChange = props.expandChange, setSearchKeyword = props.setSearchKeyword, searchKeyword = props.searchKeyword, allColumnsField = props.allColumnsField, expandedRows = props.expandedRows, advanceFilterData = props.advanceFilterData, advanceFilterDataActive = props.advanceFilterDataActive; props.filterSubmit;
     var excelExport = React.useRef(null);
-    var _b = useState([]), newData = _b[0], setNewData = _b[1];
+    var _b = useState([]), newData = _b[0]; _b[1];
     var _c = useState(), runQueriesFilter = _c[0]; _c[1];
     var _d = React.useState(null), editID = _d[0]; _d[1];
+    var _e = useState(false), filterShow = _e[0], setFilterShow = _e[1];
     var isRowExpanded = function (productID) {
         return expandedRows.includes(productID);
     };
@@ -197,7 +275,7 @@ var OkGrid = function (_a) {
         });
     }, [data, searchKeyword, expandedRows, selectedState, editID]);
     console.log('filteredProducts', filteredProducts);
-    var _e = React.useState({
+    var _f = React.useState({
         take: 10,
         skip: 0,
         group: [],
@@ -206,9 +284,32 @@ var OkGrid = function (_a) {
             logic: 'and',
             filters: [],
         },
-    }), dataState = _e[0], setDataState = _e[1];
-    var _f = React.useState(columnConfigs), columns = _f[0], setColumns = _f[1];
-    var _g = React.useState(function () {
+    }), dataState = _f[0], setDataState = _f[1];
+    var detailComponent = function (props) {
+        var dataItem = props.dataItem;
+        return (React.createElement("section", null,
+            React.createElement("p", null,
+                React.createElement("strong", null, "In Stock:"),
+                " ",
+                dataItem.UnitsInStock,
+                " units"),
+            React.createElement("p", null,
+                React.createElement("strong", null, "On Order:"),
+                " ",
+                dataItem.UnitsOnOrder,
+                " units"),
+            React.createElement("p", null,
+                React.createElement("strong", null, "Reorder Level:"),
+                " ",
+                dataItem.ReorderLevel,
+                " units"),
+            React.createElement("p", null,
+                React.createElement("strong", null, "Discontinued:"),
+                " ",
+                dataItem.Discontinued)));
+    };
+    var _g = React.useState(columnConfigs), columns = _g[0], setColumns = _g[1];
+    var _h = React.useState(function () {
         var savedOptions = localStorage.getItem('gridOptions');
         return savedOptions
             ? JSON.parse(savedOptions)
@@ -217,8 +318,8 @@ var OkGrid = function (_a) {
                 groupable: false,
                 filterByQueries: false,
             };
-    }), gridOptions = _g[0], setGridOptions = _g[1];
-    var _h = React.useState(process$1(data, dataState)), dataResult = _h[0], setDataResult = _h[1];
+    }), gridOptions = _h[0], setGridOptions = _h[1];
+    var _j = React.useState(process$1(data, dataState)), dataResult = _j[0], setDataResult = _j[1];
     var onDataStateChange = function (e) {
         setDataState(e.dataState);
         setDataResult(process$1(data, e.dataState));
@@ -258,8 +359,6 @@ var OkGrid = function (_a) {
     useEffect(function () {
         setDataResult(process$1(data, dataState));
     }, [data, dataState]);
-    console.log(gridOptions);
-    console.log('dataResult', dataResult);
     var onFilterChange = function (e) {
         setSearchKeyword(e.target.value);
     };
@@ -268,47 +367,60 @@ var OkGrid = function (_a) {
             excelExport.current.save(newData);
         }
     };
-    var addNew = function () {
-        var newDataItem = {
-            id: '',
-            title: 'string',
-            price: 0,
-            description: 'string',
-            categoryId: 0,
-            images: 'string',
-        };
-        setNewData(__spreadArray([newDataItem], newData, true));
-    };
     return (React.createElement("div", { style: {
             display: 'flex',
             flexDirection: 'column',
-            gap: 25,
             marginTop: '25px',
-            marginLeft: '10px',
-            marginRight: '10px',
         } },
-        ' ',
-        React.createElement("div", null,
+        React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '5px',
+            } },
+            React.createElement(OkInput, { style: {
+                    width: '300px',
+                }, value: searchKeyword, onChange: function (e) { return onFilterChange(e); }, placeholder: "Search..." }),
+            React.createElement("div", { className: "button-container" },
+                React.createElement(OkButton, { onClick: function () {
+                        return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: true })); });
+                    }, type: "button", className: "custom-button" },
+                    React.createElement("span", { className: "button-content" },
+                        React.createElement(HiViewColumns, { className: "icon" }),
+                        React.createElement("span", { className: "text" }, "Column Option"))),
+                React.createElement(OkButton, { type: "button", className: "custom-button", onClick: function () { return setFilterShow(!filterShow); } },
+                    React.createElement("span", { className: "button-content" },
+                        React.createElement(MdFilterList, { className: "icon" }),
+                        React.createElement("span", { className: "text" }, "Filter"))),
+                React.createElement(OkButton, { type: "button", className: "custom-button", title: "Export Excel", onClick: exportExport },
+                    React.createElement("span", { className: "button-content" },
+                        React.createElement(PiExportBold, { className: "icon" }),
+                        React.createElement("span", { className: "text" }, "Export"))))),
+        filterShow && advanceFilterDataActive && (React.createElement(GridToolbar, null,
             React.createElement("div", { style: {
                     display: 'flex',
-                    justifyContent: 'space-between',
                     alignItems: 'center',
+                    justifyContent: 'space-between',
+                    width: '100%',
                 } },
-                React.createElement(OkInput, { style: {
-                        width: '30%',
-                    }, value: searchKeyword, onChange: function (e) { return onFilterChange(e); }, placeholder: "Filter by keyword" }),
-                React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', gap: '15px' } },
-                    React.createElement(OkButton, { onClick: function () {
-                            return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: true })); });
-                        }, themeColor: 'primary', type: "button" }, "Column option"),
-                    React.createElement(OkButton, { style: {
-                            width: '120px',
-                        }, title: "Export Excel", themeColor: 'primary', type: "button", onClick: exportExport }, "Export"),
-                    React.createElement(OkButton, { themeColor: 'primary', type: "button" }, "Open in Queries"),
-                    React.createElement(OkButton, { onClick: addNew, themeColor: 'primary', type: "button" }, "Create +"),
-                    React.createElement(OkButton, { onClick: function () {
-                            return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnConfigsModel: true })); });
-                        }, themeColor: 'primary', type: "button" }, "view option")))),
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        gap: '20px',
+                    } },
+                    advanceFilterData.map(function (item, index) { return (React.createElement("div", null,
+                        item.type === 'combBox' && (React.createElement(ComboBox, { data: item.data, textField: item.textField, value: item.value, onChange: item.onchange, label: item.label, filterable: item.filterable, onFilterChange: item.filterChange })),
+                        item.type === 'datePicker' && (React.createElement("div", { style: { paddingTop: '1.2rem' } },
+                            React.createElement(DatePicker, { value: item.value, onChange: item.onchange, placeholder: item.placeholder }))))); }),
+                    React.createElement(OkButton, { type: "button", onClick: function () { return setFilterShow(false); }, themeColor: "primary", style: { marginTop: '1.2rem', padding: '0px 30px' } }, "Apply")),
+                React.createElement(OkButton, { style: {
+                        backgroundColor: 'transparent',
+                        border: 'none',
+                        boxShadow: 'none',
+                        fontSize: '24px',
+                        fontWeight: 700,
+                        marginTop: '1.2rem',
+                    }, type: "button", onClick: function () { return setFilterShow(false); } },
+                    React.createElement(IoClose, null))))),
         React.createElement(ExcelExport, { data: dataResult, ref: excelExport },
             React.createElement(StyledGrid, __assign({ onHeaderSelectionChange: function (e) {
                     return onHeaderSelectionChange(e);
@@ -322,7 +434,7 @@ var OkGrid = function (_a) {
                     buttonCount: 4,
                     pageSizes: [2, 10, 15, 'All'],
                     pageSizeValue: pageSizeValue,
-                }, filterable: filterable, editField: editField, reorderable: reorderable, groupable: groupable, resizable: resizable, style: style, data: filteredProducts, dataItemKey: dataItemKey, take: take, sortable: sortable, detail: detail, expandField: expandField }, dataState), columns.map(function (col, index) { return (React.createElement(GridColumn, { filterable: true, key: index, editable: true, field: col.field, title: col.title, format: col.format, cell: col.cell, width: col.width, headerSelectionValue: col.headerSelectionValue, editor: col.editor })); }))),
+                }, filterable: filterable, editField: editField, reorderable: reorderable, groupable: groupable, resizable: resizable, style: style, data: filteredProducts, dataItemKey: dataItemKey, take: take, sortable: sortable, detail: detailComponent, expandField: "expanded" }, dataState), columns.map(function (col, index) { return (React.createElement(GridColumn, { filterable: true, key: index, editable: true, field: col.field, title: col.title, format: col.format, cell: col.cell, width: col.width, headerSelectionValue: col.headerSelectionValue, editor: col.editor })); }))),
         columnOption.columnOptionModel && (React.createElement(ColumnAdd, { setColumnOption: setColumnOption, setColumns: setColumns, columns: columns, allColumnsField: allColumnsField, dataResult: dataResult, setDataResult: setDataResult })),
         columnOption.columnConfigsModel && (React.createElement(GridFeatureEnableHandler, { gridOptions: gridOptions, setGridOptions: setGridOptions, setColumnOption: setColumnOption }))));
 };