jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
117 lines • 3.9 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { FormGrid as FormilyGird } from 'jjb-lc-formily/antd';
import { TreeNode, createBehavior, createResource } from 'jjb-lc-designable/core';
import { useTreeNode, useNodeIdProps, DroppableWidget } from 'jjb-lc-designable/react';
import { observer } from 'jjb-lc-formily/reactive-react';
import { LoadTemplate } from '../../common/LoadTemplate';
import { createFieldSchema } from '../Field';
import { AllSchemas } from '../../schemas';
import { AllLocales } from '../../locales';
import './styles.less';
export const FormGrid = observer(props => {
const node = useTreeNode();
const nodeId = useNodeIdProps();
if (node.children.length === 0) return /*#__PURE__*/React.createElement(DroppableWidget, props);
return /*#__PURE__*/React.createElement("div", _extends({}, nodeId, {
className: "dn-grid"
}), /*#__PURE__*/React.createElement(FormilyGird, props, props.children), /*#__PURE__*/React.createElement(LoadTemplate, {
actions: [{
title: node.getMessage('addGridColumn'),
icon: 'AddColumn',
onClick: () => {
const column = new TreeNode({
componentName: 'Field',
props: {
type: 'void',
'x-component': 'FormGrid.GridColumn'
}
});
node.append(column);
}
}]
}));
});
FormGrid.GridColumn = observer(({
gridSpan,
...props
}) => {
return (
/*#__PURE__*/
// @ts-ignore
React.createElement(DroppableWidget, _extends({}, props, {
"data-grid-span": gridSpan
}), props.children)
);
});
FormGrid.Behavior = createBehavior({
name: 'FormGrid',
extends: ['Field'],
selector: node => node.props['x-component'] === 'FormGrid',
designerProps: {
droppable: true,
allowDrop: node => node.props['x-component'] !== 'FormGrid',
propsSchema: createFieldSchema(AllSchemas.FormGrid)
},
designerLocales: AllLocales.FormGrid
}, {
name: 'FormGrid.GridColumn',
extends: ['Field'],
selector: node => node.props['x-component'] === 'FormGrid.GridColumn',
designerProps: {
droppable: true,
resizable: {
width(node) {
const span = Number(node.props['x-component-props']?.gridSpan ?? 1);
return {
plus: () => {
if (span + 1 > 12) return;
node.props['x-component-props'] = node.props['x-component-props'] || {};
node.props['x-component-props'].gridSpan = span + 1;
},
minus: () => {
if (span - 1 < 1) return;
node.props['x-component-props'] = node.props['x-component-props'] || {};
node.props['x-component-props'].gridSpan = span - 1;
}
};
}
},
resizeXPath: 'x-component-props.gridSpan',
resizeStep: 1,
resizeMin: 1,
resizeMax: 12,
allowDrop: node => node.props['x-component'] === 'FormGrid',
propsSchema: createFieldSchema(AllSchemas.FormGrid.GridColumn)
},
designerLocales: AllLocales.FormGridColumn
});
FormGrid.Resource = createResource({
icon: 'GridSource',
elements: [{
componentName: 'Field',
props: {
type: 'void',
'x-component': 'FormGrid'
},
children: [{
componentName: 'Field',
props: {
type: 'void',
'x-component': 'FormGrid.GridColumn'
}
}, {
componentName: 'Field',
props: {
type: 'void',
'x-component': 'FormGrid.GridColumn'
}
}, {
componentName: 'Field',
props: {
type: 'void',
'x-component': 'FormGrid.GridColumn'
}
}]
}]
});