@cainiaofe/cn-ui-lowcode
Version:
246 lines (242 loc) • 8.06 kB
JavaScript
import { Bundle } from '@ali/visualengine';
import React from 'react';
import Icon from './logo.tsx';
import { uuid } from '@/common/util/util';
import { getObjectSetterSnippet } from '@/common/manager/setter-snippet';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/common/manager/position/button-position';
const CnCardBundle = Bundle.createPrototype({
title: '卡片（CnCard）',
componentName: 'CnCard',
category: '布局',
// canOperating: false,
disableBehaviors: ['copy'],
icon: Icon,
docUrl:
'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
isInline: false,
isContainer: false,
canHovering: true,
canSelecting: true,
canDragging: true,
canDropIn: 'CnCardSubCard',
canDropTo: true,
snippets: [
{
screenshot:
'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
label: 'CnCard',
schema: {
componentName: 'CnCard',
props: {},
},
},
],
configure: [
{
name: 'isCnCard',
title: 'isCnCard',
initialValue: true,
display: 'none',
},
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
title: '样式',
type: 'group',
display: 'accordion',
collapsed: false,
items: [
{
name: 'title',
title: '标题',
display: 'inline',
initialValue: '标题',
setter: 'CnI18nSetter',
},
{
name: 'titleTips',
title: '标题提示',
display: 'inline',
setter: 'CnI18nSetter',
},
{
name: 'desc',
title: '描述',
display: 'inline',
setter: 'CnI18nSetter',
},
{
name: 'foldable',
title: '支持折叠',
display: 'inline',
setter: 'BoolSetter',
},
{
name: 'titleTag',
title: '标题标签',
display: 'plain',
setter: getObjectSetterSnippet({
items: [
{
name: 'children',
title: '标题右侧标签',
display: 'inline',
setter: 'CnI18nSetter',
},
],
}),
},
],
},
{
title: '额外',
name: 'extra',
display: 'plain',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'subCardList',
title: '子卡片列表',
setter: {
initialValue: [
{
key: 'subcard',
subTitle: '子卡片标题',
},
],
componentName: 'ArraySetter',
props: {
mode: 'list',
itemSetter: {
componentName: 'ObjectSetter',
initialValue(prop) {
return {
key: uuid(6),
subTitle: '子卡片标题',
};
},
props: {
config: {
items: [
{
name: 'key',
title: '唯一标识',
display: 'none',
},
{
name: 'subTitle',
title: '标题',
display: 'inline',
isRequired: true,
setter: 'CnI18nSetter',
},
{
name: 'subDesc',
title: '描述',
display: 'inline',
isRequired: true,
setter: 'CnI18nSetter',
},
{
name: 'buttons',
title: '卡片右侧按钮',
display: 'accordion',
setter: createButtonListSetters({
position: ButtonPosition.subCardActionNotInForm,
}),
},
// {
// name: 'cols',
// title: '一行几列',
// display: 'inline',
// supportVariable: false,
// setter: {
// componentName: 'RadioGroupSetter',
// props: {
// options: [
// { title: '无', value: undefined },
// { title: '一列', value: 1 },
// { title: '二列', value: 2 },
// { title: '三列', value: 3 },
// { title: '四列', value: 4 },
// ],
// },
// },
// },
],
},
},
},
},
},
extraProps: {
setValue(target, value) {
const { node } = target;
const map = {};
if (!Array.isArray(value)) {
value = [];
}
value.forEach((item) => {
const subCard = Object.assign({}, item);
map[item.key] = subCard;
});
node.children.mergeChildren(
(child) => {
const key = String(child.getPropValue('key'));
if (Object.hasOwnProperty.call(map, key)) {
child.setPropValue('subTitle', map[key].subTitle);
child.setPropValue('subDesc', map[key].subDesc);
child.setPropValue('buttons', map[key].buttons);
delete map[key];
return false;
}
return true;
},
() => {
const items = [];
for (const key in map) {
if (Object.hasOwnProperty.call(map, key)) {
items.push({
componentName: 'CnCardSubCard',
props: map[key],
});
}
}
return items;
},
(child1, child2) => {
const a = value.findIndex(
(item) =>
String(item.key) ===
String(child1.getPropValue('key')),
);
const b = value.findIndex(
(item) =>
String(item.key) ===
String(child2.getPropValue('key')),
);
return a - b;
},
);
},
},
},
],
},
},
},
},
],
});
export default CnCardBundle;