@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js

@@ -1,150 +1,102 @@
-"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var _NewRefEntryFormDialog = _interopRequireWildcard(require("./NewRefEntryFormDialog"));
-
-var _AutoComplete = require("@webiny/ui/AutoComplete");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _reactRouter = require("@webiny/react-router");
-
-var _useNewRefEntry2 = require("../hooks/useNewRefEntry");
-
-var _useReference2 = require("./useReference");
-
-var _renderItem = require("./renderItem");
-
-var _createEntryUrl = require("./createEntryUrl");
-
-var _EntryStatus = require("./EntryStatus");
-
-var _utils = require("@webiny/utils");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
-
-var unpublishedLabel = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
-var publishedLabel = t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Selected content entry is published. You can view it {here}."])));
-
-var getItemOption = function getItemOption(options, id) {
-  if (!id || !options || options.length === 0) {
-    return null;
-  }
-
-  var _parseIdentifier = (0, _utils.parseIdentifier)(id),
-      entryId = _parseIdentifier.id;
-
-  return options.find(function (item) {
-    return item.entryId === entryId;
-  }) || null;
-};
-
-var ContentEntriesAutocomplete = function ContentEntriesAutocomplete(_ref) {
-  var bind = _ref.bind,
-      field = _ref.field;
-
-  var _useReference = (0, _useReference2.useReference)({
-    bind: bind,
-    field: field
-  }),
-      options = _useReference.options,
-      setSearch = _useReference.setSearch,
-      value = _useReference.value,
-      loading = _useReference.loading,
-      _onChange = _useReference.onChange;
-
-  var entryInfo = null;
-
-  if (value && !value.published) {
-    var link = (0, _createEntryUrl.createEntryUrl)(value);
-    entryInfo = unpublishedLabel({
-      publishItLink: /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
-        to: link
-      }, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["publish it"]))))
+import react, { useCallback, useMemo, useState } from "react";
+import debounce from "lodash/debounce.js";
+import { NewEntryButton } from "./NewEntryButton.js";
+import { AutoComplete } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { SimpleLink } from "@webiny/app-admin";
+import { useNewRefEntry } from "../hooks/useNewRefEntry.js";
+import { useReference } from "./useReference.js";
+import { createEntryUrl } from "./createEntryUrl.js";
+import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
+import { useModelField, useModels } from "../../../../hooks/index.js";
+import { NewReferencedEntryDialog } from "./NewReferencedEntryDialog.js";
+const t = i18n.ns("app-headless-cms/admin/fields/ref");
+const unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;
+const publishedLabel = t`Selected content entry is published. You can view it {here}.`;
+const ContentEntriesAutocomplete = ({ bind })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const { models } = useModels();
+    const [showNewEntryModal, setShowNewEntryModal] = useState(false);
+    const { options: rawOptions, setSearch, value, loading, onChange } = useReference({
+        bind,
+        field
     });
-  } else if (value) {
-    var _link = (0, _createEntryUrl.createEntryUrl)(value);
-
-    entryInfo = publishedLabel({
-      here: /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
-        to: _link
-      }, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["here"]))))
+    const disabled = !rules.canEdit || rules.disabled;
+    const options = useMemo(()=>rawOptions.map((opt)=>({
+                label: opt.name,
+                value: opt.entryId,
+                item: opt
+            })), [
+        rawOptions
+    ]);
+    const currentValue = useMemo(()=>value ? value.entryId : void 0, [
+        value
+    ]);
+    const onValueChange = useCallback((entryId)=>{
+        const opt = options.find((o)=>o.value === entryId);
+        if (opt?.item) onChange(entryId, opt.item);
+    }, [
+        options,
+        onChange
+    ]);
+    const onValueSearch = useCallback(debounce((search)=>setSearch(search), 250), [
+        setSearch
+    ]);
+    let entryInfo = null;
+    if (value && !value.published) {
+        const link = createEntryUrl(value);
+        entryInfo = unpublishedLabel({
+            publishItLink: /*#__PURE__*/ react.createElement(SimpleLink, {
+                to: link
+            }, t`publish it`)
+        });
+    } else if (value) {
+        const link = createEntryUrl(value);
+        entryInfo = publishedLabel({
+            here: /*#__PURE__*/ react.createElement(SimpleLink, {
+                to: link
+            }, t`here`)
+        });
+    }
+    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({
+        field
+    });
+    const model = models.find((m)=>m.modelId === refModelId);
+    if (renderNewEntryModal) return /*#__PURE__*/ react.createElement(react.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/ react.createElement(NewReferencedEntryDialog, {
+        onClose: ()=>setShowNewEntryModal(false),
+        model: model,
+        onChange: (entry)=>onChange(entry, entry)
+    }) : null, /*#__PURE__*/ react.createElement(AutoComplete, {
+        validation: bind.validation,
+        loading: loading,
+        value: currentValue,
+        options: options,
+        label: field.label,
+        note: entryInfo,
+        "data-testid": `fr.input.autocomplete.${field.label}`,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        onValueChange: onValueChange,
+        onValueSearch: onValueSearch,
+        emptyMessage: /*#__PURE__*/ react.createElement(NewEntryButton, {
+            onClick: ()=>setShowNewEntryModal(true)
+        })
+    }));
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        disabled: disabled,
+        validation: bind.validation,
+        loading: loading,
+        value: currentValue,
+        options: options,
+        label: field.label,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        note: entryInfo,
+        onValueChange: onValueChange,
+        onValueSearch: onValueSearch,
+        emptyMessage: help
     });
