@webiny/ui 0.0.0-unstable.97a151f74d → 0.0.0-unstable.aad28a72ae

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/Button/Button.js CHANGED
@@ -33,8 +33,7 @@ var ButtonDefault = function ButtonDefault(props) {
33
33
  onClick = props.onClick,
34
34
  children = props.children,
35
35
  small = props.small,
36
- _props$ripple = props.ripple,
37
- ripple = _props$ripple === void 0 ? true : _props$ripple,
36
+ ripple = props.ripple,
38
37
  _props$className = props.className,
39
38
  className = _props$className === void 0 ? "" : _props$className,
40
39
  style = props.style;
@@ -63,8 +62,7 @@ var ButtonPrimary = function ButtonPrimary(props) {
63
62
  small = _props$small === void 0 ? false : _props$small,
64
63
  _props$flat = props.flat,
65
64
  flat = _props$flat === void 0 ? false : _props$flat,
66
- _props$ripple2 = props.ripple,
67
- ripple = _props$ripple2 === void 0 ? true : _props$ripple2,
65
+ ripple = props.ripple,
68
66
  _props$style = props.style,
69
67
  style = _props$style === void 0 ? {} : _props$style,
70
68
  _props$className2 = props.className,
@@ -94,8 +92,7 @@ var ButtonSecondary = function ButtonSecondary(props) {
94
92
  children = props.children,
95
93
  _props$small2 = props.small,
96
94
  small = _props$small2 === void 0 ? false : _props$small2,
97
- _props$ripple3 = props.ripple,
98
- ripple = _props$ripple3 === void 0 ? true : _props$ripple3,
95
+ ripple = props.ripple,
99
96
  _props$className3 = props.className,
100
97
  className = _props$className3 === void 0 ? null : _props$className3,
101
98
  _props$style2 = props.style,
@@ -124,8 +121,7 @@ var ButtonFloating = function ButtonFloating(props) {
124
121
  onClick = props.onClick,
125
122
  _props$small3 = props.small,
126
123
  small = _props$small3 === void 0 ? false : _props$small3,
127
- _props$ripple4 = props.ripple,
128
- ripple = _props$ripple4 === void 0 ? true : _props$ripple4,
124
+ ripple = props.ripple,
129
125
  _props$className4 = props.className,
130
126
  className = _props$className4 === void 0 ? null : _props$className4,
131
127
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -1 +1 @@
1
- {"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\n\nexport interface ButtonProps {\n /**\n * Make button flat (only applicable to Primary button).\n */\n flat?: boolean;\n\n /**\n * Make button smaller.\n */\n small?: boolean;\n\n /**\n * Returning `any` allows us to pass callbacks to the button without worrying about their\n * specific return types. Buttons don't use return values from callbacks, so we don't have to worry\n * about their return types at all.\n */\n onClick?: (event: React.MouseEvent<any, MouseEvent>) => any;\n\n /**\n * Label and optionally an icon (using Button.Icon component).\n */\n children?: React.ReactNode;\n\n /**\n * Show ripple effect on button click.\n */\n ripple?: boolean;\n\n /**\n * Additional button class name.\n */\n className?: string;\n\n /**\n * Is button disabled?\n */\n disabled?: boolean;\n\n /**\n * Additional inline styles.\n */\n style?: { [key: string]: any };\n\n /**\n * ID of the element for testing purposes.\n */\n \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n const { disabled, onClick, children, small, ripple = true, className = \"\", style } = props;\n\n return (\n <RmwcButton.Button\n style={style}\n disabled={disabled}\n dense={small}\n onClick={onClick}\n ripple={ripple}\n className={classNames(\"webiny-ui-button\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n flat = false,\n ripple = true,\n style = {},\n className = null\n } = props;\n return (\n <RmwcButton.Button\n raised={!flat}\n dense={small}\n disabled={disabled}\n unelevated={flat}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n ripple = true,\n className = null,\n style = {}\n } = props;\n\n return (\n <RmwcButton.Button\n disabled={disabled}\n outlined\n dense={small}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\n \"webiny-ui-button webiny-ui-button--secondary\",\n webinyButtonStyles,\n className\n )}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n FabProps & {\n label?: React.ReactNode;\n icon?: React.ReactNode;\n onMouseDown?: (e: SyntheticEvent) => void;\n onMouseUp?: (e: SyntheticEvent) => void;\n };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n const {\n disabled,\n label,\n icon,\n onClick,\n small = false,\n ripple = true,\n className = null,\n ...rest\n } = props;\n return (\n <Fab\n data-testid={props[\"data-testid\"]}\n disabled={disabled}\n mini={small}\n onClick={onClick}\n label={label}\n ripple={ripple}\n icon={icon}\n className={classNames(\"webiny-ui-button--floating\", className)}\n {...rest}\n />\n );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}
1
+ {"version":3,"names":["ButtonDefault","props","disabled","onClick","children","small","ripple","className","style","classNames","ButtonPrimary","flat","ButtonSecondary","webinyButtonStyles","ButtonFloating","label","icon","rest","ButtonIcon"],"sources":["Button.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RmwcButton from \"@rmwc/button\";\nimport { Fab, FabProps } from \"@rmwc/fab\";\nimport { Icon, IconProps } from \"../Icon/Icon\";\nimport classNames from \"classnames\";\nimport { SyntheticEvent } from \"react\";\nimport { webinyButtonStyles } from \"./Button.styles\";\n\nexport interface ButtonProps {\n /**\n * Make button flat (only applicable to Primary button).\n */\n flat?: boolean;\n\n /**\n * Make button smaller.\n */\n small?: boolean;\n\n /**\n * Returning `any` allows us to pass callbacks to the button without worrying about their\n * specific return types. Buttons don't use return values from callbacks, so we don't have to worry\n * about their return types at all.\n */\n onClick?: (event: React.MouseEvent<any, MouseEvent>) => any;\n\n /**\n * Label and optionally an icon (using Button.Icon component).\n */\n children?: React.ReactNode;\n\n /**\n * Show ripple effect on button click.\n */\n ripple?: boolean;\n\n /**\n * Additional button class name.\n */\n className?: string;\n\n /**\n * Is button disabled?\n */\n disabled?: boolean;\n\n /**\n * Additional inline styles.\n */\n style?: { [key: string]: any };\n\n /**\n * ID of the element for testing purposes.\n */\n \"data-testid\"?: string;\n}\n\n/**\n * Shows a default button, used typically when action is not of high priority.\n */\nexport const ButtonDefault: React.FC<ButtonProps> = props => {\n const { disabled, onClick, children, small, ripple, className = \"\", style } = props;\n\n return (\n <RmwcButton.Button\n style={style}\n disabled={disabled}\n dense={small}\n onClick={onClick}\n ripple={ripple}\n className={classNames(\"webiny-ui-button\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows primary button, eg. for submitting forms.\n */\nexport const ButtonPrimary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n flat = false,\n ripple,\n style = {},\n className = null\n } = props;\n return (\n <RmwcButton.Button\n raised={!flat}\n dense={small}\n disabled={disabled}\n unelevated={flat}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\"webiny-ui-button webiny-ui-button--primary\", className)}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\n/**\n * Shows a secondary button - eg. for doing a reset on a form.\n */\nexport const ButtonSecondary: React.FC<ButtonProps> = props => {\n const {\n disabled,\n onClick,\n children,\n small = false,\n ripple,\n className = null,\n style = {}\n } = props;\n\n return (\n <RmwcButton.Button\n disabled={disabled}\n outlined\n dense={small}\n ripple={ripple}\n onClick={onClick}\n style={style}\n className={classNames(\n \"webiny-ui-button webiny-ui-button--secondary\",\n webinyButtonStyles,\n className\n )}\n data-testid={props[\"data-testid\"]}\n >\n {children}\n </RmwcButton.Button>\n );\n};\n\nexport type ButtonFloatingProps = ButtonProps &\n FabProps & {\n label?: React.ReactNode;\n icon?: React.ReactNode;\n onMouseDown?: (e: SyntheticEvent) => void;\n onMouseUp?: (e: SyntheticEvent) => void;\n };\n\n/**\n * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.\n */\nexport const ButtonFloating: React.FC<ButtonFloatingProps> = props => {\n const {\n disabled,\n label,\n icon,\n onClick,\n small = false,\n ripple,\n className = null,\n ...rest\n } = props;\n return (\n <Fab\n data-testid={props[\"data-testid\"]}\n disabled={disabled}\n mini={small}\n onClick={onClick}\n label={label}\n ripple={ripple}\n icon={icon}\n className={classNames(\"webiny-ui-button--floating\", className)}\n {...rest}\n />\n );\n};\n\n/**\n * Shows an icon, suitable to be shown inside of a button.\n */\nexport const ButtonIcon: React.FC<IconProps> = props => <Icon {...props} />;\n"],"mappings":"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"}
@@ -21,8 +21,7 @@ var IconButton = function IconButton(props) {
21
21
  onClick = props.onClick,
22
22
  className = props.className,
23
23
  disabled = props.disabled,
24
- _props$ripple = props.ripple,
25
- ripple = _props$ripple === void 0 ? true : _props$ripple;
24
+ ripple = props.ripple;
26
25
  return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
27
26
  id: id,
28
27
  "data-testid": props["data-testid"],
@@ -1 +1 @@
1
- {"version":3,"names":["IconButton","props","id","icon","label","onClick","className","disabled","ripple"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n IconButton as RIconButton,\n IconButtonProps as RmwcIconButtonProps\n} from \"@rmwc/icon-button\";\n\nimport { FormComponentProps } from \"../../types\";\n\nexport interface IconButtonProps extends Omit<FormComponentProps, \"onChange\">, RmwcIconButtonProps {\n id?: string;\n /**\n * Icon should be provided as an SvgComponent.\n */\n icon: React.ReactNode;\n\n /**\n * Button label\n */\n label?: string;\n\n /**\n * onClick handler\n * @param event\n */\n onClick?: (event: React.MouseEvent) => void;\n\n /**\n * Custom CSS class\n */\n className?: string;\n /**\n * For testing purposes.\n */\n\n \"data-testid\"?: string;\n\n /**\n * Should icon be disabled?\n */\n disabled?: boolean;\n}\n\n/**\n * Shows the icon button.\n */\nconst IconButton: React.FC<IconButtonProps> = props => {\n const { id, icon, label, onClick, className, disabled, ripple = true } = props;\n\n return (\n <RIconButton\n id={id}\n data-testid={props[\"data-testid\"]}\n onClick={onClick}\n disabled={disabled}\n className={className}\n label={label}\n icon={icon}\n ripple={ripple}\n />\n );\n};\n\nexport { IconButton };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAyCA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,EAAR,GAAyED,KAAzE,CAAQC,EAAR;EAAA,IAAYC,IAAZ,GAAyEF,KAAzE,CAAYE,IAAZ;EAAA,IAAkBC,KAAlB,GAAyEH,KAAzE,CAAkBG,KAAlB;EAAA,IAAyBC,OAAzB,GAAyEJ,KAAzE,CAAyBI,OAAzB;EAAA,IAAkCC,SAAlC,GAAyEL,KAAzE,CAAkCK,SAAlC;EAAA,IAA6CC,QAA7C,GAAyEN,KAAzE,CAA6CM,QAA7C;EAAA,oBAAyEN,KAAzE,CAAuDO,MAAvD;EAAA,IAAuDA,MAAvD,8BAAgE,IAAhE;EAEA,oBACI,6BAAC,sBAAD;IACI,EAAE,EAAEN,EADR;IAEI,eAAaD,KAAK,CAAC,aAAD,CAFtB;IAGI,OAAO,EAAEI,OAHb;IAII,QAAQ,EAAEE,QAJd;IAKI,SAAS,EAAED,SALf;IAMI,KAAK,EAAEF,KANX;IAOI,IAAI,EAAED,IAPV;IAQI,MAAM,EAAEK;EARZ,EADJ;AAYH,CAfD"}
1
+ {"version":3,"names":["IconButton","props","id","icon","label","onClick","className","disabled","ripple"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n IconButton as RIconButton,\n IconButtonProps as RmwcIconButtonProps\n} from \"@rmwc/icon-button\";\n\nimport { FormComponentProps } from \"../../types\";\n\nexport interface IconButtonProps extends Omit<FormComponentProps, \"onChange\">, RmwcIconButtonProps {\n id?: string;\n /**\n * Icon should be provided as an SvgComponent.\n */\n icon: React.ReactNode;\n\n /**\n * Button label\n */\n label?: string;\n\n /**\n * onClick handler\n * @param event\n */\n onClick?: (event: React.MouseEvent) => void;\n\n /**\n * Custom CSS class\n */\n className?: string;\n /**\n * For testing purposes.\n */\n\n \"data-testid\"?: string;\n\n /**\n * Should icon be disabled?\n */\n disabled?: boolean;\n}\n\n/**\n * Shows the icon button.\n */\nconst IconButton: React.FC<IconButtonProps> = props => {\n const { id, icon, label, onClick, className, disabled, ripple } = props;\n\n return (\n <RIconButton\n id={id}\n data-testid={props[\"data-testid\"]}\n onClick={onClick}\n disabled={disabled}\n className={className}\n label={label}\n icon={icon}\n ripple={ripple}\n />\n );\n};\n\nexport { IconButton };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAyCA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;EAAA,IAAYC,IAAZ,GAAkEF,KAAlE,CAAYE,IAAZ;EAAA,IAAkBC,KAAlB,GAAkEH,KAAlE,CAAkBG,KAAlB;EAAA,IAAyBC,OAAzB,GAAkEJ,KAAlE,CAAyBI,OAAzB;EAAA,IAAkCC,SAAlC,GAAkEL,KAAlE,CAAkCK,SAAlC;EAAA,IAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;EAEA,oBACI,6BAAC,sBAAD;IACI,EAAE,EAAEN,EADR;IAEI,eAAaD,KAAK,CAAC,aAAD,CAFtB;IAGI,OAAO,EAAEI,OAHb;IAII,QAAQ,EAAEE,QAJd;IAKI,SAAS,EAAED,SALf;IAMI,KAAK,EAAEF,KANX;IAOI,IAAI,EAAED,IAPV;IAQI,MAAM,EAAEK;EARZ,EADJ;AAYH,CAfD"}
package/Input/Input.d.ts CHANGED
@@ -17,14 +17,4 @@ export declare type InputProps<TValue = any> = FormComponentProps<TValue> & Text
17
17
  className?: string;
18
18
  "data-testid"?: string;
19
19
  };
20
- /**
21
- * Use Input component to store short string values, like first name, last name, e-mail etc.
22
- * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
23
- */
24
- export declare class Input extends React.Component<InputProps> {
25
- static defaultProps: InputProps;
26
- static rmwcProps: string[];
27
- onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
28
- onBlur: (e: React.SyntheticEvent<HTMLInputElement>) => Promise<void>;
29
- render(): JSX.Element;
30
- }
20
+ export declare const Input: React.FC<InputProps>;
package/Input/Input.js CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
 
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
@@ -13,19 +15,7 @@ var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helper
13
15
 
14
16
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
15
17
 
16
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
17
-
18
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
19
-
20
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
21
-
22
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
23
-
24
- var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
25
-
26
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
27
-
28
- var _react = _interopRequireDefault(require("react"));
18
+ var _react = _interopRequireWildcard(require("react"));
29
19
 
30
20
  var _textfield = require("@rmwc/textfield");
31
21
 
@@ -43,139 +33,112 @@ var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "r
43
33
  * fix label position when autofilled
44
34
  * @type {string}
45
35
  */
46
- var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}}label:webinyInputStyles;");
36
+ var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}label:webinyInputStyles;");
47
37
  /**
48
38
  * Use Input component to store short string values, like first name, last name, e-mail etc.
49
39
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
50
40
  */
41
+ // IconProps directly passed to RMWC
51
42
 
52
- var Input = /*#__PURE__*/function (_React$Component) {
53
- (0, _inherits2.default)(Input, _React$Component);
43
+ var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
54
44
 
55
- var _super = (0, _createSuper2.default)(Input);
45
+ var Input = function Input(props) {
46
+ var onChange = (0, _react.useCallback)(function (e) {
47
+ var onChange = props.onChange,
48
+ rawOnChange = props.rawOnChange;
56
49
 
57
- function Input() {
58
- var _this;
50
+ if (!onChange) {
51
+ return;
52
+ } // @ts-ignore
59
53
 
60
- (0, _classCallCheck2.default)(this, Input);
61
54
 
62
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
63
- args[_key] = arguments[_key];
64
- }
55
+ onChange(rawOnChange ? e : e.target.value);
56
+ }, [props.onChange, props.rawOnChange]);
57
+ var onBlur = (0, _react.useCallback)( /*#__PURE__*/function () {
58
+ var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
59
+ var validate, onBlur;
60
+ return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
61
+ while (1) {
62
+ switch (_context.prev = _context.next) {
63
+ case 0:
64
+ validate = props.validate, onBlur = props.onBlur;
65
65
 
66
- _this = _super.call.apply(_super, [this].concat(args));
67
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
68
- var _this$props = _this.props,
69
- onChange = _this$props.onChange,
70
- rawOnChange = _this$props.rawOnChange;
71
-
72
- if (!onChange) {
73
- return;
74
- } // @ts-ignore
75
-
76
-
77
- onChange(rawOnChange ? e : e.target.value);
78
- });
79
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", /*#__PURE__*/function () {
80
- var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
81
- var _this$props2, validate, onBlur;
82
-
83
- return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
84
- while (1) {
85
- switch (_context.prev = _context.next) {
86
- case 0:
87
- _this$props2 = _this.props, validate = _this$props2.validate, onBlur = _this$props2.onBlur;
88
-
89
- if (!validate) {
90
- _context.next = 5;
91
- break;
92
- }
93
-
94
- // Since we are accessing event in an async operation, we need to persist it.
95
- // See https://reactjs.org/docs/events.html#event-pooling.
96
- e.persist();
66
+ if (!validate) {
97
67
  _context.next = 5;
98
- return validate();
68
+ break;
69
+ }
70
+
71
+ // Since we are accessing event in an async operation, we need to persist it.
72
+ // See https://reactjs.org/docs/events.html#event-pooling.
73
+ e.persist();
74
+ _context.next = 5;
75
+ return validate();
99
76
 
100
- case 5:
101
- onBlur && onBlur(e);
77
+ case 5:
78
+ onBlur && onBlur(e);
102
79
 
103
- case 6:
104
- case "end":
105
- return _context.stop();
106
- }
80
+ case 6:
81
+ case "end":
82
+ return _context.stop();
107
83
  }
108
- }, _callee);
109
- }));
110
-
111
- return function (_x) {
112
- return _ref.apply(this, arguments);
113
- };
114
- }());
115
- return _this;
84
+ }
85
+ }, _callee);
86
+ }));
87
+
88
+ return function (_x) {
89
+ return _ref.apply(this, arguments);
90
+ };
91
+ }(), [props.validate, props.onBlur]);
92
+ var autoFocus = props.autoFocus,
93
+ value = props.value,
94
+ label = props.label,
95
+ description = props.description,
96
+ placeholder = props.placeholder,
97
+ rows = props.rows,
98
+ validation = props.validation,
99
+ icon = props.icon,
100
+ trailingIcon = props.trailingIcon,
101
+ onEnter = props.onEnter,
102
+ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
103
+ var inputValue = value;
104
+
105
+ if (value === null || typeof value === "undefined") {
106
+ inputValue = "";
116
107
  }
