Commit 3a4c77cd authored by GuanHua's avatar GuanHua

fix: 更换旧的装修依赖方法

parent 3d275839
......@@ -57,6 +57,7 @@
"@lingxi-disign/core": "^1.0.1",
"@lingxi-disign/react": "^1.0.3",
"@lingxi-disign/ui": "^1.0.1",
"@lingxi-disign/react-web": "^1.0.2",
"@types/crypto-js": "^4.0.1",
"@umijs/hooks": "^1.9.3",
"@umijs/preset-react": "1.x",
......
import React from 'react'
import { Button } from 'antd'
import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES, changeProps } from 'lingxi-editor-core';
import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES, changeProps } from '@lingxi-disign/core';
import styles from './index.less'
interface SettingPanelPropsType {
......@@ -12,6 +12,7 @@ interface SettingPanelPropsType {
}
const SettingPanel: React.FC<SettingPanelPropsType> = (props) => {
// eslint-disable-next-line @typescript-eslint/no-empty-function
const { children, footer, onOK = () => {}, onCancel, confirmLoading = false } = props
return (
......
......@@ -2,7 +2,6 @@ import React, { useCallback, useState } from 'react';
import { Modal, Button, message } from 'antd';
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
// import { useSelector, STATE_PROPS, ComponentConfigsType, PROPS_SETTING_TYPES } from 'lingxi-editor-core';
import { STATE_PROPS, PageConfigType, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
import { useSelector } from '@lingxi-disign/react';
......
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Affix: ComponentConfigTypes = {
propsConfig: {
offsetBottom: {
label: '达到偏移量后触发',
tip: '距离窗口底部达到指定偏移量后触发',
type: PROPS_TYPES.number,
},
offsetTop: {
label: '达到偏移量后触发',
tip: '距离窗口顶部达到指定偏移量后触发',
type: PROPS_TYPES.number,
},
target: {
label: '监听滚动事件的元素',
tip: '设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数',
type: PROPS_TYPES.function,
placeholder: '() => window',
},
onChange: {
label: '状态改变时触发',
tip: '固定状态改变时触发的回调函数',
type: PROPS_TYPES.function,
placeholder: '(affixed)=>{}',
},
},
};
export default Affix;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Alert: ComponentConfigTypes = {
propsConfig: {
message: {
label: '警告提示内容',
type: PROPS_TYPES.string,
rules: [
{
required: true,
message: '请输入提示信息',
},
],
},
showIcon: {
label: '是否显示辅助图标',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
type: {
label: '指定警告提示的样式',
tip: '指定警告提示的样式,有四种选择 success、info、warning、error',
type: PROPS_TYPES.enum,
enumData: ['success', 'info', 'warning', 'error'],
defaultValue: 'info',
},
},
};
export default Alert;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Anchor: ComponentConfigTypes = {
nodePropsConfig: {
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Anchor.Link'],
},
},
propsConfig: {
affix: {
label: '固定模式',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
bounds: {
label: '锚点区域边界',
type: PROPS_TYPES.number,
defaultValue: 5,
},
offsetBottom: {
label: '距底部距离',
tip: '距离窗口底部达到指定偏移量后触发',
type: PROPS_TYPES.number,
},
offsetTop: {
label: '距顶部距离',
tip: '距离窗口顶部达到指定偏移量后触发',
type: PROPS_TYPES.number,
},
onClick: {
label: '点击事件',
type: PROPS_TYPES.function,
placeholder: '(e, link) => {}',
},
},
};
const Link: ComponentConfigTypes = {
fatherNodesRule: ['Anchor', 'Anchor.Link.children'],
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Anchor.Link'],
},
},
propsConfig: {
href: {
label: '锚点链接',
type: PROPS_TYPES.string,
},
title: {
label: '文字内容',
type: PROPS_TYPES.string,
},
target: {
label: '该属性指定在何处显示链接的资源',
type: PROPS_TYPES.string,
},
},
};
export default {
Anchor,
'Anchor.Link': Link,
};
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const AutoComplete: ComponentConfigTypes = {
nodePropsConfig: {
dataSource: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['AutoComplete.Option', 'AutoComplete.OptGroup'],
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
dataSource: {
label: '自动完成的数据源',
type: [PROPS_TYPES.objectArray, PROPS_TYPES.stringArray],
},
dropdownMenuStyle: {
label: 'dropdown 菜单自定义样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
defaultValue: {
label: '指定默认选中的条目',
type: [PROPS_TYPES.stringArray, PROPS_TYPES.string],
},
filterOption: {
label: '输入筛选',
tip: '是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。',
type: PROPS_TYPES.function,
placeholder: '(inputValue, option) => {}',
},
getPopupContainer: {
label: '菜单渲染父节点',
tip: '菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。',
type: PROPS_TYPES.function,
placeholder: '(triggerNode) => document.body',
},
optionLabelProp: {
label: '选择框回填',
tip: '回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 value',
type: PROPS_TYPES.string,
},
placeholder: {
label: '输入框提示',
type: PROPS_TYPES.string,
},
value: {
label: '指定当前选中的条目',
type: [PROPS_TYPES.stringArray, PROPS_TYPES.string],
},
allowClear: {
label: '是否可清除',
tip: '支持清除, 单选模式有效',
type: PROPS_TYPES.boolean,
},
autoFocus: {
label: '是否获取焦点',
type: PROPS_TYPES.boolean,
},
backfill: {
label: '回填选中项',
tip: '使用键盘选择选项的时候把选中项回填到输入框中',
type: PROPS_TYPES.boolean,
},
defaultActiveFirstOption: {
label: '是否默认高亮第一个选项',
type: PROPS_TYPES.boolean,
},
onBlur: {
label: '失去焦点时的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onChange: {
label: '内容改变回调函数',
tip: '选中 option,或 input 的 value 变化时,调用此函数',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onFocus: {
label: '获得焦点时的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onSearch: {
label: '搜索补全项的回调',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onSelect: {
label: '被选中时回调',
tip: '被选中时调用,参数为选中项的 value 值',
type: PROPS_TYPES.function,
placeholder: '(value, option) => {}',
},
defaultOpen: {
label: '是否默认展开下拉菜单',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
open: {
label: '是否展开下拉菜单',
type: PROPS_TYPES.boolean,
},
onDropdownVisibleChange: {
label: '展开下拉菜单',
tip: '展开下拉菜单的回调',
type: PROPS_TYPES.function,
placeholder: '(open)=>{}',
},
},
};
const Option: ComponentConfigTypes = {
propsConfig: {
value: {
label: 'value',
type: PROPS_TYPES.string,
},
key: {
label: 'key',
type: PROPS_TYPES.string,
},
},
};
const OptGroup: ComponentConfigTypes = {
nodePropsConfig: {
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['AutoComplete.Option'],
},
},
propsConfig: {
label: {
label: 'label',
type: PROPS_TYPES.string,
},
key: {
label: 'key',
type: PROPS_TYPES.string,
},
},
};
export default {
AutoComplete,
'AutoComplete.Option': Option,
'AutoComplete.OptGroup': OptGroup,
};
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Avatar: ComponentConfigTypes = {
nodePropsConfig: {
icon: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
icon: {
label: '设置头像的图标类型',
tip: '设置头像的图标类型,参考 Icon 组件',
type: PROPS_TYPES.string,
},
shape: {
label: '指定头像的形状',
type: PROPS_TYPES.enum,
enumData: ['circle', 'square'],
defaultValue: 'circle',
},
src: {
label: '上传图像',
type: PROPS_TYPES.string,
},
alt: {
label: '替代文本',
tip: '图像未显示时的替代文本',
type: PROPS_TYPES.string,
},
size: {
label: '头像大小',
type: PROPS_TYPES.number,
},
onError: {
label: '图片加载失败的事件',
tip: '图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为',
type: PROPS_TYPES.function,
placeholder: '(boolean) => {}',
},
},
};
export default Avatar;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const BackTop: ComponentConfigTypes = {
propsConfig: {
target: {
label: '监听滚动事件元素',
tip: '设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数',
type: PROPS_TYPES.function,
placeholder: '(window)=> {}',
},
children: {
label: '回到顶部按钮',
type: PROPS_TYPES.string,
},
visibilityHeight: {
label: '滚动高度',
tip: ' 滚动高度达到此参数值才出现 BackTop',
type: PROPS_TYPES.number,
defaultValue: 400,
},
onClick: {
label: '点击回调',
tip: '点击按钮的回调函数',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
},
};
export default BackTop;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Badge: ComponentConfigTypes = {
nodePropsConfig: {
count: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
color: {
label: '自定义小圆点的颜色',
type: PROPS_TYPES.string,
isShowColor: true,
inputColProps: { span: 18 },
},
count: {
label: '展示的数字',
tip: '展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时隐藏',
type: PROPS_TYPES.number,
},
dot: {
label: '只展示小红点',
tip: '不展示数字,只有一个小红点',
type: PROPS_TYPES.boolean,
},
offset: {
label: '位置偏移',
tip: '设置状态点的位置偏移,格式为 [x, y]',
type: PROPS_TYPES.numberArray,
maxTagCount: 2,
},
overflowCount: {
label: '展示封顶的数字值',
type: PROPS_TYPES.number,
},
showZero: {
label: '数值为 0 时,是否展示',
tip: '当数值为 0 时,是否展示 Badge',
type: PROPS_TYPES.boolean,
},
status: {
label: '设置 Badge 为状态点',
tip: '设置 Badge 为状态点',
type: PROPS_TYPES.enum,
enumData: ['success', 'processing', 'default', 'error', 'warning'],
},
text: {
label: '状态点的文本',
tip: '在设置了 status 的前提下有效,设置状态点的文本',
type: PROPS_TYPES.string,
},
title: {
label: '鼠标悬浮文字',
tip: '设置鼠标放在状态点上时显示的文字 ',
type: PROPS_TYPES.string,
},
},
};
export default Badge;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Breadcrumb: ComponentConfigTypes = {
nodePropsConfig: {
separator: {
type: NODE_PROPS_TYPES.reactNode,
},
itemRender: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['route', 'params', 'routes', 'locations'],
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
params: {
label: '路由的参数',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
routes: {
label: 'router 的路由栈信息',
type: PROPS_TYPES.objectArray,
childPropsConfig: [{
location: {
label: 'location',
type: PROPS_TYPES.string,
},
breadcrumbName: {
label: 'breadcrumbName',
type: PROPS_TYPES.string,
},
children: {
label: 'children',
type: PROPS_TYPES.objectArray,
childPropsConfig: [{
location: {
label: 'location',
type: PROPS_TYPES.string,
},
breadcrumbName: {
label: 'breadcrumbName',
type: PROPS_TYPES.string,
},
}],
},
}],
},
},
};
const Item: ComponentConfigTypes = {
nodePropsConfig: {
overlay: {
label: '菜单',
tip: '哈哈哈',
type: NODE_PROPS_TYPES.functionReactNode,
params: [],
childNodesRule: ['Menu'],
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
href: {
label: '链接的目的地',
type: PROPS_TYPES.string,
},
onClick: {
label: '单击事件',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
},
};
const Separator: ComponentConfigTypes = {
propsConfig: {
children: {
label: '要显示的分隔符',
type: PROPS_TYPES.string,
},
},
};
export default {
Breadcrumb,
'Breadcrumb.Item': Item,
'Breadcrumb.Separator': Separator,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Button: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
disabled: {
label: '禁用',
tip: '按钮失效状态',
type: PROPS_TYPES.boolean,
},
ghost: {
label: '幽灵模式',
tip: '按钮背景透明',
type: PROPS_TYPES.boolean,
},
href: {
label: '跳转的地址',
tip: '点击跳转的地址,指定此属性 button 的行为和 a 链接一致',
type: PROPS_TYPES.string,
},
htmlType: {
label: 'button类型',
tip: '设置 button 原生的 type 值,可选值请参考 HTML 标准',
type: PROPS_TYPES.string,
},
icon: {
label: '图标类型',
tip: '设置按钮的图标类型',
type: PROPS_TYPES.string,
},
loading: {
label: '载入状态',
tip: '设置按钮载入状态',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
delay: {
label: '时间',
type: PROPS_TYPES.number,
},
},
},
shape: {
label: '按钮形状',
tip: '设置按钮形状,可选值为 circle、 round 或者不设',
type: PROPS_TYPES.enum,
enumData: ['default', 'circle', 'round'],
},
size: {
label: '按钮大小',
tip: '设置按钮大小',
type: PROPS_TYPES.enum,
enumData: ['default', 'small', 'large'],
},
target: {
label: '链接target',
tip: '相当于a链接的target属性, 设置跳转链接时有效',
type: PROPS_TYPES.enum,
enumData: ['_blank', '_self', '_father', '_top'],
},
type: {
label: '按钮类型',
tip: '设置按钮类型',
type: PROPS_TYPES.enum,
enumData: ['default', 'primary', 'dashed', 'danger', 'link'],
},
onClick: {
label: '点击事件',
tip: '点击事件回调',
type: PROPS_TYPES.function,
placeholder: '(event) => {}',
},
block: {
label: '自适应宽度',
tip: '将按钮宽度调整为其父宽度',
type: PROPS_TYPES.boolean,
},
},
};
export default Button;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Calendar: ComponentConfigTypes = {
propsConfig: {
dateCellRender: {
label: '日期追加内容',
tip: '自定义渲染日期单元格,返回内容会被追加到单元格',
type: PROPS_TYPES.function,
placeholder: '(date) => <div/>',
},
dateFullCellRender: {
label: '日期覆盖',
tip: '自定义渲染日期单元格,返回内容覆盖单元格',
type: PROPS_TYPES.function,
placeholder: '(date) => <div/>',
},
monthCellRender: {
label: '月追加内容',
tip: '自定义渲染月单元格,返回内容会被追加到单元格',
type: PROPS_TYPES.function,
placeholder: '(date) => <div/>',
},
monthFullCellRender: {
label: '月覆盖内容',
tip: '自定义渲染月单元格,返回内容覆盖单元格',
type: PROPS_TYPES.function,
placeholder: '(date) => <div/>',
},
disabledDate: {
label: '不可选择的日期',
type: PROPS_TYPES.function,
placeholder: '(currentDate) => true',
},
fullscreen: {
label: '是否全屏显示',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
mode: {
label: '初始模式',
tip: '初始模式,month/year',
type: PROPS_TYPES.enum,
enumData: ['month', 'year'],
defaultValue: 'month',
},
// value: {
// label: '展示日期',
// type: PROPS_TYPES.string,
// },
onPanelChange: {
label: '日期面板变化',
tip: '日期面板变化回调函数',
type: PROPS_TYPES.function,
placeholder: '(date, mode) => {}',
},
onSelect: {
label: '点击选择日期',
tip: '点击选择日期回调函数',
type: PROPS_TYPES.function,
placeholder: '(date) => {}',
},
onChange: {
label: '日期变化',
tip: '日期变化回调函数',
type: PROPS_TYPES.function,
placeholder: '(date) => {}',
},
},
};
export default Calendar;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Card: ComponentConfigTypes = {
nodePropsConfig: {
cover: {
type: NODE_PROPS_TYPES.reactNode,
},
extra: {
type: NODE_PROPS_TYPES.reactNode,
},
title: {
type: NODE_PROPS_TYPES.reactNode,
},
tabBarExtraContent: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
extra: {
label: '卡片右上角的操作区域\t',
tip: '卡片右上角的操作区域',
type: PROPS_TYPES.string,
},
actions: {
label: '卡片操作组',
tip: '卡片操作组,位置在卡片底部',
type: PROPS_TYPES.stringArray,
},
activeTabKey: {
label: '当前激活页签',
tip: '当前激活页签的 key ',
type: PROPS_TYPES.string,
},
headStyle: {
label: '标题样式',
tip: '自定义标题区域样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
bodyStyle: {
label: '内容样式',
tip: '内容区域自定义样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
bordered: {
label: '是否有边框',
type: PROPS_TYPES.boolean,
},
defaultActiveTabKey: {
label: '选中页签',
tip: '初始化选中页签的 key,如果没有设置 activeTabKey',
type: PROPS_TYPES.string,
},
hoverable: {
label: '鼠标移过时可浮起',
tip: '鼠标移过时可浮起',
type: PROPS_TYPES.boolean,
},
loading: {
label: '加载中效果',
tip: '当卡片内容还在加载中时,可以用 loading 展示一个占位',
type: PROPS_TYPES.boolean,
},
tabList: {
label: '页签标题列表',
tip: '页签标题列表',
type: PROPS_TYPES.objectArray,
childPropsConfig: [{
key: {
label: 'key',
type: PROPS_TYPES.string,
},
}],
},
title: {
label: '卡片标题',
type: PROPS_TYPES.string,
},
size: {
label: 'card 的尺寸',
type: PROPS_TYPES.enum,
enumData: ['default', 'small'],
},
type: {
label: '卡片类型,可设置为 inner 或 不设置',
type: PROPS_TYPES.string,
},
},
};
const Grid: ComponentConfigTypes = {
propsConfig: {
hoverable: {
label: '鼠标移过时可浮起',
tip: '鼠标移过时可浮起',
type: PROPS_TYPES.boolean,
},
},
};
const Meta: ComponentConfigTypes = {
nodePropsConfig: {
avatar: {
type: NODE_PROPS_TYPES.reactNode,
},
description: {
type: NODE_PROPS_TYPES.reactNode,
},
title: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
className: {
label: '容器类名',
type: PROPS_TYPES.string,
},
},
};
export default {
Card,
'Card.Grid': Grid,
'Card.Meta': Meta,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Carousel: ComponentConfigTypes = {
propsConfig: {
afterChange: {
label: '切换面板后的回调',
type: PROPS_TYPES.function,
placeholder: '(current) => {}',
},
autoplay: {
label: '自动切换',
type: PROPS_TYPES.boolean,
},
beforeChange: {
label: '切换面板前的回调',
type: PROPS_TYPES.function,
placeholder: '(from, to) => {}',
},
dots: {
label: '显示面板指示点',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
easing: {
label: '动画效果',
type: PROPS_TYPES.enum,
enumData: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
defaultValue: 'linear',
},
effect: {
label: '动画效果函数',
type: PROPS_TYPES.enum,
enumData: ['scrollx', 'fade'],
defaultValue: 'scrollx',
},
vertical: {
label: '垂直显示',
type: PROPS_TYPES.boolean,
},
},
};
export default Carousel;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Option = {
value: {
label: 'value',
type: PROPS_TYPES.string,
},
disabled: {
label: '禁用',
type: PROPS_TYPES.boolean,
},
children: {
label: 'children',
type: PROPS_TYPES.objectArray,
},
};
const Cascader: ComponentConfigTypes = {
nodePropsConfig: {
displayRender: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['label', 'selectedOptions'],
},
suffixIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
allowClear: {
label: '是否支持清除',
type: PROPS_TYPES.boolean,
},
autoFocus: {
label: '自动获取焦点',
type: PROPS_TYPES.boolean,
},
changeOnSelect: {
label: '是否变化',
tip: '当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示',
type: PROPS_TYPES.boolean,
},
defaultValue: {
label: '默认选中项',
type: PROPS_TYPES.stringArray,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
expandTrigger: {
label: '菜单展现style',
tip: '次级菜单的展开方式,可选 \'click\'\'hover\'',
type: PROPS_TYPES.enum,
enumData: ['click', 'hover'],
defaultValue: 'click',
},
fieldNames: {
label: 'options中参数',
tip: '自定义 options 中 label name children 的字段(注意,3.7.0 之前的版本为 filedNames)',
type: PROPS_TYPES.object,
childPropsConfig: {
label: {
label: '标签',
type: PROPS_TYPES.string,
unDelete: true,
},
name: {
label: '名称',
type: PROPS_TYPES.string,
unDelete: true,
},
children: {
label: '子名称',
type: PROPS_TYPES.string,
unDelete: true,
},
},
defaultValue: {
label: 'name',
value: 'code',
children: 'items',
},
},
getPopupContainer: {
label: '菜单渲染父节点',
tip:
'菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位',
type: PROPS_TYPES.function,
placeholder: '(triggerNode) => document.body',
},
loadData: {
label: '动态加载',
tip: '用于动态加载选项,无法与 showSearch 一起使用',
type: PROPS_TYPES.function,
placeholder: '(selectedOptions) => {}',
},
notFoundContent: {
label: '空数据内容',
tip: '当下拉列表为空时显示的内容',
type: PROPS_TYPES.string,
defaultValue: 'Not Found',
},
options: {
label: '可选数据源',
type: PROPS_TYPES.objectArray,
childPropsConfig: [Option],
},
placeholder: {
label: '输入框占位文本',
type: PROPS_TYPES.string,
},
popupClassName: {
label: '浮层类名',
tip: '自定义浮层类名',
type: PROPS_TYPES.string,
},
popupPlacement: {
label: '浮层位置',
tip: '浮层预设位置:bottomLeft bottomRight topLeft topRight',
type: PROPS_TYPES.enum,
enumData: ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'],
defaultValue: 'bottomLeft',
},
popupVisible: {
label: '控制浮层显隐',
type: PROPS_TYPES.boolean,
},
showSearch: {
label: '显示搜索框',
tip: '在选择框中显示搜索框',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
filter: {
label: 'filter',
tip: '接收 inputValue location 两个参数,当 location 符合筛选条件时,应返回 true,反之则返回 false。',
type: PROPS_TYPES.function,
placeholder: '(inputValue, location)=>true',
},
limit: {
label: '搜索结果展示数量',
type: [PROPS_TYPES.boolean, PROPS_TYPES.number],
},
matchInputWidth: {
label: '搜索结果列表是否与输入框同宽',
type: PROPS_TYPES.boolean,
},
render: {
label: '用于渲染 filter 后的选项',
type: PROPS_TYPES.function,
placeholder: '(inputValue, location)=><div/>',
},
sort: {
label: '用于排序 filter 后的选项',
type: PROPS_TYPES.function,
placeholder: '(a, b, inputValue)=>{}',
},
},
},
size: {
label: '输入框大小',
type: PROPS_TYPES.enum,
tip: '输入框大小,可选 large default small',
enumData: ['large', 'default', 'small'],
defaultValue: 'default',
},
value: {
label: '指定选中项',
type: PROPS_TYPES.stringArray,
},
onChange: {
label: '选择完成后的回调',
type: PROPS_TYPES.function,
placeholder: '(value, selectedOptions) => {}',
},
onPopupVisibleChange: {
label: '显示/隐藏浮层的回调',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
},
};
export default Cascader;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Checkbox: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
autoFocus: {
label: '是否自动获取焦点',
type: PROPS_TYPES.boolean,
},
checked: {
label: '当前是否选中',
type: PROPS_TYPES.boolean,
},
defaultChecked: {
label: '初始被选中状态',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
indeterminate: {
label: '模糊状态',
tip: '设置 indeterminate 状态,只负责样式控制',
type: PROPS_TYPES.boolean,
},
onChange: {
label: '变化时回调',
tip: '变化时回调函数',
type: PROPS_TYPES.function,
placeholder: '(e) => {}',
},
},
};
const Group: ComponentConfigTypes = {
propsConfig: {
defaultValue: {
label: '默认选中的选项',
type: PROPS_TYPES.stringArray,
},
disabled: {
label: '整组失效',
type: PROPS_TYPES.boolean,
},
name: {
label: 'name',
tip: 'CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性',
type: PROPS_TYPES.string,
},
options: {
label: '指定可选项',
type: [PROPS_TYPES.stringArray, PROPS_TYPES.objectArray],
childPropsConfig: [{
label: {
label: 'label',
type: PROPS_TYPES.string,
},
value: {
label: 'value',
type: PROPS_TYPES.string,
},
disabled: {
label: '禁用',
type: PROPS_TYPES.boolean,
},
}],
},
value: {
label: '指定选中的选项',
type: PROPS_TYPES.stringArray,
},
onChange: {
label: '变化时回调函数',
type: PROPS_TYPES.function,
placeholder: '(checkedValue)=>{}',
},
},
};
export default {
Checkbox,
'Checkbox.Group': Group,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const DEFAULT_CONFIG = {
span: {
label: '占位',
type: PROPS_TYPES.number,
},
offset: {
label: '偏移量',
type: PROPS_TYPES.number,
},
};
const Col: ComponentConfigTypes = {
propsConfig: {
offset: {
label: '间隔格数',
tip: '栅格左侧的间隔格数,间隔内不可以有栅格',
type: PROPS_TYPES.number,
},
order: {
label: '栅格顺序',
tip: '栅格顺序,flex 布局模式下有效',
type: PROPS_TYPES.number,
},
pull: {
label: '左移动格数',
tip: '栅格向左移动格数',
type: PROPS_TYPES.number,
},
push: {
label: '右移动格数',
tip: '栅格向右移动格数',
type: PROPS_TYPES.number,
},
span: {
label: '占位格数',
tip: '栅格占位格数,为 0 时相当于 display: none',
type: PROPS_TYPES.number,
},
xs: {
label: 'xs',
tip: '<576px 响应式栅格,可为栅格数或一个包含其他属性的对象',
type: [PROPS_TYPES.number, PROPS_TYPES.object],
childPropsConfig: {
...DEFAULT_CONFIG,
},
},
sm: {
label: 'sm',
tip: '<576px 响应式栅格,可为栅格数或一个包含其他属性的对象',
type: [PROPS_TYPES.number, PROPS_TYPES.object],
childPropsConfig: {
...DEFAULT_CONFIG,
},
},
md: {
label: 'md',
tip: '≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象',
type: [PROPS_TYPES.number, PROPS_TYPES.object],
childPropsConfig: {
...DEFAULT_CONFIG,
},
},
lg: {
label: 'lg',
tip: '≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象',
type: [PROPS_TYPES.number, PROPS_TYPES.object],
childPropsConfig: {
...DEFAULT_CONFIG,
},
},
xl: {
label: 'xl',
tip: '≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象',
type: [PROPS_TYPES.number, PROPS_TYPES.object],
childPropsConfig: {
...DEFAULT_CONFIG,
},
},
xxl: {
label: 'xxl',
tip: '≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象',
type: [PROPS_TYPES.number, PROPS_TYPES.object],
childPropsConfig: {
...DEFAULT_CONFIG,
},
},
},
};
export default Col;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Collapse: ComponentConfigTypes = {
propsConfig: {
activeKey: {
label: '当前激活 tab 面板的 key',
type: PROPS_TYPES.string,
},
defaultActiveKey: {
label: '初始化选中面板的 key',
type: PROPS_TYPES.string,
},
onChange: {
label: '切换面板的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
},
};
const Panel: ComponentConfigTypes = {
fatherNodesRule: ['Collapse'],
nodePropsConfig: {
header: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
disabled: {
label: '禁用',
tip: '禁用后的面板展开与否将无法通过用户交互改变',
type: PROPS_TYPES.boolean,
},
forceRender: {
label: '隐藏时是否渲染',
tip: '被隐藏时是否渲染 DOM 结构',
type: PROPS_TYPES.boolean,
},
key: {
label: '对应 activeKey',
type: PROPS_TYPES.string,
},
header: {
label: '面板头内容',
type: PROPS_TYPES.string,
},
},
};
export default {
Collapse,
'Collapse.Panel': Panel,
};
import { ComponentConfigTypes, NODE_PROPS_TYPES, NodePropsConfigType, PROPS_TYPES, PropsConfigType } from 'lingxi-editor-core';
const commonNodePropsConfig: NodePropsConfigType = {
dateRender: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['currentDate', 'today'],
},
placeholder: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['DatePicker.RangePicker'],
},
suffixIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
};
const commonPropsConfig: PropsConfigType = {
allowClear: {
label: '是否显示清除按钮',
type: PROPS_TYPES.boolean,
},
autoFocus: {
label: '自动获取焦点',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
disabledDate: {
label: '不可选择的日期',
type: PROPS_TYPES.function,
placeholder: '(currentDate) =>true ',
},
dropdownClassName: {
label: '额外的弹出日历 className',
type: PROPS_TYPES.string,
},
getCalendarContainer: {
label: '定义浮层的容器',
tip: '定义浮层的容器,默认为 body 上新建 div',
type: PROPS_TYPES.function,
placeholder: '(trigger)=>{}',
},
locale: {
label: '国际化配置',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
mode: {
label: '日期面板的状态',
type: PROPS_TYPES.enum,
enumData: ['time', 'date', 'month', 'year'],
defaultValue: 'date',
},
open: {
label: '控制弹层是否展开',
type: PROPS_TYPES.boolean,
},
placeholder: {
label: '输入框提示文字',
type: PROPS_TYPES.string,
},
popupStyle: {
label: '额外的弹出日历样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
size: {
label: '输入框大小',
type: PROPS_TYPES.enum,
enumData: ['large', 'small', 'default'],
},
onPanelChange: {
label: '日期面板变化时的回调',
type: PROPS_TYPES.function,
placeholder: '(value, mode) => {}',
},
onOpenChange: {
label: '弹出日历和关闭日历的回调',
type: PROPS_TYPES.function,
placeholder: '(status)=>{}',
},
};
const DatePicker: ComponentConfigTypes = {
nodePropsConfig: {
renderExtraFooter: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['mode'],
}, ...commonNodePropsConfig,
},
propsConfig: {
...commonPropsConfig,
disabledTime: {
label: '不可选择的时间',
type: PROPS_TYPES.function,
placeholder: '(date) => {}',
},
format: {
type: [PROPS_TYPES.string, PROPS_TYPES.stringArray],
label: '展示的日期格式',
placeholder: '默认 YYYY - MM - DD',
},
showTime: {
label: '增加时间选择功能',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {},
},
showToday: {
label: '是否展示“今天”按钮',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
// value: {
// type: PROPS_TYPES.string,
// label: '日期',
// },
onChange: {
type: PROPS_TYPES.function,
label: '值改变时的回调',
placeholder: '(date, dateString) => {}',
},
onOk: {
label: '点击确定按钮的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
},
};
const MonthPicker: ComponentConfigTypes = {
nodePropsConfig: {
monthCellContentRender: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['date', 'locale'],
},
renderExtraFooter: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['mode'],
}, ...commonNodePropsConfig,
},
propsConfig: {
...commonPropsConfig,
format: {
type: PROPS_TYPES.string,
label: '展示的日期格式',
placeholder: '默认 YYYY - MM - DD',
},
onChange: {
type: PROPS_TYPES.function,
label: '值改变时的回调',
placeholder: '(date, dateString) => {}',
},
},
};
const WeekPicker: ComponentConfigTypes = {
nodePropsConfig: {
renderExtraFooter: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['mode'],
}, ...commonNodePropsConfig,
},
propsConfig: {
...commonPropsConfig,
format: {
type: PROPS_TYPES.string,
label: '展示的日期格式',
placeholder: '默认 YYYY - MM - DD',
},
onChange: {
type: PROPS_TYPES.function,
label: '值改变时的回调',
placeholder: '(date, dateString) => {}',
},
},
};
const RangePicker: ComponentConfigTypes = {
nodePropsConfig: {
renderExtraFooter: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['mode'],
}, ...commonNodePropsConfig,
},
propsConfig: {
...commonPropsConfig,
disabledTime: {
label: '不可选择的时间',
type: PROPS_TYPES.function,
placeholder: '(date) => {}',
},
format: {
type: PROPS_TYPES.string,
label: '展示的日期格式',
placeholder: '默认 YYYY - MM - DD',
},
ranges: {
label: '预设时间范围快捷选择',
type: [PROPS_TYPES.object, PROPS_TYPES.function],
childPropsConfig: {},
},
separator: {
label: '设置分隔符',
type: PROPS_TYPES.string,
},
showTime: {
label: '增加时间选择功能',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {},
},
// value: {
// type: PROPS_TYPES.string,
// label: '日期',
// }
onCalendarChange: {
label: '待选日期发生变化的回调',
type: PROPS_TYPES.function,
placeholder: '(dates, dateStrings)=>{}',
},
onChange: {
type: PROPS_TYPES.function,
label: '值改变时的回调',
placeholder: '(date, dateString) => {}',
},
onOk: {
label: '点击确定按钮的回调',
type: PROPS_TYPES.function,
placeholder: '(dates) => {}',
},
},
};
export default {
DatePicker,
'DatePicker.MonthPicker': MonthPicker,
'DatePicker.WeekPicker': WeekPicker,
'DatePicker.RangePicker': RangePicker,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Divider: ComponentConfigTypes = {
propsConfig: {
dashed: {
label: '是否虚线',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
children: {
label: '分割线标题',
type: PROPS_TYPES.string,
},
orientation: {
label: '分割线标题位置',
type: PROPS_TYPES.enum,
enumData: ['left', 'right', 'center'],
defaultValue: '',
},
type: {
label: '显示类型',
tip: '水平还是垂直类型',
type: PROPS_TYPES.enum,
enumData: ['horizontal', 'vertical'],
defaultValue: 'horizontal',
},
},
};
export default Divider;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Drawer: ComponentConfigTypes = {
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
mirrorModalField: {
displayPropName: 'visible',
mounted: {
propName: 'getContainer',
type: PROPS_TYPES.function,
},
style: { position: 'absolute' },
},
propsConfig: {
closable: {
label: '是否显示按钮',
tip: '是否显示右上角的关闭按钮',
type: PROPS_TYPES.boolean,
},
destroyOnClose: {
label: '销毁子元素',
tip: '关闭时销毁 Drawer 里的子元素',
type: PROPS_TYPES.boolean,
},
maskClosable: {
label: '是否允许关闭',
tip: '点击蒙层是否允许关闭',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
mask: {
label: '是否展示遮罩',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
maskStyle: {
label: '遮罩样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
style: {
label: 'Drawer 的样式',
tip: '可用于设置 Drawer 的样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
title: {
label: '标题',
type: PROPS_TYPES.string,
},
visible: {
label: '是否可见',
tip: 'Drawer 是否可见',
type: PROPS_TYPES.boolean,
},
width: {
label: '宽度',
type: PROPS_TYPES.string,
},
height: {
label: '高度',
tip: '高度, 在 抽屉的方向 为 top 或 bottom 时使用',
type: PROPS_TYPES.string,
},
zIndex: {
label: 'z-index',
tip: '设置 Drawer 的 z-index',
type: PROPS_TYPES.number,
},
placement: {
label: '抽屉的方向',
type: PROPS_TYPES.enum,
enumData: ['top', 'right', 'bottom', 'left'],
defaultValue: 'left',
},
onClose: {
label: 'onClose',
tip: '点击遮罩层或右上角叉或取消按钮的回调',
type: PROPS_TYPES.function,
placeholder: '(e) => {}',
},
},
};
export default Drawer;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Dropdown: ComponentConfigTypes = {
nodePropsConfig: {
overlay: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Menu'],
isOnlyNode: true,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
isOnlyNode: true,
isRequired: true,
},
},
propsConfig: {
disabled: {
label: '菜单是否禁用',
type: PROPS_TYPES.boolean,
},
getPopupContainer: {
label: '菜单渲染父节点',
tip: '菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位',
type: PROPS_TYPES.function,
placeholder: '(triggerNode) => document.body',
},
overlayClassName: {
label: '下拉根元素的类名称',
type: PROPS_TYPES.string,
},
overlayStyle: {
label: '下拉根元素的样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
placement: {
label: '菜单弹出位置',
type: PROPS_TYPES.enum,
enumData: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
},
trigger: {
label: '触发下拉的行为',
tip: '触发下拉的行为, 移动端不支持 hover,click|hover|contextMenu',
type: PROPS_TYPES.stringArray,
},
visible: {
label: '菜单是否显示',
type: PROPS_TYPES.boolean,
},
onVisibleChange: {
label: '菜单显示状态改变时调用',
type: PROPS_TYPES.function,
placeholder: '(visible)=>{}',
},
},
};
const Button: ComponentConfigTypes = {
nodePropsConfig: {
overlay: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Menu'],
},
icon: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
disabled: {
label: '菜单是否禁用',
type: PROPS_TYPES.boolean,
},
size: {
label: '按钮大小',
type: PROPS_TYPES.enum,
enumData: ['default', 'large', 'small'],
},
type: {
label: '按钮类型',
type: PROPS_TYPES.enum,
enumData: ['default', 'primary', 'dashed', 'danger', 'link'],
},
placement: {
label: '菜单弹出位置',
type: PROPS_TYPES.enum,
enumData: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
},
trigger: {
label: '触发下拉的行为',
tip: '触发下拉的行为, 移动端不支持 hover,click|hover|contextMenu',
type: PROPS_TYPES.stringArray,
},
visible: {
label: '菜单是否显示',
type: PROPS_TYPES.boolean,
},
onClick: {
label: '点击左侧按钮的回调',
type: PROPS_TYPES.function,
},
onVisibleChange: {
label: '菜单显示状态改变时调用',
type: PROPS_TYPES.function,
placeholder: '(visible)=>{}',
},
},
};
export default {
Dropdown,
'Dropdown.Button': Button,
};
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Form: ComponentConfigTypes = {
propsConfig: {
hideRequiredMark: {
label: '隐藏所有表单项的必选标记',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
labelAlign: {
label: 'label 标签的文本对齐方式',
type: PROPS_TYPES.enum,
enumData: ['left', 'right'],
},
labelCol: {
label: 'label 标签布局',
tip: '(3.14.0 新增,之前的版本只能设置到 FormItem 上。)label 标签布局,同 <Col> 组件,设置 span offset 值,如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
wrapperCol: {
label: '输入控件设置布局样式',
tip: '3.14.0 新增,之前的版本只能设置到 FormItem 上。)需要为输入控件设置布局样式时,使用该属性,用法同 labelCol',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
colon: {
label: '是否实现冒号',
tip: '配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效)',
type: PROPS_TYPES.boolean,
},
layout: {
label: '表单布局',
type: PROPS_TYPES.enum,
enumData: ['horizontal', 'vertical', 'inline'],
defaultValue: 'horizontal',
},
onSubmit: {
label: '数据验证成功后回调事件,需要配合Button(type: submit)使用',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
},
};
const Item: ComponentConfigTypes = {
nodePropsConfig: {
extra: {
type: NODE_PROPS_TYPES.reactNode,
},
help: {
type: NODE_PROPS_TYPES.reactNode,
},
label: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
isOnlyNode: true,
},
},
propsConfig: {
colon: {
label: '是否显示 label 后面的冒号',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
extra: {
label: '额外的提示信息',
tip: '额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。',
type: PROPS_TYPES.string,
},
help: {
label: '提示信息',
tip: '提示信息,如不设置,则会根据校验规则自动生成',
type: PROPS_TYPES.string,
},
hasFeedback: {
label: '展示校验状态图标',
tip: '配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用',
type: PROPS_TYPES.boolean,
},
htmlFor: {
label: '设置子元素 label htmlFor 属性',
type: PROPS_TYPES.string,
},
label: {
label: 'label 标签的文本',
type: PROPS_TYPES.string,
},
labelCol: {
label: 'label 标签布局,',
tip: 'label标签布局同 <Col> 组件设置span offset值,如{span: 3, offset: 12} 或 sm:{span: 3, offset: 12}。在 3.14.0 之后,你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时,以 FormItem 为准。',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
wrapperCol: {
label: '输入控件设置布局样式',
tip: '需要为输入控件设置布局样式时,使用该属性,用法同 labelCol。在 3.14.0 之后,你可以通过 Form 的 wrapperCol 进行统一设置。当和 Form 同时设置时,以 FormItem 为准。',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
labelAlign: {
label: 'label 标签的文本对齐方式',
type: PROPS_TYPES.enum,
enumData: ['left', 'right'],
},
required: {
label: '是否必填',
tip: '是否必填,如不设置,则会根据校验规则自动生成',
type: PROPS_TYPES.boolean,
},
validateStatus: {
label: '校验状态',
type: PROPS_TYPES.enum,
enumData: ['success', 'warning', 'error', 'validating'],
},
},
};
export default {
Form,
'Form.Item': Item,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Icon: ComponentConfigTypes = {
propsConfig: {
type: {
label: '图标类型',
tip: '图标类型。遵循图标的命名规范',
type: PROPS_TYPES.string,
},
style: {
label: '图标样式',
tip: '设置图标的样式,例如 fontSize 和 color',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
theme: {
label: '图标风格',
tip: '图标主题风格',
type: PROPS_TYPES.enum,
enumData: ['filled', 'outlined', 'twoTone'],
},
spin: {
label: '旋转动画',
tip: '是否有旋转动画',
type: PROPS_TYPES.boolean,
},
rotate: {
label: '图标旋转角度',
tip: '图标旋转角度(3.13.0 后新增,IE9 无效)',
type: PROPS_TYPES.number,
},
twoToneColor: {
label: '双色图标颜色',
tip: '仅适用双色图标。设置双色图标的主要颜色',
type: PROPS_TYPES.string,
isShowColor: true,
},
},
};
export default Icon;
import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'lingxi-editor-core';
const Input: ComponentConfigTypes = {
nodePropsConfig: {
addonAfter: {
type: NODE_PROPS_TYPES.reactNode,
label: '后置标签',
},
addonBefore: {
type: NODE_PROPS_TYPES.reactNode,
label: '前置标签',
},
prefix: {
type: NODE_PROPS_TYPES.reactNode,
label: '前缀图标',
},
suffix: {
type: NODE_PROPS_TYPES.reactNode,
label: '后缀图标',
},
},
propsConfig: {
addonAfter: {
label: '带标签的 input,设置后置标签',
type: PROPS_TYPES.string,
},
addonBefore: {
label: '带标签的 input,设置前置标签',
type: PROPS_TYPES.string,
},
allowClear: {
label: '是否显示清除按钮',
type: PROPS_TYPES.boolean,
},
prefix: {
label: '带有前缀图标的 input',
type: PROPS_TYPES.string,
},
suffix: {
label: '带有后缀图标的 input',
type: PROPS_TYPES.string,
},
placeholder: {
label: 'placeholder',
type: PROPS_TYPES.string,
},
defaultValue: {
label: '默认内容',
type: PROPS_TYPES.string,
},
disabled: {
label: '禁用状态',
tip: '是否禁用状态,默认为 false',
type: PROPS_TYPES.boolean,
},
id: {
label: 'id',
tip: '输入框的 id',
type: PROPS_TYPES.string,
},
maxLength: {
label: '最大长度',
type: PROPS_TYPES.number,
},
size: {
label: '控件大小',
tip: '控件大小。注:标准表单内的输入框大小限制为 large。可选 large default small',
type: PROPS_TYPES.enum,
enumData: ['large', 'default', 'small'],
defaultValue: 'default',
},
type: {
label: '声明 input 类型',
tip: '声明 input 类型,同原生 input 标签的 type 属性',
type: PROPS_TYPES.enum,
enumData: [
'button',
'checkbox',
'file',
'hidden',
'image',
'password',
'radio',
'reset',
'submit',
'text',
],
defaultValue: 'text',
},
value: {
label: '输入框内容',
type: PROPS_TYPES.string,
},
onPressEnter: {
label: '按下回车回调',
type: PROPS_TYPES.function,
placeholder: '(e) => {}',
},
onChange: {
label: '输入框内容变化时的回调',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
},
};
const Group: ComponentConfigTypes = {
nodePropsConfig: {
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Input'],
},
},
propsConfig: {
compact: {
label: '是否用紧凑模式',
type: PROPS_TYPES.boolean,
},
size: {
label: '大小',
tip: 'Input.Group 中所有的 Input 的大小,可选 large default small',
type: PROPS_TYPES.enum,
enumData: ['large', 'default', 'small'],
},
},
};
const Search: ComponentConfigTypes = {
nodePropsConfig: {
enterButton: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
enterButton: {
label: '是否有确认按钮',
tip: '是否有确认按钮,可设为按钮文字。该属性会与 addon 冲突',
type: PROPS_TYPES.boolean,
},
onSearch: {
label: '点击搜索或按下回车键时的回调',
type: PROPS_TYPES.function,
placeholder: '(value, event)=>{}',
},
loading: {
label: '搜索 loading',
type: PROPS_TYPES.boolean,
},
...Input.propsConfig,
},
};
const TextArea: ComponentConfigTypes = {
propsConfig: {
autoSize: {
label: '自适应内容高度',
tip: '自适应内容高度,可设置为 true|false 或对象:{ minRows: 2, maxRows: 6 }。3.24.0 后 autosize 被废弃,请使用 autoSize。',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
},
defaultValue: {
label: '默认内容',
type: PROPS_TYPES.string,
},
value: {
label: '输入框内容',
type: PROPS_TYPES.string,
},
onPressEnter: {
label: '按下回车回调',
type: PROPS_TYPES.function,
placeholder: '(e) => {}',
},
allowClear: {
label: '是否显示清除按钮',
type: PROPS_TYPES.boolean,
},
},
};
const Password: ComponentConfigTypes = {
propsConfig: {
visibilityToggle: {
label: '是否显示切换按钮',
type: PROPS_TYPES.boolean,
},
...Input.propsConfig,
},
};
export default {
Input,
'Input.Search': Search,
'Input.TextArea': TextArea,
'Input.Group': Group,
'Input.Password': Password,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const InputNumber: ComponentConfigTypes = {
propsConfig: {
autoFocus: {
label: '是否自动获取焦点',
type: PROPS_TYPES.boolean,
},
defaultValue: {
label: '初始值',
type: PROPS_TYPES.number,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
formatter: {
label: '展示值格式',
tip: '指定输入框展示值的格式',
type: PROPS_TYPES.function,
placeholder: '(value) => ""',
},
max: {
label: '最大值',
type: PROPS_TYPES.number,
},
min: {
label: '最小值',
type: PROPS_TYPES.number,
},
parser: {
label: '指定从 formatter 里转换回数字的方式',
tip: '指定从 formatter 里转换回数字的方式,和 formatter 搭配使用',
type: PROPS_TYPES.function,
placeholder: '(string)=> Number',
},
precision: {
label: '数值精度',
type: PROPS_TYPES.number,
},
decimalSeparator: {
label: '小数点',
type: PROPS_TYPES.string,
},
size: {
label: '输入框大小',
type: PROPS_TYPES.enum,
enumData: ['large', 'default', 'small'],
defaultValue: 'default',
},
step: {
label: '步差',
tip: '每次改变步数,可以为小数',
type: [PROPS_TYPES.string, PROPS_TYPES.number],
defaultValue: '1',
},
value: {
label: '当前值',
type: PROPS_TYPES.number,
},
onChange: {
label: '变化回调',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onPressEnter: {
label: '按下回车的回调',
type: PROPS_TYPES.function,
placeholder: `(e)=>{}`,
},
},
};
export default InputNumber;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Layout: ComponentConfigTypes = {
propsConfig: {
hasSider: {
label: '子元素是否有sider',
tip: '表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动',
type: PROPS_TYPES.boolean,
},
className: {
label: '类名',
type: PROPS_TYPES.stringArray,
},
},
};
const Header: ComponentConfigTypes = {
propsConfig: {
className: {
label: '样式类名',
type: PROPS_TYPES.string,
},
},
};
const Footer: ComponentConfigTypes = {
propsConfig: {
className: {
label: '样式类名',
type: PROPS_TYPES.string,
},
},
};
const Sider: ComponentConfigTypes = {
nodePropsConfig: {
trigger: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
trigger: {
label: 'trigger',
tip: '自定义 trigger,设置为 null 时隐藏 trigger',
type: PROPS_TYPES.string,
},
breakpoint: {
label: '断点触发',
tip: '触发响应式布局的断点',
type: PROPS_TYPES.enum,
enumData: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
},
collapsed: {
label: '当前收起状态',
type: PROPS_TYPES.boolean,
},
collapsedWidth: {
label: '收缩宽度',
tip: '收缩宽度,设置为 0 会出现特殊 trigger',
type: PROPS_TYPES.number,
},
collapsible: {
label: '是否可收起',
type: PROPS_TYPES.boolean,
},
defaultCollapsed: {
label: '是否默认收起',
type: PROPS_TYPES.boolean,
},
reverseArrow: {
label: '翻转折叠提示箭头的方向',
tip: '翻转折叠提示箭头的方向,当 Sider 在右边时可以使用',
type: PROPS_TYPES.boolean,
},
theme: {
label: '主题颜色',
type: PROPS_TYPES.enum,
enumData: ['light', 'dark'],
},
width: {
label: '宽度',
type: PROPS_TYPES.number,
hasUnit: true,
},
onCollapse: {
label: '收起时的回调函数',
tip: '展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发',
type: PROPS_TYPES.function,
placeholder: '(collapsed, type) => {}',
},
onBreakpoint: {
label: '触发响应式布局断点时的回调',
type: PROPS_TYPES.function,
placeholder: '(broken) => {}',
},
zeroWidthTriggerStyle: {
label: 'trigger 的样式',
tip: '指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
},
};
const Content: ComponentConfigTypes = {
propsConfig: {
className: {
label: '样式类名',
type: PROPS_TYPES.string,
},
},
};
export default {
Layout,
'Layout.Header': Header,
'Layout.Footer': Footer,
'Layout.Content': Content,
'Layout.Sider': Sider,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const List: ComponentConfigTypes = {
nodePropsConfig: {
header: {
type: NODE_PROPS_TYPES.reactNode,
label: '头部',
},
footer: {
type: NODE_PROPS_TYPES.reactNode,
label: '底部',
},
loadMore: {
type: NODE_PROPS_TYPES.reactNode,
},
renderItem: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['item'],
isOnlyNode: true,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
dataSource: {
label: '数据源',
type: PROPS_TYPES.objectArray,
childPropsConfig: [{}],
},
size: {
label: '控件大小',
tip: '控件大小。注:标准表单内的输入框大小限制为 large。可选 large default small',
type: PROPS_TYPES.enum,
enumData: ['large', 'default', 'small'],
defaultValue: 'default',
},
footer: {
label: '列表底部',
type: PROPS_TYPES.string,
},
header: {
label: '列表头部',
type: PROPS_TYPES.string,
},
bordered: {
label: '是否展示边框',
type: PROPS_TYPES.boolean,
},
grid: {
label: '列表栅格配置',
type: PROPS_TYPES.object,
},
itemLayout: {
label: '设置布局',
type: PROPS_TYPES.enum,
enumData: ['vertical', 'horizontal'],
defaultValue: 'horizontal',
},
loadMore: {
label: '加载更多文案',
type: PROPS_TYPES.string,
},
locale: {
label: '默认文案设置',
type: PROPS_TYPES.object,
defaultValue: {
emptyText: '暂无数据',
},
},
pagination: {
label: '是否展示分页',
type: PROPS_TYPES.boolean,
},
split: {
label: '是否展示分割线',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
},
};
const Item: ComponentConfigTypes = {
nodePropsConfig: {
actions: {
type: NODE_PROPS_TYPES.reactNode,
},
extra: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
children: {
label: 'item内容',
type: PROPS_TYPES.string,
},
extra: {
label: '额外内容',
type: PROPS_TYPES.string,
},
},
};
const Meta: ComponentConfigTypes = {
nodePropsConfig: {
avatar: {
type: NODE_PROPS_TYPES.reactNode,
},
description: {
type: NODE_PROPS_TYPES.reactNode,
},
title: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
description: {
label: '列表元素的描述内容',
type: PROPS_TYPES.string,
},
title: {
label: '列表元素的标题',
type: PROPS_TYPES.string,
},
},
};
export default {
List,
'List.Item': Item,
'List.Item.Meta': Meta,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Menu: ComponentConfigTypes = {
nodePropsConfig: {
overflowedIndicator: {
type: NODE_PROPS_TYPES.reactNode,
isOnlyNode: true,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Menu.ItemGroup', 'Menu.Item', 'Menu.SubMenu', 'Menu.Divider'],
},
},
propsConfig: {
defaultOpenKeys: {
label: '初始展开的SubMenu',
tip: '初始展开的 SubMenu 菜单项 key 数组',
type: PROPS_TYPES.stringArray,
},
defaultSelectedKeys: {
label: '初始选中的菜单项 key 数组',
type: PROPS_TYPES.stringArray,
},
forceSubMenuRender: {
label: '在子菜单展示之前就渲染进 DOM',
type: PROPS_TYPES.boolean,
},
inlineCollapsed: {
label: 'inline 时菜单是否收起状态',
type: PROPS_TYPES.boolean,
},
inlineIndent: {
label: 'inline 模式的菜单缩进宽度',
type: PROPS_TYPES.number,
},
mode: {
label: '菜单类型',
tip: '现在支持垂直、水平、和内嵌模式三种',
type: PROPS_TYPES.enum,
enumData: ['vertical', 'vertical-right', 'horizontal', 'inline'],
},
multiple: {
label: '是否允许多选',
type: PROPS_TYPES.boolean,
},
openKeys: {
label: '当前展开的SubMenu菜单项key数组',
type: PROPS_TYPES.stringArray,
},
selectable: {
label: '是否允许选中',
type: PROPS_TYPES.boolean,
},
selectedKeys: {
label: '当前选中的菜单项 key 数组',
type: PROPS_TYPES.stringArray,
},
subMenuCloseDelay: {
label: '鼠标离开子菜单后关闭延时',
tip: '鼠标离开子菜单后关闭延时,单位:秒',
type: PROPS_TYPES.number,
},
subMenuOpenDelay: {
label: '鼠标进入子菜单后开启延时',
tip: '用户鼠标进入子菜单后开启延时,单位:秒',
type: PROPS_TYPES.number,
},
theme: {
label: '主题颜色',
type: PROPS_TYPES.enum,
enumData: ['light', 'dark'],
},
onClick: {
label: '点击 MenuItem 调用此函数',
type: PROPS_TYPES.function,
placeholder: '({ item, key, keyLocation }) => {}',
},
onDeselect: {
label: '取消选中时调用,仅在 multiple 生效',
type: PROPS_TYPES.function,
placeholder: '({ item, key, selectedKeys }) => {}',
},
onOpenChange: {
label: 'SubMenu 展开/关闭的回调',
type: PROPS_TYPES.function,
placeholder: '(openKeys) => {}',
},
onSelect: {
label: '被选中时调用',
type: PROPS_TYPES.function,
placeholder: '({ item, key, selectedKeys }) => {}',
},
},
};
const Divider: ComponentConfigTypes = {
propsConfig: {},
};
const ItemGroup: ComponentConfigTypes = {
fatherNodesRule: ['Menu.children', 'Menu.ItemGroup.children', 'Item', 'Menu.SubMenu.children'],
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Menu.Item'],
},
},
propsConfig: {
title: {
label: '标题内容',
type: PROPS_TYPES.string,
},
},
};
const SubMenu: ComponentConfigTypes = {
fatherNodesRule: ['Menu.children', 'Menu.ItemGroup.children', 'Item', 'Menu.SubMenu.children'],
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Menu.Item', 'Menu.SubMenu', 'Menu.ItemGroup'],
},
},
propsConfig: {
title: {
label: '标题内容',
type: PROPS_TYPES.string,
},
popupClassName: {
label: '子菜单样式',
type: PROPS_TYPES.string,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
key: {
label: 'item 的唯一标志',
type: PROPS_TYPES.string,
},
onTitleClick: {
label: '点击子菜单标题',
type: PROPS_TYPES.function,
placeholder: '({ key, domEvent }) => {}',
},
},
};
const Item: ComponentConfigTypes = {
fatherNodesRule: ['Menu.children', 'Menu.ItemGroup.children', 'Item', 'Menu.SubMenu.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
key: {
label: 'item 的唯一标志',
type: PROPS_TYPES.string,
},
title: {
label: '设置收缩时展示的悬浮标题',
type: PROPS_TYPES.string,
},
},
};
export default {
Menu,
'Menu.Divider': Divider,
'Menu.ItemGroup': ItemGroup,
'Menu.SubMenu': SubMenu,
'Menu.Item': Item,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Modal: ComponentConfigTypes = {
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
footer: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
mirrorModalField: {
displayPropName: 'visible',
mounted: {
propName: 'getContainer',
type: PROPS_TYPES.function,
},
},
propsConfig: {
afterClose: {
label: 'Modal关闭回调',
tip: 'Modal 完全关闭后的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
footer: {
label: '弹窗底部',
type: PROPS_TYPES.string,
},
title: {
label: '标题内容',
type: PROPS_TYPES.string,
},
bodyStyle: {
label: 'Modal body样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
cancelText: {
label: '取消按钮文字',
tip: '取消按钮文字',
type: PROPS_TYPES.string,
defaultValue: '取消',
},
centered: {
label: '垂直居中展示',
tip: '垂直居中展示 Modal',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
closable: {
label: '显示关闭按钮',
tip: '是否显示右上角的关闭按钮',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
confirmLoading: {
label: '按钮loading',
tip: '确定按钮 loading',
type: PROPS_TYPES.boolean,
},
destroyOnClose: {
label: '关闭销毁元素',
tip: '关闭时销毁 Modal 里的子元素',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
getContainer: {
label: '指定挂载节点',
tip: '指定 Modal 挂载的 HTML 节点',
type: PROPS_TYPES.function,
placeholder: '(HTMLElement) => {}',
},
keyboard: {
label: '键盘esc关闭',
tip: '是否支持键盘esc关闭',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
mask: {
label: '是否展示遮罩',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
maskClosable: {
label: '点击蒙层关闭',
tip: '点击蒙层是否允许关闭',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
maskStyle: {
label: '遮罩样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
okText: {
label: '确认按钮文字',
type: PROPS_TYPES.string,
defaultValue: '确定',
},
okType: {
label: '确认按钮类型',
type: PROPS_TYPES.string,
defaultValue: 'primary',
},
style: {
label: '设置浮层样式',
tip: '可用于设置浮层的样式,调整浮层位置等',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
width: {
label: '宽度',
tip: '输入数字或者百分数',
type: PROPS_TYPES.string,
defaultValue: '520px',
},
wrapClassName: {
label: '外层容器类名',
tip: '对话框外层容器的类名',
type: PROPS_TYPES.string,
},
zIndex: {
label: '设置样式层级',
tip: '设置 Modal 的 z-index',
type: PROPS_TYPES.number,
defaultValue: 1000,
},
onCancel: {
label: '取消按钮回调',
tip: '点击遮罩层或右上角叉或取消按钮的回调',
type: PROPS_TYPES.function,
placeholder: '(e) => {}',
},
onOk: {
label: '点击确定回调',
type: PROPS_TYPES.function,
placeholder: '(e) => {}',
},
},
};
export default Modal;
import Avatar from './Avatar';
import Tag from './Tag';
import Breadcrumb from './Breadcrumb';
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const PageHeader: ComponentConfigTypes = {
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
subTitle: {
type: NODE_PROPS_TYPES.reactNode,
},
backIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
extra: {
type: NODE_PROPS_TYPES.reactNode,
},
footer: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
ghost: {
label: 'pageHeader 的类型',
tip: 'pageHeader 的类型,将会改变背景颜色',
type: PROPS_TYPES.boolean,
},
avatar: {
label: '标题栏旁的头像',
type: PROPS_TYPES.object,
childPropsConfig: Avatar.propsConfig,
},
tags: {
label: 'title 旁的 tag 列表',
type: PROPS_TYPES.objectArray,
childPropsConfig: [Tag.propsConfig],
},
breadcrumb: {
label: '面包屑的配置',
type: PROPS_TYPES.object,
childPropsConfig: Breadcrumb.Breadcrumb.propsConfig,
},
onBack: {
label: '返回按钮的点击事件',
type: PROPS_TYPES.function,
placeholder: '()=>{}',
},
},
};
export default PageHeader;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Pagination: ComponentConfigTypes = {
nodePropsConfig: {
itemRender: {
type: NODE_PROPS_TYPES.functionReactNode,
isOnlyNode: true,
params: ['page', 'type', 'originalElement'],
},
}
,
propsConfig: {
current: {
label: '当前页数',
tip: '当前页数',
type: PROPS_TYPES.number,
},
defaultCurrent: {
label: '默认当前页数',
tip: '默认的当前页数',
type: PROPS_TYPES.number,
defaultValue: 1,
},
defaultPageSize: {
label: '默认每页条数',
tip: '默认的每页条数',
type: PROPS_TYPES.number,
defaultValue: 10,
},
disabled: {
label: '禁用分页',
type: PROPS_TYPES.boolean,
},
hideOnSinglePage: {
label: '隐藏分页',
tip: '只有一页时是否隐藏分页器',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
pageSize: {
label: '每页条数',
tip: '每页条数',
type: PROPS_TYPES.number,
defaultValue: 10,
},
pageSizeOptions: {
label: '每页显示条数',
tip: '指定每页可以显示多少条',
type: PROPS_TYPES.stringArray,
// type: PROPS_TYPES.enum,
// enumData: ['10', '20', '30', '40']
},
showLessItems: {
label: 'show less page items',
type: PROPS_TYPES.boolean,
},
showQuickJumper: {
label: '快速跳转',
tip: '是否可以快速跳转至某页',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
showSizeChanger: {
label: '改变pageSize',
tip: '是否可以改变 pageSize',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
showTotal: {
label: '显示数据总量',
tip: '用于显示数据总量和当前数据顺序',
type: PROPS_TYPES.function,
placeholder: '(total, range) => {}',
},
simple: {
label: '简单分页',
tip: '当添加该属性时,显示为简单分页',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
size: {
label: '分页尺寸',
tip: '当为「small」时,是小尺寸分页',
type: PROPS_TYPES.enum,
enumData: ['small'],
},
total: {
label: '数据总数',
tip: '数据总数',
type: PROPS_TYPES.number,
defaultValue: 0,
},
onChange: {
label: '页码改变回调',
tip: '页码改变的回调,参数是改变后的页码及每页条数',
type: PROPS_TYPES.function,
placeholder: '(page, pageSize) => {}',
},
onShowSizeChange: {
label: 'pageSize变化回调',
tip: 'pageSize 变化的回调',
type: PROPS_TYPES.function,
placeholder: '(current, size) => {}',
},
},
};
export default Pagination;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Popover: ComponentConfigTypes = {
nodePropsConfig: {
content: {
type: NODE_PROPS_TYPES.reactNode,
},
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
mirrorModalField: {
displayPropName: 'visible',
// mounted: {
// propName: 'getContainer',
// type: PROPS_TYPES.function,
// },
},
propsConfig: {
arrowPointAtCenter: {
label: '箭头指向中心',
tip: '箭头是否指向目标元素中心,antd@1.11+ 支持',
type: PROPS_TYPES.boolean,
},
autoAdjustOverflow: {
label: '自动调整位置',
tip: '气泡被遮挡时自动调整位置',
type: PROPS_TYPES.boolean,
},
mouseEnterDelay: {
label: '鼠标移入后延时',
tip: '鼠标移入后延时多少才显示 Tooltip,单位:秒',
type: PROPS_TYPES.number,
},
mouseLeaveDelay: {
label: '鼠标移出后延时',
tip: '鼠标移出后延时多少才隐藏 Tooltip,单位:秒',
type: PROPS_TYPES.number,
},
content: {
label: '卡片内容',
type: PROPS_TYPES.string,
},
title: {
label: '卡片标题',
type: PROPS_TYPES.string,
},
overlayStyle: {
label: '卡片样式',
type: [PROPS_TYPES.object, PROPS_TYPES.json],
},
placement: {
label: '气泡框位置',
type: PROPS_TYPES.enum,
enumData: ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'],
defaultValue: 'top',
},
trigger: {
label: '触发行为',
type: PROPS_TYPES.enum,
enumData: ['hover', 'focus', 'click', 'contextMenu'],
defaultValue: 'hover',
},
},
};
export default Popover;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Progress: ComponentConfigTypes = {
propsConfig: {
percent: {
label: '百分比',
tip: '百分比',
type: PROPS_TYPES.number,
defaultValue: 50,
},
showInfo: {
label: '进度数值显示',
tip: '是否显示进度数值或状态图标',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
status: {
label: '状态',
tip: ' 状态,可选:success exception active',
type: PROPS_TYPES.enum,
enumData: ['success', 'exception', 'active'],
},
type: {
label: '类型',
tip: '类型,可选 line circle dashboard',
type: PROPS_TYPES.enum,
enumData: ['line', 'circle', 'dashboard'],
},
},
};
export default Progress;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Radio: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
autoFocus: {
label: '自动获取焦点',
tip: '自动获取焦点',
type: PROPS_TYPES.boolean,
},
value: {
label: '根据 value 进行比较,判断是否选中',
type: PROPS_TYPES.string,
},
checked: {
label: '指定是否选中',
tip: '指定当前是否选中',
type: PROPS_TYPES.boolean,
},
defaultChecked: {
label: '初始是否选中',
tip: '初始是否选中',
type: PROPS_TYPES.boolean,
},
},
};
const Button: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
value: {
label: '根据 value 进行比较,判断是否选中',
type: PROPS_TYPES.string,
},
},
};
const Group: ComponentConfigTypes = {
nodePropsConfig: {
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Radio', 'Radio.Button'],
},
},
propsConfig: {
defaultValue: {
label: '默认选中的值',
type: PROPS_TYPES.string,
},
disabled: {
label: '禁选所有子单选器',
type: PROPS_TYPES.boolean,
},
name: {
label: 'name',
tip: 'RadioGroup 下所有 input[type="radio"] 的 name 属性',
type: PROPS_TYPES.string,
},
options: {
label: '以配置形式设置子元素',
type: [PROPS_TYPES.stringArray, PROPS_TYPES.objectArray],
childPropsConfig: [{
label: {
label: 'label',
type: PROPS_TYPES.string,
},
value: {
label: 'value',
type: PROPS_TYPES.string,
},
disabled: {
label: 'disabled',
type: PROPS_TYPES.boolean,
},
}],
},
size: {
label: '大小',
tip: '大小,只对按钮样式生效',
type: PROPS_TYPES.enum,
enumData: ['large', 'default', 'small'],
},
value: {
label: '用于设置当前选中的值',
type: PROPS_TYPES.string,
},
onChange: {
label: '选项变化时的回调函数',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
buttonStyle: {
label: 'RadioButton 的风格样式',
tip: 'RadioButton 的风格样式,目前有描边和填色两种风格',
type: PROPS_TYPES.enum,
enumData: ['outline', 'solid'],
},
},
};
export default {
Radio,
'Radio.Button': Button,
'Radio.Group': Group,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Rate: ComponentConfigTypes = {
nodePropsConfig: {
character: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
allowClear: {
label: '是否点击清除',
tip: '是否允许再次点击后清除',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
allowHalf: {
label: '是否允许半选',
type: PROPS_TYPES.boolean,
},
autoFocus: {
label: '自动获取焦点',
type: PROPS_TYPES.boolean,
},
count: {
label: '星星总数',
type: PROPS_TYPES.number,
},
defaultValue: {
label: '默认值',
type: PROPS_TYPES.number,
},
disabled: {
label: '是否禁用',
tip: '只读,无法进行交互',
type: PROPS_TYPES.boolean,
},
tooltips: {
label: '自定义每项的提示信息',
type: PROPS_TYPES.stringArray,
},
value: {
label: '当前数,受控值',
type: PROPS_TYPES.number,
},
onBlur: {
label: '失去焦点时的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onChange: {
label: '选择时回调',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onFocus: {
label: '获取焦点时的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onHoverChange: {
label: '鼠标经过时回调',
tip: '鼠标经过时数值变化',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onKeyDown: {
label: '按键回调',
type: PROPS_TYPES.function,
placeholder: '(event) => {}',
},
},
};
export default Rate;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Row: ComponentConfigTypes = {
propsConfig: {
align: {
label: '垂直对齐方式',
tip: 'flex 布局下的垂直对齐方式:top middle bottom',
type: PROPS_TYPES.enum,
enumData: ['top', 'middle', 'bottom'],
},
gutter: {
label: '栅格间隔',
tip: '栅格间隔,可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}',
type: [PROPS_TYPES.number, PROPS_TYPES.object, PROPS_TYPES.numberArray],
childPropsConfig: {
xs: {
label: 'xs',
type: PROPS_TYPES.number,
},
sm: {
label: 'sm',
type: PROPS_TYPES.number,
},
md: {
label: 'md',
type: PROPS_TYPES.number,
},
lg: {
label: 'lg',
type: PROPS_TYPES.number,
},
xl: {
label: 'xl',
type: PROPS_TYPES.number,
},
xxl: {
label: 'xxl',
type: PROPS_TYPES.number,
},
},
},
justify: {
label: '水平排列方式',
tip: 'flex 布局下的水平排列方式:start end center space-around space-between',
type: PROPS_TYPES.enum,
enumData: ['start', 'end', 'center', 'space-around', 'space-between'],
},
type: {
label: '布局模式',
tip: '布局模式,可选 flex,现代浏览器 下有效',
type: PROPS_TYPES.enum,
enumData: ['flex'],
},
},
};
export default Row;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Select: ComponentConfigTypes = {
nodePropsConfig: {
dropdownRender: {
type: NODE_PROPS_TYPES.functionReactNode,
params: ['menuNode', 'props'],
},
maxTagPlaceholder: {
type: NODE_PROPS_TYPES.reactNode,
},
suffixIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
removeIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
clearIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
menuItemSelectedIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Select.OptGroup', 'Select.Option'],
},
},
propsConfig: {
allowClear: {
label: '支持清除',
type: PROPS_TYPES.boolean,
},
autoClearSearchValue: {
label: '是否在选中项后清空搜索框',
tip: '是否在选中项后清空搜索框,只在 mode 为 multiple 或 tags 时有效。',
type: PROPS_TYPES.boolean,
},
autoFocus: {
label: '默认获取焦点',
type: PROPS_TYPES.boolean,
},
defaultActiveFirstOption: {
label: '是否默认高亮第一个选项',
type: PROPS_TYPES.boolean,
},
defaultValue: {
label: '输入框默认值',
type: [PROPS_TYPES.string, PROPS_TYPES.stringArray, PROPS_TYPES.number, PROPS_TYPES.numberArray],
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
dropdownClassName: {
label: '下拉菜单的 className 属性',
type: PROPS_TYPES.string,
},
dropdownMatchSelectWidth: {
label: '下拉菜单和选择器同宽',
type: PROPS_TYPES.boolean,
},
dropdownStyle: {
label: '下拉菜单的 style 属性',
type: [PROPS_TYPES.object, PROPS_TYPES.json],
},
dropdownMenuStyle: {
label: 'dropdown 菜单自定义样式',
type: [PROPS_TYPES.object, PROPS_TYPES.json],
},
filterOption: {
label: '是否根据输入项进行筛选',
tip: '是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。',
type: [PROPS_TYPES.boolean, PROPS_TYPES.function],
placeholder: '(inputValue, option)=>{}',
},
firstActiveValue: {
label: '默认高亮的选项',
type: [PROPS_TYPES.string, PROPS_TYPES.stringArray],
},
getPopupContainer: {
label: '菜单渲染父节点',
tip: '菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位',
type: PROPS_TYPES.function,
placeholder: '() => document.body',
},
labelInValue: {
label: '是否把每个选项的 label 包装到 value 中',
tip: '是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 {key: string, label: ReactNode} 的格式',
type: PROPS_TYPES.boolean,
},
maxTagCount: {
label: '最多显示多少个 tag',
type: PROPS_TYPES.number,
},
maxTagTextLength: {
label: '最大显示的 tag 文本长度',
type: PROPS_TYPES.number,
},
maxTagPlaceholder: {
label: '隐藏 tag 时显示的内容',
type: PROPS_TYPES.function,
placeholder: '(omittedValues)=>{}',
},
mode: {
label: '设置select的模式',
type: PROPS_TYPES.enum,
enumData: ['multiple', 'tags'],
},
notFoundContent: {
label: '当下拉列表为空时显示的内容',
type: PROPS_TYPES.string,
},
optionFilterProp: {
label: '搜索过滤option',
tip: '搜索时过滤对应的option属性,如设置为children表示对内嵌内容进行搜索',
type: PROPS_TYPES.string,
},
optionLabelProp: {
label: '回填到选择框的 Option 的属性值',
tip: '回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 value',
type: PROPS_TYPES.string,
},
placeholder: {
label: 'placeholder',
type: PROPS_TYPES.string,
defaultValue: '请选择',
},
showArrow: {
label: '是否显示下拉小箭头',
type: PROPS_TYPES.boolean,
},
showSearch: {
label: '使单选模式可搜索',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
size: {
label: '选择框大小',
type: PROPS_TYPES.enum,
enumData: ['large', 'small', 'default'],
},
tokenSeparators: {
label: '分隔符',
tip: '在 tags 和 multiple 模式下自动分词的分隔符',
type: PROPS_TYPES.stringArray,
},
value: {
label: '指定当前选中的条目',
type: [PROPS_TYPES.string, PROPS_TYPES.stringArray, PROPS_TYPES.number, PROPS_TYPES.numberArray],
},
onBlur: {
label: '失去焦点时的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onChange: {
label: 'input的value变化',
tip: '选中option,或input的value变化(combobox 模式下)时',
type: PROPS_TYPES.function,
placeholder: '(value, option) => {}',
},
onDeselect: {
label: '取消选中时调用',
tip: '取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效',
type: PROPS_TYPES.function,
placeholder: '(param)=>{}',
},
onFocus: {
label: ' 获取焦点时的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onInputKeyDown: {
label: '按键按下时回调',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
onMouseEnter: {
label: '鼠标移入时回调',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
onMouseLeave: {
label: '鼠标移出时回调',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
onPopupScroll: {
label: '下拉列表滚动时的回调',
type: PROPS_TYPES.function,
placeholder: '(e)=>{}',
},
onSearch: {
label: '文本框值变化时回调',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onSelect: {
label: '被选中时调用',
type: PROPS_TYPES.function,
placeholder: '(param, option) => {}',
},
defaultOpen: {
label: '是否默认展开下拉菜单',
type: PROPS_TYPES.boolean,
},
open: {
label: '是否展开下拉菜单',
type: PROPS_TYPES.boolean,
},
onDropdownVisibleChange: {
label: '展开下拉菜单的回调',
type: PROPS_TYPES.function,
placeholder: '(open)=>{}',
},
loading: {
label: '加载中状态',
type: PROPS_TYPES.boolean,
},
},
};
const OptGroup: ComponentConfigTypes = {
fatherNodesRule: ['Select.children'],
nodePropsConfig: {
label: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
childNodesRule: ['Select.Option'],
},
},
propsConfig: {
key: {
label: 'key',
type: PROPS_TYPES.string,
},
label: {
label: '组名',
type: PROPS_TYPES.string,
},
},
};
const Option: ComponentConfigTypes = {
fatherNodesRule: ['Select.children', 'Select.OptGroup.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
key: {
label: 'key',
tip: '和 value 含义一致。如果 React 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置',
type: PROPS_TYPES.string,
},
title: {
label: '选中该 Option 后,Select 的 title',
type: PROPS_TYPES.string,
},
value: {
label: '默认根据此属性值进行筛选',
type: [PROPS_TYPES.string, PROPS_TYPES.number],
},
},
};
export default {
Select,
'Select.OptGroup': OptGroup,
'Select.Option': Option,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Slider: ComponentConfigTypes = {
propsConfig: {
allowClear: {
label: '支持清除',
tip: '支持清除, 单选模式有效',
type: PROPS_TYPES.boolean,
},
defaultValue: {
label: '初始取值',
tip: '设置初始取值。当 range 为 false 时,使用 number,否则用 [number, number]',
type: [PROPS_TYPES.number, PROPS_TYPES.numberArray],
},
disabled: {
label: '是否禁用',
tip: '值为 true 时,滑块为禁用状态',
type: PROPS_TYPES.boolean,
},
dots: {
label: '拖拽限制',
tip: '是否只能拖拽到刻度上',
type: PROPS_TYPES.boolean,
},
included: {
label: '包含关系',
tip: ' marks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列',
type: PROPS_TYPES.boolean,
},
marks: {
label: '刻度标记',
tip: '刻度标记,key 的类型必须为 number 且取值在闭区间 min, max 内,每个标签可以单独设置样式',
type: PROPS_TYPES.object,
childPropsConfig: {},
},
max: {
label: '最大值',
type: PROPS_TYPES.number,
},
min: {
label: '最小值',
type: PROPS_TYPES.number,
},
range: {
label: '双滑块模式',
type: PROPS_TYPES.boolean,
},
reverse: {
label: '反向坐标轴',
type: PROPS_TYPES.boolean,
},
step: {
label: '步长',
tip:
' 步长,取值必须大于 0,并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 step 为 null,此时 Slider 的可选值仅有 marks 标出来的部分。',
type: [PROPS_TYPES.number, PROPS_TYPES.string],
},
tipFormatter: {
label: '提示格式化',
tip:
'Slider 会把当前值传给 tipFormatter,并在 Tooltip 中显示 tipFormatter 的返回值,若为 null,则隐藏 Tooltip。',
type: [PROPS_TYPES.function, PROPS_TYPES.string],
placeholder: '() => {}',
},
value: {
label: '当前取值',
tip: '设置当前取值。当 range 为 false 时,使用 number,否则用 [number, number]',
type: [PROPS_TYPES.number, PROPS_TYPES.numberArray],
},
vertical: {
label: '垂直方向',
tip: '值为 true 时,Slider 为垂直方向(注意:设置为true时,需要去样式配置中设置高度)',
type: PROPS_TYPES.boolean,
},
onAfterChange: {
label: '改变后',
tip: '与 onmouseup 触发时机一致,把当前值作为参数传入。',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onChange: {
label: '值发生改变',
tip: '当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
tooltipPlacement: {
label: '设置 Tooltip 展示位置。',
type: PROPS_TYPES.enum,
enumData: ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'],
},
tooltipVisible: {
label: '是否显示Tooltip',
tip: '值为true时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时。',
type: PROPS_TYPES.boolean,
},
getTooltipPopupContainer: {
label: '渲染父节点',
tip: 'Tooltip 渲染父节点,默认渲染到 body 上。',
type: PROPS_TYPES.function,
placeholder: '()=>document.body',
},
},
};
export default Slider;
import { PROPS_TYPES } from 'lingxi-editor-core';
export default {
propsConfig: {
affix: {
label: '延迟时间',
tip: '延迟显示加载效果的时间(防止闪烁)',
type: PROPS_TYPES.number,
},
size: {
label: '组件大小',
type: PROPS_TYPES.enum,
enumData: ['small', 'default', 'large'],
defaultValue: 'default',
},
spinning: {
label: '是否为加载中状态 ',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
tip: {
label: '文案',
tip: '当作为包裹元素时,可以自定义描述文案',
type: PROPS_TYPES.string,
},
},
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Steps: ComponentConfigTypes = {
nodePropsConfig: {
progressDot: {
type: NODE_PROPS_TYPES.functionReactNode,
isOnlyNode: true,
params: ['iconDot', `{index, status, title, description}`],
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
}
,
propsConfig: {
type: {
label: '步骤条类型',
type: PROPS_TYPES.enum,
enumData: ['default', 'navigation'],
},
current: {
label: '指定当前步骤',
tip: '指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态',
type: PROPS_TYPES.number,
},
direction: {
label: '指定步骤条方向',
tip: '指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向',
type: PROPS_TYPES.enum,
enumData: ['horizontal', 'vertical'],
},
labelPlacement: {
label: '指定标签放置位置',
tip: '指定标签放置位置,默认水平放图标右侧,可选 vertical 放图标下方',
type: PROPS_TYPES.string,
},
progressDot: {
label: '点状步骤条',
tip: '点状步骤条,可以设置为一个 function,labelPlacement 将强制为 vertical',
type: PROPS_TYPES.boolean,
},
size: {
label: '指定大小',
tip: '指定大小,目前支持普通(default)和迷你(small)',
type: PROPS_TYPES.enum,
enumData: ['default', 'small'],
},
status: {
label: '指定当前步骤的状态',
type: PROPS_TYPES.enum,
enumData: ['wait', 'process', 'finish', 'error'],
},
initial: {
label: '起始序号',
tip: '起始序号,从 0 开始记数',
type: PROPS_TYPES.number,
},
onChange: {
label: '点击切换步骤时触发',
type: PROPS_TYPES.function,
placeholder: '(current) => {}',
},
},
};
const Step: ComponentConfigTypes = {
nodePropsConfig: {
description: {
type: NODE_PROPS_TYPES.reactNode,
}
,
icon: {
type: NODE_PROPS_TYPES.reactNode,
}
,
title: {
type: NODE_PROPS_TYPES.reactNode,
}
,
subTitle: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
description: {
label: '步骤的详情描述',
type: PROPS_TYPES.string,
},
icon: {
label: '步骤图标的类型',
type: PROPS_TYPES.string,
},
title: {
label: '标题',
type: PROPS_TYPES.string,
},
subTitle: {
label: '子标题',
type: PROPS_TYPES.string,
},
disabled: {
label: '禁用点击',
type: PROPS_TYPES.boolean,
},
status: {
label: '指定当前步骤的状态',
type: PROPS_TYPES.enum,
enumData: ['wait', 'process', 'finish', 'error'],
},
},
};
export default {
Steps,
'Steps.Step': Step,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Switch: ComponentConfigTypes = {
nodePropsConfig: {
checkedChildren: {
type: NODE_PROPS_TYPES.reactNode,
},
unCheckedChildren: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
autoFocus: {
label: '自动获焦点',
type: PROPS_TYPES.boolean,
},
checked: {
label: '当前是否选中',
type: PROPS_TYPES.boolean,
},
checkedChildren: {
label: '选中的内容',
type: PROPS_TYPES.string,
},
defaultChecked: {
label: '初始是否选中',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
loading: {
label: '加载动画',
tip: '加载中的开关',
type: PROPS_TYPES.boolean,
},
size: {
label: '开关大小',
tip: '开关大小,可选值:default small',
type: PROPS_TYPES.enum,
enumData: ['default', 'small'],
defaultValue: 'default',
},
unCheckedChildren: {
label: '未选时内容',
type: PROPS_TYPES.string,
},
onChange: {
label: '开关改变回调',
type: PROPS_TYPES.function,
placeholder: '(checked) => {}',
},
onClick: {
label: '点击时回调函数',
type: PROPS_TYPES.function,
placeholder: '(checked, event)=>{}',
},
},
};
export default Switch;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Tabs: ComponentConfigTypes = {
nodePropsConfig: {
tabBarExtraContent: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
isRequired: true,
childNodesRule: ['Tabs.TabPane'],
},
},
propsConfig: {
activeKey: {
label: '激活面板key',
tip: '当前激活 tab 面板的 key',
type: PROPS_TYPES.string,
},
animated: {
label: '使用动画切换',
tip: '是否使用动画切换 Tabs,在 tabPosition=top|bottom 时有效',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
defaultActiveKey: {
label: '初始选中面板',
tip: '初始化选中面板的 key,如果没有设置 activeKey',
type: PROPS_TYPES.string,
},
hideAdd: {
label: '隐藏加号图标',
tip: '是否隐藏加号图标,在 type="editable-card" 时有效',
type: PROPS_TYPES.boolean,
},
size: {
label: '大小',
tip: '大小,提供 large default 和 small 三种大小',
type: PROPS_TYPES.enum,
enumData: ['large', 'default', 'small'],
defaultValue: 'default',
},
tabBarGutter: {
label: 'tabs的间隙',
tip: 'tabs 之间的间隙',
type: PROPS_TYPES.number,
},
tabBarStyle: {
label: 'tab bar的样式',
tip: 'tab bar 的样式对象',
type: PROPS_TYPES.object,
},
tabPosition: {
label: '页签位置',
tip: '页签位置,可选值有 top right bottom left',
type: PROPS_TYPES.enum,
enumData: ['top', 'right', 'bottom', 'left'],
},
type: {
label: '页签类型',
tip: '页签的基本样式,可选 line、card editable-card 类型',
type: PROPS_TYPES.enum,
enumData: ['line', 'card', 'editable-card'],
},
onChange: {
label: '页签改变回调',
type: PROPS_TYPES.function,
placeholder: '(activeKey) => {}',
},
onEdit: {
label: '新增和删除的回调',
tip: '新增和删除页签的回调,在 type="editable-card" 时有效',
type: PROPS_TYPES.function,
placeholder: '(targetKey, action) => {}',
},
onNextClick: {
label: 'next按钮点击回调',
tip: 'next 按钮被点击的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onPrevClick: {
label: 'prev按钮点击回调',
tip: 'prev 按钮被点击的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
onTabClick: {
label: 'tab按钮点击回调',
tip: 'tab 按钮被点击的回调',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
renderTabBar: {
label: '替换TabBar',
tip: '替换TabBar,用于二次封装标签头',
type: PROPS_TYPES.function,
placeholder: '() => {}',
},
},
};
const TabPane: ComponentConfigTypes = {
fatherNodesRule: ['Tabs.children'],
nodePropsConfig: {
tab: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
tab: {
label: '选项卡头显示文字',
type: PROPS_TYPES.string,
isRequired: true,
defaultValue: 'tab'
},
forceRender: {
label: '隐藏是否渲染',
tip: '被隐藏时是否渲染 DOM 结构',
type: PROPS_TYPES.boolean,
},
key: {
label: '对应activeKey',
type: PROPS_TYPES.string,
isRequired: true,
defaultValue: 'tab'
},
},
};
export default {
Tabs,
'Tabs.TabPane': TabPane,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Tag: ComponentConfigTypes = {
propsConfig: {
color: {
label: '标签色',
type: PROPS_TYPES.string,
},
},
};
export default Tag;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const TimePicker: ComponentConfigTypes = {
propsConfig: {
allowEmpty: {
label: '是否展示清除按钮',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
autoFocus: {
label: '自动获焦点',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
clearText: {
label: '清除按钮hover时的文案',
type: PROPS_TYPES.string,
defaultValue: 'clear',
},
disabled: {
label: '禁用全部',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
format: {
label: '展示的时间格式',
type: PROPS_TYPES.string,
defaultValue: 'HH:mm:ss',
},
hourStep: {
label: '小时选项间隔',
type: PROPS_TYPES.number,
defaultValue: 1,
min: 1,
},
minuteStep: {
label: '分钟选项间隔',
type: PROPS_TYPES.number,
defaultValue: 1,
min: 1,
},
secondStep: {
label: '秒选项间隔',
type: PROPS_TYPES.number,
defaultValue: 1,
min: 1,
},
inputReadOnly: {
label: '输入框只读',
tip: '设置输入框为只读(避免在移动设备上打开虚拟键盘)',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
placeholder: {
label: '无值时内容',
tip: '没有值的时候显示的内容',
type: PROPS_TYPES.string,
},
use12Hours: {
label: '12小时制',
tip: '使用 12 小时制,为 true 时 format 默认为 h:mm:ss a',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
onChange: {
label: '值变化',
tip: '时间发生变化的回调',
type: PROPS_TYPES.function,
placeholder: '(time, timeString) => {}',
},
},
};
export default TimePicker;
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Timeline: ComponentConfigTypes = {
nodePropsConfig: {
pending: {
type: NODE_PROPS_TYPES.reactNode,
},
pendingDot: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
pending: {
label: '是否存在或内容',
tip: '指定最后一个幽灵节点是否存在或内容',
type: PROPS_TYPES.boolean,
},
pendingDot: {
label: '时间图点',
tip: '当最后一个幽灵节点存在時,指定其时间图点',
type: PROPS_TYPES.string,
},
reverse: {
label: '节点排序',
tip: '节点排序',
type: PROPS_TYPES.boolean,
},
mode: {
label: '相对位置',
tip: '通过设置 mode 可以改变时间轴和内容的相对位置',
type: PROPS_TYPES.enum,
enumData: ['left', 'alternate', 'right'],
},
},
};
const Item: ComponentConfigTypes = {
nodePropsConfig: {
dot: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
color: {
label: '指定圆圈颜色',
type: PROPS_TYPES.string,
},
dot: {
label: '自定义时间轴点',
type: PROPS_TYPES.string,
},
position: {
label: '自定义节点位置',
type: PROPS_TYPES.enum,
enumData: ['left', 'right'],
},
},
};
export default {
Timeline,
'Timeline.Item': Item,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
const Tooltip: ComponentConfigTypes = {
mirrorModalField: {
displayPropName: 'visible',
},
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
arrowPointAtCenter: {
label: '箭头指向中心',
tip: '箭头是否指向目标元素中心,antd@1.11+ 支持',
type: PROPS_TYPES.boolean,
},
autoAdjustOverflow: {
label: '自动调整位置',
tip: '气泡被遮挡时自动调整位置',
type: PROPS_TYPES.boolean,
},
mouseEnterDelay: {
label: '鼠标移入后延时',
tip: '鼠标移入后延时多少才显示 Tooltip,单位:秒',
type: PROPS_TYPES.number,
},
mouseLeaveDelay: {
label: '鼠标移出后延时',
tip: '鼠标移出后延时多少才隐藏 Tooltip,单位:秒',
type: PROPS_TYPES.number,
},
title: {
label: '提示文字',
type: PROPS_TYPES.string,
},
overlayStyle: {
label: '卡片样式',
type: [PROPS_TYPES.object, PROPS_TYPES.json],
},
placement: {
label: '气泡框位置',
type: PROPS_TYPES.enum,
enumData: ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'],
defaultValue: 'top',
},
trigger: {
label: '触发行为',
type: PROPS_TYPES.enum,
enumData: ['hover', 'focus', 'click', 'contextMenu'],
defaultValue: 'hover',
},
onVisibleChange: {
label: '显示隐藏的回调',
type: PROPS_TYPES.function,
placeholder: '(visible) => {}',
},
},
};
export default Tooltip;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Transfer: ComponentConfigTypes = {
propsConfig: {
render: {
label: '行元素渲染',
tip:
'每行数据渲染函数,该函数的入参为 dataSource 中的项,返回值为 ReactElement。或者返回一个普通对象,其中 label 字段为 ReactElement,value 字段为 title',
type: PROPS_TYPES.function,
placeholder: '(record) => {}',
rules: [
{
required: true,
message: '请输入render方法名称',
},
],
},
showSearch: {
label: '是否显示搜索框',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
titles: {
label: '标题集合',
tip: '标题集合,顺序从左至右',
type: PROPS_TYPES.stringArray,
stringCount: 2,
},
onChange: {
label: '数据切换函数',
tip: '选项在两栏之间转移时的回调函数',
type: PROPS_TYPES.function,
placeholder: '(targetKeys, direction, moveKeys) => {}',
},
},
};
export default Transfer;
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Tree: ComponentConfigTypes = {
propsConfig: {
autoExpandFather: {
label: '父节点展开',
tip: '是否自动展开父节点',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
checkable: {
label: '节点前添加复选框',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
defaultExpandAll: {
label: '展开所有树节点',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
disabled: {
label: '禁用树',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
multiple: {
label: '支持多选',
tip: '支持点选多个节点(节点本身)',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
onSelect: {
label: '点击树节点',
type: PROPS_TYPES.function,
placeholder: '(selectedKeys, e) => {}',
},
},
};
const TreeNode: ComponentConfigTypes = {
propsConfig: {
autoExpandFather: {
label: '父节点展开',
tip: '是否自动展开父节点',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
checkable: {
label: '节点前添加复选框',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
defaultExpandAll: {
label: '展开所有树节点',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
disabled: {
label: '禁用树',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
multiple: {
label: '支持多选',
tip: '支持点选多个节点(节点本身)',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
onSelect: {
label: '点击树节点',
type: PROPS_TYPES.function,
placeholder: '(selectedKeys, e) => {}',
},
},
};
export default {
Tree,
'Tree.TreeNode': TreeNode,
};
import { ComponentConfigTypes, PROPS_TYPES, NODE_PROPS_TYPES } from 'lingxi-editor-core';
import { TreeSelect as AntTreeSelect } from 'antd';
const TreeSelect: ComponentConfigTypes = {
nodePropsConfig: {
maxTagPlaceholder: {
type: NODE_PROPS_TYPES.reactNode,
},
suffixIcon: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
allowClear: {
label: '显示清除按钮',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
autoClearSearchValue: {
label: '自动清空搜索框',
tip: '当多选模式下值被选择,自动清空搜索框',
type: PROPS_TYPES.boolean,
defaultValue: true,
},
defaultValue: {
label: '指定默认选中的条目',
type: [PROPS_TYPES.string, PROPS_TYPES.stringArray],
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
dropdownClassName: {
label: '下拉菜单的 className 属性',
type: PROPS_TYPES.string,
},
dropdownMatchSelectWidth: {
label: '下拉菜单和选择器同宽',
tip: '下拉菜单和选择器同宽。默认将设置 min-width。',
type: PROPS_TYPES.boolean,
},
dropdownStyle: {
label: '下拉菜单的样式',
type: [PROPS_TYPES.json, PROPS_TYPES.objectArray],
childPropsConfig: {},
},
filterTreeNode: {
label: '是否根据输入项进行筛选',
type: [PROPS_TYPES.boolean, PROPS_TYPES.function],
placeholder: '(inputValue, treeNode)=>true',
},
getPopupContainer: {
label: '菜单渲染父节点',
tip: '菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。',
type: PROPS_TYPES.function,
placeholder: '() => document.body',
},
labelInValue: {
label: '是否把每个选项的 label 包装到 value 中',
tip: '是否把每个选项的 label 包装到 value 中,会把 value 类型从 string 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式',
type: PROPS_TYPES.boolean,
},
loadData: {
label: '异步加载数据',
type: PROPS_TYPES.function,
placeholder: '(node)=>{}',
},
maxTagCount: {
label: '最大tag数',
tip: '最多显示多少个 tag',
type: PROPS_TYPES.number,
},
maxTagPlaceholder: {
label: '隐藏 tag 时显示的内容',
type: PROPS_TYPES.function,
placeholder: '(omittedValues)=>{}',
},
multiple: {
label: '支持多选',
tip: '支持多选(当设置 treeCheckable 时自动变为true)',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
placeholder: {
label: '选择框默认文字',
type: PROPS_TYPES.string,
},
searchPlaceholder: {
label: '搜索框默认文字',
type: PROPS_TYPES.string,
},
searchValue: {
label: '搜索框的值',
tip: '搜索框的值,可以通过 onSearch 获取用户输入',
type: PROPS_TYPES.string,
},
treeIcon: {
label: '是否展示 TreeNode title 前的图标',
tip: '是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式',
type: PROPS_TYPES.boolean,
},
showCheckedStrategy: {
label: '定义选中项回填的方式',
tip: '定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.',
type: PROPS_TYPES.enum,
enumData: [AntTreeSelect.SHOW_ALL, AntTreeSelect.SHOW_CHILD, AntTreeSelect.SHOW_PARENT],
},
showSearch: {
label: '显示搜索框',
tip: '在下拉中显示搜索框(仅在单选模式下生效)',
type: PROPS_TYPES.boolean,
},
size: {
label: '选择框大小',
type: PROPS_TYPES.enum,
enumData: ['default', 'small', 'large'],
},
treeCheckable: {
label: '显示 checkbox',
type: PROPS_TYPES.boolean,
},
treeCheckStrictly: {
label: 'treeCheckStrictly',
tip: 'checkable 状态下节点选择完全受控(父子节点选中状态不再关联),会使得 labelInValue 强制为 true',
type: PROPS_TYPES.boolean,
},
treeData: {
label: 'treeNodes 数据',
tip: 'treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(value 在整个树范围内唯一)',
type: PROPS_TYPES.objectArray,
childPropsConfig: [{}],
},
treeDataSimpleMode: {
label: 'treeDataSimpleMode',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {},
},
treeDefaultExpandAll: {
label: '树节点展开',
tip: '默认展开所有树节点',
type: PROPS_TYPES.boolean,
defaultValue: false,
},
treeDefaultExpandedKeys: {
label: '默认展开的树节点',
type: PROPS_TYPES.stringArray,
},
treeExpandedKeys: {
label: '设置展开的树节点',
type: PROPS_TYPES.stringArray,
},
treeNodeFilterProp: {
label: '输入项过滤对应的 treeNode 属性',
type: PROPS_TYPES.string,
},
treeNodeLabelProp: {
label: '作为显示的 prop 设置',
type: PROPS_TYPES.string,
},
value: {
label: '指定当前选中的条目',
type: [PROPS_TYPES.string, PROPS_TYPES.stringArray],
},
onChange: {
label: '选中节点函数',
tip: '选中树节点时调用此函数',
type: PROPS_TYPES.function,
placeholder: '(value, label, extra) => {}',
},
onSearch: {
label: '数值变化函数',
tip: '文本框值变化时回调函数名称',
type: PROPS_TYPES.function,
placeholder: '(value) => {}',
},
onSelect: {
label: '被选中函数',
type: PROPS_TYPES.function,
placeholder: '(value, node, extra) => {}',
},
onTreeExpand: {
label: '展示节点时调用',
type: PROPS_TYPES.function,
placeholder: '(expandedKeys)=>{}',
},
},
};
const TreeNode: ComponentConfigTypes = {
fatherNodesRule: ['TreeSelect.children'],
nodePropsConfig: {
title: {
type: NODE_PROPS_TYPES.reactNode,
},
children: {
type: NODE_PROPS_TYPES.reactNode,
},
},
propsConfig: {
selectable: {
label: '是否可选',
type: PROPS_TYPES.boolean,
},
checkable: {
label: 'checkable',
tip: '当树为 checkable 时,设置独立节点是否展示 Checkbox',
type: PROPS_TYPES.boolean,
},
disableCheckbox: {
label: '禁掉 checkbox',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '是否禁用',
type: PROPS_TYPES.boolean,
},
isLeaf: {
label: '是否是叶子节点',
type: PROPS_TYPES.boolean,
},
key: {
label: 'key',
tip: '此项必须设置(其值在整个树范围内唯一)',
type: PROPS_TYPES.string,
},
title: {
label: '树节点显示的内容',
type: PROPS_TYPES.string,
},
value: {
label: 'value',
tip: '默认根据此属性值进行筛选(其值在整个树范围内唯一)',
type: PROPS_TYPES.string,
},
},
};
export default {
TreeSelect,
'TreeSelect.TreeNode': TreeNode,
};
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const Text: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
copyable: {
label: '是否可拷贝',
tip: '是否可拷贝,为对象时可设置复制文本以回调函数',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
text: {
label: 'text',
type: PROPS_TYPES.string,
},
onCopy: {
label: 'onCopy',
type: PROPS_TYPES.function,
},
},
},
delete: {
label: '添加删除线样式',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '禁用文本',
type: PROPS_TYPES.boolean,
},
editable: {
label: '是否可编辑',
tip: '是否可编辑,为对象时可对编辑进行控制',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
editing: {
label: 'editing',
type: PROPS_TYPES.boolean,
},
onStart: {
label: 'onStart',
type: PROPS_TYPES.function,
},
onChange: {
label: 'onChange',
type: PROPS_TYPES.boolean,
placeholder: '(string)=>{}',
},
},
},
ellipsis: {
label: '设置自动溢出省略',
type: PROPS_TYPES.boolean,
},
mark: {
label: '添加标记样式',
type: PROPS_TYPES.boolean,
},
code: {
label: '添加代码样式',
type: PROPS_TYPES.boolean,
},
underline: {
label: '添加下划线样式',
type: PROPS_TYPES.boolean,
},
strong: {
label: '是否加粗',
type: PROPS_TYPES.boolean,
},
type: {
label: '文本类型',
type: PROPS_TYPES.enum,
enumData: ['secondary', 'warning', 'danger'],
},
},
};
const Title: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
copyable: {
label: '是否可拷贝',
tip: '是否可拷贝,为对象时可设置复制文本以回调函数',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
text: {
label: 'text',
type: PROPS_TYPES.string,
},
onCopy: {
label: 'onCopy',
type: PROPS_TYPES.function,
},
},
},
delete: {
label: '添加删除线样式',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '禁用文本',
type: PROPS_TYPES.boolean,
},
editable: {
label: '是否可编辑',
tip: '是否可编辑,为对象时可对编辑进行控制',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
editing: {
label: 'editing',
type: PROPS_TYPES.boolean,
},
onStart: {
label: 'onStart',
type: PROPS_TYPES.function,
},
onChange: {
label: 'onChange',
type: PROPS_TYPES.boolean,
placeholder: '(string)=>{}',
},
},
},
ellipsis: {
label: '设置自动溢出省略',
tip: '自动溢出省略,为对象时可设置省略行数与是否可展开等',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
rows: {
label: 'rows',
type: PROPS_TYPES.number,
},
expandable: {
label: 'expandable',
type: PROPS_TYPES.boolean,
},
onExpand: {
label: 'onExpand',
type: PROPS_TYPES.function,
},
},
},
level: {
label: '重要程度',
tip: '重要程度,相当于 h1、h2、h3、h4',
type: PROPS_TYPES.number,
max: 6,
},
mark: {
label: '添加标记样式',
type: PROPS_TYPES.boolean,
},
underline: {
label: '添加下划线样式',
type: PROPS_TYPES.boolean,
},
onChange: {
label: '当用户提交编辑内容时触发',
type: PROPS_TYPES.function,
placeholder: '(string)=>{}',
},
type: {
label: '文本类型',
type: PROPS_TYPES.enum,
enumData: ['secondary', 'warning', 'danger'],
},
},
};
const Paragraph: ComponentConfigTypes = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
copyable: {
label: '是否可拷贝',
tip: '是否可拷贝,为对象时可设置复制文本以回调函数',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
text: {
label: 'text',
type: PROPS_TYPES.string,
onCopy: {
label: 'onCopy',
type: PROPS_TYPES.function,
},
},
},
},
delete: {
label: '添加删除线样式',
type: PROPS_TYPES.boolean,
},
disabled: {
label: '禁用文本',
type: PROPS_TYPES.boolean,
},
editable: {
label: '是否可编辑',
tip: '是否可编辑,为对象时可对编辑进行控制',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
editing: {
label: 'editing',
type: PROPS_TYPES.boolean,
},
onStart: {
label: 'onStart',
type: PROPS_TYPES.function,
},
onChange: {
label: 'onChange',
type: PROPS_TYPES.boolean,
placeholder: '(string)=>{}',
},
},
},
ellipsis: {
label: '设置自动溢出省略',
tip: '自动溢出省略,为对象时可设置省略行数与是否可展开等',
type: [PROPS_TYPES.boolean, PROPS_TYPES.object],
childPropsConfig: {
rows: {
label: 'rows',
type: PROPS_TYPES.number,
},
expandable: {
label: 'expandable',
type: PROPS_TYPES.boolean,
},
onExpand: {
label: 'onExpand',
type: PROPS_TYPES.function,
},
},
},
level: {
label: '重要程度',
tip: '重要程度,相当于 h1、h2、h3、h4',
type: PROPS_TYPES.number,
max: 6,
},
mark: {
label: '添加标记样式',
type: PROPS_TYPES.boolean,
},
underline: {
label: '添加下划线样式',
type: PROPS_TYPES.boolean,
},
onChange: {
label: '当用户提交编辑内容时触发',
type: PROPS_TYPES.function,
placeholder: '(string)=>{}',
},
strong: {
label: '是否加粗',
type: PROPS_TYPES.boolean,
},
type: {
label: '文本类型',
type: PROPS_TYPES.enum,
enumData: ['secondary', 'warning', 'danger'],
},
},
};
export default {
'Typography.Text': Text,
'Typography.Title': Title,
'Typography.Paragraph': Paragraph,
};
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment