jjb-lc-designable/react/containers/Layout.js

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

import React, { useContext, Fragment, useRef, useLayoutEffect } from 'react';
import { each } from 'jjb-lc-designable/shared';
import { DesignerLayoutContext } from '../context';
import cls from 'classnames';
export const Layout = props => {
  const layout = useContext(DesignerLayoutContext);
  const ref = useRef();
  useLayoutEffect(() => {
    if (ref.current) {
      each(props.variables, (value, key) => {
        ref.current.style.setProperty(`--${key}`, value);
      });
    }
  }, []);
  if (layout) {
    // @ts-ignore
    return /*#__PURE__*/React.createElement(Fragment, null, props.children);
  }
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: cls({
      [`${props.prefixCls}app`]: true,
      [`${props.prefixCls}${props.theme}`]: props.theme
    })
  }, /*#__PURE__*/React.createElement(DesignerLayoutContext.Provider, {
    value: {
      theme: props.theme,
      prefixCls: props.prefixCls,
      position: props.position
    }
  }, props.children));
};
Layout.defaultProps = {
  theme: 'light',
  prefixCls: 'dn-',
  position: 'fixed'
};