@sellout/ui 0.0.233 → 0.0.234
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 +1 -0
- package/build/components/Input.js +15 -12
- package/package.json +2 -2
|
@@ -44,6 +44,7 @@ export declare type InputProps = {
|
|
|
44
44
|
incrementButton?: boolean;
|
|
45
45
|
handleIncrement?: any;
|
|
46
46
|
handleDecrement?: any;
|
|
47
|
+
codeApply?: string;
|
|
47
48
|
};
|
|
48
49
|
declare const _default: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
|
|
49
50
|
export default _default;
|
|
@@ -32,9 +32,9 @@ var Form = styled.form(templateObject_3 || (templateObject_3 = __makeTemplateObj
|
|
|
32
32
|
}, function (props) {
|
|
33
33
|
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
34
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:
|
|
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: ", ";\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: ",
|
|
36
36
|
";\n width: ",
|
|
37
|
-
";\n border-radius: 0 10px 10px 0;\n top: -1px;\n right:
|
|
37
|
+
";\n border-radius: 0 10px 10px 0;\n top: -1px;\n right: ", ";\n transition: all 0.2s;\n\n &:hover {\n cursor: ", ";\n }\n\n &:active {\n cursor: ", ";\n }\n"])), Colors.White, function (props) {
|
|
38
38
|
if (props.size === InputSizes.Large)
|
|
39
39
|
return "50px";
|
|
40
40
|
if (props.size === InputSizes.Regular)
|
|
@@ -46,10 +46,11 @@ var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateOb
|
|
|
46
46
|
if (props.size === InputSizes.Regular)
|
|
47
47
|
return "40px";
|
|
48
48
|
return null;
|
|
49
|
-
}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) { return (props.onClick ? "pointer" : null); });
|
|
49
|
+
}, function (props) { return props.codeApply ? "17px" : "-1px"; }, function (props) { return (props.onClick ? "pointer" : null); }, function (props) { return (props.onClick ? "pointer" : null); });
|
|
50
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
|
|
52
|
-
var
|
|
51
|
+
var TextContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n font-size: 1.7rem;\n text-decoration: underline;\n font-weight: 500;\n"], ["\n color: ", ";\n font-size: 1.7rem;\n text-decoration: underline;\n font-weight: 500;\n"])), function (props) { return (props.canSubmit ? Colors.Orange : Colors.Grey5); });
|
|
52
|
+
var LeftContainer = styled.div(templateObject_7 || (templateObject_7 = __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);
|
|
53
|
+
var RightContainer = styled.div(templateObject_8 || (templateObject_8 = __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: ",
|
|
53
54
|
";\n width: ",
|
|
54
55
|
";\n top: -1px;\n right: -1px;\n background-color: ", ";\n\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
|
|
55
56
|
if (props.size === InputSizes.Large)
|
|
@@ -64,8 +65,8 @@ var RightContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTe
|
|
|
64
65
|
return "40px";
|
|
65
66
|
return null;
|
|
66
67
|
}, Colors.White, function (props) { return (props.onClick ? "pointer" : null); });
|
|
67
|
-
var Spacer = styled.div(
|
|
68
|
-
var InputStyled = styled.input(
|
|
68
|
+
var Spacer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: ", ";\n background-color: ", ";\n"], ["\n width: ", ";\n background-color: ", ";\n"])), function (props) { return (props.incrementButton ? "0px" : "50px"); }, Colors.White);
|
|
69
|
+
var InputStyled = styled.input(templateObject_12 || (templateObject_12 = __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: ",
|
|
69
70
|
";\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 ",
|
|
70
71
|
";\n\n ",
|
|
71
72
|
";\n"])), Colors.White, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, function (props) {
|
|
@@ -74,9 +75,9 @@ var InputStyled = styled.input(templateObject_11 || (templateObject_11 = __makeT
|
|
|
74
75
|
if (props.inputSize === InputSizes.Regular)
|
|
75
76
|
return "38px";
|
|
76
77
|
return null;
|
|
77
|
-
}, function (props) { return (props.hasIcon ? "8px" : "16px"); }, function (props) { return props.padding; }, Colors.Grey4, media.mobile(
|
|
78
|
+
}, function (props) { return (props.hasIcon ? "8px" : "16px"); }, function (props) { return props.padding; }, Colors.Grey4, media.mobile(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1.6rem;\n"], ["\n font-size: 1.6rem;\n"]))), media.desktop(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 1.4rem;\n"], ["\n font-size: 1.4rem;\n"]))));
|
|
78
79
|
function Input(_a, inputRef) {
|
|
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 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, codeApply = _a.codeApply;
|
|
80
81
|
var _g = useState(false), hovered = _g[0], setHovered = _g[1];
|
|
81
82
|
var _h = useState(false), focused = _h[0], setFocused = _h[1];
|
|
82
83
|
var submit = function (event) {
|
|
@@ -147,11 +148,13 @@ function Input(_a, inputRef) {
|
|
|
147
148
|
if (onSubmit) {
|
|
148
149
|
return (React.createElement(Fragment, null,
|
|
149
150
|
React.createElement(Spacer, { incrementButton: true }),
|
|
150
|
-
React.createElement(Button, { canSubmit: canSubmit, onClick: function (event) { return submit(event); }, size: size }, (function () {
|
|
151
|
+
React.createElement(Button, { canSubmit: canSubmit, onClick: function (event) { return submit(event); }, size: size, codeApply: codeApply }, (function () {
|
|
151
152
|
if (loading) {
|
|
152
153
|
return (React.createElement(Loader, { size: LoaderSizes.VerySmall, color: Colors.Orange }));
|
|
153
154
|
}
|
|
154
|
-
return (React.createElement(
|
|
155
|
+
return (React.createElement(React.Fragment, null,
|
|
156
|
+
!codeApply && React.createElement(Icon, { icon: Icons.RightChevronCircle, color: canSubmit ? Colors.Orange : Colors.Grey5, size: submitIconSize }),
|
|
157
|
+
codeApply && React.createElement(TextContainer, { canSubmit: canSubmit }, "Apply")));
|
|
155
158
|
})())));
|
|
156
159
|
}
|
|
157
160
|
if (loading) {
|
|
@@ -171,7 +174,7 @@ function Input(_a, inputRef) {
|
|
|
171
174
|
validationError && React.createElement(ValidationError, { validationError: validationError })));
|
|
172
175
|
}
|
|
173
176
|
var Input$1 = React.forwardRef(Input);
|
|
174
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
177
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
175
178
|
|
|
176
179
|
export default Input$1;
|
|
177
180
|
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.234",
|
|
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": "8c0c87219fd27dd61bcb991e9da0f4c10b51f662",
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^16.13.0",
|
|
76
76
|
"react-dom": "^16.13.0",
|