-  }
-
-  var _useNewRefEntry = (0, _useNewRefEntry2.useNewRefEntry)({
-    field: field
-  }),
-      renderNewEntryModal = _useNewRefEntry.renderNewEntryModal,
-      refModelId = _useNewRefEntry.refModelId,
-      helpText = _useNewRefEntry.helpText;
-
-  var item = getItemOption(options, bind.value ? bind.value.id : null);
-  /*
-   * Wrap AutoComplete input in NewRefEntry modal.
-   */
-
-  if (renderNewEntryModal) {
-    return /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.default, {
-      modelId: refModelId,
-      onChange: function onChange(entry) {
-        /**
-         * TODO @ts-refactor @ashutosh
-         * Need to figure out correct types.
-         */
-        // @ts-ignore
-        return _onChange(entry, entry);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {
-      renderItem: _renderItem.renderItem,
-      onChange: _onChange,
-      loading: loading,
-      value: value || undefined,
-      options: options,
-      label: field.label,
-      "data-testid": "fr.input.autocomplete.".concat(field.label),
-      description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, /*#__PURE__*/_react.default.createElement(_EntryStatus.EntryStatus, {
-        item: item
-      }, entryInfo)),
-      onInput: (0, _debounce.default)(function (search) {
-        return setSearch(search);
-      }, 250),
-      noResultFound: /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.NewEntryButton, null)
-    })));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {
-    renderItem: _renderItem.renderItem,
-    onChange: _onChange,
-    loading: loading,
-    value: value || undefined,
-    options: options,
-    label: field.label,
-    description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, /*#__PURE__*/_react.default.createElement(_EntryStatus.EntryStatus, {
-      item: item
-    }, entryInfo)),
-    onInput: (0, _debounce.default)(function (search) {
-      return setSearch(search);
-    }, 250),
-    noResultFound: helpText
-  }));
 };
+const components_ContentEntriesAutocomplete = ContentEntriesAutocomplete;
+export default components_ContentEntriesAutocomplete;
 
