@king-design/react 2.1.4 → 2.1.6

package/components/editable/index.js

@@ -16,6 +16,7 @@ var typeDefs = {
   trim: Boolean,
   invalid: Boolean
 };
+
 var defaults = function defaults() {
   return {
     required: true,
@@ -23,23 +24,30 @@ var defaults = function defaults() {
     trim: true
   };
 };
+
 var events = {
   error: true,
   change: true
 };
 export var Editable = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Editable, _Component);
+
   function Editable() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.inputRef = createRef();
     return _this;
   }
+
   var _proto = Editable.prototype;
+
   _proto.edit = function edit() {
     this.set('editing', true);
     /**
@@ -56,32 +64,39 @@ export var Editable = /*#__PURE__*/function (_Component) {
     // });
     // });
   };
+
   _proto.select = function select() {
     this.inputRef.value.select();
   };
+
   _proto.onBlur = function onBlur(e) {
     this.setValue(e.target.value);
   };
+
   _proto.onKeydown = function onKeydown(e) {
     switch (e.keyCode) {
       case 27:
         // esc 
         this.set('editing', false);
         break;
+
       case 13:
         // enter
         this.onBlur(e);
         break;
     }
   };
+
   _proto.setValue = function setValue(value) {
     var _this$get = this.get(),
-      validate = _this$get.validate,
-      required = _this$get.required,
-      trim = _trimInstanceProperty(_this$get),
-      oldValue = _this$get.value;
+        validate = _this$get.validate,
+        required = _this$get.required,
+        trim = _trimInstanceProperty(_this$get),
+        oldValue = _this$get.value;
+
     if (trim) value = _trimInstanceProperty(value).call(value);
     var valid = true;
+
     if (required && !value) {
       valid = false;
     } else if (validate && value) {
@@ -93,29 +108,38 @@ export var Editable = /*#__PURE__*/function (_Component) {
         valid = new RegExp(validate).test(value);
       }
     }
+
     if (!valid) {
       // do not change the value if invalid, #51
       // this.set('value', value, {silent: true});
       this.set('invalid', true);
       return this.trigger('error', value);
     }
+
     this.set({
       invalid: false,
       editing: false,
       value: value
     });
+
     if (oldValue !== value) {
       this.trigger('change', value, oldValue);
     }
   };
+
   return Editable;
 }(Component);
 Editable.template = template;
 Editable.typeDefs = typeDefs;
 Editable.defaults = defaults;
 Editable.events = events;
+
 __decorate([bind], Editable.prototype, "edit", null);
+
 __decorate([bind], Editable.prototype, "select", null);
+
 __decorate([bind], Editable.prototype, "onBlur", null);
+
 __decorate([bind], Editable.prototype, "onKeydown", null);
+
 __decorate([bind], Editable.prototype, "setValue", null);

package/components/editable/index.spec.js

