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

react-components/qrcode/package.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-qrcode",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.0"
+  },
+  "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/qrcode": "^1.4.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/qrcode/src/QrCode.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 QRCode from 'qrcode';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent } from '@tmagic/schema';
+
+interface QrCodeSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'qrcode';
+  url: string;
+}
+
+interface QrCodeProps {
+  config: QrCodeSchema;
+  className: string;
+  id: string;
+  style: Record<string, any>;
+  containerIndex: number;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+}
+
+const QrCode: React.FC<QrCodeProps> = ({
+  id,
+  config,
+  className,
+  style,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const { app } = useApp({ config });
+
+  if (!app) return null;
+
+  const [imgSrc, setImgSrc] = useState('');
+
+  useEffect(() => {
+    QRCode.toDataURL(config.url, (e: any, url: string) => {
+      if (e) console.error(e);
+      setImgSrc(url);
+    });
+  }, [config.url]);
+
+  return (
+    <img
+      className={className}
+      style={style}
+      data-tmagic-id={`${id || config.id || ''}`}
+      data-tmagic-container-index={containerIndex}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
+      src={imgSrc}
+    />
+  );
+};
+
+QrCode.displayName = 'magic-ui-qrcode';
+
+export default QrCode;

react-components/qrcode/src/event.ts

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

react-components/qrcode/src/formConfig.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 [
+  {
+    text: '链接',
+    name: 'url',
+    type: 'data-source-input',
+  },
+];

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

react-components/qrcode/src/initValue.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 {
+  url: 'https://m.film.qq.com',
+  style: {
+    position: 'absolute',
+    left: '57',
+    width: '176',
+    height: '176',
+  },
+};