@sellout/ui 0.0.188 → 0.0.191
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.
|
@@ -28,5 +28,6 @@ export declare type InputProps = {
|
|
|
28
28
|
maxLength?: number;
|
|
29
29
|
validationError?: string;
|
|
30
30
|
disabled?: boolean;
|
|
31
|
+
inputWidth?: boolean;
|
|
31
32
|
};
|
|
32
|
-
export default function Input({ inputRef, autoFocus, placeholder, value, defaultValue, format, type, onMouseEnter, onMouseLeave, onChange, onFocus, onBlur, onSubmit, canSubmit, loading, margin, width, onEnter, label, subLabel, tip, maxLength, validationError, disabled, }: InputProps): JSX.Element;
|
|
33
|
+
export default function Input({ inputRef, autoFocus, placeholder, value, defaultValue, format, type, onMouseEnter, onMouseLeave, onChange, onFocus, onBlur, onSubmit, canSubmit, loading, margin, width, inputWidth, onEnter, label, subLabel, tip, maxLength, validationError, disabled, }: InputProps): JSX.Element;
|
|
@@ -25,15 +25,15 @@ var Form = styled.form(templateObject_2 || (templateObject_2 = __makeTemplateObj
|
|
|
25
25
|
return Colors.Grey5;
|
|
26
26
|
});
|
|
27
27
|
var PriceContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25px;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25px;\n background-color: ", ";\n"])), Colors.Grey5);
|
|
28
|
-
var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n height: 38px;\n width:
|
|
29
|
-
";\n color: ", ";\n outline: none;\n border: 0px;\n height: 38px;\n width:
|
|
28
|
+
var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n height: 38px;\n width: ", ";\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n text-indent: 1px;\n transition: all 0.2s;\n padding: 0 16px;\n text-align: right;\n\n ", ";\n\n ", ";\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n background-color: ",
|
|
29
|
+
";\n color: ", ";\n outline: none;\n border: 0px;\n height: 38px;\n width: ", ";\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n text-indent: 1px;\n transition: all 0.2s;\n padding: 0 16px;\n text-align: right;\n\n ",
|
|
30
30
|
";\n\n ",
|
|
31
31
|
";\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
|
|
32
32
|
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
33
|
-
}, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, media.mobile(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 1.6rem;\n "], ["\n font-size: 1.6rem;\n "]))), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1.4rem;\n "], ["\n font-size: 1.4rem;\n "]))), Colors.Grey4);
|
|
33
|
+
}, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, function (props) { return props.inputWidth ? "90px" : "40px"; }, media.mobile(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 1.6rem;\n "], ["\n font-size: 1.6rem;\n "]))), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1.4rem;\n "], ["\n font-size: 1.4rem;\n "]))), Colors.Grey4);
|
|
34
34
|
var IconText = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 1.4rem;\n font-weight: 600;\n color: ", ";\n"], ["\n font-size: 1.4rem;\n font-weight: 600;\n color: ", ";\n"])), Colors.Grey3);
|
|
35
35
|
function Input(_a) {
|
|
36
|
-
var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, _b = _a.format, format = _b === void 0 ? InputFormats.Price : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
36
|
+
var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, _b = _a.format, format = _b === void 0 ? InputFormats.Price : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, width = _a.width, inputWidth = _a.inputWidth, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
37
37
|
var _f = useState(false), hovered = _f[0], setHovered = _f[1];
|
|
38
38
|
var _g = useState(false), focused = _g[0], setFocused = _g[1];
|
|
39
39
|
var submit = function (event) {
|
|
@@ -53,7 +53,7 @@ function Input(_a) {
|
|
|
53
53
|
: true, disabled: disabled },
|
|
54
54
|
format === InputFormats.Price && (React.createElement(PriceContainer, null,
|
|
55
55
|
React.createElement(Icon, { icon: Icons.Dollar, size: 14, color: Colors.Grey3 }))),
|
|
56
|
-
React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: function (e) {
|
|
56
|
+
React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, inputWidth: inputWidth, onChange: function (e) {
|
|
57
57
|
if (maxLength && e.currentTarget.value.length > maxLength) ;
|
|
58
58
|
else {
|
|
59
59
|
onChange(e);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.191",
|
|
4
4
|
"main": "build/index.js",
|
|
5
5
|
"module": "build/index.es.js",
|
|
6
6
|
"files": [
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"shortid": "^2.2.16",
|
|
71
71
|
"use-places-autocomplete": "^1.9.4"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "f1d1dfb34d00bc1199a5da8b1a2dc6c746140d9c",
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^16.13.0",
|
|
76
76
|
"react-dom": "^16.13.0",
|