@nocobase/client 0.5.0-alpha.38 → 0.7.0-alpha.2

package/lib/components/admin-layout/style.less

@@ -1,120 +0,0 @@
-// .fields-collapse {
-//   border: 1px solid #f0f0f0;
-//   border-bottom: 0;
-//   > .ant-collapse-item {
-//     border-bottom: 1px solid #f0f0f0;
-//   }
-//   .ant-collapse-content {
-//     &.ant-collapse-content-active {
-//       border-top: 1px solid #f0f0f0;
-//     }
-//   }
-//   > .ant-collapse-item > .ant-collapse-content {
-//     background: #fff;
-//   }
-//   > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
-//     padding: 16px;
-//     padding-bottom: 1px;
-//   }
-// }
-
-// .ant-collapse {
-//   border: 1px solid #d9d9d9 !important;
-//   border-bottom: 0 !important;
-//   > .ant-collapse-item {
-//     border-bottom: 1px solid #d9d9d9 !important;
-//   }
-//   .ant-collapse-content {
-//     border-top: 1px solid #d9d9d9 !important;
-//   }
-//   .ant-collapse-content > .ant-collapse-content-box {
-//     padding: 24px !important;
-//     padding-bottom: 0 !important;
-//   }
-// }
-.roles-select {
-  .ant-select-selector {
-    // padding-left: 0 !important;
-  }
-}
-.nb-spin-center {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-height: inherit !important;
-}
-
-.database-sider {
-  background: #fafafa;
-  padding-top: 16px;
-  .ant-menu {
-    background: #fafafa;
-    border-right: 0;
-  }
-  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-    background: #fff;
-    &::after {
-      display: none;
-    }
-  }
-}
-
-.nb-designable-toggle {
-  background: none !important;
-  border-radius: 0 !important;
-  &.active {
-    // background: #faad14 !important;
-  }
-  &.has-tip {
-    background: #f18b62 !important;
-  }
-}
-
-.user-info {
-  height: 46px;
-  color: #fff;
-  &:hover,
-  &:focus {
-    color: #fff;
-  }
-}
-
-.site-info {
-  display: flex;
-  align-items: center;
-  .site-logo {
-    height: 20px;
-    padding: 0 16px;
-  }
-  .site-title {
-    color: #fff;
-    font-size: 20px;
-    padding-right: 8px;
-  }
-}
-
-.site-header {
-  .ant-menu.ant-menu-dark .ant-menu-item-selected,
-  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  .ant-btn {
-    color: rgba(255, 255, 255, 0.65) !important;
-    &.nb-designable-toggle:hover {
-      color: #fff !important;
-      background-color: #f18b62 !important;
-    }
-  }
-  .ant-btn:hover {
-    color: #fff !important;
-    background-color: rgba(255, 255, 255, 0.1) !important;
-  }
-}

package/lib/components/admin-layout/style.less.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"mappings":"","sources":["components/admin-layout/style.less"],"sourcesContent":["// .fields-collapse {\n//   border: 1px solid #f0f0f0;\n//   border-bottom: 0;\n//   > .ant-collapse-item {\n//     border-bottom: 1px solid #f0f0f0;\n//   }\n//   .ant-collapse-content {\n//     &.ant-collapse-content-active {\n//       border-top: 1px solid #f0f0f0;\n//     }\n//   }\n//   > .ant-collapse-item > .ant-collapse-content {\n//     background: #fff;\n//   }\n//   > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {\n//     padding: 16px;\n//     padding-bottom: 1px;\n//   }\n// }\n\n// .ant-collapse {\n//   border: 1px solid #d9d9d9 !important;\n//   border-bottom: 0 !important;\n//   > .ant-collapse-item {\n//     border-bottom: 1px solid #d9d9d9 !important;\n//   }\n//   .ant-collapse-content {\n//     border-top: 1px solid #d9d9d9 !important;\n//   }\n//   .ant-collapse-content > .ant-collapse-content-box {\n//     padding: 24px !important;\n//     padding-bottom: 0 !important;\n//   }\n// }\n.roles-select {\n  .ant-select-selector {\n    // padding-left: 0 !important;\n  }\n}\n.nb-spin-center {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-height: inherit !important;\n}\n\n.database-sider {\n  background: #fafafa;\n  padding-top: 16px;\n  .ant-menu {\n    background: #fafafa;\n    border-right: 0;\n  }\n  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {\n    background: #fff;\n    &::after {\n      display: none;\n    }\n  }\n}\n\n.nb-designable-toggle {\n  background: none !important;\n  border-radius: 0 !important;\n  &.active {\n    // background: #faad14 !important;\n  }\n  &.has-tip {\n    background: #f18b62 !important;\n  }\n}\n\n.user-info {\n  height: 46px;\n  color: #fff;\n  &:hover,\n  &:focus {\n    color: #fff;\n  }\n}\n\n.site-info {\n  display: flex;\n  align-items: center;\n  .site-logo {\n    height: 20px;\n    padding: 0 16px;\n  }\n  .site-title {\n    color: #fff;\n    font-size: 20px;\n    padding-right: 8px;\n  }\n}\n\n.site-header {\n  .ant-menu.ant-menu-dark .ant-menu-item-selected,\n  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n  .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n  .ant-btn {\n    color: rgba(255, 255, 255, 0.65) !important;\n    &.nb-designable-toggle:hover {\n      color: #fff !important;\n      background-color: #f18b62 !important;\n    }\n  }\n  .ant-btn:hover {\n    color: #fff !important;\n    background-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n"],"file":"style.less"}

