@webiny/app-headless-cms 0.0.0-mt-1

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

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

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

@@ -0,0 +1,79 @@
+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";
+var imagePreviewProps = {
+  transform: {
+    width: 300
+  },
+  style: {
+    width: "100%",
+    height: 232,
+    objectFit: "cover"
+  }
+};
+var defaultStyles = {
+  width: "100%",
+  height: "auto"
+};
+var defaultValidation = {
+  isValid: null,
+  message: null
+};
+
+var File = function File(props) {
+  var url = props.url,
+      onRemove = props.onRemove,
+      placeholder = props.placeholder,
+      showFileManager = props.showFileManager,
+      description = props.description;
+  var styles = props.styles || defaultStyles;
+  var validation = props.validation || defaultValidation;
+  var isImage = useCallback(function (url) {
+    return imageExtensions.some(function (extension) {
+      return url.includes(extension);
+    });
+  }, []);
+  var getImageSrc = useCallback(function (url) {
+    if (url && isImage(url)) {
+      return url;
+    }
+
+    return fileIcon;
+  }, []);
+
+  var defaultRenderImagePreview = function defaultRenderImagePreview(renderImageProps) {
+    return /*#__PURE__*/React.createElement(Image, Object.assign({}, renderImageProps, imagePreviewProps));
+  };
+
+  var renderImagePreview = function renderImagePreview(url) {
+    if (url && !isImage(url)) {
+      return createRenderImagePreview({
+        value: url,
+        imagePreviewProps: imagePreviewProps
+      });
+    }
+
+    return defaultRenderImagePreview;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ui.Image, {
+    renderImagePreview: renderImagePreview(url),
+    style: styles,
+    value: url ? {
+      src: getImageSrc(url)
+    } : null,
+    uploadImage: showFileManager,
+    removeImage: onRemove,
+    placeholder: placeholder,
+    containerStyle: {
+      height: "auto"
+    }
+  }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+    error: true
+  }, validation.message || "Invalid value."), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+};
+
+export default File;

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

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

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

@@ -0,0 +1,64 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+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 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."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "file" && !field.multipleValues;
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind,
+          Label = _ref2.Label;
+      var Bind = getBind();
+      var imagesOnly = field.settings && field.settings.imagesOnly;
+      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Label, null, field.label), /*#__PURE__*/React.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;
+              }
+
+              onChange(newFile.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
+          }));
+        });
+      }), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText)));
+    }
+  }
+};
+export default plugin;

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

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

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

@@ -0,0 +1,125 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+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", {
+  target: "eq80mh0",
+  label: "FileUploadWrapper"
+})({
+  position: "relative",
+  ".disabled": {
+    opacity: 0.75,
+    pointerEvents: "none"
+  },
+  ".mdc-text-field-helper-text": {
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  }
+});
+
+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, {
+      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;
+          }
+
+          var urls = files.map(function (f) {
+            return f.src;
+          });
+
+          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.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,
+          showFileManager: function showFileManager() {
+            return selectFiles(index);
+          },
+          onRemove: function onRemove() {
+            return onChange(dotProp.delete(value, index));
+          },
+          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\""])))
+      }))));
+    }));
+  });
+}
+
+FieldRenderer.defaultProps = {
+  validation: {
+    isValid: null
+  },
+  styles: {
+    width: "100%",
+    height: "auto"
+  }
+};
+var plugin = {
+  type: "cms-editor-field-renderer",
+  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."]))),
+    canUse: function canUse(_ref3) {
+      var field = _ref3.field;
+      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, {
+        field: field,
+        getBind: getBind,
+        Label: Label
+      });
+    }
+  }
+};
+export default plugin;

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

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+export default _default;

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

