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

package/components/virtualList/phantom.vdt

@@ -0,0 +1,28 @@
+import { getRestProps } from '../utils';
+import { context as VirtualRowsContext } from './useVirtualRows';
+import { cx } from '@emotion/css';
+import { createVNode } from 'intact';
+import { makePhantomStyles } from './styles';
+
+const { className, tagName } = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-virtual-phantom`]: true,
+    [makePhantomStyles()]: true,
+    [className]: className,
+}
+
+<VirtualRowsContext.Consumer>
+    {({ getTotalHeight, disabled }) => {
+        if (disabled) return;
+        
+        return createVNode(tagName || 'div', {
+            ...getRestProps(this),
+            className: cx(classNameObj),
+            style: {
+                height: getTotalHeight() + 'px', 
+            },
+        });
+    }}
+</VirtualRowsContext.Consumer>

package/components/virtualList/rows.ts

@@ -0,0 +1,13 @@
+import { Component } from 'intact';
+import { useRows } from './useRows';
+import template from './rows.vdt';
+
+export interface VirtualListRowsProps {
+    tagName?: string
+}
+
+export class VirtualListRows extends Component<VirtualListRowsProps> {
+    static template = template;
+
+    private rows = useRows();
+}

package/components/virtualList/rows.vdt

@@ -0,0 +1,20 @@
+import { createFragment, createVNode } from 'intact';
+import { isNullOrUndefined } from 'intact-shared';
+import { context as VirtualRowsContext } from './useVirtualRows';
+
+let { tagName, children } = this.get();
+const rows = this.rows;
+
+<VirtualRowsContext.Consumer>
+    {({ notifyRows, startIndex, length, disabled }) => {
+        if (!disabled) {
+            children = rows.value.slice(startIndex, startIndex + length); 
+            notifyRows(rows.value);
+        }
+
+        if (isNullOrUndefined(tagName)) {
+            return createFragment(children, 8 /* ChildrenTypes.HasKeyedChildren */);
+        }
+        return createVNode(tagName, null, children);
+    }}
+</VirtualRowsContext.Consumer>

package/components/virtualList/styles.ts

@@ -0,0 +1,29 @@
+import {css} from '@emotion/css';
+import '../../styles/global';
+import { cache } from '../utils';
+
+export const makeContainerStyles = cache(() => {
+    return css`
+        overflow: auto;
+        position: relative;
+        height: 100%;
+    `;
+});
+
+export const makePhantomStyles = cache(() => {
+    return css`
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: -1;
+        pointer-events: none;
+    `;
+});
+
+export const makeWrapperStyles = cache(() => {
+    return css`
+        width: 100%;
+        will-change: transform;
+    `;
+});

package/components/virtualList/useRows.ts

@@ -0,0 +1,24 @@
+import { useInstance, VNode, createRef, createFragment } from 'intact';
+import { VirtualListRows } from './rows';
+
+export function useRows() {
+    const instance = useInstance() as VirtualListRows;
+    const rows = createRef<VNode[]>([]);
+
+    instance.on('$receive:children', (children) => {
+        // use fragment vnode to normalize children
+        const vNode = createFragment(children, 0 /* ChildrenTypes.UnknownChildren */);
+
+        // convert to array if it has only one child
+        const childrenType = vNode.childrenType;
+        if (childrenType & 2 /* ChildrenTypes.HasVNodeChildren */) {
+            rows.value = [vNode.children as unknown as VNode];
+        } else if (childrenType & 1 /* ChildrenTypes.HasInvalidChildren */) {
+            rows.value = [];
+        } else {
+            rows.value = vNode.children as VNode[];
+        }
+    });
+
+    return rows;
+}

package/components/virtualList/useVirtualRows.ts

@@ -0,0 +1,145 @@
+import { createContext } from '../context';
+import { useState, watchState, State } from '../../hooks/useState';
+import { useInstance, nextTick, VNode, onMounted, onUnmounted, Key, findDomFromVNode } from 'intact';
+import { VirtualListContainer } from './container';
+import { isNullOrUndefined } from 'intact-shared';
+
+type ContextValue = {
+    notifyRows: (rows: State<VNode[]>) => void;
+    startIndex: number;
+    endIndex: number;
+}
+
+export const context = createContext<ContextValue>();
+
+const MIN_LENGTH = 10;
+const BUFFER_SIZE = 3;
+
+export function useVirtualRows() {
+    const instance = useInstance() as unknown as VirtualListContainer;
+    const rowsHeightMap = new Map<Key, number>();
+    const startIndex = useState(0);
+    const length = useState(MIN_LENGTH);
+
+    let calculatedHeight = 0;
+    let rowAvgHeight = 0;
+    let rows: VNode[] = [];
+    function notifyRows(_rows: VNode[]) { 
+        const oldRows = rows;
+        const oldLength = rows.length;
+        rows = _rows;
+        // diff oldRows, newRows
+        const newKeys = new Set(_rows.map(row => row.key));
+
+        for (let i = 0; i < oldLength; i++) {
+            const oldKey = oldRows[i].key!;
+            if (!newKeys.has(oldKey)) {
+                const 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) {
+            const maxStartIndex = Math.max(0, _rows.length - length.value);
+            if (startIndex.value > maxStartIndex) {
+                startIndex.set(maxStartIndex);
+                // 重新计算位置
+                nextTick(() => {
+                    handleScroll();
+                });
+            }
+        }
+    }
+
+    function calculateRowsHeight() {
+        for (
+            let i = startIndex.value;
+            i < startIndex.value + length.value && i < rows.length;
+            i++
+        ) {
+            const row = rows[i];
+            const key = row.key!;
+            if (!rowsHeightMap.has(key)) {
+                const rowDom = findDomFromVNode(row, true) as HTMLElement;
+                const height = rowDom.offsetHeight;
+                rowsHeightMap.set(key, height); 
+                calculatedHeight += height;
+            }
+        }
+
+        // use the average height to estimate the row height
+        rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+    }
+
+    watchState(startIndex, () => {
+        nextTick(calculateRowsHeight);
+    });
+
+    let containerDom: HTMLElement;
+    onMounted(() => {
+        // get contains height
+        containerDom = findDomFromVNode(instance.$lastInput!, true) as HTMLElement;
+        const 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(() => {
+        containerDom.removeEventListener('scroll', handleScroll); 
+    });
+
+    function getTotalHeight() {
+        return calculatedHeight + rowAvgHeight * (rows.length - rowsHeightMap.size);
+    }
+
+    const translateY = useState(0);
+    function handleScroll() {
+        const { disabled } = instance.get();
+        if (disabled) return;
+        
+        const scrollTop = containerDom.scrollTop;
+
+        let accumulatedHeight = 0;
+        let 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 (let i = start; i >= startIndex.value; i--) {
+            accumulatedHeight -= getRowHeightByIndex(i); 
+        }
+
+        translateY.set(accumulatedHeight);
+    }
+
+    function getRowHeightByIndex(index: number) {
+        const key = rows[index].key!;
+        return rowsHeightMap.get(key) || rowAvgHeight;
+    }
+
+    return { notifyRows, startIndex, length, getTotalHeight, translateY };
+}

package/components/virtualList/virtual.ts

@@ -0,0 +1,19 @@
+import { Component, TypeDefs, createRef } from 'intact';
+import template from './virtual.vdt';
+
+export interface VirtualListProps {
+    disabled?: boolean
+}
+
+const typeDefs: Required<TypeDefs<VirtualListProps>> = {
+    disabled: Boolean,
+};
+
+export class VirtualList extends Component<VirtualListProps>  {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    // public scrollToIndex(index: number, behavior: ScrollBehavior = 'auto') {
+        // this.containerRef.value?.scrollToIndex(index, behavior);
+    // }
+}

package/components/virtualList/virtual.vdt

@@ -0,0 +1,17 @@
+import { getRestProps } from '../utils';
+import { VirtualListContainer } from './container';
+import { VirtualListWrapper } from './wrapper';
+import { VirtualListRows } from './rows';
+import { VirtualListPhantom } from './phantom';
+
+const { children, disabled } = this.get();
+
+if (disabled) {
+    return children;
+}
+<VirtualListContainer {...getRestProps(this)}>
+    <VirtualListPhantom />
+    <VirtualListWrapper>
+        <VirtualListRows>{children}</VirtualListRows>
+    </VirtualListWrapper>
+</VirtualListContainer>

package/components/virtualList/wrapper.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs, ComponentConstructor } from 'intact';
+import template from './wrapper.vdt';
+import { useConfigContext } from '../config';
+export interface VirtualListWrapperProps {
+    tagName?: string | ComponentConstructor,
+}
+
+const typeDefs: Required<TypeDefs<VirtualListWrapperProps>> = {
+    tagName: String,
+};
+
+export class VirtualListWrapper extends Component<VirtualListWrapperProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private config = useConfigContext();
+}

package/components/virtualList/wrapper.vdt

@@ -0,0 +1,24 @@
+import { addStyle, getRestProps } from '../utils';
+import { context as VirtualRowsContext } from './useVirtualRows';
+import { createVNode } from 'intact';
+import { cx } from '@emotion/css';
+
+const { children, className, tagName, style } = this.get();
+const { k } = this.config;
+
+<VirtualRowsContext.Consumer>
+    {({ translateY, disabled }) => {
+        const classNameObj = {
+            [`${k}-virtual-wrapper`]: !disabled,
+            [className]: className,
+        }
+
+        const _style = !disabled ? { transform: `translateY(${translateY}px)` } : {};
+        
+        return createVNode(tagName || 'div', {
+            ...getRestProps(this),
+            className: cx(classNameObj),
+            style: addStyle(style, _style)
+        }, children);
+    }}
+</VirtualRowsContext.Consumer>

package/es/components/affix/index.d.ts

@@ -4,6 +4,7 @@ export interface AffixProps {
     bottom?: number;
     exclude?: (data: ExcludeParam) => boolean;
     shouldFix?: (data: ShouldFixParam) => boolean;
+    disabled?: boolean;
 }
 export interface AffixEvents {
     change: [boolean];

package/es/components/affix/index.js

@@ -8,7 +8,8 @@ var typeDefs = {
   top: Number,
   bottom: Number,
   exclude: Function,
-  shouldFix: Function
+  shouldFix: Function,
+  disabled: Boolean
 };
 export var Affix = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Affix, _Component);

package/es/components/affix/useStyle.js

@@ -14,54 +14,57 @@ export function useStyle(elementRef) {
       offsetTop = _instance$get.top,
       offsetBottom = _instance$get.bottom,
       exclude = _instance$get.exclude,
-      shouldFix = _instance$get.shouldFix;
-    var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
-      top = _elementRef$value$get.top,
-      bottom = _elementRef$value$get.bottom,
-      width = _elementRef$value$get.width,
-      height = _elementRef$value$get.height;
-    var setStyle = function setStyle(styles) {
-      if (!exclude || exclude && !exclude({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom,
-        top: top,
-        bottom: bottom,
-        width: width,
-        height: height
-      })) {
-        style.set(_extends({
-          position: 'fixed',
-          width: width + "px"
-        }, styles));
-        containerStyle.set({
-          height: height + "px"
-        });
-      } else {
-        resetStyle();
-      }
-    };
-    if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
-      offsetTop = 0;
-    }
-    if (!isNullOrUndefined(offsetTop)) {
-      if (shouldFix && shouldFix({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom
-      }) || !shouldFix && top < offsetTop) {
-        return setStyle({
-          top: offsetTop + "px"
-        });
+      shouldFix = _instance$get.shouldFix,
+      disabled = _instance$get.disabled;
+    if (!disabled) {
+      var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
+        top = _elementRef$value$get.top,
+        bottom = _elementRef$value$get.bottom,
+        width = _elementRef$value$get.width,
+        height = _elementRef$value$get.height;
+      var setStyle = function setStyle(styles) {
+        if (!exclude || exclude && !exclude({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom,
+          top: top,
+          bottom: bottom,
+          width: width,
+          height: height
+        })) {
+          style.set(_extends({
+            position: 'fixed',
+            width: width + "px"
+          }, styles));
+          containerStyle.set({
+            height: height + "px"
+          });
+        } else {
+          resetStyle();
+        }
+      };
+      if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
+        offsetTop = 0;
       }
-    } else {
-      var viewportHeight = document.documentElement.clientHeight;
-      if (shouldFix && shouldFix({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom,
-        viewportHeight: viewportHeight
-      }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
-        return setStyle({
-          bottom: offsetBottom + "px"
-        });
+      if (!isNullOrUndefined(offsetTop)) {
+        if (shouldFix && shouldFix({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom
+        }) || !shouldFix && top < offsetTop) {
+          return setStyle({
+            top: offsetTop + "px"
+          });
+        }
+      } else {
+        var viewportHeight = document.documentElement.clientHeight;
+        if (shouldFix && shouldFix({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom,
+          viewportHeight: viewportHeight
+        }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
+          return setStyle({
+            bottom: offsetBottom + "px"
+          });
+        }
       }
     }
     resetStyle();

package/es/components/datepicker/basepicker.js

@@ -15,13 +15,13 @@ import { findValueIndex } from './helpers';
 import { isEqualArray, last, bind } from '../utils';
 import { BaseSelect } from '../select/base';
 var typeDefs = _extends({}, BaseSelect.typeDefs, {
-  value: [String, Array, Date, Number, dayjs.Dayjs],
+  value: [String, Array, Date, Number, dayjs],
   range: Boolean,
   format: String,
   valueFormat: String,
   showFormat: String,
-  min: [String, Date, Number, dayjs.Dayjs],
-  max: [String, Date, Number, dayjs.Dayjs],
+  min: [String, Date, Number, dayjs],
+  max: [String, Date, Number, dayjs],
   disabledDate: Function
 });
 var defaults = function defaults() {

package/es/components/dialog/styles.js

@@ -58,8 +58,8 @@ var defaults = {
     padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
-    tipIconFontSize: '24px',
-    tipIconLineHeight: '24px',
+    tipIconFontSize: '40px',
+    tipIconLineHeight: '40px',
     // with title
     titleFontWeight: '500',
     titleTipIconFontSize: '24px',

package/es/components/dropdown/useKeyboard.js

@@ -91,6 +91,7 @@ export function useMenuKeyboard() {
   function reset() {
     var item = items[focusIndex];
     if (focusIndex > -1 && item) {
+      // TODO(find bug)
       itemEvents.get(item).onFocusout();
       focusIndex = -1;
     }
@@ -141,6 +142,8 @@ export function useItemKeyboard(itemEvents) {
     onMouseLeave: function onMouseLeave(e) {
       instance.trigger('mouseleave', e);
       keyboard.reset();
+      // If it is a virtual item, it needs to be reset manually because the DOM is reused.
+      isFocus.set(false);
     },
     isFocus: isFocus
   };

package/es/components/input/index.spec.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/input/demos/basic';
-import { mount, dispatchEvent, wait, getElement } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait, getElement } from '../../test/utils';
 import SearchDemo from '~/components/input/demos/search';
 import FrozenDemo from '~/components/input/demos/frozen';
 import AutoRowsDemo from '~/components/input/demos/autoRows';
@@ -13,7 +13,9 @@ import { Input } from './';
 import { Dialog } from '../dialog';
 import { Component } from 'intact';
 describe('Input', function () {
-  // afterEach(() => {unmount()});
+  afterEach(function () {
+    unmount();
+  });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, input;
     return _regeneratorRuntime.wrap(function _callee$(_context) {

package/es/components/layout/styles.js

@@ -60,7 +60,7 @@ export var makeAsideStyles = cache(function makeAsideStyles(k) {
     if (theme === 'dark') return;
     var styles = layout.light;
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
-  }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
+  }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;border-right:none!important;}");
 });
 export var makeBodyStyles = cache(function makeBodyStyles(k) {
   return /*#__PURE__*/css("transition:padding-left ", layout.transition, ";");

package/es/components/select/base.d.ts

@@ -24,6 +24,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     flat?: boolean;
     nowrap?: boolean;
     draggable?: boolean;
+    virtual?: boolean;
 }
 export interface BaseSelectEvents {
     keydown: [KeyboardEvent];

package/es/components/select/base.js

@@ -37,7 +37,8 @@ var typeDefs = {
   position: Dropdown.typeDefs.position,
   flat: Boolean,
   nowrap: Boolean,
-  draggable: Boolean
+  draggable: Boolean,
+  virtual: Boolean
 };
 var defaults = function defaults() {
   return {

package/es/components/select/base.vdt.js

@@ -71,8 +71,7 @@ export default function ($props, $blocks, $__proto__) {
     'key': 'filter',
     'readonly': !show,
     'waveDisabled': true,
-    'flat': flat,
-    'frozenOnInput': true
+    'flat': flat
   }, 'filter', inputRef) : undefined;
   return _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
@@ -123,8 +122,7 @@ export default function ($props, $blocks, $__proto__) {
               'key': 'input',
               'readonly': !show,
               'waveDisabled': true,
-              'flat': flat,
-              'frozenOnInput': true
+              'flat': flat
             }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, _$cn(k + "-select-placeholder c-ellipsis"), null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
               return label;
             }, __$blocks['value'] = function ($super, data) {

package/es/components/select/group.vdt.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no } from 'intact';
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact';
 import { makeGroupStyles } from './styles';
 import { getRestProps } from '../utils';
+import { VirtualList } from '../virtualList';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -14,7 +15,8 @@ export default function ($props, $blocks, $__proto__) {
     label = _this$get.label,
     className = _this$get.className;
   var _this$select$get = this.select.get(),
-    card = _this$select$get.card;
+    card = _this$select$get.card,
+    virtual = _this$select$get.virtual;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-group"] = true, _classNameObj[className] = className, _classNameObj[makeGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
@@ -27,6 +29,9 @@ export default function ($props, $blocks, $__proto__) {
       return _$blocks['label'].call($this, $super, data);
     };
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, children]);
+  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, _$cc(VirtualList, {
+    'disabled': !virtual,
+    'children': children
+  })]);
 }
 ;

package/es/components/select/menu.vdt.js

@@ -10,6 +10,7 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { context } from './useSearchable';
 import { Tabs, Tab } from '../tabs';
+import { VirtualList } from '../virtualList';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -21,7 +22,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$select$get = this.select.get(),
     card = _this$select$get.card,
     searchable = _this$select$get.searchable,
-    multiple = _this$select$get.multiple;
+    multiple = _this$select$get.multiple,
+    virtual = _this$select$get.virtual;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-menu"] = true, _classNameObj[k + "-card"] = card, _classNameObj[k + "-searchable"] = searchable, _classNameObj[className] = className, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   if (card) {
@@ -43,9 +45,16 @@ export default function ($props, $blocks, $__proto__) {
         });
       }, $this)
     }), group];
-  }
-  if (isEmptyChildren(children)) {
+  } else if (isEmptyChildren(children)) {
     children = _$ce(2, 'div', _$('无数据'), 0, _$cn(k + "-select-empty"));
+  } else {
+    children = _$cc(VirtualList, {
+      'style': {
+        maxHeight: '200px'
+      },
+      'disabled': !virtual,
+      'children': children
+    });
   }
   if (searchable) {
     var _this$searchable = this.searchable,