@king-design/react 3.1.4-beta.2 → 3.1.4

package/components/input/index.spec.js

@@ -17,278 +17,224 @@ describe('Input', function () {
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, 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];
-            input = element.querySelector('input');
-
-            instance.refs.__test.focus();
-
-            input.value = 'test';
-            dispatchEvent(input, 'input');
-            _context.next = 7;
-            return wait();
-
-          case 7:
-            expect(instance.get('value')).eql('test');
-
-            instance.refs.__test.select();
-
-          case 9:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+          input = element.querySelector('input');
+          instance.refs.__test.focus();
+          input.value = 'test';
+          dispatchEvent(input, 'input');
+          _context.next = 7;
+          return wait();
+        case 7:
+          expect(instance.get('value')).eql('test');
+          instance.refs.__test.select();
+        case 9:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));
   it('search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var onSearch, _mount2, instance, element, btn, input, form;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            onSearch = sinon.spy();
-            SearchDemo.prototype.search = onSearch;
-            _mount2 = mount(SearchDemo), instance = _mount2[0], element = _mount2[1];
-            expect(element.innerHTML).to.matchSnapshot();
-            btn = element.querySelector('.k-btn');
-            btn.click();
-            _context2.next = 8;
-            return wait();
-
-          case 8:
-            expect(element.innerHTML).to.matchSnapshot();
-            input = element.querySelector('input');
-            input.value = 'test';
-            dispatchEvent(input, 'input');
-            _context2.next = 14;
-            return wait();
-
-          case 14:
-            expect(element.innerHTML).to.matchSnapshot();
-            form = element.querySelector('form');
-            dispatchEvent(form, 'submit');
-            _context2.next = 19;
-            return wait();
-
-          case 19:
-            expect(onSearch.calledWith('test')).to.be.true;
-            btn.click();
-            _context2.next = 23;
-            return wait();
-
-          case 23:
-            expect(onSearch.callCount).to.eql(2);
-            expect(onSearch.calledWith('test')).to.be.true;
-            expect(element.innerHTML).to.matchSnapshot();
-            document.body.click();
-            _context2.next = 29;
-            return wait();
-
-          case 29:
-            expect(element.innerHTML).to.matchSnapshot();
-
-          case 30:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          onSearch = sinon.spy();
+          SearchDemo.prototype.search = onSearch;
+          _mount2 = mount(SearchDemo), instance = _mount2[0], element = _mount2[1];
+          expect(element.innerHTML).to.matchSnapshot();
+          btn = element.querySelector('.k-btn');
+          btn.click();
+          _context2.next = 8;
+          return wait();
+        case 8:
+          expect(element.innerHTML).to.matchSnapshot();
+          input = element.querySelector('input');
+          input.value = 'test';
+          dispatchEvent(input, 'input');
+          _context2.next = 14;
+          return wait();
+        case 14:
+          expect(element.innerHTML).to.matchSnapshot();
+          form = element.querySelector('form');
+          dispatchEvent(form, 'submit');
+          _context2.next = 19;
+          return wait();
+        case 19:
+          expect(onSearch.calledWith('test')).to.be.true;
+          btn.click();
+          _context2.next = 23;
+          return wait();
+        case 23:
+          expect(onSearch.callCount).to.eql(2);
+          expect(onSearch.calledWith('test')).to.be.true;
+          expect(element.innerHTML).to.matchSnapshot();
+          document.body.click();
+          _context2.next = 29;
+          return wait();
+        case 29:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 30:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
   it('should frozen value on input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, instance, element, _element$querySelecto, input1, input2;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            _mount3 = mount(FrozenDemo), instance = _mount3[0], element = _mount3[1];
-            _element$querySelecto = element.querySelectorAll('input'), input1 = _element$querySelecto[0], input2 = _element$querySelecto[1];
-            dispatchEvent(input2, 'focus');
-            input2.value = '#123';
-            dispatchEvent(input2, 'input');
-            _context3.next = 7;
-            return wait();
-
-          case 7:
-            expect(input1.value).to.eql('#112233');
-            expect(input2.value).to.eql('#123');
-            dispatchEvent(input2, 'blur');
-            _context3.next = 12;
-            return wait();
-
-          case 12:
-            expect(input2.value).to.eql('#112233');
-
-          case 13:
-          case "end":
-            return _context3.stop();
-        }
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _mount3 = mount(FrozenDemo), instance = _mount3[0], element = _mount3[1];
+          _element$querySelecto = element.querySelectorAll('input'), input1 = _element$querySelecto[0], input2 = _element$querySelecto[1];
+          dispatchEvent(input2, 'focus');
+          input2.value = '#123';
+          dispatchEvent(input2, 'input');
+          _context3.next = 7;
+          return wait();
+        case 7:
+          expect(input1.value).to.eql('#112233');
+          expect(input2.value).to.eql('#123');
+          dispatchEvent(input2, 'blur');
+          _context3.next = 12;
+          return wait();
+        case 12:
+          expect(input2.value).to.eql('#112233');
+        case 13:
+        case "end":
+          return _context3.stop();
       }
     }, _callee3);
   })));
   it('should auto expand or shrink textarea', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element, _element$querySelecto2, textarea1, textarea2;
-
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            _mount4 = mount(AutoRowsDemo), instance = _mount4[0], element = _mount4[1];
-            _element$querySelecto2 = element.querySelectorAll('textarea'), textarea1 = _element$querySelecto2[0], textarea2 = _element$querySelecto2[1]; // const lineHeight = parseInt(getComputedStyle(textarea1).lineHeight);
-
-            instance.set('value1', 'a\nb');
-            _context4.next = 5;
-            return wait();
-
-          case 5:
-            expect(textarea1.style.height).to.eql('50px');
-            instance.set('value1', 'a');
-            _context4.next = 9;
-            return wait();
-
-          case 9:
-            expect(textarea1.style.height).to.eql('32px');
-            instance.set('value2', 'a');
-            _context4.next = 13;
-            return wait();
-
-          case 13:
-            expect(textarea2.style.height).to.eql('68px');
-            instance.set('value2', 'a\nb\nc');
-            _context4.next = 17;
-            return wait();
-
-          case 17:
-            expect(textarea2.style.height).to.eql('68px');
-            instance.set('value2', 'a\nb\nc\nd');
-            _context4.next = 21;
-            return wait();
-
-          case 21:
-            expect(textarea2.style.height).to.eql('86px');
-            instance.set('value2', 'a\nb\nc\nd\ne\nf\ng\nh');
-            _context4.next = 25;
-            return wait();
-
-          case 25:
-            expect(textarea2.style.height).to.eql('104px');
-
-          case 26:
-          case "end":
-            return _context4.stop();
-        }
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _mount4 = mount(AutoRowsDemo), instance = _mount4[0], element = _mount4[1];
+          _element$querySelecto2 = element.querySelectorAll('textarea'), textarea1 = _element$querySelecto2[0], textarea2 = _element$querySelecto2[1]; // const lineHeight = parseInt(getComputedStyle(textarea1).lineHeight);
+          instance.set('value1', 'a\nb');
+          _context4.next = 5;
+          return wait();
+        case 5:
+          expect(textarea1.style.height).to.eql('50px');
+          instance.set('value1', 'a');
+          _context4.next = 9;
+          return wait();
+        case 9:
+          expect(textarea1.style.height).to.eql('32px');
+          instance.set('value2', 'a');
+          _context4.next = 13;
+          return wait();
+        case 13:
+          expect(textarea2.style.height).to.eql('68px');
+          instance.set('value2', 'a\nb\nc');
+          _context4.next = 17;
+          return wait();
+        case 17:
+          expect(textarea2.style.height).to.eql('68px');
+          instance.set('value2', 'a\nb\nc\nd');
+          _context4.next = 21;
+          return wait();
+        case 21:
+          expect(textarea2.style.height).to.eql('86px');
+          instance.set('value2', 'a\nb\nc\nd\ne\nf\ng\nh');
+          _context4.next = 25;
+          return wait();
+        case 25:
+          expect(textarea2.style.height).to.eql('104px');
+        case 26:
+        case "end":
+          return _context4.stop();
       }
     }, _callee4);
   })));
   it('should show or hide password', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var _mount5, instance, element, input, icon, inputInstance;
-
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            _mount5 = mount(PasswordDemo), instance = _mount5[0], element = _mount5[1];
-            input = element.querySelector('input');
-            icon = element.querySelector('.k-icon');
-            inputInstance = instance.refs.__demo;
-            icon.click();
-            _context5.next = 7;
-            return wait();
-
-          case 7:
-            expect(input.type).to.eql('text');
-            expect(element.innerHTML).to.matchSnapshot();
-            icon.click();
-            _context5.next = 12;
-            return wait();
-
-          case 12:
-            expect(input.type).to.eql('password');
-            expect(element.innerHTML).to.matchSnapshot(); // simulate receive type
-
-            inputInstance.$props.type = 'number';
-            inputInstance.trigger('$receive:type', 'number');
-            _context5.next = 18;
-            return wait();
-
-          case 18:
-            expect(input.type).to.eql('number');
-            expect(icon.parentElement.parentElement).to.eql(null);
-            expect(element.innerHTML).to.matchSnapshot(); // simulate receive showPassword
-
-            inputInstance.$props.type = 'password';
-            inputInstance.$props.showPassword = false;
-            inputInstance.trigger('$receive:type', 'password');
-            inputInstance.trigger('$receive:showPassword', false);
-            _context5.next = 27;
-            return wait();
-
-          case 27:
-            expect(input.type).to.eql('password');
-            expect(element.querySelector('.k-icon')).to.eql(null);
-            expect(element.innerHTML).to.matchSnapshot();
-
-          case 30:
-          case "end":
-            return _context5.stop();
-        }
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _mount5 = mount(PasswordDemo), instance = _mount5[0], element = _mount5[1];
+          input = element.querySelector('input');
+          icon = element.querySelector('.k-icon');
+          inputInstance = instance.refs.__demo;
+          icon.click();
+          _context5.next = 7;
+          return wait();
+        case 7:
+          expect(input.type).to.eql('text');
+          expect(element.innerHTML).to.matchSnapshot();
+          icon.click();
+          _context5.next = 12;
+          return wait();
+        case 12:
+          expect(input.type).to.eql('password');
+          expect(element.innerHTML).to.matchSnapshot();
+          // simulate receive type
+          inputInstance.$props.type = 'number';
+          inputInstance.trigger('$receive:type', 'number');
+          _context5.next = 18;
+          return wait();
+        case 18:
+          expect(input.type).to.eql('number');
+          expect(icon.parentElement.parentElement).to.eql(null);
+          expect(element.innerHTML).to.matchSnapshot();
+          // simulate receive showPassword
+          inputInstance.$props.type = 'password';
+          inputInstance.$props.showPassword = false;
+          inputInstance.trigger('$receive:type', 'password');
+          inputInstance.trigger('$receive:showPassword', false);
+          _context5.next = 27;
+          return wait();
+        case 27:
+          expect(input.type).to.eql('password');
+          expect(element.querySelector('.k-icon')).to.eql(null);
+          expect(element.innerHTML).to.matchSnapshot();
+        case 30:
+        case "end":
+          return _context5.stop();
       }
     }, _callee5);
   })));
   it('should set width when dialog show and input mounted', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
     var Demo, _mount6, instance, dialog, width;
-
     return _regeneratorRuntime.wrap(function _callee6$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            Demo = /*#__PURE__*/function (_Component) {
-              _inheritsLoose(Demo, _Component);
-
-              function Demo() {
-                var _context6;
-
-                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(_context6 = [this]).call(_context6, args)) || this;
-                _this.Dialog = Dialog;
-                _this.Input = Input;
-                return _this;
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context6;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
               }
-
-              Demo.defaults = function defaults() {
-                return {
-                  show: false
-                };
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context6 = [this]).call(_context6, args)) || this;
+              _this.Dialog = Dialog;
+              _this.Input = Input;
+              return _this;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                show: false
               };