@@ -0,0 +1,3 @@
+import fileField from "./fileField";
+import fileFields from "./fileFields";
+export default [fileField, fileFields];

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const imageExtensions: string[];
+export declare const imageWrapperStyles: string;
+export declare const createRenderImagePreview: ({ value, imagePreviewProps }: {
+    value: any;
+    imagePreviewProps: any;
+}) => (renderImageProps: any) => JSX.Element;

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

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { css } from "emotion";
+import { ReactComponent as FileIcon } from "@svgr/webpack!../../fields/icons/round_insert_drive_file-24px.svg";
+export var imageExtensions = [".jpg", ".jpeg", ".gif", ".png", ".svg"];
+export var imageWrapperStyles = /*#__PURE__*/css({
+  height: "auto"
+}, "label:imageWrapperStyles;");
+var fileLabel = /*#__PURE__*/css({
+  padding: "10px",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  fontSize: "0.8rem",
+  color: "var(--mdc-theme-on-surface)",
+  backgroundColor: "var(--mdc-theme-on-background)"
+}, "label:fileLabel;");
+var IconWrapperStyle = /*#__PURE__*/css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: 200
+}, "label:IconWrapperStyle;");
+var IconStyle = /*#__PURE__*/css({
+  width: 64,
+  height: 64
+}, "label:IconStyle;");
+export var createRenderImagePreview = function createRenderImagePreview(_ref) {
+  var value = _ref.value,
+      imagePreviewProps = _ref.imagePreviewProps;
+  var fileName = getFileName(value);
+
+  var renderImagePreview = function renderImagePreview(renderImageProps) {
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, renderImageProps, imagePreviewProps), /*#__PURE__*/React.createElement("div", {
+      className: IconWrapperStyle
+    }, /*#__PURE__*/React.createElement(FileIcon, {
+      className: IconStyle
+    })), /*#__PURE__*/React.createElement("div", {
+      className: fileLabel
+    }, fileName));
+  };
+
+  return renderImagePreview;
+};
+
+var getFileName = function getFileName(value) {
+  if (!value) {
+    return "";
+  }
+
+  return value.split("/").pop();
+};

package/admin/plugins/fieldRenderers/longText/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+export default _default;

package/admin/plugins/fieldRenderers/longText/index.js

@@ -0,0 +1,3 @@
+import longText from "./longText";
+import longTexts from "./longTexts";
+export default [longText, longTexts];

package/admin/plugins/fieldRenderers/longText/longText.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/longText/longText.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import get from "lodash/get";
+import { Input } from "@webiny/ui/Input";
+import { i18n } from "@webiny/app/i18n";
+var t = i18n.ns("app-headless-cms/admin/fields/text");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-long-text-textarea",
+  renderer: {
+    rendererName: "long-text-text-area",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Text Area"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple text area, suitable for larger amounts of text."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "long-text" && !field.multipleValues && !get(field, "predefinedValues.enabled");
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind;
+      var Bind = getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
+        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind, {
+          rows: 5,
+          label: field.label,
+          placeholder: field.placeholderText,
+          description: field.helpText
+        }));
+      });
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/longText/longTexts.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/longText/longTexts.js

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import React from "react";
+import get from "lodash/get";
+import { Input } from "@webiny/ui/Input";
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
+import DynamicSection from "../DynamicSection";
+var t = i18n.ns("app-headless-cms/admin/fields/text");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-long-text-inputs",
+  renderer: {
+    rendererName: "long-text-inputs",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Text Areas"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple list of text areas."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "long-text" && field.multipleValues && !get(field, "predefinedValues.enabled");
+    },
+    render: function render(props) {
+      return /*#__PURE__*/React.createElement(DynamicSection, props, function (_ref2) {
+        var bind = _ref2.bind,
+            index = _ref2.index;
+        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind.index, {
+          rows: 5,
+          label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Value {number}"])))({
+            number: index + 1
+          }),
+          trailingIcon: index > 0 && {
+            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+            onClick: function onClick() {
+              return bind.field.removeValue(index);
+            }
+          }
+        }));
+      });
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/number/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+export default _default;

package/admin/plugins/fieldRenderers/number/index.js