package/lib/components/auth-layout/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function AuthLayout({ children, route }: any): JSX.Element;
-export default AuthLayout;

package/lib/components/auth-layout/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/auth-layout/index.tsx"],"names":[],"mappings":";AAKA,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,eASlD;AAED,eAAe,UAAU,CAAC","file":"index.d.ts","sourcesContent":["import { Card } from 'antd';\nimport React from 'react';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport { SystemSettingsProvider } from '../admin-layout/SiteTitle';\n\nexport function AuthLayout({ children, route }: any) {\n  const location = useLocation();\n  const history = useHistory();\n  return (\n    <div style={{ maxWidth: 320, margin: '0 auto', paddingTop: '20vh' }}>\n      <h1>NocoBase</h1>\n      <SystemSettingsProvider>{children}</SystemSettingsProvider>\n    </div>\n  );\n}\n\nexport default AuthLayout;\n"]}

package/lib/components/auth-layout/index.js

@@ -1,49 +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 }; }
-
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AuthLayout = void 0;
-
-const react_1 = __importDefault(require("react"));
-
-const react_router_dom_1 = require("react-router-dom");
-
-const SiteTitle_1 = require("../admin-layout/SiteTitle");
-
-function AuthLayout({
-  children,
-  route
-}) {
-  const location = (0, react_router_dom_1.useLocation)();
-  const history = (0, react_router_dom_1.useHistory)();
-  return react_1.default.createElement("div", {
-    style: {
-      maxWidth: 320,
-      margin: '0 auto',
-      paddingTop: '20vh'
-    }
-  }, react_1.default.createElement("h1", null, "NocoBase"), react_1.default.createElement(SiteTitle_1.SystemSettingsProvider, null, children));
-}
-
-exports.AuthLayout = AuthLayout;
-exports.default = AuthLayout;
-//# sourceMappingURL=index.js.map

package/lib/components/auth-layout/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/auth-layout/index.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,uDAA2D;AAC3D,yDAAmE;AAEnE,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAO;IACjD,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,MAAM,OAAO,GAAG,IAAA,6BAAU,GAAE,CAAC;IAC7B,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE;QACjE,qDAAiB;QACjB,8BAAC,kCAAsB,QAAE,QAAQ,CAA0B,CACvD,CACP,CAAC;AACJ,CAAC;AATD,gCASC;AAED,kBAAe,UAAU,CAAC","file":"index.js","sourcesContent":["import { Card } from 'antd';\nimport React from 'react';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport { SystemSettingsProvider } from '../admin-layout/SiteTitle';\n\nexport function AuthLayout({ children, route }: any) {\n  const location = useLocation();\n  const history = useHistory();\n  return (\n    <div style={{ maxWidth: 320, margin: '0 auto', paddingTop: '20vh' }}>\n      <h1>NocoBase</h1>\n      <SystemSettingsProvider>{children}</SystemSettingsProvider>\n    </div>\n  );\n}\n\nexport default AuthLayout;\n"]}

package/lib/components/drag-and-drop/index.d.ts