-
-              return Demo;
-            }(Component);
-
-            Demo.template = "\n                var Dialog = this.Dialog;\n                var Input = this.Input;\n                <Dialog value={this.get('show')}>\n                    <Input autoWidth placeholder=\"test\" v-if={this.get('show')} />\n                </Dialog>\n            ";
-            _mount6 = mount(Demo), instance = _mount6[0];
-            instance.set('show', true);
-            _context7.next = 6;
-            return wait(50);
-
-          case 6:
-            dialog = getElement('.k-dialog');
-            width = parseInt(dialog.querySelector('.k-input-inner').style.width);
-            expect(width).to.gt(1);
-
-          case 9:
-          case "end":
-            return _context7.stop();
-        }
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                var Dialog = this.Dialog;\n                var Input = this.Input;\n                <Dialog value={this.get('show')}>\n                    <Input autoWidth placeholder=\"test\" v-if={this.get('show')} />\n                </Dialog>\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0];
+          instance.set('show', true);
+          _context7.next = 6;
+          return wait(50);
+        case 6:
+          dialog = getElement('.k-dialog');
+          width = parseInt(dialog.querySelector('.k-input-inner').style.width);
+          expect(width).to.gt(1);
+        case 9:
+        case "end":
+          return _context7.stop();
       }
     }, _callee6);
   })));

