@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.1

package/build/esm/context/messagesContext/store.js

@@ -0,0 +1,14 @@
+import { initializeStore } from '../../utils/store';
+export const createMessagesStore = initializeStore({
+    subscribers: [],
+}, (set, _get) => ({
+    subscribe: (type, payloadCallback) => {
+        set((state) => (Object.assign(Object.assign({}, state), { subscribers: [...state.subscribers, { action: type, handler: payloadCallback }] })));
+        return () => {
+            set((state) => (Object.assign(Object.assign({}, state), { subscribers: state.subscribers.filter(({ handler, action }) => payloadCallback !== handler || type !== action) })));
+        };
+    },
+    unsubscribe: (type, payloadCallback) => {
+        set((state) => (Object.assign(Object.assign({}, state), { subscribers: state.subscribers.filter(({ handler, action }) => payloadCallback !== handler || type !== action) })));
+    },
+}));

package/build/esm/editor/data/templates/test-editor-block.json

@@ -0,0 +1,18 @@
+{
+  "template": {
+    "type": "test-editor-block",
+    "title": "Lorem ipsum dolor sit amet",
+    "table": {
+      "content": [
+        ["Lorem", "ipsum 1", "dolor 2", "sit 3"],
+        ["Lorem 1", "0", "0", "0"],
+        ["Lorem 2", "0", "0", "1"],
+        ["Lorem 3", "0", "0", "1"],
+        ["Lorem 4", "0", "1", "1"],
+        ["Lorem 5", "1", "1", "1"]
+      ],
+      "legend": ["ipsum 1", "ipsum 2"],
+      "justify": ["start", "center", "center", "center"]
+    }
+  }
+}

