@plone/volto 18.0.0-alpha.42 → 18.0.0-alpha.44

package/dist/server/assets/FileWidget-B3jY_tIe.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { lazy } from "react";
+import PropTypes from "prop-types";
+import { Dimmer, Image, Button } from "semantic-ui-react";
+import { readAsDataURL } from "promise-file-reader";
+import { injectIntl, defineMessages, useIntl } from "react-intl";
+import { f as flattenToAppURL, a5 as FormFieldWrapper, N as UniversalLink, I as Icon, b6 as deleteSVG, bd as validateFileUploadSize } from "../entry-server.js";
+import "classnames";
+import "lodash-es";
+import "moment";
+import "react-redux";
+import "react-router";
+import "react-router-hash-link";
+import "tlds";
+import "prepend-http";
+import "react-router-dom";
+import "redux";
+import "lodash-move";
+import "react-dom";
+import "react-dom/server";
+import "react-transition-group";
+import "react-toastify";
+import "uuid";
+import "pretty-bytes";
+import "react-side-effect";
+import "github-slugger";
+import "slate";
+import "hoist-non-react-statics";
+import "query-string";
+import "slate-react";
+import "prettier/standalone";
+import "prettier/parser-html";
+import "prismjs/components/prism-core.js";
+import "react-animate-height";
+import "react-popper";
+import "react-sortable-hoc";
+import "react-dates/initialize.js";
+import "react-anchor-link-smooth-scroll";
+import "jwt-decode";
+import "react-router-config";
+import "react-fast-compare";
+import "object-assign";
+import "lodash-es/split.js";
+import "lodash-es/join.js";
+import "lodash-es/trim.js";
+import "react-cookie";
+import "react-intl-redux";
+import "universal-cookie";
+import "slate-hyperscript";
+import "is-hotkey";
+import "react-dropzone";
+import "react-intersection-observer";
+import "is-url";
+import "lodash-es/isUndefined.js";
+import "lodash-es/isString.js";
+import "redux-mock-store";
+import "serialize-javascript";
+import "superagent";
+import "connected-react-router";
+import "react-beautiful-dnd";
+import "detect-browser";
+import "locale";
+import "history";
+import "redux-thunk";
+import "redux-localstorage-simple";
+import "debug";
+import "express";
+import "http-proxy-middleware";
+const imageMimetypes = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/jpg",
+  "image/gif",
+  "image/svg+xml"
+];
+const Dropzone = lazy(() => import("react-dropzone"));
+const messages = defineMessages({
+  releaseDrag: {
+    id: "Drop files here ...",
+    defaultMessage: "Drop files here ..."
+  },
+  editFile: {
+    id: "Drop file here to replace the existing file",
+    defaultMessage: "Drop file here to replace the existing file"
+  },
+  fileDrag: {
+    id: "Drop file here to upload a new file",
+    defaultMessage: "Drop file here to upload a new file"
+  },
+  replaceFile: {
+    id: "Replace existing file",
+    defaultMessage: "Replace existing file"
+  },
+  addNewFile: {
+    id: "Choose a file",
+    defaultMessage: "Choose a file"
+  }
+});
+const FileWidget = (props) => {
+  const { id, value, onChange, isDisabled } = props;
+  const [fileType, setFileType] = React__default.useState(false);
+  const intl = useIntl();
+  React__default.useEffect(() => {
+    if (value && imageMimetypes.includes(value["content-type"])) {
+      setFileType(true);
+    }
+  }, [value]);
+  const imgsrc = (value == null ? void 0 : value.download) ? `${flattenToAppURL(value == null ? void 0 : value.download)}?id=${Date.now()}` : (value == null ? void 0 : value.data) ? `data:${value["content-type"]};${value.encoding},${value.data}` : null;
+  const onDrop = (files) => {
+    const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
+    readAsDataURL(file).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      onChange(id, {
+        data: fields[3],
+        encoding: fields[2],
+        "content-type": fields[1],
+        filename: file.name
+      });
+    });
+    let reader = new FileReader();
+    reader.onload = function() {
+      const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
+      if (imageMimetypes.includes(fields[1])) {
+        setFileType(true);
+        let imagePreview = document.getElementById(`field-${id}-image`);
+        if (imagePreview) imagePreview.src = reader.result;
+      } else {
+        setFileType(false);
+      }
+    };
+    reader.readAsDataURL(files[0]);
+  };
+  return /* @__PURE__ */ jsxs(FormFieldWrapper, { ...props, children: [
+    /* @__PURE__ */ jsx(Dropzone, { onDrop, children: ({ getRootProps, getInputProps, isDragActive }) => /* @__PURE__ */ jsxs("div", { className: "file-widget-dropzone", ...getRootProps(), children: [
+      isDragActive && /* @__PURE__ */ jsx(Dimmer, { active: true }),
+      fileType ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "image-preview",
+          id: `field-${id}-image`,
+          size: "small",
+          src: imgsrc
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "dropzone-placeholder", children: isDragActive ? /* @__PURE__ */ jsx("p", { className: "dropzone-text", children: intl.formatMessage(messages.releaseDrag) }) : value ? /* @__PURE__ */ jsx("p", { className: "dropzone-text", children: intl.formatMessage(messages.editFile) }) : /* @__PURE__ */ jsx("p", { className: "dropzone-text", children: intl.formatMessage(messages.fileDrag) }) }),
+      /* @__PURE__ */ jsx("label", { className: "label-file-widget-input", children: value ? intl.formatMessage(messages.replaceFile) : intl.formatMessage(messages.addNewFile) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...getInputProps({
+            type: "file",
+            style: { display: "none" }
+          }),
+          id: `field-${id}`,
+          name: id,
+          type: "file",
+          disabled: isDisabled
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "field-file-name", children: [
+      value && /* @__PURE__ */ jsx(UniversalLink, { href: value.download, download: true, children: value.filename }),
+      value && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          icon: true,
+          basic: true,
+          className: "delete-button",
+          "aria-label": "delete file",
+          disabled: isDisabled,
+          onClick: () => {
+            onChange(id, null);
+            setFileType(false);
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: deleteSVG, size: "20px" })
+        }
+      )
+    ] })
+  ] });
+};
+FileWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.shape({
+    "@type": PropTypes.string,
+    title: PropTypes.string
+  }),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool
+};
+FileWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null
+};
+const FileWidget$1 = injectIntl(FileWidget);
+export {
+  FileWidget$1 as default
+};