{
+ getValueFromKey = (formCtx: any, parentCtx: any) => (key: string) => {
+ return this.props[key] ?? parentCtx[key] ?? formCtx[key];
+ }
+
+ render() {
+ return (
+
+ {formCtx => (
+
+ {parentCtx => }
+
+ )}
+
+ )
+ }
+ }
+}
+
+export default withFormItemHoc;
diff --git a/tools/schema-builder/src/materails/widgets/hoc/FormItemHoc/module.tsx b/tools/schema-builder/src/materails/widgets/hoc/FormItemHoc/module.tsx
new file mode 100644
index 000000000..001f5a00d
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/hoc/FormItemHoc/module.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+export const getLabel = (title: string, description: string) => {
+ return (
+ <>
+ {title}
+ {description && (
+
+ ({description})
+
+ )}
+
+ );
+};
+
+export const getColSpan = (column: number, schema: any) => {
+ let span = 24;
+
+ if (column) {
+ span = 24 / column;
+ }
+
+ // 兼容 1.0 逻辑
+ if (schema.width) {
+ if (schema.width === '100%') {
+ span = 24;
+ } else if (schema.width === '50%') {
+ span = 12;
+ } else if (schema.width === '20%') {
+ span = 5;
+ } else if (schema.width < '50%') {
+ span = 8;
+ }
+ }
+
+ if (schema.cellSpan) {
+ span = schema.cellSpan * span;
+ }
+
+ if (schema.span) {
+ span = schema.span;
+ }
+
+ return span;
+};
\ No newline at end of file
diff --git a/tools/schema-builder/src/materails/widgets/hoc/components/HeaderTitle/index.less b/tools/schema-builder/src/materails/widgets/hoc/components/HeaderTitle/index.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/tools/schema-builder/src/materails/widgets/hoc/components/HeaderTitle/index.tsx b/tools/schema-builder/src/materails/widgets/hoc/components/HeaderTitle/index.tsx
new file mode 100644
index 000000000..235d37ba1
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/hoc/components/HeaderTitle/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.less';
+
+const HeaderTitle = (props: any) => {
+ const { title, description } = props;
+
+ return (
+
+ {title}
+ {description && ( {description} )}
+
+ );
+}
+
+export default HeaderTitle
diff --git a/tools/schema-builder/src/materails/widgets/hoc/components/PanelView/index.less b/tools/schema-builder/src/materails/widgets/hoc/components/PanelView/index.less
new file mode 100644
index 000000000..ba772dc30
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/hoc/components/PanelView/index.less
@@ -0,0 +1,6 @@
+.fr-panel-bordered {
+ border-radius: 4px;
+ border: 1px solid #f4f4f4;
+ padding: 52px 24px 0px 24px;
+ margin-bottom: 24px;
+}
\ No newline at end of file
diff --git a/tools/schema-builder/src/materails/widgets/hoc/components/PanelView/index.tsx b/tools/schema-builder/src/materails/widgets/hoc/components/PanelView/index.tsx
new file mode 100644
index 000000000..58504ba66
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/hoc/components/PanelView/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import classnames from 'classnames'
+import './index.less';
+
+const PanelView = ({ children, bordered } : any) => {
+ return {children}
;
+}
+
+export default PanelView;
diff --git a/tools/schema-builder/src/materails/widgets/index.ts b/tools/schema-builder/src/materails/widgets/index.ts
new file mode 100644
index 000000000..0132574e1
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/index.ts
@@ -0,0 +1,69 @@
+import {
+ Input as AntdInput,
+ InputNumber as AntdInputNumber,
+ Select as AntdSelect,
+ DatePicker as AntdDatePicker,
+ Switch as AntdSwitch,
+ Rate as AntdRate,
+ Cascader as AntdCascader,
+ TimePicker as AntdTimePicker,
+ TreeSelect as AntdTreeSelect,
+ Checkbox as AntdCheckbox,
+ Radio as AntdRadio,
+ Table,
+ Button as AntdButton
+} from 'antd';
+
+import {
+ DatePicker as FDatePicker,
+ DateRange as FDateRange,
+ Color as FColor,
+ Html as FHtml
+} from 'form-render';
+
+import withFormItemHoc from './hoc/FormItemHoc';
+import withColHoc from './hoc/ColHoc';
+
+import FUpload from './components/Upload';
+import FUrlInput from './components/UrlInput';
+import FImageInput from './components/ImageInput';
+import FTimeRange from './components/TimeRange';
+import FTimePicker from './components/TimePicker';
+import FSlider from './components/Slider';
+
+
+export const Input = withFormItemHoc(AntdInput);
+export const InputNumber = withFormItemHoc(AntdInputNumber, {style: { width: '100%'}});
+export const TextArea = withFormItemHoc(AntdInput.TextArea);
+
+export const Select = withFormItemHoc(AntdSelect);
+export const Checkbox = withFormItemHoc(AntdCheckbox);
+export const Checkboxes = withFormItemHoc(AntdCheckbox.Group);
+export const Radio = withFormItemHoc(AntdRadio.Group);
+
+export const DatePicker = withFormItemHoc(FDatePicker, {style: { width: '100%'}});
+export const DateRange = withFormItemHoc(FDateRange, {style: { width: '100%'}});
+export const TimePicker = withFormItemHoc(FTimePicker, {style: { width: '100%'}});
+export const TimeRange = withFormItemHoc(FTimeRange, {style: { width: '100%'}});
+
+export const Switch = withFormItemHoc(AntdSwitch);
+export const Slider = withFormItemHoc(FSlider);
+export const Rate = withFormItemHoc(AntdRate);
+
+export const Cascader = withFormItemHoc(AntdCascader);
+export const TreeSelect = withFormItemHoc(AntdTreeSelect);
+
+export const Button = withFormItemHoc(AntdButton);
+
+
+export const Color = withFormItemHoc(FColor);
+export const UrlInput = withFormItemHoc(FUrlInput);
+export const ImageInput = withFormItemHoc(FImageInput);
+export const Html = withFormItemHoc(FHtml);
+export const Upload = withFormItemHoc(FUpload)
+
+export { default as FormRender } from './components/FormRender';
+export { default as FormItem } from './components/FormItem';
+export { default as Card } from './components/Card';
+export { default as CardList } from './components/CardList';
+export const TableList = withColHoc(Table);
\ No newline at end of file
diff --git a/tools/schema-builder/src/materails/widgets/utils/context.ts b/tools/schema-builder/src/materails/widgets/utils/context.ts
new file mode 100644
index 000000000..1d4f13ff9
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/utils/context.ts
@@ -0,0 +1,7 @@
+import React from "react";
+
+const FormContext = React.createContext({});
+
+export const ParentContext = React.createContext({});
+
+export default FormContext;
diff --git a/tools/schema-builder/src/materails/widgets/utils/hoc.tsx b/tools/schema-builder/src/materails/widgets/utils/hoc.tsx
new file mode 100644
index 000000000..c722d801a
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/utils/hoc.tsx
@@ -0,0 +1,90 @@
+import React, { ComponentType } from 'react';
+import moment from 'moment';
+import { get, set, has } from './index';
+
+function convertProps(
+ props: Record,
+ list: string[],
+ mapper: (v: any, key: string) => any,
+) {
+ const out: Record = {};
+ list.forEach(key => {
+ if (has(props, key)) {
+ set(out, key, mapper(get(props, key), key));
+ }
+ });
+ return out;
+}
+
+/**
+ * 简单包装，不做任何处理
+ * 部分组件ref比较特殊，包一层会解决这个问题
+ */
+export function withWrap(Comp: any) {
+ return (props: any) => {
+ return ;
+ };
+}
+
+/**
+ * 某些组件会用React.Children.only检查子节点
+ * 需要做处理避免报错
+ */
+export function withSingleChild(
+ Comp: any,
+ needsConvert = ['children'],
+) {
+ return (props: any) => {
+ const convertedProps = convertProps(props, needsConvert, prop => {
+ let node = React.Children.toArray(prop)[0];
+ if (node === null || typeof node !== 'object') {
+ node = {node}
;
+ }
+ return node;
+ });
+
+ return ;
+ };
+}
+
+export function withSingleFunctionChild(Comp: any) {
+ return (props: any) => {
+ const { children } = props;
+
+ let node;
+ if (typeof children === 'function') {
+ node = children;
+ }
+ if (
+ Array.isArray(children) &&
+ children.length === 1 &&
+ typeof children[0] === 'function'
+ ) {
+ node = children[0];
+ }
+
+ if (node) {
+ return {node};
+ }
+ return {children}
;
+ };
+}
+
+/**
+ * moment对象在序列化后会被转为字符串
+ * 需要让日期类组件支持接受字符串值
+ */
+export function withMomentProps(Comp: any, needsConvert = ['value', 'defaultValue']) {
+ return (props: any) => {
+ const convertedProps = convertProps(props, needsConvert, prop => {
+ if (prop) {
+ if (Array.isArray(prop)) {
+ return prop.map(v => (moment.isMoment(v) ? v : moment(v)));
+ }
+ return moment.isMoment(prop) ? prop : moment(prop);
+ }
+ });
+
+ return ;
+ };
+}
diff --git a/tools/schema-builder/src/materails/widgets/utils/index.ts b/tools/schema-builder/src/materails/widgets/utils/index.ts
new file mode 100644
index 000000000..450bb43bd
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/utils/index.ts
@@ -0,0 +1,29 @@
+export { default as get } from 'lodash/get';
+export { default as set } from 'lodash/set';
+export { default as has } from 'lodash/has';
+export { default as isNumber } from 'lodash/isNumber';
+
+
+// simple uuid
+export function uuid() {
+ return ((Math.random() * 1e6) >> 0).toString(36);
+}
+
+export function isObject (value: any) {
+ return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+export function getStringToNumber (str: any) {
+ const reg = /^[\d]+$/;
+ if (reg.test(str)) {
+ return parseInt(str);
+ }
+ return str;
+}
+
+export function isUrl(url: string) {
+ const protocolRE = /^(?:\w+:)?\/\/(\S+)$/;
+ // const domainRE = /^[^\s\.]+\.\S{2,}$/;
+ if (typeof url !== 'string') return false;
+ return protocolRE.test(url);
+}
\ No newline at end of file
diff --git a/tools/schema-builder/src/materails/widgets/utils/layout.ts b/tools/schema-builder/src/materails/widgets/utils/layout.ts
new file mode 100644
index 000000000..7b60284c8
--- /dev/null
+++ b/tools/schema-builder/src/materails/widgets/utils/layout.ts
@@ -0,0 +1,68 @@
+export default (column: number, schema: any, { labelWidth, displayType, _labelCol, _fieldCol }: any) => {
+ let labelCol: any = { span: 5 };
+ let fieldCol: any = { span: 9 };
+
+ if (column === 2) {
+ labelCol = { span: 6 };
+ fieldCol = { span: 14 }
+ }
+
+ if (column > 2) {
+ labelCol = { span: 7 };
+ fieldCol = { span: 16 }
+ }
+
+ if (displayType === 'column') {
+ labelCol = {};
+ fieldCol = {};
+ }
+
+ if (_labelCol) {
+ labelCol = _labelCol;
+ if (displayType === 'column') {
+ labelCol = {};
+ }
+ }
+
+ if (_fieldCol) {
+ fieldCol = _fieldCol;
+ if (typeof _fieldCol === 'number') {
+ fieldCol = { span: _fieldCol }
+ }
+ }
+
+ if (displayType === 'inline') {
+ labelCol = {};
+ fieldCol = {};
+ }
+
+ // 兼容一下 1.0 版本
+ if (labelWidth && displayType !== 'column') {
+ labelCol = { flex : labelWidth + 'px' };
+ fieldCol = { flex: 'auto' };
+ }
+
+ // 自定义进行覆盖
+ if (schema.cellSpan) {
+ fieldCol = {};
+ }
+
+
+ if (schema.labelCol) {
+ labelCol = schema.labelCol;
+ }
+
+ if (schema.fieldCol) {
+ fieldCol = schema.fieldCol;
+ }
+
+ if (typeof labelCol === 'number') {
+ labelCol = { span: labelCol }
+ }
+
+ if (typeof fieldCol === 'number') {
+ fieldCol = { span: fieldCol }
+ }
+
+ return { labelCol, fieldCol }
+}
\ No newline at end of file