v0.1

Author: nobo

README.md

@@ -85,8 +85,8 @@ export default class MultipleInputField extends React.Component {
                     />
                 </div>
                 <div className="multi-input-tools">
-                    <Icon type="add" onClick={this.onAddItem.bind(this, i)} />
-                    <Icon type="remove" onClick={this.onRemoveItem.bind(this, i)} />
+                    <Icon type="add" onClick={this.onAddItem.bind(this, i)}>+</Icon>
+                    <Icon type="remove" onClick={this.onRemoveItem.bind(this, i)}>-</Icon>
                 </div>
             </div>
         );

src/components/Form/Form.js renamed to demo/components/Form/Form.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 
 import FormDesigner from '../src';
 
+import widgets from './widgets';
+
 import '../src/style';
 
 function App() {
@@ -16,7 +18,11 @@ function App() {
             width: 1400,
             minHeight: 500
         }}>
-            <FormDesigner metadata={metadata} onChange={onMetadataChange} />
+            <FormDesigner
+                widgets={widgets}
+                metadata={metadata}
+                onChange={onMetadataChange}
+            />
         </div>
     );
 }

src/components/Form/FormContext.js renamed to demo/components/Form/FormContext.js

@@ -1,7 +1,3 @@
 export function uuid() {
     return Math.random().toString(16).slice(2, 8);
 }
-
-export function isWidget(widget) {
-    return !!widget.$$widget;
-}

src/components/Form/FormItem.js renamed to demo/components/Form/FormItem.js

@@ -4,6 +4,7 @@ import {
     FormItem,
     NativeField,
 } from 'components/Form';
+
 import 'components/Form/style/index.scss';
 
 export default class PropertyPanel extends React.Component {

src/components/Form/NativeField.js renamed to demo/components/Form/NativeField.js

@@ -3,20 +3,19 @@ import {
     FormItem,
     NativeField,
 } from 'components/Form';
-import 'components/Form/style/index.scss';
 import {
     MultipleInputField,
-    DisplayField,
-    WidthInputField
 } from 'components/FormField';
 
+import PropertyForm from '../PropertyForm';
+
 import CommonPropertyPanel from '../common/CommonPropertyPanel';
 import ValidatePropertyPanel from '../common/ValidatePropertyPanel';
 
-export default function () {
+export default function (props) {
 
     return (
-        <div>
+        <PropertyForm {...props}>
             <CommonPropertyPanel />
             <FormItem
                 className="design-property-field"
@@ -26,6 +25,6 @@ export default function () {
                 <MultipleInputField />
             </FormItem>
             <ValidatePropertyPanel />
-        </div>
+        </PropertyForm>
     );
 }

src/components/Form/index.js renamed to demo/components/Form/index.js

@@ -0,0 +1,36 @@
+import PropertyPanel from './PropertyPanel';
+
+import data from '../common/data';
+import icon from './icon.png';
+
+const XType = 'EX_SELECT_FIELD';
+const Title = '单选列表';
+
+export default {
+    xtype: XType,
+    title: Title,
+    icon: icon,
+    WidgetProperty: PropertyPanel,
+
+    data() {
+        return {
+            ...data(),
+            xtype: XType,
+            title: Title,
+            data: [
+                {
+                    value: '选项1',
+                    label: '选项1',
+                },
+                {
+                    value: '选项2',
+                    label: '选项2',
+                },
+                {
+                    value: '选项3',
+                    label: '选项3',
+                }
+            ]
+        }
+    }
+};

src/components/Form/style/Form.scss renamed to demo/components/Form/style/Form.scss

@@ -3,20 +3,16 @@ import {
     FormItem,
     NativeField,
 } from 'components/Form';
-import 'components/Form/style/index.scss';
-import {
-    MultipleInputField,
-    DisplayField,
-    WidthInputField
-} from 'components/FormField';
+
+import PropertyForm from '../PropertyForm';
 
 import CommonPropertyPanel from '../common/CommonPropertyPanel';
 import ValidatePropertyPanel from '../common/ValidatePropertyPanel';
 
-export default function () {
+export default function (props) {
 
     return (
-        <div>
+        <PropertyForm {...props}>
             <CommonPropertyPanel />
             <FormItem
                 className="design-property-field"
@@ -28,6 +24,6 @@ export default function () {
                 />
             </FormItem>
             <ValidatePropertyPanel />
-        </div>
+        </PropertyForm>
     );
 }

src/components/Form/style/FormItem.scss renamed to demo/components/Form/style/FormItem.scss

@@ -0,0 +1,23 @@
+import PropertyPanel from './PropertyPanel';
+
+import data from '../common/data';
+import icon from './icon.png';
+
+const XType = 'EX_TEXTAREA_FIELD';
+const Title = '多行文本';
+
+export default {
+    xtype: "EX_TEXTAREA_FIELD",
+    title: "多行文本",
+    icon: icon,
+    WidgetProperty: PropertyPanel,
+
+    data() {
+        return {
+            ...data(),
+            xtype: XType,
+            title: Title,
+            height: '70'
+        }
+    }
+};

src/components/Form/style/_mixins.scss renamed to demo/components/Form/style/_mixins.scss

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropertyForm from '../PropertyForm';
+
+import CommonPropertyPanel from '../common/CommonPropertyPanel';
+import ValidatePropertyPanel from '../common/ValidatePropertyPanel';
+
+export default function (props) {
+
+    return (
+        <PropertyForm {...props}>
+            <CommonPropertyPanel />
+            <ValidatePropertyPanel />
+        </PropertyForm>
+    );
+}

src/components/Form/style/_var.scss renamed to demo/components/Form/style/_var.scss

@@ -0,0 +1,21 @@
+import data from '../common/data';
+import PropertyPanel from './PropertyPanel';
+import icon from './icon.png';
+
+const XType = 'EX_TEXT_FIELD';
+const Title = '文本';
+
+export default {
+    xtype: "EX_URL_FIELD",
+    title: "URL",
+    icon: icon,
+    WidgetProperty: PropertyPanel,
+
+    data() {
+        return {
+            ...data(),
+            xtype: XType,
+            title: Title,
+        }
+    }
+};

src/components/Form/style/index.scss renamed to demo/components/Form/style/index.scss

@@ -1,19 +1,19 @@
 import TextField from './TextField';
-// import TextareaField from './TextareaField';
-// import SelectField from './SelectField';
+import TextareaField from './TextareaField';
+import SelectField from './SelectField';
 // import MultiSelectField from './MultiSelectField';
 // import NumberField from './NumberField';
 // import DateField from './DateField';
-// import URLField from './URLField';
+import URLField from './URLField';
 // import FileField from './FileField';
 
 export default [
     TextField,
-    // TextareaField,
-    // SelectField,
+    TextareaField,
+    SelectField,
     // MultiSelectField,
     // NumberField,
     // DateField,
-    // URLField,
+    URLField,
     // FileField,
 ];