sag_components 1.0.617 → 1.0.618

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/stories/components/DropdownMulti.style.js +1 -1
  2. package/dist/stories/components/FilterPanel.js +30 -36
  3. package/dist/stories/components/FilterPanel.style.js +7 -3
  4. package/dist/stories/components/Tooltip.style.js +1 -1
  5. package/package.json +1 -1
package/dist/stories/components/DropdownMulti.style.js CHANGED
@@ -8,4 +8,4 @@ exports.DropdownContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject;
11
- 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);
11
+ 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\", sans-serif; \n font-size: 14px; \n"])), props => props.width);
package/dist/stories/components/FilterPanel.js CHANGED
@@ -14,6 +14,7 @@ var _SagButton = _interopRequireDefault(require("./SagButton"));
14
14
  var _RangePicker = _interopRequireDefault(require("./RangePicker"));
15
15
  var _QuarterPicker = _interopRequireDefault(require("./QuarterPicker"));
16
16
  var _MonthPicker = _interopRequireDefault(require("./MonthPicker"));
17
+ var _Tooltip = _interopRequireDefault(require("./Tooltip"));
17
18
  var _FilterPanel = require("./FilterPanel.style");
18
19
  // eslint-disable-next-line import/no-extraneous-dependencies
19
20
 
@@ -27,11 +28,18 @@ const FilterPanel = props => {
27
28
  onItemValueChanged,
28
29
  width,
29
30
  height,
30
- disableOKButton,
31
- dropdownMultiMaxWidth
31
+ disableOKButton
32
32
  } = props;
33
33
  const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
34
34
  const [Reset, setReset] = (0, _react.useState)(false);
35
+ const [FieldsContainerWidth, setFieldsContainerWidth] = (0, _react.useState)(0);
36
+ const AllFieldsContainerRef = (0, _react.useRef)();
37
+ (0, _react.useEffect)(() => {
38
+ const {
39
+ offsetWidth
40
+ } = AllFieldsContainerRef.current;
41
+ setFieldsContainerWidth(offsetWidth - 20);
42
+ }, [width]);
35
43
  (0, _react.useEffect)(() => {
36
44
  const newFieldsDataState = FieldsDataState.map(itemFieldsDataState => {
37
45
  const foundItem = fieldsData.find(itemfieldsData => itemFieldsDataState.name === itemfieldsData.name);
@@ -43,7 +51,6 @@ const FilterPanel = props => {
43
51
  };
44
52
  });
45
53
  setFieldsDataState(newFieldsDataState);
46
- console.log('newFieldsDataState', newFieldsDataState);
47
54
  }, [fieldsData]);
48
55
  const onClickResetHandler = () => {
49
56
  const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
@@ -60,6 +67,7 @@ const FilterPanel = props => {
60
67
  fieldsData: newFieldsDataState
61
68
  });
62
69
  };
70
+ const getTooltipText = () => /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipTextContainer, null, /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "Dates can be selected"), /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "only after selecting"), /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "dates types"));
63
71
  const getYearsArray = () => {
64
72
  const currentYear = (0, _moment.default)().year();
65
73
  const previousYear = (0, _moment.default)().subtract(1, 'years').year();
@@ -214,30 +222,17 @@ const FilterPanel = props => {
214
222
  });
215
223
  break;
216
224
  default:
217
- content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
218
- className: "PeriodPickerContainer"
219
- }, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
220
- className: "Dropdown",
221
- name: ''.concat(item.name, '_Default'),
222
- reset: Reset,
223
- showPopupIcon: true,
224
- allowedInput: "all",
225
- dropdownListfontSize: "14px",
226
- labelColor: borderColor,
227
- limitTagsOnMultiSelect: 2,
228
- onInputChange: () => {},
229
- shape: "round",
230
- size: "large",
231
- text: "Select Dates",
232
- value: undefined,
233
- required: false,
234
- disabled: true,
235
- placeHolder: "Select Dates",
236
- placeHolderFontSize: "14px",
237
- onChange: () => {},
238
- options: [],
239
- width: "100%"
240
- }));
225
+ content = /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
226
+ className: "Tooltip",
227
+ content: getTooltipText(),
228
+ direction: "top",
229
+ width: "100%",
230
+ height: "50px"
231
+ }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyContainer, {
232
+ className: "PeriodPickerEmptyContainer",
233
+ width: FieldsContainerWidth ? "".concat(FieldsContainerWidth === null || FieldsContainerWidth === void 0 ? void 0 : FieldsContainerWidth.toString(), "px") : undefined,
234
+ height: "50px"
235
+ }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyText, null, "Select Dates")));
241
236
  }
