form-render-v3 3.0.0-alpha.1

package/es/widgets/boxCollapse/index.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import './index.less';
+interface IProps {
+    className?: any;
+    style?: object;
+    children: any;
+    title?: string;
+    description?: any;
+    collapsed?: boolean;
+    displayType?: any;
+    bordered?: boolean;
+    ghost?: boolean;
+}
+/**
+ * 折叠面板
+ */
+declare const BoxCollapse: FC<IProps>;
+export default BoxCollapse;

package/es/widgets/boxCollapse/index.js

@@ -0,0 +1,70 @@
+import _DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
+import "antd/es/collapse/style";
+import _Collapse from "antd/es/collapse";
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import "./index.css";
+import BoxPanel from '../components/PanelView';
+var Panel = _Collapse.Panel;
+/**
+ * 折叠面板
+ */
+var BoxCollapse = function BoxCollapse(props) {
+  var style = props.style,
+    children = props.children,
+    title = props.title,
+    description = props.description,
+    _props$collapsed = props.collapsed,
+    collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
+    displayType = props.displayType,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? false : _props$bordered,
+    _props$ghost = props.ghost,
+    ghost = _props$ghost === void 0 ? true : _props$ghost;
+  if (!title) {
+    return /*#__PURE__*/React.createElement(BoxPanel, {
+      bordered: displayType !== 'inline'
+    }, children);
+  }
+  var _useState = useState(collapsed ? 'single' : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var collapseHeader = /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement("div", {
+    className: 'collapse-title'
+  }, title), description && /*#__PURE__*/React.createElement("span", {
+    className: 'fr-header-desc '
+  }, description));
+  var renderExpandIcon = function renderExpandIcon(_ref) {
+    var isActive = _ref.isActive;
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'expand-icon-box'
+    }, /*#__PURE__*/React.createElement(_DownOutlined, {
+      rotate: isActive ? 0 : -90,
+      style: {
+        fontSize: '16px'
+      }
+    }));
+  };
+  return /*#__PURE__*/React.createElement(_Collapse, {
+    className: 'fr-obj-collapse',
+    style: style,
+    bordered: bordered,
+    ghost: ghost,
+    activeKey: [activeKey],
+    expandIcon: renderExpandIcon,
+    onChange: function onChange() {
+      return setActiveKey(activeKey ? '' : 'single');
+    }
+  }, /*#__PURE__*/React.createElement(Panel, {
+    key: 'single',
+    header: collapseHeader,
+    forceRender: true
+  }, children));
+};
+export default BoxCollapse;

package/es/widgets/boxLineTitle/index.css

@@ -0,0 +1,18 @@
+.fr-obj-line-title .fr-obj-header {
+  line-height: 36px;
+  border-bottom: 1px solid #e9e9e9;
+}
+.fr-obj-line-title .fr-header-title {
+  color: #000000e0;
+  font-size: 16px;
+  font-weight: 600;
+}
+.fr-obj-line-title .fr-header-desc {
+  word-break: break-all;
+  color: rgba(0, 0, 0, 0.45);
+  margin-left: 6px;
+  font-weight: normal;
+}
+.fr-obj-line-title .fr-obj-content {
+  padding: 24px 0 0 0;
+}

package/es/widgets/boxLineTitle/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+declare const FLineTitle: ({ children, title, description }: {
+    children: any;
+    title: any;
+    description: any;
+}) => React.JSX.Element;
+export default FLineTitle;

package/es/widgets/boxLineTitle/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PanelView from '../components/PanelView';
+import "./index.css";
+var FLineTitle = function FLineTitle(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    description = _ref.description;
+  if (!title) {
+    return /*#__PURE__*/React.createElement(PanelView, null, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'fr-obj-line-title'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'fr-obj-header'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: 'fr-header-title'
+  }, title), description && /*#__PURE__*/React.createElement("span", {
+    className: 'fr-header-desc'
+  }, description)), /*#__PURE__*/React.createElement("div", {
+    className: 'fr-obj-content'
+  }, children));
+};
+export default FLineTitle;

package/es/widgets/boxSubInline/index.css

@@ -0,0 +1,11 @@
+.fr-obj-subinline-label-hidden > .ant-form-item-row > .ant-form-item-label {
+  visibility: hidden;
+}
+.fr-obj-subinline-background > .ant-form-item-row > .ant-form-item-control {
+  background-color: #f6f6f6;
+  padding: 24px 24px 0 24px;
+  border-radius: 4px;
+}
+.fr-obj-subinline .ant-form-item-row {
+  flex-wrap: nowrap;
+}

package/es/widgets/boxSubInline/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const BoxSubInline: (props: any) => React.JSX.Element;
+export default BoxSubInline;

package/es/widgets/boxSubInline/index.js