package/components/input/index.vdt.js

@@ -11,71 +11,67 @@ import { Wave } from '../wave';
 import { context as ErrorContext } from '../form/useError';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
-      _$cn2,
-      children,
-      _this = this,
-      _$cn5,
-      _children;
-
+    _$cn2,
+    children,
+    _this = this,
+    _$cn5,
+    _children;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      style = _this$get.style,
-      type = _this$get.type,
-      value = _this$get.value,
-      defaultValue = _this$get.defaultValue,
-      placeholder = _this$get.placeholder,
-      clearable = _this$get.clearable,
-      disabled = _this$get.disabled,
-      size = _this$get.size,
-      rows = _this$get.rows,
-      autoWidth = _this$get.autoWidth,
-      fluid = _this$get.fluid,
-      width = _this$get.width,
-      stackClearIcon = _this$get.stackClearIcon,
-      frozenOnInput = _this$get.frozenOnInput,
-      readonly = _this$get.readonly,
-      inline = _this$get.inline,
-      waveDisabled = _this$get.waveDisabled,
-      resize = _this$get.resize,
-      flat = _flatInstanceProperty(_this$get),
-      showCount = _this$get.showCount,
-      maxlength = _this$get.maxlength,
-      click = _this$get['ev-click'],
-      mouseenter = _this$get['ev-mounseenter'],
-      mouseleave = _this$get['ev-mouseleave'],
-      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
-
+    className = _this$get.className,
+    style = _this$get.style,
+    type = _this$get.type,
+    value = _this$get.value,
+    defaultValue = _this$get.defaultValue,
+    placeholder = _this$get.placeholder,
+    clearable = _this$get.clearable,
+    disabled = _this$get.disabled,
+    size = _this$get.size,
+    rows = _this$get.rows,
+    autoWidth = _this$get.autoWidth,
+    fluid = _this$get.fluid,
+    width = _this$get.width,
+    stackClearIcon = _this$get.stackClearIcon,
+    frozenOnInput = _this$get.frozenOnInput,
+    readonly = _this$get.readonly,
+    inline = _this$get.inline,
+    waveDisabled = _this$get.waveDisabled,
+    resize = _this$get.resize,
+    flat = _flatInstanceProperty(_this$get),
+    showCount = _this$get.showCount,
+    maxlength = _this$get.maxlength,
+    click = _this$get['ev-click'],
+    mouseenter = _this$get['ev-mounseenter'],
+    mouseleave = _this$get['ev-mouseleave'],
+    rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
   var _this$frozen = this.frozen,