-var _default = ContentEntriesAutocomplete;
-exports.default = _default;
+//# sourceMappingURL=ContentEntriesAutocomplete.js.map

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","unpublishedLabel","publishedLabel","getItemOption","options","id","length","parseIdentifier","entryId","find","item","ContentEntriesAutocomplete","bind","field","useReference","setSearch","value","loading","onChange","entryInfo","published","link","createEntryUrl","publishItLink","here","useNewRefEntry","renderNewEntryModal","refModelId","helpText","entry","renderItem","undefined","label","debounce","search"],"sources":["ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport debounce from \"lodash/debounce\";\nimport NewRefEntryFormDialog, { NewEntryButton } from \"./NewRefEntryFormDialog\";\nimport { AutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Link } from \"@webiny/react-router\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { useReference } from \"./useReference\";\nimport { renderItem } from \"./renderItem\";\nimport { createEntryUrl } from \"./createEntryUrl\";\nimport { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\nimport { EntryStatus } from \"./EntryStatus\";\nimport { parseIdentifier } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\nconst getItemOption = (options: OptionItem[], id?: string | null): OptionItem | null => {\n    if (!id || !options || options.length === 0) {\n        return null;\n    }\n    const { id: entryId } = parseIdentifier(id);\n    return options.find(item => item.entryId === entryId) || null;\n};\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nconst ContentEntriesAutocomplete: React.FC<ContentEntriesAutocompleteProps> = ({ bind, field }) => {\n    const { options, setSearch, value, loading, onChange } = useReference({\n        bind,\n        field\n    });\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({ publishItLink: <Link to={link}>{t`publish it`}</Link> });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <Link to={link}>{t`here`}</Link>\n        });\n    }\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const item = getItemOption(options, bind.value ? bind.value.id : null);\n    /*\n     * Wrap AutoComplete input in NewRefEntry modal.\n     */\n    if (renderNewEntryModal) {\n        return (\n            <NewRefEntryFormDialog\n                modelId={refModelId}\n                onChange={entry => {\n                    /**\n                     * TODO @ts-refactor @ashutosh\n                     * Need to figure out correct types.\n                     */\n                    // @ts-ignore\n                    return onChange(entry, entry);\n                }}\n            >\n                <AutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    onChange={onChange}\n                    loading={loading}\n                    value={value || undefined}\n                    options={options}\n                    label={field.label}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={\n                        <>\n                            {field.helpText}\n                            <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                        </>\n                    }\n                    onInput={debounce(search => setSearch(search), 250)}\n                    noResultFound={<NewEntryButton />}\n                />\n            </NewRefEntryFormDialog>\n        );\n    }\n\n    return (\n        <AutoComplete\n            {...bind}\n            renderItem={renderItem}\n            onChange={onChange}\n            loading={loading}\n            value={value || undefined}\n            options={options}\n            label={field.label}\n            description={\n                <>\n                    {field.helpText}\n                    <EntryStatus item={item}>{entryInfo}</EntryStatus>\n                </>\n            }\n            onInput={debounce(search => setSearch(search), 250)}\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"mappings":"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"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.tsx"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { NewEntryButton } from \"./NewEntryButton.js\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { SimpleLink } from \"@webiny/app-admin\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry.js\";\nimport { useReference } from \"./useReference.js\";\nimport { createEntryUrl } from \"./createEntryUrl.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField, useModels } from \"~/admin/hooks/index.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst unpublishedLabel = t`Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry.`;\nconst publishedLabel = t`Selected content entry is published. You can view it {here}.`;\n\ninterface ContentEntriesAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesAutocomplete = ({ bind }: ContentEntriesAutocompleteProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const {\n        options: rawOptions,\n        setSearch,\n        value,\n        loading,\n        onChange\n    } = useReference({\n        bind,\n        field\n    });\n\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const options = useMemo(\n        () => rawOptions.map(opt => ({ label: opt.name, value: opt.entryId, item: opt })),\n        [rawOptions]\n    );\n\n    const currentValue = useMemo(() => (value ? value.entryId : undefined), [value]);\n\n    const onValueChange = useCallback(\n        (entryId: string) => {\n            const opt = options.find(o => o.value === entryId);\n            if (opt?.item) {\n                onChange(entryId, opt.item);\n            }\n        },\n        [options, onChange]\n    );\n\n    const onValueSearch = useCallback(\n        debounce((search: string) => setSearch(search), 250),\n        [setSearch]\n    );\n\n    let entryInfo: string | null = null;\n    if (value && !value.published) {\n        const link = createEntryUrl(value);\n        entryInfo = unpublishedLabel({\n            publishItLink: <SimpleLink to={link}>{t`publish it`}</SimpleLink>\n        });\n    } else if (value) {\n        const link = createEntryUrl(value);\n        entryInfo = publishedLabel({\n            here: <SimpleLink to={link}>{t`here`}</SimpleLink>\n        });\n    }\n    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({ field });\n    const model = models.find(m => m.modelId === refModelId);\n\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={entry => {\n                            return onChange(entry, entry);\n                        }}\n                    />\n                ) : null}\n\n                <AutoComplete\n                    validation={bind.validation}\n                    loading={loading}\n                    value={currentValue}\n                    options={options}\n                    label={field.label}\n                    note={entryInfo}\n                    data-testid={`fr.input.autocomplete.${field.label}`}\n                    description={<>{field.help}</>}\n                    onValueChange={onValueChange}\n                    onValueSearch={onValueSearch}\n                    emptyMessage={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <AutoComplete\n            disabled={disabled}\n            validation={bind.validation}\n            loading={loading}\n            value={currentValue}\n            options={options}\n            label={field.label}\n            description={<>{field.help}</>}\n            note={entryInfo}\n            onValueChange={onValueChange}\n            onValueSearch={onValueSearch}\n            emptyMessage={help}\n        />\n    );\n};\n\nexport default ContentEntriesAutocomplete;\n"],"names":["t","i18n","unpublishedLabel","publishedLabel","ContentEntriesAutocomplete","bind","field","useModelField","rules","useFieldEffectiveRules","models","useModels","showNewEntryModal","setShowNewEntryModal","useState","rawOptions","setSearch","value","loading","onChange","useReference","disabled","options","useMemo","opt","currentValue","undefined","onValueChange","useCallback","entryId","o","onValueSearch","debounce","search","entryInfo","link","createEntryUrl","SimpleLink","renderNewEntryModal","refModelId","help","useNewRefEntry","model","m","NewReferencedEntryDialog","entry","AutoComplete","NewEntryButton"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { CmsEditorField } from "../../../../../types";
-import { BindComponentRenderProp } from "@webiny/form";
+import type { CmsModelField } from "../../../../../types.js";
+import type { BindComponentRenderProp } from "@webiny/form";
 interface ContentEntriesMultiAutocompleteProps {
     bind: BindComponentRenderProp;
-    field: CmsEditorField;
+    field: CmsModelField;
 }
-declare const ContentEntriesMultiAutocomplete: React.FC<ContentEntriesMultiAutocompleteProps>;
+declare const ContentEntriesMultiAutocomplete: ({ bind }: ContentEntriesMultiAutocompleteProps) => React.JSX.Element;
 export default ContentEntriesMultiAutocomplete;

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js

@@ -1,133 +1,112 @@
-"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var _AutoComplete = require("@webiny/ui/AutoComplete");
-
-var _reactRouter = require("@webiny/react-router");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _useReferences2 = require("./useReferences");
-
-var _renderItem = require("./renderItem");
-
-var _NewRefEntryFormDialog = _interopRequireWildcard(require("./NewRefEntryFormDialog"));
-
-var _useNewRefEntry2 = require("../hooks/useNewRefEntry");
-
-var _templateObject;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
-
-var warn = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Before publishing the main content entry, make sure you publish the following referenced entries: {entries}"])));
-
-var ContentEntriesMultiAutocomplete = function ContentEntriesMultiAutocomplete(_ref) {
-  var bind = _ref.bind,
-      field = _ref.field;
-
-  var _useReferences = (0, _useReferences2.useReferences)({
-    bind: bind,
-    field: field
-  }),
-      options = _useReferences.options,
-      setSearch = _useReferences.setSearch,
-      entries = _useReferences.entries,
-      loading = _useReferences.loading,
-      onChange = _useReferences.onChange;
-
-  var _useNewRefEntry = (0, _useNewRefEntry2.useNewRefEntry)({
-    field: field
-  }),
-      renderNewEntryModal = _useNewRefEntry.renderNewEntryModal,
-      refModelId = _useNewRefEntry.refModelId,
-      helpText = _useNewRefEntry.helpText;
-
-  var entryWarning = function entryWarning(entry, index) {
-    var id = entry.id,
-        modelId = entry.modelId,
-        name = entry.name,
-        published = entry.published;
-
-    if (published) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: id
-    }, index > 0 && ", ", /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
-      to: "/cms/content-entries/".concat(modelId, "?id=").concat(encodeURIComponent(id))
-    }, name));
-  };
-
-  var warning = entries.filter(function (item) {
-    return !item.published;
-  });
-
-  if (warning.length > 0) {
-    warning = warn({
-      entries: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, warning.map(entryWarning))
+import react, { useCallback, useMemo, useState } from "react";
+import debounce from "lodash/debounce.js";
+import { MultiAutoComplete } from "@webiny/admin-ui";
+import { RouteLink } from "@webiny/app-admin";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useReferences } from "./useReferences.js";
+import { NewEntryButton } from "./NewEntryButton.js";
+import { useNewRefEntry } from "../hooks/useNewRefEntry.js";
+import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
+import { useModelField, useModels } from "../../../../hooks/index.js";
+import { NewReferencedEntryDialog } from "./NewReferencedEntryDialog.js";
+import { Routes } from "../../../../../routes.js";
+const t = i18n.ns("app-headless-cms/admin/fields/ref");
+const warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;
+const ContentEntriesMultiAutocomplete = ({ bind })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const { models } = useModels();
+    const [showNewEntryModal, setShowNewEntryModal] = useState(false);
+    const { options: rawOptions, setSearch, entries, loading, onChange } = useReferences({
+        bind,
+        field
+    });
+    const disabled = !rules.canEdit || rules.disabled;
+    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({
+        field
+    });
+    const options = useMemo(()=>rawOptions.map((opt)=>({
+                label: opt.name,
+                value: opt.entryId,
+                item: opt
+            })), [
+        rawOptions
+    ]);
+    const currentValues = useMemo(()=>entries.map((e)=>e.entryId), [
+        entries
+    ]);
+    const onValuesChange = useCallback((entryIds)=>{
+        const selectedItems = entryIds.map((id)=>options.find((o)=>o.value === id)?.item).filter(Boolean);
+        onChange(selectedItems);
+    }, [
+        options,
+        onChange
+    ]);
+    const onValueSearch = useCallback(debounce((search)=>setSearch(search), 250), [
+        setSearch
+    ]);
+    const entryWarning = (entry, index)=>{
+        const { id, modelId, name, published } = entry;
+        if (published) return null;
+        return /*#__PURE__*/ react.createElement(react.Fragment, {
+            key: id
+        }, index > 0 && ", ", /*#__PURE__*/ react.createElement(RouteLink, {
+            route: Routes.ContentEntries.List,
+            params: {
+                id,
+                modelId
+            }
+        }, name));
+    };
+    const warnings = entries.filter((item)=>!item.published);
+    let warning = null;
+    if (warnings.length > 0) warning = warn({
+        entries: /*#__PURE__*/ react.createElement(react.Fragment, null, warnings.map(entryWarning))
+    });
+    const refEntryOnChange = useCallback((value)=>{
+        onChange([
+            ...entries,
+            value
+        ]);
+        setShowNewEntryModal(false);
+    }, [
+        onChange,
+        entries
+    ]);
+    const model = models.find((m)=>m.modelId === refModelId);
+    if (renderNewEntryModal) return /*#__PURE__*/ react.createElement(react.Fragment, null, showNewEntryModal && model ? /*#__PURE__*/ react.createElement(NewReferencedEntryDialog, {
+        onClose: ()=>setShowNewEntryModal(false),
+        model: model,
+        onChange: refEntryOnChange
+    }) : null, /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        validation: bind.validation,
+        loading: loading,
+        values: currentValues,
+        options: options,
+        label: field.label,
+        onValuesChange: onValuesChange,
+        onValueSearch: onValueSearch,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        note: warning,
+        emptyMessage: /*#__PURE__*/ react.createElement(NewEntryButton, {
+            onClick: ()=>setShowNewEntryModal(true)
+        })
+    }));
+    return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        disabled: disabled,
+        validation: bind.validation,
+        loading: loading,
+        values: currentValues,
+        options: options,
+        label: field.label,
+        onValuesChange: onValuesChange,
+        onValueSearch: onValueSearch,
+        description: /*#__PURE__*/ react.createElement(react.Fragment, null, field.help),
+        note: warning,
+        emptyMessage: help
     });