117
108
 
118
- (0, _createClass2.default)(Input, [{
119
- key: "render",
120
- value: function render() {
121
- var _this$props3 = this.props,
122
- autoFocus = _this$props3.autoFocus,
123
- value = _this$props3.value,
124
- label = _this$props3.label,
125
- description = _this$props3.description,
126
- placeholder = _this$props3.placeholder,
127
- rows = _this$props3.rows,
128
- validation = _this$props3.validation,
129
- icon = _this$props3.icon,
130
- trailingIcon = _this$props3.trailingIcon,
131
- onEnter = _this$props3.onEnter,
132
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
133
- var inputValue = value;
134
-
135
- if (value === null || typeof value === "undefined") {
136
- inputValue = "";
137
- }
138
-
139
- var _ref2 = validation || {},
140
- validationIsValid = _ref2.isValid,
141
- validationMessage = _ref2.message;
142
-
143
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(props, Input.rmwcProps), {
144
- onKeyDown: function onKeyDown(e) {
145
- if (typeof onEnter === "function" && e.key === "Enter") {
146
- onEnter();
147
- }
109
+ var _ref2 = validation || {},
110
+ validationIsValid = _ref2.isValid,
111
+ validationMessage = _ref2.message;
148
112
 
149
- if (typeof props.onKeyDown === "function") {
150
- for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
151
- rest[_key2 - 1] = arguments[_key2];
152
- }
113
+ var inputOnKeyDown = (0, _react.useCallback)(function (e) {
114
+ if (typeof onEnter === "function" && e.key === "Enter") {
115
+ onEnter();
116
+ }
153
117
 
154
- return props.onKeyDown.apply(props, [e].concat(rest));
155
- }
156
- },
157
- autoFocus: autoFocus,
158
- textarea: Boolean(rows),
159
- value: inputValue,
160
- onChange: this.onChange,
161
- onBlur: this.onBlur,
162
- label: label,
163
- icon: icon,
164
- placeholder: !label && placeholder || undefined,
165
- trailingIcon: trailingIcon,
166
- rows: this.props.rows,
167
- className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
168
- "data-testid": props["data-testid"]
169
- })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
170
- error: true
171
- }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
118
+ if (typeof rest.onKeyDown === "function") {
119
+ return rest.onKeyDown(e);
172
120
  }
173
- }]);
174
- return Input;
175
- }(_react.default.Component);
121
+ }, []);
122
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
123
+ onKeyDown: inputOnKeyDown,
124
+ autoFocus: autoFocus,
125
+ textarea: Boolean(rows),
126
+ value: inputValue,
127
+ onChange: onChange,
128
+ onBlur: onBlur,
129
+ label: label,
130
+ icon: icon,
131
+ placeholder: !label && placeholder || undefined,
132
+ trailingIcon: trailingIcon,
133
+ rows: rows,
134
+ className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
135
+ "data-testid": props["data-testid"]
136
+ })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
137
+ error: true
138
+ }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
139
+ };
176
140
 
