@sheinx/base 3.0.0-alpha.1

package/cjs/upload/upload.type.d.ts

@@ -0,0 +1,180 @@
+import React from 'react';
+import { CommonType } from '../common/type';
+import { UseUploadProps } from '@sheinx/hooks';
+import { SpinClasses } from '../spin/spin.type';
+import { PopoverConfirmProps } from '../popover';
+import { PopoverClasses } from '../popover/popover.type';
+import { ImageClasses } from '../image/image.type';
+export type { UploadOptions } from '@sheinx/hooks';
+export interface UploadClasses {
+    wrapper: string;
+    wrapperImage: string;
+    wrapperDisabled: string;
+    dropItem: string;
+    handler: string;
+    icon: string;
+    iconHover: string;
+    result: string;
+    resultText: string;
+    resultTextBody: string;
+    resultUploading: string;
+    resultSuccess: string;
+    resultTextFooter: string;
+    resultError: string;
+    resultDeleted: string;
+    resultClose: string;
+    resultStatusIcon: string;
+    imageHandler: string;
+    imageHandlerIcon: string;
+    imageBg: string;
+    imageResult: string;
+    imageResultMask: string;
+    imageResultMaskOperator: string;
+    imageResultLoading: string;
+    imageResultMaskInfo: string;
+    imageResultMaskShow: string;
+    imageResultTopBtn: string;
+    imageResultTip: string;
+    customImageBtn: string;
+    button: string;
+    buttonUploading: string;
+    buttonCover: string;
+    buttonBg: string;
+    buttonBgSpin: string;
+}
+interface UploadImageProps<T> {
+    /**
+     * @en Add image view is displayed on the left
+     * @cn 添加图片视图是否在左侧展示
+     * @default false
+     */
+    leftHandler?: boolean;
+    /**
+     * @en The style of the image
+     * @cn 图片选择框的样式
+     * @default {width: 80, height: 80}
+     */
+    imageStyle?: React.CSSProperties;
+    /**
+     * @en Custom rendering of uploaded images
+     * @cn 自定义渲染上传的图片
+     */
+    renderContent?: (res: any, item: T, index: number, values: T[]) => React.ReactNode;
+    /**
+     * @en how to preview the image
+     * @cn 自定义预览图片操作，默认为画廊展示
+     */
+    onPreview?: (url: string, value: T, index: number, values: T[], fun: {
+        preview: () => void;
+    }) => void;
+}
+/**
+ * @title Upload
+ */
+export interface UploadProps<T> extends Omit<UseUploadProps<T>, 'onChange' | 'value' | 'text' | 'isImage'>, Pick<CommonType, 'className' | 'style'>, UploadImageProps<T> {
+    /**
+     * @en Component style class
+     * @cn 组件样式类
+     */
+    jssStyle?: {
+        upload?: () => UploadClasses;
+        spin?: () => SpinClasses;
+        popover?: () => PopoverClasses;
+        image?: () => ImageClasses;
+    };
+    /**
+     * @en show upload list
+     * @cn 是否展示上传列表
+     * @default true
+     */
+    showUploadList?: boolean;
+    /**
+     * @en drop to update
+     * @cn 是否开启拖拽上传文件
+     * @default false
+     */
+    drop?: boolean;
+    /**
+     * @cn 文件多选
+     * @en multiple file
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * @en Upload placeholder
+     * @cn 上传占位内容
+     */
+    children?: React.ReactNode;
+    /**
+     * @en The same as the native webkitdirectory tag
+     * @cn 同原生 input 标签的 webkitdirectory 属性
+     */
+    webkitdirectory?: boolean | string;
+    /**
+     * @en default value
+     * @cn 默认值
+     */
+    defaultValue?: T[];
+    /**
+     * @en The callback before the value is changed, when the return value is not empty, it will be used as the new value of the component
+     * @cn 值改变前的回调，当返回值不为空时将作为组件的新值
+     * @override (value: any) => any
+     */
+    beforeChange?: (value: T[]) => T[] | void;
+    /**
+     * @en value
+     * @cn defaultValue 和 value 可以同时设置，defaultValue 会被value覆盖 在 Form 中，value会被表单接管，value 无效
+     * @override any[]
+     */
+    value?: T[];
+    /**
+     * @en The callback function when the value is changing(Upload successfully, delete). values: Array, the value is the onSuccess returns
+     * @cn 值改变回调(上传成功，删除)。values: 数组, 其每个值是 onSuccess 的返回值
+     */
+    onChange?: (value: T[]) => void;
+    /**
+     * @en Display results
+     * @cn 结果展示
+     * @default a => a
+     */
+    renderResult?: (data: any) => React.ReactNode;
+    /**
+     * @en Can the file be deleted
+     * @cn 文件是否可以删除
+     * @default true
+     */
+    canDelete?: ((item: T, index: number) => boolean) | boolean;
+    /**
+     * @en custom Result component
+     * @cn 自定义Result 组件
+     */
+    customResult?: React.ComponentType<{
+        value: any;
+        files: any;
+        onValueRemove: (index: number) => void;
+        onFileRemove: (id: string) => void;
+    }>;
+    /**
+     * @en Custom error prompt after forceAccept type verification fails
+     * @cn forceAccept 类型校验失败后自定义错误提示
+     */
+    forceAcceptErrorMsg?: string;
+    /**
+     * @en Whether to recover deleted values.
+     * @cn 是否可以恢复已删除的value
+     * @default false
+     */
+    recoverAble?: boolean;
+    /**
+     * @en Confirmation before deletion
+     * @cn 是否在删除文件和图片前弹出确认
+     */
+    removeConfirm?: string | PopoverConfirmProps;
+    /**
+     * @en The type of display
+     * @cn 展示类型
+     * @default 'text'
+     */
+    listType?: 'text' | 'image';
+}
+//# sourceMappingURL=upload.type.d.ts.map

