@sellout/ui 0.0.188 → 0.0.192

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.
@@ -28,5 +28,6 @@ export declare type InputProps = {
28
28
  maxLength?: number;
29
29
  validationError?: string;
30
30
  disabled?: boolean;
31
+ inputWidth?: boolean;
31
32
  };
32
- export default function Input({ inputRef, autoFocus, placeholder, value, defaultValue, format, type, onMouseEnter, onMouseLeave, onChange, onFocus, onBlur, onSubmit, canSubmit, loading, margin, width, onEnter, label, subLabel, tip, maxLength, validationError, disabled, }: InputProps): JSX.Element;
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): 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: 40px;\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 ", ";\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: 40px;\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 ",
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: 0 16px;\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: 0 16px;\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); }, 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" : "40px"; }, 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, 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;
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, onChange: function (e) {
56
+ React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, inputWidth: inputWidth, onChange: function (e) {
57
57
  if (maxLength && e.currentTarget.value.length > maxLength) ;
58
58
  else {
59
59
  onChange(e);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellout/ui",
3
- "version": "0.0.188",
3
+ "version": "0.0.192",
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": "f0a9fafad935e73b9866cd861422fe5be14f9eb0",
73
+ "gitHead": "4b44c7f358500f4f9284e9c4261057fd670a1aec",
74
74
  "peerDependencies": {
75
75
  "react": "^16.13.0",
76
76
  "react-dom": "^16.13.0",