@cainiaofe/cn-ui-m-lowcode
Version:
457 lines (453 loc) • 13.9 kB
JavaScript
import { Bundle } from '@ali/visualengine';
import React from 'react';
import { handleI18nLabel, uuid } from '@/common/util/util';
import Icon from './logo.jsx';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { createEventSetters } from '@/common/manager/event';
import {
createDataSourceSetters,
getDataOriginSetterSnippet,
getJSXTemplate,
} from '@/common/manager/setter-snippet';
import { __dataSource__ } from '@/common/util/expr-const';
import { ButtonPosition } from '@/type/button-position';
import { DisplayPosition } from '@/type/display-position';
const _unsafe_MixedSetter_hidden_select = '_unsafe_MixedSetter_hidden_select';
export default [
Bundle.createPrototype({
componentName: 'CnTab',
title: '选项卡（CnTab）',
icon: Icon,
disableBehaviors: ['copy'],
docUrl:
'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
category: '布局',
isInline: false,
isContainer: true,
canHovering: true,
canSelecting: true,
canDragging: true,
canDropIn: 'CnTabItem',
canDropTo: true,
initialChildren: [
{
componentName: 'CnTabItem',
props: { primaryKey: `tab_${uuid(8)}` },
},
{
componentName: 'CnTabItem',
props: { primaryKey: `tab_${uuid(8)}` },
},
],
snippets: [
{
screenshot:
'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
label: '普通型',
schema: {
componentName: 'CnTab',
props: {},
},
},
],
configure: [
{
name: 'isCnTab',
title: 'isCnTab',
initialValue: true,
display: 'none',
},
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
name: 'title',
title: 'Tab名称',
display: 'inline',
initialValue: 'Tab1',
tip: '当前Tab的名称，方便检索使用',
setter: 'StringSetter',
},
// {
// name:'doc',
// title:'使用文档',
// display:'inline',
// setter:<DocLinkSetter
// link={'https://alidocs.dingtalk.com/i/nodes/NkPaj7GAXdpWOkPeZ6p0Wqwgylnomz9B?iframeQuery=anchorId%3Dlc5v1btrovbue3v9ev9'}
// content={'点击查看Tab的正确使用姿势'}
// />
// },
getDataOriginSetterSnippet({
title: '标签项',
}),
{
name: 'items',
title: '标签项',
display: 'plain',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'title',
title: '名称',
setter: 'CnI18nSetter',
important: true,
},
{
name: 'hidden',
title: '是否隐藏',
important: true,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'BoolSetter',
title: '布尔（true/false）',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
{
name: 'primaryKey',
title: '标签项编码',
// condition: () => false,
setter: 'StringSetter',
},
// {
// name: 'closeable',
// title: '可关闭',
// important: true,
// setter: 'BoolSetter',
// condition: () => false,
// },
],
},
},
initialValue: () => {
return {
primaryKey: `tab_${uuid(8)}`,
title: '标签项',
// closeable: false,
};
},
},
},
},
accessor(value) {
// const node = target.node;
// const children = node.children;
const node = this.getNode();
const map = node?.children.map((child, index) => {
const primaryKey = child.getPropValue('primaryKey')
? String(child.getPropValue('primaryKey'))
: child.id;
const cacheSetter =
value?.[index]?.[_unsafe_MixedSetter_hidden_select];
const temp = {
primaryKey,
title: child.getPropValue('title'),
closeable: child.getPropValue('closeable'),
hidden: child.getPropValue('hidden'),
};
if (cacheSetter) {
temp[_unsafe_MixedSetter_hidden_select] = cacheSetter;
}
return temp;
});
return map;
},
mutator(value) {
const node = this.getNode();
const map = {};
if (!Array.isArray(value)) {
value = [];
}
value.forEach((item) => {
const tabitem = Object.assign({}, item);
map[item.primaryKey] = tabitem;
});
node.children.mergeChildren(
(child) => {
const primaryKey = String(child.getPropValue('primaryKey'));
if (Object.hasOwnProperty.call(map, primaryKey)) {
child.setPropValue('title', map[primaryKey].title);
child.setPropValue('closeable', map[primaryKey].closeable);
child.setPropValue('hidden', map[primaryKey].hidden);
delete map[primaryKey];
return false;
}
return true;
},
() => {
const items = [];
for (const primaryKey in map) {
if (Object.hasOwnProperty.call(map, primaryKey)) {
items.push({
componentName: 'CnTabItem',
props: map[primaryKey],
});
}
}
return items;
},
(child1, child2) => {
const a = value.findIndex(
(item) =>
String(item.primaryKey) ===
String(child1.getPropValue('primaryKey')),
);
const b = value.findIndex(
(item) =>
String(item.primaryKey) ===
String(child2.getPropValue('primaryKey')),
);
return a - b;
},
);
},
hidden(value) {
return (
this?.parent?.parent?.getPropValue?.('dataOrigin') === 'request'
);
},
},
{
name: 'requestConfig',
title: '查询服务',
display: 'inline',
// className:'cn-inline-setter-reduce',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
buttonText: '选择请求API',
params: {
env: 'pre',
pageSize: 999,
// serviceType: 'HSF',
},
paramSetter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'ParamSelectSetter',
props: {
dataKey: 'aa',
labelKey: 'aa',
valueKey: 'aa',
groupName: '参数列表',
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
getJSExpressionPrototype({
type: 'base',
}),
],
},
},
},
},
hidden(value) {
return (
this?.parent?.parent?.getPropValue?.('dataOrigin') !== 'request'
);
},
},
{
name: 'activeKey',
title: '默认激活的tab项',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'CnSelectSetter',
title: '选择tab项',
props(prop) {
const list = [];
const temp = prop?.getNode?.()?.getPropValue('items');
if (Array.isArray(temp) && temp.length > 0) {
temp.forEach((item) => {
const { primaryKey, title } = item || {};
if (primaryKey) {
const realTitle = handleI18nLabel(title);
list.push({
label: `${realTitle}（${primaryKey}）`,
value: primaryKey,
});
}
});
}
return {
options: list,
};
},
},
{
componentName: 'ParamSelectSetter',
props: {
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '从数据源选择',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
hidden(value) {
return (
this?.parent?.parent?.getPropValue?.('dataOrigin') === 'request'
);
},
},
{
title: '样式',
type: 'group',
display: 'accordion',
// collapsed: true,
items: [
// {
// name: 'shape',
// title: '形态',
// display: 'inline',
// initialValue: 'pure',
// setter: {
// componentName: 'RadioGroupSetter',
// props: {
// options: [
// { title: '普通', value: 'pure' },
// { title: '包裹', value: 'wrapped' },
// { title: '文本', value: 'text' },
// { title: '胶囊', value: 'capsule' },
// ],
// },
// },
// },
// {
// name: 'size',
// title: '大小',
// display: 'inline',
// initialValue: 'medium',
// setter: {
// componentName: 'RadioGroupSetter',
// props: {
// options: [
// { title: '小', value: 'small', tip: '小号尺寸' },
// { title: '中', value: 'medium', tip: '正常尺寸' },
// ],
// },
// },
// },
{
name: 'tabAlign',
title: 'tab 项对齐方向',
display: 'inline',
initialValue: 'center',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '左对齐', value: 'left' },
{ title: '居中对齐', value: 'center' },
],
},
},
},
{
name: 'type',
title: '滚动时标签项是否吸顶',
display: 'inline',
initialValue: 'primary',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{ title: '滚动时吸顶', value: 'primary' },
{ title: '滚动时不吸顶', value: 'secondary' },
],
},
},
},
],
},
...createEventSetters({
position: ButtonPosition.tabEvent,
initialValue: {
optType: 'flowAction',
},
title: '配置tab的回调',
}),
{
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [
...createDataSourceSetters(),
{
name: '_customRenderTabItem',
title: '自定义渲染Tab标签',
display: 'inline',
// className:'cn-inline-setter-reduce',
setter: getJSXTemplate({
position: DisplayPosition.tabItem,
}),
},
],
},
],
}),
Bundle.createPrototype({
componentName: 'CnTabItem',
title: '选项',
category: null,
isInline: false,
isContainer: true,
canHovering: false,
canSelecting: false,
canDropIn: true,
canDragging: false,
canDropTo: 'Tabs',
configure: [
{
name: 'primaryKey',
title: '键值',
display: 'none',
},
{
name: 'title',
title: '名称',
display: 'none',
initialValue: '标签项',
// initial(val) {
// return val;
// },
},
],
}),
];