@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/components/SimpleForm/SimpleForm.js

@@ -1,75 +1,77 @@
-import * as React from "react";
-import styled from "@emotion/styled";
-import { css } from "emotion";
-import classNames from "classnames";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { Typography } from "@webiny/ui/Typography";
-import { Elevation } from "@webiny/ui/Elevation";
-import { Icon } from "@webiny/ui/Icon";
-var SimpleFormContainer = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleFormHeader = exports.SimpleFormFooter = exports.SimpleFormContent = exports.SimpleForm = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _emotion = require("emotion");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Grid = require("@webiny/ui/Grid");
+var _Typography = require("@webiny/ui/Typography");
+var _Elevation = require("@webiny/ui/Elevation");
+var _Icon = require("@webiny/ui/Icon");
+var SimpleFormContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ep5jo8l0",
   label: "SimpleFormContainer"
 })({
   position: "relative",
   margin: "17px 50px"
 });
-var header = /*#__PURE__*/css({
+var header = /*#__PURE__*/(0, _emotion.css)({
   borderBottom: "1px solid var(--mdc-theme-on-background)",
   color: "var(--mdc-theme-text-primary-on-background)"
 }, "label:header;");
-var title = /*#__PURE__*/css({
+var title = /*#__PURE__*/(0, _emotion.css)({
   display: "flex",
   alignItems: "center"
 }, "label:title;");
-var actions = /*#__PURE__*/css({
+var actions = /*#__PURE__*/(0, _emotion.css)({
   display: "flex",
   justifyContent: "flex-end",
   alignItems: "center"
 }, "label:actions;");
-var icon = /*#__PURE__*/css({
+var icon = /*#__PURE__*/(0, _emotion.css)({
   marginRight: 15,
   color: "var(--mdc-theme-text-primary-on-background)"
 }, "label:icon;");
-var footer = /*#__PURE__*/css({
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)",
-  textAlign: "right",
-  "&.mdc-layout-grid": {
-    padding: 25 // "25px 50px"
-
-  }
-}, "label:footer;");
-export var SimpleForm = function SimpleForm(props) {
+var footer = /*#__PURE__*/(0, _emotion.css)("display:flex;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--mdc-theme-on-background);padding:24px;box-sizing:border-box;min-height:52px;button:last-of-type{margin-left:8px;}label:footer;");
+var SimpleForm = function SimpleForm(props) {
   return /*#__PURE__*/React.createElement(SimpleFormContainer, {
-    className: classNames("webiny-data-list", props.className),
+    className: (0, _classnames.default)("webiny-data-list", props.className),
     "data-testid": props["data-testid"]
-  }, props.noElevation ? props.children : /*#__PURE__*/React.createElement(Elevation, {
+  }, props.noElevation ? props.children : /*#__PURE__*/React.createElement(_Elevation.Elevation, {
     z: 1
   }, props.children));
 };
-export var SimpleFormHeader = function SimpleFormHeader(props) {
-  return /*#__PURE__*/React.createElement(Grid, {
+exports.SimpleForm = SimpleForm;
+var SimpleFormHeader = function SimpleFormHeader(props) {
+  return /*#__PURE__*/React.createElement(_Grid.Grid, {
     className: header
-  }, /*#__PURE__*/React.createElement(Cell, {
+  }, /*#__PURE__*/React.createElement(_Grid.Cell, {
     span: props.children ? 6 : 12,
     className: title
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && /*#__PURE__*/React.createElement(_Icon.Icon, {
     className: icon,
     icon: props.icon
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(_Typography.Typography, {
     use: "headline5"
-  }, props.title))), props.children && /*#__PURE__*/React.createElement(Cell, {
+  }, props.title))), props.children && /*#__PURE__*/React.createElement(_Grid.Cell, {
     span: 6,
     className: actions
   }, props.children));
 };
-export var SimpleFormFooter = function SimpleFormFooter(props) {
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: footer
-  }, /*#__PURE__*/React.createElement(Cell, {
-    span: 12
-  }, props.children));
+exports.SimpleFormHeader = SimpleFormHeader;
+var SimpleFormFooter = function SimpleFormFooter(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(footer, props.className)
+  }, props.children);
 };
-export var SimpleFormContent = function SimpleFormContent(props) {
+exports.SimpleFormFooter = SimpleFormFooter;
+var SimpleFormContent = function SimpleFormContent(props) {
   return props.children;
-};
+};
+exports.SimpleFormContent = SimpleFormContent;

package/components/SimpleForm/SimpleForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SimpleFormContainer","styled","position","margin","header","css","borderBottom","color","title","display","alignItems","actions","justifyContent","icon","marginRight","footer","SimpleForm","props","classNames","className","noElevation","children","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nconst SimpleFormContainer = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\nconst header = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst title = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actions = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\nconst icon = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst footer = css`\n    display: flex;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    border-top: 1px solid var(--mdc-theme-on-background);\n    padding: 24px;\n    box-sizing: border-box;\n    min-height: 52px;\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\ninterface SimpleFormProps {\n    children: React.ReactNode;\n    \"data-testid\"?: string;\n    noElevation?: boolean;\n    className?: string;\n}\nexport const SimpleForm: React.FC<SimpleFormProps> = props => {\n    return (\n        <SimpleFormContainer\n            className={classNames(\"webiny-data-list\", props.className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {props.noElevation ? props.children : <Elevation z={1}>{props.children}</Elevation>}\n        </SimpleFormContainer>\n    );\n};\n\ninterface SimpleFormHeaderProps {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n}\nexport const SimpleFormHeader: React.FC<SimpleFormHeaderProps> = props => {\n    return (\n        <Grid className={header}>\n            <Cell span={props.children ? 6 : 12} className={title}>\n                <React.Fragment>\n                    {props.icon && <Icon className={icon} icon={props.icon} />}\n                    <Typography use=\"headline5\">{props.title}</Typography>\n                </React.Fragment>\n            </Cell>\n            {props.children && (\n                <Cell span={6} className={actions}>\n                    {props.children}\n                </Cell>\n            )}\n        </Grid>\n    );\n};\n\ninterface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\nexport const SimpleFormFooter: React.FC<SimpleFormFooterProps> = props => {\n    return <div className={classNames(footer, props.className)}>{props.children}</div>;\n};\n\nexport const SimpleFormContent: React.FC = props => {\n    return props.children as unknown as React.ReactElement;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,mBAAmB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACtCC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMC,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,YAAY,EAAE,0CAA0C;EACxDC,KAAK,EAAE;AACX,CAAC,kBAAC;AAEF,IAAMC,KAAK,gBAAG,IAAAH,YAAG,EAAC;EACdI,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AAChB,CAAC,iBAAC;AAEF,IAAMC,OAAO,gBAAG,IAAAN,YAAG,EAAC;EAChBI,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE,UAAU;EAC1BF,UAAU,EAAE;AAChB,CAAC,mBAAC;AAEF,IAAMG,IAAI,gBAAG,IAAAR,YAAG,EAAC;EACbS,WAAW,EAAE,EAAE;EACfP,KAAK,EAAE;AACX,CAAC,gBAAC;AAEF,IAAMQ,MAAM,oBAAGV,YAAG,mNAWjB;AAQM,IAAMW,UAAqC,GAAG,SAAxCA,UAAqC,CAAGC,KAAK,EAAI;EAC1D,oBACI,oBAAC,mBAAmB;IAChB,SAAS,EAAE,IAAAC,mBAAU,EAAC,kBAAkB,EAAED,KAAK,CAACE,SAAS,CAAE;IAC3D,eAAaF,KAAK,CAAC,aAAa;EAAE,GAEjCA,KAAK,CAACG,WAAW,GAAGH,KAAK,CAACI,QAAQ,gBAAG,oBAAC,oBAAS;IAAC,CAAC,EAAE;EAAE,GAAEJ,KAAK,CAACI,QAAQ,CAAa,CACjE;AAE9B,CAAC;AAAC;AAOK,IAAMC,gBAAiD,GAAG,SAApDA,gBAAiD,CAAGL,KAAK,EAAI;EACtE,oBACI,oBAAC,UAAI;IAAC,SAAS,EAAEb;EAAO,gBACpB,oBAAC,UAAI;IAAC,IAAI,EAAEa,KAAK,CAACI,QAAQ,GAAG,CAAC,GAAG,EAAG;IAAC,SAAS,EAAEb;EAAM,gBAClD,oBAAC,KAAK,CAAC,QAAQ,QACVS,KAAK,CAACJ,IAAI,iBAAI,oBAAC,UAAI;IAAC,SAAS,EAAEA,IAAK;IAAC,IAAI,EAAEI,KAAK,CAACJ;EAAK,EAAG,eAC1D,oBAAC,sBAAU;IAAC,GAAG,EAAC;EAAW,GAAEI,KAAK,CAACT,KAAK,CAAc,CACzC,CACd,EACNS,KAAK,CAACI,QAAQ,iBACX,oBAAC,UAAI;IAAC,IAAI,EAAE,CAAE;IAAC,SAAS,EAAEV;EAAQ,GAC7BM,KAAK,CAACI,QAAQ,CAEtB,CACE;AAEf,CAAC;AAAC;AAMK,IAAME,gBAAiD,GAAG,SAApDA,gBAAiD,CAAGN,KAAK,EAAI;EACtE,oBAAO;IAAK,SAAS,EAAE,IAAAC,mBAAU,EAACH,MAAM,EAAEE,KAAK,CAACE,SAAS;EAAE,GAAEF,KAAK,CAACI,QAAQ,CAAO;AACtF,CAAC;AAAC;AAEK,IAAMG,iBAA2B,GAAG,SAA9BA,iBAA2B,CAAGP,KAAK,EAAI;EAChD,OAAOA,KAAK,CAACI,QAAQ;AACzB,CAAC;AAAC"}

package/components/SimpleForm/index.js

@@ -1 +1,30 @@
-export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SimpleForm", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleForm.SimpleForm;
+  }
+});
+Object.defineProperty(exports, "SimpleFormContent", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleForm.SimpleFormContent;
+  }
+});
+Object.defineProperty(exports, "SimpleFormFooter", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleForm.SimpleFormFooter;
+  }
+});
+Object.defineProperty(exports, "SimpleFormHeader", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleForm.SimpleFormHeader;
+  }
+});
+var _SimpleForm = require("./SimpleForm");

package/components/SimpleForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}

package/components/SimpleUI/InputField.d.ts

@@ -1,9 +1,12 @@
+/// <reference types="web" />
 import React from "react";
-declare type InputBoxProps = {
+interface InputBoxProps {
     value?: string | number;
     onChange?: (value: any) => void;
+    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
     defaultValue?: string | number;
+    type?: "string" | "number";
     [key: string]: any;
-};
-declare const _default: React.MemoExoticComponent<({ className, value, onChange, label, description, validation, defaultValue, ...props }: InputBoxProps) => JSX.Element>;
+}
+declare const _default: React.NamedExoticComponent<InputBoxProps>;
 export default _default;

package/components/SimpleUI/InputField.js

@@ -1,12 +1,19 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "value", "onChange", "label", "description", "validation", "defaultValue"];
-import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-import omit from "lodash/omit";
-import { Typography } from "@webiny/ui/Typography";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-var inputStyle = /*#__PURE__*/css({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _emotion = require("emotion");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _Typography = require("@webiny/ui/Typography");
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+var _excluded = ["className", "value", "onChange", "onKeyDown", "label", "description", "validation", "defaultValue"];
+var inputStyle = /*#__PURE__*/(0, _emotion.css)({
   boxSizing: "border-box",
   border: "1px solid var(--mdc-theme-on-background)",
   width: "100%",
@@ -39,59 +46,57 @@ var inputStyle = /*#__PURE__*/css({
     margin: 0
   }
 }, "label:inputStyle;");
-var labelStyle = /*#__PURE__*/css({
+var labelStyle = /*#__PURE__*/(0, _emotion.css)({
   marginBottom: 8,
   padding: "0px 8px",
   "& span": {
     color: "var(--mdc-theme-text-primary-on-background)"
   }
 }, "label:labelStyle;");
-
-var getValue = function getValue(_ref) {
-  var value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      type = _ref.type;
-
+var getValue = function getValue(params) {
+  var value = params.value,
+    defaultValue = params.defaultValue,
+    type = params.type;
   if (type === "number") {
     return isNaN(value) ? defaultValue : value;
   }
-
   return value || defaultValue;
 };
-
-var InputField = function InputField(_ref2) {
-  var className = _ref2.className,
-      value = _ref2.value,
-      _onChange = _ref2.onChange,
-      label = _ref2.label,
-      description = _ref2.description,
-      _ref2$validation = _ref2.validation,
-      validation = _ref2$validation === void 0 ? {
-    isValid: true
-  } : _ref2$validation,
-      _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? "" : _ref2$defaultValue,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+var InputField = function InputField(_ref) {
+  var className = _ref.className,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    onKeyDown = _ref.onKeyDown,
+    label = _ref.label,
+    description = _ref.description,
+    _ref$validation = _ref.validation,
+    validation = _ref$validation === void 0 ? {
+      isValid: true
+    } : _ref$validation,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
     className: labelStyle
-  }, /*#__PURE__*/React.createElement(Typography, {
-    use: "subtitle2"
-  }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
-    className: classNames(inputStyle, className),
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2"
+  }, label)), /*#__PURE__*/_react.default.createElement("input", Object.assign({
+    className: (0, _classnames.default)(inputStyle, className),
     value: getValue({
       value: value,
-      type: props.type,
+      type: props.type || "string",
       defaultValue: defaultValue
     }),
-    onChange: function onChange(_ref3) {
-      var value = _ref3.target.value;
-
-      _onChange(value.toLowerCase());
+    onKeyDown: onKeyDown,
+    onChange: function onChange(ev) {
+      if (!_onChange) {
+        return;
+      }
+      _onChange((ev.target.value || "").toLowerCase());
     }
-  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+  }, (0, _omit.default)(props, "validate"))), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
 };
-
-export default /*#__PURE__*/React.memo(InputField);
+var _default = /*#__PURE__*/_react.default.memo(InputField);
+exports.default = _default;

package/components/SimpleUI/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputStyle","css","boxSizing","border","width","height","padding","textAlign","minHeight","backgroundColor","transition","opacity","cursor","WebkitAppearance","margin","labelStyle","marginBottom","color","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","isValid","props","classNames","ev","target","toLowerCase","omit","message","React","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField: React.FC<InputBoxProps> = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":"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"}

package/components/SingleImageUpload.d.ts

@@ -1,25 +1,55 @@
 import * as React from "react";
+import { FileManagerFileItem } from "../index";
 import { FormComponentProps } from "@webiny/ui/types";
-declare type SingleImageUploadProps = FormComponentProps & {
+export interface SingleImageUploadProps extends FormComponentProps {
+    /**
+     * Accept types
+     */
     accept?: string[];
+    /**
+     * Component label.
+     */
     label?: string;
+    /**
+     * Is component disabled?
+     */
     disabled?: boolean;
+    /**
+     * Description beneath the image.
+     */
     description?: React.ReactNode;
+    /**
+     * A className for the root element.
+     */
     className?: string;
+    /**
+     * Define file's max allowed size (default is "10mb").
+     * Uses "bytes" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.
+     */
     maxSize?: number | string;
-    multipleMaxCount?: number;
-    multipleMaxSize?: number | string;
-    onChange?: Function;
+    /**
+     * onChange callback when a file is set or unset.
+     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the
+     * `onChange` into its child element. In that case, that prop is not passed by the developer.
+     */
+    onChange?: (value: FileManagerFileItem | null) => void;
+    /**
+     * Optional custom props, passed to the preview image.
+     */
     imagePreviewProps?: any;
+    /**
+     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.
+     */
+    includeFileMeta?: boolean;
+    /**
+     * Is the wrapper round?
+     */
     round?: boolean;
+    /**
+     * Define the properties that are returned on file(s) selection.
+     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.
+     */
     onChangePick?: string[];
-};
-export default class SingleImageUpload extends React.Component<SingleImageUploadProps> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
-    render(): JSX.Element;
 }
-export {};
+declare const SingleImageUpload: React.FC<SingleImageUploadProps>;
+export default SingleImageUpload;

package/components/SingleImageUpload.js

@@ -1,15 +1,18 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
-import { Image } from "@webiny/app/components/Image";
-import * as Ui from "@webiny/ui/ImageUpload";
-import { FileManager } from "./FileManager";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import styled from "@emotion/styled";
-var ImageUploadWrapper = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Image = require("@webiny/app/components/Image");
+var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
+var _ = require("./..");
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "ek1tjbh0",
   label: "ImageUploadWrapper"
 })({
@@ -28,75 +31,68 @@ var ImageUploadWrapper = /*#__PURE__*/styled("div", {
     color: "var(--mdc-theme-text-secondary-on-background)"
   }
 });
-
-var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  _inherits(SingleImageUpload, _React$Component);
-
-  var _super = _createSuper(SingleImageUpload);
-
-  function SingleImageUpload() {
-    _classCallCheck(this, SingleImageUpload);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(SingleImageUpload, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          onChange = _this$props.onChange,
-          value = _this$props.value,
-          validation = _this$props.validation,
-          label = _this$props.label,
-          description = _this$props.description,
-          accept = _this$props.accept,
-          onChangePick = _this$props.onChangePick,
-          maxSize = _this$props.maxSize,
-          multipleMaxCount = _this$props.multipleMaxCount,
-          multipleMaxSize = _this$props.multipleMaxSize,
-          imagePreviewProps = _this$props.imagePreviewProps,
-          round = _this$props.round;
-      return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-        className: className
-      }, label && /*#__PURE__*/React.createElement("div", {
-        className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/React.createElement(FileManager, {
-        onChange: onChange,
-        onChangePick: onChangePick,
-        accept: accept,
-        images: !accept,
-        maxSize: maxSize,
-        multipleMaxCount: multipleMaxCount,
-        multipleMaxSize: multipleMaxSize
-      }, function (_ref) {
-        var showFileManager = _ref.showFileManager;
-        return /*#__PURE__*/React.createElement(Ui.Image, {
-          renderImagePreview: function renderImagePreview(renderImageProps) {
-            return /*#__PURE__*/React.createElement(Image, Object.assign({}, renderImageProps, imagePreviewProps));
-          },
-          style: {
-            width: "100%",
-            height: "auto"
-          },
-          value: value,
-          uploadImage: showFileManager,
-          removeImage: onChange,
-          round: round
-        });
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+var SingleImageUpload = function SingleImageUpload(props) {
+  var className = props.className,
+    value = props.value,
+    validation = props.validation,
+    label = props.label,
+    description = props.description,
+    accept = props.accept,
+    _props$includeFileMet = props.includeFileMeta,
+    includeFileMeta = _props$includeFileMet === void 0 ? false : _props$includeFileMet,
+    maxSize = props.maxSize,
+    imagePreviewProps = props.imagePreviewProps,
+    round = props.round;
+  var _ref = validation || {},
+    validationIsValid = _ref.isValid,
+    validationMessage = _ref.message;
+  var onChange = (0, React.useCallback)(function (value) {
+    if (!props.onChange) {
+      return;
     }
-  }]);
-
-  return SingleImageUpload;
-}(React.Component);
-
-_defineProperty(SingleImageUpload, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
-export { SingleImageUpload as default };
+    if (value && !includeFileMeta) {
+      props.onChange({
+        id: value.id,
+        src: value.src
+      });
+      return;
+    }
+    if (value && includeFileMeta) {
+      props.onChange(value);
+      return;
+    }
+    props.onChange(null);
+  }, [props.onChange]);
+  return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
+    className: className
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: "mdc-floating-label mdc-floating-label--float-above"
+  }, label), /*#__PURE__*/React.createElement(_.FileManager, {
+    onChange: onChange,
+    accept: accept,
+    images: !accept,
+    maxSize: maxSize,
+    render: function render(_ref2) {
+      var showFileManager = _ref2.showFileManager;
+      return /*#__PURE__*/React.createElement(Ui.Image, {
+        renderImagePreview: function renderImagePreview(renderImageProps) {
+          return /*#__PURE__*/React.createElement(_Image.Image, Object.assign({}, renderImageProps, imagePreviewProps));
+        },
+        style: {
+          width: "100%",
+          height: "auto"
+        },
+        value: value,
+        uploadImage: showFileManager,
+        removeImage: function removeImage() {
+          return onChange(null);
+        },
+        round: round
+      });
+    }
+  }), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+};
+var _default = SingleImageUpload;
+exports.default = _default;

package/components/SingleImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","SingleImageUpload","props","className","value","validation","label","description","accept","includeFileMeta","maxSize","imagePreviewProps","round","validationIsValid","isValid","validationMessage","message","onChange","useCallback","id","src","showFileManager","renderImageProps","width","height"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/Image\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { FileManager, FileManagerFileItem } from \"~/index\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport { useCallback } from \"react\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: FileManagerFileItem | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     */\n    round?: boolean;\n\n    /**\n     * Define the properties that are returned on file(s) selection.\n     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.\n     */\n    onChangePick?: string[];\n}\n\nconst SingleImageUpload: React.FC<SingleImageUploadProps> = props => {\n    const {\n        className,\n        value,\n        validation,\n        label,\n        description,\n        accept,\n        includeFileMeta = false,\n        maxSize,\n        imagePreviewProps,\n        round\n    } = props;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <ImageUploadWrapper className={className}>\n            {label && (\n                <div className=\"mdc-floating-label mdc-floating-label--float-above\">{label}</div>\n            )}\n\n            <FileManager\n                onChange={onChange}\n                accept={accept}\n                images={!accept}\n                maxSize={maxSize}\n                render={({ showFileManager }) => (\n                    <Ui.Image\n                        renderImagePreview={renderImageProps => (\n                            <Image {...renderImageProps} {...imagePreviewProps} />\n                        )}\n                        style={{ width: \"100%\", height: \"auto\" }}\n                        value={value}\n                        uploadImage={showFileManager}\n                        removeImage={() => onChange(null)}\n                        round={round}\n                    />\n                )}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </ImageUploadWrapper>\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"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"}

package/components/SplitView/SplitView.d.ts

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { CellProps } from "@webiny/ui/Grid";
-declare type SplitViewProps = {
+export declare const leftPanel: string;
+interface SplitViewProps {
     children: React.ReactElement<any> | React.ReactElement<any>[];
     className?: string;
-};
-declare const SplitView: (props: SplitViewProps) => JSX.Element;
-declare const LeftPanel: (props: CellProps) => JSX.Element;
-declare const RightPanel: (props: CellProps) => JSX.Element;
+}
+declare const SplitView: React.FC<SplitViewProps>;
+declare const LeftPanel: React.FC<CellProps>;
+declare const RightPanel: React.FC<CellProps>;
 export { SplitView, LeftPanel, RightPanel };