jjb-lc-designable/formily-antd/components/Form/preview.js

基于alibaba-designable源码二次封装的表单设计器。

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, { useMemo } from 'react';
import { createBehavior, createResource } from 'jjb-lc-designable/core';
import { createForm } from 'jjb-lc-formily/core';
import { observer } from 'jjb-lc-formily/react';
import { Form as FormilyForm } from 'jjb-lc-formily/antd';
import { usePrefix } from 'jjb-lc-designable/react';
import { AllSchemas } from '../../schemas';
import { AllLocales } from '../../locales';
import './styles.less';
export const Form = observer(props => {
  const prefix = usePrefix('designable-form');
  const form = useMemo(() => createForm({
    designable: true
  }), []);
  return /*#__PURE__*/React.createElement(FormilyForm, _extends({}, props, {
    style: {
      ...props.style
    },
    className: prefix,
    form: form
  }), props.children);
});
Form.Behavior = createBehavior({
  name: 'Form',
  selector: node => node.componentName === 'Form',
  designerProps(node) {
    return {
      draggable: !node.isRoot,
      cloneable: !node.isRoot,
      deletable: !node.isRoot,
      droppable: true,
      propsSchema: {
        type: 'object',
        properties: {
          ...AllSchemas.FormLayout.properties,
          style: AllSchemas.CSSStyle
        }
      },
      defaultProps: {
        labelCol: 6,
        wrapperCol: 12
      }
    };
  },
  designerLocales: AllLocales.Form
});
Form.Resource = createResource({
  title: {
    'zh-CN': '表单',
    'en-US': 'Form'
  },
  icon: 'FormLayoutSource',
  elements: [{
    componentName: 'Field',
    props: {
      type: 'object',
      'x-component': 'Form'
    }
  }]
});