@cainiaofe/cn-ui-lowcode
Version:
297 lines (294 loc) • 8.34 kB
JavaScript
import { Bundle } from '@ali/visualengine';
import React from 'react';
import Icon from './logo.tsx';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/common/manager/position/button-position';
import { createDataSourceSetters } from '@/lowcode/cn-form-alc/prototype/form-item';
import {
getDataOriginSetterSnippet,
getHandlePropsSetterSnippet,
getRequestConfigSetterSnippet,
} from '@/common/manager/setter-snippet';
import { createEventSetters } from '@/common/manager/event';
import DocLinkSetter from '@/common/setter/doc-link-setter';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { ParamSelectSetter } from '@/common/setter/param-select-setter';
import { __dataSource__ } from '@/common/util/expr-const';
const CnLeftTreeBundle = Bundle.createPrototype({
title: '左树右X（CnLeftTree）',
componentName: 'CnLeftTree',
category: '布局',
icon: Icon,
docUrl:
'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
isInline: false,
isContainer: true,
canHovering: true,
canSelecting: true,
canDragging: true,
canDropIn: true,
snippets: [
{
screenshot:
'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
label: 'CnLeftTree',
schema: {
componentName: 'CnLeftTree',
props: {},
},
},
],
configure: [
{
name: 'isCnLeftTree',
title: 'isCnLeftTree',
initialValue: true,
display: 'none',
},
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
name: 'title',
title: '树名称',
display: 'inline',
initialValue: '树1',
setter: 'StringSetter',
},
{
name: 'doc',
title: '使用文档',
display: 'inline',
setter: (
<DocLinkSetter
link={
'https://alidocs.dingtalk.com/i/nodes/NkPaj7GAXdpWOkPeZ6p0Wqwgylnomz9B?iframeQuery=anchorId%3Dlc5uy2eany684fdd2t'
}
content={'点击查看左树右表的正确使用姿势'}
/>
),
},
// {
// title: '选择设置',
// type: 'group',
// display: 'accordion',
// collapsed: false,
// items: [
// getMultipleSetterSnippet(),
// {
// name: 'checkable',
// title: '支持复选框勾选数据',
// display: 'inline',
// setter: 'BoolSetter',
// },
// ],
// },
getDataOriginSetterSnippet({
display: 'none',
initialValue: 'request',
}),
{
name: 'requestConfig',
title: '查询服务',
display: 'block',
// className:'cn-inline-setter-reduce',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
buttonText: '选择请求API',
params: {
env: 'pre',
pageSize: 999,
// serviceType: 'HSF',
},
mockDataTemplate: {
success: true,
data: [
{
label: '根节点',
value: 'root',
children: [
{
label: '子节点1',
value: 'sub1',
},
{
label: '子节点2',
value: 'sub2',
},
],
},
],
},
paramSetter: {
componentName: 'MixedSetter',
props: {
setters: [
// {
// componentName: 'ParamSelectSetter',
// props: {
// dataKey: 'aa',
// labelKey: 'aa',
// valueKey: 'aa',
// groupName: '参数列表',
// },
// title: '选择参数',
// },
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '选择参数',
},
{
componentName: 'StringSetter',
title: '字符串',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
},
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') !== 'request';
},
},
// {
// name: 'topButtons',
// title: '树顶部按钮栏',
// display: 'accordion',
// initialValue: [
// ],
// setter: createButtonListSetters({ position: ButtonPosition.step }),
// },
{
name: 'treeNodeButtons',
title: '树节点右侧按钮',
display: 'accordion',
initialValue: [],
setter: createButtonListSetters({ position: ButtonPosition.treeNode }),
},
{
name: 'defaultParams',
title: '默认值',
display: 'accordion',
initialValue: [],
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'defaultValue',
title: '默认值',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'JsonSetter',
title: 'JSON编辑器',
},
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
},
title: '从数据源选择',
},
],
},
},
},
{
name: 'defaultExpandedKeys',
title: '默认展开值',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'JsonSetter',
title: 'JSON编辑器',
},
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
},
title: '从数据源选择',
},
],
},
},
},
],
},
},
},
},
{
name: 'treeStyle',
display: 'accordion',
title: '树样式',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'showLine',
title: '是否显示树的线',
setter: 'BoolSetter',
},
{
name: 'showSearch',
title: '开启搜索',
setter: 'BoolSetter',
},
{
name: 'draggable',
title: '是否可拖动',
setter: 'BoolSetter',
},
],
},
},
},
},
...createEventSetters({
position: ButtonPosition.treeEvent,
initialValue: {
optType: 'flowAction',
},
title: '配置树的回调',
}),
{
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [...createDataSourceSetters(), getHandlePropsSetterSnippet()],
},
],
});
export default CnLeftTreeBundle;