bi-sdk-react 0.0.49 → 0.0.51

package/src/components/plugins/@antd/items/DrawerRender.tsx

@@ -0,0 +1,166 @@
+import { Button, Drawer, Modal, Space } from "antd";
+import React, { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+import { PageContext } from "../../../context/PageContext";
+import { DropContainer } from "../../../dnd/DropContainer";
+import { CallbackType, HtmlBaseProps, SchemaItemType } from "../../../typing";
+
+const Placeholder = styled.div`
+  text-align: center;
+  color: #a7a7a7;
+  background: #f5f5f5;
+  border: dotted 1px #ccc;
+  user-select: none;
+  cursor: pointer;
+  font-size: 12px;
+`;
+
+
+export type DrawerRenderProps = {
+  item: any;
+  title?: string;
+  size?: number;
+  placement?: "top" | "bottom" | "left" | "right";
+  okType?: "primary" | "link" | "text" | "dashed" | "default";
+  okText?: string;
+  cancelText?: string;
+  closable?: boolean;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  resizable?: boolean;
+  footer?: boolean;
+  ancestors: SchemaItemType[];
+} & HtmlBaseProps;
+
+export const DrawerRender: React.FC<DrawerRenderProps> = ({
+  id,
+  item,
+  ancestors,
+  style = {},
+  className,
+  footer = true,
+  okType = "primary",
+  okText = "确定",
+  cancelText = "取消",
+  resizable = true,
+  ...rest
+}) => {
+  const { designable, selectedItem, setSelectedItem, initCallback } =
+    useContext(PageContext);
+  const [open, setOpen] = useState(false);
+  const [localChildren, setLocalChildren] = useState(item.children || []);
+  const [size, setSize] = useState(rest.size || 400);
+
+  const onLocalChildrenChange = (list: any[]) => {
+    item.children = list;
+    setLocalChildren(list);
+  };
+
+  const callback: CallbackType = () => {
+    setOpen(true);
+  };
+
+  const updateToolbarPosition = () => {
+    const toolbarEl = document.getElementById("page-item-toolbar");
+    if (!toolbarEl) return;
+    const target = document.getElementById(`page-item-${item.id}`);
+    if (!target) {
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      toolbarEl.style.display = "none";
+      return;
+    } else {
+      toolbarEl.style.display = "flex";
+    }
+    const scrollTop =
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop ||
+      0;
+    const scrollLeft =
+      window.pageXOffset ||
+      document.documentElement.scrollLeft ||
+      document.body.scrollLeft ||
+      0;
+    toolbarEl.style.top = `${rect.top + scrollTop - 22}px`;
+    toolbarEl.style.left = `${rect.left + scrollLeft - 1}px`;
+  };
+
+  useEffect(() => {
+    setSize(rest.size || 400);
+  }, [rest.size]);
+
+  useEffect(() => {
+    setLocalChildren(item.children || []);
+  }, [item.children]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      updateToolbarPosition();
+    }, 0);
+  }, [open]);
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
+
+  const classes = [
+    className,
+    "drag-container",
+    "page-item-component",
+    selectedItem === item ? "selected" : "",
+    designable ? "designable" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <>
+      {designable && (
+        <Placeholder
+          id={open ? undefined : id || item.id}
+          onDoubleClick={() => setOpen(true)}
+          className={classes}
+        >
+          抽屉：{item.name}（{item.id}）
+        </Placeholder>
+      )}
+      <Drawer
+        {...rest}
+        id={id || item.id}
+        open={open}
+        size={size}
+        onClose={() => setOpen(false)}
+        getContainer={() =>
+          designable ? document.querySelector(".page-canvas")! : document.body
+        }
+        push={{ distance: 0 }}
+        style={{ ...(item.style || {}), ...style, paddingBottom: 0 }}
+        className={className}
+        onClick={() => setSelectedItem(item)}
+        footer={
+          footer ? (
+            <Space>
+              <Button onClick={() => setOpen(false)}>{cancelText}</Button>
+              <Button type={okType}>
+                {okText}
+              </Button>
+            </Space>
+          ) : null
+        }
+        resizable={{
+          onResize: setSize,
+        }}
+      >
+        <DropContainer
+          ancestors={[...ancestors, item]}
+          list={localChildren}
+          onListChange={onLocalChildrenChange}
+        />
+      </Drawer>
+    </>
+  );
+};

package/src/components/plugins/@antd/items/ModalRender.tsx

