@nocobase/client 0.5.0-alpha.37 → 0.7.0-alpha.1

package/lib/schemas/grid/DesignableBar.js

@@ -1,192 +0,0 @@
-"use strict";
-
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-
-  _react = function _react() {
-    return data;
-  };
-
-  return data;
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-
-var __importStar = void 0 && (void 0).__importStar || function (mod) {
-  if (mod && mod.__esModule) return mod;
-  var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-
-  __setModuleDefault(result, mod);
-
-  return result;
-};
-
-var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DesignableBar = void 0;
-
-const react_1 = __importStar(require("react"));
-
-const react_2 = require("@formily/react");
-
-const __1 = require("../");
-
-const antd_1 = require("antd");
-
-const icons_1 = require("@ant-design/icons");
-
-const classnames_1 = __importDefault(require("classnames"));
-
-require("./style.less");
-
-const add_new_1 = __importDefault(require("../add-new"));
-
-const drag_and_drop_1 = require("../../components/drag-and-drop");
-
-const constate_1 = require("../../constate");
-
-const table_1 = require("../table");
-
-const useCompile_1 = require("../../hooks/useCompile");
-
-exports.DesignableBar = (0, react_2.observer)(props => {
-  var _a;
-
-  const field = (0, react_2.useField)();
-
-  const _ref = (0, __1.useDesignable)(),
-        designable = _ref.designable,
-        schema = _ref.schema,
-        refresh = _ref.refresh,
-        deepRemove = _ref.deepRemove;
-
-  const _ref2 = (0, react_1.useState)(false),
-        _ref3 = _slicedToArray(_ref2, 2),
-        visible = _ref3[0],
-        setVisible = _ref3[1];
-
-  const _ref4 = (0, react_1.useContext)(drag_and_drop_1.DraggableBlockContext),
-        dragRef = _ref4.dragRef;
-
-  const _ref5 = (0, table_1.useTable)(),
-        tableProps = _ref5.props;
-
-  const collectionName = ((_a = field.componentProps) === null || _a === void 0 ? void 0 : _a.collectionName) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.collectionName);
-
-  const _ref6 = (0, constate_1.useCollection)({
-    collectionName
-  }),
-        collection = _ref6.collection;
-
-  const compile = (0, useCompile_1.useCompile)();
-  return react_1.default.createElement("div", {
-    className: (0, classnames_1.default)('designable-bar', {
-      active: visible
-    })
-  }, react_1.default.createElement("div", {
-    className: 'designable-info'
-  }, compile((collection === null || collection === void 0 ? void 0 : collection.title) || (collection === null || collection === void 0 ? void 0 : collection.name))), react_1.default.createElement("span", {
-    onClick: e => {
-      e.stopPropagation();
-    },
-    className: (0, classnames_1.default)('designable-bar-actions', {
-      active: visible
-    })
-  }, react_1.default.createElement(antd_1.Space, {
-    size: 2
-  }, react_1.default.createElement(add_new_1.default.CardItem, {
-    defaultAction: 'appendChild',
-    ghost: true
-  }), react_1.default.createElement(antd_1.Dropdown, {
-    trigger: ['hover'],
-    overlay: react_1.default.createElement(antd_1.Menu, null, react_1.default.createElement(antd_1.Menu.Item, {
-      key: 'delete',
-      onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-        antd_1.Modal.confirm({
-          title: '删除区块',
-          content: '删除后无法恢复，确定要删除吗？',
-          onOk: () => __awaiter(void 0, void 0, void 0, function* () {
-            const removed = deepRemove();
-            const last = removed.pop();
-            yield (0, __1.removeSchema)(last);
-          })
-        });
-      })
-    }, "\u5220\u9664"))
-  }, react_1.default.createElement(icons_1.MenuOutlined, null)))));
-});
-//# sourceMappingURL=DesignableBar.js.map

