@gympass/yoga 7.29.1 → 7.29.2
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/cjs/Input/web/Field.js
CHANGED
|
@@ -5,7 +5,7 @@ exports["default"] = void 0;
|
|
|
5
5
|
|
|
6
6
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
7
7
|
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
9
9
|
|
|
10
10
|
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); }
|
|
11
11
|
|
|
@@ -22,7 +22,9 @@ var labelTransition = (0, _styledComponents.css)(_templateObject || (_templateOb
|
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
var Field = _styledComponents["default"].input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n appearance: none;\n background-color: transparent;\n outline: none;\n\n position: absolute;\n bottom: 0;\n left: 0;\n\n border: none;\n box-sizing: border-box;\n\n ", "\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n display: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n"])), function (_ref2) {
|
|
25
|
-
var
|
|
25
|
+
var label = _ref2.label,
|
|
26
|
+
placeholder = _ref2.placeholder,
|
|
27
|
+
cleanable = _ref2.cleanable,
|
|
26
28
|
error = _ref2.error,
|
|
27
29
|
value = _ref2.value,
|
|
28
30
|
_ref2$theme$yoga = _ref2.theme.yoga,
|
|
@@ -30,7 +32,7 @@ var Field = _styledComponents["default"].input(_templateObject2 || (_templateObj
|
|
|
30
32
|
colors = _ref2$theme$yoga.colors,
|
|
31
33
|
baseFont = _ref2$theme$yoga.baseFont,
|
|
32
34
|
input = _ref2$theme$yoga.components.input;
|
|
33
|
-
return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n
|
|
35
|
+
return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n ", "\n\n ", "\n "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, placeholder && label ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: transparent;\n }\n "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: ", ";\n }\n "])), input.label.color["default"]), value && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n & ~ legend {\n max-width: max-content;\n }\n\n & ~ label {\n color: ", ";\n ", "\n }\n "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
|
|
34
36
|
});
|
|
35
37
|
|
|
36
38
|
var _default = Field;
|
package/cjs/Input/web/Input.js
CHANGED
|
@@ -89,6 +89,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
|
|
|
89
89
|
style: style,
|
|
90
90
|
value: value
|
|
91
91
|
}, /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
|
|
92
|
+
label: label,
|
|
92
93
|
cleanable: cleanable,
|
|
93
94
|
disabled: disabled,
|
|
94
95
|
error: error,
|
|
@@ -143,7 +144,8 @@ Input.propTypes = {
|
|
|
143
144
|
onClean: _propTypes.func,
|
|
144
145
|
|
|
145
146
|
/** when max length helper is unnecessary to appear */
|
|
146
|
-
hideMaxLength: _propTypes.bool
|
|
147
|
+
hideMaxLength: _propTypes.bool,
|
|
148
|
+
placeholder: _propTypes.string
|
|
147
149
|
};
|
|
148
150
|
Input.defaultProps = {
|
|
149
151
|
className: undefined,
|
|
@@ -159,7 +161,8 @@ Input.defaultProps = {
|
|
|
159
161
|
value: '',
|
|
160
162
|
onChange: function onChange() {},
|
|
161
163
|
onClean: function onClean() {},
|
|
162
|
-
hideMaxLength: false
|
|
164
|
+
hideMaxLength: false,
|
|
165
|
+
placeholder: undefined
|
|
163
166
|
};
|
|
164
167
|
var _default = Input;
|
|
165
168
|
exports["default"] = _default;
|
package/esm/Input/web/Field.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
2
2
|
|
|
3
3
|
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
4
|
|
|
@@ -11,7 +11,9 @@ var labelTransition = css(_templateObject || (_templateObject = _taggedTemplateL
|
|
|
11
11
|
return "\n transform: translateY(-" + (input.height / 2 - 2) + "px);\n transition-property: transform, font-size, color;\n transition-duration: " + transition.duration[1] + "ms;\n transition-timing-function: cubic-bezier(" + transition.timing[0].join() + ");\n\n font-size: " + input.label.font.size.typed + "px;\n ";
|
|
12
12
|
});
|
|
13
13
|
var Field = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n appearance: none;\n background-color: transparent;\n outline: none;\n\n position: absolute;\n bottom: 0;\n left: 0;\n\n border: none;\n box-sizing: border-box;\n\n ", "\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n display: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n"])), function (_ref2) {
|
|
14
|
-
var
|
|
14
|
+
var label = _ref2.label,
|
|
15
|
+
placeholder = _ref2.placeholder,
|
|
16
|
+
cleanable = _ref2.cleanable,
|
|
15
17
|
error = _ref2.error,
|
|
16
18
|
value = _ref2.value,
|
|
17
19
|
_ref2$theme$yoga = _ref2.theme.yoga,
|
|
@@ -19,6 +21,6 @@ var Field = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplate
|
|
|
19
21
|
colors = _ref2$theme$yoga.colors,
|
|
20
22
|
baseFont = _ref2$theme$yoga.baseFont,
|
|
21
23
|
input = _ref2$theme$yoga.components.input;
|
|
22
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n
|
|
24
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n ", "\n\n ", "\n "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, placeholder && label ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: transparent;\n }\n "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: ", ";\n }\n "])), input.label.color["default"]), value && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n & ~ legend {\n max-width: max-content;\n }\n\n & ~ label {\n color: ", ";\n ", "\n }\n "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
|
|
23
25
|
});
|
|
24
26
|
export default Field;
|
package/esm/Input/web/Input.js
CHANGED
|
@@ -66,6 +66,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
66
66
|
style: style,
|
|
67
67
|
value: value
|
|
68
68
|
}, /*#__PURE__*/React.createElement(Field, _extends({}, props, {
|
|
69
|
+
label: label,
|
|
69
70
|
cleanable: cleanable,
|
|
70
71
|
disabled: disabled,
|
|
71
72
|
error: error,
|
|
@@ -119,7 +120,8 @@ Input.propTypes = {
|
|
|
119
120
|
onClean: func,
|
|
120
121
|
|
|
121
122
|
/** when max length helper is unnecessary to appear */
|
|
122
|
-
hideMaxLength: bool
|
|
123
|
+
hideMaxLength: bool,
|
|
124
|
+
placeholder: string
|
|
123
125
|
};
|
|
124
126
|
Input.defaultProps = {
|
|
125
127
|
className: undefined,
|
|
@@ -135,6 +137,7 @@ Input.defaultProps = {
|
|
|
135
137
|
value: '',
|
|
136
138
|
onChange: function onChange() {},
|
|
137
139
|
onClean: function onClean() {},
|
|
138
|
-
hideMaxLength: false
|
|
140
|
+
hideMaxLength: false,
|
|
141
|
+
placeholder: undefined
|
|
139
142
|
};
|
|
140
143
|
export default Input;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.29.
|
|
3
|
+
"version": "7.29.2",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"react": ">=16",
|
|
50
50
|
"styled-components": "^4.4.0"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "4503f64c1201fc0818b142196e0bb9b087247f63",
|
|
53
53
|
"module": "./esm",
|
|
54
54
|
"private": false,
|
|
55
55
|
"react-native": "./cjs/index.native.js"
|