@zykj2024/much-library 1.1.6 → 1.1.7-beta.2

package/dist/McLazyLoader/demo/table.js

@@ -1,73 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/**
- * title: 在Antd Table翻页场景中使用
- * description: 翻页后的数据会重新进入懒加载流程
- */
-import { Table } from 'antd';
-import { McLazyLoader } from "../..";
-import { useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var getTextList = function getTextList(cur) {
-  return Array.from({
-    length: 40
-  }, function (_, index) {
-    return {
-      key: index + cur,
-      value: index
-    };
-  });
-};
-export default (function () {
-  var _useState = useState(1),
-    _useState2 = _slicedToArray(_useState, 2),
-    cur = _useState2[0],
-    setCur = _useState2[1];
-  console.log(cur);
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx(Table, {
-      dataSource: getTextList(cur),
-      scroll: {
-        y: 200
-      },
-      pagination: {
-        pageSize: 40,
-        current: cur,
-        total: 120
-      },
-      onChange: function onChange(info) {
-        var _info$current;
-        setCur((_info$current = info === null || info === void 0 ? void 0 : info.current) !== null && _info$current !== void 0 ? _info$current : 1);
-      },
-      components: {
-        body: function body(data) {
-          return /*#__PURE__*/_jsx(McLazyLoader, {
-            style: {
-              height: 200,
-              width: 430,
-              overflow: 'auto',
-              display: 'flex',
-              flexWrap: 'wrap'
-            },
-            onItemVisible: function onItemVisible(index) {
-              console.log('visible', index);
-            },
-            itemMinHeight: 50
-            // 不加这个的话，水平排列的元素不占空间，没有懒加载
-            ,
-            itemMinWidth: 200,
-            children: data.map(function (x) {
-              return /*#__PURE__*/_jsx("img", {
-                width: "auto",
-                height: 50,
-                onLoad: function onLoad() {
-                  console.log('[window root: loaded]', new Date(), x.key, cur);
-                },
-                src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png"
-              }, x.key + '_' + cur);
-            })
-          });
-        }
-      }
-    })
-  });
-});

package/dist/McLazyLoader/index.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-interface ObserverInsertionWrapperProps {
-    children: React.ReactNode[];
-    /**
-     * @description 最小高度，不能为0。为0时懒加载可能会无效
-     * @default 20
-     */
-    itemMinHeight: number;
-    /**
-     * @description 最小宽度，水平排列时不能为0
-     * @default unset
-     */
-    itemMinWidth?: number;
-    /**
-     * @description 元素进入视图回调
-     */
-    onItemVisible?: (index: number, key: string) => void;
-    /**
-     * @description 距离视图多少像素时触发。出于用户体验考虑，建议设置一个正数
-     * @default 0
-     */
-    offset?: number;
-    /**
-     * @description 重叠比例为多少时触发
-     * @default 0
-     */
-    threshold?: number;
-    /**
-     * @description 监听的根元素，不传则监听浏览器窗口
-     * @default null
-     */
-    root?: Element | Document | null;
-    /**
-     * @description 外层容器样式
-     */
-    style?: React.CSSProperties;
-}
-declare const ObserverInsertionWrapper: React.FC<ObserverInsertionWrapperProps>;
-export default ObserverInsertionWrapper;

package/dist/McLazyLoader/index.js