@@ -13,173 +13,210 @@ describe('Editable', function () {
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, editable, input;
+
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-          editable = instance.refs.__test; // @ts-ignore
-          editable.edit();
-          _context.next = 5;
-          return wait();
-        case 5:
-          expect(element.innerHTML).to.matchSnapshot();
-          // input
-          input = element.querySelector('input');
-          input.value = 'test';
-          dispatchEvent(input, 'blur');
-          _context.next = 11;
-          return wait();
-        case 11:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('text')).to.eql('test');
-          // keydown: esc
-          // @ts-ignore
-          editable.edit();
-          _context.next = 16;
-          return wait();
-        case 16:
-          expect(element.innerHTML).to.matchSnapshot();
-          input = element.querySelector('input');
-          input.value = 'new';
-          dispatchEvent(input, 'keydown', {
-            keyCode: 27
-          });
-          _context.next = 22;
-          return wait();
-        case 22:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('text')).to.eql('test');
-          // keydown: enter
-          // @ts-ignore
-          editable.edit();
-          _context.next = 27;
-          return wait();
-        case 27:
-          expect(element.innerHTML).to.matchSnapshot();
-          input = element.querySelector('input');
-          input.value = 'new';
-          dispatchEvent(input, 'keydown', {
-            keyCode: 13
-          });
-          _context.next = 33;
-          return wait();
-        case 33:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('text')).to.eql('new');
-        case 35:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            editable = instance.refs.__test; // @ts-ignore
+
+            editable.edit();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.innerHTML).to.matchSnapshot(); // input
+
+            input = element.querySelector('input');
+            input.value = 'test';
+            dispatchEvent(input, 'blur');
+            _context.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('text')).to.eql('test'); // keydown: esc
+            // @ts-ignore
+
+            editable.edit();
+            _context.next = 16;
+            return wait();
+
+          case 16:
+            expect(element.innerHTML).to.matchSnapshot();
+            input = element.querySelector('input');
+            input.value = 'new';
+            dispatchEvent(input, 'keydown', {
+              keyCode: 27
+            });
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('text')).to.eql('test'); // keydown: enter
+            // @ts-ignore
+
+            editable.edit();
+            _context.next = 27;
+            return wait();
+
+          case 27:
+            expect(element.innerHTML).to.matchSnapshot();
+            input = element.querySelector('input');
+            input.value = 'new';
+            dispatchEvent(input, 'keydown', {
+              keyCode: 13
+            });
+            _context.next = 33;
+            return wait();
+
+          case 33:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('text')).to.eql('new');
+
+          case 35:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee);
   })));
   it('validate test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, _instance$refs, first, second, third, input;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _mount2 = mount(ValidateDemo), instance = _mount2[0], element = _mount2[1];
-          _instance$refs = instance.refs, first = _instance$refs.__test1, second = _instance$refs.__test2, third = _instance$refs.__test3; // validate
-          // @ts-ignore
-          first.edit();
-          _context2.next = 5;
-          return wait();
-        case 5:
-          input = findDomFromVNode(first.$lastInput, true).querySelector('input');
-          dispatchEvent(input, 'focus');
-          input.value = 'a';
-          dispatchEvent(input, 'input');
-          dispatchEvent(input, 'blur');
-          _context2.next = 12;
-          return wait();
-        case 12:
-          expect(element.innerHTML).to.matchSnapshot();
-          // @ts-ignore
-          second.edit();
-          _context2.next = 16;
-          return wait();
-        case 16:
-          input = findDomFromVNode(second.$lastInput, true).querySelector('input');
-          input.value = 'a';
-          dispatchEvent(input, 'input');
-          dispatchEvent(input, 'blur');
-          _context2.next = 22;
-          return wait();
-        case 22:
-          expect(element.innerHTML).to.matchSnapshot();
-          // @ts-ignore
-          third.edit();
-          _context2.next = 26;
-          return wait();
-        case 26:
-          input = findDomFromVNode(third.$lastInput, true).querySelector('input');
-          input.value = 'a';
-          dispatchEvent(input, 'input');
-          dispatchEvent(input, 'blur');
-          _context2.next = 32;
-          return wait();
-        case 32:
-          expect(element.innerHTML).to.matchSnapshot();
-          // required
-          input.value = '';
-          dispatchEvent(input, 'input');
-          dispatchEvent(input, 'blur');
-          _context2.next = 38;
-          return wait();
-        case 38:
-          expect(element.innerHTML).to.matchSnapshot();
-        case 39:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(ValidateDemo), instance = _mount2[0], element = _mount2[1];
+            _instance$refs = instance.refs, first = _instance$refs.__test1, second = _instance$refs.__test2, third = _instance$refs.__test3; // validate
+            // @ts-ignore
+
+            first.edit();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            input = findDomFromVNode(first.$lastInput, true).querySelector('input');
+            dispatchEvent(input, 'focus');
+            input.value = 'a';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot(); // @ts-ignore
+
+            second.edit();
+            _context2.next = 16;
+            return wait();
+
+          case 16:
+            input = findDomFromVNode(second.$lastInput, true).querySelector('input');
+            input.value = 'a';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.innerHTML).to.matchSnapshot(); // @ts-ignore
+
+            third.edit();
+            _context2.next = 26;
+            return wait();
+
+          case 26:
+            input = findDomFromVNode(third.$lastInput, true).querySelector('input');
+            input.value = 'a';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 32;
+            return wait();
+
+          case 32:
+            expect(element.innerHTML).to.matchSnapshot(); // required
+
+            input.value = '';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 38;
+            return wait();
+
+          case 38:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 39:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));
   it('handle correctly even if the value is undefined', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var Demo, _mount3, instance, element, input;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          Demo = /*#__PURE__*/function (_Component) {
-            _inheritsLoose(Demo, _Component);
-            function Demo() {
-              var _context3;
-              var _this;
-              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context3;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+                _this.Editable = Editable;
+                return _this;
               }
-              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
-              _this.Editable = Editable;
-              return _this;
-            }
-            Demo.defaults = function defaults() {
-              return {
-                value: 'test'
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: 'test'
+                };
               };
-            };
-            return Demo;
-          }(Component);
-          Demo.template = "const {Editable} = this; <Editable>{this.get('value')}</Editable>";
-          _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
-          expect(element.outerHTML).to.matchSnapshot();
-          element.querySelector('.k-editable-icon').click();
-          _context4.next = 7;
-          return wait();
-        case 7:
-          input = element.querySelector("input");
-          input.value = 'aa';
-          dispatchEvent(input, 'blur');
-          _context4.next = 12;
-          return wait();
-        case 12:
-          expect(element.innerText).to.eql('test');
-          element.querySelector('.k-editable-icon').click();
-          _context4.next = 16;
-          return wait();
-        case 16:
-          input = element.querySelector("input");
-          expect(input.value).to.eql('aa');
-        case 18:
-        case "end":
-          return _context4.stop();
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "const {Editable} = this; <Editable>{this.get('value')}</Editable>";
+            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+            expect(element.outerHTML).to.matchSnapshot();
+            element.querySelector('.k-editable-icon').click();
+            _context4.next = 7;
+            return wait();
+
+          case 7:
+            input = element.querySelector("input");
+            input.value = 'aa';
+            dispatchEvent(input, 'blur');
+            _context4.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerText).to.eql('test');
+            element.querySelector('.k-editable-icon').click();
+            _context4.next = 16;
+            return wait();
+
+          case 16:
+            input = element.querySelector("input");
+            expect(input.value).to.eql('aa');
+
+          case 18:
+          case "end":
+            return _context4.stop();
+        }
       }
     }, _callee3);
   })));

