@king-design/react 2.0.0-beta.0

package/components/cascader/useValue.d.ts

@@ -0,0 +1,14 @@
+export declare type Value = string[];
+declare type Values = Value[];
+export declare function useValue(): {
+    values: import("../../hooks/useState").State<Values>;
+    isShowed: (value: string, level: number) => boolean;
+    isSelected: (value: string, level: number) => boolean;
+    onSelect: (value: string, level: number) => void;
+    toggleShowedValue: (value: string, level: number, showed: boolean) => void;
+    setValue: (newValue: Value) => void;
+};
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/cascader/useValue.js

@@ -0,0 +1,125 @@
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { useInstance } from 'intact-react';
+import { useState, watchState } from '../../hooks/useState';
+import { isNullOrUndefined } from 'intact-shared';
+import { isEqualArray, last } from '../utils';
+export function useValue() {
+  var instance = useInstance(); // Normalize the value to multipe values, no matter it's multipe or not
+
+  var values = useState([]);
+  var showedValue = useState([]);
+  instance.watch('value', function (value, oldValue) {
+    var _instance$get = instance.get(),
+        multiple = _instance$get.multiple;
+
+    if (isNullOrUndefined(value)) return values.set([]);
+
+    if (multiple) {
+      values.set(value);
+    } else {
+      values.set([value]);
+    }
+  });
+  watchState(values, function (values, oldValue) {
+    if (isEqualArray(values, oldValue)) return;
+
+    if (!instance.get('multiple')) {
+      instance.set({
+        value: values[0]
+      });
+    } else {
+      instance.set({
+        value: values
+      });
+    }
+  });
+  instance.watch('_show', function (value) {
+    if (value) {
+      showedValue.set(last(values.value) || []);
+    }
+  });
+
+  function isShowed(value, level) {
+    return showedValue.value[level] === value;
+  }
+
+  function isSelected(value, level) {
+    var _context;
+
+    return _findIndexInstanceProperty(_context = values.value).call(_context, function (_value) {
+      return _value[level] === value;
+    }) > -1;
+  }
+
+  function onSubDropdownShow(value, level) {
+    var _context2;
+
+    var _value = _sliceInstanceProperty(_context2 = showedValue.value).call(_context2, 0, level);
+
+    _value[level] = value;
+    showedValue.set(_value);
+
+    if (instance.get('changeOnSelect')) {
+      onSelect(value, level);
+    }
+  }
+
+  function onSubDropdownHide(value, level) {
+    var _context3;
+
+    if (showedValue.value[level] !== value) return;
+
+    var _value = _sliceInstanceProperty(_context3 = showedValue.value).call(_context3, 0, level);
+
+    showedValue.set(_value);
+  }
+
+  function toggleShowedValue(value, level, showed) {
+    if (showed) {
+      onSubDropdownShow(value, level);
+    } else {
+      onSubDropdownHide(value, level);
+    }
+  }
+
+  function onSelect(value, level) {
+    var _context4;
+
+    // maybe the showedValue has the leaf value when we set it on show menu,
+    // if we select by clicking, the showedValue has not the leaf value,
+    // no matter which case, we set the last value by level
+    var newValue = _sliceInstanceProperty(_context4 = showedValue.value).call(_context4, 0);
+
+    newValue[level] = value;
+    setValue(newValue);
+  }
+
+  function setValue(newValue) {
+    if (instance.get('multiple')) {
+      var _context5;
+
+      var oldValue = values.value; // ignore the same value
+
+      if (_findInstanceProperty(oldValue).call(oldValue, function (value) {
+        return isEqualArray(value, newValue);
+      })) return;
+      values.set(_concatInstanceProperty(_context5 = []).call(_context5, oldValue, [newValue]));
+    } else {
+      values.set([newValue]);
+    }
+  }
+
+  return {
+    values: values,
+    isShowed: isShowed,
+    isSelected: isSelected,
+    onSelect: onSelect,
+    toggleShowedValue: toggleShowedValue,
+    setValue: setValue
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/checkbox/index.d.ts

@@ -0,0 +1,27 @@
+import { Component, TypeDefs } from 'intact-react';
+import { CommonInputHTMLAttributes, Events } from '../types';
+export interface CheckboxProps<V = boolean> extends CommonInputHTMLAttributes {
+    disabled?: boolean;
+    value?: V;
+    trueValue?: any;
+    falseValue?: any;
+    indeterminate?: boolean;
+}
+export interface CheckboxEvents<V = boolean> {
+    click: [MouseEvent];
+    change: [V, MouseEvent];
+}
+export declare class Checkbox<V = boolean> extends Component<CheckboxProps<V>, CheckboxEvents<V>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<Omit<CheckboxProps<boolean>, keyof CommonInputHTMLAttributes>>>;
+    static defaults: () => Partial<CheckboxProps<boolean>>;
+    static events: Events<CheckboxEvents<boolean>>;
+    private inputRef;
+    private isChecked;
+    private setCheckboxModel;
+    private onClick;
+    private onKeypress;
+}
+
+
+export {normalize} from 'intact-react';

package/components/checkbox/index.js

@@ -0,0 +1,122 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { __decorate } from "tslib";
+import { Component, createRef } from 'intact-react';
+import template from './index.vdt';
+import { bind } from '../utils';
+import { isArray } from 'intact-shared';
+var typeDefs = {
+  disabled: Boolean,
+  value: null,
+  trueValue: null,
+  falseValue: null,
+  indeterminate: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    trueValue: true,
+    falseValue: false
+  };
+};
+
+var events = {
+  click: true,
+  change: true
+};
+export var Checkbox = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Checkbox, _Component);
+
+  function Checkbox() {
+    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 = Checkbox.prototype;
+
+  _proto.isChecked = function isChecked() {
+    var _this$get = this.get(),
+        value = _this$get.value,
+        trueValue = _this$get.trueValue;
+
+    return isArray(value) ? value.indexOf(trueValue) > -1 : value === trueValue;
+  };
+
+  _proto.setCheckboxModel = function setCheckboxModel(event) {
+    var _event$target;
+
+    var _this$get2 = this.get(),
+        trueValue = _this$get2.trueValue,
+        falseValue = _this$get2.falseValue;
+
+    var checked = (_event$target = event.target) == null ? void 0 : _event$target.checked;
+    var value = this.get('value');
+
+    if (isArray(value)) {
+      value = _sliceInstanceProperty(value).call(value, 0);
+      var index = value.indexOf(trueValue);
+
+      if (checked) {
+        if (index === -1) {
+          value.push(trueValue);
+        }
+      } else {
+        if (index > -1) {
+          _spliceInstanceProperty(value).call(value, index, 1);
+        }
+      }
+    } else {
+      value = checked ? trueValue : falseValue;
+    }
+
+    this.set('value', value);
+  };
+
+  _proto.onClick = function onClick(e) {
+    // ignore the click event from label, otherwise it will trigger click event twice
+    if (e.target !== this.inputRef.value) {
+      e.stopPropagation();
+      return;
+    }
+
+    var _this$get3 = this.get(),
+        disabled = _this$get3.disabled;
+
+    if (disabled) {
+      this.trigger('click', e);
+    } else {
+      this.setCheckboxModel(e);
+      this.trigger('click', e);
+      this.trigger('change', this.get('value'), e);
+    }
+  };
+
+  _proto.onKeypress = function onKeypress(e) {
+    if (e.keyCode === 13 || e.key === 'Enter') {
+      this.inputRef.value.click();
+    }
+  };
+
+  return Checkbox;
+}(Component);
+Checkbox.template = template;
+Checkbox.typeDefs = typeDefs;
+Checkbox.defaults = defaults;
+Checkbox.events = events;
+
+__decorate([bind], Checkbox.prototype, "onClick", null);
+
+__decorate([bind], Checkbox.prototype, "onKeypress", null);
+
+export {normalize} from 'intact-react';

