feat: 支持迭代器容器

packages/ui-react/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@tmagic/core": "1.3.16",
     "@tmagic/schema": "1.3.16",
+    "@tmagic/utils": "1.3.16",
     "qrcode": "^1.5.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"

packages/ui-react/src/index.ts

@@ -19,6 +19,7 @@
 import Button from './button';
 import Container from './container';
 import Img from './img';
+import IteratorContainer from './iterator-container';
 import Overlay from './overlay';
 import Page from './page';
 import pageFragment from './page-fragment';
@@ -40,6 +41,7 @@ const ui: Record<string, any> = {
   overlay: Overlay,
   'page-fragment': pageFragment,
   'page-fragment-container': pageFragmentContainer,
+  'iterator-container': IteratorContainer,
 };
 
 export default ui;

packages/ui-react/src/iterator-container/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 IteratorContainer from './src/IteratorContainer';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+
+export default IteratorContainer;

packages/ui-react/src/iterator-container/src/IteratorContainer.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import type { MContainer } from '@tmagic/schema';
+
+import useApp from '../../useApp';
+
+interface IteratorContainerProps extends MContainer {
+  config: MContainer & {
+    type: 'iterator-container';
+    iteratorData: any[];
+    dsField: string[];
+    itemConfig: {
+      layout: string;
+      style: Record<string, string | number>;
+    };
+  };
+  className: string;
+  style: Record<string, any>;
+  id: string;
+}
+
+const IteratorContainer: React.FC<IteratorContainerProps> = ({ config, id }) => {
+  const { app } = useApp({ config });
+
+  const { iteratorData = [] } = config;
+
+  if (app?.platform === 'editor' && !iteratorData.length) {
+    iteratorData.push({});
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const MagicUiComp = app?.resolveComponent('container');
+  return (
+    <div
+      id={`${id || config.id || ''}`}
+      className="magic-ui-iterator-container"
+      style={app?.transformStyle(config.style || {})}
+    >
+      {iteratorData.map((itemData, index) => {
+        const itemConfig = {
+          items: app?.dataSourceManager?.compliedIteratorItems(itemData, config.items, config.dsField) ?? config.items,
+          id: '',
+          style: {
+            ...config.itemConfig.style,
+            position: 'relative',
+            left: 0,
+            top: 0,
+          },
+        };
+        return <MagicUiComp config={itemConfig} key={index}></MagicUiComp>;
+      })}
+    </div>
+  );
+};
+
+IteratorContainer.displayName = 'magic-ui-iterator-container';
+
+export default IteratorContainer;

packages/ui-react/src/iterator-container/src/formConfig.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+
+export default [
+  {
+    name: 'iteratorData',
+    text: '数据源数据',
+    value: 'value',
+    fieldType: ['array'],
+    checkStrictly: false,
+    type: 'data-source-field-select',
+    onChange: (vm: any, v: string[] = [], { model }: any) => {
+      const [dsId, ...keys] = v;
+      model.dsField = [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys];
+      return v;
+    },
+  },
+  {
+    name: 'dsField',
+    type: 'hidden',
+  },
+  {
+    type: 'panel',
+    title: '子项配置',
+    name: 'itemConfig',
+    items: [
+      {
+        name: 'layout',
+        text: '容器布局',
+        type: 'select',
+        defaultValue: 'absolute',
+        options: [
+          { value: 'absolute', text: '绝对定位' },
+          { value: 'relative', text: '流式布局', disabled: true },
+        ],
+      },
+      {
+        type: 'fieldset',
+        legend: '样式',
+        name: 'style',
+        items: [
+          {
+            name: 'width',
+            text: '宽度',
+          },
+          {
+            name: 'height',
+            text: '高度',
+          },
+          {
+            text: 'overflow',
+            name: 'overflow',
+            type: 'select',
+            options: [
+              { text: 'visible', value: 'visible' },
+              { text: 'hidden', value: 'hidden' },
+              { text: 'clip', value: 'clip' },
+              { text: 'scroll', value: 'scroll' },
+              { text: 'auto', value: 'auto' },
+              { text: 'overlay', value: 'overlay' },
+            ],
+          },
+          {
+            name: 'backgroundImage',
+            text: '背景图',
+          },
+          {
+            name: 'backgroundColor',
+            text: '背景颜色',
+            type: 'colorPicker',
+          },
+          {
+            name: 'backgroundRepeat',
+            text: '背景图重复',
+            type: 'select',
+            defaultValue: 'no-repeat',
+            options: [
+              { text: 'repeat', value: 'repeat' },
+              { text: 'repeat-x', value: 'repeat-x' },
+              { text: 'repeat-y', value: 'repeat-y' },
+              { text: 'no-repeat', value: 'no-repeat' },
+              { text: 'inherit', value: 'inherit' },
+            ],
+          },
+          {
+            name: 'backgroundSize',
+            text: '背景图大小',
+            defaultValue: '100% 100%',
+          },
+        ],
+      },
+    ],
+  },
+];

packages/ui-react/src/iterator-container/src/initValue.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 {
+  style: {
+    width: '375',
+    height: '100',
+  },
+  itemConfig: {
+    style: {
+      width: '100%',
+      height: '100%',
+    },
+  },
+  items: [],
+};