@@ -0,0 +1,3 @@
+import numberInput from "./numberInput";
+import numberInputs from "./numberInputs";
+export default [numberInput, numberInputs];

package/admin/plugins/fieldRenderers/number/numberInput.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/number/numberInput.js

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import get from "lodash/get";
+import { Input } from "@webiny/ui/Input";
+import { i18n } from "@webiny/app/i18n";
+var t = i18n.ns("app-headless-cms/admin/fields/number");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-number",
+  renderer: {
+    rendererName: "number-input",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Number Input"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple input with its type set to \"number\"."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "number" && !field.multipleValues && !get(field, "predefinedValues.enabled");
+    },
+    render: function render(_ref2) {
+      var field = _ref2.field,
+          getBind = _ref2.getBind;
+      var Bind = getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, function (bindProps) {
+        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bindProps, {
+          onChange: function onChange(value) {
+            return bindProps.onChange(value);
+          },
+          label: field.label,
+          placeholder: field.placeholderText,
+          description: field.helpText,
+          type: "number"
+        }));
+      });
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/number/numberInputs.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/number/numberInputs.js

@@ -0,0 +1,50 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import React from "react";
+import get from "lodash/get";
+import { Input } from "@webiny/ui/Input";
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
+import DynamicSection from "../DynamicSection";
+var t = i18n.ns("app-headless-cms/admin/fields/text");
+var plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-number-inputs",
+  renderer: {
+    rendererName: "number-inputs",
+    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Number Inputs"]))),
+    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple list of number inputs."]))),
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
+      return field.type === "number" && field.multipleValues && !get(field, "predefinedValues.enabled");
+    },
+    render: function render(props) {
+      return /*#__PURE__*/React.createElement(DynamicSection, props, function (_ref2) {
+        var bind = _ref2.bind,
+            index = _ref2.index;
+        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind.index, {
+          onChange: function onChange(value) {
+            return bind.index.onChange(value);
+          },
+          autoFocus: true,
+          onEnter: function onEnter() {
+            return bind.field.appendValue("");
+          },
+          label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Value {number}"])))({
+            number: index + 1
+          }),
+          type: "number",
+          trailingIcon: index > 0 && {
+            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+            onClick: function onClick() {
+              return bind.field.removeValue(index);
+            }
+          }
+        }));
+      });
+    }
+  }
+};
+export default plugin;

package/admin/plugins/fieldRenderers/object/StyledComponents.d.ts

@@ -0,0 +1,4 @@
+export declare const fieldsWrapperStyle: string;
+export declare const dynamicSectionTitleStyle: string;
+export declare const dynamicSectionGridStyle: string;
+export declare const fieldsGridStyle: string;

package/admin/plugins/fieldRenderers/object/StyledComponents.js

@@ -0,0 +1,5 @@
+import { css } from "emotion";
+export var fieldsWrapperStyle = /*#__PURE__*/css("border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;&:focus-within{border-color:var(--mdc-theme-primary);}label:fieldsWrapperStyle;");
+export var dynamicSectionTitleStyle = /*#__PURE__*/css("margin-top:24px;label:dynamicSectionTitleStyle;");
+export var dynamicSectionGridStyle = /*#__PURE__*/css("& > .mdc-layout-grid__inner{grid-gap:8px;}label:dynamicSectionGridStyle;");
+export var fieldsGridStyle = /*#__PURE__*/css("&.mdc-layout-grid{padding:8px;}label:fieldsGridStyle;");

package/admin/plugins/fieldRenderers/object/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+export default _default;

package/admin/plugins/fieldRenderers/object/index.js

@@ -0,0 +1,3 @@
+import singleObject from "./singleObject";
+import multipleObjects from "./multipleObjects";
+export default [singleObject, multipleObjects];

package/admin/plugins/fieldRenderers/object/multipleObjects.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsEditorFieldRendererPlugin;
+export default plugin;