@@ -1,88 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var getKey = function getKey(child, index) {
-  var _child$key;
-  return /*#__PURE__*/React.isValidElement(child) ? String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index) : String(index);
-};
-var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
-  var children = _ref.children,
-    style = _ref.style,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 0 : _ref$offset,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
-    _ref$root = _ref.root,
-    root = _ref$root === void 0 ? null : _ref$root,
-    _ref$itemMinHeight = _ref.itemMinHeight,
-    itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight,
-    itemMinWidth = _ref.itemMinWidth,
-    onItemVisible = _ref.onItemVisible;
-  var wrapperRef = useRef(null);
-
-  // 已经显示过的 key 列表
-  var _useState = useState(new Set()),
-    _useState2 = _slicedToArray(_useState, 2),
-    visibleItems = _useState2[0],
-    setVisibleItems = _useState2[1];
-
-  // 为避免 children 每次渲染变化导致 useEffect 重复执行，构建一个 keyList 哈希
-  var keyListHash = useMemo(function () {
-    var list = React.Children.toArray(children).map(function (child, index) {
-      return getKey(child, index);
-    });
-    return JSON.stringify(list);
-  }, [children]);
-
-  // 每次 keyList 变动重置显示列表
-  useEffect(function () {
-    setVisibleItems(new Set());
-  }, [keyListHash]);
-  useEffect(function () {
-    var _wrapperRef$current;
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        var index = Number(entry.target.getAttribute('data-index'));
-        var key = String(entry.target.getAttribute('data-key'));
-        if (entry.isIntersecting && !visibleItems.has(key)) {
-          setVisibleItems(function (prev) {
-            var next = new Set(prev);
-            next.add(key);
-            onItemVisible === null || onItemVisible === void 0 || onItemVisible(index, key);
-            return next;
-          });
-        }
-      });
-    }, {
-      root: root,
-      rootMargin: "".concat(offset, "px"),
-      threshold: threshold
-    });
-    var elements = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.children;
-    elements && Array.from(elements).forEach(function (element) {
-      observer.observe(element);
-    });
-    return function () {
-      elements && Array.from(elements).forEach(function (element) {
-        observer.unobserve(element);
-      });
-    };
-  }, [offset, threshold, root, keyListHash, visibleItems]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: wrapperRef,
-    style: style,
-    children: React.Children.map(children, function (child, index) {
-      var key = getKey(child, index);
-      return /*#__PURE__*/_jsx("div", {
-        "data-key": key,
-        "data-index": index,
-        style: {
-          minHeight: itemMinHeight,
-          minWidth: itemMinWidth !== null && itemMinWidth !== void 0 ? itemMinWidth : 'unset'
-        },
-        children: visibleItems.has(key) ? child : null
-      }, key);
-    })
-  });
-};
-export default ObserverInsertionWrapper;

package/dist/McModalProvider/index.d.ts