-  }
-
-  var refEntryOnChange = (0, _react.useCallback)( // TODO @ts-refactor figure out which type is this
-  function (value) {
-    /**
-     * Append new selected entry at the end of existing entries.
-     */
-    onChange([].concat((0, _toConsumableArray2.default)(entries), [value]));
-  }, [onChange, entries]);
-
-  if (renderNewEntryModal) {
-    return /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.default, {
-      modelId: refModelId,
-      onChange: refEntryOnChange
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bind, {
-      renderItem: _renderItem.renderItem,
-      renderListItemLabel: _renderItem.renderItem,
-      renderListItemOptions: _renderItem.renderListItemOptions,
-      useMultipleSelectionList: true,
-      onChange: onChange,
-      loading: loading,
-      value: entries,
-      options: options,
-      label: field.label,
-      onInput: (0, _debounce.default)(setSearch, 250),
-      description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, warning),
-      noResultFound: /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.NewEntryButton, null)
-    })));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bind, {
-    renderItem: _renderItem.renderItem,
-    renderListItemLabel: _renderItem.renderItem,
-    renderListItemOptions: _renderItem.renderListItemOptions,
-    useMultipleSelectionList: true,
-    onChange: onChange,
-    loading: loading,
-    value: entries,
-    options: options,
-    label: field.label,
-    onInput: (0, _debounce.default)(setSearch, 250),
-    description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, warning),
-    noResultFound: helpText
-  }));
 };
