@webiny/app-headless-cms 5.34.8 → 5.35.0-beta.0

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdvancedMultipleReferenceField = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var GQL = _interopRequireWildcard(require("../../../../../viewsGraphql"));
+var _Options = require("./Options");
+var _useReferences2 = require("../hooks/useReferences");
+var _Entry = require("./Entry");
+var _ReferencesDialog = require("./ReferencesDialog");
+var _hooks = require("../../../../../hooks");
+var _appAdmin = require("@webiny/app-admin");
+var _Loader = require("./Loader");
+var _NewReferencedEntryDialog = require("../components/NewReferencedEntryDialog");
+var _utils = require("@webiny/utils");
+var _Entries = require("./Entries");
+var FieldLabel = /*#__PURE__*/(0, _styled.default)("h3", {
+  target: "e11vg9uk0",
+  label: "FieldLabel"
+})({
+  fontSize: 24,
+  fontWeight: "normal",
+  borderBottom: "1px solid var(--mdc-theme-background)",
+  marginBottom: "20px",
+  paddingBottom: "5px",
+  display: "flex",
+  justifyContent: "space-between"
+});
+var OptionsContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11vg9uk1",
+  label: "OptionsContainer"
+})({
+  borderTop: "1px solid var(--mdc-theme-on-background)",
+  borderRight: "1px solid var(--mdc-theme-surface)",
+  backgroundColor: "var(--mdc-theme-surface)",
+  marginLeft: "-21px",
+  marginBottom: "-21px",
+  marginRight: "-1px"
+});
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11vg9uk2",
+  label: "Container"
+})({
+  border: "1px solid var(--mdc-theme-on-background)",
+  paddingLeft: "10px",
+  width: "100%",
+  boxSizing: "border-box",
+  position: "relative",
+  padding: "20px 0 20px 20px",
+  backgroundColor: "var(--mdc-theme-background)",
+  "&.no-entries": (0, _defineProperty2.default)({
+    backgroundColor: "var(--mdc-theme-surface)",
+    border: "none",
+    borderLeft: "3px solid var(--mdc-theme-background)",
+    padding: 0,
+    paddingLeft: 10
+  }, OptionsContainer, {
+    border: "none",
+    margin: 0
+  }),
+  "&.single-entry": {
+    "> .entries": {
+      height: "auto",
+      " > div > div": {
+        position: "relative !important"
+      }
+    }
+  }
+});
+var FieldName = /*#__PURE__*/(0, _styled.default)("span", {
+  target: "e11vg9uk3",
+  label: "FieldName"
+})({});
+var RecordCount = /*#__PURE__*/(0, _styled.default)("span", {
+  target: "e11vg9uk4",
+  label: "RecordCount"
+})({
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  fontSize: "0.6em",
+  lineHeight: "100%",
+  alignSelf: "center"
+});
+var getRecordCountMessage = function getRecordCountMessage(count) {
+  switch (count) {
+    case 0:
+      return "no records selected";
+    case 1:
+      return "1 record selected";
+    default:
+      return "".concat(count, " records selected");
+  }
+};
+var AdvancedMultipleReferenceField = function AdvancedMultipleReferenceField(props) {
+  var bind = props.bind,
+    field = props.field;
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var values = (0, _react.useMemo)(function () {
+    return bind.value || [];
+  }, [bind.value]);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    linkEntryDialogModel = _useState2[0],
+    setLinkEntryDialogModel = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    newEntryDialogModel = _useState4[0],
+    setNewEntryDialogModel = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    loadedModels = _useState6[0],
+    setLoadedModels = _useState6[1];
+  var _useQuery = (0, _hooks.useQuery)(GQL.LIST_CONTENT_MODELS),
+    data = _useQuery.data,
+    loadingModels = _useQuery.loading;
+  (0, _react.useEffect)(function () {
+    var _data$listContentMode;
+    if (loadingModels || !(data !== null && data !== void 0 && (_data$listContentMode = data.listContentModels) !== null && _data$listContentMode !== void 0 && _data$listContentMode.data)) {
+      return;
+    } else if (data.listContentModels.error) {
+      setLoadedModels([]);
+      showSnackbar(data.listContentModels.error.message);
+      return;
+    }
+    setLoadedModels(data.listContentModels.data);
+  }, [data]);
+  var onNewRecord = (0, _react.useCallback)(function (modelId) {
+    var model = loadedModels.find(function (model) {
+      return model.modelId === modelId;
+    });
+    if (!model) {
+      console.log("Cannot find model by modelId \"".concat(modelId, "\"."));
+      return;
+    }
+    setNewEntryDialogModel(model);
+  }, [loadedModels, linkEntryDialogModel]);
+  var onNewEntryDialogClose = (0, _react.useCallback)(function () {
+    setNewEntryDialogModel(null);
+  }, [linkEntryDialogModel]);
+  var onExistingRecord = (0, _react.useCallback)(function (modelId) {
+    var model = loadedModels.find(function (model) {
+      return model.modelId === modelId;
+    });
+    if (!model) {
+      console.log("Cannot find model by modelId \"".concat(modelId, "\"."));
+      return;
+    }
+    setLinkEntryDialogModel(model);
+  }, [loadedModels, linkEntryDialogModel]);
+  var onLinkEntryDialogClose = (0, _react.useCallback)(function () {
+    setLinkEntryDialogModel(null);
+  }, []);
+  var _useReferences = (0, _useReferences2.useReferences)({
+      values: values,
+      perPage: 10
+    }),
+    entries = _useReferences.entries,
+    loadingEntries = _useReferences.loading,
+    loadMore = _useReferences.loadMore;
+  var onRemove = (0, _react.useCallback)(function (id) {
+    if (!values || !Array.isArray(values)) {
+      return;
+    }
+    var _parseIdentifier = (0, _utils.parseIdentifier)(id),
+      entryId = _parseIdentifier.id;
+    bind.onChange(values.filter(function (value) {
+      var _parseIdentifier2 = (0, _utils.parseIdentifier)(value.id),
+        valueEntryId = _parseIdentifier2.id;
+      return valueEntryId !== entryId;
+    }));
+  }, [entries, values]);
+  var models = (0, _react.useMemo)(function () {
+    var _field$settings;
+    if (!loadedModels || !((_field$settings = field.settings) !== null && _field$settings !== void 0 && _field$settings.models) || !Array.isArray(field.settings.models)) {
+      return [];
+    }
+    return field.settings.models.reduce(function (collection, ref) {
+      var model = loadedModels.find(function (model) {
+        return model.modelId === ref.modelId;
+      });
+      if (!model) {
+        return collection;
+      }
+      collection.push(model);
+      return collection;
+    }, []);
+  }, [loadedModels, entries]);
+  var storeValues = (0, _react.useCallback)(function (values) {
+    bind.onChange(values);
+    return;
+  }, [values]);
+  var onNewEntryCreate = (0, _react.useCallback)(function (data) {
+    if (!data) {
+      console.log("Could not store new entry to the reference field. Missing whole entry.");
+      return;
+    } else if (!data.id) {
+      console.log("Could not store new entry to the reference field. Missing \"id\" value.");
+      return;
+    } else if (!data.modelId) {
+      console.log("Could not store new entry to the reference field. Missing \"modelId\" value.");
+      return;
+    }
+    storeValues(values.concat([{
+      id: data.id,
+      modelId: data.modelId
+    }]));
+  }, [storeValues]);
+  var onMoveUp = (0, _react.useCallback)(function (index, toTop) {
+    if (values.length === 0) {
+      return;
+    } else if (toTop) {
+      var arr = values.splice(index, 1);
+      bind.onChange(arr.concat(values));
+      return;
+    }
+    bind.moveValueUp(index);
+  }, [values]);
+  var onMoveDown = (0, _react.useCallback)(function (index, toBottom) {
+    if (values.length === 0) {
+      return;
+    } else if (toBottom === true) {
+      var arr = values.splice(index, 1);
+      bind.onChange(values.concat(arr));
+      return;
+    }
+    bind.moveValueDown(index);
+  }, [values]);
+  var loading = loadingEntries || loadingModels;
+  var message = getRecordCountMessage(values.length);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, /*#__PURE__*/_react.default.createElement(FieldName, null, field.label), /*#__PURE__*/_react.default.createElement(RecordCount, null, "(", message, ")")), /*#__PURE__*/_react.default.createElement(Container, {
+    className: (entries.length < 1 ? "no-entries" : "has-entries") + (entries.length == 1 ? " single-entry" : "")
+  }, loading && /*#__PURE__*/_react.default.createElement(_Loader.AbsoluteLoader, null), /*#__PURE__*/_react.default.createElement(_Entries.Entries, {
+    entries: entries,
+    loadMore: loadMore
+  }, function (entry, index) {
+    var isFirst = index === 0;
+    var isLast = index >= values.length - 1;
+    var model = loadedModels.find(function (model) {
+      return model.modelId === entry.model.modelId;
+    });
+    if (!model) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_Entry.Entry, {
+      model: model,
+      placement: "multiRef",
+      key: "reference-entry-".concat(entry.id),
+      index: index,
+      entry: entry,
+      onRemove: onRemove,
+      onMoveUp: !isFirst ? onMoveUp : undefined,
+      onMoveDown: !isLast ? onMoveDown : undefined
+    });
+  }), /*#__PURE__*/_react.default.createElement(OptionsContainer, null, /*#__PURE__*/_react.default.createElement(_Options.Options, {
+    models: models,
+    onNewRecord: onNewRecord,
+    onLinkExistingRecord: onExistingRecord
+  }), newEntryDialogModel && /*#__PURE__*/_react.default.createElement(_NewReferencedEntryDialog.NewReferencedEntryDialog, {
+    model: newEntryDialogModel,
+    onClose: onNewEntryDialogClose,
+    onChange: onNewEntryCreate
+  }), linkEntryDialogModel && /*#__PURE__*/_react.default.createElement(_ReferencesDialog.ReferencesDialog, Object.assign({}, props, {
+    multiple: true,
+    values: values,
+    contentModel: linkEntryDialogModel,
+    storeValues: storeValues,
+    onDialogClose: onLinkEntryDialogClose
+  })))));
+};
+exports.AdvancedMultipleReferenceField = AdvancedMultipleReferenceField;

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldLabel","styled","fontSize","fontWeight","borderBottom","marginBottom","paddingBottom","display","justifyContent","OptionsContainer","borderTop","borderRight","backgroundColor","marginLeft","marginRight","Container","border","paddingLeft","width","boxSizing","position","padding","borderLeft","margin","height","FieldName","RecordCount","color","lineHeight","alignSelf","getRecordCountMessage","count","AdvancedMultipleReferenceField","props","bind","field","useSnackbar","showSnackbar","values","useMemo","value","useState","linkEntryDialogModel","setLinkEntryDialogModel","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","useQuery","GQL","LIST_CONTENT_MODELS","data","loadingModels","loading","useEffect","listContentModels","error","message","onNewRecord","useCallback","modelId","model","find","console","log","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","useReferences","perPage","entries","loadingEntries","loadMore","onRemove","id","Array","isArray","parseIdentifier","entryId","onChange","filter","valueEntryId","models","settings","reduce","collection","ref","push","storeValues","onNewEntryCreate","concat","onMoveUp","index","toTop","length","arr","splice","moveValueUp","onMoveDown","toBottom","moveValueDown","label","entry","isFirst","isLast","undefined"],"sources":["AdvancedMultipleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport * as GQL from \"~/admin/viewsGraphql\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorContentEntry,\n    CmsModelFieldRendererProps,\n    CmsModel\n} from \"~/types\";\nimport { Options } from \"./Options\";\nimport { useReferences } from \"../hooks/useReferences\";\nimport { Entry } from \"./Entry\";\nimport { ReferencesDialog } from \"./ReferencesDialog\";\nimport { useQuery } from \"~/admin/hooks\";\nimport { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { AbsoluteLoader as Loader } from \"./Loader\";\nimport { NewReferencedEntryDialog } from \"../components/NewReferencedEntryDialog\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { Entries } from \"./Entries\";\n\nconst FieldLabel = styled(\"h3\")({\n    fontSize: 24,\n    fontWeight: \"normal\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    marginBottom: \"20px\",\n    paddingBottom: \"5px\",\n    display: \"flex\",\n    justifyContent: \"space-between\"\n});\n\nconst OptionsContainer: any = styled(\"div\")({\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    borderRight: \"1px solid var(--mdc-theme-surface)\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    marginLeft: \"-21px\",\n    marginBottom: \"-21px\",\n    marginRight: \"-1px\"\n});\n\nconst Container = styled(\"div\")({\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    paddingLeft: \"10px\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    padding: \"20px 0 20px 20px\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    \"&.no-entries\": {\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        border: \"none\",\n        borderLeft: \"3px solid var(--mdc-theme-background)\",\n        padding: 0,\n        paddingLeft: 10,\n        [OptionsContainer]: {\n            border: \"none\",\n            margin: 0\n        }\n    },\n    \"&.single-entry\": {\n        \"> .entries\": {\n            height: \"auto\",\n            \" > div > div\": {\n                position: \"relative !important\" as any\n            }\n        }\n    }\n});\n\nconst FieldName = styled(\"span\")({});\nconst RecordCount = styled(\"span\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    fontSize: \"0.6em\",\n    lineHeight: \"100%\",\n    alignSelf: \"center\"\n});\n\nconst getRecordCountMessage = (count: number) => {\n    switch (count) {\n        case 0:\n            return \"no records selected\";\n        case 1:\n            return \"1 record selected\";\n        default:\n            return `${count} records selected`;\n    }\n};\n\ninterface Props extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;\n}\n\nexport const AdvancedMultipleReferenceField: React.VFC<Props> = props => {\n    const { bind, field } = props;\n    const { showSnackbar } = useSnackbar();\n\n    const values = useMemo(() => {\n        return bind.value || [];\n    }, [bind.value]);\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(data.listContentModels.data);\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const {\n        entries,\n        loading: loadingEntries,\n        loadMore\n    } = useReferences({\n        values,\n        perPage: 10\n    });\n\n    const onRemove = useCallback(\n        (id: string) => {\n            if (!values || !Array.isArray(values)) {\n                return;\n            }\n            const { id: entryId } = parseIdentifier(id);\n            bind.onChange(\n                values.filter(value => {\n                    const { id: valueEntryId } = parseIdentifier(value.id);\n                    return valueEntryId !== entryId;\n                })\n            );\n        },\n        [entries, values]\n    );\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models || !Array.isArray(field.settings.models)) {\n            return [];\n        }\n\n        return field.settings.models.reduce<CmsModel[]>((collection, ref) => {\n            const model = loadedModels.find(model => model.modelId === ref.modelId);\n            if (!model) {\n                return collection;\n            }\n            collection.push(model);\n\n            return collection;\n        }, []);\n    }, [loadedModels, entries]);\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            bind.onChange(values);\n            return;\n        },\n        [values]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: Partial<CmsEditorContentEntry> | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues(\n                values.concat([\n                    {\n                        id: data.id,\n                        modelId: data.modelId\n                    }\n                ])\n            );\n        },\n        [storeValues]\n    );\n\n    const onMoveUp = useCallback(\n        (index: number, toTop?: boolean) => {\n            if (values.length === 0) {\n                return;\n            } else if (toTop) {\n                const arr = values.splice(index, 1);\n                bind.onChange(arr.concat(values));\n                return;\n            }\n            bind.moveValueUp(index);\n        },\n        [values]\n    );\n    const onMoveDown = useCallback(\n        (index: number, toBottom?: boolean) => {\n            if (values.length === 0) {\n                return;\n            } else if (toBottom === true) {\n                const arr = values.splice(index, 1);\n                bind.onChange(values.concat(arr));\n                return;\n            }\n            bind.moveValueDown(index);\n        },\n        [values]\n    );\n\n    const loading = loadingEntries || loadingModels;\n\n    const message = getRecordCountMessage(values.length);\n\n    return (\n        <>\n            <FieldLabel>\n                <FieldName>{field.label}</FieldName>\n                <RecordCount>({message})</RecordCount>\n            </FieldLabel>\n            <Container\n                className={\n                    (entries.length < 1 ? \"no-entries\" : \"has-entries\") +\n                    (entries.length == 1 ? \" single-entry\" : \"\")\n                }\n            >\n                {loading && <Loader />}\n                <Entries entries={entries} loadMore={loadMore}>\n                    {(entry, index) => {\n                        const isFirst = index === 0;\n                        const isLast = index >= values.length - 1;\n                        const model = loadedModels.find(\n                            model => model.modelId === entry.model.modelId\n                        );\n                        if (!model) {\n                            return null;\n                        }\n                        return (\n                            <Entry\n                                model={model}\n                                placement=\"multiRef\"\n                                key={`reference-entry-${entry.id}`}\n                                index={index}\n                                entry={entry}\n                                onRemove={onRemove}\n                                onMoveUp={!isFirst ? onMoveUp : undefined}\n                                onMoveDown={!isLast ? onMoveDown : undefined}\n                            />\n                        );\n                    }}\n                </Entries>\n\n                <OptionsContainer>\n                    <Options\n                        models={models}\n                        onNewRecord={onNewRecord}\n                        onLinkExistingRecord={onExistingRecord}\n                    />\n\n                    {newEntryDialogModel && (\n                        <NewReferencedEntryDialog\n                            model={newEntryDialogModel}\n                            onClose={onNewEntryDialogClose}\n                            onChange={onNewEntryCreate}\n                        />\n                    )}\n\n                    {linkEntryDialogModel && (\n                        <ReferencesDialog\n                            {...props}\n                            multiple={true}\n                            values={values}\n                            contentModel={linkEntryDialogModel}\n                            storeValues={storeValues}\n                            onDialogClose={onLinkEntryDialogClose}\n                        />\n                    )}\n                </OptionsContainer>\n            </Container>\n        </>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BindComponentRenderProp, CmsModelFieldRendererProps } from "../../../../../../types";
+import { CmsReferenceValue } from "../../components/types";
+interface Props extends CmsModelFieldRendererProps {
+    bind: BindComponentRenderProp<CmsReferenceValue | null>;
+}
+export declare const AdvancedSingleReferenceField: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdvancedSingleReferenceField = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Options = require("./Options");
+var _useReferences2 = require("../hooks/useReferences");
+var _Entry = require("./Entry");
+var _ReferencesDialog = require("./ReferencesDialog");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _hooks = require("../../../../../hooks");
+var GQL = _interopRequireWildcard(require("../../../../../viewsGraphql"));
+var _appAdmin = require("@webiny/app-admin");
+var _Loader = require("./Loader");
+var _NewReferencedEntryDialog = require("./NewReferencedEntryDialog");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e38futg0",
+  label: "Container"
+})({});
+var FieldLabel = /*#__PURE__*/(0, _styled.default)("h3", {
+  target: "e38futg1",
+  label: "FieldLabel"
+})({
+  fontSize: 24,
+  fontWeight: "normal",
+  borderBottom: "1px solid var(--mdc-theme-background)",
+  marginBottom: "20px",
+  paddingBottom: "5px"
+});
+var AdvancedSingleReferenceField = function AdvancedSingleReferenceField(props) {
+  var bind = props.bind,
+    field = props.field;
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    linkEntryDialogModel = _useState2[0],
+    setLinkEntryDialogModel = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    newEntryDialogModel = _useState4[0],
+    setNewEntryDialogModel = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    loadedModels = _useState6[0],
+    setLoadedModels = _useState6[1];
+  var _useQuery = (0, _hooks.useQuery)(GQL.LIST_CONTENT_MODELS),
+    data = _useQuery.data,
+    loadingModels = _useQuery.loading;
+  (0, _react.useEffect)(function () {
+    var _data$listContentMode;
+    if (loadingModels || !(data !== null && data !== void 0 && (_data$listContentMode = data.listContentModels) !== null && _data$listContentMode !== void 0 && _data$listContentMode.data)) {
+      return;
+    } else if (data.listContentModels.error) {
+      setLoadedModels([]);
+      showSnackbar(data.listContentModels.error.message);
+      return;
+    }
+    setLoadedModels(data.listContentModels.data);
+  }, [data]);
+  var onNewRecord = (0, _react.useCallback)(function (modelId) {
+    var model = loadedModels.find(function (model) {
+      return model.modelId === modelId;
+    });
+    if (!model) {
+      console.log("Cannot find model by modelId \"".concat(modelId, "\"."));
+      return;
+    }
+    setNewEntryDialogModel(model);
+  }, [loadedModels, linkEntryDialogModel]);
+  var onNewEntryDialogClose = (0, _react.useCallback)(function () {
+    setNewEntryDialogModel(null);
+  }, [linkEntryDialogModel]);
+  var onExistingRecord = (0, _react.useCallback)(function (modelId) {
+    var model = loadedModels.find(function (model) {
+      return model.modelId === modelId;
+    });
+    if (!model) {
+      console.log("Cannot find model by modelId \"".concat(modelId, "\"."));
+      return;
+    }
+    setLinkEntryDialogModel(model);
+  }, [loadedModels, linkEntryDialogModel]);
+  var onLinkEntryDialogClose = (0, _react.useCallback)(function () {
+    setLinkEntryDialogModel(null);
+  }, []);
+  var _useReferences = (0, _useReferences2.useReferences)({
+      values: bind.value
+    }),
+    entries = _useReferences.entries,
+    loadingEntries = _useReferences.loading;
+  var onRemove = (0, _react.useCallback)(function () {
+    bind.onChange(null);
+  }, [entries]);
+  var models = (0, _react.useMemo)(function () {
+    var _field$settings, _field$settings2;
+    if (!loadedModels || !((_field$settings = field.settings) !== null && _field$settings !== void 0 && _field$settings.models)) {
+      return [];
+    }
+    return (((_field$settings2 = field.settings) === null || _field$settings2 === void 0 ? void 0 : _field$settings2.models) || []).map(function (_ref) {
+      var modelId = _ref.modelId;
+      return loadedModels.find(function (model) {
+        return model.modelId === modelId;
+      });
+    }).filter(Boolean);
+  }, [loadedModels, entries]);
+  var loading = loadingEntries || loadingModels;
+  var storeValues = (0, _react.useCallback)(function (values) {
+    var _values$;
+    if (values.length > 1) {
+      console.log("More than one value selected. This should never happen.");
+      return;
+    } else if (values.length === 0 || !((_values$ = values[0]) !== null && _values$ !== void 0 && _values$.id)) {
+      bind.onChange(null);
+      return;
+    }
+    bind.onChange(values[0]);
+  }, [bind.value, bind.onChange, entries]);
+  var onNewEntryCreate = (0, _react.useCallback)(function (data) {
+    if (!data) {
+      console.log("Could not store new entry to the reference field. Missing whole entry.");
+      return;
+    } else if (!data.id) {
+      console.log("Could not store new entry to the reference field. Missing \"id\" value.");
+      return;
+    } else if (!data.modelId) {
+      console.log("Could not store new entry to the reference field. Missing \"modelId\" value.");
+      return;
+    }
+    storeValues([{
+      id: data.id,
+      modelId: data.modelId
+    }]);
+  }, [storeValues]);
+  var initialValue = (0, _react.useMemo)(function () {
+    if (entries.length === 0 || loadedModels.length === 0) {
+      return null;
+    }
+    var entry = entries[0];
+    if (!entry) {
+      return null;
+    }
+    var model = loadedModels.find(function (model) {
+      return model.modelId === entry.model.modelId;
+    });
+    if (!model) {
+      return null;
+    }
+    return {
+      entry: entry,
+      model: model
+    };
+  }, [entries, loadedModels]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, field.label), /*#__PURE__*/_react.default.createElement(Container, null, loading && /*#__PURE__*/_react.default.createElement(_Loader.Loader, null), initialValue && /*#__PURE__*/_react.default.createElement(_Entry.Entry, {
+    model: initialValue.model,
+    placement: "singleRefField",
+    index: 0,
+    entry: initialValue.entry,
+    onRemove: onRemove
+  }), /*#__PURE__*/_react.default.createElement(_Options.Options, {
+    models: models,
+    onNewRecord: onNewRecord,
+    onLinkExistingRecord: onExistingRecord
+  }), newEntryDialogModel && /*#__PURE__*/_react.default.createElement(_NewReferencedEntryDialog.NewReferencedEntryDialog, {
+    model: newEntryDialogModel,
+    onClose: onNewEntryDialogClose,
+    onChange: onNewEntryCreate
+  }), linkEntryDialogModel && /*#__PURE__*/_react.default.createElement(_ReferencesDialog.ReferencesDialog, Object.assign({}, props, {
+    multiple: false,
+    values: bind.value ? [bind.value] : [],
+    contentModel: linkEntryDialogModel,
+    storeValues: storeValues,
+    onDialogClose: onLinkEntryDialogClose
+  }))));
+};
+exports.AdvancedSingleReferenceField = AdvancedSingleReferenceField;

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","FieldLabel","fontSize","fontWeight","borderBottom","marginBottom","paddingBottom","AdvancedSingleReferenceField","props","bind","field","useSnackbar","showSnackbar","useState","linkEntryDialogModel","setLinkEntryDialogModel","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","useQuery","GQL","LIST_CONTENT_MODELS","data","loadingModels","loading","useEffect","listContentModels","error","message","onNewRecord","useCallback","modelId","model","find","console","log","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","useReferences","values","value","entries","loadingEntries","onRemove","onChange","models","useMemo","settings","map","filter","Boolean","storeValues","length","id","onNewEntryCreate","initialValue","entry","label"],"sources":["AdvancedSingleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorContentEntry,\n    CmsModelFieldRendererProps,\n    CmsModel\n} from \"~/types\";\nimport { Options } from \"./Options\";\nimport { useReferences } from \"../hooks/useReferences\";\nimport { Entry } from \"./Entry\";\nimport { ReferencesDialog } from \"./ReferencesDialog\";\nimport styled from \"@emotion/styled\";\nimport { useQuery } from \"~/admin/hooks\";\nimport { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql\";\nimport * as GQL from \"~/admin/viewsGraphql\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { Loader } from \"./Loader\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/NewReferencedEntryDialog\";\n\nconst Container = styled(\"div\")({});\n\nconst FieldLabel = styled(\"h3\")({\n    fontSize: 24,\n    fontWeight: \"normal\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    marginBottom: \"20px\",\n    paddingBottom: \"5px\"\n});\n\ninterface Props extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue | null>;\n}\n\nexport const AdvancedSingleReferenceField: React.VFC<Props> = props => {\n    const { bind, field } = props;\n    const { showSnackbar } = useSnackbar();\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(data.listContentModels.data);\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const { entries, loading: loadingEntries } = useReferences({\n        values: bind.value\n    });\n\n    const onRemove = useCallback(() => {\n        bind.onChange(null);\n    }, [entries]);\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models) {\n            return [];\n        }\n\n        return (field.settings?.models || [])\n            .map(({ modelId }) => {\n                return loadedModels.find(model => model.modelId === modelId);\n            })\n            .filter(Boolean) as CmsModel[];\n    }, [loadedModels, entries]);\n\n    const loading = loadingEntries || loadingModels;\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            if (values.length > 1) {\n                console.log(\"More than one value selected. This should never happen.\");\n                return;\n            } else if (values.length === 0 || !values[0]?.id) {\n                bind.onChange(null);\n                return;\n            }\n            bind.onChange(values[0]);\n        },\n        [bind.value, bind.onChange, entries]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: CmsEditorContentEntry | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues([\n                {\n                    id: data.id,\n                    modelId: data.modelId\n                }\n            ]);\n        },\n        [storeValues]\n    );\n\n    const initialValue = useMemo(() => {\n        if (entries.length === 0 || loadedModels.length === 0) {\n            return null;\n        }\n        const entry = entries[0];\n        if (!entry) {\n            return null;\n        }\n        const model = loadedModels.find(model => model.modelId === entry.model.modelId);\n        if (!model) {\n            return null;\n        }\n        return {\n            entry,\n            model\n        };\n    }, [entries, loadedModels]);\n\n    return (\n        <>\n            <FieldLabel>{field.label}</FieldLabel>\n            <Container>\n                {loading && <Loader />}\n                {initialValue && (\n                    <Entry\n                        model={initialValue.model}\n                        placement=\"singleRefField\"\n                        index={0}\n                        entry={initialValue.entry}\n                        onRemove={onRemove}\n                    />\n                )}\n                <Options\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n\n                {newEntryDialogModel && (\n                    <NewReferencedEntryDialog\n                        model={newEntryDialogModel}\n                        onClose={onNewEntryDialogClose}\n                        onChange={onNewEntryCreate}\n                    />\n                )}\n\n                {linkEntryDialogModel && (\n                    <ReferencesDialog\n                        {...props}\n                        multiple={false}\n                        values={bind.value ? [bind.value] : []}\n                        contentModel={linkEntryDialogModel}\n                        storeValues={storeValues}\n                        onDialogClose={onLinkEntryDialogClose}\n                    />\n                )}\n            </Container>\n        </>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/Entries.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CmsReferenceContentEntry } from "../../components/types";
+interface Props {
+    entries: CmsReferenceContentEntry[];
+    children: (entry: CmsReferenceContentEntry, index: number) => React.ReactNode;
+    loadMore: () => void;
+}
+export declare const Entries: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/Entries.js

