feat: 将ui-react中的组件独立成包

react-components/overlay/package.json

@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-overlay",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/overlay/src/Overlay.tsx

@@ -0,0 +1,109 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+
+interface OverlayProps {
+  config: MComponent;
+  className: string;
+  style: Record<string, any>;
+  id: string;
+  containerIndex: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
+}
+
+const Overlay: React.FC<OverlayProps> = ({
+  config,
+  id,
+  style,
+  className,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const { app, node } = useApp({
+    config,
+    methods: {
+      openOverlay() {
+        setVisible(true);
+        if (app) {
+          app.emit('overlay:open', node);
+        }
+      },
+      closeOverlay() {
+        setVisible(false);
+        if (app) {
+          app.emit('overlay:close', node);
+        }
+      },
+    },
+  });
+
+  if (!app) {
+    return null;
+  }
+
+  const editorSelectHandler = (
+    info: {
+      node: MNode;
+      page: MPage;
+      parent: MContainer;
+    },
+    path: MNode[],
+  ) => {
+    if (path.find((node: MNode) => node.id === config.id)) {
+      node?.instance.openOverlay();
+    } else {
+      node?.instance.closeOverlay();
+    }
+  };
+
+  useEffect(() => {
+    app.page?.on('editor:select', editorSelectHandler);
+
+    return () => {
+      app.page?.off('editor:select', editorSelectHandler);
+    };
+  }, []);
+
+  if (!visible) return null;
+
+  const MagicUiComp = app?.resolveComponent('container');
+
+  return (
+    <MagicUiComp
+      id={id}
+      containerIndex={containerIndex}
+      iteratorIndex={iteratorIndex}
+      iteratorContainerId={iteratorContainerId}
+      config={config}
+      className={className}
+      style={style}
+    ></MagicUiComp>
+  );
+};
+
+Overlay.displayName = 'magic-ui-overlay';
+
+export default Overlay;

react-components/overlay/src/event.ts

@@ -0,0 +1,22 @@
+export default {
+  methods: [
+    {
+      label: '打开蒙层',
+      value: 'openOverlay',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'closeOverlay',
+    },
+  ],
+  events: [
+    {
+      label: '打开蒙层',
+      value: 'overlay:open',
+    },
+    {
+      label: '关闭蒙层',
+      value: 'overlay:close',
+    },
+  ],
+};

react-components/overlay/src/formConfig.ts

@@ -0,0 +1,19 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [];

react-components/overlay/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import overlay from './Overlay';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default overlay;

react-components/overlay/src/initValue.ts

@@ -0,0 +1,11 @@
+export default {
+  style: {
+    position: 'fixed',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  items: [],
+};