@king-design/react 2.0.0-beta.0

package/components/spinner/index.spec.js

@@ -0,0 +1,553 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import StepDemo from '~/components/spinner/demos/step';
+import PrecisionDemo from '~/components/spinner/demos/precision';
+import { mount, unmount, dispatchEvent, wait, fakeError } from '../../test/utils';
+import { Spinner } from '../spinner';
+import { Component } from 'intact-react';
+import FormatterDemo from '~/components/spinner/demos/formatter';
+import ForceStepDemo from '~/components/spinner/demos/forceStep';
+import DynamicStepDemo from '~/components/spinner/demos/dynamicStep';
+describe('Spinner', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('step/max/min test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, prev, next, input;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(StepDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-btn'), prev = _element$querySelecto[0], next = _element$querySelecto[1];
+            input = element.querySelector('.k-input-inner');
+            next.click();
+            _context.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).to.eql('1.2');
+            prev.click();
+            _context.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).to.eql('0');
+            input.value = '9.9';
+            dispatchEvent(input, 'change');
+            _context.next = 17;
+            return wait();
+
+          case 17:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).eql('9.9');
+            prev.click();
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).eql('8.7');
+            input.value = '19.9';
+            dispatchEvent(input, 'change');
+            _context.next = 28;
+            return wait();
+
+          case 28:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).eql('10');
+            input.value = 'x19.9'; // to make the _input eql 'x19.9', then lead change
+
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'change');
+            _context.next = 35;
+            return wait();
+
+          case 35:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).to.eql('10');
+            input.value = '-10';
+            dispatchEvent(input, 'change');
+            _context.next = 41;
+            return wait();
+
+          case 41:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(input.value).to.eql('0'); // should not disable btns, when value is between min and max
+
+            input.value = '9.9';
+            dispatchEvent(input, 'change');
+            next.click();
+            _context.next = 48;
+            return wait();
+
+          case 48:
+            expect(input.value).to.eql('10');
+            expect(element.innerHTML).to.matchSnapshot();
+            input.value = '0.1';
+            dispatchEvent(input, 'change');
+            prev.click();
+            _context.next = 55;
+            return wait();
+
+          case 55:
+            expect(input.value).to.eql('0');
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 57:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('precision', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _element$querySelecto2, spinner1, spinner2, input1, input2;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(PrecisionDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-spinner'), spinner1 = _element$querySelecto2[0], spinner2 = _element$querySelecto2[1];
+            input1 = spinner1.querySelector('.k-input-inner');
+            input1.value = '0.6';
+            dispatchEvent(input1, 'input');
+            dispatchEvent(input1, 'change');
+            _context2.next = 8;
+            return wait();
+
+          case 8:
+            expect(spinner1.innerHTML).to.matchSnapshot();
+            expect(input1.value).to.eql('1');
+            expect(instance.get('value1')).to.eql(1);
+            input2 = spinner2.querySelector('.k-input-inner'); // expect(input2.value).to.eql('0.0');
+
+            input2.value = '0.61';
+            dispatchEvent(input2, 'input');
+            dispatchEvent(input2, 'change');
+            _context2.next = 17;
+            return wait();
+
+          case 17:
+            expect(input2.value).to.eql('0.6');
+
+          case 18:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should change value as long as the input is valid', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, input;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(PrecisionDemo), instance = _mount3[0], element = _mount3[1];
+            input = element.querySelector('input');
+            input.value = '01';
+            dispatchEvent(input, 'input');
+            _context3.next = 6;
+            return wait();
+
+          case 6:
+            expect(instance.get('value1')).to.eql(1);
+            input.value = 'xx';
+            dispatchEvent(input, 'input');
+            _context3.next = 11;
+            return wait();
+
+          case 11:
+            expect(instance.get('value1')).to.eql(1);
+            input.value = '100';
+            dispatchEvent(input, 'input');
+            _context3.next = 16;
+            return wait();
+
+          case 16:
+            expect(instance.get('value1')).to.eql(10);
+
+          case 17:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should log error when max < min', function () {
+    var Demo = /*#__PURE__*/function (_Component) {
+      _inheritsLoose(Demo, _Component);
+
+      function Demo() {
+        var _context4;
+
+        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(_context4 = [this]).call(_context4, args)) || this;
+        _this.Spinner = Spinner;
+        return _this;
+      }
+
+      return Demo;
+    }(Component);
+
+    Demo.template = "\n                const {Spinner} = this;\n                <Spinner min={20}\n                    max={0}\n                    step={undefined}\n                    value={1}\n                />\n            ";
+    var test = fakeError();
+
+    var _mount4 = mount(Demo),
+        instance = _mount4[0],
+        element = _mount4[1];
+
+    expect(element.innerHTML).to.matchSnapshot();
+    test('[Spinner] min must less than or equal to max, but got min: 20 max: 0');
+  });
+  it('should format value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount5, instance, element, _element$querySelecto3, input1, input2, increase, decrease;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(FormatterDemo), instance = _mount5[0], element = _mount5[1];
+            _element$querySelecto3 = element.querySelectorAll('input'), input1 = _element$querySelecto3[0], input2 = _element$querySelecto3[1];
+            expect(input1.value).to.eql('￥1,000');
+            expect(input2.value).to.eql('增长率 78%'); // increase / decrease
+
+            increase = element.querySelector('.k-left');
+            increase.click();
+            _context5.next = 8;
+            return wait();
+
+          case 8:
+            expect(input1.value).to.eql('￥999');
+            decrease = element.querySelectorAll('.k-right')[1];
+            decrease.click();
+            _context5.next = 13;
+            return wait();
+
+          case 13:
+            expect(input2.value).to.eql('增长率 79%'); // input
+
+            input1.value = '9999';
+            dispatchEvent(input1, 'input');
+            dispatchEvent(input1, 'change');
+            _context5.next = 19;
+            return wait();
+
+          case 19:
+            expect(input1.value).to.eql('￥9,999');
+            expect(instance.get('money')).to.eql(9999);
+            input2.value = '99';
+            dispatchEvent(input2, 'input');
+            dispatchEvent(input1, 'change');
+            _context5.next = 26;
+            return wait();
+
+          case 26:
+            expect(input2.value).to.eql('99');
+            expect(instance.get('percent')).to.eql(99);
+            dispatchEvent(input2, 'change');
+            _context5.next = 31;
+            return wait();
+
+          case 31:
+            expect(input2.value).to.eql('增长率 99%');
+
+          case 32:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should trigger change event correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var onChange, Demo, _mount6, instance, element, increase, decrease, input;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            onChange = sinon.spy(function (v) {
+              return console.log(v);
+            });
+
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context6;
+
+                var _this2;
+
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context6 = [this]).call(_context6, args)) || this;
+                _this2.Spinner = Spinner;
+                return _this2;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto._onChange = function _onChange(v) {
+                onChange(v);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Spinner} = this;\n                <Spinner ev-change={this._onChange} />\n            ";
+            _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1]; // increase / decrease
+
+            increase = element.querySelector('.k-left');
+            increase.click();
+            expect(onChange.callCount).to.eql(1);
+            expect(onChange.calledWith(-1)).to.be.true;
+            decrease = element.querySelector('.k-right');
+            decrease.click();
+            expect(onChange.callCount).to.eql(2);
+            expect(onChange.calledWith(0)).to.be.true;
+            input = element.querySelector('input');
+            dispatchEvent(input, 'focus');
+            input.value = '1';
+            dispatchEvent(input, 'input');
+            input.value = '12';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'change');
+            _context7.next = 21;
+            return wait();
+
+          case 21:
+            expect(onChange.callCount).to.eql(3);
+            expect(onChange.calledWith(12)).to.be.true;
+
+          case 23:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should be min + step * n', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount7, instance, element, _element$querySelecto4, prev, next, input;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            _mount7 = mount(ForceStepDemo), instance = _mount7[0], element = _mount7[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-btn'), prev = _element$querySelecto4[0], next = _element$querySelecto4[1];
+            input = element.querySelector('.k-input-inner');
+            input.value = '1';
+            dispatchEvent(input, 'change');
+            _context8.next = 7;
+            return wait();
+
+          case 7:
+            expect(instance.get('value1')).to.eql(1.2);
+            input.value = '9.9';
+            dispatchEvent(input, 'change');
+            _context8.next = 12;
+            return wait();
+
+          case 12:
+            expect(instance.get('value1')).to.eql(9.6);
+            input.value = '10';
+            dispatchEvent(input, 'change');
+            _context8.next = 17;
+            return wait();
+
+          case 17:
+            expect(instance.get('value1')).to.eql(10);
+            prev.click();
+            _context8.next = 21;
+            return wait();
+
+          case 21:
+            expect(instance.get('value1')).to.eql(8.4);
+
+          case 22:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('dynamic step', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, btns, test, _test;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            _test = function _test3() {
+              _test = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(index) {
+                var _context9;
+
+                var _ref8, prev, next, model;
+
+                return _regeneratorRuntime.wrap(function _callee7$(_context10) {
+                  while (1) {
+                    switch (_context10.prev = _context10.next) {
+                      case 0:
+                        _ref8 = index === 1 ? btns : _sliceInstanceProperty(_context9 = _Array$from(btns)).call(_context9, 2), prev = _ref8[0], next = _ref8[1];
+                        model = "value" + index;
+                        prev.click();
+                        _context10.next = 5;
+                        return wait();
+
+                      case 5:
+                        expect(instance.get(model)).to.eql(-1);
+                        instance.set(model, -5);
+                        _context10.next = 9;
+                        return wait();
+
+                      case 9:
+                        prev.click();
+                        _context10.next = 12;
+                        return wait();
+
+                      case 12:
+                        expect(instance.get(model)).to.eql(-10);
+                        next.click();
+                        _context10.next = 16;
+                        return wait();
+
+                      case 16:
+                        expect(instance.get(model)).to.eql(-5);
+                        next.click();
+                        _context10.next = 20;
+                        return wait();
+
+                      case 20:
+                        expect(instance.get(model)).to.eql(-4);
+                        instance.set(model, 5);
+                        _context10.next = 24;
+                        return wait();
+
+                      case 24:
+                        next.click();
+                        _context10.next = 27;
+                        return wait();
+
+                      case 27:
+                        expect(instance.get(model)).to.eql(10);
+                        prev.click();
+                        _context10.next = 31;
+                        return wait();
+
+                      case 31:
+                        expect(instance.get(model)).to.eql(5);
+                        prev.click();
+                        _context10.next = 35;
+                        return wait();
+
+                      case 35:
+                        expect(instance.get(model)).to.eql(4);
+
+                      case 36:
+                      case "end":
+                        return _context10.stop();
+                    }
+                  }
+                }, _callee7);
+              }));
+              return _test.apply(this, arguments);
+            };
+
+            test = function _test2(_x) {
+              return _test.apply(this, arguments);
+            };
+
+            _mount8 = mount(DynamicStepDemo), instance = _mount8[0], element = _mount8[1];
+            btns = element.querySelectorAll('.k-btn');
+            _context11.next = 6;
+            return test(1);
+
+          case 6:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('should set correct value with dynamic step when min is not equal 0', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element, _element$querySelecto5, prev, next;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context12;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+                _this3.Spinner = Spinner;
+                return _this3;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: 100
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "const {Spinner} = this; <Spinner min={30}\n                max={500}\n                step={{100: 10, 500: 50}}\n                v-model=\"value\"\n                forceStep\n            />";
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+            _element$querySelecto5 = element.querySelectorAll('.k-btn'), prev = _element$querySelecto5[0], next = _element$querySelecto5[1];
+            next.click();
+            _context13.next = 7;
+            return wait();
+
+          case 7:
+            expect(instance.get('value')).to.eql(150);
+            prev.click();
+            _context13.next = 11;
+            return wait();
+
+          case 11:
+            expect(instance.get('value')).to.eql(100);
+            prev.click();
+            _context13.next = 15;
+            return wait();
+
+          case 15:
+            expect(instance.get('value')).to.eql(90);
+
+          case 16:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee9);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/spinner/index.vdt.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Input } from '../input';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'className': 'k-spinner-icon ion-ios-minus-empty'
+};
+var _$tmp1 = {
+  'className': 'k-spinner-icon ion-ios-arrow-down'
+};
+var _$tmp2 = {
+  'className': 'k-spinner-icon ion-ios-plus-empty'
+};
+var _$tmp3 = {
+  'className': 'k-spinner-icon ion-ios-arrow-up'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      disabled = _this$get.disabled,
+      size = _this$get.size,
+      vertical = _this$get.vertical,
+      value = _this$get.value,
+      width = _this$get.width;
+
+  var classNameObj = (_classNameObj = {
+    'k-spinner': true,
+    'k-disabled': disabled
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj['k-vertical'] = vertical, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$change = this.change,
+      decrease = _this$change.decrease,
+      increase = _this$change.increase,
+      changeValue = _this$change.changeValue,
+      onFocusin = _this$change.onFocusin;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$cc(Button, {
+    'icon': true,
+    'ev-click': decrease,
+    'disabled': this.isDisabledDecrease(),
+    'className': 'k-spinner-btn k-left',
+    'size': size,
+    'children': !vertical ? _$cc(Icon, _$tmp0) : _$cc(Icon, _$tmp1)
+  }), _$cc(Input, {
+    'className': 'k-spinner-input',
+    'disabled': disabled,
+    'ev-change': changeValue,
+    'ev-focusin': onFocusin,
+    'value': this.value.showValue.value,
+    'ev-input': this.onInput,
+    'size': size,
+    'width': width
+  }), _$cc(Button, {
+    'icon': true,
+    'ev-click': increase,
+    'disabled': this.isDisabledIncrease(),
+    'className': 'k-spinner-btn k-right',
+    'size': size,
+    'children': !vertical ? _$cc(Icon, _$tmp2) : _$cc(Icon, _$tmp3)
+  })]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/spinner/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';