@hzab/flowlong-designer 0.0.1 → 0.0.3

package/src/components/Selector/index.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, useContext, useEffect } from "react";
 import { Modal, Input, Button, Tree, Checkbox, Pagination, Avatar } from "antd";
 import { RightOutlined, DeleteOutlined } from "@ant-design/icons";
-
+import GroupUserSelector from "@hzab/group-user-selector";
 import { SelectContext } from "./SelectContext";
 
 import "./index.less";
@@ -11,163 +11,27 @@ const titleMap = ["人员选择", "角色选择"];
 
 export const Selector = (props) => {
   const selectorCtx = useContext(SelectContext);
-  const { open, type, value, onSave, treeModel, listModel, roleListModel } = selectorCtx.selectHandler;
-  const [groupOptions, setGroupOptions] = useState([
-    {
-      title: "Group-111",
-      key: "g-111",
-    },
-    {
-      title: "Group-222",
-      key: "g-222",
-    },
-    {
-      title: "Group-333",
-      key: "g-333",
-    },
-  ]);
-  const [options, setOptions] = useState([
-
-  ]);
-
-  const [roleOptions, setRoleOptions] = useState([
-    {
-      title: "Role-111",
-      key: "r-111",
-    },
-    {
-      title: "Role-222",
-      key: "r-222",
-    },
-    {
-      title: "Role-333",
-      key: "r-333",
-    },
-  ]);
-  const [selected, setSelected] = useState(Array.isArray(value) ? value?.map((it) => it.id || it.key) : []);
-  const selectedRef = useRef(
-    Array.isArray(value)
-      ? value?.map((it) => ({
-        ...it,
-        title: it.name,
-        key: it.id,
-      }))
-      : [],
-  );
-
-
-  const handleGetTree =  () => {
-    treeModel?.get()
-    .then((res) => {
-      setGroupOptions(res);
-    })
-    };
-
-  const handleGetList =  (data?: any) => {
-    (type == 2 ? roleListModel :listModel)?.get(data || {})
-    .then((res) => {
-      setOptions(roleOptions);
-    })
-    };
+  const { open, type, value, onSave, roleListConfig, listConfig, initiatorListConfig, drawerType } =
+    selectorCtx.selectHandler;
 
-  useEffect(() => {
-    if (type == 2) {
-      handleGetList();
-    } else if (type == 1) {
-      handleGetTree();
-    }
-  }, [type]);
-
-  useEffect(() => {
-
-    setSelected(Array.isArray(value) ? value?.map((it) => it.id || it.key) : []);
-    selectedRef.current = Array.isArray(value)
-      ? value?.map((it) => ({
-        ...it,
-        title: it.name,
-        key: it.id,
-      }))
-      : [];
-  }, [value]);
-
-  const pageRef = useRef(1);
-  const keywordRef = useRef("");
-  const keyIdRef = useRef(undefined);
-  const groupTreeRef = useRef();
+  const selectorRef = useRef(undefined);
 
   function onModalSave() {
-    onSave && onSave(selectedRef.current || []);
+    onSave && onSave(selectorRef.current?.selectedList || []);
     onModalClose();
   }
 
   function onModalClose() {
-    setSelected([]);
-    selectedRef.current = [];
     selectorCtx.onClose();
   }
 
-  function onSearch(value, event) {
-    // keywordRef.current = value;
-    handleGetList({orgId:keyIdRef.current, name:value});
-
-  }
-
-  function groupClick(value, node) {
-    handleGetList({orgId:value});
-    keyIdRef.current = value;
-
-    // keywordRef.current = "";
-    // pageRef.current = 1;
-    // getUserOptions(value);
-  }
-
-  function getUserOptions(id) {
-    // TODO: 请求并设置用户列表
-    setTimeout(() => {
-      const list = [];
-      for (let i = 0; i < 10; i++) {
-        list.push({
-          title: "User-" + id + "-" + list.length,
-          key: "u-" + id + "-" + list.length,
-        });
-      }
-      console.log(list);
-
-      // pageRef.current
-      setOptions(list);
-    }, 100);
-  }
-
-  function onUserCheck(key) {
-
-    const is = selected.includes(key);
-    if (!is) {
-      setSelected([...selected, key])
-      const item = options.find((it) => it.key === key);
-      selectedRef.current = [...selectedRef.current, {
-        ...item,
-        id: item.key,
-        name: item.title,
-      }]
-    } else {
-      setSelected(selected.filter((it) => it !== key));
-      selectedRef.current = selectedRef.current.filter((it) => it.key !== key);
-    }
-  }
-
-  function deleteSelected(key) {
-    setSelected(selected.filter((it) => it !== key));
-    selectedRef.current = selectedRef.current.filter((it) => it.key !== key);
-  }
-
-
   return (
     <div className="selector">
       <Modal
         wrapClassName="selector-modal"
         open={open}
         title={titleMap[type - 1]}
-        width={type == 1 ? 680 : 560}
+        width={850}
         destroyOnClose
         getContainer="body"
         onCancel={onModalClose}
@@ -180,58 +44,11 @@ export const Selector = (props) => {
           </div>
         }
       >
-        <div className="sc-user-select">
-          <div className="sc-user-select__left">
-            <div className="sc-user-select__search">
-              <Input.Search onSearch={onSearch} enterButton placeholder="搜索成员" />
-            </div>
-            <div className="sc-user-select__select">
-              {type == 1 ? <div className="sc-user-select__tree" v-loading="showGrouploading">
-                <Tree className="menu" ref={groupTreeRef} treeData={groupOptions} onSelect={groupClick} />
-              </div> : null}
-              <div className="sc-user-select__user" v-loading="showUserloading">
-                <div className="sc-user-select__user__list">
-                  {options?.map((item) => {
-                    return (
-                      <div className="sc-user-select__user__item" key={item.key}>
-                        <Checkbox
-                          checked={selected.includes(item.key)}
-                          onChange={(e) => onUserCheck(item.key)}
-                        >
-                          {item.title}
-                        </Checkbox>
-                      </div>
-                    )
-                  })}
-                </div>
-                <footer>
-                  <Pagination simple size="small" total={50} showSizeChanger showQuickJumper></Pagination>
-                </footer>
-              </div>
-            </div>
-          </div>
-          <div className="sc-user-select__toicon">
-            <RightOutlined />
-          </div>
-          <div className="sc-user-select__selected">
-            <header>已选 ({selected?.length ?? 0})</header>
-            <ul className="sc-user-select__selected-list">
-              {selectedRef.current?.map((item, idx) => {
-                return (
-                  <li key={item.id ?? item.key}>
-                    <span className="name">
-                      <Avatar size="small">{item.title?.substring(0, 1)}</Avatar>
-                      <label>{item.title}</label>
-                    </span>
-                    <span className="delete">
-                      <DeleteOutlined onClick={() => deleteSelected(item.id ?? item.key)}></DeleteOutlined>
-                    </span>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
+        <GroupUserSelector
+          ref={selectorRef}
+          {...(drawerType == 1 ? initiatorListConfig : type == 2 ? roleListConfig : listConfig)}
+          value={value}
+        />
       </Modal>
     </div>
   );

package/src/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, forwardRef, useState } from "react";
 import { Button, Drawer } from "antd";
 
 import ScWorkflow from "./components/ScWorkflow";
@@ -43,21 +43,27 @@ function copy(str) {
   });
 }
 
-function FlowlongDesigner(props) {
-  const { value, flowName, listModel, treeModel ,roleListModel} = props;
+function FlowlongDesigner(props, ref) {
+  const { value, flowName, roleListConfig, listConfig, initiatorListConfig } = props;
   const [drawer, setDrawer] = useState(false);
   const [zoom, setZoom] = useState(1);
   const [data, setData] = useState(Object.keys(value || {}).length > 0 ? value : getInitNodeData({ name: flowName }));
   const [selectHandler, setSelectHandler] = useState<ISelectHandlerI>({
     open: false,
     type: -1,
+    drawerType: -1,
     value: [],
     onSave: (s) => {},
-    listModel,
-    treeModel,
-    roleListModel
+    roleListConfig: {},
+    listConfig: {},
+    initiatorListConfig: {},
   });
 
+  // 通过useImperativeHandle定义要抛出的值或方法
+  useImperativeHandle(ref, () => ({
+    data,
+  }));
+
   useEffect(() => {
     value && setData(value);
   }, [value]);
@@ -79,11 +85,29 @@ function FlowlongDesigner(props) {
       <SelectContext.Provider
         value={{
           selectHandler,
-          setSelectHandler(type, value, onSave) {
-            setSelectHandler({ open: true, type, value, onSave , listModel, treeModel, roleListModel});
+          setSelectHandler(type, value, onSave, drawerType) {
+            setSelectHandler({
+              open: true,
+              type,
+              drawerType,
+              value,
+              onSave,
+              roleListConfig,
+              listConfig,
+              initiatorListConfig,
+            });
           },
           onClose() {
-            setSelectHandler({ open: false, type: -1, value: [], onSave: (s) => {} , listModel, treeModel,  roleListModel});
+            setSelectHandler({
+              open: false,
+              type: -1,
+              drawerType: -1,
+              value: [],
+              onSave: (s) => {},
+              roleListConfig,
+              listConfig,
+              initiatorListConfig,
+            });
           },
         }}
       >
@@ -131,4 +155,4 @@ function FlowlongDesigner(props) {
   );
 }
 
-export default FlowlongDesigner;
+export default forwardRef(FlowlongDesigner);