@king-design/intact 3.5.0-beta.0 → 3.5.0

package/es/components/virtualList/useVirtualRows.js

@@ -0,0 +1,120 @@
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createContext } from '../context';
+import { useState, watchState } from '../../hooks/useState';
+import { useInstance, nextTick, onMounted, onUnmounted, findDomFromVNode } from 'intact';
+import { isNullOrUndefined } from 'intact-shared';
+export var context = createContext();
+var MIN_LENGTH = 10;
+var BUFFER_SIZE = 3;
+export function useVirtualRows() {
+  var instance = useInstance();
+  var rowsHeightMap = new _Map();
+  var startIndex = useState(0);
+  var length = useState(MIN_LENGTH);
+  var calculatedHeight = 0;
+  var rowAvgHeight = 0;
+  var rows = [];
+  function notifyRows(_rows) {
+    var oldRows = rows;
+    var oldLength = rows.length;
+    rows = _rows;
+    // diff oldRows, newRows
+    var newKeys = new _Set(_mapInstanceProperty(_rows).call(_rows, function (row) {
+      return row.key;
+    }));
+    for (var i = 0; i < oldLength; i++) {
+      var oldKey = oldRows[i].key;
+      if (!newKeys.has(oldKey)) {
+        var height = rowsHeightMap.get(oldKey);
+        if (!isNullOrUndefined(height)) {
+          calculatedHeight -= height;
+          rowsHeightMap.delete(oldKey);
+        }
+      }
+    }
+    // update rowAvgHeight
+    if (rowsHeightMap.size === 0) {
+      rowAvgHeight = calculatedHeight = 0;
+    } else {
+      rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+    }
+    if (_rows.length < oldLength) {
+      var maxStartIndex = Math.max(0, _rows.length - length.value);
+      if (startIndex.value > maxStartIndex) {
+        startIndex.set(maxStartIndex);
+        // 重新计算位置
+        nextTick(function () {
+          handleScroll();
+        });
+      }
+    }
+  }
+  function calculateRowsHeight() {
+    for (var i = startIndex.value; i < startIndex.value + length.value && i < rows.length; i++) {
+      var row = rows[i];
+      var key = row.key;
+      if (!rowsHeightMap.has(key)) {
+        var rowDom = findDomFromVNode(row, true);
+        var height = rowDom.offsetHeight;
+        rowsHeightMap.set(key, height);
+        calculatedHeight += height;
+      }
+    }
+    // use the average height to estimate the row height
+    rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+  }
+  watchState(startIndex, function () {
+    nextTick(calculateRowsHeight);
+  });
+  var containerDom;
+  onMounted(function () {
+    // get contains height
+    containerDom = findDomFromVNode(instance.$lastInput, true);
+    var containerHeight = containerDom.offsetHeight;
+    calculateRowsHeight();
+    // calculate the length of rows we should render
+    length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
+    containerDom.addEventListener('scroll', handleScroll);
+  });
+  onUnmounted(function () {
+    containerDom.removeEventListener('scroll', handleScroll);
+  });
+  function getTotalHeight() {
+    return calculatedHeight + rowAvgHeight * (rows.length - rowsHeightMap.size);
+  }
+  var translateY = useState(0);
+  function handleScroll() {
+    var _instance$get = instance.get(),
+      disabled = _instance$get.disabled;
+    if (disabled) return;
+    var scrollTop = containerDom.scrollTop;
+    var accumulatedHeight = 0;
+    var start = 0;
+    while (start < rows.length) {
+      accumulatedHeight += getRowHeightByIndex(start);
+      if (accumulatedHeight > scrollTop) {
+        break;
+      }
+      start++;
+    }
+    startIndex.set(Math.max(start - BUFFER_SIZE, 0));
+    // translateY should substract the buffer size rows height
+    for (var i = start; i >= startIndex.value; i--) {
+      accumulatedHeight -= getRowHeightByIndex(i);
+    }
+    translateY.set(accumulatedHeight);
+  }
+  function getRowHeightByIndex(index) {
+    var key = rows[index].key;
+    return rowsHeightMap.get(key) || rowAvgHeight;
+  }
+  return {
+    notifyRows: notifyRows,
+    startIndex: startIndex,
+    length: length,
+    getTotalHeight: getTotalHeight,
+    translateY: translateY
+  };
+}

package/es/components/virtualList/virtual.d.ts

@@ -0,0 +1,8 @@
+import { Component, TypeDefs } from 'intact';
+export interface VirtualListProps {
+    disabled?: boolean;
+}
+export declare class VirtualList extends Component<VirtualListProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<VirtualListProps>>;
+}

package/es/components/virtualList/virtual.js

@@ -0,0 +1,15 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './virtual.vdt';
+var typeDefs = {
+  disabled: Boolean
+};
+export var VirtualList = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(VirtualList, _Component);
+  function VirtualList() {
+    return _Component.apply(this, arguments) || this;
+  }
+  return VirtualList;
+}(Component);
+VirtualList.template = template;
+VirtualList.typeDefs = typeDefs;

