@webiny/app-headless-cms 0.0.0-mt-1

package/admin/components/DropZone/Vertical.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DragSource } from "../FieldEditor/FieldEditorContext";
+declare type VerticalProps = {
+    depth?: number;
+    onDrop(item: DragSource): void;
+    last?: boolean;
+    isVisible?: any;
+};
+declare const Vertical: ({ depth, last, onDrop, isVisible }: VerticalProps) => JSX.Element;
+export default Vertical;

package/admin/components/DropZone/Vertical.js

@@ -0,0 +1,79 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from "react";
+import styled from "@emotion/styled";
+import Droppable from "../Droppable";
+var InnerDivVertical = /*#__PURE__*/styled("div", {
+  target: "e1yx4w3z0",
+  label: "InnerDivVertical"
+})({
+  position: "absolute",
+  width: 10,
+  height: "100%",
+  zIndex: 3,
+  borderRadius: 0,
+  display: "none",
+  boxSizing: "border-box",
+  border: "1px dashed black",
+  borderSpacing: 5
+});
+var BackgroundColorDiv = /*#__PURE__*/styled("div", {
+  target: "e1yx4w3z1",
+  label: "BackgroundColorDiv"
+})({
+  width: "100%",
+  height: "100%"
+});
+var OuterDivVertical = /*#__PURE__*/styled("div", {
+  target: "e1yx4w3z2",
+  label: "OuterDivVertical"
+})({
+  position: "absolute",
+  width: "30%",
+  top: 0,
+  height: "100%",
+  zIndex: 10,
+  backgroundColor: "transparent"
+}, function (props) {
+  var _InnerDivVertical, _ref;
+
+  return _ref = {}, _defineProperty(_ref, props.last ? "right" : "left", -9), _defineProperty(_ref, "textAlign", props.last ? "right" : "left"), _defineProperty(_ref, InnerDivVertical, (_InnerDivVertical = {
+    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+  }, _defineProperty(_InnerDivVertical, props.last ? "right" : "left", -2), _defineProperty(_InnerDivVertical, "display", props.isDragging ? "block" : "none"), _defineProperty(_InnerDivVertical, BackgroundColorDiv, {
+    opacity: 0.5,
+    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+  }), _InnerDivVertical)), _ref;
+});
+
+var Vertical = function Vertical(_ref2) {
+  var depth = _ref2.depth,
+      last = _ref2.last,
+      onDrop = _ref2.onDrop,
+      isVisible = _ref2.isVisible;
+  return /*#__PURE__*/React.createElement(Droppable, {
+    onDrop: onDrop,
+    isVisible: isVisible
+  }, function (_ref3) {
+    var _ref4;
+
+    var isOver = _ref3.isOver,
+        isDragging = _ref3.isDragging,
+        drop = _ref3.drop;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: drop,
+      style: (_ref4 = {
+        /* For dropzone debugging: border: "1px solid blue",*/
+        width: "30%",
+        maxWidth: "100px",
+        height: "100%",
+        position: "absolute",
+        top: 0
+      }, _defineProperty(_ref4, last ? "right" : "left", 0), _defineProperty(_ref4, "zIndex", isDragging ? 1000 + depth : -1), _ref4)
+    }, /*#__PURE__*/React.createElement(OuterDivVertical, {
+      isOver: isOver,
+      isDragging: isDragging,
+      last: last
+    }, /*#__PURE__*/React.createElement(InnerDivVertical, null, /*#__PURE__*/React.createElement(BackgroundColorDiv, null))));
+  });
+};
+
+export default Vertical;

package/admin/components/DropZone/index.d.ts

@@ -0,0 +1,4 @@
+import Center from "./Center";
+import Horizontal from "./Horizontal";
+import Vertical from "./Vertical";
+export { Center, Horizontal, Vertical };

package/admin/components/DropZone/index.js

@@ -0,0 +1,4 @@
+import Center from "./Center";
+import Horizontal from "./Horizontal";
+import Vertical from "./Vertical";
+export { Center, Horizontal, Vertical };

