intelicoreact 0.1.0 → 0.1.3
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.js +6 -3
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +1 -1
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js +59 -0
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.scss +29 -0
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.stories.js +74 -0
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +8 -3
- package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +4 -0
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +1 -1
- package/dist/Atomic/FormElements/Input/Input.js +46 -52
- package/dist/Atomic/FormElements/Input/Input.stories.js +14 -6
- package/dist/Atomic/FormElements/Label/Label.js +7 -2
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +1 -1
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +9 -9
- package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +2 -2
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +6 -4
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js +23 -4
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +37 -36
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +28 -12
- package/dist/Constants/index.constants.js +8 -2
- package/dist/Functions/README.txt +9 -0
- package/dist/Functions/fieldValueFormatters.js +112 -0
- package/dist/Functions/inputExecutor.js +17 -18
- package/dist/Molecular/FormElements/FormElement.js +6 -3
- package/dist/Molecular/FormElements/FormElement.stories.js +1 -0
- package/package.json +2 -2
|
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
10
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
13
|
|
|
12
14
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -28,8 +30,9 @@ var CheckboxInput = function CheckboxInput(_ref) {
|
|
|
28
30
|
htmlFor: id
|
|
29
31
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
30
32
|
className: (0, _classnames.default)("checkbox-input__input", (0, _defineProperty2.default)({}, "checkbox-input__input_checked", value))
|
|
31
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
32
|
-
id: id
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, id ? (0, _defineProperty2.default)({
|
|
34
|
+
id: id
|
|
35
|
+
}, 'data-id', id) : {}, {
|
|
33
36
|
type: "checkbox",
|
|
34
37
|
className: "checkbox-input__checkbox",
|
|
35
38
|
onChange: function onChange(e) {
|
|
@@ -40,7 +43,7 @@ var CheckboxInput = function CheckboxInput(_ref) {
|
|
|
40
43
|
ref: function ref(elem) {
|
|
41
44
|
if (elem) elem.indeterminate = isStark;
|
|
42
45
|
}
|
|
43
|
-
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
46
|
+
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
44
47
|
className: "checkbox-input__mark"
|
|
45
48
|
})), label && /*#__PURE__*/_react.default.createElement("div", {
|
|
46
49
|
className: "checkbox-input__label"
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
|
|
16
|
+
var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxInput"));
|
|
17
|
+
|
|
18
|
+
require("./CheckboxesLine.scss");
|
|
19
|
+
|
|
20
|
+
var CheckboxesLine = function CheckboxesLine(props) {
|
|
21
|
+
var field = props.field,
|
|
22
|
+
onChange = props.onChange;
|
|
23
|
+
|
|
24
|
+
var _ref = field !== null && field !== void 0 ? field : props || {},
|
|
25
|
+
items = _ref.items,
|
|
26
|
+
value = _ref.value,
|
|
27
|
+
disabled = _ref.disabled,
|
|
28
|
+
isPositionColumn = _ref.isPositionColumn,
|
|
29
|
+
className = _ref.className;
|
|
30
|
+
|
|
31
|
+
var handleChange = function handleChange(val, id, e) {
|
|
32
|
+
onChange(val ? [].concat((0, _toConsumableArray2.default)(value), [id]) : (0, _toConsumableArray2.default)(value.filter(function (el) {
|
|
33
|
+
return el !== id;
|
|
34
|
+
})));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
+
className: (0, _classnames.default)('checkboxes-line', {
|
|
39
|
+
'checkboxes-line_column': isPositionColumn
|
|
40
|
+
}, className)
|
|
41
|
+
}, (items === null || items === void 0 ? void 0 : items.map(function (item, idx) {
|
|
42
|
+
var _value$includes;
|
|
43
|
+
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
|
|
45
|
+
id: item.id,
|
|
46
|
+
className: "checkboxes-line__checkbox-input",
|
|
47
|
+
key: item.label,
|
|
48
|
+
label: item.label,
|
|
49
|
+
value: (value === null || value === void 0 ? void 0 : (_value$includes = value.includes) === null || _value$includes === void 0 ? void 0 : _value$includes.call(value, item.id)) || false,
|
|
50
|
+
disabled: disabled,
|
|
51
|
+
onChange: function onChange(val, e) {
|
|
52
|
+
return handleChange(val, item.id, e);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
})) || null);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
var _default = CheckboxesLine;
|
|
59
|
+
exports.default = _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.checkboxes-line {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-flow: row wrap;
|
|
4
|
+
justify-content: flex-start;
|
|
5
|
+
align-items: center;
|
|
6
|
+
|
|
7
|
+
&__checkbox-input {
|
|
8
|
+
width: fit-content;
|
|
9
|
+
margin-right: 10px;
|
|
10
|
+
|
|
11
|
+
&:last-of-type {
|
|
12
|
+
margin-right: 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&_column {
|
|
17
|
+
flex-flow: column wrap;
|
|
18
|
+
align-items: flex-start;
|
|
19
|
+
|
|
20
|
+
.checkboxes-line__checkbox-input {
|
|
21
|
+
margin-right: 0;
|
|
22
|
+
margin-bottom: 10px;
|
|
23
|
+
|
|
24
|
+
&:last-of-type {
|
|
25
|
+
margin-bottom: 0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.TemplateCheckboxesLine = exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
|
+
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _CheckboxesLine = _interopRequireDefault(require("./CheckboxesLine"));
|
|
21
|
+
|
|
22
|
+
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); }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
global.lng = 'en';
|
|
27
|
+
var _default = {
|
|
28
|
+
title: 'Form Elements/CheckboxesLine',
|
|
29
|
+
component: _CheckboxesLine.default
|
|
30
|
+
};
|
|
31
|
+
exports.default = _default;
|
|
32
|
+
|
|
33
|
+
var Template = function Template(args) {
|
|
34
|
+
var _useState = (0, _react.useState)(args.value),
|
|
35
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
36
|
+
value = _useState2[0],
|
|
37
|
+
setValue = _useState2[1];
|
|
38
|
+
|
|
39
|
+
(0, _react.useEffect)(function () {
|
|
40
|
+
return console.log(value);
|
|
41
|
+
}, [value]);
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_CheckboxesLine.default, (0, _extends2.default)({}, args, {
|
|
43
|
+
value: value,
|
|
44
|
+
onChange: setValue
|
|
45
|
+
}));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var TemplateCheckboxesLine = Template.bind({});
|
|
49
|
+
exports.TemplateCheckboxesLine = TemplateCheckboxesLine;
|
|
50
|
+
TemplateCheckboxesLine.args = (0, _defineProperty2.default)({
|
|
51
|
+
items: [{
|
|
52
|
+
label: ' - 1',
|
|
53
|
+
id: '1'
|
|
54
|
+
}, {
|
|
55
|
+
label: ' - 2',
|
|
56
|
+
id: '2'
|
|
57
|
+
}, {
|
|
58
|
+
label: ' - 3',
|
|
59
|
+
id: '3'
|
|
60
|
+
}, {
|
|
61
|
+
label: ' - 4',
|
|
62
|
+
id: '4'
|
|
63
|
+
}, {
|
|
64
|
+
label: ' - 5',
|
|
65
|
+
id: '5'
|
|
66
|
+
}, {
|
|
67
|
+
label: ' - 6',
|
|
68
|
+
id: '6'
|
|
69
|
+
}],
|
|
70
|
+
value: [],
|
|
71
|
+
disabled: false,
|
|
72
|
+
isPositionColumn: true,
|
|
73
|
+
className: ''
|
|
74
|
+
}, "disabled", false);
|
|
@@ -38,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
38
38
|
var RC = 'dropdown';
|
|
39
39
|
|
|
40
40
|
var Dropdown = function Dropdown(_ref) {
|
|
41
|
-
var _options$find;
|
|
41
|
+
var _options$find, _filteredOptions$find;
|
|
42
42
|
|
|
43
43
|
var _ref$options = _ref.options,
|
|
44
44
|
options = _ref$options === void 0 ? [] : _ref$options,
|
|
@@ -212,6 +212,9 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
212
212
|
if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
|
|
213
213
|
};
|
|
214
214
|
}, [isOpen, dropdownListRef]);
|
|
215
|
+
var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
|
|
216
|
+
return option.value === value;
|
|
217
|
+
})) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
|
|
215
218
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
216
219
|
className: (0, _classnames.default)(RC, className, {
|
|
217
220
|
disabled: disabled
|
|
@@ -233,9 +236,11 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
233
236
|
e.target.select();
|
|
234
237
|
setIsOpen(true);
|
|
235
238
|
}
|
|
236
|
-
}) : /*#__PURE__*/_react.default.createElement("span", {
|
|
239
|
+
}) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
237
240
|
className: "text"
|
|
238
|
-
}, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
|
|
241
|
+
}, selectedLabel || placeholder), postfixText && /*#__PURE__*/_react.default.createElement("span", {
|
|
242
|
+
className: "dropdown__list-item-postfix"
|
|
243
|
+
}, postfixText)), /*#__PURE__*/_react.default.createElement("span", {
|
|
239
244
|
className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
|
|
240
245
|
onClick: function onClick() {
|
|
241
246
|
return setIsOpen(!isOpen);
|
|
@@ -23,7 +23,7 @@ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
|
23
23
|
|
|
24
24
|
var _index = require("../../../Constants/index.constants");
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
|
|
27
27
|
|
|
28
28
|
require("./Input.scss");
|
|
29
29
|
|
|
@@ -36,15 +36,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
36
36
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
37
37
|
|
|
38
38
|
var Input = function Input(_ref) {
|
|
39
|
-
var
|
|
39
|
+
var isSelect = _ref.isSelect,
|
|
40
|
+
onChange = _ref.onChange,
|
|
40
41
|
onBlur = _ref.onBlur,
|
|
41
42
|
onFocus = _ref.onFocus,
|
|
42
43
|
onKeyUp = _ref.onKeyUp,
|
|
43
44
|
isNotBlinkErrors = _ref.isNotBlinkErrors,
|
|
44
45
|
isPriceInput = _ref.isPriceInput,
|
|
45
|
-
|
|
46
|
+
onlyNumbers = _ref.onlyNumbers,
|
|
46
47
|
isOnlyString = _ref.isOnlyString,
|
|
47
|
-
isTwoDigitAfterDot = _ref.isTwoDigitAfterDot,
|
|
48
48
|
disabled = _ref.disabled,
|
|
49
49
|
withDelete = _ref.withDelete,
|
|
50
50
|
value = _ref.value,
|
|
@@ -88,24 +88,19 @@ var Input = function Input(_ref) {
|
|
|
88
88
|
isToHighlightError = _useState8[0],
|
|
89
89
|
setIsToHighlightError = _useState8[1];
|
|
90
90
|
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
var _useState9 = (0, _react.useState)(false),
|
|
92
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
93
|
+
onInputHover = _useState10[0],
|
|
94
|
+
setOnInputHover = _useState10[1];
|
|
95
|
+
|
|
96
|
+
var isUseBitDepthPoints = !!onlyNumbers && isPriceInput;
|
|
96
97
|
var isUseErrorsBlink = !isNotBlinkErrors && !mask; // HANDLES
|
|
97
98
|
|
|
98
99
|
var handle = {
|
|
99
100
|
change: function change(e) {
|
|
100
101
|
var inputValue = e.target ? e.target.value : e;
|
|
101
|
-
|
|
102
|
-
if (
|
|
103
|
-
inputValue = inputValue.substring(0, +symbolsLimit);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
|
|
107
|
-
if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
|
|
108
|
-
if (isOnlyString) inputValue = onlyString(inputValue, softStringMode);
|
|
102
|
+
if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
|
|
103
|
+
if (onlyNumbers && isOnlyString || isOnlyString) inputValue = (0, _fieldValueFormatters.formatToLetters)(inputValue, softStringMode);else if (onlyNumbers) inputValue = (0, _fieldValueFormatters.filterNumeric)(inputValue, onlyNumbers);
|
|
109
104
|
onChange(inputValue.toString());
|
|
110
105
|
},
|
|
111
106
|
toggleEdit: function toggleEdit() {
|
|
@@ -114,21 +109,16 @@ var Input = function Input(_ref) {
|
|
|
114
109
|
},
|
|
115
110
|
focus: function focus(e) {
|
|
116
111
|
setIsFocused(true);
|
|
117
|
-
if (
|
|
112
|
+
if (onlyNumbers) onChange((0, _fieldValueFormatters.formatToRemoveComa)(value));
|
|
118
113
|
if (onFocus) onFocus(e);
|
|
119
114
|
},
|
|
120
115
|
blur: function blur(e) {
|
|
121
116
|
setIsFocused(false);
|
|
122
117
|
setEditing(false);
|
|
123
|
-
|
|
124
|
-
if (
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
if (isPriceInput && isOnlyNumber) {
|
|
129
|
-
onChange(addCommas(value));
|
|
130
|
-
}
|
|
131
|
-
|
|
118
|
+
var value = e.target.value;
|
|
119
|
+
if (onlyNumbers) value = (0, _fieldValueFormatters.formatToCutOffDotAtTheEnd)(value);
|
|
120
|
+
if (isUseBitDepthPoints) value = (0, _fieldValueFormatters.formatToAddBitDepthPoints)(value);
|
|
121
|
+
if (onlyNumbers || isUseBitDepthPoints) onChange(value);
|
|
132
122
|
if (onBlur) onBlur(e);
|
|
133
123
|
},
|
|
134
124
|
keyUp: function keyUp(e) {
|
|
@@ -168,30 +158,22 @@ var Input = function Input(_ref) {
|
|
|
168
158
|
}
|
|
169
159
|
};
|
|
170
160
|
|
|
171
|
-
function cutOffsingleDot(value) {
|
|
172
|
-
return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
(0, _react.useEffect)(function () {
|
|
176
|
-
if (isEditing) inputRef.current.focus();
|
|
177
|
-
}, [isEditing, isFocused]);
|
|
178
|
-
|
|
179
|
-
var uniProps = _objectSpread(_objectSpread({
|
|
180
|
-
className: "input ".concat(className),
|
|
181
|
-
placeholder: placeholder,
|
|
182
|
-
value: value || '',
|
|
183
|
-
disabled: disabled,
|
|
184
|
-
onChange: handle.change,
|
|
185
|
-
onFocus: handle.focus,
|
|
186
|
-
onBlur: handle.blur,
|
|
187
|
-
onKeyUp: handle.keyUp
|
|
188
|
-
}, maskChar ? {
|
|
189
|
-
maskChar: maskChar
|
|
190
|
-
} : {}), formatChars ? {
|
|
191
|
-
formatChars: formatChars
|
|
192
|
-
} : {});
|
|
193
|
-
|
|
194
161
|
function renderInput() {
|
|
162
|
+
var uniProps = _objectSpread(_objectSpread({
|
|
163
|
+
className: "input ".concat(className),
|
|
164
|
+
placeholder: placeholder,
|
|
165
|
+
value: value || '',
|
|
166
|
+
disabled: disabled,
|
|
167
|
+
onChange: handle.change,
|
|
168
|
+
onFocus: handle.focus,
|
|
169
|
+
onBlur: handle.blur,
|
|
170
|
+
onKeyUp: handle.keyUp
|
|
171
|
+
}, maskChar ? {
|
|
172
|
+
maskChar: maskChar
|
|
173
|
+
} : {}), formatChars ? {
|
|
174
|
+
formatChars: formatChars
|
|
175
|
+
} : {});
|
|
176
|
+
|
|
195
177
|
if (mask) {
|
|
196
178
|
return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
|
|
197
179
|
ref: inputRef,
|
|
@@ -205,6 +187,12 @@ var Input = function Input(_ref) {
|
|
|
205
187
|
}));
|
|
206
188
|
}
|
|
207
189
|
|
|
190
|
+
(0, _react.useEffect)(function () {
|
|
191
|
+
if (isEditing) inputRef.current.focus();
|
|
192
|
+
}, [isEditing, isFocused]);
|
|
193
|
+
(0, _react.useEffect)(function () {
|
|
194
|
+
setEditing(isSelect !== null && isSelect !== void 0 ? isSelect : false);
|
|
195
|
+
}, [isSelect]);
|
|
208
196
|
(0, _react.useEffect)(function () {
|
|
209
197
|
if (isUseErrorsBlink && isAttemptToChange) {
|
|
210
198
|
setIsAttemptToChange(null);
|
|
@@ -219,8 +207,14 @@ var Input = function Input(_ref) {
|
|
|
219
207
|
setEditing(isFocusDefault);
|
|
220
208
|
}, [inputRef, isFocusDefault]);
|
|
221
209
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
222
|
-
className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
|
|
223
|
-
|
|
210
|
+
className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled)),
|
|
211
|
+
onMouseEnter: function onMouseEnter() {
|
|
212
|
+
return setOnInputHover(true);
|
|
213
|
+
},
|
|
214
|
+
onMouseLeave: function onMouseLeave() {
|
|
215
|
+
return setOnInputHover(false);
|
|
216
|
+
}
|
|
217
|
+
}, renderInput(), icon, withDelete && onInputHover && /*#__PURE__*/_react.default.createElement("span", {
|
|
224
218
|
className: (0, _classnames.default)("input__close", {
|
|
225
219
|
hidden: !value
|
|
226
220
|
}),
|
|
@@ -40,8 +40,8 @@ var _default = {
|
|
|
40
40
|
withDelete: {
|
|
41
41
|
description: 'boolean - add clear-cross by hover'
|
|
42
42
|
},
|
|
43
|
-
|
|
44
|
-
description: '
|
|
43
|
+
onlyNumbers: {
|
|
44
|
+
description: 'object - only numbers'
|
|
45
45
|
},
|
|
46
46
|
softStringMode: {
|
|
47
47
|
description: 'boolean - only strings'
|
|
@@ -92,14 +92,19 @@ var _default = {
|
|
|
92
92
|
}
|
|
93
93
|
};
|
|
94
94
|
exports.default = _default;
|
|
95
|
+
var styles = {
|
|
96
|
+
with: '200px'
|
|
97
|
+
};
|
|
95
98
|
|
|
96
99
|
var Template = function Template(args) {
|
|
97
100
|
var _useState = (0, _react.useState)(''),
|
|
98
101
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
99
102
|
value = _useState2[0],
|
|
100
|
-
setValue = _useState2[1];
|
|
103
|
+
setValue = _useState2[1]; // useEffect(() => console.log('useEffect - value - ', value), [value]);
|
|
104
|
+
|
|
101
105
|
|
|
102
106
|
return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, args, {
|
|
107
|
+
style: styles,
|
|
103
108
|
value: value,
|
|
104
109
|
onChange: setValue
|
|
105
110
|
}));
|
|
@@ -110,14 +115,17 @@ exports.InputTemplate = InputTemplate;
|
|
|
110
115
|
InputTemplate.args = {
|
|
111
116
|
type: 'text',
|
|
112
117
|
isFocusDefault: false,
|
|
113
|
-
|
|
114
|
-
|
|
118
|
+
onlyNumbers: {
|
|
119
|
+
type: 'float',
|
|
120
|
+
decimalPlaces: 2
|
|
121
|
+
},
|
|
122
|
+
isOnlyString: true,
|
|
115
123
|
isPriceInput: false,
|
|
116
124
|
isTwoDigitAfterDot: false,
|
|
117
125
|
disabled: false,
|
|
118
126
|
error: '',
|
|
119
127
|
mask: '',
|
|
120
|
-
softStringMode:
|
|
128
|
+
softStringMode: false,
|
|
121
129
|
withDelete: true,
|
|
122
130
|
symbolsLimit: 255,
|
|
123
131
|
placeholder: 'Placeholder',
|
|
@@ -9,6 +9,8 @@ exports.default = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
12
14
|
var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
|
|
13
15
|
|
|
14
16
|
require("./Label.scss");
|
|
@@ -16,9 +18,12 @@ require("./Label.scss");
|
|
|
16
18
|
var Label = function Label(_ref) {
|
|
17
19
|
var label = _ref.label,
|
|
18
20
|
hint = _ref.hint,
|
|
19
|
-
isRequired = _ref.isRequired
|
|
21
|
+
isRequired = _ref.isRequired,
|
|
22
|
+
isLabelBolt = _ref.isLabelBolt;
|
|
20
23
|
return /*#__PURE__*/_react.default.createElement("span", {
|
|
21
|
-
className:
|
|
24
|
+
className: (0, _classnames.default)('label', {
|
|
25
|
+
'label_bold': isLabelBolt
|
|
26
|
+
})
|
|
22
27
|
}, label, isRequired && /*#__PURE__*/_react.default.createElement("span", {
|
|
23
28
|
className: "label_isRequired"
|
|
24
29
|
}, "*"), hint && /*#__PURE__*/_react.default.createElement(_Hint.default, {
|
|
@@ -25,7 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
25
25
|
|
|
26
26
|
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; }
|
|
27
27
|
|
|
28
|
-
require('
|
|
28
|
+
require('../../../Functions/customEventListener');
|
|
29
29
|
|
|
30
30
|
var MobileCalendar = function MobileCalendar(_ref) {
|
|
31
31
|
var _ref$min = _ref.min,
|
|
@@ -25,7 +25,7 @@ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
|
25
25
|
|
|
26
26
|
var _index = require("../../../Constants/index.constants");
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
|
|
29
29
|
|
|
30
30
|
require("./NumericInput.scss");
|
|
31
31
|
|
|
@@ -107,16 +107,14 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
107
107
|
var _useState13 = (0, _react.useState)(false),
|
|
108
108
|
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
109
109
|
isToHighlightError = _useState14[0],
|
|
110
|
-
setIsToHighlightError = _useState14[1];
|
|
110
|
+
setIsToHighlightError = _useState14[1]; // HANDLES
|
|
111
111
|
|
|
112
|
-
var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
|
|
113
|
-
var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
|
|
114
|
-
addCommas = _formatInput$priceInp.addCommas,
|
|
115
|
-
removeComma = _formatInput$priceInp.removeComma; // HANDLES
|
|
116
112
|
|
|
117
113
|
var handle = {
|
|
118
114
|
change: function change(e) {
|
|
119
|
-
var inputValue = e.target ?
|
|
115
|
+
var inputValue = e.target ? (0, _fieldValueFormatters.filterNumeric)(e.target.value, {
|
|
116
|
+
type: 'int'
|
|
117
|
+
}) : e;
|
|
120
118
|
|
|
121
119
|
if (inputValue && (decRef.current.contains(e.target) || incRef.current.contains(e.target))) {
|
|
122
120
|
inputValue = parseFloat(inputValue);
|
|
@@ -195,7 +193,7 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
195
193
|
|
|
196
194
|
(0, _react.useEffect)(function () {
|
|
197
195
|
if (inputValue !== value) setIsFocused(true);
|
|
198
|
-
setInputValueFormated(isPriceInput ? isFocused ?
|
|
196
|
+
setInputValueFormated(isPriceInput ? isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue) : inputValue);
|
|
199
197
|
setIntMemoVal(parseInt(inputValue));
|
|
200
198
|
if (typeof onChange === 'function') onChange(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString());
|
|
201
199
|
}, [inputValue]); //On Integer Value Change
|
|
@@ -205,7 +203,9 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
205
203
|
}, [intMemoVal]); //On Focuse Change
|
|
206
204
|
|
|
207
205
|
(0, _react.useEffect)(function () {
|
|
208
|
-
|
|
206
|
+
var formatedValue = inputValue;
|
|
207
|
+
if (isPriceInput) formatedValue = isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue);
|
|
208
|
+
setInputValueFormated(formatedValue);
|
|
209
209
|
|
|
210
210
|
if (isFocused) {
|
|
211
211
|
var _inputRef$current;
|
|
@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
17
17
|
|
|
18
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
19
|
|
|
20
|
+
var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
|
|
21
|
+
|
|
20
22
|
var _Input = _interopRequireDefault(require("../Input/Input"));
|
|
21
23
|
|
|
22
24
|
var _Label = _interopRequireDefault(require("../Label/Label"));
|
|
@@ -37,7 +39,9 @@ var RangeInputs = function RangeInputs(_ref) {
|
|
|
37
39
|
items = _ref.items,
|
|
38
40
|
className = _ref.className,
|
|
39
41
|
onChange = _ref.onChange,
|
|
40
|
-
isRequired = _ref.isRequired
|
|
42
|
+
isRequired = _ref.isRequired,
|
|
43
|
+
_ref$type = _ref.type,
|
|
44
|
+
type = _ref$type === void 0 ? 'float' : _ref$type;
|
|
41
45
|
|
|
42
46
|
var _useState = (0, _react.useState)(''),
|
|
43
47
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -45,7 +49,7 @@ var RangeInputs = function RangeInputs(_ref) {
|
|
|
45
49
|
setError = _useState2[1];
|
|
46
50
|
|
|
47
51
|
var handleChange = function handleChange(prop, value) {
|
|
48
|
-
onChange(_objectSpread(_objectSpread({}, items), {}, (0, _defineProperty2.default)({}, prop, value)));
|
|
52
|
+
onChange(_objectSpread(_objectSpread({}, items), {}, (0, _defineProperty2.default)({}, prop, type === 'float' ? (0, _fieldValueFormatters.filterFloat)(value) : (0, _fieldValueFormatters.filterNumbers)(value))));
|
|
49
53
|
};
|
|
50
54
|
|
|
51
55
|
var rangeValidation = function rangeValidation() {
|
|
@@ -70,7 +74,6 @@ var RangeInputs = function RangeInputs(_ref) {
|
|
|
70
74
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
71
75
|
className: "range-inputs__input-label"
|
|
72
76
|
}, "From"), /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
73
|
-
type: "number",
|
|
74
77
|
value: items === null || items === void 0 ? void 0 : items.from,
|
|
75
78
|
className: "mr15",
|
|
76
79
|
onChange: function onChange(value) {
|
|
@@ -82,7 +85,6 @@ var RangeInputs = function RangeInputs(_ref) {
|
|
|
82
85
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
83
86
|
className: "range-inputs__input-label"
|
|
84
87
|
}, "To"), /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
85
|
-
type: "number",
|
|
86
88
|
value: items === null || items === void 0 ? void 0 : items.to,
|
|
87
89
|
onChange: function onChange(value) {
|
|
88
90
|
return handleChange('to', value);
|
|
@@ -2,17 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.RangeInputsTemplate = exports.default = void 0;
|
|
9
11
|
|
|
10
|
-
var
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
17
|
|
|
12
18
|
var _RangeInputs = _interopRequireDefault(require("./RangeInputs"));
|
|
13
19
|
|
|
14
20
|
require("./RangeInputs.scss");
|
|
15
21
|
|
|
22
|
+
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); }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
16
26
|
global.lng = 'en';
|
|
17
27
|
var _default = {
|
|
18
28
|
title: 'RangeInputs',
|
|
@@ -21,14 +31,23 @@ var _default = {
|
|
|
21
31
|
exports.default = _default;
|
|
22
32
|
|
|
23
33
|
var Template = function Template(args) {
|
|
24
|
-
|
|
34
|
+
var _useState = (0, _react.useState)({
|
|
35
|
+
from: 0,
|
|
36
|
+
to: 0
|
|
37
|
+
}),
|
|
38
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
39
|
+
state = _useState2[0],
|
|
40
|
+
setState = _useState2[1];
|
|
41
|
+
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_RangeInputs.default, (0, _extends2.default)({}, args, {
|
|
43
|
+
onChange: setState,
|
|
44
|
+
items: state
|
|
45
|
+
}));
|
|
25
46
|
};
|
|
26
47
|
|
|
27
48
|
var RangeInputsTemplate = Template.bind({});
|
|
28
49
|
exports.RangeInputsTemplate = RangeInputsTemplate;
|
|
29
50
|
RangeInputsTemplate.args = {
|
|
30
51
|
label: 'loanAmount',
|
|
31
|
-
from: 0,
|
|
32
|
-
to: 0,
|
|
33
52
|
hint: 'Hint'
|
|
34
53
|
};
|
|
@@ -35,7 +35,8 @@ var RC = 'tags-dropdown';
|
|
|
35
35
|
|
|
36
36
|
var TagsDropdown = function TagsDropdown(_ref) {
|
|
37
37
|
var options = _ref.options,
|
|
38
|
-
chosenOptions = _ref.chosenOptions,
|
|
38
|
+
_ref$chosenOptions = _ref.chosenOptions,
|
|
39
|
+
chosenOptions = _ref$chosenOptions === void 0 ? [] : _ref$chosenOptions,
|
|
39
40
|
onChange = _ref.onChange,
|
|
40
41
|
className = _ref.className,
|
|
41
42
|
tagClassname = _ref.tagClassname,
|
|
@@ -43,7 +44,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
43
44
|
label = _ref.label,
|
|
44
45
|
isLabelBold = _ref.isLabelBold,
|
|
45
46
|
hint = _ref.hint,
|
|
46
|
-
hintSide = _ref.hintSide
|
|
47
|
+
hintSide = _ref.hintSide,
|
|
48
|
+
disabled = _ref.disabled,
|
|
49
|
+
isValuesInTags = _ref.isValuesInTags;
|
|
47
50
|
|
|
48
51
|
var _useState = (0, _react.useState)(false),
|
|
49
52
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -56,6 +59,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
56
59
|
setSearchValue = _useState4[1];
|
|
57
60
|
|
|
58
61
|
var dropdownRef = (0, _react.useRef)(null);
|
|
62
|
+
var singleLevelOptions = options.reduce(function (acc, item) {
|
|
63
|
+
return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
|
|
64
|
+
}, []);
|
|
59
65
|
|
|
60
66
|
var handleClickOutside = function handleClickOutside(event) {
|
|
61
67
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
@@ -66,7 +72,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
66
72
|
|
|
67
73
|
var deleteChosen = function deleteChosen(value) {
|
|
68
74
|
onChange(chosenOptions.filter(function (item) {
|
|
69
|
-
return item
|
|
75
|
+
return item !== value;
|
|
70
76
|
}), 'chosenOptions');
|
|
71
77
|
};
|
|
72
78
|
|
|
@@ -75,13 +81,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
75
81
|
setSearchValue('');
|
|
76
82
|
|
|
77
83
|
if (chosenOptions.some(function (el) {
|
|
78
|
-
return el
|
|
84
|
+
return el === item.value;
|
|
79
85
|
})) {
|
|
80
86
|
deleteChosen(item.value);
|
|
81
87
|
return;
|
|
82
88
|
}
|
|
83
89
|
|
|
84
|
-
onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [item]), 'chosenOptions');
|
|
90
|
+
onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [item.value]), 'chosenOptions');
|
|
85
91
|
};
|
|
86
92
|
|
|
87
93
|
var onSearchHandler = function onSearchHandler(name) {
|
|
@@ -89,21 +95,22 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
89
95
|
};
|
|
90
96
|
|
|
91
97
|
var getMarkupForElement = function getMarkupForElement(item) {
|
|
92
|
-
|
|
93
|
-
|
|
98
|
+
var title = item.title || item.label;
|
|
99
|
+
return title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
|
|
100
|
+
key: item.value,
|
|
94
101
|
onClick: function onClick() {
|
|
95
102
|
return onChangeHandler(item);
|
|
96
103
|
},
|
|
97
|
-
className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), chosenOptions.some(function (
|
|
98
|
-
return
|
|
104
|
+
className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
|
|
105
|
+
return value === item.value;
|
|
99
106
|
})), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_disabled"), item.disabled))
|
|
100
107
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
101
|
-
className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), chosenOptions.some(function (
|
|
102
|
-
return
|
|
108
|
+
className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
|
|
109
|
+
return value === item.value;
|
|
103
110
|
})))
|
|
104
111
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, {
|
|
105
112
|
className: "color--text"
|
|
106
|
-
})),
|
|
113
|
+
})), title) : null;
|
|
107
114
|
};
|
|
108
115
|
|
|
109
116
|
(0, _react.useEffect)(function () {
|
|
@@ -113,40 +120,34 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
113
120
|
};
|
|
114
121
|
});
|
|
115
122
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
116
|
-
className: (0, _classnames.default)(RC, className),
|
|
123
|
+
className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled)),
|
|
117
124
|
ref: dropdownRef
|
|
118
|
-
},
|
|
119
|
-
className: "".concat(RC, "
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
id = _ref2.id;
|
|
125
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
126
|
+
className: "".concat(RC, "__trigger"),
|
|
127
|
+
onClick: function onClick(e) {
|
|
128
|
+
if (e.target.className === "".concat(RC, "__trigger") || e.target.className === "tags-dropdown__arrow" || e.target.tagName === 'svg' && e.target.parentNode.className !== 'tag__button') setIsOpen(!isOpen);else if (e.target.tagName === 'INPUT') setIsOpen(true);
|
|
129
|
+
}
|
|
130
|
+
}, chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value) {
|
|
131
|
+
// el.list?.find?.(e => e.value === value)
|
|
132
|
+
var tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(function (el) {
|
|
133
|
+
return el.value === value;
|
|
134
|
+
});
|
|
135
|
+
var label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
|
|
130
136
|
return /*#__PURE__*/_react.default.createElement(_Tag.default, {
|
|
131
|
-
key:
|
|
137
|
+
key: value,
|
|
132
138
|
className: tagClassname,
|
|
133
|
-
label:
|
|
139
|
+
label: label,
|
|
134
140
|
removeItem: function removeItem() {
|
|
135
141
|
return deleteChosen(value);
|
|
136
142
|
}
|
|
137
143
|
});
|
|
138
|
-
}), /*#__PURE__*/_react.default.createElement("
|
|
139
|
-
className: "".concat(RC, "__btn"),
|
|
140
|
-
onClick: function onClick() {
|
|
141
|
-
return setIsOpen(true);
|
|
142
|
-
}
|
|
143
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
144
|
+
}), /*#__PURE__*/_react.default.createElement("input", {
|
|
144
145
|
className: "".concat(RC, "__input"),
|
|
145
146
|
value: searchValue,
|
|
146
147
|
onChange: function onChange(e) {
|
|
147
148
|
return onSearchHandler(e.target.value);
|
|
148
149
|
},
|
|
149
|
-
placeholder: "
|
|
150
|
+
placeholder: "Select from list",
|
|
150
151
|
onKeyDown: function onKeyDown(e) {
|
|
151
152
|
return onKeyPress(e, searchValue);
|
|
152
153
|
}
|
|
@@ -154,9 +155,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
|
|
|
154
155
|
className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
|
|
155
156
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
|
|
156
157
|
className: "color--text"
|
|
157
|
-
})))
|
|
158
|
+
}))), isOpen && /*#__PURE__*/_react.default.createElement("div", {
|
|
158
159
|
className: "".concat(RC, "__list")
|
|
159
|
-
}, options.map(function (option) {
|
|
160
|
+
}, options === null || options === void 0 ? void 0 : options.map(function (option) {
|
|
160
161
|
var _option$list;
|
|
161
162
|
|
|
162
163
|
return option.groupName ? /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -6,26 +6,31 @@
|
|
|
6
6
|
position: relative;
|
|
7
7
|
width: 100%;
|
|
8
8
|
|
|
9
|
+
&_disabled {
|
|
10
|
+
pointer-events: none;
|
|
11
|
+
opacity: 0.5;
|
|
12
|
+
}
|
|
13
|
+
|
|
9
14
|
&__trigger {
|
|
10
|
-
|
|
11
|
-
border: 1px solid #e2e5ec;
|
|
15
|
+
position: relative;
|
|
12
16
|
box-sizing: border-box;
|
|
13
|
-
border-radius: 3px;
|
|
14
|
-
padding-left: 5px;
|
|
15
17
|
height: 28px;
|
|
16
18
|
display: flex;
|
|
19
|
+
flex-flow: row wrap;
|
|
20
|
+
justify-content: flex-start;
|
|
17
21
|
align-items: center;
|
|
18
|
-
cursor: pointer;
|
|
19
|
-
}
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
height: fit-content;
|
|
24
|
+
min-height: 28px;
|
|
25
|
+
padding: 3px 24px 3px 5px;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
background: #ffffff;
|
|
28
|
+
border: 1px solid #e2e5ec;
|
|
29
|
+
border-radius: 3px;
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
&__input {
|
|
28
|
-
|
|
33
|
+
flex-grow: 1;
|
|
29
34
|
background: none;
|
|
30
35
|
border: none;
|
|
31
36
|
padding-right: 2px;
|
|
@@ -46,7 +51,7 @@
|
|
|
46
51
|
padding: 8px 0;
|
|
47
52
|
max-height: 320px;
|
|
48
53
|
overflow-y: auto;
|
|
49
|
-
z-index:
|
|
54
|
+
z-index: 3;
|
|
50
55
|
text-align: left;
|
|
51
56
|
&::-webkit-scrollbar {
|
|
52
57
|
width: 4px;
|
|
@@ -88,10 +93,16 @@
|
|
|
88
93
|
}
|
|
89
94
|
|
|
90
95
|
&__arrow {
|
|
96
|
+
position: absolute;
|
|
97
|
+
top: 7.5px;
|
|
98
|
+
right: 5px;
|
|
99
|
+
|
|
91
100
|
display: flex;
|
|
92
101
|
align-items: center;
|
|
93
102
|
margin-right: 5px;
|
|
94
103
|
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
|
|
95
106
|
&_active {
|
|
96
107
|
transform: rotate(180deg);
|
|
97
108
|
}
|
|
@@ -128,4 +139,9 @@
|
|
|
128
139
|
&-label {
|
|
129
140
|
margin-bottom: 5px;
|
|
130
141
|
}
|
|
142
|
+
|
|
143
|
+
.tag {
|
|
144
|
+
margin-bottom: 3px;
|
|
145
|
+
cursor: auto;
|
|
146
|
+
}
|
|
131
147
|
}
|
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.KEYBOARD_SERVICE_KEYS = void 0;
|
|
6
|
+
exports.DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = exports.MAX_NAME_LENGTH = exports.MAX_PHONE_LENGTH = exports.KEYBOARD_SERVICE_KEYS = void 0;
|
|
7
7
|
var KEYBOARD_SERVICE_KEYS = ['Escape', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'Tab', 'CapsLock', 'Shift', 'Control', 'Meta', 'Option', 'Alt', 'ContextMenu', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'NumLock', 'Backspace', 'Delete', 'Enter', 'Return', 'Insert', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen', 'ScrollLock', 'Pause'];
|
|
8
|
-
exports.KEYBOARD_SERVICE_KEYS = KEYBOARD_SERVICE_KEYS;
|
|
8
|
+
exports.KEYBOARD_SERVICE_KEYS = KEYBOARD_SERVICE_KEYS;
|
|
9
|
+
var MAX_PHONE_LENGTH = 10;
|
|
10
|
+
exports.MAX_PHONE_LENGTH = MAX_PHONE_LENGTH;
|
|
11
|
+
var MAX_NAME_LENGTH = 128;
|
|
12
|
+
exports.MAX_NAME_LENGTH = MAX_NAME_LENGTH;
|
|
13
|
+
var DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = '_';
|
|
14
|
+
exports.DEFAULT_DATE_MASK_NO_VALUE_SYMBOL = DEFAULT_DATE_MASK_NO_VALUE_SYMBOL;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
Файл fieldValueFormatters.
|
|
2
|
+
|
|
3
|
+
В файле собраны функции-модификаторы. Целевое назначение ф-й:
|
|
4
|
+
|
|
5
|
+
- мутация значений полей формы "на лету", корректировка работы onChange-ров (названия ф-й начинается с filter, логика работает с последовательным вводом данных);
|
|
6
|
+
- конечное преобразование результата (названия ф-й начинаются с format, не имеют требований к входящим данным, так же могут использоваться в качестве ф-й из первого пункта)
|
|
7
|
+
|
|
8
|
+
Просьба при расширении файла учитывать целевую направленность, ответственность ф-й задуманную в этом файле.
|
|
9
|
+
Просьба соблюдать правило именования ф-й (начинать наименование с filter или format)
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.filterNumeric = exports.filterPhone = exports.filterToLimitLength = exports.filterFloat = exports.formatToCutOffDotAtTheEnd = exports.formatToRemoveComa = exports.formatToLetters = exports.formatToTwoDigitAfterDot = exports.formatToAddBitDepthPoints = exports.formatOnlyNumbers = void 0;
|
|
9
|
+
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
+
|
|
12
|
+
var _index = require("../Constants/index.constants");
|
|
13
|
+
|
|
14
|
+
// The first word "format" in the function name means a logic in which the function transforms the incoming value in any case.
|
|
15
|
+
// The first word "filter" in the function name means a logic in which the function works as a changer for sequential input
|
|
16
|
+
// format
|
|
17
|
+
var formatOnlyNumbers = function formatOnlyNumbers(value) {
|
|
18
|
+
return ('' + value).replace(/\D/g, '');
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
exports.formatOnlyNumbers = formatOnlyNumbers;
|
|
22
|
+
|
|
23
|
+
var formatToAddBitDepthPoints = function formatToAddBitDepthPoints(value) {
|
|
24
|
+
var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
|
|
25
|
+
//содержит ли value точку
|
|
26
|
+
var isFraction = value.includes('.'); //взять строку до точки
|
|
27
|
+
|
|
28
|
+
var valueBeforeDot = isFraction ? value.slice(0, value.indexOf('.')) : value; //расстановка запятых после каждой 3й цифры с конца
|
|
29
|
+
|
|
30
|
+
var intPart = valueBeforeDot.split('').reverse().reduce(function (acc, item, idx) {
|
|
31
|
+
return idx % step === 0 && idx !== 0 ? [].concat((0, _toConsumableArray2.default)(acc), [',', item]) : [].concat((0, _toConsumableArray2.default)(acc), [item]);
|
|
32
|
+
}, []).reverse().join('');
|
|
33
|
+
return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
exports.formatToAddBitDepthPoints = formatToAddBitDepthPoints;
|
|
37
|
+
|
|
38
|
+
var formatToTwoDigitAfterDot = function formatToTwoDigitAfterDot(value) {
|
|
39
|
+
var arr = value.split('.');
|
|
40
|
+
var intPart = arr.shift();
|
|
41
|
+
var decimalPart = arr.join('').replace(/\s/g, '').slice(0, 2);
|
|
42
|
+
return intPart + (decimalPart.length ? '.' + decimalPart : '');
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.formatToTwoDigitAfterDot = formatToTwoDigitAfterDot;
|
|
46
|
+
|
|
47
|
+
var formatToLetters = function formatToLetters(value) {
|
|
48
|
+
var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
49
|
+
|
|
50
|
+
if (soft) {
|
|
51
|
+
return value.toString().replace(/[^a-z-]/gi, '');
|
|
52
|
+
} else {
|
|
53
|
+
return value.toString().replace(/[^a-z]/gi, '');
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
exports.formatToLetters = formatToLetters;
|
|
58
|
+
|
|
59
|
+
var formatToRemoveComa = function formatToRemoveComa(value) {
|
|
60
|
+
return value.toString().replace(/\,/g, '');
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
exports.formatToRemoveComa = formatToRemoveComa;
|
|
64
|
+
|
|
65
|
+
var formatToCutOffDotAtTheEnd = function formatToCutOffDotAtTheEnd(value) {
|
|
66
|
+
return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
|
|
67
|
+
}; // filter
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
exports.formatToCutOffDotAtTheEnd = formatToCutOffDotAtTheEnd;
|
|
71
|
+
|
|
72
|
+
var filterFloat = function filterFloat(value) {
|
|
73
|
+
var decimalPlaces = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
74
|
+
|
|
75
|
+
var replaser = function replaser(input) {
|
|
76
|
+
return ('' + input).replace(/[^\.\d]/g, '');
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
if (value.length === 1 && (value[0] === '.' || value[0] === ',')) return '0.';
|
|
80
|
+
var output = ('' + value).replace(/,/g, '.');
|
|
81
|
+
if (value.length > 1 && value[0] === '0' && value[1] !== '.' && value[0] !== ',') output = value.slice(1);
|
|
82
|
+
var previousValue = '' + output.slice(0, -1);
|
|
83
|
+
var lastSym = '' + output.slice(-1);
|
|
84
|
+
if (decimalPlaces && typeof decimalPlaces === 'number' && previousValue.includes('.') && previousValue.indexOf('.') + 1 + decimalPlaces === previousValue.length) return replaser(previousValue);
|
|
85
|
+
return replaser(lastSym === '.' && previousValue.includes('.') ? previousValue : output);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
exports.filterFloat = filterFloat;
|
|
89
|
+
|
|
90
|
+
var filterToLimitLength = function filterToLimitLength(value, limit) {
|
|
91
|
+
return limit && typeof limit === 'number' && !Number.isNaN(limit) && (value === null || value === void 0 ? void 0 : value.length) > limit ? value.substr(0, limit) : value;
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.filterToLimitLength = filterToLimitLength;
|
|
95
|
+
|
|
96
|
+
var filterPhone = function filterPhone(value) {
|
|
97
|
+
return limitLength(filterNumbers(value), _index.MAX_PHONE_LENGTH);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
exports.filterPhone = filterPhone;
|
|
101
|
+
|
|
102
|
+
var filterNumeric = function filterNumeric(value, settings) {
|
|
103
|
+
var _ref = settings || {},
|
|
104
|
+
_ref$type = _ref.type,
|
|
105
|
+
type = _ref$type === void 0 ? 'float' : _ref$type,
|
|
106
|
+
decimalPlaces = _ref.decimalPlaces;
|
|
107
|
+
|
|
108
|
+
var executor = type === 'float' ? filterFloat : formatOnlyNumbers;
|
|
109
|
+
return executor(value, decimalPlaces);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
exports.filterNumeric = filterNumeric;
|
|
@@ -1,39 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports.formatInput = void 0;
|
|
9
7
|
|
|
10
|
-
var
|
|
8
|
+
var _fieldValueFormatters = require("../Functions/fieldValueFormatters");
|
|
11
9
|
|
|
12
10
|
var formatInput = {
|
|
13
11
|
priceInput: {
|
|
14
|
-
addCommas:
|
|
15
|
-
value = value.toString();
|
|
16
|
-
var isFraction = value.includes('.');
|
|
17
|
-
var valueBeforeDot = isFraction ? value.slice(0, value.indexOf('.')) : value;
|
|
18
|
-
var intPart = valueBeforeDot.split('').reverse().reduce(function (acc, item, idx) {
|
|
19
|
-
return idx % 3 === 0 && idx !== 0 ? [].concat((0, _toConsumableArray2.default)(acc), [',', item]) : [].concat((0, _toConsumableArray2.default)(acc), [item]);
|
|
20
|
-
}, []).reverse().join('');
|
|
21
|
-
return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
|
|
22
|
-
},
|
|
12
|
+
addCommas: _fieldValueFormatters.formatToAddBitDepthPoints,
|
|
23
13
|
removeComma: function removeComma(value) {
|
|
24
14
|
return parseInt(value.toString().replace(/\,/g, ''));
|
|
25
15
|
}
|
|
26
16
|
},
|
|
27
|
-
onlyNumbers:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
// onlyNumbers: (value, isDot = false) => {
|
|
18
|
+
// const val = value.slice(0, 1) !== '0' && value.slice(0, 1) !== '.' ? value : value.slice(1);
|
|
19
|
+
// if (isDot) return twoDigitAfterDot(val.replace(/[^0-9.]/g, ''));
|
|
20
|
+
// else return +val.toString().replace(/\D/g, '');
|
|
21
|
+
// },
|
|
22
|
+
formatToOnlyNumbers: function formatToOnlyNumbers(value, settings) {
|
|
23
|
+
var _ref = settings || {},
|
|
24
|
+
_ref$type = _ref.type,
|
|
25
|
+
type = _ref$type === void 0 ? 'float' : _ref$type,
|
|
26
|
+
decimalPlaces = _ref.decimalPlaces;
|
|
27
|
+
|
|
28
|
+
var executor = type === 'float' ? _fieldValueFormatters.filterFloat : _fieldValueFormatters.formatOnlyNumbers;
|
|
29
|
+
return executor(value, decimalPlaces);
|
|
31
30
|
},
|
|
32
|
-
|
|
31
|
+
formatToOnlyString: function formatToOnlyString(value) {
|
|
33
32
|
var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
34
33
|
|
|
35
34
|
if (soft) {
|
|
36
|
-
return value.toString().replace(/[^a-z
|
|
35
|
+
return value.toString().replace(/[^a-z- ]/gi, '');
|
|
37
36
|
} else {
|
|
38
37
|
return value.toString().replace(/[^a-z]/gi, '');
|
|
39
38
|
}
|
|
@@ -23,14 +23,17 @@ var FormElement = function FormElement(_ref) {
|
|
|
23
23
|
children = _ref.children,
|
|
24
24
|
error = _ref.error,
|
|
25
25
|
className = _ref.className,
|
|
26
|
-
hint = _ref.hint
|
|
26
|
+
hint = _ref.hint,
|
|
27
|
+
isLabelBolt = _ref.isLabelBolt,
|
|
28
|
+
isNolabel = _ref.isNolabel;
|
|
27
29
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
28
30
|
className: (0, _classnames.default)(className, RC)
|
|
29
|
-
}, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
31
|
+
}, label && !isNolabel && /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
30
32
|
className: "".concat(RC, "__label"),
|
|
31
33
|
label: label,
|
|
32
34
|
hint: hint,
|
|
33
|
-
isRequired: required
|
|
35
|
+
isRequired: required,
|
|
36
|
+
isLabelBolt: isLabelBolt
|
|
34
37
|
}), children, error && /*#__PURE__*/_react.default.createElement("span", {
|
|
35
38
|
className: "".concat(RC, "__error")
|
|
36
39
|
}, error));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "intelicoreact",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "add postfix in dropdown",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": ["dist/*"],
|
|
7
7
|
"scripts": {
|