@ywfe/materials-design
Version:
YwDesign for lowcode
268 lines (265 loc) • 8.45 kB
text/typescript
import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { IPublicTypeSnippetMore } from '../_base';
const YwDetailInfoMeta: IPublicTypeComponentMetadata = {
componentName: 'YwDetailInfo',
title: 'YwDetailInfo',
docUrl: '',
screenshot: '',
devMode: 'proCode',
group: '基础组件',
category: '页面模块',
npm: {
package: '@ywfe/materials-design',
version: '0.0.1-beta.7',
exportName: 'YwDetailInfo',
main: 'src/index.tsx',
destructuring: true,
subName: '',
},
configure: {
props: [
{
name: 'title',
title: { label: '小标题', tip: 'title | 小标题' },
setter: {
componentName: 'StringSetter',
isRequired: false,
initialValue: '',
},
},
{
title: { label: '标题尺寸', tip: 'size | 标题尺寸' },
name: 'size',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
label: 's',
value: 's',
},
{
label: 'm',
value: 'm',
},
{
label: 'l',
value: 'l',
},
],
},
initialValue: 'm',
},
},
{
name: 'subtitle',
title: { label: '副标题', tip: 'subtitle | 副标题' },
setter: [
{
componentName: 'StringSetter',
isRequired: false,
initialValue: '',
},
{
componentName: 'SlotSetter',
isRequired: false,
initialValue: {
type: 'JSSlot',
value: [],
},
},
],
},
{
title: { label: '数据源', tip: 'dataSource | 数据源' },
name: '_dataSource',
setter: {
componentName: 'FunctionSetter',
},
// extraProps: {
// setValue: (target, value) => {
// const dataSource = getPropValueWithPath(target, '.dataSource');
// },
// },
},
{
title: { label: '数据展示', tip: 'dataSource | 数据展示' },
name: 'dataSource',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
descriptor: 'label',
config: {
items: [
{
title: { label: '名称', tip: 'label | 名称' },
name: 'label',
setter: {
componentName: 'StringSetter',
isRequired: true,
initialValue: '',
},
},
{
title: { label: '值', tip: 'value | 值' },
name: 'value',
supportVariable: false,
setter: {
componentName: 'MixedSetter',
props: {
setters: ['VariableSetter'],
},
},
},
{
title: { label: '列数', tip: 'span | 列数' },
name: 'span',
setter: {
componentName: 'SelectSetter',
props: {
options: [
{
label: '一行三列',
value: 8,
},
{
label: '一行四列',
value: 6,
},
{
label: '一行六列',
value: 3,
},
],
},
initialValue: undefined,
},
},
{
title: { label: '是否展示', tip: 'visible | 是否展示' },
name: 'visible',
setter: {
componentName: 'BoolSetter',
isRequired: false,
initialValue: true,
},
},
{
title: { label: '长文本收起', tip: 'hasMore | 超长文案收起' },
name: 'hasMore',
setter: {
componentName: 'BoolSetter',
isRequired: false,
initialValue: false,
},
},
{
title: { label: '自定义标签', tip: 'renderLabel | 自定义标签' },
name: 'renderLabel',
setter: {
componentName: 'FunctionSetter',
isRequired: false,
},
},
{
title: { label: '自定义值', tip: 'renderValue | 自定义值' },
name: 'renderValue',
setter: {
componentName: 'SlotSetter',
title: '自定义值',
initialValue: {
type: 'JSSlot',
params: ['value'],
value: [],
},
},
},
],
extraSetter: {
componentName: 'MixedSetter',
isRequired: false,
props: {},
},
},
},
},
},
initialValue: [],
},
},
initialValue: [],
},
extraProps: {
setValue: (target, value) => {
const isDeep = (arr) => arr.some((item) => item instanceof Array);
if (isDeep(value)) {
target.parent.setPropValue('dataSource', value);
return;
}
const arr = value
.map((v) => {
const _arr = [];
Object.values(v).forEach((item) => _arr.push(item));
return _arr;
})
.filter((v) => !!v.length);
target.parent.setPropValue('dataSource', arr);
},
},
// condition: (target) => !!getPropValueWithPath(target, '._dataSource'),
},
],
supports: {
style: true,
},
component: {
isContainer: true,
},
},
};
const snippets: IPublicTypeSnippetMore[] = [
{
title: '详情信息',
svgId: 'icon-xiangqingxinxi',
screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/basicInfo',
schema: {
componentName: 'YwDetailInfo',
props: {
title: '基本信息',
subtitle: '信息描述',
style: { width: '100%' },
dataSource: [
[
{
label: '平台类型',
value: '快手小店',
},
{
label: '平台店铺',
value: '李宣卓的小店',
},
{
label: '平台单号',
value: '4454353425436546546',
span: 8,
},
{
label: '支付时间',
value: '2022-06-09 23:55:55',
},
],
],
},
},
},
];
export default {
...YwDetailInfoMeta,
snippets,
};