242
237
  return content;
243
238
  };
@@ -289,7 +284,7 @@ const FilterPanel = props => {
289
284
  className: "DropdownMulti",
290
285
  name: item.name,
291
286
  reset: Reset,
292
- dropdownMultiMaxWidth: dropdownMultiMaxWidth,
287
+ dropdownMultiMaxWidth: FieldsContainerWidth ? "".concat(FieldsContainerWidth === null || FieldsContainerWidth === void 0 ? void 0 : FieldsContainerWidth.toString(), "px") : undefined,
293
288
  showPopupIcon: false,
294
289
  allowedInput: "all",
295
290
  dropdownListfontSize: "14px",
@@ -400,20 +395,20 @@ const FilterPanel = props => {
400
395
  return '';
401
396
  }
402
397
  return /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldsContainer, {
403
- id: "FieldsContainer"
398
+ className: "FieldsContainer"
404
399
  }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldContainer, {
405
- id: "FieldContainer"
400
+ className: "FieldContainer"
406
401
  }, displayField(item))));
407
402
  };
408
403
  return /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
409
- id: "ControlsContainer",
410
- className: "modal-content",
404
+ className: "ControlsContainer",
411
405
  height: height,
412
406
  width: width
413
407
  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
414
- id: "AllFieldsContainer"
408
+ className: "AllFieldsContainer",
409
+ ref: AllFieldsContainerRef
415
410
  }, displayFields(FieldsDataState)), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