package/components/checkbox/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/checkbox/index.spec.js

@@ -0,0 +1,217 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Array$from2 from "@babel/runtime-corejs3/core-js/array/from";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component } from 'intact-react';
+import GroupDemo from '~/components/checkbox/demos/group';
+import ValueDemo from '~/components/checkbox/demos/value';
+import BasicDemo from '~/components/checkbox/demos/basic';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { Checkbox } from './';
+import { bind } from '../utils';
+describe('Checkbox', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should get value correctly of group checkboxes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _Array$from, first, second;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(GroupDemo), instance = _mount[0], element = _mount[1];
+            _Array$from = _Array$from2(element.querySelectorAll('.k-checkbox')), first = _Array$from[0], second = _Array$from[1];
+            first.click();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('languages')).be.eql(['Javascript']);
+            second.click();
+            _context.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('languages')).be.eql(['Javascript', 'C++']);
+            first.click();
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('languages')).be.eql(['C++']);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should get value correctly of checkbox which set trueValue and falseValue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _Array$from3, first, second, third;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(ValueDemo), instance = _mount2[0], element = _mount2[1];
+            _Array$from3 = _Array$from2(element.querySelectorAll('.k-checkbox')), first = _Array$from3[0], second = _Array$from3[1], third = _Array$from3[2];
+            first.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('value1')).be.true;
+            first.click();
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('value1')).be.false;
+            second.click();
+            _context2.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('value2')).be.eql('checked');
+            second.click();
+            _context2.next = 17;
+            return wait();
+
+          case 17:
+            expect(instance.get('value2')).be.false;
+            third.click();
+            _context2.next = 21;
+            return wait();
+
+          case 21:
+            expect(instance.get('value3')).be.eql(instance.get('checkedValue'));
+            third.click();
+            _context2.next = 25;
+            return wait();
+
+          case 25:
+            expect(instance.get('value3')).be.eql(0);
+
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should check when press enter key for enabled checkbox', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _Array$from4, first, second;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
+            _Array$from4 = _Array$from2(element.querySelectorAll('.k-checkbox')), first = _Array$from4[0], second = _Array$from4[1];
+            dispatchEvent(first, 'keypress', {
+              keyCode: 13
+            });
+            _context3.next = 5;
+            return wait();
+
+          case 5:
+            expect(first.className).include('k-checked');
+            dispatchEvent(second, 'keypress', {
+              keyCode: 13
+            });
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            expect(second.className).not.include('k-checked');
+
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should only trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var spy, Demo, _mount4, instance, element, _Array$from5, checkbox1, checkbox2, checkbox3;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            spy = sinon.spy();
+
+            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.Checkbox = Checkbox;
+                return _this;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto.onChange = function onChange(v) {
+                this.set('value', v);
+                spy(v);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Checkbox} = this;\n                <div>\n                    <Checkbox v-for={[1, 2, 3]} \n                        trueValue={$value} \n                        name=\"name\"\n                        value={this.get('value')} \n                        ev-change={this.onChange}\n                        disabled={$value === 3}\n                    />\n                </div>\n            ";
+
+            Demo.defaults = function () {
+              return {
+                value: [1]
+              };
+            };
+
+            __decorate([bind], Demo.prototype, "onChange", null);
+
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            _Array$from5 = _Array$from2(element.querySelectorAll('.k-checkbox')), checkbox1 = _Array$from5[0], checkbox2 = _Array$from5[1], checkbox3 = _Array$from5[2];
+            checkbox2.click();
+            _context5.next = 10;
+            return wait();
+
+          case 10:
+            expect(spy.callCount).to.eql(1);
+            expect(spy.calledWith([1, 2])).to.eql(true);
+            checkbox1.click();
+            _context5.next = 15;
+            return wait();
+
+          case 15:
+            expect(spy.callCount).to.eql(2);
+            expect(spy.calledWith([2])).to.eql(true);
+            checkbox3.click();
+            _context5.next = 20;
+            return wait();
+
+          case 20:
+            expect(spy.callCount).to.eql(2);
+
+          case 21:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/checkbox/index.vdt.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "disabled", "falseValue", "children", "value", "trueValue", "style", "indeterminate", "title"];
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-react';
+import { getRestProps } from '../utils';
+import makeStyles from './styles';
+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,
+      falseValue = _this$get.falseValue,
+      children = _this$get.children,
+      value = _this$get.value,
+      trueValue = _this$get.trueValue,
+      style = _this$get.style,
+      indeterminate = _this$get.indeterminate,
+      title = _this$get.title,
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
+  var isChecked = this.isChecked();
+  var classNameObj = (_classNameObj = {
+    'k-checkbox': true,
+    'k-disabled': disabled,
+    'k-checked': isChecked,
+    'k-indeterminate': indeterminate
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
+    if (rest[name]) {
+      if (name === 'ev-click' || name === 'ev-change') {// do not bind click to label, otherwise it will trigger click event twice
+        // don't bind change to input, use click instead of, #448
+        // evClick = rest[name];
+      } else {
+        memo[name] = rest[name];
+      }
+
+      delete rest[name];
+    }
+
+    return memo;
+  }, {});
+  return _$cv('label', _extends({
+    'className': _$cn(classNameObj),
+    'style': style,
+    'tabindex': disabled ? null : "0",
+    'title': title,
+    'ev-click': this.onClick,
+    'ev-keypress': this.onKeypress
+  }, events), [_$ce(2, 'span', _$cv('input', _extends({
+    'type': 'checkbox',
+    'checked': isChecked,
+    'value': trueValue,
+    'trueValue': trueValue,
+    'falseValue': falseValue,
+    'disabled': disabled,
+    'tabindex': '-1',
+    'ref': this.inputRef
+  }, getRestProps(this, rest))), 2, 'k-checkbox-wrapper'), children ? _$ce(2, 'span', children, 0, 'k-checkbox-text') : undefined]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/checkbox/styles.d.ts

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

package/components/checkbox/styles.js

@@ -0,0 +1,77 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: '14px',
+
+  get borderColor() {
+    return theme.color.darkBorder;
+  },
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  get transition() {
+    return theme.transition;
+  },
+
+  bgColor: '#fff',
+  // text
+  text: {
+    gap: '8px'
+  },
+  // checked
+  checked: {
+    get borderColor() {
+      return theme.color.primary;
+    },
+
+    get bgColor() {
+      return checkbox.checked.borderColor;
+    }
+
+  },
+  inner: {
+    width: '5px',
+    height: '10px',
+    top: '-1px',
+    left: '4px',
+    border: '1px solid #fff'
+  },
+  // disabled
+  disabled: {
+    get color() {
+      return theme.color.disabled;
+    },
+
+    get borderColor() {
+      return theme.color.disabledBorder;
+    },
+
+    get bgColor() {
+      return theme.color.disabledBg;
+    },
+
+    get innerColor() {
+      return theme.color.disabledBorder;
+    }
+
+  },
+  // indeterminate
+  indeterminate: {
+    innerLeft: '3px'
+  }
+};
+var checkbox;
+setDefault(function () {
+  checkbox = deepDefaults(theme, {
+    checkbox: defaults
+  }).checkbox;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{display:inline-block;width:", checkbox.width, ";height:", checkbox.width, ";vertical-align:middle;border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{vertical-align:middle;margin-left:", checkbox.text.gap, ";display:inline-block;flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+}
+
+export {normalize} from 'intact-react';

package/components/code/crossDomain.d.ts

@@ -0,0 +1,4 @@
+export declare function crossDomainWorker(): void;
+
+
+export {normalize} from 'intact-react';