package/admin/components/Droppable.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { ConnectDropTarget } from "react-dnd";
+import { DragSource } from "./FieldEditor/FieldEditorContext";
+export declare type DroppableChildrenFunction = (params: {
+    isDragging: boolean;
+    isOver: boolean;
+    item: any;
+    drop: ConnectDropTarget;
+}) => React.ReactElement;
+export declare type DroppableProps = {
+    type?: string;
+    children: DroppableChildrenFunction;
+    isDragging?: boolean;
+    isDroppable?: (item: any) => boolean;
+    isVisible?: (params: {
+        type: string;
+        item: any;
+        isDragging: boolean;
+    }) => boolean;
+    onDrop?: (item: DragSource) => void;
+};
+declare const Droppable: React.MemoExoticComponent<(props: DroppableProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>>;
+export default Droppable;

package/admin/components/Droppable.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from "react";
+import { useDrop } from "react-dnd";
+var Droppable = /*#__PURE__*/React.memo(function (props) {
+  var children = props.children,
+      onDrop = props.onDrop,
+      _props$isVisible = props.isVisible,
+      isVisible = _props$isVisible === void 0 ? function () {
+    return true;
+  } : _props$isVisible;
+
+  var _useDrop = useDrop({
+    accept: "element",
+    collect: function collect(monitor) {
+      return {
+        isOver: monitor.isOver() && monitor.isOver({
+          shallow: true
+        }),
+        item: monitor.getItem()
+      };
+    },
+    drop: function drop(_, monitor) {
+      if (typeof onDrop === "function") {
+        return onDrop(monitor.getItem());
+      }
+    }
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      _useDrop2$ = _useDrop2[0],
+      item = _useDrop2$.item,
+      isOver = _useDrop2$.isOver,
+      drop = _useDrop2[1];
+
+  if (item && !isVisible(item)) {
+    return null;
+  }
+
+  return children({
+    isDragging: Boolean(item),
+    isOver: isOver,
+    item: item,
+    drop: drop
+  });
+});
+export default Droppable;

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AppearanceTab: (props: any) => JSX.Element;
+export default AppearanceTab;

package/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.js

@@ -0,0 +1,83 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React, { useEffect } from "react";
+import { plugins } from "@webiny/plugins";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { i18n } from "@webiny/app/i18n";
+import { Radio, RadioGroup } from "@webiny/ui/Radio";
+import { Typography } from "@webiny/ui/Typography";
+import { css } from "emotion";
+import { validation } from "@webiny/validation";
+var t = i18n.ns("app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab");
+var style = {
+  topLabel: /*#__PURE__*/css({
+    marginBottom: 25
+  }, "label:topLabel;"),
+  noComponentsMessage: /*#__PURE__*/css({
+    textAlign: "center",
+    padding: 25
+  }, "label:noComponentsMessage;"),
+  radioContainer: /*#__PURE__*/css({
+    marginBottom: 10
+  }, "label:radioContainer;")
+};
+
+var AppearanceTab = function AppearanceTab(props) {
+  var field = props.field,
+      form = props.form;
+  var renderPlugins = plugins.byType("cms-editor-field-renderer").filter(function (item) {
+    return item.renderer.canUse({
+      field: field
+    });
+  });
+  useEffect(function () {
+    // If the currently selected render plugin is no longer available, select the first available one.
+    var currentlySelectedRenderAvailable = renderPlugins.find(function (item) {
+      return item.renderer.rendererName === field.renderer.name;
+    });
+
+    if (!currentlySelectedRenderAvailable) {
+      if (renderPlugins[0]) {
+        form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
+      } else {
+        console.log("No renderers for field ".concat(field.fieldId, " found."), field);
+      }
+    }
+  });
+
+  if (renderPlugins.length === 0) {
+    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12,
+      className: style.noComponentsMessage
+    }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["There are no components that can render this field."])))));
+  }
+
+  var Bind = form.Bind;
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.topLabel
+  }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Choose a component that will render the field:"])))), /*#__PURE__*/React.createElement(Bind, {
+    name: "renderer.name",
+    validate: validation.create("required")
+  }, /*#__PURE__*/React.createElement(RadioGroup, null, function (_ref) {
+    var onChange = _ref.onChange,
+        getValue = _ref.getValue;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderPlugins.map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.name,
+        className: style.radioContainer
+      }, /*#__PURE__*/React.createElement(Radio, {
+        value: getValue(item.renderer.rendererName),
+        onChange: onChange(item.renderer.rendererName),
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, item.renderer.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+          use: "caption"
+        }, item.renderer.description)))
+      }));
+    }));
+  }))));
+};
+
+export default AppearanceTab;

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CmsEditorField, CmsEditorFieldTypePlugin } from "../../../../types";
+import { FormRenderPropParams } from "@webiny/form/types";
+declare type GeneralTabProps = {
+    field: CmsEditorField;
+    form: FormRenderPropParams;
+    fieldPlugin: CmsEditorFieldTypePlugin;
+};
+declare const GeneralTab: ({ field, form, fieldPlugin }: GeneralTabProps) => JSX.Element;
+export default GeneralTab;

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js

