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

react-components/page-fragment/package.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-page-fragment",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
+    "@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/page-fragment/src/PageFragment.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { MPageFragment } from '@tmagic/schema';
+
+interface PageFragmentProps {
+  config: MPageFragment;
+}
+
+const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
+  const { app } = useApp({
+    config,
+    methods: {},
+  });
+
+  if (!app) return null;
+
+  const MagicUiComp = app.resolveComponent('container');
+  const classNames = ['magic-ui-page-fragment'];
+  if (config.className) {
+    classNames.push(config.className);
+  }
+
+  return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
+};
+
+PageFragment.displayName = 'magic-ui-page-fragment';
+
+export default PageFragment;

react-components/page-fragment/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/page-fragment/src/formConfig.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 { getElById } from '@tmagic/utils';
+
+export default [
+  {
+    text: '页面片标识',
+    name: 'name',
+    disabled: true,
+  },
+  {
+    text: '页面片标题',
+    name: 'title',
+  },
+  {
+    name: 'layout',
+    text: '容器布局',
+    type: 'select',
+    defaultValue: 'absolute',
+    options: [
+      { value: 'absolute', text: '绝对定位' },
+      { value: 'relative', text: '流式布局' },
+    ],
+    onChange: (formState: any, v: string, { model }: any) => {
+      if (!model.style) return v;
+      if (v === 'relative') {
+        model.style.height = 'auto';
+      } else {
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
+        if (el) {
+          model.style.height = el.getBoundingClientRect().height;
+        }
+      }
+    },
+  },
+];

react-components/page-fragment/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 PageFragment from './PageFragment';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default PageFragment;

react-components/page-fragment/src/initValue.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.
+ */
+
+export default {
+  items: [],
+  style: {
+    width: '375',
+    height: '817',
+  },
+};