@sellout/ui 0.0.350 → 0.0.352
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.
|
@@ -29,5 +29,6 @@ export declare type InputProps = {
|
|
|
29
29
|
validationError?: string;
|
|
30
30
|
disabled?: boolean;
|
|
31
31
|
inputWidth?: boolean;
|
|
32
|
+
inputInnerPadding?: string;
|
|
32
33
|
};
|
|
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): React.JSX.Element;
|
|
34
|
+
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, inputInnerPadding }: InputProps): React.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: ", ";\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n text-indent: 1px;\n transition: all 0.2s;\n padding:
|
|
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:
|
|
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: ", ";\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: ", ";\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); }, function (props) { return props.inputWidth ? "90px" : "60px"; }, 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" : "60px"; }, function (props) { return props.inputInnerPadding ? props.inputInnerPadding : "0 16px"; }, 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, 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;
|
|
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, inputInnerPadding = _a.inputInnerPadding;
|
|
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, inputWidth: inputWidth, onChange: function (e) {
|
|
56
|
+
React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, inputWidth: inputWidth, inputInnerPadding: inputInnerPadding, onChange: function (e) {
|
|
57
57
|
if (maxLength && e.currentTarget.value.length > maxLength) ;
|
|
58
58
|
else {
|
|
59
59
|
onChange(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormattedInput.js","sources":["../../src/components/FormattedInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport { Colors } from '../Colors';\nimport Icon, { Icons } from './Icon';\nimport Label from \"./Label\";\nimport Flex from \"./Flex\"\nimport MaxLength from \"./MaxLength\";\nimport ValidationError from './ValidationError';\nimport { media } from '../utils/MediaQuery';\n\nexport enum InputFormats {\n Price = 'Price',\n Percent = 'Percent',\n}\n\ntype ContainerProps = {\n width?: string;\n}\n\nconst Container = styled.div<ContainerProps>`\n width: ${(props) => props.width};\n`;\n\ntype FormProps = {\n hovered: boolean;\n focused: boolean;\n width?: string;\n margin?: string;\n disabled: boolean;\n};\n\nconst Form = styled.form<FormProps>`\n margin: ${(props) => props.margin};\n width: ${(props) => props.width};\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ${(props) => {\n if (props.focused) return Colors.Grey4;\n if (props.hovered) return Polished.darken(0.05, Colors.Grey5);\n return Colors.Grey5;\n }};\n overflow: hidden;\n`;\n\nconst PriceContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25px;\n background-color: ${Colors.Grey5};\n`;\n\ntype StyledInputProps = {\n disabled: boolean;\n inputWidth?: boolean;\n};\n\nconst InputStyled = styled.input<StyledInputProps>`\n background-color: ${(props) =>\n props.disabled ? `${Colors.Grey6} !important` : null};\n color: ${(props) => (props.disabled ? Colors.Grey4 : Colors.Grey1)};\n outline: none;\n border: 0px;\n height: 38px;\n width: ${(props) => props.inputWidth ? \"90px\" : \"60px\"};\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 ${media.mobile`\n font-size: 1.6rem;\n `};\n\n ${media.desktop`\n font-size: 1.4rem;\n `};\n\n ::placeholder {\n color: ${Colors.Grey4};\n }\n`;\n\nconst IconText = styled.div`\n font-size: 1.4rem;\n font-weight: 600;\n color: ${Colors.Grey3};\n`;\n\nexport type InputProps = {\n inputRef?: React.Ref<HTMLInputElement>;\n autoFocus?: boolean | undefined;\n placeholder?: string;\n value: string;\n defaultValue?: string;\n type?: string;\n format?: InputFormats;\n onMouseEnter?: any;\n onMouseLeave?: any;\n onChange?: any;\n onFocus?: any;\n onBlur?: any;\n onSubmit?: Function;\n canSubmit?: boolean;\n loading?: boolean;\n margin?: string;\n width?: string;\n onEnter?: Function;\n label?: string;\n subLabel?: string;\n tip?: string;\n maxLength?: number;\n validationError?: string;\n disabled?: boolean;\n inputWidth?: boolean;\n};\n\nexport default function Input({\n inputRef,\n autoFocus,\n placeholder,\n value,\n defaultValue,\n format = InputFormats.Price,\n type = \"text\",\n onMouseEnter,\n onMouseLeave,\n onChange,\n onFocus,\n onBlur,\n onSubmit,\n canSubmit = true,\n loading,\n margin,\n width,\n inputWidth,\n onEnter,\n label,\n subLabel,\n tip,\n maxLength,\n validationError,\n disabled = false,\n}: InputProps) {\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const submit = (event: any) => {\n event.preventDefault();\n if (onSubmit && canSubmit && !loading) {\n onSubmit();\n } else if (onEnter && !loading) {\n onEnter();\n }\n };\n\n return (\n <Container width={width}>\n <Flex justify=\"space-between\">\n {label && <Label text={label} subText={subLabel} tip={tip} />}\n {maxLength && <MaxLength value={value} maxLength={maxLength} />}\n </Flex>\n <Form\n hovered={hovered}\n focused={focused}\n onSubmit={(event) => submit(event)}\n width={width}\n margin={margin}\n noValidate // disables default html5 validation\n disabled={disabled}\n >\n {format === InputFormats.Price && (\n <PriceContainer>\n <Icon \n icon={Icons.Dollar} \n size={14} \n color={Colors.Grey3}\n />\n </PriceContainer>\n )}\n <InputStyled\n ref={inputRef}\n disabled={disabled}\n autoFocus={autoFocus}\n placeholder={placeholder}\n value={value}\n defaultValue={defaultValue}\n type={type}\n inputWidth={inputWidth}\n onChange={(e: React.FormEvent<HTMLInputElement>) => {\n if (maxLength && e.currentTarget.value.length > maxLength) {\n // do nothing, the max length has been reached\n } else {\n onChange(e);\n }\n }}\n onFocus={(event) => {\n setFocused(true);\n if (onFocus) onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n if (onFocus) onBlur(event);\n }}\n onMouseEnter={(event: any) => {\n setHovered(true);\n if (onMouseEnter) onMouseEnter(event);\n }}\n onMouseLeave={(event: any) => {\n setHovered(false);\n if (onMouseLeave) onMouseLeave(event);\n }}\n />\n {format === InputFormats.Percent && (\n <PriceContainer>\n <IconText>\n %\n </IconText>\n </PriceContainer>\n )}\n </Form>\n {validationError && (\n <ValidationError validationError={validationError} />\n )}\n </Container>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormattedInput.js","sources":["../../src/components/FormattedInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport { Colors } from '../Colors';\nimport Icon, { Icons } from './Icon';\nimport Label from \"./Label\";\nimport Flex from \"./Flex\"\nimport MaxLength from \"./MaxLength\";\nimport ValidationError from './ValidationError';\nimport { media } from '../utils/MediaQuery';\n\nexport enum InputFormats {\n Price = 'Price',\n Percent = 'Percent',\n}\n\ntype ContainerProps = {\n width?: string;\n}\n\nconst Container = styled.div<ContainerProps>`\n width: ${(props) => props.width};\n`;\n\ntype FormProps = {\n hovered: boolean;\n focused: boolean;\n width?: string;\n margin?: string;\n disabled: boolean;\n};\n\nconst Form = styled.form<FormProps>`\n margin: ${(props) => props.margin};\n width: ${(props) => props.width};\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ${(props) => {\n if (props.focused) return Colors.Grey4;\n if (props.hovered) return Polished.darken(0.05, Colors.Grey5);\n return Colors.Grey5;\n }};\n overflow: hidden;\n`;\n\nconst PriceContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25px;\n background-color: ${Colors.Grey5};\n`;\n\ntype StyledInputProps = {\n disabled: boolean;\n inputWidth?: boolean;\n inputInnerPadding?: string;\n};\n\nconst InputStyled = styled.input<StyledInputProps>`\n background-color: ${(props) =>\n props.disabled ? `${Colors.Grey6} !important` : null};\n color: ${(props) => (props.disabled ? Colors.Grey4 : Colors.Grey1)};\n outline: none;\n border: 0px;\n height: 38px;\n width: ${(props) => props.inputWidth ? \"90px\" : \"60px\"};\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n text-indent: 1px;\n transition: all 0.2s;\n padding: ${(props) => props.inputInnerPadding ? props.inputInnerPadding : \"0 16px\"};\n text-align: right;\n\n ${media.mobile`\n font-size: 1.6rem;\n `};\n\n ${media.desktop`\n font-size: 1.4rem;\n `};\n\n ::placeholder {\n color: ${Colors.Grey4};\n }\n`;\n\nconst IconText = styled.div`\n font-size: 1.4rem;\n font-weight: 600;\n color: ${Colors.Grey3};\n`;\n\nexport type InputProps = {\n inputRef?: React.Ref<HTMLInputElement>;\n autoFocus?: boolean | undefined;\n placeholder?: string;\n value: string;\n defaultValue?: string;\n type?: string;\n format?: InputFormats;\n onMouseEnter?: any;\n onMouseLeave?: any;\n onChange?: any;\n onFocus?: any;\n onBlur?: any;\n onSubmit?: Function;\n canSubmit?: boolean;\n loading?: boolean;\n margin?: string;\n width?: string;\n onEnter?: Function;\n label?: string;\n subLabel?: string;\n tip?: string;\n maxLength?: number;\n validationError?: string;\n disabled?: boolean;\n inputWidth?: boolean;\n inputInnerPadding?:string;\n};\n\nexport default function Input({\n inputRef,\n autoFocus,\n placeholder,\n value,\n defaultValue,\n format = InputFormats.Price,\n type = \"text\",\n onMouseEnter,\n onMouseLeave,\n onChange,\n onFocus,\n onBlur,\n onSubmit,\n canSubmit = true,\n loading,\n margin,\n width,\n inputWidth,\n onEnter,\n label,\n subLabel,\n tip,\n maxLength,\n validationError,\n disabled = false,\n inputInnerPadding\n}: InputProps) {\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const submit = (event: any) => {\n event.preventDefault();\n if (onSubmit && canSubmit && !loading) {\n onSubmit();\n } else if (onEnter && !loading) {\n onEnter();\n }\n };\n\n return (\n <Container width={width}>\n <Flex justify=\"space-between\">\n {label && <Label text={label} subText={subLabel} tip={tip} />}\n {maxLength && <MaxLength value={value} maxLength={maxLength} />}\n </Flex>\n <Form\n hovered={hovered}\n focused={focused}\n onSubmit={(event) => submit(event)}\n width={width}\n margin={margin}\n noValidate // disables default html5 validation\n disabled={disabled}\n >\n {format === InputFormats.Price && (\n <PriceContainer>\n <Icon \n icon={Icons.Dollar} \n size={14} \n color={Colors.Grey3}\n />\n </PriceContainer>\n )}\n <InputStyled\n ref={inputRef}\n disabled={disabled}\n autoFocus={autoFocus}\n placeholder={placeholder}\n value={value}\n defaultValue={defaultValue}\n type={type}\n inputWidth={inputWidth}\n inputInnerPadding={inputInnerPadding}\n onChange={(e: React.FormEvent<HTMLInputElement>) => {\n if (maxLength && e.currentTarget.value.length > maxLength) {\n // do nothing, the max length has been reached\n } else {\n onChange(e);\n }\n }}\n onFocus={(event) => {\n setFocused(true);\n if (onFocus) onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n if (onFocus) onBlur(event);\n }}\n onMouseEnter={(event: any) => {\n setHovered(true);\n if (onMouseEnter) onMouseEnter(event);\n }}\n onMouseLeave={(event: any) => {\n setHovered(false);\n if (onMouseLeave) onMouseLeave(event);\n }}\n />\n {format === InputFormats.Percent && (\n <PriceContainer>\n <IconText>\n %\n </IconText>\n </PriceContainer>\n )}\n </Form>\n {validationError && (\n <ValidationError validationError={validationError} />\n )}\n </Container>\n );\n}\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.352",
|
|
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.352",
|
|
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": "8437c450ce4eb3a4ab05ddb000f3378d0d935d7f",
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"react": "16.14.0",
|
|
68
68
|
"react-dom": "16.14.0",
|