sag_components 1.0.607 → 1.0.609

package/dist/stories/components/DropdownMulti.js

@@ -25,8 +25,8 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
 /**
  *  SAG DropdownMulti
  */
-const DropdownMulti = _ref => {
-  let {
+const DropdownMulti = props => {
+  const {
     name,
     width = '100%',
     size,
@@ -47,11 +47,7 @@ const DropdownMulti = _ref => {
     disabled = false,
     dropdownListfontSize = '14px',
     placeHolderFontSize = '14px'
-  } = _ref;
-  /**
-   *  SAG DropdownMulti
-   */
-
+  } = props;
   const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
   const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
@@ -192,10 +188,10 @@ const DropdownMulti = _ref => {
       width: "0.5em",
       height: "0.5em"
     }) : null,
-    renderOption: (props, option, _ref2) => {
+    renderOption: (props, option, _ref) => {
       let {
         selected
-      } = _ref2;
+      } = _ref;
       return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
         icon: icon,
         checkedIcon: checkedIcon,
@@ -257,6 +253,7 @@ const DropdownMulti = _ref => {
 
   // --------------------------------- MAIN -------------------------------------
   return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
+    className: "DropdownContainer",
     width: width
   }, getAutocompleteMulti());
 };

package/dist/stories/components/DropdownMulti.style.js

@@ -8,6 +8,4 @@ exports.DropdownContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-// import './font.css';
-
-const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: 14px;\n"])), props => props.width);

package/dist/stories/components/FilterPanel.js

@@ -31,18 +31,19 @@ const FilterPanel = props => {
   } = props;
   const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
   const [Reset, setReset] = (0, _react.useState)(false);
-  const [PeriodPickerSelectedValue, setPeriodPickerSelectedValue] = (0, _react.useState)('');
   (0, _react.useEffect)(() => {
     setFieldsDataState(fieldsData);
   }, [fieldsData]);
   const onClickResetHandler = () => {
     const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
       ...itemField,
-      selectedValue: undefined
+      selectedValue: undefined,
+      ...(itemField.periodPickerSelectedValue ? {
+        periodPickerSelectedValue: undefined
+      } : '')
     }));
     setFieldsDataState(newFieldsDataState);
     setReset(!Reset);
-    setPeriodPickerSelectedValue('');
     onResetClick({
       eventName: 'onResetClick',
       fieldsData: newFieldsDataState
@@ -62,7 +63,7 @@ const FilterPanel = props => {
   };
   const displayPeriodPickerContent = item => {
     let content;
-    switch (PeriodPickerSelectedValue) {
+    switch (item.periodPickerSelectedValue) {
       case 'date':
         content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
           className: "DatePickerContainer"
@@ -164,6 +165,7 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: ''.concat(item.name, '_Year'),
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -201,7 +203,30 @@ const FilterPanel = props => {
         });
         break;
       default:
-        content = '';
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
+          className: "PeriodPickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
+          className: "Dropdown",
+          name: ''.concat(item.name, '_Default'),
+          reset: Reset,
+          showPopupIcon: false,
+          allowedInput: "all",
+          dropdownListfontSize: "14px",
+          labelColor: borderColor,
+          limitTagsOnMultiSelect: 2,
+          onInputChange: () => {},
+          shape: "round",
+          size: "large",
+          text: "Select Dates",
+          value: undefined,
+          required: false,
+          disabled: true,
+          placeHolder: "Select Dates",
+          placeHolderFontSize: "14px",
+          onChange: () => {},
+          options: [],
+          width: "100%"
+        }));
     }
     return content;
   };
@@ -213,6 +238,7 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: item.name,
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -220,7 +246,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: item.label,
+          text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -252,6 +278,7 @@ const FilterPanel = props => {
           className: "DropdownMulti",
           name: item.name,
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -259,7 +286,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: item.label,
+          text: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -293,7 +320,7 @@ const FilterPanel = props => {
           className: "RangePicker",
           borderColor: borderColor,
           borderRadius: "12px",
-          label: item.label,
+          label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
           onChange: eventDatePicker => {
             const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
             const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
@@ -323,6 +350,7 @@ const FilterPanel = props => {
           className: "Dropdown",
           name: item.name,
           reset: Reset,
+          showPopupIcon: true,
           allowedInput: "all",
           dropdownListfontSize: "14px",
           labelColor: borderColor,
@@ -330,7 +358,7 @@ const FilterPanel = props => {
           onInputChange: () => {},
           shape: "round",
           size: "large",
-          text: item.label,
+          text: !item.periodPickerSelectedValue ? item.labelEmptyValue || item.label : item.label,
           value: item.selectedValue || undefined,
           required: item.required,
           disabled: item.disabled,
@@ -338,8 +366,12 @@ const FilterPanel = props => {
           placeHolderFontSize: "14px",
           onChange: eventDropdownPeriodPicker => {
             var _eventDropdownPeriodP, _eventDropdownPeriodP2;
-            const selectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
-            setPeriodPickerSelectedValue(selectedValue);
+            const newPeriodPickerSelectedValue = eventDropdownPeriodPicker !== null && eventDropdownPeriodPicker !== void 0 && (_eventDropdownPeriodP = eventDropdownPeriodPicker.newValue) !== null && _eventDropdownPeriodP !== void 0 && _eventDropdownPeriodP.value ? "".concat(eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : (_eventDropdownPeriodP2 = eventDropdownPeriodPicker.newValue) === null || _eventDropdownPeriodP2 === void 0 ? void 0 : _eventDropdownPeriodP2.value) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
           },
           options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
           width: "100%"
@@ -347,6 +379,7 @@ const FilterPanel = props => {
         break;
       default:
         content = '';
+        break;
     }
     return content;
   };

package/dist/stories/components/SagIconButton.style.js

@@ -8,5 +8,5 @@ exports.SpanText = exports.SagIconButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
-const SagIconButtonWrapper = exports.SagIconButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  white-space: nowrap;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: ", "; \n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color, props => props.backgroundColor ? "var(--Primary-1, ".concat(props.backgroundColor, ")") : '#transparent');
+const SagIconButtonWrapper = exports.SagIconButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  white-space: nowrap;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: ", "; \n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color, props => props.backgroundColor ? props.backgroundColor : 'transparent');
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.607",
+  "version": "1.0.609",
   "description": "",
   "main": "dist/index.js",
   "scripts": {