-      inputing = _this$frozen.inputing.value,
-      originalValue = _this$frozen.originalValue.value,
-      startInput = _this$frozen.startInput,
-      onInput = _this$frozen.onInput,
-      endInput = _this$frozen.endInput;
+    inputing = _this$frozen.inputing.value,
+    originalValue = _this$frozen.originalValue.value,
+    startInput = _this$frozen.startInput,
+    onInput = _this$frozen.onInput,
+    endInput = _this$frozen.endInput;
   var _this$focusHook = this.focusHook,
-      isFocus = _this$focusHook.isFocus,
-      focusInputOnClick = _this$focusHook.focusInputOnClick;
+    isFocus = _this$focusHook.isFocus,
+    focusInputOnClick = _this$focusHook.focusInputOnClick;
   var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-input"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-group"] = $blocks.prepend || $blocks.append, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-clearable"] = clearable, _classNameObj[k + "-auto-width"] = autoWidth, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-stack-clear"] = stackClearIcon, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-type-textarea"] = type === 'textarea', _classNameObj[k + "-focus"] = isFocus.value, _classNameObj[k + "-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj[k + "-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$showPassword = this.showPassword,
-      isShowPassword = _this$showPassword.isShow,
-      toggleShowPassword = _this$showPassword.toggleShow,
-      showPasswordType = _this$showPassword.type,
-      showPasswordIcon = _this$showPassword.showIcon;
+    isShowPassword = _this$showPassword.isShow,
+    toggleShowPassword = _this$showPassword.toggleShow,
+    showPasswordType = _this$showPassword.type,
+    showPasswordIcon = _this$showPassword.showIcon;
   var _this$autoWidth = this.autoWidth,
-      fakeRef = _this$autoWidth.fakeRef,
-      fakeWidth = _this$autoWidth.width.value;
+    fakeRef = _this$autoWidth.fakeRef,
+    fakeWidth = _this$autoWidth.width.value;
   var height = this.autoRows;
   var inputValue = frozenOnInput && inputing ? originalValue : value;
   var hasInputValue = !isNullOrUndefined(inputValue);
   var hasValue = hasInputValue && inputValue !== '';
-
   var inputProps = _extends({}, getRestProps(this, rest), {
     'ev-focus': startInput,
     'ev-blur': endInput,
@@ -89,19 +85,16 @@ export default function ($props, $blocks, $__proto__) {
     style: autoWidth && fakeWidth ? {
       width: fakeWidth + 'px'
     } : undefined
-  }); // if we pass value to input element, the input is controlled and the
+  });
+  // if we pass value to input element, the input is controlled and the
   // defaultValue does not work
