jjb-lc-designable/react-settings-form/components/InputItems/index.js

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

import React, { useContext } from 'react';
import { usePrefix, IconWidget } from 'jjb-lc-designable/react';
import cls from 'classnames';
import './styles.less';
const InputItemsContext = /*#__PURE__*/React.createContext(null);
export const InputItems = props => {
  const prefix = usePrefix('input-items');
  return /*#__PURE__*/React.createElement(InputItemsContext.Provider, {
    value: props
  }, /*#__PURE__*/React.createElement("div", {
    className: cls(prefix, props.className),
    style: props.style
  }, props.children));
};
InputItems.defaultProps = {
  width: '100%'
};
InputItems.Item = props => {
  const prefix = usePrefix('input-items-item');
  const ctx = useContext(InputItemsContext);
  return /*#__PURE__*/React.createElement("div", {
    className: cls(prefix, props.className, {
      vertical: props.vertical || ctx.vertical
    }),
    style: {
      width: props.width || ctx.width,
      ...props.style
    }
  }, props.icon && /*#__PURE__*/React.createElement("div", {
    className: prefix + '-icon'
  }, /*#__PURE__*/React.createElement(IconWidget, {
    infer: props.icon,
    size: 16
  })), props.title && /*#__PURE__*/React.createElement("div", {
    className: prefix + '-title'
  }, props.title), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-controller'
  }, props.children));
};