177
141
  exports.Input = Input;
178
- (0, _defineProperty2.default)(Input, "defaultProps", {
142
+ Input.defaultProps = {
179
143
  rawOnChange: false
180
- });
181
- (0, _defineProperty2.default)(Input, "rmwcProps", ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"]);
144
+ };
@@ -1 +1 @@
1
- {"version":3,"names":["webinyInputStyles","css","Input","e","props","onChange","rawOnChange","target","value","validate","onBlur","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","inputValue","validationIsValid","isValid","validationMessage","message","pick","rmwcProps","key","onKeyDown","rest","Boolean","undefined","classNames","React","Component"],"sources":["Input.tsx"],"sourcesContent":["import React from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n transform: translateY(-106%) scale(0.75);\n }\n }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\nexport class Input extends React.Component<InputProps> {\n static defaultProps: InputProps = {\n rawOnChange: false\n };\n\n // IconProps directly passed to RMWC\n static rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\"\n ];\n\n onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = this.props;\n if (!onChange) {\n return;\n }\n\n // @ts-ignore\n onChange(rawOnChange ? e : e.target.value);\n };\n\n onBlur = async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = this.props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n };\n\n public override render() {\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n ...props\n } = this.props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n return (\n <React.Fragment>\n <TextField\n {...pick(props, Input.rmwcProps)}\n onKeyDown={(e, ...rest) => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof props.onKeyDown === \"function\") {\n return props.onKeyDown(e, ...rest);\n }\n }}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={this.onChange}\n onBlur={this.onBlur}\n label={label}\n icon={icon}\n placeholder={(!label && placeholder) || undefined}\n trailingIcon={trailingIcon}\n rows={this.props.rows}\n className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n transform: translateY(-106%) scale(0.75);\n }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-ignore\n onChange(rawOnChange ? e : e.target.value);\n },\n [props.onChange, props.rawOnChange]\n );\n\n const onBlur = useCallback(\n async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n },\n [props.validate, props.onBlur]\n );\n\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n ...rest\n } = props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const inputOnKeyDown = useCallback(e => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof rest.onKeyDown === \"function\") {\n return rest.onKeyDown(e);\n }\n }, []);\n\n return (\n <React.Fragment>\n <TextField\n {...pick(rest, rmwcProps)}\n onKeyDown={inputOnKeyDown}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={onChange}\n onBlur={onBlur}\n label={label}\n icon={icon}\n placeholder={(!label && placeholder) || undefined}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webiny/ui",
3
- "version": "0.0.0-unstable.97a151f74d",
3
+ "version": "0.0.0-unstable.aad28a72ae",
4
4
  "main": "index.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -81,11 +81,11 @@
81
81
  "@types/react-custom-scrollbars": "^4.0.10",
82
82
  "@types/react-transition-group": "^4.4.4",
83
83
  "@types/shortid": "^0.0.29",
84
- "@webiny/cli": "^0.0.0-unstable.97a151f74d",
85
- "@webiny/form": "^0.0.0-unstable.97a151f74d",
86
- "@webiny/project-utils": "^0.0.0-unstable.97a151f74d",
87
- "@webiny/storybook-utils": "^0.0.0-unstable.97a151f74d",
88
- "@webiny/validation": "^0.0.0-unstable.97a151f74d",
84
+ "@webiny/cli": "^0.0.0-unstable.aad28a72ae",
85
+ "@webiny/form": "^0.0.0-unstable.aad28a72ae",
86
+ "@webiny/project-utils": "^0.0.0-unstable.aad28a72ae",
87
+ "@webiny/storybook-utils": "^0.0.0-unstable.aad28a72ae",
88
+ "@webiny/validation": "^0.0.0-unstable.aad28a72ae",
89
89
  "babel-loader": "^8.0.0-beta.6",
90
90
  "babel-plugin-emotion": "^9.2.8",
91
91
  "execa": "^5.0.0",
@@ -132,5 +132,5 @@
132
132
  ]
133
133
  }
134
134
  },
135
- "gitHead": "97a151f74d8c5679323989fcc8cc7036be0f150e"
135
+ "gitHead": "aad28a72ae72f19b80a3196d2b4439399acc67ad"
136
136
  }