@@ -0,0 +1,56 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import { __rest } from "tslib";
+import React from 'react';
+import classnames from 'classnames';
+import "./index.css";
+var BoxSubInline = function BoxSubInline(props) {
+  var children = props.children,
+    title = props.title,
+    _props$hasBackground = props.hasBackground,
+    hasBackground = _props$hasBackground === void 0 ? true : _props$hasBackground,
+    description = props.description,
+    tooltip = props.tooltip,
+    fieldCol = props.fieldCol,
+    labelCol = props.labelCol,
+    labelWidth = props.labelWidth,
+    displayType = props.displayType,
+    rest = __rest(props, ["children", "title", "hasBackground", "description", "tooltip", "fieldCol", "labelCol", "labelWidth", "displayType"]);
+  var _tooltip = null;
+  var _labelCol = {
+    span: 3
+  };
+  var _fieldCol = {
+    flex: 1
+  };
+  if (description) {
+    _tooltip = {
+      title: description
+    };
+  }
+  if (tooltip) {
+    _tooltip = tooltip;
+  }
+  if (labelWidth) {
+    _labelCol = {
+      flex: labelWidth + 'px'
+    };
+  }
+  if (labelCol) {
+    _labelCol = labelCol;
+  }
+  if (fieldCol) {
+    _fieldCol = fieldCol;
+  }
+  return /*#__PURE__*/React.createElement(_Form.Item, Object.assign({}, rest, {
+    className: classnames('fr-obj-subinline', {
+      'fr-obj-subinline-label-hidden': !title,
+      'fr-obj-subinline-background': hasBackground
+    }),
+    label: title || 'notitle',
+    labelCol: _labelCol,
+    wrapperCol: _fieldCol,
+    tooltip: _tooltip
+  }), children);
+};
+export default BoxSubInline;

package/es/widgets/boxcard/index.css

@@ -0,0 +1,17 @@
+.fr-obj-card {
+  border-radius: 4px;
+  border-color: #f4f4f4;
+  margin-bottom: 24px !important;
+}
+.fr-obj-card .ant-card-head {
+  border: none;
+}
+.fr-obj-card .ant-card-body {
+  padding: 12px 24px !important;
+}
+.fr-obj-card .fr-header-desc {
+  word-break: break-all;
+  color: rgba(0, 0, 0, 0.45);
+  margin-left: 6px;
+  font-weight: normal;
+}

package/es/widgets/boxcard/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+declare const BoxCard: ({ children, title, description }: {
+    children: any;
+    title: any;
+    description: any;
+}) => React.JSX.Element;
+export default BoxCard;

package/es/widgets/boxcard/index.js

@@ -0,0 +1,20 @@
+import "antd/es/card/style";
+import _Card from "antd/es/card";
+import React from 'react';
+import BoxPanel from '../components/PanelView';
+import "./index.css";
+var BoxCard = function BoxCard(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    description = _ref.description;
+  if (!title) {
+    return /*#__PURE__*/React.createElement(BoxPanel, null, children);
+  }
+  return /*#__PURE__*/React.createElement(_Card, {
+    className: 'fr-obj-card',
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, title, description && (/*#__PURE__*/React.createElement("span", {
+      className: 'fr-header-desc '
+    }, description)))
+  }, children);
+};
+export default BoxCard;

package/es/widgets/components/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+import 'antd/es/date-picker/style/index';
+declare const DatePicker: any;
+export default DatePicker;

package/es/widgets/components/DatePicker/index.js

@@ -0,0 +1,15 @@
+import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import 'antd/es/date-picker/style/index';
+// 修复 dayjs 生成配置中缺失的毫秒相关方法
+var enhancedDayjsConfig = Object.assign(Object.assign({}, dayjsGenerateConfig), {
+  // 添加缺失的毫秒相关方法
+  getMillisecond: function getMillisecond(date) {
+    return date.millisecond();
+  },
+  setMillisecond: function setMillisecond(date, millisecond) {
+    return date.millisecond(millisecond);
+  }
+});
+var DatePicker = generatePicker(enhancedDayjsConfig);
+export default DatePicker;

package/es/widgets/components/FButton/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const HeaderTitle: (props: any) => React.JSX.Element;
+export default HeaderTitle;

package/es/widgets/components/FButton/index.js

@@ -0,0 +1,24 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import { __rest } from "tslib";
+import React from 'react';
+var HeaderTitle = function HeaderTitle(props) {
+  var icon = props.icon,
+    children = props.children,
+    btnType = props.btnType,
+    otherProps = __rest(props, ["icon", "children", "btnType"]);
+  var btnProps = Object.assign({}, otherProps);
+  if (btnType === 'icon') {
+    btnProps.icon = icon;
+    btnProps.size = 'small';
+  } else {
+    btnProps.children = children;
+  }
+  return /*#__PURE__*/React.createElement(_Button, Object.assign({
+    type: 'link',
+    style: {
+      padding: 0
+    }
+  }, btnProps));
+};
+export default HeaderTitle;

