sccoreui 3.5.9 → 3.6.0

package/dist/App.scss

@@ -329,8 +329,28 @@ h3 {
   background: #162578;
 }
 
-.custom_date_picker {
-  // padding-left: 134px;
+
+.custom_date_picker_sec {
+
+  .custom_date_picker {
+    // padding-left: 134px;
+    .p-inputtext{
+      padding-right: 16px;
+      width: 130px;
+      // max-width: max-content;
+    }
+  }
+  
+  .custom_date_picker.multiple {
+    .p-inputtext{
+      width: 236px;
+      // max-width: max-content;
+    }
+  }
+
+  .clear_icon_sec {
+    right: 32px;
+  }
 }
 
 .date_filter {

package/dist/components/date-picker/date-picker.js

@@ -16,10 +16,7 @@ const DatePicker = (props) => {
     const [fromDateFormate, setFromDateFormate] = (0, react_1.useState)(formattedDate);
     const [toDateFormate, setToDateFormate] = (0, react_1.useState)('-');
     const [propsState, setPropsState] = (0, react_1.useState)({});
-    let dateFromTo = {
-        0: null,
-        1: null,
-    };
+    let dateFromTo = {};
     const selecteDateOption = (dateType) => {
         dateFromTo[0] = today;
         switch (dateType) {
@@ -88,16 +85,6 @@ const DatePicker = (props) => {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-end" }, { children: [(0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "list-none date_filter" }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Today') }, { children: "Today" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Yesterday') }, { children: "Yesterday" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This week') }, { children: "This week" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last week') }, { children: "Last week" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This month') }, { children: "This month" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last month') }, { children: "Last month" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This year') }, { children: "This year" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last year') }, { children: "Last year" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Custom') }, { children: "Custom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bottom_date_filters pt-4 px-6 pb-2 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Today", className: "bg-white text-gray-900 border-1 border-gray-300", onClick: () => selecteDateOption('Today') }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: `${fromDateFormate}`, className: "text-left bg-white text-gray-900 border-1 border-gray-300 mr-2 w-7rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-xl" }, { children: "-" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: `${toDateFormate}`, className: "text-left bg-white text-gray-900 border-1 border-gray-300 ml-2 w-7rem" })] }))] }))] })) }));
     };
     const onChangeDate = (e) => {
-        setFromDate(e.value);
-        const frmD = e.value[0].toLocaleDateString('en-US', options);
-        setFromDateFormate(frmD);
-        if (e.value[1]) {
-            const toD = e.value[1].toLocaleDateString('en-US', options);
-            setToDateFormate(toD);
-        }
-        else {
-            setToDateFormate('-');
-        }
         if (props.onChange)
             props.onChange(e);
     };
@@ -128,6 +115,30 @@ const DatePicker = (props) => {
         }
         setPropsState(datePickerProps);
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex justify-content-center w-full" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ showIcon: true, value: fromDate, onChange: (e) => onChangeDate(e), footerTemplate: template, className: "custom_date_picker" }, propsState)) })));
+    (0, react_1.useEffect)(() => {
+        if (props.value === null) {
+            setFromDate(null);
+            return;
+        }
+        setFromDate(props.value);
+        const frmD = props.value[0].toLocaleDateString('en-US', options);
+        setFromDateFormate(frmD);
+        if (props.value[1]) {
+            const toD = props.value[1].toLocaleDateString('en-US', options);
+            setToDateFormate(toD);
+        }
+        else {
+            setToDateFormate('-');
+        }
+    }, [props.value]);
+    const clearIcon = () => {
+        const onClear = () => {
+            if (props.onClear)
+                props.onClear();
+        };
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClear, className: "flex align-items-center absolute right-20 clear_icon_sec cursor-pointer" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex justify-content-center w-full relative align-items-center custom_date_picker_sec` }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ showIcon: true, value: fromDate, onChange: (e) => onChangeDate(e), footerTemplate: template, className: `custom_date_picker ${(!JSON.stringify(fromDate).includes('null') && JSON.stringify(fromDate).includes(',')) ? 'multiple' : ''}` }, propsState)), (props.clear && JSON.stringify(fromDate).split(',').length > 1) &&
+                clearIcon()] })));
 };
 exports.default = DatePicker;

package/dist/components/multi-select-dropdown/multi-select-dropdown.js

@@ -29,7 +29,6 @@ const MultiSelectDropDown = (props) => {
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClear, className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
     };
     const onChange = (e) => {
-        setItems(e.value);
         if (props.onChange)
             props.onChange(e);
     };
@@ -39,6 +38,9 @@ const MultiSelectDropDown = (props) => {
         else
             setIsMoreThenOne(false);
     }, [items]);
+    (0, react_1.useEffect)(() => {
+        setItems(props.value);
+    }, [props.value]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType !== '' &&
                 (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${(props.dropdownType !== undefined && props.dropdownType === "status") ? 'status_dropdown' : ''} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: props.dropdownType === 'status' ? (option) => { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `status_dropdown_item pl-3 ${option.name}` }, { children: option.name })) })); } : '', filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "3.5.9",
+  "version": "3.6.0",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",