@sellout/ui 0.0.219 → 0.0.220
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/build/components/Input.d.ts +10 -0
- package/build/components/Input.js +31 -22
- package/package.json +2 -2
|
@@ -4,6 +4,13 @@ export declare enum InputSizes {
|
|
|
4
4
|
Large = "Large",
|
|
5
5
|
Regular = "Regular"
|
|
6
6
|
}
|
|
7
|
+
declare type StyledInputProps = {
|
|
8
|
+
padding?: string;
|
|
9
|
+
inputSize?: InputSizes;
|
|
10
|
+
disabled: boolean;
|
|
11
|
+
hasIcon: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const InputStyled: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
|
|
7
14
|
export declare type InputProps = {
|
|
8
15
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
9
16
|
autoFocus?: boolean | undefined;
|
|
@@ -34,6 +41,9 @@ export declare type InputProps = {
|
|
|
34
41
|
iconConditionalColor?: any;
|
|
35
42
|
validationError?: string;
|
|
36
43
|
disabled?: boolean;
|
|
44
|
+
incrementButton?: boolean;
|
|
45
|
+
handleIncrement?: any;
|
|
46
|
+
handleDecrement?: any;
|
|
37
47
|
};
|
|
38
48
|
declare const _default: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
|
|
39
49
|
export default _default;
|
|
@@ -17,15 +17,22 @@ var InputSizes;
|
|
|
17
17
|
InputSizes["Regular"] = "Regular";
|
|
18
18
|
})(InputSizes || (InputSizes = {}));
|
|
19
19
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n margin: ", ";\n"], ["\n width: ", ";\n margin: ", ";\n"])), function (props) { return props.width; }, function (props) { return props.margin; });
|
|
20
|
-
var
|
|
21
|
-
";\n overflow: hidden;\n background-color: ", ";\n\n > * {\n background-color: ", ";\n }\n"]
|
|
20
|
+
var IncrementButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 22px;\n padding: 5px 14px;\n cursor: pointer;\n border: none;\n background-color: #f0f0f0;\n"], ["\n font-size: 22px;\n padding: 5px 14px;\n cursor: pointer;\n border: none;\n background-color: #f0f0f0;\n"])));
|
|
21
|
+
var Form = styled.form(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n overflow: hidden;\n background-color: ", ";\n\n > * {\n background-color: ", ";\n }\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
|
|
22
|
+
";\n overflow: hidden;\n background-color: ",
|
|
23
|
+
";\n\n > * {\n background-color: ",
|
|
24
|
+
";\n }\n"])), function (props) { return props.width; }, function (props) {
|
|
22
25
|
if (props.focused)
|
|
23
26
|
return Colors.Grey4;
|
|
24
27
|
if (props.hovered)
|
|
25
28
|
return darken(0.05, Colors.Grey5);
|
|
26
29
|
return Colors.Grey5;
|
|
27
|
-
}, function (props) {
|
|
28
|
-
|
|
30
|
+
}, function (props) {
|
|
31
|
+
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
34
|
+
});
|
|
35
|
+
var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 0 10px 10px 0;\n top: -1px;\n right: -1px;\n transition: all 0.2s;\n\n &:hover {\n cursor: ", ";\n }\n\n &:active {\n cursor: ", ";\n }\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n height: ",
|
|
29
36
|
";\n width: ",
|
|
30
37
|
";\n border-radius: 0 10px 10px 0;\n top: -1px;\n right: -1px;\n transition: all 0.2s;\n\n &:hover {\n cursor: ", ";\n }\n\n &:active {\n cursor: ", ";\n }\n"])), Colors.White, function (props) {
|
|
31
38
|
if (props.size === InputSizes.Large)
|
|
@@ -40,9 +47,9 @@ var Button = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateOb
|
|
|
40
47
|
return "40px";
|
|
41
48
|
return null;
|
|
42
49
|
}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) { return (props.onClick ? "pointer" : null); });
|
|
43
|
-
var IconContainer = styled.div(
|
|
44
|
-
var LeftContainer = styled.div(
|
|
45
|
-
var RightContainer = styled.div(
|
|
50
|
+
var IconContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n"])));
|
|
51
|
+
var LeftContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"])), Colors.White);
|
|
52
|
+
var RightContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n width: ", ";\n top: -1px;\n right: -1px;\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n }\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ",
|
|
46
53
|
";\n width: ",
|
|
47
54
|
";\n top: -1px;\n right: -1px;\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
|
|
48
55
|
if (props.size === InputSizes.Large)
|
|
@@ -57,21 +64,21 @@ var RightContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTe
|
|
|
57
64
|
return "40px";
|
|
58
65
|
return null;
|
|
59
66
|
}, Colors.White, function (props) { return (props.onClick ? "pointer" : null); });
|
|
60
|
-
var Spacer = styled.div(
|
|
61
|
-
var InputStyled = styled.input(
|
|
67
|
+
var Spacer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n background-color: ", ";\n"], ["\n width: ", ";\n background-color: ", ";\n"])), function (props) { return (props.incrementButton ? "0px" : "50px"); }, Colors.White);
|
|
68
|
+
var InputStyled = styled.input(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ", ";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ",
|
|
62
69
|
";\n width: fill-available;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ",
|
|
63
70
|
";\n\n ",
|
|
64
|
-
";\n"])), Colors.White, function (props) { return props.disabled ? Colors.Grey4 : Colors.Grey1; }, function (props) {
|
|
71
|
+
";\n"])), Colors.White, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, function (props) {
|
|
65
72
|
if (props.inputSize === InputSizes.Large)
|
|
66
73
|
return "48px";
|
|
67
74
|
if (props.inputSize === InputSizes.Regular)
|
|
68
75
|
return "38px";
|
|
69
76
|
return null;
|
|
70
|
-
}, function (props) { return props.hasIcon ?
|
|
77
|
+
}, function (props) { return (props.hasIcon ? "8px" : "16px"); }, function (props) { return props.padding; }, Colors.Grey4, media.mobile(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 1.6rem;\n"], ["\n font-size: 1.6rem;\n"]))), media.desktop(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1.4rem;\n"], ["\n font-size: 1.4rem;\n"]))));
|
|
71
78
|
function Input(_a, inputRef) {
|
|
72
|
-
var autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, iconColor = _a.iconColor, _b = _a.size, size = _b === void 0 ? InputSizes.Regular : _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, onClear = _a.onClear, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, iconConditionalColor = _a.iconConditionalColor, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
73
|
-
var
|
|
74
|
-
var
|
|
79
|
+
var autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, iconColor = _a.iconColor, _b = _a.size, size = _b === void 0 ? InputSizes.Regular : _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, onClear = _a.onClear, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, iconConditionalColor = _a.iconConditionalColor, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.incrementButton, incrementButton = _f === void 0 ? false : _f, handleIncrement = _a.handleIncrement, handleDecrement = _a.handleDecrement;
|
|
80
|
+
var _g = useState(false), hovered = _g[0], setHovered = _g[1];
|
|
81
|
+
var _h = useState(false), focused = _h[0], setFocused = _h[1];
|
|
75
82
|
var submit = function (event) {
|
|
76
83
|
event.preventDefault();
|
|
77
84
|
if (onSubmit && canSubmit && !loading) {
|
|
@@ -98,7 +105,7 @@ function Input(_a, inputRef) {
|
|
|
98
105
|
return (React.createElement(Container, { width: width, margin: margin },
|
|
99
106
|
React.createElement(Flex, { justify: "space-between" },
|
|
100
107
|
label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
|
|
101
|
-
maxLength && React.createElement(MaxLength, { value: value, maxLength: maxLength })),
|
|
108
|
+
maxLength && (React.createElement(MaxLength, { value: value, maxLength: maxLength }))),
|
|
102
109
|
React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width, disabled: disabled, noValidate // disables default html5 validation
|
|
103
110
|
: true },
|
|
104
111
|
icon && (React.createElement(LeftContainer, { size: size },
|
|
@@ -112,6 +119,7 @@ function Input(_a, inputRef) {
|
|
|
112
119
|
? Colors.Grey3
|
|
113
120
|
: Colors.Grey4;
|
|
114
121
|
})() })))),
|
|
122
|
+
incrementButton && (React.createElement(IncrementButton, { onClick: handleDecrement }, "-")),
|
|
115
123
|
React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: function (e) {
|
|
116
124
|
if (maxLength && e.currentTarget.value.length > maxLength) ;
|
|
117
125
|
else {
|
|
@@ -134,35 +142,36 @@ function Input(_a, inputRef) {
|
|
|
134
142
|
if (onMouseLeave)
|
|
135
143
|
onMouseLeave(event);
|
|
136
144
|
}, padding: padding, inputSize: size, hasIcon: Boolean(icon) }),
|
|
145
|
+
incrementButton && (React.createElement(IncrementButton, { onClick: handleIncrement }, "+")),
|
|
137
146
|
(function () {
|
|
138
147
|
if (onSubmit) {
|
|
139
148
|
return (React.createElement(Fragment, null,
|
|
140
|
-
React.createElement(Spacer,
|
|
149
|
+
React.createElement(Spacer, { incrementButton: true }),
|
|
141
150
|
React.createElement(Button, { canSubmit: canSubmit, onClick: function (event) { return submit(event); }, size: size }, (function () {
|
|
142
151
|
if (loading) {
|
|
143
|
-
return React.createElement(Loader, { size: LoaderSizes.VerySmall, color: Colors.Orange });
|
|
152
|
+
return (React.createElement(Loader, { size: LoaderSizes.VerySmall, color: Colors.Orange }));
|
|
144
153
|
}
|
|
145
154
|
return (React.createElement(Icon, { icon: Icons.RightChevronCircle, color: canSubmit ? Colors.Orange : Colors.Grey5, size: submitIconSize }));
|
|
146
155
|
})())));
|
|
147
156
|
}
|
|
148
157
|
if (loading) {
|
|
149
158
|
return (React.createElement(Fragment, null,
|
|
150
|
-
React.createElement(Spacer,
|
|
159
|
+
React.createElement(Spacer, { incrementButton: true }),
|
|
151
160
|
React.createElement(RightContainer, { size: size },
|
|
152
161
|
React.createElement(Loader, { size: LoaderSizes.SuperSmall, color: Colors.Orange }))));
|
|
153
162
|
}
|
|
154
163
|
if (Boolean(value) && onClear) {
|
|
155
164
|
return (React.createElement(Fragment, null,
|
|
156
|
-
React.createElement(Spacer,
|
|
165
|
+
React.createElement(Spacer, { incrementButton: true }),
|
|
157
166
|
React.createElement(RightContainer, { onClick: function () { return onClear(); }, size: size },
|
|
158
167
|
React.createElement(Icon, { icon: Icons.CancelCircle, color: Colors.Grey4, hoverColor: Colors.Grey3, size: iconSize }))));
|
|
159
168
|
}
|
|
160
|
-
return React.createElement(Spacer,
|
|
169
|
+
return React.createElement(Spacer, { incrementButton: true });
|
|
161
170
|
})()),
|
|
162
171
|
validationError && React.createElement(ValidationError, { validationError: validationError })));
|
|
163
172
|
}
|
|
164
173
|
var Input$1 = React.forwardRef(Input);
|
|
165
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
174
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
166
175
|
|
|
167
176
|
export default Input$1;
|
|
168
|
-
export { InputSizes };
|
|
177
|
+
export { InputSizes, InputStyled };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.220",
|
|
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": "cc8382758037a900697051593e6cf20d21ae0b6e",
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^16.13.0",
|
|
76
76
|
"react-dom": "^16.13.0",
|