@laser-ui/components 0.0.1

package/utils/position/getVerticalSidePosition.js

@@ -0,0 +1,43 @@
+import { ROOT_DATA } from '../../root/vars';
+export function getVerticalSidePosition(targetEl, popupSize, config) {
+    const { width, height } = popupSize;
+    const { placement, placementFixed = false, gap = 8, inWindow = false } = config;
+    const bound = inWindow === false ? 0 : inWindow;
+    const targetRect = targetEl.getBoundingClientRect();
+    const getPosition = (placement, defaultPosition) => {
+        let top = placement === 'top' || placement === 'top-left' || placement === 'top-right'
+            ? targetRect.top - height - gap
+            : targetRect.top + targetRect.height + gap;
+        let left = placement === 'top' || placement === 'bottom'
+            ? targetRect.left + (targetRect.width - width) / 2
+            : placement === 'top-left' || placement === 'bottom-left'
+                ? targetRect.left
+                : targetRect.left + targetRect.width - width;
+        const inBound = [top, ROOT_DATA.windowSize.width - left - width, ROOT_DATA.windowSize.height - top - height, left].every((num) => num >= bound);
+        if (inWindow !== false) {
+            top = Math.min(Math.max(top, inWindow), ROOT_DATA.windowSize.height - height - inWindow);
+        }
+        if (inWindow !== false) {
+            left = Math.min(Math.max(left, inWindow), window.screen.availWidth - width - inWindow);
+        }
+        const transformOrigin = placement === 'top' || placement === 'top-left' || placement === 'top-right' ? 'center bottom' : 'center top';
+        const position = {
+            top,
+            left,
+            transformOrigin,
+            placement,
+        };
+        if (!placementFixed && !inBound) {
+            if (defaultPosition) {
+                return defaultPosition;
+            }
+            else {
+                return getPosition(placement.includes('top')
+                    ? placement.replace('top', 'bottom')
+                    : placement.replace('bottom', 'top'), position);
+            }
+        }
+        return position;
+    };
+    return getPosition(placement);
+}

package/vars.d.ts

@@ -0,0 +1,5 @@
+export declare const TTANSITION_DURING_SLOW = 300;
+export declare const TTANSITION_DURING_BASE = 200;
+export declare const TTANSITION_DURING_FAST = 100;
+export declare const TTANSITION_DURING_POPUP = 116;
+export declare const WINDOW_SPACE = 10;

package/vars.js

@@ -0,0 +1,5 @@
+export const TTANSITION_DURING_SLOW = 300;
+export const TTANSITION_DURING_BASE = 200;
+export const TTANSITION_DURING_FAST = 100;
+export const TTANSITION_DURING_POPUP = 116;
+export const WINDOW_SPACE = 10;

package/virtual-scroll/VirtualScroll.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { VirtualScrollProps, VirtualScrollRef } from './types';
+declare function VirtualScrollFC<T>(props: VirtualScrollProps<T>, ref: React.ForwardedRef<VirtualScrollRef<T>>): JSX.Element | null;
+export declare const VirtualScroll: <T>(props: VirtualScrollProps<T> & React.RefAttributes<VirtualScrollRef<T>>) => ReturnType<typeof VirtualScrollFC>;
+export {};

package/virtual-scroll/VirtualScroll.js

