feat(demo.js): 修改demo显示效果

CHANGELOG.md

@@ -1,4 +1,4 @@
-<a name="1.0.10"></a>
+<a name="1.0.10"></a> 
 ## [1.0.10](https://github.com/tinper-bee/bee-table/compare/v1.0.9...v1.0.10) (2018-01-03)
 
 

build/render/DateRender.js

@@ -32,6 +32,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 
+var MonthPicker = _beeDatepicker2["default"].MonthPicker,
+    RangePicker = _beeDatepicker2["default"].RangePicker,
+    WeekPicker = _beeDatepicker2["default"].WeekPicker;
+
 var DateRender = function (_Component) {
   _inherits(DateRender, _Component);
 
@@ -74,15 +78,33 @@ var DateRender = function (_Component) {
     var _state = this.state,
         value = _state.value,
         editable = _state.editable;
-    var isclickTrigger = this.props.isclickTrigger;
+    var _props = this.props,
+        isclickTrigger = _props.isclickTrigger,
+        type = _props.type;
 
     var cellContent = "";
+    var TComponent = void 0;
+    switch (type.toLowerCase()) {
+      case "monthpicker":
+        TComponent = MonthPicker;
+        break;
+      // case "rangepicker":
+      //   TComponent = RangePicker;
+      //   break;
+      case "weekpicker":
+        TComponent = WeekPicker;
+        break;
+      default:
+        TComponent = _beeDatepicker2["default"];
+        break;
+    }
+    TComponent;
     var date_value = value ? (0, _moment2["default"])(value) : value;
     if (editable) {
       cellContent = isclickTrigger ? _react2["default"].createElement(
         "div",
         { className: "editable-cell-input-wrapper" },
-        _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, {
+        _react2["default"].createElement(TComponent, _extends({}, this.props, {
           value: date_value,
           onChange: this.handleChange
         })),
@@ -94,7 +116,7 @@ var DateRender = function (_Component) {
       ) : _react2["default"].createElement(
         "div",
         { className: "editable-cell-input-wrapper" },
-        _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, {
+        _react2["default"].createElement(TComponent, _extends({}, this.props, {
           value: date_value,
           onChange: this.handleChange
         })),
@@ -131,4 +153,8 @@ var DateRender = function (_Component) {
 }(_react.Component);
 
 exports["default"] = DateRender;
+
+DateRender.defaultProps = {
+  type: "DatePicker"
+};
 module.exports = exports["default"];

demo/index-demo-base.js

@@ -26,29 +26,26 @@ class Demo extends Component {
     }
 
     render () {
-        const { title, example, code, desc  } = this.props;
+        const { title, example, code, desc, scss_code  } = this.props;
         let caret = this.state.open ? CARETUP : CARET;
         let text = this.state.open ? "隐藏代码" : "查看代码";
 
-        const footer = (
-            <Button shape="block" onClick={ this.handleClick }>
-                { caret }
-                { text }
-            </Button>
-        );
         const header = (
-            <Row>
-                <Col md={12}>
-                { example }
-                </Col>
-            </Row>
+            <div>
+                {example}
+                <Button style={{"margin-top": "10px"}} shape="block" onClick={ this.handleClick }>
+                    { caret }
+                    { text }
+                </Button>
+            </div>
         );
         return (
             <Col md={12} >
                 <h3>{ title }</h3>
                 <p>{ desc }</p>
-                <Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footer={footer} footerStyle = {{padding: 0}}>
+                <Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
                     <pre><code className="hljs javascript">{ code }</code></pre>
+                    { !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
                 </Panel>
             </Col>
         )
@@ -65,7 +62,7 @@ class DemoGroup extends Component {
                     {DemoArray.map((child,index) => {
 
                         return (
-                            <Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
+                            <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
                         )
 
                     })}