package/es/widgets/components/HeaderTitle/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const HeaderTitle: (props: any) => React.JSX.Element;
+export default HeaderTitle;

package/es/widgets/components/HeaderTitle/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import "./index.css";
+var HeaderTitle = function HeaderTitle(props) {
+  var title = props.title,
+    description = props.description;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'fr-obj-header'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: 'fr-header-title'
+  }, title), description && /*#__PURE__*/React.createElement("span", {
+    className: 'fr-header-desc'
+  }, "( ", description, " )"));
+};
+export default HeaderTitle;

package/es/widgets/components/PanelView/index.css

@@ -0,0 +1,6 @@
+.fr-panel-bordered {
+  border-radius: 4px;
+  border: 1px solid #f4f4f4;
+  padding: 52px 24px 0px 24px;
+  margin-bottom: 24px;
+}

package/es/widgets/components/PanelView/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const PanelView: ({ children, bordered }: any) => React.JSX.Element;
+export default PanelView;

package/es/widgets/components/PanelView/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classnames from 'classnames';
+import "./index.css";
+var PanelView = function PanelView(_ref) {
+  var children = _ref.children,
+    bordered = _ref.bordered;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('fr-panel', {
+      'fr-panel-bordered': bordered
+    })
+  }, children);
+};
+export default PanelView;

package/es/widgets/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+declare const TimePicker: any;
+export default TimePicker;

package/es/widgets/components/TimePicker/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import DatePicker from '../DatePicker';
+var TimePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, props, {
+    picker: 'time',
+    mode: undefined,
+    ref: ref
+  }));
+});
+TimePicker.displayName = 'TimePicker';
+TimePicker.RangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(DatePicker.RangePicker, Object.assign({}, props, {
+    picker: 'time',
+    mode: undefined,
+    ref: ref
+  }));
+});
+export default TimePicker;

package/es/widgets/fields/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/es/widgets/fields/checkbox/index.js

@@ -0,0 +1,15 @@
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
+import { __rest } from "tslib";
+import React from 'react';
+import withFieldWrap from '../../utils/withFieldWrap';
+var CheckBox = function CheckBox(_a) {
+  var title = _a.title,
+    rest = __rest(_a, ["title"]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Checkbox, Object.assign({}, rest)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: '12px'
+    }
+  }, title));
+};
+export default withFieldWrap(CheckBox);

package/es/widgets/fields/checkboxes/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/es/widgets/fields/checkboxes/index.js

@@ -0,0 +1,31 @@
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
+import { __rest } from "tslib";
+import React from 'react';
+import withFieldWrap from '../../utils/withFieldWrap';
+var Checkboxes = function Checkboxes(props) {
+  var _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'row' : _props$direction,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    rest = __rest(props, ["direction", "options"]);
+  if (direction === 'column') {
+    return /*#__PURE__*/React.createElement(_Checkbox.Group, Object.assign({}, rest), /*#__PURE__*/React.createElement(_Space, {
+      direction: 'vertical'
+    }, options.map(function (item) {
+      var value = item.value,
+        label = item.label,
+        rest = __rest(item, ["value", "label"]);
+      return /*#__PURE__*/React.createElement(_Checkbox, Object.assign({
+        key: value,
+        value: value
+      }, rest), label);
+    })));
+  }
+  return /*#__PURE__*/React.createElement(_Checkbox.Group, Object.assign({}, rest, {
+    options: options
+  }));
+};
+export default withFieldWrap(Checkboxes);

package/es/widgets/fields/date/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/es/widgets/fields/date/index.js

@@ -0,0 +1,45 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { getFormat, transformDateValue } from '../../utils';
+import DatePicker from '../../components/DatePicker';
+import withFieldWrap from '../../utils/withFieldWrap';
+dayjs.extend(quarterOfYear);
+var DateCmpt = function DateCmpt(_a) {
+  var onChange = _a.onChange,
+    format = _a.format,
+    value = _a.value,
+    style = _a.style,
+    rest = __rest(_a, ["onChange", "format", "value", "style"]);
+  var dateFormat = getFormat(format);
+  var valueObj = useMemo(function () {
+    return transformDateValue(value, format, dateFormat);
+  }, [value]);
+  var handleChange = function handleChange(dateValue, dateString) {
+    var newValue = dateString;
+    if (format === 'week' || format === 'quarter') {
+      newValue = dayjs(dateValue).format(dateFormat);
+    }
+    onChange(newValue);
+  };
+  var dateParams = {
+    value: valueObj,
+    style: Object.assign({
+      width: '100%'
+    }, style),
+    onChange: handleChange
+  };
+  // TODO: format 是在 options 里自定义的情况，是否要判断一下要不要 showTime
+  if (format === 'dateTime') {
+    dateParams.showTime = true;
+  }
+  if (['week', 'month', 'quarter', 'year'].indexOf(format) > -1) {
+    dateParams.picker = format;
+  }
+  if (dateFormat === format) {
+    dateParams.format = format;
+  }
+  return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, dateParams, rest));
+};
+export default withFieldWrap(DateCmpt);