-
-
   if (hasInputValue) {
     inputProps.value = inputValue;
   }
-
   return _$ce(2, 'div', [$blocks.prepend ? (children = $blocks.prepend(noop), _$ce(2, 'div', children, 0, _$cn((_$cn2 = {}, _$cn2[k + "-input-prepend"] = true, _$cn2[k + "-input-padding"] = isTextBlock(children), _$cn2)))) : void 0, _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
     'children': function children(isInvalid) {
       var _$cn3, _$cn4;
-
       return _$cc(Wave, {
         'disabled': waveDisabled || disabled || isInvalid,
         'inset': '-2px',
@@ -109,11 +102,9 @@ export default function ($props, $blocks, $__proto__) {
           return null;
         }, __$blocks['prefix'] = function ($super, data) {
           var block = $blocks['prefix'];
-
           var callBlock = function callBlock() {
             return _$blocks['prefix'].call($this, $super, data);
           };
-
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['prefix'](_$no)), 0, _$cn(k + "-input-prefix")) : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
           'className': _$cn(k + "-input-inner"),
@@ -136,11 +127,9 @@ export default function ($props, $blocks, $__proto__) {
           return null;
         }, __$blocks['suffix'] = function ($super, data) {
           var block = $blocks['suffix'];
-
           var callBlock = function callBlock() {
             return _$blocks['suffix'].call($this, $super, data);
           };
-
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
           'ev-click': stopPropagation