@@ -0,0 +1,120 @@
+import _camelCase from "lodash/camelCase";
+import React, { useEffect, useCallback, useRef, useMemo } from "react";
+import { Input } from "@webiny/ui/Input";
+import { Switch } from "@webiny/ui/Switch";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { validation } from "@webiny/validation";
+import { useFieldEditor } from "./..";
+import { useContentModelEditor } from "../../ContentModelEditor/useContentModelEditor";
+
+var GeneralTab = function GeneralTab(_ref) {
+  var field = _ref.field,
+      form = _ref.form,
+      fieldPlugin = _ref.fieldPlugin;
+  var Bind = form.Bind,
+      setValue = form.setValue;
+  var inputRef = useRef(null);
+
+  var _useContentModelEdito = useContentModelEditor(),
+      data = _useContentModelEdito.data;
+
+  var _useFieldEditor = useFieldEditor(),
+      getField = _useFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
+  // 1. It's probably caused by the Tabs component which wraps this component.
+  // 2. It seems that the "autoFocus" prop on the Input doesn't work. I can't see it attached in the actual DOM.
+  // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design
+  //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then
+  //    it seems it's behaving correctly. ¯\_(ツ)_/¯
+
+
+  useEffect(function () {
+    setTimeout(function () {
+      inputRef.current && inputRef.current.focus();
+    }, 200);
+  }, []);
+  var afterChangeLabel = useCallback(function (value) {
+    setValue("fieldId", _camelCase(value));
+  }, []);
+  var beforeChangeFieldId = useCallback(function (value, baseOnChange) {
+    var newValue = value.trim();
+    baseOnChange(newValue);
+  }, []);
+  var fieldIdValidator = useCallback(function (fieldId) {
+    if (fieldId.trim().toLowerCase() !== "id") {
+      return true;
+    }
+
+    throw new Error("Cannot use \"id\" as Field ID.");
+  }, undefined);
+  var uniqueFieldIdValidator = useCallback(function (fieldId) {
+    var existingField = getField({
+      fieldId: fieldId
+    });
+
+    if (!existingField) {
+      return;
+    }
+
+    if (existingField.id === field.id) {
+      return true;
+    }
+
+    throw new Error("Please enter a unique Field ID.");
+  }, undefined);
+  var additionalSettings = null;
+
+  if (typeof fieldPlugin.field.renderSettings === "function") {
+    additionalSettings = fieldPlugin.field.renderSettings({
+      form: form,
+      afterChangeLabel: afterChangeLabel,
+      uniqueFieldIdValidator: uniqueFieldIdValidator,
+      contentModel: data
+    });
+  }
+
+  var predefinedValuesEnabled = useMemo(function () {
+    return fieldPlugin.field.allowPredefinedValues && typeof fieldPlugin.field.renderPredefinedValues === "function";
+  }, [field.fieldId]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "label",
+    validators: validation.create("required"),
+    afterChange: !field.id && afterChangeLabel
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Label",
+    inputRef: inputRef
+  }))), /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "fieldId",
+    validators: [validation.create("required"), uniqueFieldIdValidator, fieldIdValidator],
+    beforeChange: beforeChangeFieldId
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Field ID",
+    disabled: !!field.id
+  }))), /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "multipleValues"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    label: fieldPlugin.field.multipleValuesLabel,
+    disabled: !fieldPlugin.field.allowMultipleValues
+  }))), /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "predefinedValues.enabled"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    label: "Use predefined values",
+    disabled: !predefinedValuesEnabled
+  }))), /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, /*#__PURE__*/React.createElement(Bind, {
+    name: "helpText"
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Help text",
+    description: "Help text (optional)"
+  })))), additionalSettings);
+};
+
+export default GeneralTab;

