@sellout/ui 0.0.289 → 0.0.291
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.
|
@@ -15,13 +15,16 @@ var PhoneNumberInputSizes;
|
|
|
15
15
|
})(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
|
|
16
16
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.margin; });
|
|
17
17
|
// overwrite the preset style imports
|
|
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
|
+
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 background-color: ", ";\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 background-color: ",
|
|
19
|
+
";\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'; }, function (props) {
|
|
20
|
+
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
21
|
+
}, 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'; });
|
|
19
22
|
var PhoneNumberInput = function (_a) {
|
|
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, autoFocus = _a.autoFocus;
|
|
23
|
+
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, autoFocus = _a.autoFocus, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
21
24
|
return (React.createElement(Container, { margin: margin },
|
|
22
25
|
label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
|
|
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) {
|
|
26
|
+
React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize, disabled: disabled },
|
|
27
|
+
React.createElement(PhoneInput, { country: "us", disabled: disabled, placeholder: "Enter your mobile phone number", preferredCountries: ["us", "ca"], value: value, onKeyDown: function (e) {
|
|
25
28
|
// quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
|
|
26
29
|
if ((e.which === 8 || e.which === 46) && value.length <= 1) {
|
|
27
30
|
e.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/components/PhoneNumberInput.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport PhoneInput from 'react-phone-input-2';\nimport \"react-phone-input-2/lib/semantic-ui.css\";\nimport { Colors } from '../Colors'\nimport ValidationError from './ValidationError';\nimport { useMobileMedia } from '../utils/MediaQuery';\nimport Label from './Label';\n\nexport enum PhoneNumberInputSizes {\n Large = \"Large\",\n Regular = \"Regular\",\n}\n\n\ntype ContainerProps = {\n margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n margin: ${props => props.margin};\n`;\n\ntype InnerContainerProps = {\n isMobile: boolean;\n phoneNumberInputSize?: string;\n};\n// overwrite the preset style imports\nconst InnerContainer = styled.div<InnerContainerProps>`\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\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: ${Colors.Grey1};\n font-weight: 500;\n position: relative;\n font-size: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ${Colors.White};\n border: 1px solid ${Colors.Grey5};\n border-radius: 0px 10px 10px 0px;\n height: ${(props) => props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '48px'};\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ${Colors.Grey5};\n }\n &.invalid-number {\n border: 1px solid ${Colors.Grey5};\n background-color: ${Colors.White};\n border-left-color: ${Colors.Grey5};\n &:focus {\n border: 1px solid ${Colors.Grey4};\n border-left-color: ${Colors.Grey5};\n background-color: ${Colors.White};\n }\n }\n &.open {\n border-color: ${Colors.Grey5};\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ${Colors.Grey4};\n }\n &:focus {\n border: 1px solid ${Colors.Grey4};\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: ${Colors.Grey6};\n border: 1px solid ${Colors.Grey5};\n border-radius: 10px;\n &.open {\n background: ${Colors.Grey6};\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ${Colors.Grey6};\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color: ${Colors.Grey5};\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: ${Colors.Grey6};\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 ${Colors.Grey5};\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: ${Colors.White};\n width: calc(100% + 2px);\n max-height: ${props => props.isMobile ? '180px' : '200px'};\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: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\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: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n`;\n\ntype PhoneNumberInputProps = {\n value: string;\n onChange: any;\n onEnter?: any;\n validationError?: string;\n subLabel?: string;\n tip?: string;\n placeholder?: string;\n label?: string;\n phoneNumberInputSize?: string;\n margin?: string;\n autoFocus?: boolean;\n};\nconst PhoneNumberInput: React.FC<PhoneNumberInputProps> = ({ \n value,\n onChange,\n onEnter,\n validationError,\n phoneNumberInputSize,\n subLabel,\n tip,\n label,\n margin,\n autoFocus,\n}) => {\n return (\n <Container margin={margin}>\n {label && <Label text={label} subText={subLabel} tip={tip} />}\n <InnerContainer\n isMobile={useMobileMedia()}\n phoneNumberInputSize={phoneNumberInputSize}\n >\n <PhoneInput\n country=\"us\"\n placeholder=\"Enter your mobile phone number\"\n preferredCountries={[\"us\", \"ca\"]}\n value={value} //TODO: fix issue where this causes a switch to US from CA when typing, doesn't happen when not there\n onKeyDown={(e) => {\n // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222\n if ((e.which === 8 || e.which === 46) && value.length <= 1) {\n e.preventDefault();\n } else if (e.which === 13 && onEnter) {\n onEnter();\n }\n }}\n onChange={(value) => {\n onChange(value);\n }}\n countryCodeEditable={false}\n inputProps={{\n autoFocus,\n }}\n />\n {validationError && (\n <ValidationError validationError={validationError} />\n )}\n </InnerContainer>\n </Container>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/components/PhoneNumberInput.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport PhoneInput from 'react-phone-input-2';\nimport \"react-phone-input-2/lib/semantic-ui.css\";\nimport { Colors } from '../Colors'\nimport ValidationError from './ValidationError';\nimport { useMobileMedia } from '../utils/MediaQuery';\nimport Label from './Label';\n\nexport enum PhoneNumberInputSizes {\n Large = \"Large\",\n Regular = \"Regular\",\n}\n\n\ntype ContainerProps = {\n margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n margin: ${props => props.margin};\n`;\n\ntype InnerContainerProps = {\n isMobile: boolean;\n phoneNumberInputSize?: string;\n disabled? : boolean;\n};\n// overwrite the preset style imports\nconst InnerContainer = styled.div<InnerContainerProps>`\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n background-color: ${(props) =>\n props.disabled ? `${Colors.Grey6} !important` : null};\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: ${Colors.Grey1};\n font-weight: 500;\n position: relative;\n font-size: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ${Colors.White};\n border: 1px solid ${Colors.Grey5};\n border-radius: 0px 10px 10px 0px;\n height: ${(props) => props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '48px'};\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ${Colors.Grey5};\n }\n &.invalid-number {\n border: 1px solid ${Colors.Grey5};\n background-color: ${Colors.White};\n border-left-color: ${Colors.Grey5};\n &:focus {\n border: 1px solid ${Colors.Grey4};\n border-left-color: ${Colors.Grey5};\n background-color: ${Colors.White};\n }\n }\n &.open {\n border-color: ${Colors.Grey5};\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ${Colors.Grey4};\n }\n &:focus {\n border: 1px solid ${Colors.Grey4};\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: ${Colors.Grey6};\n border: 1px solid ${Colors.Grey5};\n border-radius: 10px;\n &.open {\n background: ${Colors.Grey6};\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ${Colors.Grey6};\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color: ${Colors.Grey5};\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: ${Colors.Grey6};\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 ${Colors.Grey5};\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: ${Colors.White};\n width: calc(100% + 2px);\n max-height: ${props => props.isMobile ? '180px' : '200px'};\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: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\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: ${props => props.isMobile ? '1.6rem' : '1.4rem'};\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n`;\n\ntype PhoneNumberInputProps = {\n value: string;\n onChange: any;\n onEnter?: any;\n validationError?: string;\n subLabel?: string;\n tip?: string;\n placeholder?: string;\n label?: string;\n phoneNumberInputSize?: string;\n margin?: string;\n autoFocus?: boolean;\n disabled?: boolean;\n};\nconst PhoneNumberInput: React.FC<PhoneNumberInputProps> = ({ \n value,\n onChange,\n onEnter,\n validationError,\n phoneNumberInputSize,\n subLabel,\n tip,\n label,\n margin,\n autoFocus,\n disabled =false\n}) => {\n return (\n <Container margin={margin}>\n {label && <Label text={label} subText={subLabel} tip={tip} />}\n <InnerContainer\n isMobile={useMobileMedia()}\n phoneNumberInputSize={phoneNumberInputSize}\n disabled={disabled}\n >\n <PhoneInput\n country=\"us\"\n disabled={disabled}\n placeholder=\"Enter your mobile phone number\"\n preferredCountries={[\"us\", \"ca\"]}\n value={value} //TODO: fix issue where this causes a switch to US from CA when typing, doesn't happen when not there\n onKeyDown={(e) => {\n // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222\n if ((e.which === 8 || e.which === 46) && value.length <= 1) {\n e.preventDefault();\n } else if (e.which === 13 && onEnter) {\n onEnter();\n }\n }}\n onChange={(value) => {\n onChange(value);\n }}\n countryCodeEditable={false}\n inputProps={{\n autoFocus,\n }}\n />\n {validationError && (\n <ValidationError validationError={validationError} />\n )}\n </InnerContainer>\n </Container>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellout/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.291",
|
|
4
4
|
"main": "build/index.js",
|
|
5
5
|
"module": "build/index.es.js",
|
|
6
6
|
"files": [
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@fortawesome/pro-solid-svg-icons": "^5.15.4",
|
|
54
54
|
"@fortawesome/react-fontawesome": "^0.1.19",
|
|
55
55
|
"@hapi/joi": "^17.1.1",
|
|
56
|
-
"@sellout/utils": "^0.0.
|
|
56
|
+
"@sellout/utils": "^0.0.291",
|
|
57
57
|
"csvtojson": "^2.0.10",
|
|
58
58
|
"framer-motion": "^2.9.5",
|
|
59
59
|
"polished": "^3.7.2",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"rollup-plugin-url": "^3.0.1",
|
|
63
63
|
"use-places-autocomplete": "^1.11.0"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "ca5f7af09b0970890039bb05f2bc5d37f788e765",
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"react": "16.14.0",
|
|
68
68
|
"react-dom": "16.14.0",
|