@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

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

@@ -0,0 +1,185 @@
+"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"
+})({
+  borderLeft: "3px solid var(--mdc-theme-background)"
+  //paddingLeft: "10px"
+});
+
+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","borderLeft","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    CmsEditorFieldRendererProps,\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    borderLeft: \"3px solid var(--mdc-theme-background)\"\n    //paddingLeft: \"10px\"\n});\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 CmsEditorFieldRendererProps {\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,61 @@
+"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",
+    maxHeight: 460,
+    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 null;
+  }
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__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","maxHeight","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    maxHeight: 460,\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 null;\n    }\n    return (\n        <Container>\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,SAAS,EAAE,GAAG;IACdC,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,oBAAGV,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCK,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,OAAO,IAAI;EACf;EACA,oBACI,6BAAC,SAAS,qBACN,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 {};

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

@@ -0,0 +1,153 @@
+"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.Entry = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Image = require("./entry/Image");
+var _ModelName = require("./entry/ModelName");
+var _Title = require("./entry/Title");
+var _Description = require("./entry/Description");
+var _Status = require("./entry/Status");
+var _CreatedBy = require("./entry/CreatedBy");
+var _ModifiedBy = require("./entry/ModifiedBy");
+var _View = require("./entry/View");
+var _Select = require("./entry/Select");
+var _Remove = require("./entry/Remove");
+var _MoveUp = require("./entry/MoveUp");
+var _MoveDown = require("./entry/MoveDown");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11v6udd0",
+  label: "Container"
+})({
+  width: "100%",
+  display: "flex",
+  backgroundColor: "#FFF",
+  flexDirection: "column",
+  boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",
+  marginBottom: "10px",
+  boxSizing: "border-box"
+});
+var ContentContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11v6udd1",
+  label: "ContentContainer"
+})({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "166px auto",
+  borderBottom: "1px solid var(--mdc-theme-background)"
+});
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11v6udd2",
+  label: "Content"
+})({
+  paddingLeft: "16px",
+  paddingTop: "18px",
+  paddingBottom: "10px"
+});
+var FooterContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11v6udd3",
+  label: "FooterContainer"
+})({
+  display: "flex",
+  flexDirection: "row",
+  padding: "10px",
+  flexWrap: "wrap-reverse",
+  justifyContent: "center",
+  marginBottom: "-10px"
+});
+var LeftContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11v6udd4",
+  label: "LeftContainer"
+})({
+  display: "flex",
+  flexWrap: "nowrap",
+  flexBasis: "50%",
+  alignItems: "center",
+  flexShrink: 1,
+  flexGrow: 1,
+  justifyContent: "space-around",
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  paddingBottom: 10,
+  marginTop: -10,
+  paddingTop: 15
+});
+var RightContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11v6udd5",
+  label: "RightContainer"
+})({
+  display: "flex",
+  flexWrap: "nowrap",
+  flexBasis: "50%",
+  flexShrink: 1,
+  flexGrow: 1,
+  justifyContent: "space-around",
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  paddingBottom: 10,
+  ">div": {
+    minWidth: "100px"
+  }
+});
+var Entry = function Entry(_ref) {
+  var model = _ref.model,
+    entry = _ref.entry,
+    onChange = _ref.onChange,
+    onRemove = _ref.onRemove,
+    selected = _ref.selected,
+    index = _ref.index,
+    onMoveUpClick = _ref.onMoveUp,
+    onMoveDownClick = _ref.onMoveDown,
+    placement = _ref.placement;
+  var onMoveUp = (0, _react.useCallback)(function (ev) {
+    if (!onMoveUpClick) {
+      return;
+    }
+    onMoveUpClick(index, ev.shiftKey);
+  }, [onMoveUpClick, index]);
+  var onMoveDown = (0, _react.useCallback)(function (ev) {
+    if (!onMoveDownClick) {
+      return;
+    }
+    onMoveDownClick(index, ev.shiftKey);
+  }, [onMoveDownClick, index]);
+  var icon = model.icon;
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(ContentContainer, null, /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    title: entry.title,
+    src: entry.image,
+    icon: icon
+  }), /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(_ModelName.ModelName, {
+    name: entry.model.name
+  }), /*#__PURE__*/_react.default.createElement(_Title.Title, {
+    title: entry.title
+  }), /*#__PURE__*/_react.default.createElement(_Description.Description, {
+    description: entry.description
+  }))), /*#__PURE__*/_react.default.createElement(FooterContainer, null, /*#__PURE__*/_react.default.createElement(LeftContainer, null, /*#__PURE__*/_react.default.createElement(_Status.Status, {
+    status: entry.status
+  }), /*#__PURE__*/_react.default.createElement(_CreatedBy.CreatedBy, {
+    createdBy: entry.createdBy,
+    createdOn: entry.createdOn
+  }), /*#__PURE__*/_react.default.createElement(_ModifiedBy.ModifiedBy, {
+    modifiedBy: entry.modifiedBy,
+    savedOn: entry.savedOn
+  })), /*#__PURE__*/_react.default.createElement(RightContainer, null, placement == "multiRef" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MoveUp.MoveUp, {
+    className: onMoveUpClick ? "active" : "disabled",
+    onClick: onMoveUp
+  }), /*#__PURE__*/_react.default.createElement(_MoveDown.MoveDown, {
+    className: onMoveDownClick ? "active" : "disabled",
+    onClick: onMoveDown
+  })), /*#__PURE__*/_react.default.createElement(_View.View, {
+    entry: entry
+  }), onChange && /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    entry: entry,
+    onChange: onChange,
+    selected: selected
+  }), onRemove && /*#__PURE__*/_react.default.createElement(_Remove.Remove, {
+    entry: entry,
+    onRemove: onRemove
+  }))));
+};
+exports.Entry = Entry;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","width","display","backgroundColor","flexDirection","boxShadow","marginBottom","boxSizing","ContentContainer","gridTemplateColumns","borderBottom","Content","paddingLeft","paddingTop","paddingBottom","FooterContainer","padding","flexWrap","justifyContent","LeftContainer","flexBasis","alignItems","flexShrink","flexGrow","marginTop","RightContainer","minWidth","Entry","model","entry","onChange","onRemove","selected","index","onMoveUpClick","onMoveUp","onMoveDownClick","onMoveDown","placement","useCallback","ev","shiftKey","icon","title","image","name","description","status","createdBy","createdOn","modifiedBy","savedOn"],"sources":["Entry.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n    CmsReferenceContentEntry,\n    CmsReferenceValue\n} from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { Image } from \"./entry/Image\";\nimport { ModelName } from \"./entry/ModelName\";\nimport { Title } from \"./entry/Title\";\nimport { Description } from \"./entry/Description\";\nimport { Status } from \"./entry/Status\";\nimport { CreatedBy } from \"./entry/CreatedBy\";\nimport { ModifiedBy } from \"./entry/ModifiedBy\";\nimport { View } from \"./entry/View\";\nimport { Select } from \"./entry/Select\";\nimport { Remove } from \"./entry/Remove\";\nimport { MoveUp } from \"./entry/MoveUp\";\nimport { MoveDown } from \"./entry/MoveDown\";\nimport { CmsModel } from \"~/types\";\n\nconst Container = styled(\"div\")({\n    width: \"100%\",\n    display: \"flex\",\n    backgroundColor: \"#FFF\",\n    flexDirection: \"column\",\n    boxShadow: \"0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)\",\n    marginBottom: \"10px\",\n    boxSizing: \"border-box\"\n});\n\nconst ContentContainer = styled(\"div\")({\n    width: \"100%\",\n    display: \"grid\",\n    gridTemplateColumns: \"166px auto\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\"\n});\n\nconst Content = styled(\"div\")({\n    paddingLeft: \"16px\",\n    paddingTop: \"18px\",\n    paddingBottom: \"10px\"\n});\n\nconst FooterContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    padding: \"10px\",\n    flexWrap: \"wrap-reverse\",\n    justifyContent: \"center\",\n    marginBottom: \"-10px\"\n});\n\nconst LeftContainer = styled(\"div\")({\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    flexBasis: \"50%\",\n    alignItems: \"center\",\n    flexShrink: 1,\n    flexGrow: 1,\n    justifyContent: \"space-around\",\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    paddingBottom: 10,\n    marginTop: -10,\n    paddingTop: 15\n});\n\nconst RightContainer = styled(\"div\")({\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    flexBasis: \"50%\",\n    flexShrink: 1,\n    flexGrow: 1,\n    justifyContent: \"space-around\",\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    paddingBottom: 10,\n    \">div\": {\n        minWidth: \"100px\"\n    }\n});\n\ninterface Props {\n    model: CmsModel;\n    entry: CmsReferenceContentEntry;\n    onChange: (value: CmsReferenceValue) => void;\n    index?: never;\n    selected: boolean;\n    onMoveUp?: never;\n    onMoveDown?: never;\n    onRemove?: never;\n    placement?: string;\n}\n\ninterface PropsWithRemove {\n    onRemove: (entryId: string) => void;\n    model: CmsModel;\n    entry: CmsReferenceContentEntry;\n    index: number;\n    onMoveUp?: (index: number, toTop: boolean) => void;\n    onMoveDown?: (index: number, toBottom: boolean) => void;\n    onChange?: never;\n    selected?: never;\n    placement?: string;\n}\n\nexport const Entry: React.VFC<PropsWithRemove | Props> = ({\n    model,\n    entry,\n    onChange,\n    onRemove,\n    selected,\n    index,\n    onMoveUp: onMoveUpClick,\n    onMoveDown: onMoveDownClick,\n    placement\n}) => {\n    const onMoveUp = useCallback(\n        (ev: React.MouseEvent) => {\n            if (!onMoveUpClick) {\n                return;\n            }\n            onMoveUpClick(index, ev.shiftKey);\n        },\n        [onMoveUpClick, index]\n    );\n    const onMoveDown = useCallback(\n        (ev: React.MouseEvent) => {\n            if (!onMoveDownClick) {\n                return;\n            }\n            onMoveDownClick(index, ev.shiftKey);\n        },\n        [onMoveDownClick, index]\n    );\n\n    const icon = model.icon;\n\n    return (\n        <Container>\n            <ContentContainer>\n                <Image title={entry.title} src={entry.image} icon={icon} />\n                <Content>\n                    <ModelName name={entry.model.name} />\n                    <Title title={entry.title} />\n                    <Description description={entry.description} />\n                </Content>\n            </ContentContainer>\n            <FooterContainer>\n                <LeftContainer>\n                    <Status status={entry.status} />\n                    <CreatedBy createdBy={entry.createdBy} createdOn={entry.createdOn} />\n                    <ModifiedBy modifiedBy={entry.modifiedBy} savedOn={entry.savedOn} />\n                </LeftContainer>\n                <RightContainer>\n                    {placement == \"multiRef\" && (\n                        <>\n                            <MoveUp\n                                className={onMoveUpClick ? \"active\" : \"disabled\"}\n                                onClick={onMoveUp}\n                            />\n                            <MoveDown\n                                className={onMoveDownClick ? \"active\" : \"disabled\"}\n                                onClick={onMoveDown}\n                            />\n                        </>\n                    )}\n                    <View entry={entry} />\n                    {onChange && <Select entry={entry} onChange={onChange} selected={selected} />}\n                    {onRemove && <Remove entry={entry} onRemove={onRemove} />}\n                </RightContainer>\n            </FooterContainer>\n        </Container>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const Loader: React.VFC;
+export declare const AbsoluteLoader: React.VFC;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loader = exports.AbsoluteLoader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Progress = require("@webiny/ui/Progress");
+var LoaderContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1wb4am30",
+  label: "LoaderContainer"
+})({
+  display: "flex",
+  position: "relative",
+  minHeight: "50px"
+});
+var AbsoluteLoaderContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1wb4am31",
+  label: "AbsoluteLoaderContainer"
+})({
+  display: "flex",
+  minHeight: "100%",
+  position: "absolute",
+  width: "100%",
+  top: 0,
+  left: 0
+});
+var Loader = function Loader() {
+  return /*#__PURE__*/_react.default.createElement(LoaderContainer, null, /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null));
+};
+exports.Loader = Loader;
+var AbsoluteLoader = function AbsoluteLoader() {
+  return /*#__PURE__*/_react.default.createElement(AbsoluteLoaderContainer, null, /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null));
+};
+exports.AbsoluteLoader = AbsoluteLoader;

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