package/admin/components/FieldEditor/EditFieldDialog/PredefinedValues.d.ts

@@ -0,0 +1,5 @@
+export default function PredefinedValues({ field, fieldPlugin, form }: {
+    field: any;
+    fieldPlugin: any;
+    form: any;
+}): any;

package/admin/components/FieldEditor/EditFieldDialog/PredefinedValues.js

@@ -0,0 +1,55 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React, { useCallback, useRef, cloneElement } from "react";
+import getValue from "./functions/getValue";
+import setValue from "./functions/setValue";
+export default function PredefinedValues(_ref) {
+  var field = _ref.field,
+      fieldPlugin = _ref.fieldPlugin,
+      form = _ref.form;
+  var memoizedBindComponents = useRef({});
+  var BaseFormBind = form.Bind;
+  var getBind = useCallback(function () {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var memoKey = index;
+
+    if (memoizedBindComponents.current[memoKey]) {
+      return memoizedBindComponents.current[memoKey];
+    }
+
+    memoizedBindComponents.current[memoKey] = function Bind(_ref2) {
+      var children = _ref2.children,
+          name = _ref2.name;
+      return /*#__PURE__*/React.createElement(BaseFormBind, {
+        name: "predefinedValues.values"
+      }, function (bind) {
+        var props = _objectSpread(_objectSpread({}, bind), {}, {
+          value: getValue({
+            bind: bind,
+            index: index,
+            name: name
+          }),
+          onChange: function onChange(value) {
+            setValue({
+              value: value,
+              bind: bind,
+              index: index,
+              name: name
+            });
+          }
+        });
+
+        if (typeof children === "function") {
+          return children(props);
+        }
+
+        return /*#__PURE__*/cloneElement(children, props);
+      });
+    };
+
+    return memoizedBindComponents.current[memoKey];
+  }, []);
+  return fieldPlugin.field.renderPredefinedValues({
+    field: field,
+    getBind: getBind
+  });
+}

package/admin/components/FieldEditor/EditFieldDialog/ValidatorsTab.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CmsEditorField } from "../../../../types";
+interface ValidatorsTabProps {
+    name: string;
+    validators: any[];
+    form: any;
+    field: CmsEditorField;
+}
+declare const ValidatorsTab: React.FunctionComponent<ValidatorsTabProps>;
+export default ValidatorsTab;

package/admin/components/FieldEditor/EditFieldDialog/ValidatorsTab.js