package/build/esm/editor-v2/components/BigOverlay/BigOverlay.css

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-big-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-big-overlay__border {
+  pointer-events: none;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  background-color: var(--g-color-base-brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}

package/build/esm/editor-v2/components/BigOverlay/BigOverlay.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './BigOverlay.css';
+interface BigOverlayProps extends ClassNameProps {
+}
+declare const BigOverlay: React.FC<BigOverlayProps>;
+export default BigOverlay;

package/build/esm/editor-v2/components/BigOverlay/BigOverlay.js

@@ -0,0 +1,35 @@
+import React, { useContext, useState } from 'react';
+import { Stop } from '@gravity-ui/icons';
+import { ActionTypes, } from '../../../common/types';
+import { block } from '../../../utils';
+import { IframeContext } from '../../context/iframeContext';
+import { useMessageObserver } from '../../context/messagesContext';
+import './BigOverlay.css';
+const b = block('big-overlay');
+const BigOverlay = ({ className }) => {
+    const { iframeElement } = useContext(IframeContext);
+    const [mousePosition, setMousePosition] = useState(undefined);
+    useMessageObserver(ActionTypes.OverlayModeOnMove, (payload, meta) => {
+        if (payload && payload.cursor) {
+            const { x, y } = payload.cursor;
+            const iframeRect = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.getClientRects().item(0);
+            if (iframeRect) {
+                const newX = meta.source === 'editor' ? x : x + iframeRect.x;
+                const newY = meta.source === 'editor' ? y : y + iframeRect.y;
+                setMousePosition({ x: newX, y: newY });
+            }
+        }
+    }, [iframeElement]);
+    useMessageObserver(ActionTypes.InsertModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    useMessageObserver(ActionTypes.ReorderModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    return (React.createElement("div", { className: b(null, className) }, mousePosition ? (React.createElement("div", { className: b('border'), style: {
+            top: mousePosition.y,
+            left: mousePosition.x,
+        } },
+        React.createElement(Stop, { height: 20, width: 20 }))) : null));
+};
+export default BigOverlay;

package/build/esm/editor-v2/components/BlockConfig/BlockConfig.css

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-block-config {
+  padding: 12px;
+}
+.pc-block-config__title {
+  margin-bottom: 16px;
+  margin-top: 8px;
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
+.pc-block-config__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/esm/editor-v2/components/BlockConfig/BlockConfig.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+import './BlockConfig.css';
+interface BlockConfigProps extends ClassNameProps {
+}
+declare const BlockConfig: React.FC<BlockConfigProps>;
+export default BlockConfig;

package/build/esm/editor-v2/components/BlockConfig/BlockConfig.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import _ from 'lodash';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import { useEditorStore } from '../../context/editorContext';
+import { generateChildrenPathFromArray } from '../../utils';
+import DynamicForm from '../DynamicForm/DynamicForm';
+import './BlockConfig.css';
+const b = block('block-config');
+const BlockConfig = ({ className }) => {
+    const { selectedBlock } = useEditorStore();
+    const { config, blocks, subBlocks, updateField } = useContentConfigStore();
+    const currentBlockPath = (selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        ? generateChildrenPathFromArray(selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        : '[]';
+    const currentConfig = _.get(config.blocks, currentBlockPath || '');
+    const currentSchema = [...blocks, ...subBlocks].find(({ type }) => type === (currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.type));
+    const onUpdate = (key, value) => {
+        updateField('blocks' + currentBlockPath + '.' + key, value);
+    };
+    if (!currentConfig) {
+        return React.createElement("div", { className: b('empty') }, "Select block for start");
+    }
+    if (!currentSchema) {
+        return React.createElement("div", { className: b('empty') },
+            "Not supported: ",
+            currentConfig.type);
+    }
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('title') }, currentSchema.schema.name),
+        React.createElement(DynamicForm, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate })));
+};
+export default BlockConfig;

package/build/esm/editor-v2/components/BlocksList/BlocksList.css

@@ -0,0 +1,42 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-blocks-list {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pc-blocks-list__card {
+  padding: 8px;
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 8px;
+}
+.pc-blocks-list__card:last-child {
+  margin-bottom: 0;
+}
+.pc-blocks-list__card:active {
+  background-color: var(--g-color-base-generic-hover);
+}
+.pc-blocks-list__title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+  margin-bottom: 10px;
+}
+.pc-blocks-list__section {
+  margin-bottom: 20px;
+}
+.pc-blocks-list__section:last-child {
+  margin-bottom: 0;
+}

package/build/esm/editor-v2/components/BlocksList/BlocksList.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ItemConfig } from '../../../common/types';
+import './BlocksList.css';
+export interface BlocksListProps {
+    blocks: ItemConfig[];
+}
+declare const BlocksList: (_p: PropsWithChildren<BlocksListProps>) => JSX.Element;
+export default BlocksList;

package/build/esm/editor-v2/components/BlocksList/BlocksList.js

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import { Card } from '@gravity-ui/uikit';
+import { ActionTypes } from '../../../common/types';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import { useMessageSender } from '../../context/messagesContext';
+import './BlocksList.css';
+const b = block('blocks-list');
+const BlocksList = (_p) => {
+    const { blocks } = useContentConfigStore();
+    const sendMessage = useMessageSender();
+    const onMouseDown = useCallback((blockType) => {
+        sendMessage({ type: ActionTypes.InsertModeEnable, payload: { blockType } });
+    }, [sendMessage]);
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('section') },
+            React.createElement("div", { className: b('title') }, "Blocks"),
+            blocks.map(({ type, schema: { name } }) => (React.createElement(Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) }, name))))));
+};
+export default BlocksList;

package/build/esm/editor-v2/components/DynamicForm/DynamicForm.css

@@ -0,0 +1,2 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */

package/build/esm/editor-v2/components/DynamicForm/DynamicForm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ConfigInput } from '../../../common/types';
+import { ClassNameProps, PageContent } from '../../../models';
+import './DynamicForm.css';
+export type DynamicFormValue = string | number | [] | object | boolean | PageContent | undefined;
+interface DynamicFormProps extends ClassNameProps {
+    blockConfig: Array<ConfigInput>;
+    contentConfig: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+}
+declare const DynamicForm: React.FC<DynamicFormProps>;
+export default DynamicForm;

package/build/esm/editor-v2/components/DynamicForm/DynamicForm.js

