@cainiaofe/cn-ui-m-lowcode
Version:
389 lines (387 loc) • 12.8 kB
JavaScript
import React from 'react';
import { Bundle } from '@ali/visualengine';
import { uuid } from '@/common/util/util';
import { DisplayPosition } from '@/type/display-position';
import {
createDataSourceSetters,
getDataOriginSetterSnippet,
getJSXTemplate,
getMixedSetterSnippet,
getStepRequestConfigSetterSnippet,
getStepShapeSetterSnippet,
} from '@/common/manager/setter-snippet';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { __dataSource__ } from '@/common/util/expr-const';
import { ParamSelectSetter } from '@/common/setter/param-select-setter';
import DocSetter from '@/common/setter/doc-setter';
// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
title: '步骤条',
componentName: 'CnStep',
category: '反馈',
isContainer: false,
canHovering: true,
canSelecting: true,
canDragging: true,
enableCopy: true,
configure: [
{
name: 'isCnStep',
title: 'isCnStep',
initialValue: true,
display: 'none',
},
{
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this',
},
display: 'none',
},
{
name: 'title',
title: '步骤条名称',
display: 'inline',
initialValue: '步骤条1',
tip: '当前步骤条的名称，方便检索使用',
setter: 'StringSetter',
},
getDataOriginSetterSnippet({
title: '步骤项配置',
}),
{
name: 'steps',
title: '步骤条配置',
display: 'plain',
initialValue: [
{
title: '标题',
content: '描述',
key: uuid(6),
},
],
className: 'cn-datasource-relative-setter',
setter: getMixedSetterSnippet({
setters: [
{
title: '设置静态数据',
componentName: 'ArraySetter',
props: {
mode: 'list',
itemSetter: {
componentName: 'ObjectSetter',
initialValue(prop) {
return {
title: '标题',
content: '描述',
key: uuid(6),
};
},
props: {
config: {
items: [
{
name: 'title',
title: '标题',
setter: 'CnI18nSetter',
isRequired: true,
},
{
name: 'hidden',
title: '是否隐藏',
isRequired: true,
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'BoolSetter',
title: '布尔（true/false）',
},
getJSExpressionPrototype({ type: 'base' }),
],
},
},
},
{
name: 'content',
title: '内容',
setter: 'CnI18nSetter',
},
{
name: 'status',
title: '状态',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '已完成',
value: 'finish',
},
{
title: '进行中',
value: 'process',
},
{
title: '等待',
value: 'wait',
},
{
title: '错误',
value: 'error',
},
],
},
},
},
{
name: 'icon',
title: '图标',
setter: getMixedSetterSnippet({
setters: [
{
title: '字符串',
componentName: 'StringSetter',
},
getJSExpressionPrototype({ type: 'base' }),
],
}),
},
{
display: 'none',
setter: (
<DocSetter
content={
<div className=''>
请到{' '}
<a
target={'_blank'}
href={
'https://done.alibaba-inc.com/dsm/cone/components/detail/cnicon?themeid=26075&tabActiveKey=component'
}
rel='noreferrer'
>
图标库
</a>{' '}
中寻找想用的图标，填写图标type即可。
<a
target={'_blank'}
href={
'https://yuque.antfin.com/c-one/next/ld6nao#L77sK'
}
rel='noreferrer'
>
体验Demo
</a>
</div>
}
/>
),
},
{
name: 'addon',
title: '标题左侧附加内容',
setter: getMixedSetterSnippet({
setters: [
{
componentName: 'StringSetter',
title: '字符串',
},
],
}),
condition(prop) {
return (
prop
?.getNode?.()
?.getPropValue?.('stepStyle.direction') === 'ver'
);
},
},
{
name: 'extra',
title: '标题右侧附加内容',
setter: getMixedSetterSnippet({
setters: [
{
componentName: 'StringSetter',
title: '字符串',
},
],
}),
condition(prop) {
return (
prop
?.getNode?.()
?.getPropValue?.('stepStyle.direction') === 'ver'
);
},
},
// {
// name:'icon',
// title:'图标',
// setter:'StringSetter',
// },
{
name: 'key',
title: '步骤项编码',
setter: 'StringSetter',
},
],
},
},
},
},
},
{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '从数据源选择',
},
// getJSExpressionPrototype({ type: 'base' })
],
}),
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') === 'request';
},
},
getStepRequestConfigSetterSnippet({
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') !== 'request';
},
}),
{
name: 'current',
title: '当前步骤',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
componentName: 'NumberSetter',
title: '第几步',
},
{
componentName: 'StringSetter',
title: '填写步骤编码',
},
{
componentName: 'ParamSelectSetter',
props: {
configList: [
{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true,
},
],
},
title: '从数据源选择',
},
getJSExpressionPrototype({ type: 'base' }),
// {
// componentName: 'SelectSetter',
// title: '选择步骤',
// props(prop){
// const list = []
// const temp = prop?.getNode?.()?.getPropValue('steps');
// if(Array.isArray(temp) && temp.length > 0) {
// temp.forEach(item=>{
// const { key, title } = item;
// const realTitle = handleI18nLabel(title)
// if(key) {
// list.push({
// label: realTitle,
// value: key,
// })
// }
// })
// }
// return {
// options:list
// }
// }
// },
],
},
},
hidden(value) {
return this?.parent?.parent?.getPropValue?.('dataOrigin') === 'request';
},
},
{
name: 'stepStyle',
display: 'accordion',
title: '步骤条样式',
collapsed: true,
extraProps: {
defaultCollapsed: true,
},
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
getStepShapeSetterSnippet(),
{
name: 'direction',
title: '步骤条的展示方向',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '水平排列',
value: 'hoz',
},
{
title: '竖直排列',
value: 'ver',
},
],
},
},
},
{
name: '_customRenderStepContent',
title: '自定义渲染内容区域',
display: 'inline',
// className:'cn-inline-setter-reduce',
setter: getMixedSetterSnippet({
setters: [
{
componentName: 'StringSetter',
title: '纯文本',
},
getJSXTemplate({
position: DisplayPosition.stepItemContent,
}),
],
}),
},
],
},
},
},
},
{
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [...createDataSourceSetters()],
},
],
});