package/es/components/virtualList/virtual.vdt.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc } from 'intact';
+import { getRestProps } from '../utils';
+import { VirtualListContainer } from './container';
+import { VirtualListWrapper } from './wrapper';
+import { VirtualListRows } from './rows';
+import { VirtualListPhantom } from './phantom';
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    children = _this$get.children,
+    disabled = _this$get.disabled;
+  if (disabled) {
+    return children;
+  }
+  return _$cc(VirtualListContainer, _extends({}, getRestProps(this), {
+    'children': [_$cc(VirtualListPhantom), _$cc(VirtualListWrapper, {
+      'children': _$cc(VirtualListRows, {
+        'children': children
+      })
+    })]
+  }));
+}
+;

package/es/components/virtualList/wrapper.d.ts

@@ -0,0 +1,9 @@
+import { Component, TypeDefs, ComponentConstructor } from 'intact';
+export interface VirtualListWrapperProps {
+    tagName?: string | ComponentConstructor;
+}
+export declare class VirtualListWrapper extends Component<VirtualListWrapperProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<VirtualListWrapperProps>>;
+    private config;
+}

package/es/components/virtualList/wrapper.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact';
+import template from './wrapper.vdt';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  tagName: String
+};
+export var VirtualListWrapper = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(VirtualListWrapper, _Component);
+  function VirtualListWrapper() {
+    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.config = useConfigContext();
+    return _this;
+  }
+  return VirtualListWrapper;
+}(Component);
+VirtualListWrapper.template = template;
+VirtualListWrapper.typeDefs = typeDefs;

package/es/components/virtualList/wrapper.vdt.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc } from 'intact';
+import { addStyle, getRestProps } from '../utils';
+import { context as VirtualRowsContext } from './useVirtualRows';
+import { createVNode } from 'intact';
+import { cx } from '@emotion/css';
+export default function ($props, $blocks, $__proto__) {
+  var _this = this;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    _children = _this$get.children,
+    className = _this$get.className,
+    tagName = _this$get.tagName,
+    style = _this$get.style;
+  var k = this.config.k;
+  return _$cc(VirtualRowsContext.Consumer, {
+    'children': function children(_ref) {
+      var _classNameObj;
+      var translateY = _ref.translateY,
+        disabled = _ref.disabled;
+      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-virtual-wrapper"] = !disabled, _classNameObj[className] = className, _classNameObj);
+      var _style = !disabled ? {
+        transform: "translateY(" + translateY + "px)"
+      } : {};
+      return createVNode(tagName || 'div', _extends({}, getRestProps(_this), {
+        className: cx(classNameObj),
+        style: addStyle(style, _style)
+      }), _children);
+    }
+  });
+}
+;

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.0-beta.0
+ * @king-design v3.5.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -63,5 +63,6 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
+export * from './components/virtualList';
 export * from './components/wave';
-export declare const version = "3.5.0-beta.0";
+export declare const version = "3.5.0";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.0-beta.0
+ * @king-design v3.5.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -64,6 +64,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
+export * from './components/virtualList';
 export * from './components/wave';
-export var version = '3.5.0-beta.0';
+export var version = '3.5.0';
 /* generate end */

package/es/site/data/components/select/demos/virtual/index.d.ts

@@ -0,0 +1,11 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    day?: string | null;
+    data: any[];
+}
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+    init(): void;
+}

package/es/site/data/components/select/demos/virtual/index.js

@@ -0,0 +1,32 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      day: null,
+      data: []
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.init = function init() {
+    var arr = [];
+    for (var index = 0; index < 10000; index++) {
+      arr.push({
+        value: index,
+        label: "\u6D4B\u8BD5" + index
+      });
+    }
+    this.set({
+      data: arr
+    });
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/virtual/react.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    day?: string | null;
+    data: any[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+}
+export {};

package/es/site/data/components/select/demos/virtual/react.js

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      day: null,
+      data: []
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var arr = [];
+    for (var index = 0; index < 10000; index++) {
+      arr.push({
+        value: index,
+        label: "\u6D4B\u8BD5" + index
+      });
+    }
+    this.setState({
+      data: arr
+    });
+  };
+  _proto.render = function render() {
+    var _this2 = this,
+      _context2;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      value: this.state.day,
+      onChangeValue: function onChangeValue(day) {
+        return _this2.setState({
+          day: day
+        });
+      },
+      virtual: true
+    }, _mapInstanceProperty(_context2 = this.state.data).call(_context2, function ($value, $key) {
+      return /*#__PURE__*/React.createElement(Option, {
+        value: $value.value
+      }, $value.label);
+    })));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };

package/es/site/data/components/table/demos/fixHeader/index.d.ts