package/lib/schemas/grid/DesignableBar.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/schemas/grid/DesignableBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AAErE,0CAWwB;AACxB,2BAA8E;AAE9E,+BAA4D;AAC5D,6CAA+D;AAC/D,4DAA6B;AAE7B,wBAAsB;AACtB,yDAAgC;AAChC,kEAAuE;AAMvE,6CAAqE;AACrE,oCAAoC;AAEpC,uDAAoD;AAEvC,QAAA,aAAa,GAAG,IAAA,gBAAQ,EAAC,CAAC,KAAK,EAAE,EAAE;;IAC9C,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,iBAAa,GAAE,CAAC;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,kBAAU,EAAC,qCAAqB,CAAC,CAAC;IACtD,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzC,MAAM,cAAc,GAClB,CAAA,MAAA,KAAK,CAAC,cAAc,0CAAE,cAAc,MAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,cAAc,CAAA,CAAC;IACrE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,wBAAa,EAAC,EAAE,cAAc,EAAE,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,IAAA,uBAAU,GAAE,CAAC;IAC7B,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAG,EAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;QACxD,uCAAK,SAAS,EAAE,iBAAiB,IAC9B,OAAO,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,MAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAA,CAAC,CAC3C;QACN,wCACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC,EACD,SAAS,EAAE,IAAA,oBAAG,EAAC,wBAAwB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAE7D,8BAAC,YAAK,IAAC,IAAI,EAAE,CAAC;gBACZ,8BAAC,iBAAM,CAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,SAAG;gBAEvD,8BAAC,eAAQ,IACP,OAAO,EAAE,CAAC,OAAO,CAAC,EAKlB,OAAO,EACL,8BAAC,WAAI;wBACH,8BAAC,WAAI,CAAC,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAS,EAAE;gCAClB,YAAK,CAAC,OAAO,CAAC;oCACZ,KAAK,EAAE,MAAM;oCACb,OAAO,EAAE,iBAAiB;oCAC1B,IAAI,EAAE,GAAS,EAAE;wCACf,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;wCAE7B,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;wCAC3B,MAAM,IAAA,gBAAY,EAAC,IAAI,CAAC,CAAC;oCAC3B,CAAC,CAAA;iCACF,CAAC,CAAC;4BACL,CAAC,CAAA,mBAGS,CACP;oBAGT,8BAAC,oBAAY,OAAG,CACP,CACL,CACH,CACH,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","file":"DesignableBar.js","sourcesContent":["import React, { useContext, useMemo, useRef, useState } from 'react';\nimport { createForm } from '@formily/core';\nimport {\n  SchemaOptionsContext,\n  Schema,\n  useFieldSchema,\n  observer,\n  SchemaExpressionScopeContext,\n  FormProvider,\n  ISchema,\n  useField,\n  useForm,\n  RecursionField,\n} from '@formily/react';\nimport { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';\nimport get from 'lodash/get';\nimport { Button, Dropdown, Menu, Modal, Space } from 'antd';\nimport { MenuOutlined, DragOutlined } from '@ant-design/icons';\nimport cls from 'classnames';\nimport { FormLayout } from '@formily/antd';\nimport './style.less';\nimport AddNew from '../add-new';\nimport { DraggableBlockContext } from '../../components/drag-and-drop';\nimport { isGridRowOrCol } from '../grid';\nimport constate from 'constate';\nimport { useEffect } from 'react';\nimport { uid } from '@formily/shared';\nimport { getSchemaPath } from '../../components/schema-renderer';\nimport { useCollection, useCollectionContext } from '../../constate';\nimport { useTable } from '../table';\nimport { DragHandle } from '../../components/Sortable';\nimport { useCompile } from '../../hooks/useCompile';\n\nexport const DesignableBar = observer((props) => {\n  const field = useField();\n  const { designable, schema, refresh, deepRemove } = useDesignable();\n  const [visible, setVisible] = useState(false);\n  const { dragRef } = useContext(DraggableBlockContext);\n  const { props: tableProps } = useTable();\n  const collectionName =\n    field.componentProps?.collectionName || tableProps?.collectionName;\n  const { collection } = useCollection({ collectionName });\n  const compile = useCompile();\n  return (\n    <div className={cls('designable-bar', { active: visible })}>\n      <div className={'designable-info'}>\n        {compile(collection?.title || collection?.name)}\n      </div>\n      <span\n        onClick={(e) => {\n          e.stopPropagation();\n        }}\n        className={cls('designable-bar-actions', { active: visible })}\n      >\n        <Space size={2}>\n          <AddNew.CardItem defaultAction={'appendChild'} ghost />\n          {/* <DragHandle /> */}\n          <Dropdown\n            trigger={['hover']}\n            // visible={visible}\n            // onVisibleChange={(visible) => {\n            //   setVisible(visible);\n            // }}\n            overlay={\n              <Menu>\n                <Menu.Item\n                  key={'delete'}\n                  onClick={async () => {\n                    Modal.confirm({\n                      title: '删除区块',\n                      content: '删除后无法恢复，确定要删除吗？',\n                      onOk: async () => {\n                        const removed = deepRemove();\n                        // console.log({ removed })\n                        const last = removed.pop();\n                        await removeSchema(last);\n                      },\n                    });\n                  }}\n                >\n                  删除\n                </Menu.Item>\n              </Menu>\n            }\n          >\n            <MenuOutlined />\n          </Dropdown>\n        </Space>\n      </span>\n    </div>\n  );\n});\n"]}

package/lib/schemas/grid/index.d.ts

@@ -1,4 +0,0 @@
-import './style.less';
-import { FormilyISchema, ISchema } from '..';
-export declare function isGridRowOrCol(schema: ISchema | FormilyISchema): boolean;
-export declare const Grid: any;

package/lib/schemas/grid/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/schemas/grid/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAO7C,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,cAAc,WAK9D;AAED,eAAO,MAAM,IAAI,EAAE,GAiPjB,CAAC","file":"index.d.ts","sourcesContent":["import {\n  DndContext,\n  DragOverlay,\n  useDndContext,\n  closestCorners,\n  rectIntersection,\n  closestCenter,\n  useSensors,\n  useSensor,\n  PointerSensor,\n  MouseSensor,\n} from '@dnd-kit/core';\nimport { observer, RecursionField } from '@formily/react';\nimport React, { useState } from 'react';\nimport { useContext } from 'react';\nimport { createContext } from 'react';\nimport {\n  findPropertyByPath,\n  getSchemaPath,\n  useDesignable,\n  useSchemaComponent,\n} from '../../components/schema-renderer';\nimport { Droppable, SortableItem } from '../../components/Sortable';\nimport { uid } from '@formily/shared';\nimport cls from 'classnames';\nimport './style.less';\nimport { FormilyISchema, ISchema } from '..';\nimport { DesignableBar } from './DesignableBar';\nimport { useClient } from '../../constate';\n\nconst GridRowContext = createContext<any>(null);\nconst GridColContext = createContext<any>(null);\n\nexport function isGridRowOrCol(schema: ISchema | FormilyISchema) {\n  if (!schema) {\n    return;\n  }\n  return ['Grid.Row', 'Grid.Col'].includes(schema?.['x-component']);\n}\n\nexport const Grid: any = observer((props: any) => {\n  const {\n    designable,\n    root,\n    schema,\n    refresh,\n    deepRemove,\n    deepRemoveIfEmpty,\n    remove,\n    ...methods\n  } = useDesignable();\n  const [dragOverlayContent, setDragOverlayContent] = useState('');\n  const [style, setStyle] = useState({});\n  const [active, setActive] = useState(false);\n  const [clientWidths, setClientWidths] = useState([0, 0]);\n  const { addNewComponent } = props;\n  const AddNewComponent = useSchemaComponent(addNewComponent);\n  const { createSchema, removeSchema, updateSchema } = useClient();\n  // const sensors = useSensors(useSensor(MouseSensor));\n  const rows = Object.values(schema.properties || {}).filter((item) => {\n    return !item['x-hidden'];\n  });\n  const path = getSchemaPath(schema);\n  return (\n    <div className={cls('nb-grid', { active })}>\n      <DndContext\n        // autoScroll\n        // sensors={sensors}\n        collisionDetection={rectIntersection}\n        onDragStart={(event) => {\n          setActive(true);\n          const el = event?.active?.data?.current?.previewRef\n            ?.current as HTMLElement;\n          console.log(event, el);\n          // setDragOverlayContent(el?.outerHTML);\n          // setStyle({ width: el?.clientWidth, height: el?.clientHeight });\n          const activeType = event?.active?.data?.current?.type;\n          if (activeType === 'col-resize') {\n            setDragOverlayContent('');\n            const prev = el.previousElementSibling as HTMLDivElement;\n            const next = el.nextElementSibling as HTMLDivElement;\n            setClientWidths([prev.clientWidth, next.clientWidth]);\n          } else {\n            setDragOverlayContent('拖拽');\n          }\n        }}\n        onDragCancel={() => {\n          setActive(false);\n        }}\n        onDragMove={(event) => {\n          const activeType = event?.active?.data?.current?.type;\n          const el = event?.active?.data?.current?.previewRef\n            ?.current as HTMLElement;\n          if (activeType === 'col-resize') {\n            const prev = el.previousElementSibling as HTMLDivElement;\n            const next = el.nextElementSibling as HTMLDivElement;\n            prev.style.width = `calc(${clientWidths[0]}px + ${event.delta.x}px)`;\n            next.style.width = `calc(${clientWidths[1]}px - ${event.delta.x}px)`;\n            return;\n          }\n        }}\n        onDragOver={(event) => {\n          const activeType = event?.active?.data?.current?.type;\n          console.log({ event });\n          if (activeType === 'col-resize') {\n            return;\n          }\n        }}\n        onDragEnd={async (event) => {\n          setActive(false);\n          const activeType = event?.active?.data?.current?.type;\n          const sourcePath = event?.active?.data?.current?.path;\n          const targetPath = event?.over?.data?.current?.path;\n          const method = event?.over?.data?.current?.method;\n          const type = event?.over?.data?.current?.type;\n          console.log({ event, sourcePath, targetPath });\n          if (activeType === 'col-resize') {\n            const parentPath = event?.active?.data?.current?.parentPath;\n            const el = event?.active?.data?.current?.previewRef\n              ?.current as HTMLElement;\n            const els = el.parentElement.querySelectorAll(\n              ':scope > .nb-grid-col',\n            );\n            const size = [];\n            const gap = el.clientWidth;\n            els.forEach((el: HTMLDivElement) => {\n              // const w = (100 * el.clientWidth) / el.parentElement.clientWidth;\n              const w2 =\n                (100 * (el.clientWidth + gap + gap / els.length)) /\n                el.parentElement.clientWidth;\n              size.push(w2);\n              // el.style.width = `${w}%`;\n            });\n            const parent = findPropertyByPath(root, parentPath);\n            parent['x-component-props'] = parent['x-component-props'] || {};\n            parent['x-component-props']['colsize'] = size;\n            await updateSchema({\n              key: parent['key'],\n              'x-component-props': {\n                colsize: size,\n              },\n            });\n            return;\n          }\n          if (!sourcePath || !targetPath) {\n            return;\n          }\n          if (sourcePath === targetPath) {\n            return;\n          }\n          let fn = methods[method];\n          if (!fn && type === 'block') {\n            fn = methods.insertAfter;\n          }\n          console.log({ event, sourcePath, targetPath, method, type });\n          if (!fn) {\n            return;\n          }\n          const sourceSchema = findPropertyByPath(root, sourcePath);\n          if (!sourceSchema) {\n            return;\n          }\n          if (!type) {\n            return;\n          }\n          let data;\n          if (['col-divider', 'col-resize'].includes(type)) {\n            // if (sourceSchema?.parent?.['x-component'] === 'Grid.Col') {\n            //   // console.log('datadata', sourcePath, targetPath);\n            //   if (\n            //     sourcePath.join('.').startsWith(targetPath.join('.')) &&\n            //     Object.keys(sourceSchema?.parent?.properties).length < 2\n            //   ) {\n            //     return;\n            //   }\n            // }\n            data = {\n              type: 'void',\n              'x-component': 'Grid.Col',\n              properties: {\n                [sourceSchema.name]: sourceSchema.toJSON(),\n              },\n            };\n          } else if (['block', 'col'].includes(type)) {\n            data = sourceSchema.toJSON();\n          } else if (['row-divider', 'row'].includes(type)) {\n            data = {\n              type: 'void',\n              'x-component': 'Grid.Row',\n              properties: {\n                [uid()]: {\n                  type: 'void',\n                  'x-component': 'Grid.Col',\n                  properties: {\n                    [sourceSchema.name]: sourceSchema.toJSON(),\n                  },\n                },\n              },\n            };\n          }\n          if (data) {\n            console.log('datadata', data, type, method);\n            remove(sourcePath);\n            const ppath = [...sourcePath];\n            ppath.pop();\n            const s = fn(data, targetPath);\n            const removed = deepRemoveIfEmpty(ppath);\n            const last = removed.pop();\n            if (['block', 'col'].includes(type)) {\n              await updateSchema(s);\n            } else {\n              await createSchema(s);\n            }\n            if (isGridRowOrCol(last)) {\n              await removeSchema(last);\n            }\n          }\n        }}\n      >\n        <DragOverlay\n          dropAnimation={{\n            duration: 20,\n            easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',\n          }}\n          // dropAnimation={null}\n          // style={{ whiteSpace: 'nowrap' }}\n          style={{\n            width: 40,\n            whiteSpace: 'nowrap',\n            // ...style,\n            // pointerEvents: 'none',\n          }}\n        >\n          <div\n            className={'nb-grid-drag-overlay'}\n            style={{\n              ...style,\n            }}\n            dangerouslySetInnerHTML={{ __html: dragOverlayContent }}\n          />\n        </DragOverlay>\n        <Droppable\n          id={`${schema.name}-row-divider`}\n          className={'nb-grid-row-divider'}\n          data={{\n            type: 'row-divider',\n            method: 'prepend',\n            path,\n          }}\n        />\n        {rows.map((property, index) => {\n          return (\n            <>\n              {index > 0 && (\n                <Droppable\n                  id={`${schema.name}-row-divider-${index}`}\n                  className={'nb-grid-row-divider'}\n                  data={{\n                    type: 'row-divider',\n                    method: 'insertBefore',\n                    path: [...path, property.name],\n                  }}\n                />\n              )}\n              <RecursionField name={property.name} schema={property} />\n            </>\n          );\n        })}\n        <Droppable\n          id={`${schema.name}-row-divider-last`}\n          className={'nb-grid-row-divider'}\n          data={{\n            type: 'row-divider',\n            method: 'appendChild',\n            path,\n          }}\n        />\n      </DndContext>\n      {designable && AddNewComponent && <AddNewComponent />}\n    </div>\n  );\n});\n\nGrid.Row = observer((props: any) => {\n  const { designable, schema } = useDesignable();\n  const columns = Object.values(schema.properties || {}).filter((item) => {\n    return !item['x-hidden'];\n  });\n  const columnCount = columns.length;\n  const path = getSchemaPath(schema);\n  let size = schema['x-component-props']?.['colsize'] || [];\n  if (size?.length !== columnCount) {\n    size = [];\n  }\n  return (\n    <GridRowContext.Provider value={{ columnCount }}>\n      <Droppable\n        id={schema.name}\n        className={'nb-grid-row'}\n        data={{\n          type: 'row',\n          method: 'appendChild',\n          path,\n        }}\n      >\n        <Droppable\n          id={`${schema.name}-first`}\n          className={'nb-grid-col-divider'}\n          data={{\n            type: 'col-divider',\n            method: 'prepend',\n            path: [...path],\n          }}\n        />\n        {columns.map((property, index) => {\n          return (\n            <>\n              {index > 0 && (\n                <SortableItem\n                  draggable\n                  id={`${schema.name}-${index}`}\n                  data={{\n                    type: 'col-resize',\n                    method: 'insertBefore',\n                    parentPath: [...path],\n                    path: [...path, property.name],\n                  }}\n                  disabled={!designable}\n                  className={cls('nb-grid-col-divider', {\n                    resizable: designable,\n                  })}\n                />\n              )}\n              <GridColContext.Provider value={{ index, width: size[index] }}>\n                <RecursionField name={property.name} schema={property} />\n              </GridColContext.Provider>\n            </>\n          );\n        })}\n        <Droppable\n          id={`${schema.name}-last`}\n          className={'nb-grid-col-divider'}\n          data={{\n            type: 'col-divider',\n            method: 'appendChild',\n            path: [...path],\n          }}\n        />\n      </Droppable>\n    </GridRowContext.Provider>\n  );\n});\n\nGrid.Col = observer((props: any) => {\n  const { schema, designable, DesignableBar } = useDesignable();\n  // const { width } = props;\n  const { columnCount } = useContext(GridRowContext);\n  const { width } = useContext(GridColContext);\n  return (\n    <Droppable\n      id={schema.name}\n      className={'nb-grid-col'}\n      style={{\n        width: `calc(${\n          width || 100 / columnCount\n        }% - 24px - 24px / ${columnCount})`,\n      }}\n      data={{\n        type: 'col',\n        method: 'appendChild',\n        path: getSchemaPath(schema),\n      }}\n    >\n      {/* <Droppable\n        id={`${schema.name}-divider`}\n        className={'nb-grid-row-divider'}\n      /> */}\n      {props.children}\n      {/* <Grid.Col.DesignableBar /> */}\n    </Droppable>\n  );\n});\n\nGrid.Col.DesignableBar = DesignableBar;\n"]}