@@ -0,0 +1,116 @@
+import React, { useCallback } from 'react';
+import _ from 'lodash';
+import { block } from '../../../utils';
+import ArrayDynamicField from './Fields/Array/Array';
+import BooleanDynamicField from './Fields/Boolean/Boolean';
+import NumberDynamicField from './Fields/Number/Number';
+import ObjectDynamicField from './Fields/Object/Object';
+import OneOfDynamicField from './Fields/OneOf/OneOf';
+import SelectDynamicField from './Fields/Select/Select';
+import TextDynamicField from './Fields/Text/Text';
+import TextAreaDynamicField from './Fields/TextArea/TextArea';
+import { getContent, getFullPath } from './utils';
+import './DynamicForm.css';
+const b = block('dynamic-form');
+const DynamicForm = (props) => {
+    const { blockConfig, onUpdate, contentConfig } = props;
+    const inputs = blockConfig;
+    const getData = useCallback((variable) => {
+        if (variable.startsWith('block.')) {
+            const purePath = variable.replace('block.', '');
+            return _.get(contentConfig, purePath);
+        }
+        if ((variable.startsWith(`'`) && variable.endsWith(`'`)) ||
+            (variable.startsWith(`"`) && variable.endsWith(`"`))) {
+            // @ts-ignore TODO: replaceAll types
+            return variable.replaceAll(`'`, '').replaceAll(`"`, '');
+        }
+        return undefined;
+    }, [contentConfig]);
+    const decide = useCallback((showIf) => {
+        const parts = showIf.split(' ');
+        if (!(parts.length === 3)) {
+            // eslint-disable-next-line no-console
+            console.log('Something bad happened in showIf, ignored');
+            return true;
+        }
+        const [firstVariable, equals, secondVariable] = parts;
+        const data1 = getData(firstVariable);
+        const data2 = getData(secondVariable);
+        if (equals === '===') {
+            return data1 === data2;
+        }
+        else {
+            return data1 !== data2;
+        }
+    }, [getData]);
+    const renderInput = useCallback((input) => {
+        const fieldPath = input.name;
+        const fieldValue = getContent(contentConfig, input.name);
+        if (input.showIf) {
+            const decision = decide(input.showIf);
+            if (!decision) {
+                return React.createElement("div", null,
+                    "Hidden Field: ",
+                    input.name);
+            }
+        }
+        // Text, Select, Boolean and etc
+        const onSimpleDynamicFieldUpdate = (value) => {
+            onUpdate(fieldPath, value);
+        };
+        // Array and Objects
+        const onComplexDynamicFieldUpdate = (key, value) => {
+            onUpdate(getFullPath(fieldPath, key), value);
+        };
+        switch (input.type) {
+            case 'text': {
+                return (React.createElement(TextDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'boolean': {
+                return (React.createElement(BooleanDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'textarea': {
+                return (React.createElement(TextAreaDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'select': {
+                return (React.createElement(SelectDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'number': {
+                return (React.createElement(NumberDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'object': {
+                if (!input || !('properties' in input)) {
+                    return null;
+                }
+                return (React.createElement(ObjectDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'array': {
+                return (React.createElement(ArrayDynamicField, { blockConfig: input, title: input.title, values: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'oneOf': {
+                if (!input || !('options' in input)) {
+                    return null;
+                }
+                return (React.createElement(OneOfDynamicField, { inputConfig: input, contentConfig: contentConfig, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            default: {
+                return React.createElement("div", null,
+                    "Ignore ",
+                    JSON.stringify(input));
+            }
+        }
+    }, [contentConfig, decide, onUpdate]);
+    const sortedInputs = inputs.sort((x, y) => {
+        const nestingFieldTypes = ['object', 'array', 'oneOf'];
+        if (nestingFieldTypes.includes(x.type)) {
+            return 1;
+        }
+        if (nestingFieldTypes.includes(y.type)) {
+            return -1;
+        }
+        return 0;
+    });
+    return (React.createElement("div", { className: b() }, sortedInputs.map((input, index) => (React.createElement(React.Fragment, { key: index }, renderInput(input))))));
+};
+export default DynamicForm;

package/build/esm/editor-v2/components/DynamicForm/FieldBase/FieldBase.css

@@ -0,0 +1,61 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-field-base {
+  position: relative;
+  margin-top: 20px;
+}
+.pc-field-base:hover > .pc-field-base__top > .pc-field-base__button {
+  opacity: 1;
+}
+.pc-field-base__top {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.pc-field-base__foldable {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.pc-field-base__non-foldable:before {
+  position: absolute;
+  right: calc(100% + 5px);
+}
+.pc-field-base__button {
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+.pc-field-base__title {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_l {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base:first-child {
+  margin-top: 0;
+}

package/build/esm/editor-v2/components/DynamicForm/FieldBase/FieldBase.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../../../models';
+import './FieldBase.css';
+export interface FieldBaseParams {
+    title?: string;
+    textSize?: 's' | 'm' | 'l';
+    onRefresh?: (value: undefined) => void;
+    expandable?: boolean;
+}
+export interface FieldBaseProps extends ClassNameProps, PropsWithChildren, FieldBaseParams {
+}
+declare const FieldBase: React.FC<FieldBaseProps>;
+export default FieldBase;

package/build/esm/editor-v2/components/DynamicForm/FieldBase/FieldBase.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { ArrowRotateLeft } from '@gravity-ui/icons';
+import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { block } from '../../../../utils';
+import './FieldBase.css';
+const b = block('field-base');
+const FieldBase = (props) => {
+    const { className, title, textSize, children, onRefresh, expandable = false } = props;
+    const [showChildren, setShowChildren] = useState(!expandable);
+    const titleComponent = React.useMemo(() => {
+        if (title) {
+            const defaultTitle = (React.createElement("div", { className: b('title', { size: textSize }) }, _.capitalize(title)));
+            if (expandable) {
+                return (React.createElement("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren) },
+                    React.createElement(ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') }),
+                    defaultTitle));
+            }
+            return React.createElement("div", { className: b('non-foldable') }, defaultTitle);
+        }
+        return null;
+    }, [expandable, showChildren, textSize, title]);
+    return (React.createElement("div", { className: b(null, className) },
+        title && (React.createElement("div", { className: b('top') },
+            titleComponent,
+            onRefresh && (React.createElement(Button, { className: b('button'), onClick: () => onRefresh(undefined), view: 'flat', size: 'xs' },
+                React.createElement(Icon, { data: ArrowRotateLeft, size: 14 }))))),
+        (!title || showChildren) && React.createElement("div", { className: b('children') }, children)));
+};
+export default FieldBase;

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/Array.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-array-dynamic-field__card {
+  padding: 12px;
+  margin-top: 12px;
+}
+.pc-array-dynamic-field__card:first-child {
+  margin-bottom: 0;
+}
+.pc-array-dynamic-field__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 10px;
+}
+.pc-array-dynamic-field__row:first-child {
+  margin-top: 0;
+}
+.pc-array-dynamic-field__card-head {
+  margin-bottom: 8px;
+}
+.pc-array-dynamic-field__row-title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
+.pc-array-dynamic-field__row-title, .pc-array-dynamic-field__row-field {
+  flex: 1;
+}
+.pc-array-dynamic-field__empty {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+}
+.pc-array-dynamic-field__add-button {
+  margin-top: 12px;
+}

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/Array.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ArrayObjectInput, ArrayTextInput } from '../../../../../common/types';
+import { ClassNameProps } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+import './Array.css';
+type ArrayInput = ArrayTextInput | ArrayObjectInput;
+interface ArrayFieldProps extends ClassNameProps {
+    title: string;
+    values: Array<DynamicFormValue>;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    blockConfig: ArrayInput;
+}
+declare const ArrayDynamicField: React.FC<ArrayFieldProps>;
+export default ArrayDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/Array.js

@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
+import { block } from '../../../../../utils';
+import { removeFromArray, swapArrayItems } from '../../../../utils';
+import DynamicForm from '../../DynamicForm';
+import FieldBase from '../../FieldBase/FieldBase';
+import Text from '../Text/Text';
+import ItemButton from './ItemButton/ItemButton';
+import './Array.css';
+const b = block('array-dynamic-field');
+const ArrayDynamicField = (props) => {
+    const { title, values, onUpdate, className, blockConfig } = props;
+    const haveItems = values && Array.isArray(values) && values.length;
+    const onAddItem = useCallback(() => {
+        if (blockConfig.arrayType === 'text') {
+            onUpdate('', haveItems ? [...values, ''] : ['']);
+        }
+        else if (blockConfig.arrayType === 'object') {
+            onUpdate('', haveItems ? [...values, {}] : [{}]);
+        }
+    }, [blockConfig.arrayType, haveItems, onUpdate, values]);
+    const onDeleteItem = useCallback((index) => {
+        if (Array.isArray(values)) {
+            const newArray = removeFromArray(values, index);
+            onUpdate('', newArray);
+        }
+    }, [onUpdate, values]);
+    const onReorderItem = useCallback((index, placement) => {
+        if (Array.isArray(values)) {
+            const newArray = swapArrayItems(values, index, placement === 'up' ? index - 1 : index + 1);
+            onUpdate('', newArray);
+        }
+    }, [onUpdate, values]);
+    const renderInput = useCallback((value, index) => {
+        const arrayItemButton = (React.createElement(ItemButton, { onRemove: () => onDeleteItem(index), onReorderUp: () => onReorderItem(index, 'up'), onReorderDown: () => onReorderItem(index, 'down'), disableReorderUp: index === 0, disableReorderDown: Boolean(haveItems) && values.length === index + 1 }));
+        switch (blockConfig.arrayType) {
+            case 'text': {
+                return (React.createElement("div", { className: b('row') },
+                    React.createElement(Text, { className: b('row-field'), value: String(value), onUpdate: (updateValue) => onUpdate(`[${index}]`, updateValue), onRefresh: (updatedValue) => onUpdate('', updatedValue) }),
+                    arrayItemButton));
+            }
+            case 'object': {
+                if (!blockConfig.properties) {
+                    return null;
+                }
+                return (React.createElement(Card, { key: index, className: b('card') },
+                    React.createElement("div", { className: `${b('row')} ${b('card-head')}` },
+                        React.createElement("div", { className: b('row-title') },
+                            "#",
+                            index),
+                        arrayItemButton),
+                    React.createElement(DynamicForm, { contentConfig: value, blockConfig: blockConfig.properties, onUpdate: (key, updateValue) => onUpdate(`[${index}].${key}`, updateValue) })));
+            }
+            default: {
+                return null;
+            }
+        }
+    }, [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values]);
+    const renderInputs = useCallback(() => {
+        if (haveItems) {
+            const renderItems = values
+                .map(renderInput)
+                .filter(Boolean);
+            return (React.createElement(React.Fragment, null,
+                renderItems,
+                React.createElement(Button, { className: b('add-button'), onClick: onAddItem },
+                    React.createElement(Icon, { data: Plus }),
+                    blockConfig.buttonText)));
+        }
+        else {
+            return (React.createElement("div", { className: b('empty') },
+                React.createElement(Button, { className: b('add-button'), onClick: onAddItem },
+                    React.createElement(Icon, { data: Plus }),
+                    "Please, add new item")));
+        }
+    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);
+    return (React.createElement(FieldBase, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true },
+        React.createElement(Card, { className: b('card') }, renderInputs())));
+};
+export default ArrayDynamicField;

package/build/esm/editor-v2/components/DynamicForm/Fields/Array/ItemButton/ItemButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClassNameProps } from '../../../../../../models';
+interface ItemButtonProps extends ClassNameProps {
+    onRemove: () => void;
+    onReorderUp: () => void;
+    disableReorderUp?: boolean;
+    onReorderDown: () => void;
+    disableReorderDown?: boolean;
+}
+declare const ItemButton: React.FC<ItemButtonProps>;
+export default ItemButton;