@@ -0,0 +1,62 @@
+"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.Entries = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Scrollbar = require("@webiny/ui/Scrollbar");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1q07fnu0",
+  label: "Container"
+})(function () {
+  return {
+    minWidth: "100%",
+    height: "460px",
+    backgroundColor: "var(--mdc-theme-background)",
+    boxSizing: "border-box",
+    display: "flex",
+    ">div>div": {
+      overflowX: "hidden !important",
+      overflowY: "scroll",
+      paddingRight: 20
+    }
+  };
+});
+var ContainerChild = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1q07fnu1",
+  label: "ContainerChild"
+})({
+  boxSizing: "border-box",
+  width: "100%",
+  margin: "0 2px 25px 2px"
+});
+var Entries = function Entries(props) {
+  var entries = props.entries,
+    children = props.children,
+    loadMore = props.loadMore;
+  var loadMoreOnScroll = (0, _react.useCallback)((0, _debounce.default)(function (position) {
+    if (position.top <= 0.9) {
+      return;
+    }
+    loadMore();
+  }, 500), [entries, loadMore]);
+  if (entries.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "No entries found.");
+  }
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    className: "entries"
+  }, /*#__PURE__*/_react.default.createElement(_Scrollbar.Scrollbar, {
+    "data-testid": "advanced-ref-field-entries",
+    onScrollFrame: loadMoreOnScroll
+  }, entries.map(function (entry, index) {
+    return /*#__PURE__*/_react.default.createElement(ContainerChild, {
+      key: "entry-".concat(entry.id)
+    }, children(entry, index));
+  })));
+};
+exports.Entries = Entries;