package/cjs/upload/upload.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.type.d.ts","sourceRoot":"","sources":["upload.type.ts"],"names":[],"mappings":"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"}

package/cjs/upload/upload.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/upload/useInputClick.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const useInputClick: () => {
+    inputProps: {
+        ref: import("react").MutableRefObject<HTMLInputElement | null>;
+        type: string;
+        style: {
+            display: string;
+        };
+    };
+    wrapperProps: {
+        onClick: () => void;
+    };
+};
+//# sourceMappingURL=useInputClick.d.ts.map

package/cjs/upload/useInputClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputClick.d.ts","sourceRoot":"","sources":["useInputClick.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa;;;;;;;;;;;CAyBzB,CAAC"}

package/cjs/upload/useInputClick.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInputClick = void 0;
+var _react = require("react");
+var useInputClick = function useInputClick() {
+  var inputRef = (0, _react.useRef)(null);
+  var _useRef = (0, _react.useRef)({
+      lock: false
+    }),
+    context = _useRef.current;
+  var inputProps = {
+    ref: inputRef,
+    type: 'file',
+    style: {
+      display: 'none'
+    }
+  };
+  var wrapperProps = {
+    onClick: function onClick() {
+      if (context.lock) return;
+      if (inputRef.current) {
+        context.lock = true;
+        inputRef.current.value = '';
+        inputRef.current.click();
+        setTimeout(function () {
+          context.lock = false;
+        }, 1000);
+      }
+    }
+  };
+  return {
+    inputProps: inputProps,
+    wrapperProps: wrapperProps
+  };
+};
+exports.useInputClick = useInputClick;

package/cjs/virtual-scroll/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Scroll } from './scroll';
+export { default as VirtualScrollList } from './virtual-scroll-list';
+//# sourceMappingURL=index.d.ts.map

package/cjs/virtual-scroll/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/cjs/virtual-scroll/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Scroll", {
+  enumerable: true,
+  get: function get() {
+    return _scroll.default;
+  }
+});
+Object.defineProperty(exports, "VirtualScrollList", {
+  enumerable: true,
+  get: function get() {
+    return _virtualScrollList.default;
+  }
+});
+var _scroll = _interopRequireDefault(require("./scroll"));
+var _virtualScrollList = _interopRequireDefault(require("./virtual-scroll-list"));

package/cjs/virtual-scroll/scroll.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface scrollProps {
+    scrollHeight: number;
+    scrollWidth: number;
+    children: React.ReactNode;
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    onScroll?: (info: {
+        scrollLeft: number;
+        scrollTop: number;
+        x: number;
+        y: number;
+        fromDrag: boolean;
+        height: number;
+        width: number;
+    }) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    scrollerStyle?: React.CSSProperties;
+}
+declare const Scroll: (props: scrollProps) => JSX.Element;
+export default Scroll;
+//# sourceMappingURL=scroll.d.ts.map

package/cjs/virtual-scroll/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,UAAU,WAAW;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACrC;AAED,QAAA,MAAM,MAAM,UAAW,WAAW,gBA2EjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/cjs/virtual-scroll/scroll.js

