@king-design/react 2.0.0-beta.0

package/components/transfer/styles.d.ts

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

package/components/transfer/styles.js

@@ -0,0 +1,73 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  fontSize: '12px',
+  searchGap: '16px',
+  listHeight: '251px',
+  panel: {
+    width: '250px',
+    height: '350px',
+
+    get border() {
+      return "1px solid " + theme.color.border;
+    },
+
+    get borderRadius() {
+      return theme.borderRadius;
+    }
+
+  },
+  title: {
+    lineHeight: '40px',
+    fontSize: '14px',
+    padding: '0 16px',
+
+    get color() {
+      return theme.color.title;
+    },
+
+    get bgColor() {
+      return theme.color.bg;
+    },
+
+    countGap: '8px'
+  },
+  item: {
+    get color() {
+      return theme.color.text;
+    },
+
+    get hoverColor() {
+      return theme.color.primary;
+    },
+
+    bgColor: '#fff',
+    hoverBgColor: 'transparent',
+    padding: '5px 16px',
+
+    get height() {
+      return theme.default.height;
+    },
+
+    get descColor() {
+      return theme.color.lightBlack;
+    }
+
+  },
+  arrow: {
+    gap: '16px 10px'
+  }
+};
+var transfer;
+setDefault(function () {
+  transfer = deepDefaults(theme, {
+    transfer: defaults
+  }).transfer;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";display:block;}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;display:table;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:table-cell;height:", transfer.item.height, ";vertical-align:middle;white-space:nowrap;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
+}
+
+export {normalize} from 'intact-react';

package/components/transfer/useCheck.d.ts

@@ -0,0 +1,10 @@
+import type { useFilter, Model } from './useFilter';
+export declare type CheckedKeys = `leftCheckedKeys` | `rightCheckedKeys`;
+export declare function useCheck({ getEnabledData, getShowedData }: ReturnType<typeof useFilter>): {
+    isCheckAll: (model: Model) => boolean | 0;
+    toggleCheckAll: (model: Model, e: MouseEvent) => void;
+    onCheckboxChange: (model: Model, index: number, e: MouseEvent) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/transfer/useCheck.js

@@ -0,0 +1,91 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { useInstance } from 'intact-react';
+export function useCheck(_ref) {
+  var getEnabledData = _ref.getEnabledData,
+      getShowedData = _ref.getShowedData;
+  var instance = useInstance();
+  var startIndex = undefined;
+  var endIndex = undefined;
+  var checked = false;
+
+  function selectAll(model) {
+    var _context;
+
+    var keyName = instance.get('keyName');
+    instance.set(model + "CheckedKeys", _mapInstanceProperty(_context = getEnabledData(model)).call(_context, function (item) {
+      return item[keyName];
+    }));
+  }
+
+  function isCheckAll(model) {
+    var checked = instance.get(model + "CheckedKeys");
+    var data = getEnabledData(model);
+    return data.length && checked.length >= data.length;
+  }
+
+  function toggleCheckAll(model, e) {
+    if (e.target.checked) {
+      selectAll(model);
+    } else {
+      instance.set(model + "CheckedKeys", []);
+    }
+  }
+
+  function onCheckboxChange(model, index, e) {
+    if (startIndex === undefined || !e.shiftKey) {
+      startIndex = index;
+      endIndex = undefined;
+      checked = e.target.checked;
+    } else if (e.shiftKey) {
+      var _context2;
+
+      e.preventDefault();
+      var values = getShowedData(model);
+
+      var checkedKeys = _sliceInstanceProperty(_context2 = instance.get(model + "CheckedKeys")).call(_context2, 0);
+
+      var lastEndIndex = endIndex;
+      var keyName = instance.get('keyName');
+      endIndex = index;
+
+      var update = function update(data, isCheck) {
+        data.forEach(function (item) {
+          if (!item.disabled) {
+            var key = item[keyName];
+
+            var _index = checkedKeys.indexOf(key);
+
+            if (isCheck) {
+              if (!~_index) {
+                checkedKeys.push(key);
+              }
+            } else {
+              if (~_index) {
+                _spliceInstanceProperty(checkedKeys).call(checkedKeys, _index, 1);
+              }
+            }
+          }
+        });
+      };
+
+      if (lastEndIndex !== undefined) {
+        // if exists lastEndIndex, we reset the last result
+        // and set it again
+        update(_sliceInstanceProperty(values).call(values, Math.min(index, lastEndIndex), Math.max(index, lastEndIndex) + 1), !checked);
+      }
+
+      update(_sliceInstanceProperty(values).call(values, Math.min(index, startIndex), Math.max(index, startIndex) + 1), checked);
+      instance.set(model + "CheckedKeys", checkedKeys);
+    }
+  }
+
+  return {
+    isCheckAll: isCheckAll,
+    toggleCheckAll: toggleCheckAll,
+    onCheckboxChange: onCheckboxChange
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/transfer/useFilter.d.ts

@@ -0,0 +1,10 @@
+import { State } from '../../hooks/useState';
+export declare type Model = 'left' | 'right';
+export declare function useFilter(rightData: State<any[]>): {
+    getFilterData: (model: Model) => any[];
+    getShowedData: (model: Model) => any[];
+    getEnabledData: (model: Model) => any[];
+};
+
+
+export {normalize} from 'intact-react';

package/components/transfer/useFilter.js

@@ -0,0 +1,113 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-react';
+export function useFilter(rightData) {
+  var instance = useInstance();
+  instance.on('$receive:value', function (v) {
+    if (!Array.isArray(v)) {
+      instance.set('value', [], {
+        silent: true
+      });
+    } else {
+      var _instance$get = instance.get(),
+          keyName = _instance$get.keyName,
+          data = _instance$get.data;
+
+      var _data = _filterInstanceProperty(data).call(data, function (item) {
+        return ~v.indexOf(item[keyName]);
+      });
+
+      rightData.set(_data);
+    }
+  }); // only change the left status, reserve the right status
+
+  instance.on('$receive:data', function (v) {
+    if (!v || !v.length) {
+      instance.set('leftCheckedKeys', []);
+    } else {
+      var _instance$get2 = instance.get(),
+          leftCheckedKeys = _instance$get2.leftCheckedKeys,
+          keyName = _instance$get2.keyName;
+
+      var allKeys = v.reduce(function (memo, item) {
+        memo[item[keyName]] = true;
+        return memo;
+      }, {});
+
+      var fix = function fix(keys) {
+        var ret = [];
+
+        if (keys) {
+          keys.forEach(function (key) {
+            if (allKeys[key]) {
+              ret.push(key);
+            }
+          });
+        }
+
+        return ret;
+      };
+
+      instance.set('leftCheckedKeys', fix(leftCheckedKeys));
+    }
+  });
+
+  function getFilterData(model) {
+    var data;
+
+    if (model === 'left') {
+      var _context;
+
+      var _instance$get3 = instance.get(),
+          value = _instance$get3.value,
+          keyName = _instance$get3.keyName;
+
+      data = _filterInstanceProperty(_context = instance.get('data')).call(_context, function (item) {
+        return !~value.indexOf(item[keyName]);
+      });
+    } else {
+      data = rightData.value;
+    }
+
+    return data;
+  }
+
+  function getShowedData(model) {
+    var data = getFilterData(model);
+    var keywords = instance.get(model + "Keywords");
+
+    if (instance.get('filterable') && keywords) {
+      var filter = instance.get('filter') || defaultFilter;
+      data = _filterInstanceProperty(data).call(data, function (item) {
+        return filter(item, keywords);
+      });
+    }
+
+    return data;
+  }
+
+  function getEnabledData(model) {
+    var _context2;
+
+    return _filterInstanceProperty(_context2 = getShowedData(model)).call(_context2, function (item) {
+      return !item.disabled;
+    });
+  }
+
+  function defaultFilter(data, keywords) {
+    var _context3;
+
+    var _instance$get4 = instance.get(),
+        labelName = _instance$get4.labelName;
+
+    return _includesInstanceProperty(_context3 = data[labelName]).call(_context3, keywords);
+  }
+
+  return {
+    getFilterData: getFilterData,
+    getShowedData: getShowedData,
+    getEnabledData: getEnabledData
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/transfer/useTransfer.d.ts

@@ -0,0 +1,10 @@
+export declare function useTransfer(): {
+    rightData: import("../../hooks/useState").State<any[]>;
+    enableAdd: () => number | boolean;
+    enableRemove: () => number | boolean;
+    add: () => void;
+    remove: () => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/transfer/useTransfer.js

@@ -0,0 +1,86 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance } from 'intact-react';
+import { useState, watchState } from '../../hooks/useState';
+import { isEqualArray } from '../utils';
+import { isFunction } from 'intact-shared';
+export function useTransfer() {
+  var instance = useInstance();
+  var rightData = useState([], isEqualArray);
+  watchState(rightData, function (v) {
+    var _instance$get = instance.get(),
+        keyName = _instance$get.keyName;
+
+    instance.set('value', _mapInstanceProperty(v).call(v, function (item) {
+      return item[keyName];
+    }));
+  });
+
+  function enableAdd() {
+    var _instance$get2 = instance.get(),
+        enableAdd = _instance$get2.enableAdd,
+        leftCheckedKeys = _instance$get2.leftCheckedKeys;
+
+    if (isFunction(enableAdd)) {
+      return enableAdd();
+    }
+
+    return leftCheckedKeys.length;
+  }
+
+  function enableRemove() {
+    var _instance$get3 = instance.get(),
+        enableRemove = _instance$get3.enableRemove,
+        rightCheckedKeys = _instance$get3.rightCheckedKeys;
+
+    if (isFunction(enableRemove)) {
+      return enableRemove();
+    }
+
+    return rightCheckedKeys.length;
+  }
+
+  function add() {
+    var _context;
+
+    var _instance$get4 = instance.get(),
+        data = _instance$get4.data,
+        leftCheckedKeys = _instance$get4.leftCheckedKeys,
+        keyName = _instance$get4.keyName;
+
+    var _rightData = _concatInstanceProperty(_context = rightData.value).call(_context, _filterInstanceProperty(data).call(data, function (item) {
+      return ~leftCheckedKeys.indexOf(item[keyName]);
+    }));
+
+    rightData.set(_rightData);
+    instance.set('leftCheckedKeys', []);
+    instance.trigger('add');
+  }
+
+  function remove() {
+    var _context2;
+
+    var _instance$get5 = instance.get(),
+        rightCheckedKeys = _instance$get5.rightCheckedKeys,
+        keyName = _instance$get5.keyName;
+
+    var _rightData = _filterInstanceProperty(_context2 = rightData.value).call(_context2, function (item) {
+      return !~rightCheckedKeys.indexOf(item[keyName]);
+    });
+
+    rightData.set(_rightData);
+    instance.set('rightCheckedKeys', []);
+    instance.trigger('remove');
+  }
+
+  return {
+    rightData: rightData,
+    enableAdd: enableAdd,
+    enableRemove: enableRemove,
+    add: add,
+    remove: remove
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/tree/index.d.ts

@@ -0,0 +1,60 @@
+import { Component, Key, TypeDefs } from 'intact-react';
+import { DataItem, Node } from './useNodes';
+import { Mode } from './useDraggable';
+import type { Events } from '../types';
+export type { Node as TreeNode, DataItem as TreeDataItem, };
+export interface TreeProps<K extends Key = Key> {
+    data?: DataItem<K>[];
+    filter?: Filter<K>;
+    uncorrelated?: boolean;
+    checkedKeys?: K[];
+    expandedKeys?: K[];
+    defaultExpandAll?: boolean;
+    selectable?: boolean;
+    selectedKeys?: K[];
+    multiple?: boolean;
+    checkbox?: boolean;
+    load?: (node: Node<K>) => Promise<void> | void;
+    showLine?: boolean;
+    draggable?: boolean;
+    allowDrag?: (node: Node<K>) => boolean;
+    allowDrop?: (node: Node<K>) => boolean;
+}
+export interface TreeEvents<K extends Key> {
+    denydrag: [Node<K>];
+    denydrop: [Node<K>];
+    dragend: [DragEndData<K>];
+    transitionEnd: [];
+}
+export interface TreeBlocks<K extends Key> {
+    label: [DataItem<K>, Node<K>, number];
+}
+declare type DragEndData<K extends Key> = {
+    srcNode: Node<K>;
+    toNode: Node<K>;
+    mode: Mode;
+};
+export declare type TreeDragEndData<K extends Key = Key> = DragEndData<K>;
+declare type Filter<K extends Key> = (data: DataItem<K>, node: Node<K>) => boolean;
+export declare class Tree<K extends Key = Key> extends Component<TreeProps<K>, TreeEvents<K>, TreeBlocks<K>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TreeProps<Key>>>;
+    static defaults: () => Partial<TreeProps<Key>>;
+    static events: Events<TreeEvents<Key>>;
+    private nodes;
+    private checked;
+    private expanded;
+    private selected;
+    private filter;
+    private draggable;
+    private transition;
+    getCheckedData(leafOnly?: boolean): DataItem<Key>[];
+    getSelectedData(): DataItem<Key>[];
+    expand(key: K): void;
+    shrink(key: K): void;
+    getNodes(): Node<K>[];
+    private onClick;
+}
+
+
+export {normalize} from 'intact-react';

package/components/tree/index.js

@@ -0,0 +1,124 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { __decorate } from "tslib";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { useNodes, Node } from './useNodes';
+import { bind } from '../utils';
+import { useChecked } from './useChecked';
+import { useExpanded } from './useExpanded';
+import { useSelected } from './useSelected';
+import { useFilter } from './useFilter';
+import { useDraggable } from './useDraggable';
+import { useTransitionEvent } from './useTransitionEvent';
+var typeDefs = {
+  data: Array,
+  filter: Function,
+  uncorrelated: Boolean,
+  checkedKeys: Array,
+  expandedKeys: Array,
+  defaultExpandAll: Boolean,
+  selectable: Boolean,
+  selectedKeys: Array,
+  multiple: Boolean,
+  checkbox: Boolean,
+  load: Function,
+  showLine: Boolean,
+  draggable: Boolean,
+  allowDrag: Function,
+  allowDrop: Function
+};
+
+var defaults = function defaults() {
+  return {
+    selectable: true,
+    showLine: true
+  };
+};
+
+var events = {
+  denydrag: true,
+  denydrop: true,
+  dragend: true,
+  transitionEnd: true
+};
+export var Tree = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tree, _Component);
+
+  function Tree() {
+    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.nodes = useNodes();
+    _this.checked = useChecked(_this.nodes.getNodes);
+    _this.expanded = useExpanded(_this.nodes.getNodes);
+    _this.selected = useSelected(_this.nodes.getNodes);
+    _this.filter = useFilter(_this.nodes.getNodes, _this.expanded.get);
+    _this.draggable = useDraggable();
+    _this.transition = useTransitionEvent();
+    return _this;
+  }
+
+  var _proto = Tree.prototype;
+
+  _proto.getCheckedData = function getCheckedData(leafOnly) {
+    if (leafOnly === void 0) {
+      leafOnly = false;
+    }
+
+    return this.checked.getCheckedData(leafOnly);
+  };
+
+  _proto.getSelectedData = function getSelectedData() {
+    return this.selected.getSelectedData();
+  };
+
+  _proto.expand = function expand(key) {
+    var expandedKeys = this.expanded.get();
+    expandedKeys.add(key);
+    this.set('expandedKeys', _Array$from(expandedKeys));
+  };
+
+  _proto.shrink = function shrink(key) {
+    var expandedKeys = this.expanded.get();
+    expandedKeys.delete(key);
+    this.set('expandedKeys', _Array$from(expandedKeys));
+  };
+
+  _proto.getNodes = function getNodes() {
+    return this.nodes.getNodes();
+  };
+
+  _proto.onClick = function onClick(node) {
+    if (node.data.disabled) return;
+
+    var _this$get = this.get(),
+        selectable = _this$get.selectable,
+        checkbox = _this$get.checkbox;
+
+    if (selectable) {
+      this.selected.toggle(node);
+    } else if (checkbox) {
+      this.checked.toggle(node);
+    } else {
+      this.expanded.toggle(node);
+    }
+  };
+
+  return Tree;
+}(Component);
+Tree.template = template;
+Tree.typeDefs = typeDefs;
+Tree.defaults = defaults;
+Tree.events = events;
+
+__decorate([bind], Tree.prototype, "onClick", null);
+
+export {normalize} from 'intact-react';

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

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