intelicoreact 0.1.85 → 0.1.86
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.
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +4 -1
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +16 -4
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js +45 -78
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.scss +2 -2
- package/package.json +1 -1
|
@@ -74,10 +74,11 @@
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
input[type="checkbox" i] {
|
|
77
|
-
&:indeterminate {
|
|
77
|
+
&:indeterminate + span {
|
|
78
78
|
display: block;
|
|
79
79
|
width: 100%;
|
|
80
80
|
height: 100%;
|
|
81
|
+
|
|
81
82
|
&:after {
|
|
82
83
|
content: "";
|
|
83
84
|
position: absolute;
|
|
@@ -89,6 +90,8 @@
|
|
|
89
90
|
width: 100%;
|
|
90
91
|
height: 100%;
|
|
91
92
|
background-color: #6b81dd;
|
|
93
|
+
transform: rotate(0deg);
|
|
94
|
+
border: none;
|
|
92
95
|
}
|
|
93
96
|
&:before {
|
|
94
97
|
content: "";
|
|
@@ -51,6 +51,11 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
51
51
|
isOpened = _useState2[0],
|
|
52
52
|
setIsOpened = _useState2[1];
|
|
53
53
|
|
|
54
|
+
var _useState3 = (0, _react.useState)(false),
|
|
55
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
56
|
+
isOpenedByOnFocus = _useState4[0],
|
|
57
|
+
setOpenedByOnFocus = _useState4[1];
|
|
58
|
+
|
|
54
59
|
var calendarRef = (0, _react.useRef)(null);
|
|
55
60
|
var formatedMinDate = (0, _momentTimezone.default)(minDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(minDate, format).format(format) : null;
|
|
56
61
|
var formatedMaxDate = (0, _momentTimezone.default)(maxDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(maxDate, format).format(format) : null;
|
|
@@ -74,6 +79,10 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
74
79
|
return (0, _momentTimezone.default)(new Date()).format('L');
|
|
75
80
|
};
|
|
76
81
|
|
|
82
|
+
(0, _react.useEffect)(function () {
|
|
83
|
+
if (!isOpened) setOpenedByOnFocus(false);
|
|
84
|
+
}, [isOpened]);
|
|
85
|
+
|
|
77
86
|
var handleBlur = function handleBlur(e) {
|
|
78
87
|
var value = e.target.value;
|
|
79
88
|
if ((0, _momentTimezone.default)(value, format).format(format) === 'Invalid date') onChange('');else if ((0, _momentTimezone.default)(value, format).startOf('day').isBefore(momentMinDate, 'days')) onChange(formatedMinDate);else if ((0, _momentTimezone.default)(value, format).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formatedMaxDate);else onChange((0, _momentTimezone.default)(value, format).format(format));
|
|
@@ -92,13 +101,16 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
92
101
|
return changeInputValue(e.target.value);
|
|
93
102
|
},
|
|
94
103
|
className: "calendar-dropdown",
|
|
95
|
-
onFocus: function onFocus() {
|
|
96
|
-
|
|
104
|
+
onFocus: function onFocus(e) {
|
|
105
|
+
setOpenedByOnFocus(true);
|
|
106
|
+
setIsOpened(true);
|
|
97
107
|
},
|
|
98
108
|
onBlur: !isOpened ? handleBlur : function () {},
|
|
99
109
|
onKeyUp: function onKeyUp(e) {
|
|
100
|
-
if (
|
|
101
|
-
|
|
110
|
+
if (!isOpenedByOnFocus) {
|
|
111
|
+
if (e.key === 'Enter') e.target.blur();
|
|
112
|
+
setIsOpened(false);
|
|
113
|
+
}
|
|
102
114
|
}
|
|
103
115
|
}), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
104
116
|
date: getCalendarValue(value),
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -11,104 +9,73 @@ exports.default = void 0;
|
|
|
11
9
|
|
|
12
10
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
11
|
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
17
13
|
|
|
18
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
15
|
|
|
20
16
|
var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxInput"));
|
|
21
17
|
|
|
22
|
-
var _utils = require("../../../Functions/utils");
|
|
23
|
-
|
|
24
18
|
require("./TieredCheckboxes.scss");
|
|
25
19
|
|
|
26
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
-
|
|
28
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
-
|
|
30
20
|
var TieredCheckboxes = function TieredCheckboxes(_ref) {
|
|
31
21
|
var items = _ref.items,
|
|
32
|
-
className = _ref.className
|
|
33
|
-
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var _useState5 = (0, _react.useState)([]),
|
|
45
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
46
|
-
checkedItems = _useState6[0],
|
|
47
|
-
setCheckedItems = _useState6[1];
|
|
48
|
-
|
|
49
|
-
var _useState7 = (0, _react.useState)(false),
|
|
50
|
-
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
51
|
-
isThirdStatement = _useState8[0],
|
|
52
|
-
setIsThirdStatement = _useState8[1];
|
|
53
|
-
|
|
54
|
-
var onChange = (0, _utils.handleObjectChange)(setData, function () {
|
|
55
|
-
return setData((0, _toConsumableArray2.default)(data));
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
var handleArrayChange = function handleArrayChange(e, index, childIndex) {
|
|
59
|
-
// change children checkboxes
|
|
60
|
-
if (childIndex || childIndex === 0) {
|
|
61
|
-
data[index].children[childIndex].value = e;
|
|
62
|
-
|
|
63
|
-
if (data[index].children.filter(function (item) {
|
|
64
|
-
return item.value === true;
|
|
65
|
-
}).length === data[index].children.length) {
|
|
66
|
-
data[index].value = true;
|
|
67
|
-
setIsThirdStatement(false);
|
|
68
|
-
} else if (data[index].children.filter(function (item) {
|
|
69
|
-
return item.value === true;
|
|
70
|
-
}).length === 0) {
|
|
71
|
-
setIsThirdStatement(false);
|
|
72
|
-
} else {
|
|
73
|
-
setIsThirdStatement(true);
|
|
74
|
-
data[index].value = false;
|
|
75
|
-
} // change parent checkboxes
|
|
76
|
-
|
|
77
|
-
} else {
|
|
78
|
-
data[index].children.forEach(function (elem) {
|
|
79
|
-
elem.value = e;
|
|
22
|
+
className = _ref.className,
|
|
23
|
+
onChange = _ref.onChange;
|
|
24
|
+
var handle = {
|
|
25
|
+
changeParent: function changeParent(value, key) {
|
|
26
|
+
var parent = items.find(function (item) {
|
|
27
|
+
return item.key === key;
|
|
28
|
+
});
|
|
29
|
+
parent.value = value;
|
|
30
|
+
if (value) parent.children.forEach(function (item) {
|
|
31
|
+
return item.value = true;
|
|
32
|
+
});else parent.children.forEach(function (item) {
|
|
33
|
+
return item.value = false;
|
|
80
34
|
});
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
35
|
+
onChange((0, _toConsumableArray2.default)(items));
|
|
36
|
+
},
|
|
37
|
+
changeChild: function changeChild(value, key, parentKey) {
|
|
38
|
+
var parent = items.find(function (item) {
|
|
39
|
+
return item.key === parentKey;
|
|
40
|
+
});
|
|
41
|
+
parent.children.find(function (item) {
|
|
42
|
+
return item.key === key;
|
|
43
|
+
}).value = value;
|
|
44
|
+
if (parent.children.every(function (item) {
|
|
45
|
+
return item.value;
|
|
46
|
+
})) parent.value = true;else parent.value = false;
|
|
47
|
+
onChange((0, _toConsumableArray2.default)(items));
|
|
48
|
+
},
|
|
49
|
+
isAllChecked: function isAllChecked(item) {
|
|
50
|
+
return (item === null || item === void 0 ? void 0 : item.children.some(function (item) {
|
|
51
|
+
return item.value;
|
|
52
|
+
})) && !(item !== null && item !== void 0 && item.children.every(function (item) {
|
|
53
|
+
return item.value;
|
|
54
|
+
}));
|
|
85
55
|
}
|
|
86
|
-
|
|
87
|
-
onChange(data);
|
|
88
56
|
};
|
|
89
|
-
|
|
90
57
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
91
58
|
className: (0, _classnames.default)('tiered-checkboxes', className)
|
|
92
|
-
},
|
|
59
|
+
}, items.map(function (parent) {
|
|
93
60
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
94
|
-
key: parent.
|
|
95
|
-
className: "tiered-
|
|
61
|
+
key: parent.key,
|
|
62
|
+
className: "tiered-checkboxes__parents"
|
|
96
63
|
}, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
|
|
97
|
-
|
|
64
|
+
isStark: handle.isAllChecked(parent),
|
|
98
65
|
label: parent.label,
|
|
99
|
-
value:
|
|
100
|
-
onChange: function onChange(
|
|
101
|
-
return
|
|
66
|
+
value: parent.value,
|
|
67
|
+
onChange: function onChange(value) {
|
|
68
|
+
return handle.changeParent(value, parent.key);
|
|
102
69
|
}
|
|
103
|
-
}), parent.children && parent.children.map(function (child
|
|
70
|
+
}), parent.children && parent.children.map(function (child) {
|
|
104
71
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
105
|
-
key: child.
|
|
106
|
-
className: "tiered-
|
|
72
|
+
key: child.key,
|
|
73
|
+
className: "tiered-checkboxes__children"
|
|
107
74
|
}, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
|
|
108
75
|
label: child.label,
|
|
109
76
|
value: child.value,
|
|
110
|
-
onChange: function onChange(
|
|
111
|
-
return
|
|
77
|
+
onChange: function onChange(value) {
|
|
78
|
+
return handle.changeChild(value, child.key, parent.key);
|
|
112
79
|
}
|
|
113
80
|
}));
|
|
114
81
|
}));
|