@@ -0,0 +1,121 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _debounce from "lodash/debounce";
+import _cloneDeep from "lodash/cloneDeep";
+import React from "react";
+import { css } from "emotion";
+import { Switch } from "@webiny/ui/Switch";
+import { SimpleForm, SimpleFormContent, SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
+import { Form } from "@webiny/form";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { validation } from "@webiny/validation";
+import { Input } from "@webiny/ui/Input";
+
+var onEnabledChange = function onEnabledChange(_ref) {
+  var data = _ref.data,
+      validationValue = _ref.validationValue,
+      onChangeValidation = _ref.onChangeValidation,
+      validator = _ref.validator;
+
+  if (data) {
+    var index = validationValue.findIndex(function (item) {
+      return item.name === validator.name;
+    });
+    onChangeValidation([].concat(_toConsumableArray(validationValue.slice(0, index)), _toConsumableArray(validationValue.slice(index + 1))));
+  } else {
+    onChangeValidation([].concat(_toConsumableArray(validationValue), [{
+      name: validator.name,
+      settings: validator.defaultSettings,
+      message: validator.defaultMessage
+    }]));
+  }
+};
+
+var onFormChange = _debounce(function (_ref2) {
+  var data = _ref2.data,
+      validationValue = _ref2.validationValue,
+      onChangeValidation = _ref2.onChangeValidation,
+      validatorIndex = _ref2.validatorIndex;
+
+  var newValidationValue = _cloneDeep(validationValue);
+
+  newValidationValue[validatorIndex] = _objectSpread(_objectSpread({}, newValidationValue[validatorIndex]), _cloneDeep(data));
+  onChangeValidation(newValidationValue);
+}, 200);
+
+var noMargin = /*#__PURE__*/css({
+  margin: "0 !important"
+}, "label:noMargin;");
+
+var ValidatorsTab = function ValidatorsTab(props) {
+  var field = props.field,
+      name = props.name,
+      validators = props.validators,
+      Bind = props.form.Bind;
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: name,
+    defaultValue: []
+  }, function (_ref3) {
+    var validationValue = _ref3.value,
+        onChangeValidation = _ref3.onChange;
+    return validators.map(function (_ref4) {
+      var optional = _ref4.optional,
+          validator = _ref4.validator;
+      var validatorIndex = (validationValue || []).findIndex(function (item) {
+        return item.name === validator.name;
+      });
+      var data = (validationValue || [])[validatorIndex];
+      return /*#__PURE__*/React.createElement(SimpleForm, {
+        key: validator.name,
+        noElevation: true,
+        className: noMargin,
+        "data-testid": "cms.editor.field-validator.".concat(validator.name)
+      }, /*#__PURE__*/React.createElement(SimpleFormHeader, {
+        title: validator.label
+      }, optional && /*#__PURE__*/React.createElement(Switch, {
+        label: "Enabled",
+        value: validatorIndex >= 0,
+        onChange: function onChange() {
+          return onEnabledChange({
+            data: data,
+            validationValue: validationValue,
+            onChangeValidation: onChangeValidation,
+            validator: validator
+          });
+        }
+      })), data && /*#__PURE__*/React.createElement(Form, {
+        data: data,
+        onChange: function onChange(data) {
+          return onFormChange({
+            data: data,
+            validationValue: validationValue,
+            onChangeValidation: onChangeValidation,
+            validatorIndex: validatorIndex
+          });
+        }
+      }, function (_ref5) {
+        var Bind = _ref5.Bind,
+            setValue = _ref5.setValue;
+        return /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+          span: 12
+        }, /*#__PURE__*/React.createElement(Bind, {
+          name: "message",
+          validators: validation.create("required")
+        }, /*#__PURE__*/React.createElement(Input, {
+          label: "Message",
+          description: "This message will be displayed to the user"
+        })))), typeof validator.renderSettings === "function" && validator.renderSettings({
+          field: field,
+          setValue: setValue,
+          setMessage: function setMessage(message) {
+            setValue("message", message);
+          },
+          data: data,
+          Bind: Bind
+        }));
+      }));
+    });
+  });
+};
+
+export default ValidatorsTab;

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.d.ts

@@ -0,0 +1,6 @@
+declare const getValue: ({ bind, index, name }: {
+    bind: any;
+    index: any;
+    name: any;
+}) => any;
+export default getValue;

package/admin/components/FieldEditor/EditFieldDialog/functions/getValue.js

@@ -0,0 +1,16 @@
+import get from "lodash/get";
+
+var getValue = function getValue(_ref) {
+  var bind = _ref.bind,
+      index = _ref.index,
+      name = _ref.name;
+  var value = bind.value || [];
+
+  if (index >= 0) {
+    return get(value, "".concat(index, ".").concat(name));
+  }
+
+  return value;
+};
+
+export default getValue;

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.d.ts

@@ -0,0 +1,7 @@
+declare const setValue: ({ value, bind, index, name }: {
+    value: any;
+    bind: any;
+    index: any;
+    name: any;
+}) => void;
+export default setValue;

package/admin/components/FieldEditor/EditFieldDialog/functions/setValue.js

@@ -0,0 +1,21 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import set from "lodash/set";
+
+var setValue = function setValue(_ref) {
+  var value = _ref.value,
+      bind = _ref.bind,
+      index = _ref.index,
+      name = _ref.name;
+
+  var newValue = _toConsumableArray(bind.value || []);
+
+  if (index >= 0) {
+    set(newValue, "".concat(index, ".").concat(name), value);
+  } else {
+    newValue = value;
+  }
+
+  bind.onChange(newValue);
+};
+
+export default setValue;

package/admin/components/FieldEditor/EditFieldDialog.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CmsEditorField } from "../../../types";
+declare type EditFieldDialogProps = {
+    field: CmsEditorField;
+    onClose: Function;
+    onSubmit: (data: any) => void;
+};
+declare const EditFieldDialog: ({ field, onSubmit, ...props }: EditFieldDialogProps) => JSX.Element;
+export default EditFieldDialog;