@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/admin/plugins/fieldRenderers/dateTime/utils.js

@@ -1,8 +1,23 @@
-import React from "react";
-import { css } from "emotion";
-import { Cell } from "@webiny/ui/Grid";
-import { IconButton } from "@webiny/ui/Button";
-export var UTC_TIMEZONES = [{
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultFieldValue = exports.getCurrentTimeZone = exports.getCurrentLocalTime = exports.getCurrentDate = exports.UTC_TIMEZONES = exports.RemoveFieldButton = exports.DEFAULT_TIMEZONE = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _Button = require("@webiny/ui/Button");
+
+var UTC_TIMEZONES = [{
   value: "-12:00",
   label: "UTC-12:00"
 }, {
@@ -120,34 +135,92 @@ export var UTC_TIMEZONES = [{
   value: "+14:00",
   label: "UTC+14:00"
 }];
-/**
- * @returns Current date string in format `YYYY-MM-DD`
- */
+exports.UTC_TIMEZONES = UTC_TIMEZONES;
+var DEFAULT_TIMEZONE = "+01:00";
+exports.DEFAULT_TIMEZONE = DEFAULT_TIMEZONE;
+
+var getDefaultFieldValue = function getDefaultFieldValue(field, bind, getCurrent) {
+  var def = field.settings ? field.settings.defaultSetValue || "null" : "null";
+
+  if (bind.value || def !== "current") {
+    return bind.value || "";
+  }
+
+  return getCurrent();
+};
+
+exports.getDefaultFieldValue = getDefaultFieldValue;
+
+var getCurrentTimeZone = function getCurrentTimeZone(date) {
+  if (!date) {
+    date = new Date();
+  }
+
+  var value = date.toTimeString();
+  var matches = value.match(/GMT([+-][0-9]{4})/);
+
+  if (!matches) {
+    return null;
+  }
+
+  var timezone = matches[1];
+  return "".concat(timezone.slice(0, 3), ":").concat(timezone.slice(3));
+};
+
+exports.getCurrentTimeZone = getCurrentTimeZone;
+
+var getCurrentLocalTime = function getCurrentLocalTime(date) {
+  if (!date) {
+    date = new Date();
+  }
+
+  var value = date.toTimeString();
+
+  var _value$split = value.split(" "),
+      _value$split2 = (0, _slicedToArray2.default)(_value$split, 1),
+      time = _value$split2[0];
+
+  if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {
+    return "00:00:00";
+  }
 
-export var getCurrentDateString = function getCurrentDateString() {
-  var today = new Date().toISOString();
-  return today.substr(0, 10);
+  return time;
 };
-export var DEFAULT_TIME = "00:00:00";
-export var DEFAULT_DATE = getCurrentDateString();
-export var DEFAULT_TIMEZONE = "+01:00";
-var deleteIconStyles = /*#__PURE__*/css({
+
+exports.getCurrentLocalTime = getCurrentLocalTime;
+
+var getCurrentDate = function getCurrentDate(date) {
+  if (!date) {
+    date = new Date();
+  }
+
+  var year = String(date.getFullYear()).padStart(4, "0");
+  var month = String(date.getMonth() + 1).padStart(2, "0");
+  var day = String(date.getDate()).padStart(2, "0");
+  return "".concat(year, "-").concat(month, "-").concat(day);
+};
+
+exports.getCurrentDate = getCurrentDate;
+var deleteIconStyles = /*#__PURE__*/(0, _emotion.css)({
   width: "100% !important",
   height: "100% !important",
   color: "var(--mdc-theme-text-secondary-on-background) !important"
 }, "label:deleteIconStyles;");
-export var RemoveFieldButton = function RemoveFieldButton(_ref) {
+
+var RemoveFieldButton = function RemoveFieldButton(_ref) {
   var trailingIcon = _ref.trailingIcon;
 
   if (!trailingIcon) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Cell, {
+  return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 1
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     className: deleteIconStyles,
     onClick: trailingIcon.onClick,
     icon: trailingIcon.icon
   }));
-};
+};
+
+exports.RemoveFieldButton = RemoveFieldButton;

package/admin/plugins/fieldRenderers/dateTime/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UTC_TIMEZONES","value","label","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","split","time","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","deleteIconStyles","css","width","height","color","RemoveFieldButton","trailingIcon","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { CmsEditorField } from \"~/types\";\n\nexport const UTC_TIMEZONES = [\n    {\n        value: \"-12:00\",\n        label: \"UTC-12:00\"\n    },\n    {\n        value: \"-11:00\",\n        label: \"UTC-11:00\"\n    },\n    {\n        value: \"-10:00\",\n        label: \"UTC-10:00\"\n    },\n    {\n        value: \"-09:30\",\n        label: \"UTC-09:30\"\n    },\n    {\n        value: \"-09:00\",\n        label: \"UTC-09:00\"\n    },\n    {\n        value: \"-08:00\",\n        label: \"UTC-08:00\"\n    },\n    {\n        value: \"-07:00\",\n        label: \"UTC-07:00\"\n    },\n    {\n        value: \"-06:00\",\n        label: \"UTC-06:00\"\n    },\n    {\n        value: \"-05:00\",\n        label: \"UTC-05:00\"\n    },\n    {\n        value: \"-04:30\",\n        label: \"UTC-04:30\"\n    },\n    {\n        value: \"-04:00\",\n        label: \"UTC-04:00\"\n    },\n    {\n        value: \"-03:30\",\n        label: \"UTC-03:30\"\n    },\n    {\n        value: \"-03:00\",\n        label: \"UTC-03:00\"\n    },\n    {\n        value: \"-02:00\",\n        label: \"UTC-02:00\"\n    },\n    {\n        value: \"-01:00\",\n        label: \"UTC-01:00\"\n    },\n    {\n        value: \"+00:00\",\n        label: \"UTC+00:00\"\n    },\n    {\n        value: \"+01:00\",\n        label: \"UTC+01:00\"\n    },\n    {\n        value: \"+02:00\",\n        label: \"UTC+02:00\"\n    },\n    {\n        value: \"+03:00\",\n        label: \"UTC+03:00\"\n    },\n    {\n        value: \"+03:30\",\n        label: \"UTC+03:30\"\n    },\n    {\n        value: \"+04:00\",\n        label: \"UTC+04:00\"\n    },\n    {\n        value: \"+04:30\",\n        label: \"UTC+04:30\"\n    },\n    {\n        value: \"+05:30\",\n        label: \"UTC+05:30\"\n    },\n    {\n        value: \"+05:45\",\n        label: \"UTC+05:45\"\n    },\n    {\n        value: \"+06:00\",\n        label: \"UTC+06:00\"\n    },\n    {\n        value: \"+06:30\",\n        label: \"UTC+06:30\"\n    },\n    {\n        value: \"+07:00\",\n        label: \"UTC+07:00\"\n    },\n    {\n        value: \"+08:00\",\n        label: \"UTC+08:00\"\n    },\n    {\n        value: \"+08:45\",\n        label: \"UTC+08:45\"\n    },\n    {\n        value: \"+09:00\",\n        label: \"UTC+09:00\"\n    },\n    {\n        value: \"+09:30\",\n        label: \"UTC+09:30\"\n    },\n    {\n        value: \"+10:00\",\n        label: \"UTC+10:00\"\n    },\n    {\n        value: \"+10:30\",\n        label: \"UTC+10:30\"\n    },\n    {\n        value: \"+11:00\",\n        label: \"UTC+11:00\"\n    },\n    {\n        value: \"+11:30\",\n        label: \"UTC+11:30\"\n    },\n    {\n        value: \"+12:00\",\n        label: \"UTC+12:00\"\n    },\n    {\n        value: \"+12:45\",\n        label: \"UTC+12:45\"\n    },\n    {\n        value: \"+13:00\",\n        label: \"UTC+13:00\"\n    },\n    {\n        value: \"+14:00\",\n        label: \"UTC+14:00\"\n    }\n];\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsEditorField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nconst deleteIconStyles = css({\n    width: \"100% !important\",\n    height: \"100% !important\",\n    color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n});\n\ninterface RemoveFieldButtonProps {\n    // TODO @ts-refactor figure out correct trailing icon type\n    // @ts-ignore\n    trailingIcon: any;\n}\nexport const RemoveFieldButton: React.FC<RemoveFieldButtonProps> = ({ trailingIcon }) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Cell span={1}>\n            <IconButton\n                className={deleteIconStyles}\n                onClick={trailingIcon.onClick}\n                icon={trailingIcon.icon}\n            />\n        </Cell>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/file/File.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
-export interface Props {
+export interface FileProps {
     url: string;
-    onRemove: Function;
-    placeholder: string;
+    onRemove: () => void;
+    placeholder?: string;
     styles?: Record<string, any>;
-    showFileManager?: Function;
+    showFileManager?: () => void;
     validation?: {
         isValid?: boolean;
         message?: string;
     };
     description?: string;
 }
-declare const File: React.FunctionComponent<Props>;
+declare const File: React.FC<FileProps>;
 export default File;

package/admin/plugins/fieldRenderers/file/File.js

@@ -1,9 +1,26 @@
-import React, { useCallback } from "react";
-import { Image } from "@webiny/app/components";
-import * as Ui from "@webiny/ui/ImageUpload";
-import { createRenderImagePreview, imageExtensions } from "./utils";
-import fileIcon from "../../fields/icons/round_insert_drive_file-24px.svg";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+"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 _components = require("@webiny/app/components");
+
+var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
+
+var _utils = require("./utils");
+
+var _round_insert_drive_file24px = _interopRequireDefault(require("../../fields/icons/round_insert_drive_file-24px.svg"));
+
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+
 var imagePreviewProps = {
   transform: {
     width: 300
@@ -19,8 +36,8 @@ var defaultStyles = {
   height: "auto"
 };
 var defaultValidation = {
-  isValid: null,
-  message: null
+  isValid: undefined,
+  message: undefined
 };
 
 var File = function File(props) {
@@ -31,26 +48,26 @@ var File = function File(props) {
       description = props.description;
   var styles = props.styles || defaultStyles;
   var validation = props.validation || defaultValidation;
-  var isImage = useCallback(function (url) {
-    return imageExtensions.some(function (extension) {
+  var isImage = (0, _react.useCallback)(function (url) {
+    return _utils.imagePlugins.some(function (extension) {
       return url.includes(extension);
     });
   }, []);
-  var getImageSrc = useCallback(function (url) {
+  var getImageSrc = (0, _react.useCallback)(function (url) {
     if (url && isImage(url)) {
       return url;
     }
 
-    return fileIcon;
-  }, []);
+    return _round_insert_drive_file24px.default;
+  }, []); // TODO @ts-refactor figure out correct type
 
   var defaultRenderImagePreview = function defaultRenderImagePreview(renderImageProps) {
-    return /*#__PURE__*/React.createElement(Image, Object.assign({}, renderImageProps, imagePreviewProps));
+    return /*#__PURE__*/_react.default.createElement(_components.Image, Object.assign({}, renderImageProps, imagePreviewProps));
   };
 
   var renderImagePreview = function renderImagePreview(url) {
     if (url && !isImage(url)) {
-      return createRenderImagePreview({
+      return (0, _utils.createRenderImagePreview)({
         value: url,
         imagePreviewProps: imagePreviewProps
       });
@@ -59,21 +76,28 @@ var File = function File(props) {
     return defaultRenderImagePreview;
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ui.Image, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Ui.Image, {
     renderImagePreview: renderImagePreview(url),
     style: styles,
     value: url ? {
       src: getImageSrc(url)
     } : null,
-    uploadImage: showFileManager,
+    uploadImage: function uploadImage() {
+      if (!showFileManager) {
+        return;
+      }
+
+      showFileManager();
+    },
     removeImage: onRemove,
     placeholder: placeholder,
     containerStyle: {
       height: "auto"
     }
-  }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+  }), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
     error: true
-  }, validation.message || "Invalid value."), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+  }, validation.message || "Invalid value."), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
 };
 
-export default File;
+var _default = File;
+exports.default = _default;

package/admin/plugins/fieldRenderers/file/File.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imagePreviewProps","transform","width","style","height","objectFit","defaultStyles","defaultValidation","isValid","undefined","message","File","props","url","onRemove","placeholder","showFileManager","description","styles","validation","isImage","useCallback","imagePlugins","some","extension","includes","getImageSrc","fileIcon","defaultRenderImagePreview","renderImageProps","renderImagePreview","createRenderImagePreview","value","src"],"sources":["File.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Image } from \"@webiny/app/components\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { createRenderImagePreview, imagePlugins } from \"./utils\";\nimport fileIcon from \"../../fields/icons/round_insert_drive_file-24px.svg\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst imagePreviewProps = {\n    transform: { width: 300 },\n    style: { width: \"100%\", height: 232, objectFit: \"cover\" }\n};\n\nconst defaultStyles = {\n    width: \"100%\",\n    height: \"auto\"\n};\n\ninterface ValidationStatus {\n    isValid?: boolean;\n    message?: string;\n}\nconst defaultValidation: ValidationStatus = {\n    isValid: undefined,\n    message: undefined\n};\n\nexport interface FileProps {\n    url: string;\n    onRemove: () => void;\n    placeholder?: string;\n    styles?: Record<string, any>;\n    showFileManager?: () => void;\n    validation?: {\n        isValid?: boolean;\n        message?: string;\n    };\n    description?: string;\n}\nconst File: React.FC<FileProps> = props => {\n    const { url, onRemove, placeholder, showFileManager, description } = props;\n\n    const styles = props.styles || defaultStyles;\n    const validation = props.validation || defaultValidation;\n\n    const isImage = useCallback(url => {\n        return imagePlugins.some(extension => url.includes(extension));\n    }, []);\n\n    const getImageSrc = useCallback(url => {\n        if (url && isImage(url)) {\n            return url;\n        }\n        return fileIcon;\n    }, []);\n\n    // TODO @ts-refactor figure out correct type\n    const defaultRenderImagePreview = (renderImageProps: any) => (\n        <Image {...renderImageProps} {...imagePreviewProps} />\n    );\n\n    const renderImagePreview = (url: string) => {\n        if (url && !isImage(url)) {\n            return createRenderImagePreview({ value: url, imagePreviewProps });\n        }\n\n        return defaultRenderImagePreview;\n    };\n\n    return (\n        <>\n            <Ui.Image\n                renderImagePreview={renderImagePreview(url)}\n                style={styles}\n                value={url ? { src: getImageSrc(url) } : null}\n                uploadImage={() => {\n                    if (!showFileManager) {\n                        return;\n                    }\n                    showFileManager();\n                }}\n                removeImage={onRemove}\n                placeholder={placeholder}\n                containerStyle={{ height: \"auto\" }}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>\n                    {validation.message || \"Invalid value.\"}\n                </FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n\nexport default File;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/file/fileField.js

@@ -1,21 +1,35 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _components = require("@webiny/app-admin/components");
+
+var _File = _interopRequireDefault(require("./File"));
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { Cell, Grid } from "@webiny/ui/Grid";
-import { FileManager } from "@webiny/app-admin/components";
-import File from "./File";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-var t = i18n.ns("app-headless-cms/admin/fields/file");
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/file");
+
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-file",
   renderer: {
     rendererName: "file-input",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["File Input"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Enables selecting a single file via File Manager."]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["File Input"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Enables selecting a single file via File Manager."]))),
     canUse: function canUse(_ref) {
       var field = _ref.field;
       return field.type === "file" && !field.multipleValues;
@@ -26,39 +40,37 @@ var plugin = {
           Label = _ref2.Label;
       var Bind = getBind();
       var imagesOnly = field.settings && field.settings.imagesOnly;
-      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
         span: 12
-      }, /*#__PURE__*/React.createElement(Label, null, field.label), /*#__PURE__*/React.createElement(Bind, null, function (bind) {
+      }, /*#__PURE__*/_react.default.createElement(Label, null, field.label), /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
         var value = bind.value,
             onChange = bind.onChange;
-        return /*#__PURE__*/React.createElement(FileManager, {
-          multiple: false,
-          images: imagesOnly
-        }, function (_ref3) {
-          var showFileManager = _ref3.showFileManager;
-
-          var selectFile = function selectFile() {
-            showFileManager(function (newFile) {
-              if (newFile === null) {
-                return;
-              }
+        return /*#__PURE__*/_react.default.createElement(_components.FileManager, {
+          images: imagesOnly,
+          render: function render(_ref3) {
+            var showFileManager = _ref3.showFileManager;
 
-              onChange(newFile.src);
-            });
-          };
+            var selectFile = function selectFile() {
+              showFileManager(function (file) {
+                return onChange(file.src);
+              });
+            };
 
-          return /*#__PURE__*/React.createElement(File, Object.assign({}, bind, {
-            url: value,
-            onRemove: function onRemove() {
-              return onChange(null);
-            },
-            showFileManager: selectFile,
-            placeholder: field.placeholderText,
-            description: field.helpText
-          }));
+            return /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({}, bind, {
+              url: value,
+              onRemove: function onRemove() {
+                return onChange(null);
+              },
+              showFileManager: selectFile,
+              placeholder: field.placeholderText,
+              description: field.helpText,
+              "data-testid": "fr.input.filefield.".concat(field.label)
+            }));
+          }
         });
-      }), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText)));
+      })));
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/file/fileField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","Label","Bind","imagesOnly","settings","label","bind","value","onChange","showFileManager","selectFile","file","src","placeholderText","helpText"],"sources":["fileField.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { FileManager } from \"@webiny/app-admin/components\";\nimport File from \"./File\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/file\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-file\",\n    renderer: {\n        rendererName: \"file-input\",\n        name: t`File Input`,\n        description: t`Enables selecting a single file via File Manager.`,\n        canUse({ field }) {\n            return field.type === \"file\" && !field.multipleValues;\n        },\n        render({ field, getBind, Label }) {\n            const Bind = getBind();\n\n            const imagesOnly = field.settings && field.settings.imagesOnly;\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <Label>{field.label}</Label>\n                        <Bind>\n                            {bind => {\n                                const { value, onChange } = bind;\n\n                                return (\n                                    <FileManager\n                                        images={imagesOnly}\n                                        render={({ showFileManager }) => {\n                                            const selectFile = () => {\n                                                showFileManager(file => onChange(file.src));\n                                            };\n                                            return (\n                                                <File\n                                                    {...bind}\n                                                    url={value}\n                                                    onRemove={() => onChange(null)}\n                                                    showFileManager={selectFile}\n                                                    placeholder={field.placeholderText}\n                                                    description={field.helpText}\n                                                    data-testid={`fr.input.filefield.${field.label}`}\n                                                />\n                                            );\n                                        }}\n                                    />\n                                );\n                            }}\n                        </Bind>\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,gCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,YADR;IAENF,IAAI,EAAEL,CAAF,6FAFE;IAGNQ,WAAW,EAAER,CAAF,sIAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,MAAf,IAAyB,CAACM,KAAK,CAACC,cAAvC;IACH,CANK;IAONC,MAPM,yBAO4B;MAAA,IAAzBF,KAAyB,SAAzBA,KAAyB;MAAA,IAAlBG,OAAkB,SAAlBA,OAAkB;MAAA,IAATC,KAAS,SAATA,KAAS;MAC9B,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,UAAU,GAAGN,KAAK,CAACO,QAAN,IAAkBP,KAAK,CAACO,QAAN,CAAeD,UAApD;MACA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,KAAD,QAAQN,KAAK,CAACQ,KAAd,CADJ,eAEI,6BAAC,IAAD,QACK,UAAAC,IAAI,EAAI;QACL,IAAQC,KAAR,GAA4BD,IAA5B,CAAQC,KAAR;QAAA,IAAeC,QAAf,GAA4BF,IAA5B,CAAeE,QAAf;QAEA,oBACI,6BAAC,uBAAD;UACI,MAAM,EAAEL,UADZ;UAEI,MAAM,EAAE,uBAAyB;YAAA,IAAtBM,eAAsB,SAAtBA,eAAsB;;YAC7B,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;cACrBD,eAAe,CAAC,UAAAE,IAAI;gBAAA,OAAIH,QAAQ,CAACG,IAAI,CAACC,GAAN,CAAZ;cAAA,CAAL,CAAf;YACH,CAFD;;YAGA,oBACI,6BAAC,aAAD,oBACQN,IADR;cAEI,GAAG,EAAEC,KAFT;cAGI,QAAQ,EAAE;gBAAA,OAAMC,QAAQ,CAAC,IAAD,CAAd;cAAA,CAHd;cAII,eAAe,EAAEE,UAJrB;cAKI,WAAW,EAAEb,KAAK,CAACgB,eALvB;cAMI,WAAW,EAAEhB,KAAK,CAACiB,QANvB;cAOI,4CAAmCjB,KAAK,CAACQ,KAAzC;YAPJ,GADJ;UAWH;QAjBL,EADJ;MAqBH,CAzBL,CAFJ,CADJ,CADJ;IAkCH;EA7CK;AAH+B,CAA7C;eAoDef,M"}

package/admin/plugins/fieldRenderers/file/fileFields.js

@@ -1,18 +1,37 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _utils = require("./utils");
+
+var _components = require("@webiny/app-admin/components");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _File = _interopRequireDefault(require("./File"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React from "react";
-import dotProp from "dot-prop-immutable";
-import { i18n } from "@webiny/app/i18n";
-import { Cell, GridInner } from "@webiny/ui/Grid";
-import { imageWrapperStyles } from "./utils";
-import { FileManager } from "@webiny/app-admin/components";
-import styled from "@emotion/styled";
-import File from "./File";
-var t = i18n.ns("app-headless-cms/admin/fields/file");
-var FileUploadWrapper = /*#__PURE__*/styled("div", {
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/file");
+
+var FileUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq80mh0",
   label: "FileUploadWrapper"
 })({
@@ -26,69 +45,79 @@ var FileUploadWrapper = /*#__PURE__*/styled("div", {
   }
 });
 
-function FieldRenderer(_ref) {
+var FieldRenderer = function FieldRenderer(_ref) {
   var getBind = _ref.getBind,
       Label = _ref.Label,
       field = _ref.field;
   var Bind = getBind();
   var imagesOnly = field.settings && field.settings.imagesOnly;
-  return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
-    var value = bind.value,
-        onChange = bind.onChange;
-    return /*#__PURE__*/React.createElement(FileUploadWrapper, {
-      className: imageWrapperStyles
-    }, /*#__PURE__*/React.createElement(FileManager, {
+  return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+    var onChange = bind.onChange; // We need to make sure the value is an array, since this is a multi-value component.
+
+    var value = (Array.isArray(bind.value) ? bind.value : [bind.value]).filter(Boolean);
+    return /*#__PURE__*/_react.default.createElement(FileUploadWrapper, {
+      className: _utils.imageWrapperStyles
+    }, /*#__PURE__*/_react.default.createElement(_components.FileManager, {
       multiple: true,
-      images: imagesOnly
-    }, function (_ref2) {
-      var showFileManager = _ref2.showFileManager;
-
-      var selectFiles = function selectFiles() {
-        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-        showFileManager(function (files) {
-          if (!files) {
-            return;
-          }
+      images: imagesOnly,
+      render: function render(_ref2) {
+        var showFileManager = _ref2.showFileManager;
+
+        var selectFiles = function selectFiles() {
+          var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+          showFileManager(function (files) {
+            var urls = files.map(function (f) {
+              return f.src;
+            });
 
-          var urls = files.map(function (f) {
-            return f.src;
+            if (index === -1) {
+              onChange([].concat((0, _toConsumableArray2.default)(value), (0, _toConsumableArray2.default)(urls)));
+            } else {
+              onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(urls), (0, _toConsumableArray2.default)(value.slice(index + 1))));
+            }
           });
+        };
 
-          if (index === -1) {
-            onChange([].concat(_toConsumableArray(value || []), _toConsumableArray(urls)));
-          } else {
-            onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(urls), _toConsumableArray(value.slice(index + 1))));
+        return /*#__PURE__*/_react.default.createElement(_Grid.GridInner, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 12
+        }, /*#__PURE__*/_react.default.createElement(Label, null, field.label)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.map(function (url, index) {
+          return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+            span: 3,
+            key: url
+          }, /*#__PURE__*/_react.default.createElement(_File.default, {
+            url: url,
+            showFileManager: function showFileManager() {
+              return selectFiles(index);
+            },
+            onRemove: function onRemove() {
+              return onChange(_dotPropImmutable.default.delete(value, index));
+            },
+            placeholder: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
+            "data-testid": "fr.input.file.".concat(field.label, ".").concat(index)
+          }));
+        })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 3
+        }, /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({
+          url: "",
+          onRemove: function onRemove() {
+            return void 0;
           }
-        });
-      };
-
-      return /*#__PURE__*/React.createElement(GridInner, null, /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(Label, null, field.label)), value.map(function (url, index) {
-        return /*#__PURE__*/React.createElement(Cell, {
-          span: 3,
-          key: url
-        }, /*#__PURE__*/React.createElement(File, {
-          url: url,
+        }, bind, {
           showFileManager: function showFileManager() {
-            return selectFiles(index);
-          },
-          onRemove: function onRemove() {
-            return onChange(dotProp.delete(value, index));
+            return selectFiles();
           },
-          placeholder: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Select a file\""])))
-        }));
-      }), /*#__PURE__*/React.createElement(Cell, {
-        span: 3
-      }, /*#__PURE__*/React.createElement(File, Object.assign({}, bind, {
-        showFileManager: function showFileManager() {
-          return selectFiles();
-        },
-        placeholder: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Select a file\""])))
-      }))));
+          placeholder: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
+          "data-testid": "fr.input.file.".concat(field.label)
+        }))));
+      }
     }));
   });
-}
+};
+/**
+ * Not used?
+ */
+// TODO @ts-refactor
+
 
 FieldRenderer.defaultProps = {
   validation: {
@@ -104,17 +133,17 @@ var plugin = {
   name: "cms-editor-field-renderer-files",
   renderer: {
     rendererName: "file-inputs",
-    name: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["File Inputs"]))),
-    description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Enables selecting multiple files via File Manager."]))),
+    name: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["File Inputs"]))),
+    description: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Enables selecting multiple files via File Manager."]))),
     canUse: function canUse(_ref3) {
       var field = _ref3.field;
-      return field.type === "file" && field.multipleValues;
+      return field.type === "file" && !!field.multipleValues;
     },
     render: function render(_ref4) {
       var field = _ref4.field,
           getBind = _ref4.getBind,
           Label = _ref4.Label;
-      return /*#__PURE__*/React.createElement(FieldRenderer, {
+      return /*#__PURE__*/_react.default.createElement(FieldRenderer, {
         field: field,
         getBind: getBind,
         Label: Label
@@ -122,4 +151,5 @@ var plugin = {
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;