@sellout/ui 0.0.63 → 0.0.65
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.
|
@@ -18,6 +18,7 @@ export declare type ButtonProps = {
|
|
|
18
18
|
type?: ButtonTypes;
|
|
19
19
|
state?: ButtonStates;
|
|
20
20
|
bgColor?: Colors;
|
|
21
|
+
textColor?: Colors;
|
|
21
22
|
text?: string;
|
|
22
23
|
onClick?: any;
|
|
23
24
|
icon?: any;
|
|
@@ -29,4 +30,4 @@ export declare type ButtonProps = {
|
|
|
29
30
|
tip?: string;
|
|
30
31
|
subLabel?: string;
|
|
31
32
|
};
|
|
32
|
-
export default function Button({ type, state, bgColor, text, onClick, icon, iconPosition, iconSize, margin, loading, }: ButtonProps): JSX.Element;
|
|
33
|
+
export default function Button({ type, state, bgColor, textColor, text, onClick, icon, iconPosition, iconSize, margin, loading, }: ButtonProps): JSX.Element;
|
|
@@ -93,7 +93,7 @@ var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
|
|
|
93
93
|
if (props.state === ButtonStates.Warning) {
|
|
94
94
|
return Colors.White;
|
|
95
95
|
}
|
|
96
|
-
return lighten(0.
|
|
96
|
+
return lighten(0.025, props.bgColor || Colors.Orange);
|
|
97
97
|
}, function (props) {
|
|
98
98
|
if (props.state === ButtonStates.Disabled) {
|
|
99
99
|
return null;
|
|
@@ -106,7 +106,7 @@ var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
|
|
|
106
106
|
if (props.state === ButtonStates.Warning) {
|
|
107
107
|
return Colors.White;
|
|
108
108
|
}
|
|
109
|
-
return darken(0.
|
|
109
|
+
return darken(0.025, props.bgColor || Colors.Orange);
|
|
110
110
|
});
|
|
111
111
|
var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n font-size: ", ";\n font-weight: ", ";\n text-transform: uppercase;\n margin: ", ";\n color: ", ";\n top: ", ";\n"], ["\n position: relative;\n font-size: ",
|
|
112
112
|
";\n font-weight: ",
|
|
@@ -132,7 +132,8 @@ var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObj
|
|
|
132
132
|
return "700";
|
|
133
133
|
}
|
|
134
134
|
if (props.type === ButtonTypes.Regular) {
|
|
135
|
-
return "
|
|
135
|
+
return "600";
|
|
136
|
+
// return "700";
|
|
136
137
|
}
|
|
137
138
|
if (props.type === ButtonTypes.Thin) {
|
|
138
139
|
return "600";
|
|
@@ -162,13 +163,14 @@ var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObj
|
|
|
162
163
|
}
|
|
163
164
|
return null;
|
|
164
165
|
}, function (props) {
|
|
165
|
-
if (props.state
|
|
166
|
-
|
|
167
|
-
|
|
166
|
+
if (props.state)
|
|
167
|
+
if (props.state === ButtonStates.Disabled) {
|
|
168
|
+
return Colors.Grey3;
|
|
169
|
+
}
|
|
168
170
|
if (props.state === ButtonStates.Warning) {
|
|
169
171
|
return Colors.Grey3;
|
|
170
172
|
}
|
|
171
|
-
return Colors.White;
|
|
173
|
+
return props.textColor || Colors.White;
|
|
172
174
|
}, function (props) {
|
|
173
175
|
if (props.type === ButtonTypes.Thin) {
|
|
174
176
|
if (props.icon) {
|
|
@@ -179,7 +181,7 @@ var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObj
|
|
|
179
181
|
return null;
|
|
180
182
|
});
|
|
181
183
|
function Button(_a) {
|
|
182
|
-
var _b = _a.type, type = _b === void 0 ? ButtonTypes.Next : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, bgColor = _a.bgColor, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, iconPosition = _a.iconPosition, _e = _a.iconSize, iconSize = _e === void 0 ? 14 : _e,
|
|
184
|
+
var _b = _a.type, type = _b === void 0 ? ButtonTypes.Next : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, bgColor = _a.bgColor, textColor = _a.textColor, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, iconPosition = _a.iconPosition, _e = _a.iconSize, iconSize = _e === void 0 ? 14 : _e,
|
|
183
185
|
// label,
|
|
184
186
|
// tip,
|
|
185
187
|
// subLabel,
|
|
@@ -198,7 +200,7 @@ function Button(_a) {
|
|
|
198
200
|
}
|
|
199
201
|
return (React.createElement(Fragment, null,
|
|
200
202
|
icon && iconPosition === ButtonIconPosition.Left && iconEl,
|
|
201
|
-
text && (React.createElement(Text, { type: type, state: state, icon: Boolean(icon), iconPosition: iconPosition }, text)),
|
|
203
|
+
text && (React.createElement(Text, { type: type, state: state, icon: Boolean(icon), iconPosition: iconPosition, textColor: textColor }, text)),
|
|
202
204
|
icon &&
|
|
203
205
|
iconPosition === ButtonIconPosition.Right && iconEl));
|
|
204
206
|
})()));
|
|
@@ -37,8 +37,8 @@ var Dropdown = function (_a) {
|
|
|
37
37
|
icon && icon,
|
|
38
38
|
React.createElement(Value, null, value)),
|
|
39
39
|
React.createElement(Icon, { icon: Icons.Sort, size: 12, color: Colors.Grey1 })),
|
|
40
|
-
React.createElement(ItemsContainer, { open: open, height: items.length > 3 ? "120px" : items.length * 30 + "px" }, items === null || items === void 0 ? void 0 : items.map(function (item) {
|
|
41
|
-
return (React.createElement(Item, { key:
|
|
40
|
+
React.createElement(ItemsContainer, { open: open, height: items.length > 3 ? "120px" : items.length * 30 + "px" }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
41
|
+
return (React.createElement(Item, { key: index, selected: false, onClick: function () { return onChange(item.value); } },
|
|
42
42
|
item.icon && item.icon,
|
|
43
43
|
item.text));
|
|
44
44
|
})))));
|
|
@@ -13,14 +13,15 @@ var PhoneNumberInputSizes;
|
|
|
13
13
|
PhoneNumberInputSizes["Large"] = "Large";
|
|
14
14
|
PhoneNumberInputSizes["Regular"] = "Regular";
|
|
15
15
|
})(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
|
|
16
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.margin; });
|
|
16
17
|
// overwrite the preset style imports
|
|
17
|
-
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ", ";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color: ", ";\n }\n }\n }\n\n input[disabled] {\n &+.flag-dropdown {\n &:hover {\n cursor: default;\n .selected-flag {\n background-color: transparent;\n }\n }\n }\n }\n\n .selected-flag {\n transition: all 0.2s;\n background: ", ";\n position: relative;\n width: 50px;\n height: 100%;\n padding: 0 0 0 10px;\n border-radius: 10px 0 0 10px;\n .flag {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n }\n .arrow {\n position: relative;\n top: 50%;\n margin-top: -2px;\n left: 25px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid #555;\n &.up {\n border-top: none;\n border-bottom: 4px solid #555;\n }\n }\n &.open {\n z-index: 2;\n }\n }\n\n .country-list {\n z-index: 2;\n border-radius: 0 0 10px 10px;\n border: 1px solid ", ";\n border-top: none;\n list-style: none;\n position: absolute;\n padding: 0;\n margin: 0px 0 10px -1px;\n box-shadow: unset;\n background-color: ", ";\n width: calc(100% + 2px);\n max-height: ", ";\n overflow-y: scroll;\n .flag {\n display: inline-block;\n }\n .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid #ccc;\n }\n .country {\n padding: 7px 9px;\n .dial-code {\n color: #6b6b6b;\n }\n &:hover {\n background-color: #f1f1f1;\n }\n &.highlight {\n background-color: #f1f1f1;\n }\n }\n .flag {\n margin-right: 7px;\n margin-top: 2px;\n }\n .country-name {\n margin-right: 6px;\n }\n .search {\n position: sticky;\n top: 0;\n background-color: #fff;\n padding: 5px 0 6px 10px;\n }\n .search-emoji {\n display: none;\n font-size: ", ";\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ", ";\n line-height: 15px;\n padding: 3px 8px 5px;\n outline: none;\n }\n .no-entries-message {\n padding: 7px 10px 11px;\n opacity: .7;\n }\n &::-webkit-scrollbar { width: 12px; }\n &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n }\n\n .invalid-number-message {\n position: absolute;\n z-index: 1;\n font-size: ", ";\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n"], ["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ", ";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color: ", ";\n }\n }\n }\n\n input[disabled] {\n &+.flag-dropdown {\n &:hover {\n cursor: default;\n .selected-flag {\n background-color: transparent;\n }\n }\n }\n }\n\n .selected-flag {\n transition: all 0.2s;\n background: ", ";\n position: relative;\n width: 50px;\n height: 100%;\n padding: 0 0 0 10px;\n border-radius: 10px 0 0 10px;\n .flag {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n }\n .arrow {\n position: relative;\n top: 50%;\n margin-top: -2px;\n left: 25px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid #555;\n &.up {\n border-top: none;\n border-bottom: 4px solid #555;\n }\n }\n &.open {\n z-index: 2;\n }\n }\n\n .country-list {\n z-index: 2;\n border-radius: 0 0 10px 10px;\n border: 1px solid ", ";\n border-top: none;\n list-style: none;\n position: absolute;\n padding: 0;\n margin: 0px 0 10px -1px;\n box-shadow: unset;\n background-color: ", ";\n width: calc(100% + 2px);\n max-height: ", ";\n overflow-y: scroll;\n .flag {\n display: inline-block;\n }\n .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid #ccc;\n }\n .country {\n padding: 7px 9px;\n .dial-code {\n color: #6b6b6b;\n }\n &:hover {\n background-color: #f1f1f1;\n }\n &.highlight {\n background-color: #f1f1f1;\n }\n }\n .flag {\n margin-right: 7px;\n margin-top: 2px;\n }\n .country-name {\n margin-right: 6px;\n }\n .search {\n position: sticky;\n top: 0;\n background-color: #fff;\n padding: 5px 0 6px 10px;\n }\n .search-emoji {\n display: none;\n font-size: ", ";\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ", ";\n line-height: 15px;\n padding: 3px 8px 5px;\n outline: none;\n }\n .no-entries-message {\n padding: 7px 10px 11px;\n opacity: .7;\n }\n &::-webkit-scrollbar { width: 12px; }\n &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n }\n\n .invalid-number-message {\n position: absolute;\n z-index: 1;\n font-size: ", ";\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n"])), function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.Grey1, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.White, Colors.Grey5, function (props) { return props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '48px'; }, Colors.Grey5, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey4, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey5, Colors.White, function (props) { return props.isMobile ? '180px' : '200px'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; });
|
|
18
|
+
var InnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ", ";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color: ", ";\n }\n }\n }\n\n input[disabled] {\n &+.flag-dropdown {\n &:hover {\n cursor: default;\n .selected-flag {\n background-color: transparent;\n }\n }\n }\n }\n\n .selected-flag {\n transition: all 0.2s;\n background: ", ";\n position: relative;\n width: 50px;\n height: 100%;\n padding: 0 0 0 10px;\n border-radius: 10px 0 0 10px;\n .flag {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n }\n .arrow {\n position: relative;\n top: 50%;\n margin-top: -2px;\n left: 25px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid #555;\n &.up {\n border-top: none;\n border-bottom: 4px solid #555;\n }\n }\n &.open {\n z-index: 2;\n }\n }\n\n .country-list {\n z-index: 2;\n border-radius: 0 0 10px 10px;\n border: 1px solid ", ";\n border-top: none;\n list-style: none;\n position: absolute;\n padding: 0;\n margin: 0px 0 10px -1px;\n box-shadow: unset;\n background-color: ", ";\n width: calc(100% + 2px);\n max-height: ", ";\n overflow-y: scroll;\n .flag {\n display: inline-block;\n }\n .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid #ccc;\n }\n .country {\n padding: 7px 9px;\n .dial-code {\n color: #6b6b6b;\n }\n &:hover {\n background-color: #f1f1f1;\n }\n &.highlight {\n background-color: #f1f1f1;\n }\n }\n .flag {\n margin-right: 7px;\n margin-top: 2px;\n }\n .country-name {\n margin-right: 6px;\n }\n .search {\n position: sticky;\n top: 0;\n background-color: #fff;\n padding: 5px 0 6px 10px;\n }\n .search-emoji {\n display: none;\n font-size: ", ";\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ", ";\n line-height: 15px;\n padding: 3px 8px 5px;\n outline: none;\n }\n .no-entries-message {\n padding: 7px 10px 11px;\n opacity: .7;\n }\n &::-webkit-scrollbar { width: 12px; }\n &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n }\n\n .invalid-number-message {\n position: absolute;\n z-index: 1;\n font-size: ", ";\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n"], ["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ", ";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color: ", ";\n }\n }\n }\n\n input[disabled] {\n &+.flag-dropdown {\n &:hover {\n cursor: default;\n .selected-flag {\n background-color: transparent;\n }\n }\n }\n }\n\n .selected-flag {\n transition: all 0.2s;\n background: ", ";\n position: relative;\n width: 50px;\n height: 100%;\n padding: 0 0 0 10px;\n border-radius: 10px 0 0 10px;\n .flag {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n }\n .arrow {\n position: relative;\n top: 50%;\n margin-top: -2px;\n left: 25px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid #555;\n &.up {\n border-top: none;\n border-bottom: 4px solid #555;\n }\n }\n &.open {\n z-index: 2;\n }\n }\n\n .country-list {\n z-index: 2;\n border-radius: 0 0 10px 10px;\n border: 1px solid ", ";\n border-top: none;\n list-style: none;\n position: absolute;\n padding: 0;\n margin: 0px 0 10px -1px;\n box-shadow: unset;\n background-color: ", ";\n width: calc(100% + 2px);\n max-height: ", ";\n overflow-y: scroll;\n .flag {\n display: inline-block;\n }\n .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid #ccc;\n }\n .country {\n padding: 7px 9px;\n .dial-code {\n color: #6b6b6b;\n }\n &:hover {\n background-color: #f1f1f1;\n }\n &.highlight {\n background-color: #f1f1f1;\n }\n }\n .flag {\n margin-right: 7px;\n margin-top: 2px;\n }\n .country-name {\n margin-right: 6px;\n }\n .search {\n position: sticky;\n top: 0;\n background-color: #fff;\n padding: 5px 0 6px 10px;\n }\n .search-emoji {\n display: none;\n font-size: ", ";\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ", ";\n line-height: 15px;\n padding: 3px 8px 5px;\n outline: none;\n }\n .no-entries-message {\n padding: 7px 10px 11px;\n opacity: .7;\n }\n &::-webkit-scrollbar { width: 12px; }\n &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n }\n\n .invalid-number-message {\n position: absolute;\n z-index: 1;\n font-size: ", ";\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n"])), function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.Grey1, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.White, Colors.Grey5, function (props) { return props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '48px'; }, Colors.Grey5, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey4, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey5, Colors.White, function (props) { return props.isMobile ? '180px' : '200px'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; });
|
|
18
19
|
var PhoneNumberInput = function (_a) {
|
|
19
|
-
var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label;
|
|
20
|
-
return (React.createElement(
|
|
20
|
+
var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label, margin = _a.margin;
|
|
21
|
+
return (React.createElement(Container, { margin: margin },
|
|
21
22
|
label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
|
|
22
|
-
React.createElement(
|
|
23
|
-
React.createElement(PhoneInput, { country:
|
|
23
|
+
React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize },
|
|
24
|
+
React.createElement(PhoneInput, { country: "us", placeholder: "Enter your mobile phone number", preferredCountries: ["us", "ca"], value: value, onKeyDown: function (e) {
|
|
24
25
|
// quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
|
|
25
26
|
if ((e.which === 8 || e.which === 46) && value.length <= 1) {
|
|
26
27
|
e.preventDefault();
|
|
@@ -33,7 +34,7 @@ var PhoneNumberInput = function (_a) {
|
|
|
33
34
|
}, countryCodeEditable: false }),
|
|
34
35
|
validationError && (React.createElement(ValidationError, { validationError: validationError })))));
|
|
35
36
|
};
|
|
36
|
-
var templateObject_1;
|
|
37
|
+
var templateObject_1, templateObject_2;
|
|
37
38
|
|
|
38
39
|
export default PhoneNumberInput;
|
|
39
40
|
export { PhoneNumberInputSizes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.65",
|
|
4
4
|
"main": "build/index.js",
|
|
5
5
|
"module": "build/index.es.js",
|
|
6
6
|
"files": [
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"rollup-plugin-multi-input": "^1.1.1",
|
|
37
37
|
"rollup-plugin-node-resolve": "^5.2.0",
|
|
38
38
|
"rollup-plugin-peer-deps-external": "^2.2.0",
|
|
39
|
+
"rollup-plugin-svg": "^2.0.0",
|
|
39
40
|
"rollup-plugin-typescript2": "^0.25.3",
|
|
40
41
|
"standard": "^14.3.1",
|
|
41
42
|
"ts-jest": "^24.2.0",
|
|
@@ -51,7 +52,7 @@
|
|
|
51
52
|
"@fortawesome/pro-solid-svg-icons": "^5.12.1",
|
|
52
53
|
"@fortawesome/react-fontawesome": "^0.1.9",
|
|
53
54
|
"@hapi/joi": "^17.1.1",
|
|
54
|
-
"@sellout/utils": "^0.0.
|
|
55
|
+
"@sellout/utils": "^0.0.65",
|
|
55
56
|
"@types/escape-html": "^1.0.0",
|
|
56
57
|
"@types/hapi__joi": "^16.0.12",
|
|
57
58
|
"csvtojson": "^2.0.10",
|
|
@@ -60,7 +61,7 @@
|
|
|
60
61
|
"react-animate-height": "^2.0.20",
|
|
61
62
|
"react-phone-input-2": "^2.13.7"
|
|
62
63
|
},
|
|
63
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "3583bb33aa76ed973c7253a31eeb39d3f1206f36",
|
|
64
65
|
"peerDependencies": {
|
|
65
66
|
"react": "^16.13.0",
|
|
66
67
|
"react-dom": "^16.13.0",
|