@@ -0,0 +1,430 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEventCallback } from '@laser-ui/hooks';
+import { checkScrollEnd } from '@laser-ui/utils';
+import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
+import { Fragment, createElement, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { EMPTY } from './vars';
+import { useComponentProps } from '../hooks';
+function VirtualScrollFC(props, ref) {
+    const { children, enable = true, list, listSize, listPadding: listPaddingProp, itemKey, itemRender, itemSize: itemSizeProp, itemEmptySize: itemEmptySizeProp = 0, itemNested, itemEmptyRender, itemExpand, itemFocusable: itemFocusableProp = true, itemFocused, itemInAriaSetsize: itemInAriaSetsizeProp = true, placeholder, horizontal = false, onScrollEnd, } = useComponentProps('VirtualScroll', props);
+    const listPadding = isNumber(listPaddingProp) ? [listPaddingProp, listPaddingProp] : listPaddingProp;
+    const dataRef = useRef({
+        listCache: new Map(),
+    });
+    const [_scrollPosition, setScrollPosition] = useState(0);
+    const itemSize = useMemo(() => (isNumber(itemSizeProp) ? () => itemSizeProp : itemSizeProp), [itemSizeProp]);
+    const itemEmptySize = useMemo(() => (isNumber(itemEmptySizeProp) ? () => itemEmptySizeProp : itemEmptySizeProp), [itemEmptySizeProp]);
+    const itemFocusable = useMemo(() => (isBoolean(itemFocusableProp) ? () => itemFocusableProp : itemFocusableProp), [itemFocusableProp]);
+    const itemInAriaSetsize = useMemo(() => (isBoolean(itemInAriaSetsizeProp) ? () => itemInAriaSetsizeProp : itemInAriaSetsizeProp), [itemInAriaSetsizeProp]);
+    const [items, totalSize, firstFocusableItem, lastFocusableItem] = useMemo(() => {
+        const items = new Map();
+        let accSize = 0;
+        let totalSize = 0;
+        let firstFocusableItem;
+        let lastFocusableItem;
+        if (enable) {
+            const reduceArr = (arr, level = 0) => {
+                let size = 0;
+                for (const item of arr) {
+                    if (itemFocusable(item)) {
+                        lastFocusableItem = item;
+                        if (isUndefined(firstFocusableItem)) {
+                            firstFocusableItem = item;
+                        }
+                    }
+                    const key = itemKey(item);
+                    const _size = itemSize(item);
+                    size += _size;
+                    accSize += _size;
+                    const data = { item, level, accSize, nestedSize: 0 };
+                    items.set(key, data);
+                    const nestedData = itemNested === null || itemNested === void 0 ? void 0 : itemNested(item);
+                    if (nestedData) {
+                        const expand = itemExpand ? itemExpand(item) : true;
+                        if (expand) {
+                            if (nestedData.length === 0) {
+                                data.nestedSize = itemEmptySize(item);
+                                size += data.nestedSize;
+                                accSize += data.nestedSize;
+                            }
+                            else {
+                                data.nestedSize = reduceArr(nestedData, level + 1);
+                                size += data.nestedSize;
+                            }
+                        }
+                    }
+                }
+                return size;
+            };
+            totalSize = reduceArr(list);
+        }
+        else {
+            const reduceArr = (arr, level = 0) => {
+                for (const item of arr) {
+                    if (itemFocusable(item)) {
+                        lastFocusableItem = item;
+                        if (isUndefined(firstFocusableItem)) {
+                            firstFocusableItem = item;
+                        }
+                    }
+                    const key = itemKey(item);
+                    const data = { item, level, accSize, nestedSize: 0 };
+                    items.set(key, data);
+                    const nestedData = itemNested === null || itemNested === void 0 ? void 0 : itemNested(item);
+                    if (nestedData) {
+                        const expand = itemExpand ? itemExpand(item) : true;
+                        if (expand) {
+                            if (nestedData.length > 0) {
+                                reduceArr(nestedData, level + 1);
+                            }
+                        }
+                    }
+                }
+            };
+            reduceArr(list);
+        }
+        return [items, totalSize, firstFocusableItem, lastFocusableItem];
+    }, [enable, itemEmptySize, itemExpand, itemFocusable, itemKey, itemNested, itemSize, list]);
+    const vsList = (() => {
+        if (enable) {
+            const maxScrollSize = Math.max(totalSize + listPadding[0] + listPadding[1] - listSize, 0);
+            const scrollPosition = Math.min(_scrollPosition, maxScrollSize);
+            let totalAccSize = 0;
+            const startSize = scrollPosition - listSize - listPadding[0];
+            const endSize = scrollPosition + listSize * 2 - listPadding[0];
+            let hasStart = false;
+            let hasEnd = false;
+            const getList = (arr, ancestry = []) => {
+                var _a;
+                const fillSize = [0, 0];
+                const list = [];
+                const ariaSetsize = arr.filter((item) => {
+                    if (item === EMPTY) {
+                        return false;
+                    }
+                    return itemInAriaSetsize(item);
+                }).length;
+                for (const [index, item] of arr.entries()) {
+                    let size = 0;
+                    let listNestedSize = 0;
+                    let key;
+                    let nestedData;
+                    let emptyNode;
+                    if (item === EMPTY) {
+                        const parentNestedData = itemNested === null || itemNested === void 0 ? void 0 : itemNested(ancestry[ancestry.length - 1]);
+                        if (parentNestedData) {
+                            size = itemEmptySize(ancestry[ancestry.length - 1]);
+                            emptyNode = _jsx(Fragment, { children: itemEmptyRender === null || itemEmptyRender === void 0 ? void 0 : itemEmptyRender(ancestry[ancestry.length - 1]) }, "$$empty");
+                        }
+                    }
+                    else {
+                        key = itemKey(item);
+                        size = itemSize(item);
+                        nestedData = itemNested === null || itemNested === void 0 ? void 0 : itemNested(item);
+                        if (nestedData) {
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            listNestedSize = items.get(key).nestedSize;
+                        }
+                    }
+                    if (hasEnd) {
+                        fillSize[1] += size + listNestedSize;
+                        continue;
+                    }
+                    totalAccSize += size;
+                    if (nestedData) {
+                        if (totalAccSize + listNestedSize > startSize) {
+                            const expand = itemExpand ? itemExpand(item) : undefined;
+                            let childrenList = [];
+                            if (isUndefined(expand)) {
+                                childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
+                            }
+                            else {
+                                childrenList = (_a = dataRef.current.listCache.get(key)) !== null && _a !== void 0 ? _a : [];
+                                if (expand) {
+                                    childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
+                                    dataRef.current.listCache.set(key, childrenList);
+                                }
+                            }
+                            list.push(itemRender(item, index, {
+                                'aria-level': ancestry.length + 1,
+                                'aria-setsize': ariaSetsize,
+                                'aria-posinset': index + 1,
+                            }, ancestry, childrenList));
+                        }
+                        else {
+                            totalAccSize += listNestedSize;
+                            fillSize[0] += size + listNestedSize;
+                        }
+                    }
+                    else if (!hasStart) {
+                        if (totalAccSize > startSize) {
+                            list.push(item === EMPTY
+                                ? emptyNode
+                                : itemRender(item, index, {
+                                    'aria-level': ancestry.length + 1,
+                                    'aria-setsize': ariaSetsize,
+                                    'aria-posinset': index + 1,
+                                }, ancestry));
+                            hasStart = true;
+                        }
+                        else {
+                            fillSize[0] += size;
+                        }
+                    }
+                    else if (!hasEnd) {
+                        if (totalAccSize > endSize) {
+                            hasEnd = true;
+                            fillSize[1] += size;
+                        }
+                        else {
+                            list.push(item === EMPTY
+                                ? emptyNode
+                                : itemRender(item, index, {
+                                    'aria-level': ancestry.length + 1,
+                                    'aria-setsize': ariaSetsize,
+                                    'aria-posinset': index + 1,
+                                }, ancestry));
+                        }
+                    }
+                }
+                if (fillSize[0] > 0) {
+                    list.unshift(createElement(placeholder, {
+                        key: '$$fill-size-0',
+                        style: {
+                            display: horizontal ? 'inline-block' : 'block',
+                            overflow: 'hidden',
+                            width: horizontal ? fillSize[0] : 0,
+                            height: horizontal ? 0 : fillSize[0],
+                            flexShrink: 0,
+                        },
+                        'aria-hidden': true,
+                    }));
+                }
+                if (fillSize[1] > 0) {
+                    list.push(createElement(placeholder, {
+                        key: '$$fill-size-1',
+                        style: {
+                            display: horizontal ? 'inline-block' : 'block',
+                            overflow: 'hidden',
+                            width: horizontal ? fillSize[1] : 0,
+                            height: horizontal ? 0 : fillSize[1],
+                            flexShrink: 0,
+                        },
+                        'aria-hidden': true,
+                    }));
+                }
+                return list;
+            };
+            return getList(list);
+        }
+        else {
+            const getList = (arr, ancestry = []) => {
+                var _a;
+                const list = [];
+                const ariaSetsize = arr.filter((item) => {
+                    if (item === EMPTY) {
+                        return false;
+                    }
+                    return itemInAriaSetsize(item);
+                }).length;
+                for (const [index, item] of arr.entries()) {
+                    let key;
+                    let nestedData;
+                    let emptyNode;
+                    if (item === EMPTY) {
+                        const parentNestedData = itemNested === null || itemNested === void 0 ? void 0 : itemNested(ancestry[ancestry.length - 1]);
+                        if (parentNestedData) {
+                            emptyNode = _jsx(Fragment, { children: itemEmptyRender === null || itemEmptyRender === void 0 ? void 0 : itemEmptyRender(ancestry[ancestry.length - 1]) }, "$$empty");
+                        }
+                    }
+                    else {
+                        key = itemKey(item);
+                        nestedData = itemNested === null || itemNested === void 0 ? void 0 : itemNested(item);
+                    }
+                    if (nestedData) {
+                        const expand = itemExpand ? itemExpand(item) : undefined;
+                        let childrenList = [];
+                        if (isUndefined(expand)) {
+                            childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
+                        }
+                        else {
+                            childrenList = (_a = dataRef.current.listCache.get(key)) !== null && _a !== void 0 ? _a : [];
+                            if (expand) {
+                                childrenList = getList(nestedData.length === 0 ? [EMPTY] : nestedData, ancestry.concat([item]));
+                                dataRef.current.listCache.set(key, childrenList);
+                            }
+                        }
+                        list.push(itemRender(item, index, {
+                            'aria-level': ancestry.length + 1,
+                            'aria-setsize': ariaSetsize,
+                            'aria-posinset': index + 1,
+                        }, ancestry, childrenList));
+                    }
+                    else {
+                        list.push(item === EMPTY
+                            ? emptyNode
+                            : itemRender(item, index, {
+                                'aria-level': ancestry.length + 1,
+                                'aria-setsize': ariaSetsize,
+                                'aria-posinset': index + 1,
+                            }, ancestry));
+                    }
+                }
+                return list;
+            };
+            return getList(list);
+        }
+    })();
+    const scrollTo = (el, num) => {
+        el[horizontal ? 'scrollLeft' : 'scrollTop'] = num;
+    };
+    const scrollToItem = useEventCallback((el, key) => {
+        const findItem = items.get(key);
+        if (enable && !isUndefined(findItem)) {
+            scrollTo(el, findItem.accSize - itemSize(findItem.item) + listPadding[0]);
+        }
+        return findItem === null || findItem === void 0 ? void 0 : findItem.item;
+    });
+    const scrollToStart = useEventCallback((el) => {
+        if (enable) {
+            scrollTo(el, 0);
+        }
+        return firstFocusableItem;
+    });
+    const scrollToEnd = useEventCallback((el) => {
+        if (enable) {
+            scrollTo(el, el[horizontal ? 'scrollWidth' : 'scrollHeight']);
+        }
+        return lastFocusableItem;
+    });
+    const scrollToStep = useEventCallback((el, step) => {
+        if (isUndefined(itemFocused)) {
+            return;
+        }
+        let findItem;
+        let offsetSize;
+        let index = -1;
+        let findIndex = -1;
+        const accSizeList = [];
+        for (const iterator of items) {
+            index += 1;
+            if (iterator[0] === itemFocused) {
+                findIndex = index;
+            }
+            accSizeList.push(iterator[1]);
+        }
+        if (findIndex !== -1) {
+            if (step === 1) {
+                for (let index = findIndex + 1, n = 0; n < accSizeList.length; index++, n++) {
+                    const accSizeItem = nth(accSizeList, index % accSizeList.length);
+                    if (accSizeItem && itemFocusable(accSizeItem.item)) {
+                        findItem = accSizeItem.item;
+                        if (enable) {
+                            offsetSize = [accSizeItem.accSize - itemSize(findItem) + listPadding[0], accSizeItem.accSize + listPadding[0]];
+                        }
+                        break;
+                    }
+                }
+            }
+            else {
+                for (let index = findIndex - 1, n = 0; n < accSizeList.length; index--, n++) {
+                    const accSizeItem = nth(accSizeList, index);
+                    if (accSizeItem && itemFocusable(accSizeItem.item)) {
+                        findItem = accSizeItem.item;
+                        if (enable) {
+                            offsetSize = [accSizeItem.accSize - itemSize(findItem) + listPadding[0], accSizeItem.accSize + listPadding[0]];
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        if (!isUndefined(offsetSize)) {
+            const listElScrollPosition = el[horizontal ? 'scrollLeft' : 'scrollTop'];
+            const listElClientSize = el[horizontal ? 'clientWidth' : 'clientHeight'];
+            if (listElScrollPosition > offsetSize[1]) {
+                scrollTo(el, offsetSize[0] - listPadding[0]);
+            }
+            else if (offsetSize[0] > listElScrollPosition + listElClientSize) {
+                scrollTo(el, offsetSize[1] - listElClientSize + listPadding[0]);
+            }
+            else {
+                if (step === 1) {
+                    if (offsetSize[1] > listElScrollPosition + listElClientSize) {
+                        scrollTo(el, offsetSize[1] - listElClientSize + listPadding[0]);
+                    }
+                }
+                else {
+                    if (listElScrollPosition > offsetSize[0]) {
+                        scrollTo(el, offsetSize[0] - listPadding[0]);
+                    }
+                }
+            }
+        }
+        return findItem;
+    });
+    const scrollToNested = useEventCallback((el) => {
+        if (isUndefined(itemFocused)) {
+            return;
+        }
+        let findItem;
+        let offsetSize;
+        let index = -1;
+        let findIndex = -1;
+        let level = 0;
+        const accSizeList = [];
+        for (const iterator of items) {
+            index += 1;
+            if (iterator[0] === itemFocused) {
+                findIndex = index;
+                level = iterator[1].level;
+            }
+            accSizeList.push(iterator[1]);
+        }
+        if (findIndex !== -1) {
+            for (let index = findIndex + 1; index < accSizeList.length; index++) {
+                const accSizeItem = accSizeList[index];
+                if (accSizeItem.level <= level) {
+                    return;
+                }
+                if (itemFocusable(accSizeItem.item)) {
+                    findItem = accSizeItem.item;
+                    if (enable) {
+                        offsetSize = [accSizeItem.accSize - itemSize(findItem) + listPadding[0], accSizeItem.accSize + listPadding[0]];
+                    }
+                    break;
+                }
+            }
+        }
+        if (!isUndefined(offsetSize)) {
+            const listElScrollPosition = el[horizontal ? 'scrollLeft' : 'scrollTop'];
+            const listElClientSize = el[horizontal ? 'clientWidth' : 'clientHeight'];
+            if (listElScrollPosition > offsetSize[1]) {
+                scrollTo(el, offsetSize[0] - listPadding[0]);
+            }
+            else if (offsetSize[0] > listElScrollPosition + listElClientSize) {
+                scrollTo(el, offsetSize[1] - listElClientSize + listPadding[0]);
+            }
+            else {
+                if (offsetSize[1] > listElScrollPosition + listElClientSize) {
+                    scrollTo(el, offsetSize[1] - listElClientSize + listPadding[0]);
+                }
+            }
+        }
+        return findItem;
+    });
+    useImperativeHandle(ref, () => ({
+        scrollToItem,
+        scrollToStep,
+        scrollToNested,
+        scrollToStart,
+        scrollToEnd,
+    }), [scrollToItem, scrollToStep, scrollToNested, scrollToStart, scrollToEnd]);
+    return children(vsList, (e) => {
+        setScrollPosition(e.currentTarget[horizontal ? 'scrollLeft' : 'scrollTop']);
+        if (checkScrollEnd(e.currentTarget)[horizontal ? 'x' : 'y']) {
+            onScrollEnd === null || onScrollEnd === void 0 ? void 0 : onScrollEnd();
+        }
+    });
+}
+export const VirtualScroll = forwardRef(VirtualScrollFC);

package/virtual-scroll/index.d.ts

@@ -0,0 +1,2 @@
+export type { VirtualScrollRef, VirtualScrollProps } from './types';
+export { VirtualScroll } from './VirtualScroll';

package/virtual-scroll/index.js

@@ -0,0 +1 @@
+export { VirtualScroll } from './VirtualScroll';

package/virtual-scroll/types.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export {};
+export type VirtualScrollOptimization<T = any> = Pick<VirtualScrollProps<T>, 'list' | 'itemKey' | 'itemSize' | 'itemEmptySize' | 'itemNested' | 'itemFocusable' | 'itemExpand'>;
+export interface VirtualScrollRef<T> {
+    scrollToItem: (el: HTMLElement, key: React.Key) => T | undefined;
+    scrollToStep: (el: HTMLElement, step: 1 | -1) => T | undefined;
+    scrollToNested: (el: HTMLElement) => T | undefined;
+    scrollToStart: (el: HTMLElement) => T | undefined;
+    scrollToEnd: (el: HTMLElement) => T | undefined;
+}
+export interface VirtualScrollProps<T> {
+    children: (vsList: React.ReactNode, onScroll: React.UIEventHandler<HTMLElement>) => JSX.Element | null;
+    enable?: boolean;
+    list: T[];
+    listSize: number;
+    listPadding: number | [number, number];
+    itemKey: (item: T) => React.Key;
+    itemRender: (item: T, index: number, props: {
+        'aria-level': number;
+        'aria-setsize': number;
+        'aria-posinset': number;
+    }, ancestry: T[], children?: React.ReactNode) => React.ReactNode;
+    itemSize: number | ((item: T) => number);
+    itemEmptySize?: number | ((item: T) => number);
+    itemNested?: (item: T) => T[] | undefined;
+    itemEmptyRender?: (item: T) => React.ReactNode;
+    itemExpand?: (item: T) => boolean | undefined;
+    itemFocusable?: boolean | ((item: T) => boolean);
+    itemFocused?: React.Key;
+    itemInAriaSetsize?: boolean | ((item: T) => boolean);
+    placeholder: string;
+    horizontal?: boolean;
+    onScrollEnd?: () => void;
+}

package/virtual-scroll/types.js

@@ -0,0 +1 @@
+export {};

package/virtual-scroll/vars.d.ts

@@ -0,0 +1 @@
+export declare const EMPTY: unique symbol;

package/virtual-scroll/vars.js

@@ -0,0 +1 @@
+export const EMPTY = Symbol();