feat: 将ui-react中的组件独立成包
This commit is contained in:
roymondchen
roymondchen
108
react-components/iterator-container/src/IteratorContainer.tsx
Normal file
108
react-components/iterator-container/src/IteratorContainer.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MIteratorContainer, MNode } from '@tmagic/schema';
|
||||
|
||||
interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'iterator-container';
|
||||
}
|
||||
|
||||
interface IteratorContainerProps {
|
||||
config: IteratorContainerSchema;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
containerIndex: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
interface IteratorItemSchema {
|
||||
items: MNode[];
|
||||
condResult: boolean;
|
||||
style: {
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
const IteratorContainer: React.FC<IteratorContainerProps> = ({
|
||||
config,
|
||||
id,
|
||||
style,
|
||||
className,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
|
||||
|
||||
let { iteratorData = [] } = config;
|
||||
const { itemConfig, dsField, items } = config;
|
||||
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
|
||||
const MagicUiComp = app?.resolveComponent('container');
|
||||
|
||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
|
||||
id || config.id || '',
|
||||
iteratorContainerId,
|
||||
iteratorIndex,
|
||||
);
|
||||
|
||||
iteratorContainerNode?.resetNodes();
|
||||
|
||||
const configs: IteratorItemSchema[] = iteratorData.map((itemData: any, index: number) => {
|
||||
const condResult =
|
||||
app?.platform !== 'editor'
|
||||
? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
|
||||
: true;
|
||||
|
||||
const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
|
||||
|
||||
iteratorContainerNode?.setNodes(config.items, index);
|
||||
|
||||
return {
|
||||
items: newItems,
|
||||
condResult,
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
...itemConfig.style,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-container-index={containerIndex}
|
||||
data-iterator-index={iteratorIndex}
|
||||
data-iterator-container-id={iteratorContainerId}
|
||||
>
|
||||
{configs.map((config: any, index: number) => (
|
||||
<MagicUiComp
|
||||
config={config}
|
||||
key={index}
|
||||
style={app?.transformStyle(config.style)}
|
||||
iteratorIndex={[...(iteratorIndex || []), index]}
|
||||
iteratorContainerId={[...(iteratorContainerId || []), config.id]}
|
||||
></MagicUiComp>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
IteratorContainer.displayName = 'magic-ui-iterator-container';
|
||||
|
||||
export default IteratorContainer;
|
||||
4
react-components/iterator-container/src/event.ts
Normal file
4
react-components/iterator-container/src/event.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
120
react-components/iterator-container/src/formConfig.ts
Normal file
120
react-components/iterator-container/src/formConfig.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
/*
|
||||
* 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 { NODE_CONDS_KEY } from '@tmagic/schema';
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
|
||||
|
||||
export default [
|
||||
{
|
||||
name: 'iteratorData',
|
||||
text: '数据源数据',
|
||||
value: 'value',
|
||||
dataSourceFieldType: ['array'],
|
||||
checkStrictly: true,
|
||||
type: 'data-source-field-select',
|
||||
onChange: (vm: any, v: string[] = [], { model }: any) => {
|
||||
if (Array.isArray(v) && v.length > 1) {
|
||||
const [dsId, ...keys] = v;
|
||||
model.dsField = [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys];
|
||||
} else {
|
||||
model.dsField = [];
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'dsField',
|
||||
type: 'hidden',
|
||||
},
|
||||
{
|
||||
type: 'panel',
|
||||
title: '子项配置',
|
||||
name: 'itemConfig',
|
||||
items: [
|
||||
{
|
||||
type: 'display-conds',
|
||||
name: NODE_CONDS_KEY,
|
||||
titlePrefix: '条件组',
|
||||
defaultValue: [],
|
||||
},
|
||||
{
|
||||
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%',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
25
react-components/iterator-container/src/index.ts
Normal file
25
react-components/iterator-container/src/index.ts
Normal file
@@ -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 IteratorContainer from './IteratorContainer';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default IteratorContainer;
|
||||
31
react-components/iterator-container/src/initValue.ts
Normal file
31
react-components/iterator-container/src/initValue.ts
Normal file
@@ -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: [],
|
||||
};
|
||||
Reference in New Issue
Block a user