@@ -3,4 +3,10 @@ import { Component } from 'intact';
 import './index.styl';
 export default class extends Component {
     static template: string | import("intact").Template<any>;
+    static defaults(): {
+        data: {
+            name: string;
+            ip: string;
+        }[];
+    };
 }

package/es/site/data/components/table/demos/fixHeader/index.js

@@ -1,13 +1,27 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+var _context;
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 export { default as data } from './index.json';
 import { Component } from 'intact';
 import template from './index.vdt';
 import './index.styl';
+import { range } from 'kpc/components/utils';
+var data = _mapInstanceProperty(_context = range(1, 100)).call(_context, function (item) {
+  return {
+    name: 'name ' + item,
+    ip: '127.0.0.' + item
+  };
+});
 var default_1 = /*#__PURE__*/function (_Component) {
   _inheritsLoose(default_1, _Component);
   function default_1() {
     return _Component.apply(this, arguments) || this;
   }
+  default_1.defaults = function defaults() {
+    return {
+      data: data
+    };
+  };
   return default_1;
 }(Component);
 default_1.template = template;

package/es/site/data/components/table/demos/fixHeader/react.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import './index.styl';
 export default class Demo extends React.Component {
+    state: {
+        data: {
+            name: string;
+            ip: string;
+        }[];
+    };
     render(): React.JSX.Element;
 }

package/es/site/data/components/table/demos/fixHeader/react.js

@@ -1,11 +1,30 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+var _context;
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import React from 'react';
 import { Table, TableColumn } from '@king-design/react';
 import './index.styl';
+import { range } from '@king-design/react/components/utils';
+var data = _mapInstanceProperty(_context = range(1, 100)).call(_context, function (item) {
+  return {
+    name: 'name ' + item,
+    ip: '127.0.0.' + item
+  };
+});
 var Demo = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Demo, _React$Component);
   function Demo() {
-    return _React$Component.apply(this, arguments) || this;
+    var _context2;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
+    _this.state = {
+      data: data
+    };
+    return _this;
   }
   var _proto = Demo.prototype;
   _proto.render = function render() {
@@ -20,17 +39,15 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       key: "a",
       title: "100px"
     })), /*#__PURE__*/React.createElement(Table, {
-      data: [{
-        a: '表头固定啦'
-      }, {
-        a: '下拉'
-      }, {
-        a: 'yeah!'
-      }],
-      fixHeader: "100"
+      data: this.state.data,
+      fixHeader: "300"
     }, /*#__PURE__*/React.createElement(TableColumn, {
-      key: "a",
-      title: "100px"
+      title: "Name",
+      key: "name",
+      fixed: "left"
+    }), /*#__PURE__*/React.createElement(TableColumn, {
+      title: "IP",
+      key: "ip"
     })));
   };
   return Demo;

package/es/site/data/components/table/demos/virtual/index.d.ts

@@ -0,0 +1,13 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import './index.styl';
+interface Props {
+    data: any[];
+    variableHeightData: any[];
+}
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+    init(): void;
+    scrollToRowByKey(): void;
+}

package/es/site/data/components/table/demos/virtual/index.js

@@ -0,0 +1,76 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import { bind } from 'kpc/components/utils';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      data: [],
+      variableHeightData: []
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.init = function init() {
+    var arr = [];
+    for (var index = 0; index < 10000; index++) {
+      arr.push({
+        a: "Cell " + index + "-1",
+        b: "Cell " + index + "-2"
+      });
+    }
+    this.set({
+      data: arr
+    });
+    var generateTreeData = function generateTreeData(count) {
+      var result = [];
+      var _loop = function _loop(i) {
+        var hasChildren = Math.random() > 0.5;
+        var node = {
+          name: "Node-" + i,
+          key: "node-" + i,
+          size: Math.floor(Math.random() * 100)
+        };
+        if (hasChildren) {
+          node.children = _Array$from({
+            length: 2
+          }, function (_, j) {
+            return {
+              name: "Node-" + i + "-" + j,
+              key: "node-" + i + "-" + j,
+              size: Math.floor(Math.random() * 100),
+              children: Math.random() > 0.5 ? [{
+                name: "Node-" + i + "-" + j + "-0",
+                key: "node-" + i + "-" + j + "-0",
+                size: Math.floor(Math.random() * 100)
+              }] : undefined
+            };
+          });
+        }
+        result.push(node);
+      };
+      for (var i = 0; i < count; i++) {
+        _loop(i);
+      }
+      return result;
+    };
+    var data = generateTreeData(10000);
+    this.set({
+      variableHeightData: data
+    });
+  };
+  _proto.scrollToRowByKey = function scrollToRowByKey() {
+    this.refs.table.scrollToRowByKey('Node-400');
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "scrollToRowByKey", null);

package/es/site/data/components/table/demos/virtual/react.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.styl';
+interface Props {
+    data: any[];
+    variableHeightData: any[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    private table;
+    componentDidMount(): void;
+    scrollToRowByKey(): void;
+    render(): React.JSX.Element;
+}
+export {};