@king-design/react 2.0.0-beta.0

package/components/cascader/index.spec.js

@@ -0,0 +1,283 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/cascader/demos/basic';
+import CustomDemo from '~/components/cascader/demos/custom';
+import ChangeOnSelectDemo from '~/components/cascader/demos/changeOnSelect';
+import LoadDataDemo from '~/components/cascader/demos/loadData';
+import FilterDemo from '~/components/cascader/demos/filterable';
+import { mount, unmount, dispatchEvent, getElement, getElements, wait } from '../../test/utils';
+describe('Cascader', function () {
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            unmount();
+            _context.next = 3;
+            return wait(400);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount, instance, element, select, dropdown1, _dropdown1$querySelec, item1, item2, dropdown2, _dropdown2$querySelec, item11, item12, dropdown3, _dropdown3$querySelec, item21, item22, _getElements, _dropdown1, _dropdown2, _dropdown3;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            select = element.querySelector('.k-cascader');
+            select.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec[0], item2 = _dropdown1$querySelec[1];
+            item2.click();
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            dropdown2 = getElement('.k-cascader-menu');
+            _dropdown2$querySelec = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item11 = _dropdown2$querySelec[0], item12 = _dropdown2$querySelec[1];
+            item12.click();
+            _context2.next = 16;
+            return wait();
+
+          case 16:
+            dropdown3 = getElement('.k-cascader-menu');
+            _dropdown3$querySelec = dropdown3.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown3$querySelec[0], item22 = _dropdown3$querySelec[1];
+            item22.click();
+            _context2.next = 21;
+            return wait();
+
+          case 21:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyangxian']);
+            select.click();
+            _context2.next = 26;
+            return wait();
+
+          case 26:
+            _getElements = getElements('.k-cascader-menu'), _dropdown1 = _getElements[0], _dropdown2 = _getElements[1], _dropdown3 = _getElements[2];
+            expect(_dropdown1.innerHTML).to.matchSnapshot();
+            expect(_dropdown2.innerHTML).to.matchSnapshot();
+            expect(_dropdown3.innerHTML).to.matchSnapshot();
+
+          case 30:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('custom label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount2, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount2 = mount(CustomDemo), instance = _mount2[0], element = _mount2[1];
+            instance.set('value', ['beijing', 'haidian']);
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('value', ['hunan', 'yueyang', 'yueyangxian']);
+            _context3.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('change on select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, select, dropdown1, _dropdown1$querySelec2, item1, item2;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(ChangeOnSelectDemo), instance = _mount3[0], element = _mount3[1];
+            select = element.querySelector('.k-cascader');
+            select.click();
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec2 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec2[0], item2 = _dropdown1$querySelec2[1];
+            item2.click();
+            _context4.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('value')).to.eql(['hunan']);
+            item1.click();
+            _context4.next = 14;
+            return wait();
+
+          case 14:
+            expect(instance.get('value')).to.eql(['beijing']);
+
+          case 15:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('load data asychronously', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount4, instance, element, dropdown1, _dropdown1$querySelec3, item1, item2, dropdown2, _dropdown2$querySelec2, item21, item22, dropdown3;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount4 = mount(LoadDataDemo), instance = _mount4[0], element = _mount4[1];
+            element.click();
+            _context5.next = 4;
+            return wait();
+
+          case 4:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec3 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec3[0], item2 = _dropdown1$querySelec3[1];
+            item2.click();
+            _context5.next = 9;
+            return wait();
+
+          case 9:
+            dropdown2 = getElement('.k-cascader-menu');
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            expect(dropdown2.innerText).to.eql('');
+            _context5.next = 14;
+            return wait(1500);
+
+          case 14:
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            expect(dropdown2.innerText).to.not.eql('');
+            _dropdown2$querySelec2 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown2$querySelec2[0], item22 = _dropdown2$querySelec2[1];
+            item22.click();
+            _context5.next = 20;
+            return wait();
+
+          case 20:
+            dropdown3 = getElement('.k-cascader-menu');
+            expect(dropdown3.innerHTML).to.matchSnapshot();
+            expect(dropdown3.innerText).to.eql('无数据');
+
+          case 23:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('filter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount5, instance, element, input, dropdown, dropdown1;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(FilterDemo), instance = _mount5[0], element = _mount5[1];
+            input = element.querySelector('.k-input-inner'); // show menu
+
+            input.click();
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            // should show layer when input empty string
+            input.value = ' ';
+            dispatchEvent(input, 'input');
+            _context6.next = 9;
+            return wait();
+
+          case 9:
+            dropdown = getElement('.k-cascader-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            expect(dropdown.innerText).to.eql('北京\n湖南');
+            input.value = '长沙';
+            dispatchEvent(input, 'input');
+            _context6.next = 16;
+            return wait();
+
+          case 16:
+            dropdown1 = getElement('.k-cascader-filter');
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            expect(dropdown1.innerText).to.eql('湖南 / 长沙市 / 岳麓区'); // should show no-data layer
+
+            input.value = 'xxx';
+            dispatchEvent(input, 'input');
+            _context6.next = 23;
+            return wait();
+
+          case 23:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            expect(dropdown1.innerText).to.eql('无匹配数据');
+            input.value = '岳阳';
+            dispatchEvent(input, 'input');
+            _context6.next = 29;
+            return wait();
+
+          case 29:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            expect(dropdown1.childElementCount).to.eql(2);
+            dropdown1.querySelector('.k-dropdown-item').click();
+            _context6.next = 34;
+            return wait();
+
+          case 34:
+            expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
+
+          case 35:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('no data for init data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount6, instance, element, _element$querySelecto, select, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount6 = mount(BasicDemo), instance = _mount6[0], element = _mount6[1];
+            _element$querySelecto = element.querySelectorAll('.k-cascader'), select = _element$querySelecto[1];
+            dispatchEvent(select, 'click');
+            _context7.next = 5;
+            return wait();
+
+          case 5:
+            dropdown = getElement('.k-cascader-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            expect(dropdown.innerText).to.eql('无数据');
+
+          case 8:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/cascader/index.vdt.js

@@ -0,0 +1,151 @@
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact-react';
+import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
+import { Icon } from '../icon';
+import { _$ } from '../../i18n';
+import { makeMenuStyles, makeFilterMenuStyles } from './styles';
+var _$tmp0 = {
+  'className': 'ion-load-c k-cascader-loading',
+  'rotate': true
+};
+var _$tmp1 = {
+  'className': 'k-cascader-arrow ion-ios-arrow-right'
+};
+var _$tmp2 = {
+  'className': 'k-cascader'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      data = _this$get.data,
+      trigger = _this$get.trigger,
+      filterable = _this$get.filterable;
+
+  var baseMenuStyles = makeMenuStyles();
+  var classNameObj = (_classNameObj = {
+    'k-cascader-menu': true
+  }, _classNameObj[baseMenuStyles] = true, _classNameObj);
+
+  var _this$value = this.value,
+      values = _valuesInstanceProperty(_this$value),
+      isShowed = _this$value.isShowed,
+      isSelected = _this$value.isSelected,
+      onSelect = _this$value.onSelect,
+      toggleShowedValue = _this$value.toggleShowedValue;
+
+  var Options = function Options(data, level, loaded) {
+    if (!data.length) {
+      if (!loaded) {
+        return _$cc(Icon, _$tmp0);
+      } else {
+        return _$ce(2, 'div', _$('无数据'), 0, 'k-cascader-empty');
+      }
+    }
+
+    return _mapInstanceProperty(data).call(data, function (item, index) {
+      var value = item.value;
+      var showed = isShowed(value, level);
+      var selected = isSelected(value, level);
+      var children = item.children;
+
+      var Item = function Item() {
+        return _$cc(DropdownItem, {
+          'disabled': item.disabled,
+          'className': _$cn({
+            'k-cascader-option': true,
+            'k-active': showed,
+            'k-selected': selected
+          }),
+          'ev-select': onSelect.bind(null, value, level),
+          'children': [item.label, children ? _$cc(Icon, _$tmp1) : undefined]
+        });
+      };
+
+      return children ? _$cc(Dropdown, {
+        'position': _this.positionObj,
+        'of': 'parent',
+        'disabled': item.disabled,
+        'trigger': trigger,
+        'value': showed,
+        'ev-$changed:value': toggleShowedValue.bind(null, value, level),
+        'ev-show': _this.load.bind(null, item),
+        'children': [Item(), _$cc(DropdownMenu, {
+          'className': _$cn(classNameObj),
+          'children': showed ? Options(children, level + 1, item.loaded) : null
+        })]
+      }) : Item();
+    });
+  };
+
+  var _this$filterable = this.filterable,
+      filter = _filterInstanceProperty(_this$filterable),
+      keywords = _this$filterable.keywords.value,
+      selectByFilter = _this$filterable.selectByFilter;
+
+  return _$su.call($this, _$tmp2, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['base-menu'] = function ($super) {
+      var _$cn2;
+
+      return !filterable || !keywords ? _$cc(DropdownMenu, {
+        'className': _$cn(classNameObj),
+        'key': 'common',
+        'children': Options(data, 0, true)
+      }, 'common') : _$cc(DropdownMenu, {
+        'key': 'filter',
+        'className': _$cn((_$cn2 = {
+          'k-cascader-filter': true
+        }, _$cn2[baseMenuStyles] = true, _$cn2[makeFilterMenuStyles()] = true, _$cn2)),
+        'children': function () {
+          var items = filter();
+          if (!items.length) return _$ce(2, 'div', _$('无匹配数据'), 0, 'k-cascader-empty');
+          return _$ma(items, function ($value, $key) {
+            return _$cc(DropdownItem, {
+              'ev-select': selectByFilter.bind(null, $value),
+              'disabled': $value.disabled,
+              'children': function () {
+                // highlight keywords
+                var label = _mapInstanceProperty($value).call($value, function (item) {
+                  return item.label;
+                }).join(' / ');
+
+                var labels = label.split(keywords);
+                var length = labels.length;
+                return _mapInstanceProperty(labels).call(labels, function (item, index) {
+                  var ret = [item];
+
+                  if (index !== length - 1) {
+                    ret.push(_$ce(2, 'em', keywords, 0));
+                  }
+
+                  return ret;
+                });
+              }()
+            });
+          }, $this);
+        }()
+      }, 'filter');
+    }, __$blocks['base-menu'] = function ($super, data) {
+      var block = $blocks['base-menu'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['base-menu'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }), __$blocks;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/cascader/styles.d.ts

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

package/components/cascader/styles.js

@@ -0,0 +1,52 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: '140px',
+  height: '160px',
+  loadingGap: '20px',
+  arrowGap: '8px',
+
+  get selectedColor() {
+    return theme.color.primary;
+  },
+
+  get activeBgColor() {
+    return theme.color.bg;
+  },
+
+  // empty
+  empty: {
+    padding: "16px",
+
+    get color() {
+      return theme.color.placeholder;
+    }
+
+  },
+  // filter
+  filter: {
+    get highlightColor() {
+      return theme.color.danger;
+    },
+
+    minWidth: '300px',
+    maxHeight: '200px'
+  }
+};
+var cascader;
+setDefault(function () {
+  cascader = deepDefaults(theme, {
+    cascader: defaults
+  }).cascader;
+});
+export function makeMenuStyles() {
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+}
+export function makeFilterMenuStyles() {
+  return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");
+}
+
+export {normalize} from 'intact-react';

package/components/cascader/useFilterable.d.ts

@@ -0,0 +1,11 @@
+import type { CascaderData } from './';
+import { State } from '../../hooks/useState';
+import type { Value } from './useValue';
+export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void): {
+    filter: () => CascaderData<any>[][];
+    selectByFilter: (data: CascaderData<any>[]) => void;
+    keywords: State<string>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/cascader/useFilterable.js

@@ -0,0 +1,65 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance } from 'intact-react';
+export function useFilterable(keywords, setValue) {
+  var instance = useInstance();
+
+  function filter() {
+    var _instance$get = instance.get(),
+        data = _instance$get.data,
+        filter = _filterInstanceProperty(_instance$get);
+
+    var ret = [];
+
+    var loop = function loop(data, prefix, valid, disabled) {
+      if (prefix === void 0) {
+        prefix = [];
+      }
+
+      if (valid === void 0) {
+        valid = false;
+      }
+
+      if (disabled === void 0) {
+        disabled = false;
+      }
+
+      data.forEach(function (item) {
+        var _valid = valid || filter(keywords.value, item);
+
+        var _disabled = disabled || item.disabled;
+
+        var _prefix = _sliceInstanceProperty(prefix).call(prefix, 0);
+
+        _prefix.push(item);
+
+        if (item.children) {
+          loop(item.children, _prefix, _valid, _disabled);
+        } else if (_valid) {
+          _prefix.disabled = _disabled;
+          ret.push(_prefix);
+        }
+      });
+    };
+
+    loop(data);
+    return ret;
+  }
+
+  function selectByFilter(data) {
+    var value = _mapInstanceProperty(data).call(data, function (item) {
+      return item.value;
+    });
+
+    setValue(value);
+  }
+
+  return {
+    filter: filter,
+    selectByFilter: selectByFilter,
+    keywords: keywords
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/cascader/useLabel.d.ts

@@ -0,0 +1,6 @@
+export declare function useLabel(): {
+    getLabel: () => import('intact-react').Children;
+};
+
+
+export {normalize} from 'intact-react';

package/components/cascader/useLabel.js

@@ -0,0 +1,43 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-react';
+import { useBaseLabel } from '../select/useBaseLabel';
+export function useLabel() {
+  var instance = useInstance();
+
+  function findLabel(data, value) {
+    var _instance$get = instance.get(),
+        format = _instance$get.format;
+
+    var labels = [];
+    var length = value.length;
+
+    var loop = function loop(data) {
+      for (var i = 0; i < data.length; i++) {
+        var item = data[i];
+
+        if (_includesInstanceProperty(value).call(value, item.value)) {
+          labels.push(item.label);
+
+          if (labels.length === length) {
+            return;
+          }
+        }
+
+        var children = item.children;
+
+        if (children) {
+          loop(children);
+        }
+      }
+    };
+
+    loop(data);
+    return labels.length ? format(labels) : null;
+  }
+
+  return useBaseLabel(function () {
+    return instance.get('data');
+  }, findLabel);
+}
+
+export {normalize} from 'intact-react';

package/components/cascader/useLoad.d.ts

@@ -0,0 +1,5 @@
+import type { CascaderData } from './';
+export declare function useLoad(): (item: CascaderData<any>) => Promise<void>;
+
+
+export {normalize} from 'intact-react';

package/components/cascader/useLoad.js

@@ -0,0 +1,54 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { useInstance } from 'intact-react';
+export function useLoad() {
+  var instance = useInstance();
+
+  function loadData(_x) {
+    return _loadData.apply(this, arguments);
+  }
+
+  function _loadData() {
+    _loadData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
+      var _instance$get, loadData;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _instance$get = instance.get(), loadData = _instance$get.loadData;
+
+              if (loadData) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              if (!(item.children && !item.children.length && !item.loaded)) {
+                _context.next = 8;
+                break;
+              }
+
+              _context.next = 6;
+              return loadData(item);
+
+            case 6:
+              item.loaded = true;
+              instance.forceUpdate();
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _loadData.apply(this, arguments);
+  }
+
+  return loadData;
+}
+
+export {normalize} from 'intact-react';