@@ -1,174 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface McModalState {
-    id: string;
-    args?: Record<string, unknown>;
-    visible?: boolean;
-    delayVisible?: boolean;
-    keepMounted?: boolean;
-}
-export interface McModalStore {
-    [key: string]: McModalState;
-}
-export interface McModalAction {
-    type: string;
-    payload: {
-        modalId: string;
-        args?: Record<string, unknown>;
-        flags?: Record<string, unknown>;
-    };
-}
-/**
- * The handler to manage a modal returned by {@link useModal | useModal} hook.
- */
-export interface McModalHandler<Props = Record<string, unknown>> extends McModalState {
-    /**
-     * Whether a modal is visible, it's controlled by {@link McModalHandler.show | show}/{@link McModalHandler.hide | hide} method.
-     */
-    visible: boolean;
-    /**
-     * If you don't want to remove the modal from the tree after hide when using helpers, set it to true.
-     */
-    keepMounted: boolean;
-    /**
-     * Show the modal, it will change {@link McModalHandler.visible | visible} state to true.
-     * @param args - an object passed to modal component as props.
-     */
-    show: (args?: Props) => Promise<unknown>;
-    /**
-     * Hide the modal, it will change {@link McModalHandler.visible | visible} state to false.
-     */
-    hide: () => Promise<unknown>;
-    /**
-     * Resolve the promise returned by {@link McModalHandler.show | show} method.
-     */
-    resolve: (args?: unknown) => void;
-    /**
-     * Reject the promise returned by {@link McModalHandler.show | show} method.
-     */
-    reject: (args?: unknown) => void;
-    /**
-     * Remove the modal component from React component tree. It improves performance compared to just making a modal invisible.
-     */
-    remove: () => void;
-    /**
-     * Resolve the promise returned by {@link McModalHandler.hide | hide} method.
-     */
-    resolveHide: (args?: unknown) => void;
-}
-export interface McModalHocProps {
-    id: string;
-    defaultVisible?: boolean;
-    keepMounted?: boolean;
-}
-export declare const McModalContext: React.Context<McModalStore>;
-declare let dispatch: React.Dispatch<McModalAction>;
-export declare const reducer: (state: McModalStore | undefined, action: McModalAction) => McModalStore;
-declare function getModal(modalId: string): React.FC<any> | undefined;
-export declare const register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>> | undefined) => void;
-type McModalArgs<T> = T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any> ? React.ComponentProps<T> : Record<string, unknown>;
-export declare function show<T extends any, C extends any, P extends Partial<McModalArgs<React.FC<C>>>>(modal: React.FC<C>, args?: P): Promise<T>;
-export declare function show<T extends any>(modal: string, args?: Record<string, unknown>): Promise<T>;
-export declare function show<T extends any, P extends any>(modal: string, args: P): Promise<T>;
-export declare function hide<T>(modal: string | React.FC<any>): Promise<T>;
-export declare const remove: (modal: string | React.FC<any>) => void;
-export declare function useModal(): McModalHandler;
-export declare function useModal(modal: string, args?: Record<string, unknown>): McModalHandler;
-export declare function useModal<C extends any, P extends Partial<McModalArgs<React.FC<C>>>>(modal: React.FC<C>, args?: P): Omit<McModalHandler, 'show'> & {
-    show: (args?: P) => Promise<unknown>;
-};
-export declare const create: <P extends {}>(Comp: React.ComponentType<P>) => React.FC<P & McModalHocProps>;
-/**
- * Unregister a modal.
- * @param id - The id of the modal.
- */
-export declare const unregister: (id: string) => void;
-export declare const Provider: ({ children, dispatch: givenDispatch, modals: givenModals, }: {
-    children: ReactNode;
-    dispatch?: React.Dispatch<McModalAction> | undefined;
-    modals?: McModalStore | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * Declarative way to register a modal.
- * @param id - The id of the modal.
- * @param component - The modal Component.
- * @returns
- */
-export declare const ModalDef: ({ id, component, }: {
-    id: string;
-    component: React.FC<any>;
-}) => null;
-/**
- * A place holder allows to bind props to a modal.
- * It assigns show/hide methods to handler object to show/hide the modal.
- *
- * Comparing to use the <MyMcModal id=../> directly, this approach allows use registered modal id to find the modal component.
- * Also it avoids to create unique id for MyMcModal.
- *
- * @param modal - The modal id registered or a modal component.
- * @param handler - The handler object to control the modal.
- * @returns
- */
-export declare const ModalHolder: ({ modal, handler, ...restProps }: {
-    [key: string]: any;
-    modal: string | React.FC<any>;
-    handler: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const antdModalV4: (modal: McModalHandler) => {
-    visible: boolean;
-    onCancel: () => void;
-    onOk: () => void;
-    afterClose: () => void;
-};
-export declare const antdModal: (modal: McModalHandler) => {
-    open: boolean;
-    onCancel: () => void;
-    onOk: () => void;
-    afterClose: () => void;
-};
-export declare const antdDrawerV4: (modal: McModalHandler) => {
-    visible: boolean;
-    onClose: () => void;
-    afterVisibleChange: (visible: boolean) => void;
-};
-export declare const antdDrawer: (modal: McModalHandler) => {
-    open: boolean;
-    onClose: () => void;
-    afterOpenChange: (visible: boolean) => void;
-};
-declare const McModal: {
-    Provider: ({ children, dispatch: givenDispatch, modals: givenModals, }: {
-        children: ReactNode;
-        dispatch?: React.Dispatch<McModalAction> | undefined;
-        modals?: McModalStore | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
-    ModalDef: ({ id, component, }: {
-        id: string;
-        component: React.FC<any>;
-    }) => null;
-    ModalHolder: ({ modal, handler, ...restProps }: {
-        [key: string]: any;
-        modal: string | React.FC<any>;
-        handler: any;
-    }) => import("react/jsx-runtime").JSX.Element;
-    McModalContext: React.Context<McModalStore>;
-    create: <P extends {}>(Comp: React.ComponentType<P>) => React.FC<P & McModalHocProps>;
-    register: <T extends React.FC<any>>(id: string, comp: T, props?: Partial<McModalArgs<T>> | undefined) => void;
-    getModal: typeof getModal;
-    show: typeof show;
-    hide: typeof hide;
-    remove: (modal: string | React.FC<any>) => void;
-    useModal: typeof useModal;
-    reducer: (state: McModalStore | undefined, action: McModalAction) => McModalStore;
-    antdModal: (modal: McModalHandler) => {
-        open: boolean;
-        onCancel: () => void;
-        onOk: () => void;
-        afterClose: () => void;
-    };
-    antdDrawer: (modal: McModalHandler) => {
-        open: boolean;
-        onClose: () => void;
-        afterOpenChange: (visible: boolean) => void;
-    };
-};
-export default McModal;