@@ -0,0 +1,105 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Scroll = function Scroll(props) {
+  var containerRef = (0, _react.useRef)(null);
+  var _useRef = (0, _react.useRef)({
+      timer: null,
+      isMouseDown: false
+    }),
+    context = _useRef.current;
+  var _useResize = (0, _hooks.useResize)({
+      targetRef: containerRef
+    }),
+    width = _useResize.width,
+    height = _useResize.height;
+  var _props$scrollHeight = props.scrollHeight,
+    scrollHeight = _props$scrollHeight === void 0 ? 0 : _props$scrollHeight,
+    _props$scrollWidth = props.scrollWidth,
+    scrollWidth = _props$scrollWidth === void 0 ? 0 : _props$scrollWidth;
+  var scrollerStyle = props.scrollerStyle || {
+    height: '100%',
+    width: '100%',
+    overflow: 'auto'
+  };
+  var containerStyle = {
+    height: '100%',
+    width: '100%',
+    position: 'sticky',
+    left: 0,
+    top: 0
+  };
+  var placeStyle = {
+    marginTop: Math.max(0, scrollHeight - height),
+    marginRight: scrollWidth,
+    height: 0,
+    width: 0,
+    overflow: 'hidden'
+  };
+  var handleScroll = (0, _hooks.usePersistFn)(function (e) {
+    var target = e.currentTarget;
+    var scrollLeft = target.scrollLeft,
+      scrollTop = target.scrollTop;
+    var maxY = target.scrollHeight - target.clientHeight;
+    var maxX = target.scrollWidth - target.clientWidth;
+    var x = maxX === 0 ? 0 : Math.min(scrollLeft / maxX, 1);
+    var y = maxY === 0 ? 0 : Math.min(scrollTop / maxY, 1);
+    if (props.onScroll) props.onScroll({
+      scrollLeft: scrollLeft,
+      scrollTop: scrollTop,
+      x: x,
+      y: y,
+      height: height,
+      width: width,
+      fromDrag: context.isMouseDown
+    });
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: props.className,
+    style: props.style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, _hooks.util.getDataAttribute({
+      type: 'scroll'
+    })), {}, {
+      style: scrollerStyle,
+      onScroll: handleScroll,
+      ref: props.wrapperRef,
+      onMouseDown: function onMouseDown() {
+        context.isMouseDown = true;
+      },
+      onMouseUp: function onMouseUp() {
+        context.isMouseDown = false;
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, _hooks.util.getDataAttribute({
+        type: 'scroll-container'
+      })), {}, {
+        style: containerStyle,
+        ref: containerRef,
+        children: props.children
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: placeStyle,
+        children: "\xA0"
+      })]
+    }))
+  });
+};
+var _default = Scroll;
+exports.default = _default;

package/cjs/virtual-scroll/virtual-scroll-list.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { VirtualListProps } from './virtual-scroll-list.type';
+declare const VirtualList: <DataItem>(props: VirtualListProps<DataItem>) => JSX.Element;
+export default VirtualList;
+//# sourceMappingURL=virtual-scroll-list.d.ts.map

package/cjs/virtual-scroll/virtual-scroll-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-scroll-list.d.ts","sourceRoot":"","sources":["virtual-scroll-list.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,QAAA,MAAM,WAAW,8DAqEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/cjs/virtual-scroll/virtual-scroll-list.js

@@ -0,0 +1,93 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.array.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _scroll = _interopRequireDefault(require("./scroll"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var VirtualList = function VirtualList(props) {
+  var rowsInView = props.rowsInView,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    keygen = props.keygen,
+    style = props.style,
+    className = props.className,
+    lineHeight = props.lineHeight,
+    height = props.height,
+    _props$colNum = props.colNum,
+    colNum = _props$colNum === void 0 ? 1 : _props$colNum,
+    renderItem = props.renderItem,
+    _props$tag = props.tag,
+    tag = _props$tag === void 0 ? 'div' : _props$tag,
+    tagClassName = props.tagClassName;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentIndex = _useState2[0],
+    setCurrentIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    top = _useState4[0],
+    setTop = _useState4[1];
+  var getScrollHeight = function getScrollHeight() {
+    var rows = Math.ceil(data.length / colNum);
+    return rows * lineHeight;
+  };
+  var handleScroll = function handleScroll(info) {
+    if (props.onScroll) props.onScroll(info);
+    var current = Math.floor(info.scrollTop / lineHeight);
+    var top = info.scrollTop - current * lineHeight;
+    setTop(top);
+    setCurrentIndex(current);
+  };
+  var scrollHeight = getScrollHeight();
+  var renderList = function renderList() {
+    var start = currentIndex * colNum;
+    var end = (currentIndex + rowsInView) * colNum;
+    var items = data.slice(start, end);
+    var Tag = tag;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_scroll.default, {
+      className: className,
+      style: _objectSpread({
+        height: height
+      }, style),
+      scrollWidth: 0,
+      scrollHeight: scrollHeight,
+      onScroll: handleScroll,
+      scrollerStyle: props.scrollerStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+        className: tagClassName,
+        style: {
+          transform: "translate3d(0, -".concat(top, "px, 0)")
+        },
+        children: items.map(function (d, i) {
+          var key = _hooks.util.getKey(keygen, d, i);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+            children: renderItem(d, currentIndex + i, key)
+          }, key);
+        })
+      })
+    });
+  };
+  return renderList();
+};
+var _default = VirtualList;
+exports.default = _default;

