@desynova-digital/components 9.0.24 → 9.0.26
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/atoms/icon/icons.json +14 -0
- package/atoms/inputText/inputText.js +59 -49
- package/package.json +2 -2
package/atoms/icon/icons.json
CHANGED
|
@@ -1697,6 +1697,20 @@
|
|
|
1697
1697
|
],
|
|
1698
1698
|
"width": 16,
|
|
1699
1699
|
"height": 16
|
|
1700
|
+
},
|
|
1701
|
+
"down-chevron": {
|
|
1702
|
+
"paths": [
|
|
1703
|
+
"M5 5.83594L9.33013 1.46094H0.669873L5 5.83594Z"
|
|
1704
|
+
],
|
|
1705
|
+
"width": 10,
|
|
1706
|
+
"height": 6
|
|
1707
|
+
},
|
|
1708
|
+
"home-icon": {
|
|
1709
|
+
"paths": [
|
|
1710
|
+
"M8 17V11H12V17H17V9H20L10 0L0 9H3V17H8Z"
|
|
1711
|
+
],
|
|
1712
|
+
"width": 20,
|
|
1713
|
+
"height": 17
|
|
1700
1714
|
}
|
|
1701
1715
|
}
|
|
1702
1716
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
@@ -8,29 +8,29 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
8
8
|
|
|
9
9
|
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
|
10
10
|
|
|
11
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
12
|
-
_templateObject2 = _taggedTemplateLiteral([
|
|
13
|
-
_templateObject3 = _taggedTemplateLiteral([
|
|
14
|
-
_templateObject4 = _taggedTemplateLiteral([
|
|
15
|
-
_templateObject5 = _taggedTemplateLiteral([
|
|
11
|
+
var _templateObject = _taggedTemplateLiteral(["\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n"], ["\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n"]),
|
|
12
|
+
_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"], ["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"]),
|
|
13
|
+
_templateObject3 = _taggedTemplateLiteral(["\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n"], ["\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n"]),
|
|
14
|
+
_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"], ["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"]),
|
|
15
|
+
_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n\n cursor: ", ";\n\n font-size: 14px;\n padding: ", ";\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ", ";\n }\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n"], ["\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n\n cursor: ", ";\n\n font-size: 14px;\n padding: ", ";\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ", ";\n }\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n"]);
|
|
16
16
|
|
|
17
|
-
var _react = require(
|
|
17
|
+
var _react = require("react");
|
|
18
18
|
|
|
19
19
|
var _react2 = _interopRequireDefault(_react);
|
|
20
20
|
|
|
21
|
-
var _styledComponents = require(
|
|
21
|
+
var _styledComponents = require("styled-components");
|
|
22
22
|
|
|
23
23
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
24
24
|
|
|
25
|
-
var _icon = require(
|
|
25
|
+
var _icon = require("../icon");
|
|
26
26
|
|
|
27
27
|
var _icon2 = _interopRequireDefault(_icon);
|
|
28
28
|
|
|
29
|
-
var _propTypes = require(
|
|
29
|
+
var _propTypes = require("prop-types");
|
|
30
30
|
|
|
31
31
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
32
32
|
|
|
33
|
-
var _tokens = require(
|
|
33
|
+
var _tokens = require("@desynova-digital/tokens");
|
|
34
34
|
|
|
35
35
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
36
36
|
|
|
@@ -54,7 +54,8 @@ var InputText = function InputText(_ref) {
|
|
|
54
54
|
defaultValue = _ref.defaultValue,
|
|
55
55
|
type = _ref.type,
|
|
56
56
|
showLengthCount = _ref.showLengthCount,
|
|
57
|
-
|
|
57
|
+
disablePaste = _ref.disablePaste,
|
|
58
|
+
props = _objectWithoutProperties(_ref, ["theme", "maxLength", "defaultValue", "type", "showLengthCount", "disablePaste"]);
|
|
58
59
|
|
|
59
60
|
var _useState = (0, _react.useState)(true),
|
|
60
61
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -63,7 +64,7 @@ var InputText = function InputText(_ref) {
|
|
|
63
64
|
|
|
64
65
|
if (props.masked) {
|
|
65
66
|
var length = defaultValue ? defaultValue.length : 8;
|
|
66
|
-
var maskedValue = new Array(length).join(
|
|
67
|
+
var maskedValue = new Array(length).join("•");
|
|
67
68
|
return _react2.default.createElement(InputText.Element, _extends({
|
|
68
69
|
theme: theme,
|
|
69
70
|
value: props.value,
|
|
@@ -85,74 +86,81 @@ var InputText = function InputText(_ref) {
|
|
|
85
86
|
var passwordButton = props.passwordButton;
|
|
86
87
|
}
|
|
87
88
|
|
|
89
|
+
var handleCutCopyPaste = function handleCutCopyPaste(e) {
|
|
90
|
+
disablePaste && e.preventDefault();
|
|
91
|
+
};
|
|
92
|
+
|
|
88
93
|
return _react2.default.createElement(
|
|
89
94
|
InputTextDiv,
|
|
90
95
|
{ theme: theme },
|
|
91
96
|
_react2.default.createElement(InputText.Element, _extends({
|
|
92
97
|
theme: theme,
|
|
93
|
-
type: hidden ? type :
|
|
98
|
+
type: hidden ? type : "text",
|
|
94
99
|
value: props.value,
|
|
95
100
|
defaultValue: defaultValue
|
|
96
101
|
}, props, {
|
|
97
|
-
maxLength: maxLength ||
|
|
98
|
-
showLengthCount: showLengthCount || false
|
|
102
|
+
maxLength: maxLength || "",
|
|
103
|
+
showLengthCount: showLengthCount || false,
|
|
104
|
+
onCopy: handleCutCopyPaste,
|
|
105
|
+
onCut: handleCutCopyPaste,
|
|
106
|
+
onPaste: handleCutCopyPaste
|
|
99
107
|
})),
|
|
100
108
|
props.label ? _react2.default.createElement(
|
|
101
|
-
|
|
109
|
+
"label",
|
|
102
110
|
{
|
|
103
111
|
htmlFor: props.id,
|
|
104
|
-
className: props.value && props.value.length > 0 ?
|
|
112
|
+
className: props.value && props.value.length > 0 ? "floaton" : ""
|
|
105
113
|
},
|
|
106
|
-
|
|
107
|
-
) :
|
|
114
|
+
"" + props.label + (props.isRequired ? "*" : "")
|
|
115
|
+
) : "",
|
|
108
116
|
errorMesssage ? _react2.default.createElement(
|
|
109
117
|
InputError,
|
|
110
118
|
{ value: props.value, theme: theme, error: props.error },
|
|
111
119
|
errorMesssage
|
|
112
|
-
) :
|
|
120
|
+
) : "",
|
|
113
121
|
maxLength && showLengthCount && _react2.default.createElement(
|
|
114
122
|
CountWrappper,
|
|
115
123
|
null,
|
|
116
124
|
props.value.length,
|
|
117
|
-
|
|
125
|
+
"/",
|
|
118
126
|
maxLength
|
|
119
127
|
),
|
|
120
|
-
type ==
|
|
128
|
+
type == "password" || passwordButton ? _react2.default.createElement(
|
|
121
129
|
PasswordToggleButton,
|
|
122
130
|
{
|
|
123
|
-
type:
|
|
124
|
-
className:
|
|
131
|
+
type: "button",
|
|
132
|
+
className: "password-toggle",
|
|
125
133
|
onClick: function onClick() {
|
|
126
134
|
return togglePassword(!hidden);
|
|
127
135
|
},
|
|
128
136
|
hiddenEye: errorMesssage ? true : false
|
|
129
137
|
},
|
|
130
|
-
hidden ? _react2.default.createElement(_icon2.default, { name:
|
|
131
|
-
) :
|
|
138
|
+
hidden ? _react2.default.createElement(_icon2.default, { name: "show-password", width: 18, height: 15, color: "#999" }) : _react2.default.createElement(_icon2.default, { name: "hide-password", width: 18, height: 15, color: "#999" })
|
|
139
|
+
) : ""
|
|
132
140
|
);
|
|
133
141
|
};
|
|
134
142
|
var returnPadding = function returnPadding(props) {
|
|
135
143
|
var digitCount = props.maxLength.toString().length;
|
|
136
144
|
|
|
137
|
-
if (props.type ===
|
|
138
|
-
return
|
|
145
|
+
if (props.type === "password") {
|
|
146
|
+
return "7px 23px 2px 0px";
|
|
139
147
|
}
|
|
140
148
|
|
|
141
149
|
switch (digitCount) {
|
|
142
150
|
case 0:
|
|
143
|
-
return
|
|
151
|
+
return "7px 0px 2px 0px";
|
|
144
152
|
case 1:
|
|
145
|
-
return
|
|
153
|
+
return "7px 40px 2px 0px";
|
|
146
154
|
case 2:
|
|
147
|
-
return
|
|
155
|
+
return "7px 60px 2px 0px";
|
|
148
156
|
case 3:
|
|
149
|
-
return
|
|
157
|
+
return "7px 75px 2px 0px";
|
|
150
158
|
case 4:
|
|
151
|
-
return
|
|
159
|
+
return "7px 90px 2px 0px";
|
|
152
160
|
case 5:
|
|
153
|
-
return
|
|
161
|
+
return "7px 110px 2px 0px";
|
|
154
162
|
default:
|
|
155
|
-
return
|
|
163
|
+
return "7px 0px 2px 0px";
|
|
156
164
|
}
|
|
157
165
|
};
|
|
158
166
|
|
|
@@ -167,9 +175,9 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
|
|
|
167
175
|
}, function (props) {
|
|
168
176
|
return _tokens.colors[props.theme].inputCommon.color;
|
|
169
177
|
}, function (props) {
|
|
170
|
-
return props.readOnly ?
|
|
178
|
+
return props.readOnly ? "not-allowed" : "text";
|
|
171
179
|
}, function (props) {
|
|
172
|
-
return returnPadding(props ||
|
|
180
|
+
return returnPadding(props || "");
|
|
173
181
|
}, function (props) {
|
|
174
182
|
if (props.error) {
|
|
175
183
|
return _tokens.colors[props.theme].inputError.borderHover;
|
|
@@ -183,19 +191,19 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
|
|
|
183
191
|
}, function (props) {
|
|
184
192
|
return _tokens.colors[props.theme].inputCommon.colorDisabled;
|
|
185
193
|
}, function (props) {
|
|
186
|
-
return props.label ?
|
|
187
|
-
return props.theme ===
|
|
194
|
+
return props.label ? "transparent" : function (props) {
|
|
195
|
+
return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
|
|
188
196
|
};
|
|
189
197
|
}, function (props) {
|
|
190
|
-
return props.label ?
|
|
198
|
+
return props.label ? "0" : "1";
|
|
191
199
|
}, function (props) {
|
|
192
200
|
return props.placeholder ? function (props) {
|
|
193
|
-
return props.theme ===
|
|
201
|
+
return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
|
|
194
202
|
} : function (props) {
|
|
195
|
-
return props.theme ===
|
|
203
|
+
return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
|
|
196
204
|
};
|
|
197
205
|
}, function (props) {
|
|
198
|
-
return props.placeholder ?
|
|
206
|
+
return props.placeholder ? "1" : "1";
|
|
199
207
|
});
|
|
200
208
|
|
|
201
209
|
InputText.propTypes = {
|
|
@@ -221,7 +229,8 @@ InputText.propTypes = {
|
|
|
221
229
|
/** The (HTML) maxLength for the input. */
|
|
222
230
|
maxLength: _propTypes2.default.number,
|
|
223
231
|
showLengthCount: _propTypes2.default.bool,
|
|
224
|
-
theme: _propTypes2.default.oneOf([
|
|
232
|
+
theme: _propTypes2.default.oneOf(["light", "dark", "nexc"]),
|
|
233
|
+
disablePaste: _propTypes2.default.bool
|
|
225
234
|
|
|
226
235
|
/** deprecate error string prop */
|
|
227
236
|
// _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
|
|
@@ -232,11 +241,12 @@ InputText.defaultProps = {
|
|
|
232
241
|
code: false,
|
|
233
242
|
error: null,
|
|
234
243
|
onChange: null,
|
|
235
|
-
type:
|
|
244
|
+
type: "text",
|
|
236
245
|
// maxLength: 50,
|
|
237
|
-
theme:
|
|
238
|
-
value:
|
|
239
|
-
showLengthCount: false
|
|
246
|
+
theme: "light",
|
|
247
|
+
value: "",
|
|
248
|
+
showLengthCount: false,
|
|
249
|
+
disablePaste: false
|
|
240
250
|
};
|
|
241
251
|
|
|
242
252
|
exports.default = InputText;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.26",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.0.
|
|
10
|
+
"@desynova-digital/tokens": "9.0.26",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|