@@ -1,58 +0,0 @@
-import React from 'react';
-export declare const DraggableBlockContext: React.Context<{
-    dragRef: any;
-}>;
-export declare function useDragDropManager({ uid }: {
-    uid: any;
-}): {
-    uid: any;
-    drag: any;
-    drop: any;
-    drops: {};
-    setDrag: React.Dispatch<any>;
-    addDrop: (dropId: any, data: any) => void;
-    setDrop: React.Dispatch<any>;
-    getDrop: (dropId: any) => any;
-};
-declare const DragDropManagerProvider: React.FC<{
-    uid: any;
-}>, useDragDropManagerContext: () => {
-    uid: any;
-    drag: any;
-    drop: any;
-    drops: {};
-    setDrag: React.Dispatch<any>;
-    addDrop: (dropId: any, data: any) => void;
-    setDrop: React.Dispatch<any>;
-    getDrop: (dropId: any) => any;
-};
-export declare function useDragDropUID(): any;
-export { DragDropManagerProvider, useDragDropManagerContext };
-export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
-export declare function useDrag(options?: any): {
-    isDragging: boolean;
-    dragRef: React.MutableRefObject<HTMLDivElement>;
-    previewRef: React.MutableRefObject<HTMLDivElement>;
-};
-export declare function useDrop(options: any): {
-    onTopHalf: any;
-    isOver: boolean;
-    dropRef: React.MutableRefObject<HTMLDivElement>;
-};
-export declare function useColResizer(options?: any): {
-    isDragging: boolean;
-    dragOffset: {
-        left: number;
-        top: number;
-    };
-    dragRef: React.MutableRefObject<HTMLDivElement>;
-    columns: any;
-};
-export declare function useBlockDragAndDrop(): {
-    isDragging: boolean;
-    dragRef: React.MutableRefObject<HTMLDivElement>;
-    previewRef: React.MutableRefObject<HTMLDivElement>;
-    isOver: boolean;
-    onTopHalf: any;
-    dropRef: React.MutableRefObject<HTMLDivElement>;
-};