package/admin/plugins/fieldRenderers/ref/advanced/components/Entries.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","minWidth","height","backgroundColor","boxSizing","display","overflowX","overflowY","paddingRight","ContainerChild","width","margin","Entries","props","entries","children","loadMore","loadMoreOnScroll","useCallback","debounce","position","top","length","map","entry","index","id"],"sources":["Entries.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport styled from \"@emotion/styled\";\nimport { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { Scrollbar } from \"@webiny/ui/Scrollbar\";\nimport { positionValues as PositionValues } from \"react-custom-scrollbars\";\n\nconst Container = styled(\"div\")(() => ({\n    minWidth: \"100%\",\n    height: \"460px\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    boxSizing: \"border-box\",\n    display: \"flex\",\n    \">div>div\": {\n        overflowX: \"hidden !important\" as any,\n        overflowY: \"scroll\",\n        paddingRight: 20\n    }\n}));\nconst ContainerChild = styled(\"div\")({\n    boxSizing: \"border-box\",\n    width: \"100%\",\n    margin: \"0 2px 25px 2px\"\n});\n\ninterface Props {\n    entries: CmsReferenceContentEntry[];\n    children: (entry: CmsReferenceContentEntry, index: number) => React.ReactNode;\n    loadMore: () => void;\n}\n\nexport const Entries: React.VFC<Props> = props => {\n    const { entries, children, loadMore } = props;\n\n    const loadMoreOnScroll = useCallback(\n        debounce((position: PositionValues) => {\n            if (position.top <= 0.9) {\n                return;\n            }\n            loadMore();\n        }, 500),\n        [entries, loadMore]\n    );\n\n    if (entries.length === 0) {\n        return <>No entries found.</>;\n    }\n    return (\n        <Container className={\"entries\"}>\n            <Scrollbar data-testid=\"advanced-ref-field-entries\" onScrollFrame={loadMoreOnScroll}>\n                {entries.map((entry, index) => {\n                    return (\n                        <ContainerChild key={`entry-${entry.id}`}>\n                            {children(entry, index)}\n                        </ContainerChild>\n                    );\n                })}\n            </Scrollbar>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAEA;AAGA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAAA,OAAO;IACnCC,QAAQ,EAAE,MAAM;IAChBC,MAAM,EAAE,OAAO;IACfC,eAAe,EAAE,6BAA6B;IAC9CC,SAAS,EAAE,YAAY;IACvBC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE;MACRC,SAAS,EAAE,mBAA0B;MACrCC,SAAS,EAAE,QAAQ;MACnBC,YAAY,EAAE;IAClB;EACJ,CAAC;AAAA,CAAC,CAAC;AACH,IAAMC,cAAc,oBAAGT,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCI,SAAS,EAAE,YAAY;EACvBM,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE;AACZ,CAAC,CAAC;AAQK,IAAMC,OAAyB,GAAG,SAA5BA,OAAyB,CAAGC,KAAK,EAAI;EAC9C,IAAQC,OAAO,GAAyBD,KAAK,CAArCC,OAAO;IAAEC,QAAQ,GAAeF,KAAK,CAA5BE,QAAQ;IAAEC,QAAQ,GAAKH,KAAK,CAAlBG,QAAQ;EAEnC,IAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAChC,IAAAC,iBAAQ,EAAC,UAACC,QAAwB,EAAK;IACnC,IAAIA,QAAQ,CAACC,GAAG,IAAI,GAAG,EAAE;MACrB;IACJ;IACAL,QAAQ,EAAE;EACd,CAAC,EAAE,GAAG,CAAC,EACP,CAACF,OAAO,EAAEE,QAAQ,CAAC,CACtB;EAED,IAAIF,OAAO,CAACQ,MAAM,KAAK,CAAC,EAAE;IACtB,oBAAO,4DAAE,mBAAiB,CAAG;EACjC;EACA,oBACI,6BAAC,SAAS;IAAC,SAAS,EAAE;EAAU,gBAC5B,6BAAC,oBAAS;IAAC,eAAY,4BAA4B;IAAC,aAAa,EAAEL;EAAiB,GAC/EH,OAAO,CAACS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK,EAAK;IAC3B,oBACI,6BAAC,cAAc;MAAC,GAAG,kBAAWD,KAAK,CAACE,EAAE;IAAG,GACpCX,QAAQ,CAACS,KAAK,EAAEC,KAAK,CAAC,CACV;EAEzB,CAAC,CAAC,CACM,CACJ;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/Entry.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { CmsReferenceContentEntry, CmsReferenceValue } from "../../components/types";
+import { CmsModel } from "../../../../../../types";
+interface Props {
+    model: CmsModel;
+    entry: CmsReferenceContentEntry;
+    onChange: (value: CmsReferenceValue) => void;
+    index?: never;
+    selected: boolean;
+    onMoveUp?: never;
+    onMoveDown?: never;
+    onRemove?: never;
+    placement?: string;
+}
+interface PropsWithRemove {
+    onRemove: (entryId: string) => void;
+    model: CmsModel;
+    entry: CmsReferenceContentEntry;
+    index: number;
+    onMoveUp?: (index: number, toTop: boolean) => void;
+    onMoveDown?: (index: number, toBottom: boolean) => void;
+    onChange?: never;
+    selected?: never;
+    placement?: string;
+}
+export declare const Entry: React.VFC<PropsWithRemove | Props>;
+export {};