package/es/widgets/fields/dateRange/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Updated by Tw93 on 2019-12-08.
+ * 日历多选组件
+ */
+import React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/es/widgets/fields/dateRange/index.js

@@ -0,0 +1,64 @@
+import { __rest } from "tslib";
+/**
+ * Updated by Tw93 on 2019-12-08.
+ * 日历多选组件
+ */
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import DatePicker from '../../components/DatePicker';
+import { getFormat, transformDateValue } from '../../utils';
+import withFieldWrap from '../../utils/withFieldWrap';
+dayjs.extend(quarterOfYear);
+var RangePicker = DatePicker.RangePicker;
+var DateRange = function DateRange(_a) {
+  var onChange = _a.onChange,
+    format = _a.format,
+    value = _a.value,
+    style = _a.style,
+    rest = __rest(_a, ["onChange", "format", "value", "style"]);
+  var dateFormat = getFormat(format);
+  var valueObj = useMemo(function () {
+    if (!value) {
+      return value;
+    }
+    return value.map(function (item) {
+      return transformDateValue(item, format, dateFormat);
+    });
+  }, [value]);
+  var handleChange = function handleChange(val, _stringList) {
+    var stringList = _stringList;
+    if (['week', 'quarter'].includes(format)) {
+      stringList = (val || []).map(function (item) {
+        return dayjs(item).format(dateFormat);
+      });
+    }
+    var isPass = stringList.every(function (item) {
+      return !!item;
+    });
+    if (!isPass) {
+      stringList = null;
+    }
+    onChange(stringList);
+  };
+  var dateParams = {
+    value: valueObj,
+    style: Object.assign({
+      width: '100%'
+    }, style),
+    onChange: handleChange
+  };
+  // TODO: format是在options里自定义的情况，是否要判断一下要不要showTime
+  if (format === 'dateTime') {
+    dateParams.showTime = true;
+  }
+  if (['week', 'month', 'quarter', 'year'].indexOf(format) > -1) {
+    dateParams.picker = format;
+  }
+  dateParams = Object.assign(Object.assign({}, dateParams), rest);
+  if (dateFormat === format) {
+    dateParams.format = format;
+  }
+  return /*#__PURE__*/React.createElement(RangePicker, Object.assign({}, dateParams));
+};
+export default withFieldWrap(DateRange);

package/es/widgets/fields/html/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function html({ value, checked, options, schema }: any): React.JSX.Element;

package/es/widgets/fields/html/index.js

@@ -0,0 +1,53 @@
+import "antd/es/image/style";
+import _Image from "antd/es/image";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React from 'react';
+export default function html(_ref) {
+  var value = _ref.value,
+    checked = _ref.checked,
+    options = _ref.options,
+    _ref$schema = _ref.schema,
+    schema = _ref$schema === void 0 ? {} : _ref$schema;
+  var __html = '-';
+  if (schema.type === 'boolean') {
+    __html = value === true || checked === true ? '✔' : '✘';
+  } else if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
+    if (['string', 'number'].indexOf(_typeof(value)) > -1) {
+      var item = options.find(function (item) {
+        return item.value === value;
+      });
+      __html = (item === null || item === void 0 ? void 0 : item.label) || '-';
+    } else if (Array.isArray(value)) {
+      var idxStr = '-';
+      value.forEach(function (v) {
+        var item = options.find(function (item) {
+          return item.value === v;
+        });
+        var name = item.label;
+        if (name) {
+          idxStr += ',' + name;
+        }
+      });
+      __html = idxStr.replace('-,', '');
+    }
+  } else if (typeof value === 'number') {
+    __html = String(value);
+  } else if (typeof value === 'string') {
+    __html = value;
+  } else if (schema.type === 'range' && Array.isArray(value) && value[0] && value[1]) {
+    __html = "".concat(value[0], " - ").concat(value[1]);
+  } else if (value && ['number', 'string'].indexOf(_typeof(value)) === -1) {
+    __html = JSON.stringify(value);
+  }
+  if (schema.format === 'image') {
+    return /*#__PURE__*/React.createElement(_Image, Object.assign({
+      height: 56,
+      src: value
+    }, schema.imageProps));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: __html
+    }
+  });
+}

package/es/widgets/fields/imageInput/index.css

@@ -0,0 +1,7 @@
+.fr-preview-image {
+  width: 160px;
+}
+.fr-preview {
+  position: relative;
+  cursor: pointer;
+}

package/es/widgets/fields/imageInput/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;