sag_components 1.0.638 → 1.0.640
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.
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.DropdownNew = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _DropdownNew = require("./DropdownNew.style");
|
|
10
|
+
/* eslint-disable react/prop-types */
|
|
11
|
+
|
|
12
|
+
const DropdownNew = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
isMulti,
|
|
15
|
+
label,
|
|
16
|
+
options,
|
|
17
|
+
value,
|
|
18
|
+
placeHolder,
|
|
19
|
+
onChange,
|
|
20
|
+
required,
|
|
21
|
+
borderRadius,
|
|
22
|
+
disabled,
|
|
23
|
+
width,
|
|
24
|
+
height,
|
|
25
|
+
error,
|
|
26
|
+
errorMessage,
|
|
27
|
+
borderColor,
|
|
28
|
+
borderColorFoucs,
|
|
29
|
+
labelFontColor,
|
|
30
|
+
radius
|
|
31
|
+
} = _ref;
|
|
32
|
+
const [isFocused, setIsFocused] = (0, _react.useState)(false);
|
|
33
|
+
const [showOptions, setShowOptions] = (0, _react.useState)(false);
|
|
34
|
+
const [inputValue, setInputValue] = (0, _react.useState)('');
|
|
35
|
+
const [selectedOptions, setDropdownedOptions] = (0, _react.useState)([]);
|
|
36
|
+
const inputRef = (0, _react.useRef)(null);
|
|
37
|
+
const filteredoptions = options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
|
|
38
|
+
const handleFocus = () => {
|
|
39
|
+
setIsFocused(true);
|
|
40
|
+
setShowOptions(true);
|
|
41
|
+
};
|
|
42
|
+
const handleBlur = () => {
|
|
43
|
+
// if (isMulti) return;
|
|
44
|
+
setIsFocused(false);
|
|
45
|
+
setTimeout(() => setShowOptions(false), 200); // Delay hiding options to allow clicking on them
|
|
46
|
+
};
|
|
47
|
+
const handleOptionClick = option => {
|
|
48
|
+
onChange({
|
|
49
|
+
target: {
|
|
50
|
+
value: option.value
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
setIsFocused(true);
|
|
54
|
+
setShowOptions(false);
|
|
55
|
+
setInputValue(option.label);
|
|
56
|
+
};
|
|
57
|
+
const handleInputChange = e => {
|
|
58
|
+
onChange({
|
|
59
|
+
target: {
|
|
60
|
+
value: e.target.value
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
handleOptionClick(e.target.value);
|
|
64
|
+
setInputValue(e.target.value);
|
|
65
|
+
};
|
|
66
|
+
const toggleOption = option => {
|
|
67
|
+
const selectedIndex = selectedOptions.findIndex(selectedOption => selectedOption.value === option.value);
|
|
68
|
+
if (selectedIndex === -1) {
|
|
69
|
+
setDropdownedOptions([...selectedOptions, option]);
|
|
70
|
+
} else {
|
|
71
|
+
const newDropdownedOptions = [...selectedOptions];
|
|
72
|
+
newDropdownedOptions.splice(selectedIndex, 1);
|
|
73
|
+
setDropdownedOptions(newDropdownedOptions);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
const isDropdowned = option => selectedOptions.some(selectedOption => selectedOption.value === option.value);
|
|
77
|
+
console.log('props', showOptions, filteredoptions === null || filteredoptions === void 0 ? void 0 : filteredoptions.length);
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownWrapper, {
|
|
79
|
+
className: "DropdownWrapper",
|
|
80
|
+
width: width
|
|
81
|
+
// height={height}
|
|
82
|
+
// margin="16px"
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement(_DropdownNew.Label, {
|
|
84
|
+
className: "Label",
|
|
85
|
+
isFocused: isFocused,
|
|
86
|
+
labelFontColor: labelFontColor,
|
|
87
|
+
hasValue: (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 || inputValue,
|
|
88
|
+
disabled: disabled,
|
|
89
|
+
error: error
|
|
90
|
+
}, label, required && /*#__PURE__*/_react.default.createElement("span", {
|
|
91
|
+
style: {
|
|
92
|
+
color: 'red'
|
|
93
|
+
}
|
|
94
|
+
}, "*")), /*#__PURE__*/_react.default.createElement(_DropdownNew.StyledInput, {
|
|
95
|
+
className: "StyledInput",
|
|
96
|
+
ref: inputRef,
|
|
97
|
+
radius: radius,
|
|
98
|
+
labelFontColor: labelFontColor,
|
|
99
|
+
borderColor: borderColor,
|
|
100
|
+
borderColorFoucs: borderColorFoucs,
|
|
101
|
+
value: inputValue,
|
|
102
|
+
onChange: handleInputChange,
|
|
103
|
+
onFocus: handleFocus,
|
|
104
|
+
onBlur: handleBlur,
|
|
105
|
+
type: "search",
|
|
106
|
+
disabled: disabled,
|
|
107
|
+
placeholder: isFocused ? placeHolder || 'Type to search...' : '',
|
|
108
|
+
style: {
|
|
109
|
+
width,
|
|
110
|
+
height
|
|
111
|
+
},
|
|
112
|
+
borderRadius: borderRadius,
|
|
113
|
+
error: error,
|
|
114
|
+
isFocused: isFocused
|
|
115
|
+
}), error && /*#__PURE__*/_react.default.createElement(_DropdownNew.ErrorMessage, null, errorMessage), /*#__PURE__*/_react.default.createElement(_DropdownNew.OptionsContainer, {
|
|
116
|
+
className: "OptionsContainer",
|
|
117
|
+
onMouseLeave: () => {
|
|
118
|
+
setIsFocused(false);
|
|
119
|
+
setShowOptions(false);
|
|
120
|
+
},
|
|
121
|
+
borderColorFoucs: borderColorFoucs,
|
|
122
|
+
showoptions: showOptions,
|
|
123
|
+
disabled: disabled,
|
|
124
|
+
filteredoptions: filteredoptions
|
|
125
|
+
}, filteredoptions.map(option => /*#__PURE__*/_react.default.createElement(_DropdownNew.OptionItem, {
|
|
126
|
+
className: "OptionItem",
|
|
127
|
+
key: option.value,
|
|
128
|
+
onClick: () => {
|
|
129
|
+
toggleOption(option);
|
|
130
|
+
setIsFocused(true);
|
|
131
|
+
},
|
|
132
|
+
selected: isDropdowned(option)
|
|
133
|
+
}, ' ', /*#__PURE__*/_react.default.createElement("input", {
|
|
134
|
+
type: "checkbox",
|
|
135
|
+
checked: isDropdowned(option),
|
|
136
|
+
onChange: () => toggleOption(option),
|
|
137
|
+
style: {
|
|
138
|
+
marginRight: '8px'
|
|
139
|
+
},
|
|
140
|
+
disabled: disabled
|
|
141
|
+
}), option.label))));
|
|
142
|
+
};
|
|
143
|
+
exports.DropdownNew = DropdownNew;
|
|
144
|
+
var _default = exports.default = DropdownNew;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.StyledInput = exports.OptionsContainer = exports.OptionItem = exports.Label = exports.ErrorMessage = exports.DropdownWrapper = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
11
|
+
/* eslint-disable no-nested-ternary */
|
|
12
|
+
const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n margin: ", "; \n"])), props => props.width || '200px', props => props.height || '53px', props => props.margin || '0');
|
|
13
|
+
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\n \n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: 10px;\n font-family: Poppins;\n \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n &:focus {\n border-radius: 12px 12px 0 0 ;\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelFontColor, props => props.isFocused || props.hasValue ? '0px' : '50%');
|
|
14
|
+
const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 200px;\n //height: 40px;\n padding: 16px;\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n //line-height: 18px;\n /* border:\n ", "; */\n\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: Poppins;\n outline: none;\n box-sizing: border-box;\n //color: ", ";\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n\n // border-color: ", ";\n }\n\n &:focus {\n // border-radius: 12px 12px 0 0 ;\n // border-bottom: none;\n border: 2px solid ", ";\n //border-color: ", ";\n }\n\n"])), props => props.disabled ? '1px solid \'#bdbdbd\'' : props.error ? '1px solid \'red\'' : props.isFocused ? "2px solid ".concat(props.borderColorFocus) : "1px solid ".concat(props.borderColor) || '1px solid \'#bdbdbd\'', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor, props => props.radius, props => props.disabled ? '#888' : '#333', props => props.disabled ? '#888' : (props.isFocused || props.value ? props.labelFontColor : '#757575') || '#333', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelFontColor || '#bdbdbd', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelFontColor || '#bdbdbd', props => props.disabled ? '#bdbdbd' : props.borderColorFoucs);
|
|
15
|
+
const OptionsContainer = exports.OptionsContainer = _styledComponents.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 0;\n position: absolute;\n top: calc(100% + 8px);\n left: 0;\n z-index: 10;\n width: 100%;\n font-family: Poppins;\n border-top: none;\n border-radius: 4px; \n background-color: #fff; \n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => {
|
|
16
|
+
var _props$filteredoption;
|
|
17
|
+
return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
|
|
18
|
+
});
|
|
19
|
+
const OptionItem = exports.OptionItem = _styledComponents.default.li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n padding: 10px 10px 10px 15px;\n cursor: pointer;\n color: rgba(33, 33, 33, 0.80);\n font-family: Poppins;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n transition: background-color 0.3s;\n\n &:hover {\n background-color: #f0f0f0;\n }\n"])));
|
|
20
|
+
const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n"])));
|
|
@@ -25,6 +25,8 @@ const FilterPanel = props => {
|
|
|
25
25
|
fieldsData,
|
|
26
26
|
borderColor,
|
|
27
27
|
okButtonBackgroundColor,
|
|
28
|
+
okButtonHoverColor,
|
|
29
|
+
resetButtonHoverColor,
|
|
28
30
|
onOkClick,
|
|
29
31
|
onResetClick,
|
|
30
32
|
onItemValueChanged,
|
|
@@ -393,20 +395,29 @@ const FilterPanel = props => {
|
|
|
393
395
|
placeHolder: item.placeHolder,
|
|
394
396
|
placeHolderFontSize: "14px",
|
|
395
397
|
onChange: eventDropdownPeriodPicker => {
|
|
396
|
-
var _eventDropdownPeriodP, _eventDropdownPeriodP2;
|
|
398
|
+
var _eventDropdownPeriodP, _eventDropdownPeriodP2, _item$defaultValueYea4, _item$defaultValueYea5, _item$defaultValueYea6;
|
|
397
399
|
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;
|
|
398
|
-
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField =>
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
400
|
+
const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => {
|
|
401
|
+
var _item$defaultValueYea, _item$defaultValueYea2, _item$defaultValueYea3;
|
|
402
|
+
return itemField.name === item.name ? {
|
|
403
|
+
...itemField,
|
|
404
|
+
periodPickerSelectedValue: newPeriodPickerSelectedValue ? "".concat(newPeriodPickerSelectedValue) : undefined,
|
|
405
|
+
...(newPeriodPickerSelectedValue === 'year' && item !== null && item !== void 0 && (_item$defaultValueYea = item.defaultValueYears) !== null && _item$defaultValueYea !== void 0 && _item$defaultValueYea.value ? {
|
|
406
|
+
inputSubType: 'year'
|
|
407
|
+
} : ''),
|
|
408
|
+
selectedValue: newPeriodPickerSelectedValue === 'year' && item !== null && item !== void 0 && (_item$defaultValueYea2 = item.defaultValueYears) !== null && _item$defaultValueYea2 !== void 0 && _item$defaultValueYea2.value ? item === null || item === void 0 ? void 0 : (_item$defaultValueYea3 = item.defaultValueYears) === null || _item$defaultValueYea3 === void 0 ? void 0 : _item$defaultValueYea3.value : undefined
|
|
409
|
+
} : itemField;
|
|
410
|
+
});
|
|
403
411
|
setFieldsDataState(newFieldsDataState);
|
|
404
412
|
onItemValueChanged({
|
|
405
413
|
fieldsData: newFieldsDataState,
|
|
406
414
|
changedItem: {
|
|
407
415
|
name: item.name,
|
|
408
416
|
inputType: item.inputType,
|
|
409
|
-
|
|
417
|
+
...(newPeriodPickerSelectedValue === 'year' && item !== null && item !== void 0 && (_item$defaultValueYea4 = item.defaultValueYears) !== null && _item$defaultValueYea4 !== void 0 && _item$defaultValueYea4.value ? {
|
|
418
|
+
inputSubType: 'year'
|
|
419
|
+
} : ''),
|
|
420
|
+
selectedValue: newPeriodPickerSelectedValue === 'year' && item !== null && item !== void 0 && (_item$defaultValueYea5 = item.defaultValueYears) !== null && _item$defaultValueYea5 !== void 0 && _item$defaultValueYea5.value ? item === null || item === void 0 ? void 0 : (_item$defaultValueYea6 = item.defaultValueYears) === null || _item$defaultValueYea6 === void 0 ? void 0 : _item$defaultValueYea6.value : undefined
|
|
410
421
|
}
|
|
411
422
|
});
|
|
412
423
|
},
|
|
@@ -444,6 +455,15 @@ const FilterPanel = props => {
|
|
|
444
455
|
type: "primary",
|
|
445
456
|
size: "medium",
|
|
446
457
|
width: "74px",
|
|
458
|
+
textColor: "#ffffff",
|
|
459
|
+
backgroundColor: okButtonBackgroundColor,
|
|
460
|
+
borderColor: okButtonBackgroundColor,
|
|
461
|
+
hoverTextColor: "#ffffff",
|
|
462
|
+
hoverBackgroundColor: okButtonHoverColor,
|
|
463
|
+
hoverBorderColor: okButtonHoverColor,
|
|
464
|
+
disabledTextColor: "#B1B1B1",
|
|
465
|
+
disabledBackgroundColor: "#E3E4E5",
|
|
466
|
+
disabledBorderColor: "#E3E4E5",
|
|
447
467
|
disabled: disableOKButton,
|
|
448
468
|
onClick: () => onOkClick({
|
|
449
469
|
eventName: 'onOkClick',
|
|
@@ -461,6 +481,15 @@ const FilterPanel = props => {
|
|
|
461
481
|
size: "medium",
|
|
462
482
|
type: "secondary",
|
|
463
483
|
width: "74px",
|
|
484
|
+
textColor: "#212121",
|
|
485
|
+
backgroundColor: "#ffffff",
|
|
486
|
+
borderColor: "#B1B1B1",
|
|
487
|
+
hoverTextColor: okButtonBackgroundColor,
|
|
488
|
+
hoverBackgroundColor: resetButtonHoverColor,
|
|
489
|
+
hoverBorderColor: okButtonBackgroundColor,
|
|
490
|
+
disabledTextColor: "#B1B1B1",
|
|
491
|
+
disabledBackgroundColor: "#ffffff",
|
|
492
|
+
disabledBorderColor: "#E3E4E5",
|
|
464
493
|
disabled: false,
|
|
465
494
|
onClick: e => onClickResetHandler(e)
|
|
466
495
|
})));
|
|
@@ -473,6 +502,8 @@ FilterPanel.defaultProps = {
|
|
|
473
502
|
width: '800px',
|
|
474
503
|
height: '600px',
|
|
475
504
|
okButtonBackgroundColor: '#229E38',
|
|
505
|
+
okButtonHoverColor: '#92CF17',
|
|
506
|
+
resetButtonHoverColor: '#E8F5EB',
|
|
476
507
|
borderColor: '#757575',
|
|
477
508
|
onOkClick: () => {},
|
|
478
509
|
onResetClick: () => {},
|