+const ContentEntriesMultiAutoComplete = ContentEntriesMultiAutocomplete;
+export default ContentEntriesMultiAutoComplete;
 
-var _default = ContentEntriesMultiAutocomplete;
-exports.default = _default;
+//# sourceMappingURL=ContentEntriesMultiAutoComplete.js.map

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","warn","ContentEntriesMultiAutocomplete","bind","field","useReferences","options","setSearch","entries","loading","onChange","useNewRefEntry","renderNewEntryModal","refModelId","helpText","entryWarning","entry","index","id","modelId","name","published","encodeURIComponent","warning","filter","item","length","map","refEntryOnChange","useCallback","value","renderItem","renderListItemOptions","label","debounce"],"sources":["ContentEntriesMultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Link } from \"@webiny/react-router\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useReferences } from \"./useReferences\";\nimport { renderItem, renderListItemOptions } from \"./renderItem\";\nimport NewRefEntryFormDialog, { NewEntryButton } from \"./NewRefEntryFormDialog\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry\";\nimport { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { OptionItem } from \"./types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;\n\ninterface ContentEntriesMultiAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n}\nconst ContentEntriesMultiAutocomplete: React.FC<ContentEntriesMultiAutocompleteProps> = ({\n    bind,\n    field\n}) => {\n    const { options, setSearch, entries, loading, onChange } = useReferences({ bind, field });\n\n    const { renderNewEntryModal, refModelId, helpText } = useNewRefEntry({ field });\n\n    const entryWarning = (entry: OptionItem, index: number): React.ReactElement | null => {\n        const { id, modelId, name, published } = entry;\n        if (published) {\n            return null;\n        }\n        return (\n            <React.Fragment key={id}>\n                {index > 0 && \", \"}\n                <Link to={`/cms/content-entries/${modelId}?id=${encodeURIComponent(id)}`}>\n                    {name}\n                </Link>\n            </React.Fragment>\n        );\n    };\n\n    let warning = entries.filter(item => !item.published);\n    if (warning.length > 0) {\n        warning = warn({\n            entries: <>{warning.map(entryWarning)}</>\n        });\n    }\n\n    const refEntryOnChange = useCallback(\n        // TODO @ts-refactor figure out which type is this\n        value => {\n            /**\n             * Append new selected entry at the end of existing entries.\n             */\n            onChange([...entries, value]);\n        },\n        [onChange, entries]\n    );\n\n    if (renderNewEntryModal) {\n        return (\n            <NewRefEntryFormDialog modelId={refModelId} onChange={refEntryOnChange}>\n                <MultiAutoComplete\n                    {...bind}\n                    renderItem={renderItem}\n                    renderListItemLabel={renderItem}\n                    renderListItemOptions={renderListItemOptions}\n                    useMultipleSelectionList\n                    onChange={onChange}\n                    loading={loading}\n                    value={entries}\n                    options={options}\n                    label={field.label}\n                    onInput={debounce(setSearch, 250)}\n                    description={\n                        <>\n                            {field.helpText}\n                            {warning}\n                        </>\n                    }\n                    noResultFound={<NewEntryButton />}\n                />\n            </NewRefEntryFormDialog>\n        );\n    }\n\n    return (\n        <MultiAutoComplete\n            {...bind}\n            renderItem={renderItem}\n            renderListItemLabel={renderItem}\n            renderListItemOptions={renderListItemOptions}\n            useMultipleSelectionList\n            onChange={onChange}\n            loading={loading}\n            value={entries}\n            options={options}\n            label={field.label}\n            onInput={debounce(setSearch, 250)}\n            description={\n                <>\n                    {field.helpText}\n                    {warning}\n                </>\n            }\n            noResultFound={helpText}\n        />\n    );\n};\n\nexport default ContentEntriesMultiAutocomplete;\n"],"mappings":"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"}
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.js","sources":["../../../../../../src/admin/plugins/fieldRenderers/ref/components/ContentEntriesMultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useState, useMemo } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport { RouteLink } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useReferences } from \"./useReferences.js\";\nimport { NewEntryButton } from \"./NewEntryButton.js\";\nimport { useNewRefEntry } from \"../hooks/useNewRefEntry.js\";\nimport type { CmsModelField } from \"~/types.js\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { OptionItem } from \"./types.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField, useModels } from \"~/admin/hooks/index.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nconst warn = t`Before publishing the main content entry, make sure you publish the following referenced entries: {entries}`;\n\ninterface ContentEntriesMultiAutocompleteProps {\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n}\nconst ContentEntriesMultiAutocomplete = ({ bind }: ContentEntriesMultiAutocompleteProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const { models } = useModels();\n    const [showNewEntryModal, setShowNewEntryModal] = useState(false);\n    const {\n        options: rawOptions,\n        setSearch,\n        entries,\n        loading,\n        onChange\n    } = useReferences({\n        bind,\n        field\n    });\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { renderNewEntryModal, refModelId, help } = useNewRefEntry({ field });\n\n    const options = useMemo(\n        () => rawOptions.map(opt => ({ label: opt.name, value: opt.entryId, item: opt })),\n        [rawOptions]\n    );\n\n    const currentValues = useMemo(() => entries.map(e => e.entryId), [entries]);\n\n    const onValuesChange = useCallback(\n        (entryIds: string[]) => {\n            const selectedItems = entryIds\n                .map(id => options.find(o => o.value === id)?.item)\n                .filter(Boolean) as OptionItem[];\n            onChange(selectedItems);\n        },\n        [options, onChange]\n    );\n\n    const onValueSearch = useCallback(\n        debounce((search: string) => setSearch(search), 250),\n        [setSearch]\n    );\n\n    const entryWarning = (entry: OptionItem, index: number): React.ReactElement | null => {\n        const { id, modelId, name, published } = entry;\n        if (published) {\n            return null;\n        }\n        return (\n            <React.Fragment key={id}>\n                {index > 0 && \", \"}\n                <RouteLink route={Routes.ContentEntries.List} params={{ id, modelId }}>\n                    {name}\n                </RouteLink>\n            </React.Fragment>\n        );\n    };\n\n    const warnings = entries.filter(item => !item.published);\n    let warning: React.ReactElement | null = null;\n    if (warnings.length > 0) {\n        warning = warn({\n            entries: <>{warnings.map(entryWarning)}</>\n        });\n    }\n\n    const refEntryOnChange = useCallback(\n        (value: OptionItem) => {\n            onChange([...entries, value]);\n            setShowNewEntryModal(false);\n        },\n        [onChange, entries]\n    );\n\n    const model = models.find(m => m.modelId === refModelId);\n\n    if (renderNewEntryModal) {\n        return (\n            <>\n                {showNewEntryModal && model ? (\n                    <NewReferencedEntryDialog\n                        onClose={() => setShowNewEntryModal(false)}\n                        model={model}\n                        onChange={refEntryOnChange}\n                    />\n                ) : null}\n                <MultiAutoComplete\n                    validation={bind.validation}\n                    loading={loading}\n                    values={currentValues}\n                    options={options}\n                    label={field.label}\n                    onValuesChange={onValuesChange}\n                    onValueSearch={onValueSearch}\n                    description={<>{field.help}</>}\n                    note={warning}\n                    emptyMessage={<NewEntryButton onClick={() => setShowNewEntryModal(true)} />}\n                />\n            </>\n        );\n    }\n\n    return (\n        <MultiAutoComplete\n            disabled={disabled}\n            validation={bind.validation}\n            loading={loading}\n            values={currentValues}\n            options={options}\n            label={field.label}\n            onValuesChange={onValuesChange}\n            onValueSearch={onValueSearch}\n            description={<>{field.help}</>}\n            note={warning}\n            emptyMessage={help}\n        />\n    );\n};\n\nexport default ContentEntriesMultiAutocomplete;\n"],"names":["t","i18n","warn","ContentEntriesMultiAutocomplete","bind","field","useModelField","rules","useFieldEffectiveRules","models","useModels","showNewEntryModal","setShowNewEntryModal","useState","rawOptions","setSearch","entries","loading","onChange","useReferences","disabled","renderNewEntryModal","refModelId","help","useNewRefEntry","options","useMemo","opt","currentValues","e","onValuesChange","useCallback","entryIds","selectedItems","id","o","Boolean","onValueSearch","debounce","search","entryWarning","entry","index","modelId","name","published","React","RouteLink","Routes","warnings","item","warning","refEntryOnChange","value","model","m","NewReferencedEntryDialog","MultiAutoComplete","NewEntryButton"],"mappings":"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"}