@@ -0,0 +1,146 @@
+import { Modal } from "antd";
+import React, { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+import { PageContext } from "../../../context/PageContext";
+import { DropContainer } from "../../../dnd/DropContainer";
+import { CallbackType, HtmlBaseProps, SchemaItemType } from "../../../typing";
+
+const Placeholder = styled.div`
+  text-align: center;
+  color: #a7a7a7;
+  background: #f5f5f5;
+  border: dotted 1px #ccc;
+  user-select: none;
+  cursor: pointer;
+  font-size: 12px;
+`;
+
+export type ModalRenderProps = {
+  item: any;
+  title?: string;
+  width?: number;
+  okType?: "primary" | "link" | "text" | "dashed" | "default";
+  okText?: string;
+  cancelText?: string;
+  closable?: boolean;
+  keyboard?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  footer?: boolean;
+  ancestors: SchemaItemType[];
+} & HtmlBaseProps;
+
+export const ModalRender: React.FC<ModalRenderProps> = ({
+  id,
+  item,
+  ancestors,
+  style = {},
+  className,
+  footer = true,
+  ...rest
+}) => {
+  const { designable, selectedItem, setSelectedItem, initCallback } =
+    useContext(PageContext);
+  const [open, setOpen] = useState(false);
+  const [localChildren, setLocalChildren] = useState(item.children || []);
+
+  const onLocalChildrenChange = (list: any[]) => {
+    item.children = list;
+    setLocalChildren(list);
+  };
+
+  const callback: CallbackType = () => {
+    setOpen(true);
+  };
+
+  const updateToolbarPosition = () => {
+    const toolbarEl = document.getElementById("page-item-toolbar");
+    if (!toolbarEl) return;
+    const target = document.getElementById(`page-item-${item.id}`);
+    if (!target) {
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      toolbarEl.style.display = "none";
+      return;
+    } else {
+      toolbarEl.style.display = "flex";
+    }
+    const scrollTop =
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop ||
+      0;
+    const scrollLeft =
+      window.pageXOffset ||
+      document.documentElement.scrollLeft ||
+      document.body.scrollLeft ||
+      0;
+    toolbarEl.style.top = `${rect.top + scrollTop - 22}px`;
+    toolbarEl.style.left = `${rect.left + scrollLeft - 1}px`;
+  };
+
+  useEffect(() => {
+    setLocalChildren(item.children || []);
+  }, [item.children]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      updateToolbarPosition();
+    }, 0);
+  }, [open]);
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
+
+  const classes = [
+    className,
+    "drag-container",
+    "page-item-component",
+    selectedItem === item ? "selected" : "",
+    designable ? "designable" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <>
+      {designable && (
+        <Placeholder
+          id={open ? undefined : id || item.id}
+          onDoubleClick={() => setOpen(true)}
+          className={classes}
+        >
+          弹窗：{item.name}（{item.id}）
+        </Placeholder>
+      )}
+      <Modal
+        {...rest}
+        open={open}
+        onCancel={() => setOpen(false)}
+        getContainer={() =>
+          designable ? document.querySelector(".page-canvas")! : document.body
+        }
+        style={{ ...(item.style || {}), ...style, paddingBottom: 0 }}
+        className={className}
+        modalRender={(modal) => (
+          <div
+            id={open ? id || item.id : undefined}
+            onClick={() => setSelectedItem(item)}
+          >
+            {modal}
+          </div>
+        )}
+        footer={footer ? undefined : null}
+      >
+        <DropContainer
+          ancestors={[...ancestors, item]}
+          list={localChildren}
+          onListChange={onLocalChildrenChange}
+        />
+      </Modal>
+    </>
+  );
+};

package/src/components/plugins/@antd/items/index.ts

@@ -17,4 +17,5 @@ export { CapsuleRender } from './CapsuleRender'
 export { CheckboxRender } from './CheckboxRender'
 export { DatePickerRender } from './DatePickerRender'
 export { SwitchRender } from './SwitchRender'
-
+export { ModalRender } from './ModalRender'
+export { DrawerRender } from './DrawerRender'

package/src/example.tsx

@@ -25,6 +25,7 @@ const EditDrawer = styled(Drawer)`
 
   .ant-drawer-content-wrapper {
     width: 100%;
+    transform: none !important;
 
     .ant-drawer-section {
       width: 100%;
@@ -122,7 +123,7 @@ export const Example: React.FC = () => {
           open={editVisible}
           onClose={() => setEditVisible(false)}
           styles={{
-            wrapper: { width: "100%" },
+            wrapper: { width: "100%", transform: "none !important" },
             header: { display: "none" },
             body: {
               padding: 0,