codemirror improve

components/modal_v2/subs/codemirror/index.jsx

@@ -4,6 +4,7 @@
  * 支持的lang为: ['xml', 'htmlmixed', 'css', 'javascript', 'yaml', 'python']
  * 支持的theme为: ['material', 'neat']
  * lineNumbers: 是否显示行号
+ * height: 代码块的最大高度
  */
 
 import React from 'react';
@@ -74,22 +75,23 @@ class CodemirrorModal extends React.Component {
       wrapperCol: { span: 18 }
     };
     const decorator = props.decorator;
-    const { getFieldDecorator } = this.props.form;
+    const { getFieldDecorator } = props.form;
+    const style = { height: props.height || 200 };
 
     return (<div className={props.className}>
       <FormItem
         label={props.label}
         required={props.required}
         className={className}
         {...formItemLayout}
-        validateStatus={state.status}
-        help={props.__[state.msg] || state.msg}
+        help={state.lang}
+        extra={props.__[props.extra] || props.extra}
       >
         {
           decorator && !state.hide ? getFieldDecorator(decorator.id, {
             rules: decorator.rules,
             initialValue: decorator.initialValue
-          })(<div className="code" ref={self => this.ref = self} />) : <div />
+          })(<div className="code" style={style} ref={self => this.ref = self} />) : <div />
         }
       </FormItem>
     </div>);

lib/ufec.js

@@ -2456,6 +2456,7 @@ var CheckboxTableModal = function (_React$Component) {
  * 支持的lang为: ['xml', 'htmlmixed', 'css', 'javascript', 'yaml', 'python']
  * 支持的theme为: ['material', 'neat']
  * lineNumbers: 是否显示行号
+ * height: 代码块的最大高度
  */
 
 // 就不能考虑一下es module吗？难受
@@ -2533,8 +2534,9 @@ var CodemirrorModal = function (_React$Component) {
         wrapperCol: { span: 18 }
       };
       var decorator = props.decorator;
-      var getFieldDecorator = this.props.form.getFieldDecorator;
+      var getFieldDecorator = props.form.getFieldDecorator;
 
+      var style = { height: props.height || 200 };
 
       return React.createElement(
         'div',
@@ -2546,13 +2548,13 @@ var CodemirrorModal = function (_React$Component) {
             required: props.required,
             className: className
           }, formItemLayout, {
-            validateStatus: state.status,
-            help: props.__[state.msg] || state.msg
+            help: state.lang,
+            extra: props.__[props.extra] || props.extra
           }),
           decorator && !state.hide ? getFieldDecorator(decorator.id, {
             rules: decorator.rules,
             initialValue: decorator.initialValue
-          })(React.createElement('div', { className: 'code', ref: function ref(self) {
+          })(React.createElement('div', { className: 'code', style: style, ref: function ref(self) {
               return _this3.ref = self;
             } })) : React.createElement('div', null)
         )

style/modal_v2/index.less

@@ -66,9 +66,18 @@
 .codemirror-wrapper {
   .ant-form-item-control {
     line-height: 16px;
+    .ant-form-explain {
+      text-align: center;
+      font-size: 12px;
+    }
     .code {
       border: 1px solid #d9d9d9;
       border-radius: 2px;
+      box-sizing: border-box;
+      overflow: hidden;
+      .CodeMirror {
+        height: inherit;
+      }
     }
   }
 }