package/cjs/virtual-scroll/virtual-scroll-list.type.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { CommonType } from '../common/type';
+import { KeygenType } from '@sheinx/hooks';
+export interface VirtualListProps<DataItem> extends Pick<CommonType, 'className' | 'style'> {
+    data: DataItem[];
+    keygen?: KeygenType<DataItem>;
+    height: number | string;
+    lineHeight: number;
+    rowsInView: number;
+    colNum?: number;
+    renderItem: any;
+    tag?: React.ReactElement['type'];
+    tagClassName?: string;
+    scrollerStyle?: React.CSSProperties;
+    onScroll?: (info: {
+        scrollLeft: number;
+        scrollTop: number;
+        x: number;
+        y: number;
+        fromDrag: boolean;
+        height: number;
+        width: number;
+    }) => void;
+}
+//# sourceMappingURL=virtual-scroll-list.type.d.ts.map

package/cjs/virtual-scroll/virtual-scroll-list.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-scroll-list.type.d.ts","sourceRoot":"","sources":["virtual-scroll-list.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,WAAW,gBAAgB,CAAC,QAAQ,CAAE,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IACzF,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE9B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,GAAG,CAAC;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;CACZ"}

package/cjs/virtual-scroll/virtual-scroll-list.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/absolute-list/absolute-list.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AbsoluteListProps } from './absolute-list.type';
+declare const AbsoluteList: (props: AbsoluteListProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default AbsoluteList;
+//# sourceMappingURL=absolute-list.d.ts.map

package/esm/absolute-list/absolute-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"absolute-list.d.ts","sourceRoot":"","sources":["absolute-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,QAAA,MAAM,YAAY,UAAW,iBAAiB,8EAoD7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/esm/absolute-list/absolute-list.js

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _useContainer2 = _interopRequireDefault(require("./use-container"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var AbsoluteList = function AbsoluteList(props) {
+  var absolute = props.absolute,
+    position = props.position,
+    children = props.children,
+    parentElement = props.parentElement,
+    scrollElement = props.scrollElement,
+    fixedWidth = props.fixedWidth,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 1051 : _props$zIndex,
+    focus = props.focus,
+    popupEl = props.popupEl,
+    updateKey = props.updateKey,
+    popupGap = props.popupGap,
+    adjust = props.adjust,
+    _props$destroy = props.destroy,
+    destroy = _props$destroy === void 0 ? false : _props$destroy;
+  var _useContainer = (0, _useContainer2.default)({
+      container: typeof absolute === 'function' ? absolute : undefined
+    }),
+    getRoot = _useContainer.getRoot,
+    getContainer = _useContainer.getContainer;
+  var style = (0, _hooks.usePositionStyle)({
+    getContainer: getContainer,
+    position: position,
+    absolute: !!absolute,
+    parentEl: parentElement,
+    show: focus,
+    fixedWidth: fixedWidth,
+    zIndex: zIndex,
+    visibleEl: scrollElement,
+    popupEl: popupEl,
+    updateKey: updateKey,
+    popupGap: popupGap,
+    adjust: adjust
+  });
+  var childStyle = children.props.style;
+  var newStyle = _objectSpread(_objectSpread({}, style), childStyle);
+  if ( /*#__PURE__*/_react.default.isValidElement(children) === false) return null;
+  var styledChild = /*#__PURE__*/_react.default.cloneElement(children, {
+    style: newStyle
+  });
+  if (destroy && !focus) return null;
+  if (absolute) {
+    var root = getRoot();
+    root.className = props.rootClass || '';
+    return /*#__PURE__*/_reactDom.default.createPortal(styledChild, root);
+  }
+  return styledChild;
+};
+var _default = AbsoluteList;
+exports.default = _default;