@open-formulieren/formio-builder/lib/esm/registry/file/file-tab.js

An opinionated Formio webform builder for Open Forms

import { jsxs as u, Fragment as h, jsx as e } from "react/jsx-runtime";
import { useFormikContext as d } from "formik";
import { isEqual as I } from "lodash";
import { useContext as v } from "react";
import { useIntl as n, FormattedMessage as i } from "react-intl";
import { useAsync as T } from "react-use";
import "../../components/formio/tabs.js";
import w from "../../components/formio/component.js";
import "@floating-ui/react";
import { TextFieldMultiple as M } from "../../components/formio/textfield.js";
import b from "../../components/formio/checkbox.js";
import "clsx";
import { BuilderContext as x } from "../../context.js";
/* empty css                                           */
/* empty css                                 */
import A from "../../components/formio/select.js";
import { NumberField as p } from "../../components/formio/number.js";
import "../../components/formio/datagrid.js";
const F = (a) => a.some((t) => t.startsWith("image/") || t === "*"), R = () => {
  const a = n(), t = a.formatMessage({
    id: "1pC7IP",
    defaultMessage: [{
      type: 0,
      value: "Specify template for name of uploaded file(s). "
    }, {
      type: 8,
      value: "code",
      children: [{
        type: 0,
        value: "{{ fileName }}"
      }]
    }, {
      type: 0,
      value: " contains the original filename."
    }]
  }, {
    code: (l) => /* @__PURE__ */ e("code", { children: l })
  });
  return /* @__PURE__ */ e(M, { name: "file.name", label: /* @__PURE__ */ e(i, { id: "1Vvryq", defaultMessage: [{
    type: 0,
    value: "File name template"
  }] }), tooltip: t, placeholder: a.formatMessage({
    id: "hduHvs",
    defaultMessage: [{
      type: 0,
      value: "(optional)"
    }]
  }) });
}, j = () => {
  var g;
  const {
    getFileTypes: a
  } = v(x), {
    values: t,
    initialValues: l,
    setFieldValue: s
  } = d(), o = (g = l.of) == null ? void 0 : g.image, {
    value: f,
    loading: z,
    error: c
  } = T(async () => await a(), []);
  if (c)
    throw c;
  return /* @__PURE__ */ e(A, { name: "file.type", label: /* @__PURE__ */ e(i, { id: "Ax7r1y", defaultMessage: [{
    type: 0,
    value: "File types"
  }] }), isLoading: z, isClearable: !0, isMulti: !0, options: f, valueProperty: "value", onChange: (C) => {
    var y;
    const {
      value: m
    } = C.target;
    s("filePattern", m.join(","));
    const N = (f || []).filter((r) => m.includes(r.value)).map((r) => r.label);
    s("file.allowedTypesLabels", N), !F(m) && !I((y = t.of) == null ? void 0 : y.image, o) && s("of.image", o);
  } });
}, S = () => {
  const t = n().formatMessage({
    id: "RxmRzd",
    defaultMessage: [{
      type: 0,
      value: "When this is checked, the filetypes configured in the global settings will be used."
    }]
  });
  return /* @__PURE__ */ e(b, { name: "useConfigFiletypes", label: /* @__PURE__ */ e(i, { id: "JnAJoU", defaultMessage: [{
    type: 0,
    value: "Use globally configured filetypes"
  }] }), tooltip: t });
}, U = () => {
  const a = n(), {
    serverUploadLimit: t
  } = v(x), l = a.formatMessage({
    id: "fX5VwA",
    defaultMessage: [{
      type: 0,
      value: "The maximum size of a single file to upload."
    }]
  });
  return /* @__PURE__ */ e(M, { name: "fileMaxSize", label: /* @__PURE__ */ e(i, { id: "CG/va1", defaultMessage: [{
    type: 0,
    value: "Maximum file size"
  }] }), tooltip: l, description: /* @__PURE__ */ e(i, { id: "2ajYIp", defaultMessage: [{
    type: 0,
    value: "Note that the server upload limit is "
  }, {
    type: 1,
    value: "serverUploadLimit"
  }, {
    type: 0,
    value: "."
  }], values: {
    serverUploadLimit: t
  } }) });
}, k = () => {
  const t = n().formatMessage({
    id: "KrJ+rN",
    defaultMessage: [{
      type: 0,
      value: "The maximum number of files that can be uploaded."
    }]
  });
  return /* @__PURE__ */ e(p, { name: "maxNumberOfFiles", label: /* @__PURE__ */ e(i, { id: "aBADYT", defaultMessage: [{
    type: 0,
    value: "Maximum number of files"
  }] }), tooltip: t, min: 1, step: 1 });
}, L = () => {
  const t = n().formatMessage({
    id: "n9T2Oy",
    defaultMessage: [{
      type: 0,
      value: "When this is checked, any uploaded image(s) will be resized."
    }]
  });
  return /* @__PURE__ */ e(b, { name: "of.image.resize.apply", label: /* @__PURE__ */ e(i, { id: "+e1pgl", defaultMessage: [{
    type: 0,
    value: "Resize image"
  }] }), tooltip: t });
}, O = () => {
  var l, s, o;
  const {
    values: a
  } = d(), t = ((o = (s = (l = a == null ? void 0 : a.of) == null ? void 0 : l.image) == null ? void 0 : s.resize) == null ? void 0 : o.apply) ?? !1;
  return /* @__PURE__ */ u(h, { children: [
    /* @__PURE__ */ e(L, {}),
    t && /* @__PURE__ */ e(w, { type: "columns", children: /* @__PURE__ */ u("div", { className: "columns", children: [
      /* @__PURE__ */ e("div", { className: "column column--span-md", children: /* @__PURE__ */ e(p, { name: "of.image.resize.width", label: /* @__PURE__ */ e(i, { id: "Y4oNhH", defaultMessage: [{
        type: 0,
        value: "Maximum width"
      }] }), min: 0, step: 100 }) }),
      /* @__PURE__ */ e("div", { className: "column column--span-md", children: /* @__PURE__ */ e(p, { name: "of.image.resize.height", label: /* @__PURE__ */ e(i, { id: "yujuQr", defaultMessage: [{
        type: 0,
        value: "Maximum height"
      }] }), min: 0, step: 100 }) })
    ] }) })
  ] });
}, ie = () => {
  const {
    values: a
  } = d(), t = F(a.file.type);
  return /* @__PURE__ */ u(h, { children: [
    /* @__PURE__ */ e(R, {}),
    /* @__PURE__ */ e(j, {}),
    /* @__PURE__ */ e(S, {}),
    t && /* @__PURE__ */ e(O, {}),
    /* @__PURE__ */ e(U, {}),
    /* @__PURE__ */ e(k, {})
  ] });
};
export {
  ie as default
};