intelicoreact 0.0.31 → 0.0.41
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/Calendar/Calendar.js +134 -0
- package/dist/Atomic/FormElements/Calendar/Calendar.scss +543 -0
- package/dist/Atomic/FormElements/Calendar/Calendar.stories.js +75 -0
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +1 -1
- package/dist/Atomic/FormElements/Input/Input.js +91 -99
- package/dist/Atomic/FormElements/Input/Input.scss +16 -5
- package/dist/Atomic/FormElements/Input/Input.stories.js +32 -25
- package/dist/Atomic/UI/Accordion/Accordion.stories.js +1 -1
- package/dist/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +1 -1
- package/dist/Atomic/UI/Alert/Alert.stories.js +1 -1
- package/dist/Atomic/UI/Button/Button.js +1 -12
- package/dist/Atomic/UI/Button/Button.stories.js +5 -19
- package/dist/Atomic/UI/Hint/Hint.stories.js +1 -1
- package/dist/Atomic/UI/Price/Price.js +32 -0
- package/dist/Atomic/UI/Price/Price.stories.js +42 -0
- package/dist/Atomic/UI/Status/Status.stories.js +1 -1
- package/dist/Functions/useClickOutside.js +25 -0
- package/dist/scss/main.scss +2 -2
- package/package.json +7 -5
- package/src/Atomic/FormElements/Calendar/Calendar.js +106 -0
- package/src/Atomic/FormElements/Calendar/Calendar.scss +543 -0
- package/src/Atomic/FormElements/Calendar/Calendar.stories.js +38 -0
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +1 -1
- package/src/Atomic/FormElements/Input/Input.js +73 -72
- package/src/Atomic/FormElements/Input/Input.scss +16 -5
- package/src/Atomic/FormElements/Input/Input.stories.js +23 -27
- package/src/Atomic/UI/Accordion/Accordion.stories.js +1 -1
- package/src/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +1 -1
- package/src/Atomic/UI/Alert/Alert.stories.js +1 -1
- package/src/Atomic/UI/Button/Button.js +1 -3
- package/src/Atomic/UI/Button/Button.stories.js +4 -19
- package/src/Atomic/UI/Hint/Hint.stories.js +1 -1
- package/src/Atomic/UI/Price/Price.js +19 -0
- package/src/Atomic/UI/Price/Price.stories.js +30 -0
- package/src/Atomic/UI/Status/Status.stories.js +1 -1
- package/src/Functions/useClickOutside.js +15 -0
- package/src/scss/main.scss +2 -2
|
@@ -0,0 +1,75 @@
|
|
|
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.CalendarSimple = exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _yup = require("yup");
|
|
17
|
+
|
|
18
|
+
var _useClickOutside = require("../../../Functions/useClickOutside");
|
|
19
|
+
|
|
20
|
+
var _Calendar = _interopRequireDefault(require("./Calendar"));
|
|
21
|
+
|
|
22
|
+
var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
23
|
+
|
|
24
|
+
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); }
|
|
25
|
+
|
|
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
|
+
|
|
28
|
+
global.lng = 'en';
|
|
29
|
+
var _default = {
|
|
30
|
+
title: 'Form Elements/Calendar',
|
|
31
|
+
component: _Calendar.default
|
|
32
|
+
};
|
|
33
|
+
exports.default = _default;
|
|
34
|
+
|
|
35
|
+
var Template = function Template(args) {
|
|
36
|
+
var _useState = (0, _react.useState)(args.date),
|
|
37
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
38
|
+
date = _useState2[0],
|
|
39
|
+
_setDate = _useState2[1];
|
|
40
|
+
|
|
41
|
+
var _useState3 = (0, _react.useState)(false),
|
|
42
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
43
|
+
isOpened = _useState4[0],
|
|
44
|
+
setIsOpened = _useState4[1];
|
|
45
|
+
|
|
46
|
+
var calendarRef = (0, _react.useRef)(null);
|
|
47
|
+
(0, _useClickOutside.useClickOutside)(calendarRef, function () {
|
|
48
|
+
return setIsOpened(false);
|
|
49
|
+
});
|
|
50
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
+
className: "calendar-container",
|
|
52
|
+
ref: calendarRef
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
|
|
54
|
+
mask: "99/99/9999",
|
|
55
|
+
value: date,
|
|
56
|
+
onChange: function onChange(e) {
|
|
57
|
+
return _setDate(e.target.value);
|
|
58
|
+
},
|
|
59
|
+
className: "calendar-dropdown",
|
|
60
|
+
onFocus: function onFocus() {
|
|
61
|
+
return setIsOpened(!isOpened);
|
|
62
|
+
}
|
|
63
|
+
}), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
64
|
+
date: date,
|
|
65
|
+
setDate: function setDate(newDate) {
|
|
66
|
+
return _setDate(newDate);
|
|
67
|
+
}
|
|
68
|
+
}) : null);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var CalendarSimple = Template.bind({});
|
|
72
|
+
exports.CalendarSimple = CalendarSimple;
|
|
73
|
+
CalendarSimple.args = {
|
|
74
|
+
date: '10/11/2021'
|
|
75
|
+
};
|
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
global.lng = 'en';
|
|
25
25
|
var _default = {
|
|
26
|
-
title: 'CheckboxInput',
|
|
26
|
+
title: 'Form Elements/CheckboxInput',
|
|
27
27
|
component: _CheckboxInput.default
|
|
28
28
|
};
|
|
29
29
|
exports.default = _default;
|
|
@@ -9,13 +9,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
13
|
|
|
16
|
-
var
|
|
14
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
17
15
|
|
|
18
|
-
var
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
17
|
|
|
20
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
19
|
|
|
@@ -23,40 +21,36 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
23
21
|
|
|
24
22
|
var _reactFeather = require("react-feather");
|
|
25
23
|
|
|
26
|
-
var
|
|
24
|
+
var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
27
25
|
|
|
28
26
|
require("./Input.scss");
|
|
29
27
|
|
|
30
|
-
var _excluded = ["error", "onChange", "disabled", "withDelete", "isNumeric", "min", "max", "value", "placeholder", "hint", "label", "hintSide", "className", "isLabelBold", "type", "onBlur", "icon", "isRequired"];
|
|
31
|
-
|
|
32
28
|
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); }
|
|
33
29
|
|
|
34
30
|
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; }
|
|
35
31
|
|
|
36
32
|
var Input = function Input(_ref) {
|
|
37
|
-
var
|
|
38
|
-
onChange = _ref.onChange,
|
|
33
|
+
var onChange = _ref.onChange,
|
|
39
34
|
disabled = _ref.disabled,
|
|
40
35
|
withDelete = _ref.withDelete,
|
|
41
36
|
isNumeric = _ref.isNumeric,
|
|
42
|
-
|
|
37
|
+
_ref$numStep = _ref.numStep,
|
|
38
|
+
numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
|
|
39
|
+
_ref$min = _ref.min,
|
|
40
|
+
min = _ref$min === void 0 ? 0 : _ref$min,
|
|
43
41
|
max = _ref.max,
|
|
44
|
-
|
|
45
|
-
value = _ref$value === void 0 ? min : _ref$value,
|
|
42
|
+
value = _ref.value,
|
|
46
43
|
placeholder = _ref.placeholder,
|
|
47
|
-
hint = _ref.hint,
|
|
48
|
-
label = _ref.label,
|
|
49
|
-
hintSide = _ref.hintSide,
|
|
50
44
|
className = _ref.className,
|
|
51
|
-
isLabelBold = _ref.isLabelBold,
|
|
52
45
|
_ref$type = _ref.type,
|
|
53
46
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
47
|
+
onBlur = _ref.onBlur,
|
|
48
|
+
onFocus = _ref.onFocus,
|
|
49
|
+
onKeyUp = _ref.onKeyUp,
|
|
50
|
+
mask = _ref.mask,
|
|
51
|
+
error = _ref.error;
|
|
59
52
|
|
|
53
|
+
// STATES
|
|
60
54
|
var _useState = (0, _react.useState)(false),
|
|
61
55
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
62
56
|
isFocused = _useState2[0],
|
|
@@ -64,98 +58,96 @@ var Input = function Input(_ref) {
|
|
|
64
58
|
|
|
65
59
|
var _useState3 = (0, _react.useState)(false),
|
|
66
60
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
67
|
-
|
|
68
|
-
|
|
61
|
+
isEditing = _useState4[0],
|
|
62
|
+
setEditing = _useState4[1];
|
|
69
63
|
|
|
70
|
-
var
|
|
71
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
72
|
-
isEditing = _useState6[0],
|
|
73
|
-
setEditing = _useState6[1];
|
|
64
|
+
var inputRef = (0, _react.useRef)(null); // HANDLES
|
|
74
65
|
|
|
75
|
-
var
|
|
66
|
+
var handle = {
|
|
67
|
+
change: function change(event) {
|
|
68
|
+
var inputValue = event.target.value;
|
|
76
69
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
var totalValue = Number(+inputValue);
|
|
80
|
-
if (totalValue >= (min !== null && min !== void 0 ? min : -Infinity) && totalValue <= (max !== null && max !== void 0 ? max : Infinity)) onChange(totalValue);
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
70
|
+
if (isNumeric || type === 'number' && inputValue !== '') {
|
|
71
|
+
inputValue = parseFloat(inputValue) || '';
|
|
83
72
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
setEditing(!isEditing);
|
|
89
|
-
};
|
|
73
|
+
if (min && +min > inputValue) {
|
|
74
|
+
inputValue = min;
|
|
75
|
+
} else if (max && +max < inputValue) inputValue = max;
|
|
76
|
+
}
|
|
90
77
|
|
|
91
|
-
|
|
92
|
-
if (isEditing) {
|
|
93
|
-
inputRef.current.focus();
|
|
94
|
-
}
|
|
95
|
-
}, [isEditing, isFocused]);
|
|
96
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
97
|
-
className: (0, _classnames.default)('input-classic', className)
|
|
98
|
-
}, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
99
|
-
className: "input-classic-label",
|
|
100
|
-
isBold: isLabelBold,
|
|
101
|
-
label: label,
|
|
102
|
-
hint: hint,
|
|
103
|
-
hintSide: hintSide,
|
|
104
|
-
isRequired: isRequired
|
|
105
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
106
|
-
onMouseEnter: function onMouseEnter() {
|
|
107
|
-
return setOnInputHover(true);
|
|
78
|
+
onChange(inputValue.toString());
|
|
108
79
|
},
|
|
109
|
-
|
|
110
|
-
|
|
80
|
+
toggleEdit: function toggleEdit() {
|
|
81
|
+
setEditing(!isEditing);
|
|
82
|
+
onChange('');
|
|
111
83
|
},
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
className: "input-classic__input",
|
|
116
|
-
type: isNumeric ? 'number' : type,
|
|
117
|
-
onChange: function onChange(e) {
|
|
118
|
-
return changeHandler(e.target.value);
|
|
84
|
+
focus: function focus() {
|
|
85
|
+
setIsFocused(true);
|
|
86
|
+
if (onFocus) onFocus();
|
|
119
87
|
},
|
|
120
|
-
|
|
121
|
-
disabled: disabled,
|
|
122
|
-
onBlur: function onBlur() {
|
|
88
|
+
blur: function blur() {
|
|
123
89
|
setIsFocused(false);
|
|
124
90
|
setEditing(false);
|
|
125
|
-
|
|
126
|
-
_onBlur();
|
|
91
|
+
if (onBlur) onBlur();
|
|
127
92
|
},
|
|
128
|
-
|
|
129
|
-
return
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
93
|
+
keyUp: function keyUp(e) {
|
|
94
|
+
return onKeyUp ? onKeyUp(e.keyCode) : null;
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
(0, _react.useEffect)(function () {
|
|
98
|
+
if (isEditing) inputRef.current.focus();
|
|
99
|
+
}, [isEditing, isFocused]);
|
|
100
|
+
var uniProps = {
|
|
101
|
+
className: "input-classic ".concat(className),
|
|
102
|
+
placeholder: placeholder,
|
|
103
|
+
value: value || '',
|
|
104
|
+
disabled: disabled,
|
|
105
|
+
onChange: handle.change,
|
|
106
|
+
onFocus: handle.focus,
|
|
107
|
+
onBlur: handle.blur,
|
|
108
|
+
onKeyUp: handle.keyUp,
|
|
109
|
+
min: min,
|
|
110
|
+
max: max
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
function renderInput() {
|
|
114
|
+
if (mask) {
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
|
|
116
|
+
ref: inputRef,
|
|
117
|
+
mask: mask
|
|
118
|
+
}));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
|
|
122
|
+
ref: inputRef,
|
|
123
|
+
type: isNumeric ? 'number' : type
|
|
124
|
+
})), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
|
|
125
|
+
className: "input-classic__nums"
|
|
126
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
127
|
+
onClick: function onClick() {
|
|
128
|
+
return handle.change(value - numStep);
|
|
129
|
+
},
|
|
130
|
+
className: (0, _classnames.default)("input-classic__num-btn", {
|
|
131
|
+
disabled: value <= min
|
|
132
|
+
})
|
|
133
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
|
|
134
|
+
onClick: function onClick() {
|
|
135
|
+
return handle.change(+value + +numStep);
|
|
136
|
+
},
|
|
137
|
+
className: (0, _classnames.default)("input-classic__num-btn", {
|
|
138
|
+
disabled: value >= max
|
|
139
|
+
})
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
144
|
+
className: (0, _classnames.default)("input-classic__wrap", (0, _defineProperty2.default)({}, "input-classic__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input-classic__wrap_error", error), (0, _defineProperty2.default)({}, "input-classic__wrap_disabled", disabled))
|
|
145
|
+
}, renderInput(), withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
|
|
149
146
|
className: (0, _classnames.default)("input-classic__close", {
|
|
150
147
|
hidden: !value
|
|
151
148
|
}),
|
|
152
|
-
onClick:
|
|
153
|
-
|
|
154
|
-
onChange('');
|
|
155
|
-
}
|
|
156
|
-
}), icon !== null && icon !== void 0 ? icon : null), error && /*#__PURE__*/_react.default.createElement("span", {
|
|
157
|
-
className: "input-classic__error"
|
|
158
|
-
}, error));
|
|
149
|
+
onClick: handle.toggleEdit
|
|
150
|
+
}));
|
|
159
151
|
};
|
|
160
152
|
|
|
161
153
|
var _default = Input;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
.input-classic {
|
|
2
2
|
position: relative;
|
|
3
3
|
word-break: break-all;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
border: none;
|
|
5
|
+
background: none;
|
|
6
|
+
padding: 0 10px;
|
|
7
|
+
width: 100%;
|
|
8
|
+
&::-webkit-outer-spin-button,
|
|
9
|
+
&::-webkit-inner-spin-button {
|
|
7
10
|
-webkit-appearance: none;
|
|
8
11
|
}
|
|
9
12
|
|
|
@@ -77,7 +80,8 @@
|
|
|
77
80
|
background: none;
|
|
78
81
|
cursor: pointer;
|
|
79
82
|
margin-right: 4px;
|
|
80
|
-
|
|
83
|
+
visibility: hidden;
|
|
84
|
+
pointer-events: none;
|
|
81
85
|
&:hover {
|
|
82
86
|
opacity: 1;
|
|
83
87
|
}
|
|
@@ -121,7 +125,9 @@
|
|
|
121
125
|
background: none;
|
|
122
126
|
font-size: 20px;
|
|
123
127
|
user-select: none;
|
|
124
|
-
|
|
128
|
+
&.disabled {
|
|
129
|
+
opacity: 0.3;
|
|
130
|
+
}
|
|
125
131
|
svg {
|
|
126
132
|
margin-right: 0;
|
|
127
133
|
}
|
|
@@ -131,3 +137,8 @@
|
|
|
131
137
|
margin-bottom: 5px;
|
|
132
138
|
}
|
|
133
139
|
}
|
|
140
|
+
|
|
141
|
+
.input-classic__wrap:hover .input-classic__close {
|
|
142
|
+
visibility: visible;
|
|
143
|
+
pointer-events: all;
|
|
144
|
+
}
|
|
@@ -23,49 +23,57 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
global.lng = 'en';
|
|
25
25
|
var _default = {
|
|
26
|
-
title: 'Input',
|
|
26
|
+
title: 'Form Elements/Input',
|
|
27
27
|
component: _Input.default,
|
|
28
28
|
argTypes: {
|
|
29
|
-
hintSide: {
|
|
30
|
-
description: 'string: ["right", "bottom", "top", "left"]',
|
|
31
|
-
control: {
|
|
32
|
-
type: 'select',
|
|
33
|
-
options: ['right', 'bottom', 'top', 'left']
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
hint: {
|
|
37
|
-
description: 'string'
|
|
38
|
-
},
|
|
39
29
|
disabled: {
|
|
40
30
|
description: 'boolean'
|
|
41
31
|
},
|
|
42
32
|
error: {
|
|
43
|
-
description: 'text'
|
|
33
|
+
description: 'text - coloring input if is errored'
|
|
44
34
|
},
|
|
45
35
|
withDelete: {
|
|
46
|
-
description: 'boolean'
|
|
36
|
+
description: 'boolean - add clear-cross by hover'
|
|
47
37
|
},
|
|
48
38
|
isNumeric: {
|
|
49
|
-
description: 'boolean'
|
|
39
|
+
description: 'boolean - add plus/minus buttons, force input to numeric type'
|
|
40
|
+
},
|
|
41
|
+
numStep: {
|
|
42
|
+
description: 'number/text - plus/minus buttons factor (default: 1)'
|
|
50
43
|
},
|
|
51
44
|
min: {
|
|
52
|
-
description: 'number'
|
|
45
|
+
description: 'number/text - minimal number for numeric input'
|
|
53
46
|
},
|
|
54
47
|
max: {
|
|
55
|
-
description: 'number'
|
|
48
|
+
description: 'number/text - maximal number for numeric input'
|
|
56
49
|
},
|
|
57
50
|
placeholder: {
|
|
58
51
|
description: 'text'
|
|
59
52
|
},
|
|
60
|
-
label: {
|
|
61
|
-
description: 'text'
|
|
62
|
-
},
|
|
63
53
|
type: {
|
|
64
|
-
description: '
|
|
54
|
+
description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
|
|
65
55
|
control: {
|
|
66
56
|
type: 'select',
|
|
67
|
-
options: ['text', 'number']
|
|
57
|
+
options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
|
|
68
58
|
}
|
|
59
|
+
},
|
|
60
|
+
value: {
|
|
61
|
+
description: '(* - required prop)'
|
|
62
|
+
},
|
|
63
|
+
className: {
|
|
64
|
+
description: 'string'
|
|
65
|
+
},
|
|
66
|
+
mask: {
|
|
67
|
+
description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
|
|
68
|
+
},
|
|
69
|
+
onBlur: {
|
|
70
|
+
description: 'custom callback on blur'
|
|
71
|
+
},
|
|
72
|
+
onFocus: {
|
|
73
|
+
description: 'custom callback on focus'
|
|
74
|
+
},
|
|
75
|
+
onKeyUp: {
|
|
76
|
+
description: 'custom callback on keyup, returns event keyCode'
|
|
69
77
|
}
|
|
70
78
|
}
|
|
71
79
|
};
|
|
@@ -91,10 +99,9 @@ InputTemplate.args = {
|
|
|
91
99
|
error: '',
|
|
92
100
|
withDelete: true,
|
|
93
101
|
isNumeric: false,
|
|
102
|
+
numStep: 1,
|
|
94
103
|
min: '0',
|
|
95
|
-
max: 5,
|
|
104
|
+
max: '5',
|
|
96
105
|
placeholder: 'Placeholder',
|
|
97
|
-
|
|
98
|
-
hint: 'hint',
|
|
99
|
-
hintSide: 'bottom'
|
|
106
|
+
mask: ''
|
|
100
107
|
};
|
|
@@ -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
|
});
|
|
@@ -15,14 +13,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
13
|
|
|
16
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
15
|
|
|
18
|
-
var Icons = _interopRequireWildcard(require("react-feather"));
|
|
19
|
-
|
|
20
16
|
require("./Button.scss");
|
|
21
17
|
|
|
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
18
|
var Button = function Button(_ref) {
|
|
27
19
|
var label = _ref.label,
|
|
28
20
|
_ref$variant = _ref.variant,
|
|
@@ -33,15 +25,12 @@ var Button = function Button(_ref) {
|
|
|
33
25
|
className = _ref.className,
|
|
34
26
|
children = _ref.children,
|
|
35
27
|
style = _ref.style;
|
|
36
|
-
var Icon = Icons[icon];
|
|
37
28
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
38
29
|
style: style,
|
|
39
30
|
className: (0, _classnames.default)(className, 'button', (0, _defineProperty2.default)({}, "button_".concat(variant), variant)),
|
|
40
31
|
onClick: onClick,
|
|
41
32
|
disabled: disabled
|
|
42
|
-
}, icon && /*#__PURE__*/_react.default.createElement(
|
|
43
|
-
className: "button__icon"
|
|
44
|
-
}), label && /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
}, icon, label && /*#__PURE__*/_react.default.createElement("div", {
|
|
45
34
|
className: "button__text"
|
|
46
35
|
}, label), !label && children ? children : null);
|
|
47
36
|
};
|
|
@@ -9,11 +9,13 @@ exports.ButtonTemplate = exports.default = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
|
+
var _reactFeather = require("react-feather");
|
|
13
|
+
|
|
12
14
|
var _Button = _interopRequireDefault(require("./Button"));
|
|
13
15
|
|
|
14
16
|
global.lng = 'en';
|
|
15
17
|
var _default = {
|
|
16
|
-
title: 'Button',
|
|
18
|
+
title: 'UI/Button',
|
|
17
19
|
component: _Button.default,
|
|
18
20
|
argTypes: {
|
|
19
21
|
variant: {
|
|
@@ -39,22 +41,6 @@ var _default = {
|
|
|
39
41
|
options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X', 'ArrowLeft']
|
|
40
42
|
}
|
|
41
43
|
}
|
|
42
|
-
},
|
|
43
|
-
label: {
|
|
44
|
-
description: 'string'
|
|
45
|
-
},
|
|
46
|
-
disabled: {
|
|
47
|
-
description: 'boolean'
|
|
48
|
-
},
|
|
49
|
-
onClick: {
|
|
50
|
-
description: 'function'
|
|
51
|
-
},
|
|
52
|
-
icon: {
|
|
53
|
-
description: 'svg icon code',
|
|
54
|
-
control: {
|
|
55
|
-
type: 'select',
|
|
56
|
-
options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X']
|
|
57
|
-
}
|
|
58
44
|
}
|
|
59
45
|
};
|
|
60
46
|
exports.default = _default;
|
|
@@ -70,6 +56,6 @@ ButtonTemplate.args = {
|
|
|
70
56
|
onClick: function onClick() {
|
|
71
57
|
return null;
|
|
72
58
|
},
|
|
73
|
-
|
|
74
|
-
icon:
|
|
59
|
+
label: 'Button',
|
|
60
|
+
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)
|
|
75
61
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var Price = function Price(_ref) {
|
|
13
|
+
var value = _ref.value,
|
|
14
|
+
_ref$unit = _ref.unit,
|
|
15
|
+
unit = _ref$unit === void 0 ? '$' : _ref$unit,
|
|
16
|
+
unitAfter = _ref.unitAfter,
|
|
17
|
+
className = _ref.className;
|
|
18
|
+
var formatted;
|
|
19
|
+
|
|
20
|
+
if (value.length <= 3) {
|
|
21
|
+
formatted = parseFloat(value).toFixed(2);
|
|
22
|
+
} else {
|
|
23
|
+
formatted = Number(value.toString().replace(/[+*?$^(,)]/g, '')).toLocaleString('en-US');
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
27
|
+
className: "price ".concat(className)
|
|
28
|
+
}, !unitAfter && unit, formatted, unitAfter && unit);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
var _default = Price;
|
|
32
|
+
exports.default = _default;
|