package/lib/components/drag-and-drop/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/drag-and-drop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAQ5E,eAAO,MAAM,qBAAqB;;EAEhC,CAAC;AAEH,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE;;CAAA;;;;;;;;;EAazC;AAED,QAAA,MAAO,uBAAuB;;IAAE,yBAAyB;;;;;;;;;CAC3B,CAAC;AAE/B,wBAAgB,cAAc,QAG7B;AAED,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,CAAC;AAE9D,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAC/B,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAC1D,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAUtB;AAED,wBAAgB,OAAO,CAAC,OAAO,CAAC,EAAE,GAAG;;;;EA+LpC;AAED,wBAAgB,OAAO,CAAC,OAAO,KAAA;;;;EAuG9B;AAED,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,GAAG;;;;;;;;EAuE1C;AAED,wBAAgB,mBAAmB;;;;;;;EAmClC","file":"index.d.ts","sourcesContent":["import React, { createContext, useContext, useEffect, useRef } from 'react';\nimport { useState } from 'react';\nimport { useMouseEvents, useWillUnmount } from 'beautiful-react-hooks';\nimport { useField, useFieldSchema } from '@formily/react';\nimport { useMount } from 'ahooks';\nimport constate from 'constate';\nimport { useSchemaPath } from '../../schemas';\n\nexport const DraggableBlockContext = createContext({\n  dragRef: null,\n});\n\nexport function useDragDropManager({ uid }) {\n  const [drag, setDrag] = useState(null);\n  const [drop, setDrop] = useState(null);\n  const [drops, setDrops] = useState({});\n  const addDrop = (dropId, data) =>\n    setDrops((prevDrops) => {\n      prevDrops[dropId] = data;\n      return prevDrops;\n    });\n  const getDrop = (dropId) => {\n    return drops[dropId];\n  };\n  return { uid, drag, drop, drops, setDrag, addDrop, setDrop, getDrop };\n}\n\nconst [DragDropManagerProvider, useDragDropManagerContext] =\n  constate(useDragDropManager);\n\nexport function useDragDropUID() {\n  const { uid } = useDragDropManagerContext();\n  return uid;\n}\n\nexport { DragDropManagerProvider, useDragDropManagerContext };\n\nexport function mergeRefs<T = any>(\n  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,\n): React.RefCallback<T> {\n  return (value) => {\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n}\n\nexport function useDrag(options?: any) {\n  const { type, onDragStart, onDrag, onDragEnd, item = {} } = options;\n  const dragRef = useRef<HTMLDivElement>();\n  const previewRef = useRef<HTMLDivElement>();\n  const { onMouseDown } = useMouseEvents(dragRef);\n  const { onMouseMove, onMouseUp } = useMouseEvents();\n  const [previewElement, setPreviewElement] = useState<HTMLDivElement>();\n  const [isDragging, setIsDragging] = useState(false);\n  const [mousePostionWithinPreview, setMousePostionWithinPreview] = useState({\n    left: 0,\n    top: 0,\n  });\n  const { drag, setDrag, setDrop, getDrop } = useDragDropManagerContext();\n\n  useWillUnmount(() => {\n    setIsDragging(false);\n    // @ts-ignore\n    window.__previewElement && window.__previewElement.remove();\n    // @ts-ignore\n    window.__previewElement = undefined;\n\n    setDrag(null);\n    setDrop(null);\n\n    document.body.classList.remove('dragging');\n    document.body.style.cursor = null;\n    document.body.style.userSelect = null;\n  });\n\n  onMouseDown((event: React.MouseEvent) => {\n    if (event.button !== 0) {\n      return;\n    }\n    setDrop({ type, item });\n    setDrag({ type, item });\n    setIsDragging(true);\n\n    const postion = {\n      left: event.clientX - previewRef.current.getBoundingClientRect().left,\n      top: event.clientY - previewRef.current.getBoundingClientRect().top,\n    };\n\n    setMousePostionWithinPreview(postion);\n\n    const offset = {\n      left: event.pageX - postion.left,\n      top: event.pageY - postion.top,\n    };\n\n    const wrap = document.createElement('div');\n    wrap.className = 'drag-container';\n    wrap.style.position = 'absolute';\n    wrap.style.pointerEvents = 'none';\n    wrap.style.opacity = '0.7';\n    wrap.style.left = `0px`;\n    wrap.style.top = `0px`;\n    wrap.style.zIndex = '9999';\n    wrap.style.width = `${previewRef.current.clientWidth}px`;\n    wrap.style.transform = `translate(${offset.left}px, ${offset.top}px)`;\n\n    setPreviewElement(wrap);\n    // @ts-ignore\n    window.__previewElement = wrap;\n    // console.log(\n    //   'dragDropManager.previewElement',\n    //   dragDropManager.previewElement,\n    // );\n    document.body.appendChild(wrap);\n    const el = document.createElement('div');\n    wrap.appendChild(el);\n    el.outerHTML = previewRef.current.outerHTML;\n    onDragStart && onDragStart(event);\n    document.body.style.cursor = 'grab';\n    document.body.style.userSelect = 'none';\n    document.body.classList.add('dragging');\n\n    // console.log(\n    //   'onMouseDown',\n    //   { isDragging, previewElement },\n    //   dragDropManager.previewElement,\n    //   field ? field.address.segments : null,\n    // );\n    // console.log('onMouseDown', event);\n  });\n\n  onMouseUp((event: React.MouseEvent) => {\n    if (!isDragging || !previewElement) {\n      return;\n    }\n\n    // console.log(\n    //   'onMouseUp',\n    //   { isDragging, previewElement },\n    //   field ? field.address.segments : null,\n    // );\n\n    // @ts-ignore\n    event.dragItem = item;\n\n    setIsDragging(false);\n    setDrag(null);\n    // dragDropManager.drag = null;\n    previewElement.remove();\n    setPreviewElement(undefined);\n    document.body.classList.remove('dragging');\n    document.body.style.cursor = null;\n    document.body.style.userSelect = null;\n    // @ts-ignore\n    window.__previewElement && window.__previewElement.remove();\n    // @ts-ignore\n    window.__previewElement = undefined;\n\n    if (!type) {\n      onDragEnd && onDragEnd(event);\n    }\n\n    let dropElement = document.elementFromPoint(event.clientX, event.clientY);\n    const dropIds = [];\n    while (dropElement) {\n      if (!dropElement.getAttribute) {\n        dropElement = dropElement.parentNode as HTMLElement;\n        continue;\n      }\n      const dropId = dropElement.getAttribute('data-drop-id');\n\n      const dropContext = getDrop(dropId);\n      if (dropContext && dropContext.accept === type) {\n        if (\n          !dropContext.shallow ||\n          (dropContext.shallow && dropIds.length === 0)\n        ) {\n          // @ts-ignore\n          event.data = dropContext.data;\n          onDragEnd && onDragEnd(event);\n          dropIds.push(dropId);\n        }\n      }\n      dropElement = dropElement.parentNode as HTMLElement;\n    }\n  });\n\n  onMouseMove((event: React.MouseEvent) => {\n    if (!isDragging || !previewElement) {\n      return;\n    }\n\n    console.log('drag', drag.dropIds);\n    // console.log(\n    //   'onMouseMove',\n    //   { isDragging, previewElement },\n    //   dragDropManager.previewElement,\n    //   field ? field.address.segments : null,\n    // );\n    // console.log({previewElement})\n\n    const offset = {\n      left: event.pageX - mousePostionWithinPreview.left,\n      top: event.pageY - mousePostionWithinPreview.top,\n    };\n\n    previewElement.style.transform = `translate(${offset.left}px, ${offset.top}px)`;\n\n    if (type) {\n      let dropElement = document.elementFromPoint(event.clientX, event.clientY);\n      const dropIds = [];\n      while (dropElement) {\n        if (!dropElement.getAttribute) {\n          dropElement = dropElement.parentNode as HTMLElement;\n          continue;\n        }\n        const dropId = dropElement.getAttribute('data-drop-id');\n        const dropContext = getDrop(dropId);\n        if (dropContext && dropContext.accept === type) {\n          if (\n            !dropContext.shallow ||\n            (dropContext.shallow && dropIds.length === 0)\n          ) {\n            dropIds.push(dropId);\n          }\n          // @ts-ignore\n          // event.data = dropContext.data;\n        }\n        dropElement = dropElement.parentNode as HTMLElement;\n      }\n      setDrag({ type, dropIds });\n    }\n\n    onDrag && onDrag(event);\n  });\n\n  return { isDragging, dragRef, previewRef };\n}\n\nexport function useDrop(options) {\n  const {\n    uid: dropId,\n    accept,\n    data,\n    shallow,\n    onDrop,\n    onHover,\n    canDrop = true,\n  } = options;\n  const dropRef = useRef<HTMLDivElement>();\n  const { onMouseEnter, onMouseLeave, onMouseMove, onMouseUp } =\n    useMouseEvents(dropRef);\n  const [isOver, setIsOver] = useState(false);\n  const [onTopHalf, setOnTopHalf] = useState(null);\n  // const dragDropManager = useContext(DragDropManagerContext);\n  const { drag, drop, addDrop, setDrop } = useDragDropManagerContext();\n\n  useEffect(() => {\n    addDrop(dropId, {\n      accept,\n      data,\n      shallow,\n    });\n    // console.log('dragDropManager.drops', dragDropManager.drops);\n    // dragDropManager.drops[dropId] = {\n    //   accept,\n    //   data,\n    //   shallow,\n    // };\n    dropRef.current.setAttribute('data-drop-id', dropId);\n  }, [dropId]);\n\n  onMouseEnter((event) => {\n    if (!canDrop) {\n      return;\n    }\n    // console.log({ dragDropManager });\n    if (!drag || drag.type !== accept) {\n      return;\n    }\n    setIsOver(true);\n  });\n\n  onMouseMove((event: React.MouseEvent) => {\n    if (!canDrop) {\n      return;\n    }\n    if (!drag || drag.type !== accept) {\n      return;\n    }\n    console.log('drag.dropIds', drag.dropIds, dropId);\n    if (drag.dropIds && drag.dropIds.includes(dropId)) {\n      const top = event.clientY - dropRef.current.getBoundingClientRect().top;\n      const onTop = top < dropRef.current.clientHeight / 2;\n      setOnTopHalf(onTop);\n      // @ts-ignore\n      event.onTopHalf = onTop;\n      setIsOver(true);\n      onHover && onHover(event);\n    } else {\n      setIsOver(false);\n    }\n  });\n\n  onMouseUp((event: React.MouseEvent) => {\n    if (!canDrop) {\n      return;\n    }\n    if (event.button !== 0) {\n      return;\n    }\n    if (isOver) {\n      const top = event.clientY - dropRef.current.getBoundingClientRect().top;\n      const onTop = top < dropRef.current.clientHeight / 2;\n      setOnTopHalf(onTop);\n      // @ts-ignore\n      event.onTopHalf = onTop;\n      // @ts-ignore\n      event.data = data;\n      // @ts-ignore\n      event.dragItem = drop.item;\n      // @ts-ignore\n      event.dropElement = dropRef.current;\n      onDrop && onDrop(event);\n      // dragDropManager.onDrop && dragDropManager.onDrop(event);\n      setDrop(null);\n    }\n    setIsOver(false);\n  });\n\n  onMouseLeave(() => {\n    if (!canDrop) {\n      return;\n    }\n    setIsOver(false);\n  });\n\n  return {\n    onTopHalf: isOver ? onTopHalf : null,\n    isOver,\n    dropRef,\n  };\n}\n\nexport function useColResizer(options?: any) {\n  const { onDragStart, onDrag, onDragEnd } = options || {};\n  const dragRef = useRef<HTMLDivElement>();\n  const [dragOffset, setDragOffset] = useState({ left: 0, top: 0 });\n  const { onMouseDown } = useMouseEvents(dragRef);\n  const { onMouseMove, onMouseUp } = useMouseEvents();\n  const [isDragging, setIsDragging] = useState(false);\n  const [columns, setColumns] = useState(options.columns || []);\n  const [initial, setInitial] = useState<any>(null);\n\n  onMouseDown((event: React.MouseEvent) => {\n    if (event.button !== 0) {\n      return;\n    }\n    const prev = dragRef.current.previousElementSibling as HTMLDivElement;\n    const next = dragRef.current.nextElementSibling as HTMLDivElement;\n    if (!prev || !next) {\n      return;\n    }\n    setIsDragging(true);\n    if (!initial) {\n      setInitial({\n        offset: event.clientX,\n        prevWidth: prev.style.width,\n        nextWidth: next.style.width,\n      });\n    }\n  });\n\n  onMouseUp((event: React.MouseEvent) => {\n    if (!isDragging) {\n      return;\n    }\n    const parent = dragRef.current.parentElement;\n    const els = parent.querySelectorAll(':scope > .nb-grid-col');\n    const size = [];\n    const gap = dragRef.current.clientWidth;\n    console.log(\n      'parent.clientWidth',\n      parent.clientWidth,\n      dragRef.current.clientWidth,\n    );\n    els.forEach((el: HTMLDivElement) => {\n      const w = (100 * el.clientWidth) / parent.clientWidth;\n      const w2 =\n        (100 * (el.clientWidth + gap + gap / els.length)) / parent.clientWidth;\n      size.push(w2);\n      el.style.width = `${w}%`;\n    });\n    console.log({ size });\n    setIsDragging(false);\n    setInitial(null);\n    // @ts-ignore\n    event.data = { size };\n    onDragEnd && onDragEnd(event);\n  });\n\n  onMouseMove((event: React.MouseEvent) => {\n    if (!isDragging) {\n      return;\n    }\n    const offset = event.clientX - initial.offset;\n    // dragRef.current.style.transform = `translateX(${event.clientX - initialOffset}px)`;\n    const prev = dragRef.current.previousElementSibling as HTMLDivElement;\n    const next = dragRef.current.nextElementSibling as HTMLDivElement;\n    prev.style.width = `calc(${initial.prevWidth} + ${offset}px)`;\n    next.style.width = `calc(${initial.nextWidth} - ${offset}px)`;\n    // console.log('dragRef.current.nextSibling', prev.style.width);\n  });\n\n  return { isDragging, dragOffset, dragRef, columns };\n}\n\nexport function useBlockDragAndDrop() {\n  const schema = useFieldSchema();\n  const uid = useDragDropUID();\n  const path = useSchemaPath();\n  const { isDragging, dragRef, previewRef } = useDrag({\n    type: uid,\n    onDragStart() {\n      console.log('onDragStart');\n    },\n    onDragEnd(event) {\n      console.log('onDragEnd', event.data);\n    },\n    onDrag(event) {\n      // console.log('onDrag');\n    },\n    item: {\n      path,\n      schema: schema.toJSON(),\n    },\n  });\n  const { isOver, onTopHalf, dropRef } = useDrop({\n    uid: schema.name,\n    accept: uid,\n    data: {},\n    canDrop: !isDragging,\n  });\n\n  return {\n    isDragging,\n    dragRef,\n    previewRef,\n    isOver,\n    onTopHalf,\n    dropRef,\n  };\n}\n"]}