package/components/editable/index.vdt.js

@@ -6,18 +6,21 @@ import { Icon } from '../icon';
 import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    children = _this$get.children,
-    className = _this$get.className,
-    editing = _this$get.editing,
-    value = _this$get.value,
-    validate = _this$get.validate,
-    disabled = _this$get.disabled,
-    tip = _this$get.tip,
-    invalid = _this$get.invalid;
+      children = _this$get.children,
+      className = _this$get.className,
+      editing = _this$get.editing,
+      value = _this$get.value,
+      validate = _this$get.validate,
+      disabled = _this$get.disabled,
+      tip = _this$get.tip,
+      invalid = _this$get.invalid;
+
   var classNameObj = (_classNameObj = {
     'k-editable': true,
     'k-editing': editing,

package/components/editable/styles.js

@@ -10,6 +10,7 @@ var defaults = {
     get border() {
       return "1px solid " + theme.color.danger;
     }
+
   }
 };
 var editable;

package/components/form/form.js

@@ -15,32 +15,42 @@ var typeDefs = {
   starOnRequired: Boolean,
   size: ['default', 'small', 'mini']
 };
+
 var defaults = function defaults() {
   return {
     layout: 'horizontal',
     size: 'default'
   };
 };
+
 export var FORM = 'Form';
 export var RECORD_KEY = 'FormRecord';
 export var Form = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Form, _Component);
+
   function Form() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.items = useRecordParent(RECORD_KEY);
     return _this;
   }
+
   var _proto = Form.prototype;
+
   _proto.init = function init() {
     provide(FORM, this);
   };
+
   _proto.validate = function validate() {
     var _context2;
+
     return _Promise.all(_mapInstanceProperty(_context2 = this.items).call(_context2, function (item) {
       return item.validate();
     })).then(function (values) {
@@ -49,35 +59,43 @@ export var Form = /*#__PURE__*/function (_Component) {
       });
     });
   };
+
   _proto.getFirstInvalidFormItem = function getFirstInvalidFormItem() {
     var _context3;
+
     return _findInstanceProperty(_context3 = this.items).call(_context3, function (item) {
       if (!item.isValid()) {
         return item;
       }
     });
   };
+
   _proto.submit = function submit(e) {
     var _this2 = this;
+
     this.validate().then(function (valid) {
       if (valid) {
         _this2.trigger('submit', e);
       }
     });
   };
+
   _proto.reset = function reset() {
     this.items.forEach(function (item) {
       return item.reset();
     });
   };
+
   _proto.onSubmit = function onSubmit(e) {
     e.preventDefault();
     this.submit(e);
   };
+
   return Form;
 }(Component);
 Form.template = template;
 Form.typeDefs = typeDefs;
 Form.defaults = defaults;
 Form.addMethod = addMethod;
+
 __decorate([bind], Form.prototype, "onSubmit", null);

package/components/form/form.vdt.js

@@ -4,14 +4,17 @@ import { getRestProps } from '../utils';
 import { makeFormStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    children = _this$get.children,
-    className = _this$get.className,
-    layout = _this$get.layout,
-    size = _this$get.size;
+      children = _this$get.children,
+      className = _this$get.className,
+      layout = _this$get.layout,
+      size = _this$get.size;
+
   var classNameObj = (_classNameObj = {
     'k-form': true
   }, _classNameObj[className] = className, _classNameObj["k-" + layout] = layout, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeFormStyles()] = true, _classNameObj);