@@ -0,0 +1 @@
+{"version":3,"names":["LoaderContainer","styled","display","position","minHeight","AbsoluteLoaderContainer","width","top","left","Loader","AbsoluteLoader"],"sources":["Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\n\nconst LoaderContainer = styled(\"div\")({\n    display: \"flex\",\n    position: \"relative\",\n    minHeight: \"50px\"\n});\nconst AbsoluteLoaderContainer = styled(\"div\")({\n    display: \"flex\",\n    minHeight: \"100%\",\n    position: \"absolute\",\n    width: \"100%\",\n    top: 0,\n    left: 0\n});\nexport const Loader: React.VFC = () => {\n    return (\n        <LoaderContainer>\n            <CircularProgress />\n        </LoaderContainer>\n    );\n};\nexport const AbsoluteLoader: React.VFC = () => {\n    return (\n        <AbsoluteLoaderContainer>\n            <CircularProgress />\n        </AbsoluteLoaderContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,eAAe,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAClCC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE;AACf,CAAC,CAAC;AACF,IAAMC,uBAAuB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1CC,OAAO,EAAE,MAAM;EACfE,SAAS,EAAE,MAAM;EACjBD,QAAQ,EAAE,UAAU;EACpBG,KAAK,EAAE,MAAM;EACbC,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE;AACV,CAAC,CAAC;AACK,IAAMC,MAAiB,GAAG,SAApBA,MAAiB,GAAS;EACnC,oBACI,6BAAC,eAAe,qBACZ,6BAAC,0BAAgB,OAAG,CACN;AAE1B,CAAC;AAAC;AACK,IAAMC,cAAyB,GAAG,SAA5BA,cAAyB,GAAS;EAC3C,oBACI,6BAAC,uBAAuB,qBACpB,6BAAC,0BAAgB,OAAG,CACE;AAElC,CAAC;AAAC"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { CmsModel } from "../../../../../../types";
+interface Props {
+    model: Pick<CmsModel, "modelId">;
+    onClose: () => void;
+    onChange: (entry: any) => void;
+}
+export declare const NewReferencedEntryDialog: React.VFC<Props>;
+export {};