416
- id: "ButtonsContainer"
411
+ className: "ButtonsContainer"
417
412
  }, /*#__PURE__*/_react.default.createElement(_SagButton.default, {
418
413
  textColor: "#ffffff",
419
414
  backgroundColor: okButtonBackgroundColor || '#ffffff',
@@ -462,6 +457,5 @@ FilterPanel.defaultProps = {
462
457
  onOkClick: () => {},
463
458
  onResetClick: () => {},
464
459
  onItemValueChanged: () => {},
465
- disableOKButton: false,
466
- dropdownMultiMaxWidth: undefined
460
+ disableOKButton: false
467
461
  };
package/dist/stories/components/FilterPanel.style.js CHANGED
@@ -4,14 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
7
+ exports.TooltipTextContainer = exports.TooltipText = exports.PeriodPickerEmptyText = exports.PeriodPickerEmptyContainer = exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 14px;\n background-color: #fefefe;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
12
12
  const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n flex-direction: row-reverse; \n padding: 20px 10px 0 0;\n gap: 20px;\n"])));
13
13
  const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n flex-wrap: wrap;\n width: 100%;\n"])));
14
14
  const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n white-space: wrap;\n padding: 10px;\n gap: 20px;\n width: 100%;\n"])));
15
15
  const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0;\n \n"])));
16
16
  const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
17
- const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n flex-direction: column;\n gap: 20px;\n"])));
17
+ const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n flex-direction: column;\n gap: 20px;\n"])));
18
+ const PeriodPickerEmptyContainer = exports.PeriodPickerEmptyContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n display: flex; \n align-content: center;\n justify-content: flex-start;\n align-items: center; \n border-radius: 10px; \n border: 1px solid #E7E7E7;\n width: ", ";\n height: ", "; \n &:hover {\n cursor: pointer;\n } \n"])), props => props.width, props => props.height);
19
+ const PeriodPickerEmptyText = exports.PeriodPickerEmptyText = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 20px;\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n color: #8B8989;\n user-select: none; \n"])));
20
+ const TooltipTextContainer = exports.TooltipTextContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n margin: 5px;\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n user-select: none;\n &:hover {\n cursor: pointer;\n }\n"])));
21
+ const TooltipText = exports.TooltipText = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n"])));
package/dist/stories/components/Tooltip.style.js CHANGED
@@ -15,4 +15,4 @@ const TooltipContainer = exports.TooltipContainer = _styledComponents.default.di
15
15
  const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n position: relative;\n"])));
16
16
 
17
17
  /* Absolute positioning */
18
- const TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n position: absolute;\n border-radius: 4px;\n left: 50%;\n transform: translateX(-50%);\n padding: 4px 6px;\n color: var(--tooltip-text-color);\n background: var(--tooltip-background-color);\n font-size: 12px;\n font-family: sans-serif;\n line-height: 1;\n z-index: 100;\n white-space: nowrap;\n \n /* CSS border triangles */\n &.controls::before {\n content: \" \";\n left: 50%;\n border: solid transparent;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-width: var(--tooltip-arrow-size);\n margin-left: calc(var(--tooltip-arrow-size) * -1);\n }\n\n /* Absolute positioning */\n &.controls.top {\n top: calc(var(--tooltip-margin) * -1);\n }\n\n /* CSS border triangles */\n &.controls.top::before {\n top: 100%;\n border-top-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.right {\n left: calc(70% + var(--tooltip-margin));\n top: 50%;\n transform: translateX(0) translateY(-50%);\n }\n\n /* CSS border triangles */\n &.controls.right::before {\n left: calc(var(--tooltip-arrow-size) * -1);\n top: 50%;\n transform: translateX(0) translateY(-50%);\n border-right-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.bottom {\n bottom: calc(var(--tooltip-margin) * -1);\n }\n /* CSS border triangles */\n &.controls.bottom::before {\n bottom: 100%;\n border-bottom-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.left {\n left: auto;\n right: calc(70% + var(--tooltip-margin));\n top: 50%;\n transform: translateX(0) translateY(-50%);\n }\n /* CSS border triangles */\n &.controls.left::before {\n left: auto;\n right: calc(var(--tooltip-arrow-size) * -2);\n top: 50%;\n transform: translateX(0) translateY(-50%);\n border-left-color: var(--tooltip-background-color);\n }\n"])));
18
+ const TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n position: absolute;\n border-radius: 4px;\n left: 50%;\n transform: translateX(-50%);\n padding: 4px 6px;\n color: var(--tooltip-text-color);\n background: var(--tooltip-background-color);\n font-size: 12px;\n font-family: sans-serif;\n line-height: 1;\n z-index: 100;\n white-space: nowrap;\n \n /* CSS border triangles */\n &.controls::before {\n content: \" \";\n left: 50%;\n border: solid transparent;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-width: var(--tooltip-arrow-size);\n margin-left: calc(var(--tooltip-arrow-size) * -1);\n }\n\n /* Absolute positioning */\n &.controls.top {\n top: calc(var(--tooltip-margin) * -1.8 );\n }\n\n /* CSS border triangles */\n &.controls.top::before {\n top: 100%;\n border-top-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.right {\n left: calc(70% + var(--tooltip-margin));\n top: 50%;\n transform: translateX(0) translateY(-50%);\n }\n\n /* CSS border triangles */\n &.controls.right::before {\n left: calc(var(--tooltip-arrow-size) * -1);\n top: 50%;\n transform: translateX(0) translateY(-50%);\n border-right-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.bottom {\n bottom: calc(var(--tooltip-margin) * -1);\n }\n /* CSS border triangles */\n &.controls.bottom::before {\n bottom: 100%;\n border-bottom-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.left {\n left: auto;\n right: calc(70% + var(--tooltip-margin));\n top: 50%;\n transform: translateX(0) translateY(-50%);\n }\n /* CSS border triangles */\n &.controls.left::before {\n left: auto;\n right: calc(var(--tooltip-arrow-size) * -2);\n top: 50%;\n transform: translateX(0) translateY(-50%);\n border-left-color: var(--tooltip-background-color);\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.617",
3
+ "version": "1.0.618",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {