@nutui/nutui-react 2.7.0 → 3.0.0-beta.0

package/dist/cjs/packages/video/video.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Video", {
+    enumerable: true,
+    get: function() {
+        return Video;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _typings = require("../../utils/typings");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    source: {
+        type: {},
+        src: ''
+    },
+    options: {
+        controls: true,
+        muted: false,
+        autoplay: false,
+        poster: '',
+        playsinline: false,
+        loop: false
+    }
+});
+var classPrefix = "nut-video";
+var Video = function Video(props) {
+    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, source = _ref.source, options = _ref.options, className = _ref.className, onPlay = _ref.onPlay, onPause = _ref.onPause, onPlayEnd = _ref.onPlayEnd, restProps = (0, _object_without_properties._)(_ref, [
+        "children",
+        "source",
+        "options",
+        "className",
+        "onPlay",
+        "onPause",
+        "onPlayEnd"
+    ]);
+    var rootRef = (0, _react.useRef)(null);
+    var classes = (0, _classnames.default)(classPrefix, className);
+    (0, _react.useEffect)(function() {
+        init();
+    }, []);
+    var init = function init() {
+        if (rootRef.current) {
+            var videoRef = rootRef.current;
+            if (options.autoplay) {
+                setTimeout(function() {
+                    videoRef.play();
+                }, 200);
+            }
+            if (options.playsinline) {
+                videoRef.setAttribute('playsinline', String(options.playsinline));
+                videoRef.setAttribute('webkit-playsinline', String(options.playsinline));
+                videoRef.setAttribute('x5-video-player-type', 'h5-page');
+                videoRef.setAttribute('x5-video-player-fullscreen', 'false');
+            }
+            videoRef.addEventListener('play', function() {
+                onPlay && onPlay(videoRef);
+            });
+            videoRef.addEventListener('pause', function() {
+                onPause && onPause(videoRef);
+            });
+            videoRef.addEventListener('ended', function() {
+                videoRef.currentTime = 0;
+                onPlayEnd && onPlayEnd(videoRef);
+            });
+        }
+    };
+    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+        className: classes
+    }, restProps), /*#__PURE__*/ _react.default.createElement("video", {
+        className: "nut-video-player",
+        muted: options.muted,
+        autoPlay: options.autoplay,
+        loop: options.loop,
+        poster: options.poster,
+        controls: options.controls,
+        ref: rootRef,
+        src: source.src
+    }, /*#__PURE__*/ _react.default.createElement("source", {
+        src: source.src,
+        type: source.type
+    }), /*#__PURE__*/ _react.default.createElement("track", {
+        kind: "captions"
+    })));
+};
+Video.displayName = 'NutVideo';

package/dist/cjs/packages/virtuallist/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _virtuallist = require("./virtuallist");
+var _default = _virtuallist.VirtualList;

package/dist/cjs/packages/virtuallist/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/cjs/packages/virtuallist/style/index.js

@@ -0,0 +1 @@
+import './virtuallist.scss';

package/dist/cjs/packages/virtuallist/style/style.css

@@ -0,0 +1,70 @@
+.nut-horizontal-items {
+  float: left;
+}
+.nut-horizontal-items li {
+  display: block;
+  float: left;
+  color: var(--nutui-color-title, #1a1a1a);
+  background: var(--nutui-color-background-overlay, #ffffff);
+  padding: 10px;
+  margin-right: 20px;
+}
+.nut-horizontal-items:after {
+  content: "";
+  display: block;
+  visibility: hidden;
+  clear: both;
+}
+
+.nut-vertical-items li {
+  display: block;
+  color: var(--nutui-color-title, #1a1a1a);
+  background: var(--nutui-color-background-overlay, #ffffff);
+  border-radius: 7px;
+  box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
+  margin-top: 20px;
+  padding: 14px 15px;
+  font-size: 13px;
+  line-height: 18px;
+  font-family: PingFangSC;
+  font-weight: 500;
+}
+
+.nut-virtualList-box {
+  overflow: auto;
+}
+
+.nut-virtuallist {
+  width: 100%;
+  overflow: scroll;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-virtuallist-phantom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: -1;
+}
+.nut-virtuallist-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.nut-virtuallist-item {
+  overflow: hidden;
+  margin: var(--nutui-list-item-margin, 0 0 10px 0);
+}
+
+[dir=rtl] .nut-horizontal-items,
+.nut-rtl .nut-horizontal-items {
+  float: right;
+}
+[dir=rtl] .nut-horizontal-items li,
+.nut-rtl .nut-horizontal-items li {
+  float: right;
+  margin-right: 0;
+  margin-left: 20px;
+}

package/dist/cjs/packages/virtuallist/types.js

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

package/dist/cjs/packages/virtuallist/utils.js

@@ -0,0 +1,140 @@
+// 缓存列表初始化信息
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    binarySearch: function() {
+        return binarySearch;
+    },
+    getEndIndex: function() {
+        return getEndIndex;
+    },
+    getListTotalSize: function() {
+        return getListTotalSize;
+    },
+    initPositinoCache: function() {
+        return initPositinoCache;
+    },
+    updateItemSize: function() {
+        return updateItemSize;
+    }
+});
+var initPositinoCache = function initPositinoCache(reaItemSize) {
+    var length = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+    var index = 0;
+    var positions = Array(length);
+    while(index < length){
+        positions[index] = {
+            index: index,
+            height: reaItemSize,
+            width: reaItemSize,
+            top: index * reaItemSize,
+            bottom: (index + 1) * reaItemSize,
+            left: index * reaItemSize,
+            right: (index + 1) * reaItemSize
+        };
+        index++;
+    }
+    return positions;
+};
+// 获取列表总高度
+var getListTotalSize = function getListTotalSize(positions, horizontal) {
+    var index = positions.length - 1;
+    var size = 0;
+    if (index < 0) {
+        size = 0;
+    } else {
+        size = horizontal ? positions[index].right : positions[index].bottom;
+    }
+    return size;
+};
+// 通过二分法找到 scrollOffset 对应的值
+var binarySearch = function binarySearch(positionsList, horizontal) {
+    var value = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
+    var start = 0;
+    var end = positionsList.length - 1;
+    var tempIndex = null;
+    var key = horizontal ? 'right' : 'bottom';
+    while(start <= end){
+        var midIndex = Math.floor((start + end) / 2);
+        var midValue = positionsList[midIndex][key];
+        // 相等则直接返回（因为是bottom, 因此startIndex应该是下一个节点）
+        if (midValue === value) {
+            return midIndex + 1;
+        }
+        // 中间值 < 传入值，则说明 value对应的节点 大于 start, start往后移动一位
+        if (midValue < value) {
+            start = midIndex + 1;
+        } else if (midValue > value) {
+            // tempIndex存放最靠近值为value的所有
+            if (tempIndex === null || tempIndex > midIndex) {
+                tempIndex = midIndex;
+            }
+            end = midIndex - 1;
+        }
+    }
+    tempIndex = tempIndex || 0;
+    return tempIndex;
+};
+var getEndIndex = function getEndIndex(param) {
+    var list = param.list, startIndex = param.startIndex, visibleCount = param.visibleCount, _param_itemEqual = param.itemEqual, itemEqual = _param_itemEqual === void 0 ? true : _param_itemEqual, positions = param.positions, offSetSize = param.offSetSize, overscan = param.overscan, _param_sizeKey = param.sizeKey, sizeKey = _param_sizeKey === void 0 ? 'width' : _param_sizeKey;
+    var dataLength = list.length;
+    var tempIndex = null;
+    if (itemEqual) {
+        var endIndex = startIndex + visibleCount;
+        tempIndex = dataLength > 0 ? Math.min(dataLength, endIndex) : endIndex;
+    } else {
+        var sizeNum = 0;
+        for(var i = startIndex; i < dataLength; i++){
+            sizeNum += positions[i][sizeKey] || 0;
+            if (sizeNum > offSetSize) {
+                var endIndex1 = i + overscan;
+                tempIndex = dataLength > 0 ? Math.min(dataLength, endIndex1) : endIndex1;
+                break;
+            }
+        }
+        if (sizeNum < offSetSize) {
+            tempIndex = dataLength;
+        }
+    }
+    tempIndex = tempIndex || 0;
+    return tempIndex;
+};
+// 更新Item大小
+var updateItemSize = function updateItemSize(positions, items, sizeKey, margin) {
+    var newPos = positions.concat();
+    Array.from(items).forEach(function(item) {
+        var index = Number(item.getAttribute('data-index'));
+        var styleVal = item.getAttribute('style');
+        if (styleVal && styleVal.includes('none')) return;
+        var nowSize = item.getBoundingClientRect()[sizeKey];
+        if (margin) nowSize += margin;
+        var oldSize = positions[index][sizeKey];
+        // 存在差值, 更新该节点以后所有的节点
+        var dValue = oldSize - nowSize;
+        if (dValue) {
+            if (sizeKey === 'width') {
+                newPos[index].right -= dValue;
+                newPos[index][sizeKey] = nowSize;
+                for(var k = index + 1; k < positions.length; k++){
+                    newPos[k].left = positions[k - 1].right;
+                    newPos[k].right -= dValue;
+                }
+            } else if (sizeKey === 'height') {
+                newPos[index].bottom -= dValue;
+                newPos[index][sizeKey] = nowSize;
+                for(var k1 = index + 1; k1 < positions.length; k1++){
+                    newPos[k1].top = positions[k1 - 1].bottom;
+                    newPos[k1].bottom -= dValue;
+                }
+            }
+        }
+    });
+};

package/dist/cjs/packages/virtuallist/virtuallist.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent, ReactNode } from 'react';
+import type { Data } from './types';
+import { BasicComponent } from "../../utils/typings";
+export interface VirtualListProps extends BasicComponent {
+    list: Array<Data>;
+    containerHeight: number;
+    itemRender: (data: any, dataIndex: number, index: number) => ReactNode;
+    itemHeight: number;
+    itemEqual: boolean;
+    direction: 'vertical' | 'horizontal';
+    overscan: number;
+    onScroll: () => void;
+    key: string;
+}
+export declare const VirtualList: FunctionComponent<Partial<VirtualListProps>>;

package/dist/cjs/packages/virtuallist/virtuallist.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VirtualList", {
+    enumerable: true,
+    get: function() {
+        return VirtualList;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _define_property = require("@swc/helpers/_/_define_property");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _utils = require("./utils");
+var _typings = require("../../utils/typings");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    list: [],
+    itemHeight: 66,
+    itemEqual: true,
+    direction: 'vertical',
+    overscan: 2
+});
+var VirtualList = function VirtualList(props) {
+    var _ref = (0, _object_spread._)({}, defaultProps, props), list = _ref.list, itemRender = _ref.itemRender, itemEqual = _ref.itemEqual, itemHeight = _ref.itemHeight, direction = _ref.direction, overscan = _ref.overscan, key = _ref.key, onScroll = _ref.onScroll, className = _ref.className, containerHeight = _ref.containerHeight, rest = (0, _object_without_properties._)(_ref, [
+        "list",
+        "itemRender",
+        "itemEqual",
+        "itemHeight",
+        "direction",
+        "overscan",
+        "key",
+        "onScroll",
+        "className",
+        "containerHeight"
+    ]);
+    var horizontal = direction === 'horizontal';
+    var sizeKey = horizontal ? 'width' : 'height';
+    var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
+    var offsetKey = horizontal ? 'left' : 'top';
+    // 虚拟列表容器ref
+    var scrollRef = (0, _react.useRef)(null);
+    // 虚拟列表显示区域ref
+    var itemsRef = (0, _react.useRef)(null);
+    // 列表位置信息
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)([
+        {
+            index: 0,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+            right: 0
+        }
+    ]), 2), positions = _useState[0], setPositions = _useState[1];
+    // 列表总大小
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(99999999), 2), listTotalSize = _useState1[0], setListTotalSize = _useState1[1];
+    // 可视区域条数
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), visibleCount = _useState2[0], setVisibleCount = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(containerHeight || 0), 2), offSetSize = _useState3[0], setOffSetSize = _useState3[1];
+    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)({
+        startOffset: 0,
+        startIndex: 0,
+        overStart: 0,
+        endIndex: 10
+    }), 2), options = _useState4[0], setOptions = _useState4[1];
+    // 列表位置信息
+    (0, _react.useEffect)(function() {
+        var pos = (0, _utils.initPositinoCache)(itemHeight, list.length);
+        setPositions(pos);
+        var totalSize = (0, _utils.getListTotalSize)(pos, horizontal);
+        setListTotalSize(totalSize);
+    }, [
+        list,
+        itemHeight,
+        horizontal
+    ]);
+    var getElement = (0, _react.useCallback)(function() {
+        var _scrollRef_current;
+        return ((_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.parentElement) || document.body;
+    }, []);
+    (0, _react.useEffect)(function() {
+        if (containerHeight) return;
+        var size = horizontal ? getElement().offsetWidth : getElement().offsetHeight;
+        setOffSetSize(size);
+    }, [
+        getElement,
+        horizontal,
+        containerHeight
+    ]);
+    (0, _react.useEffect)(function() {
+        // 初始-计算visibleCount
+        if (offSetSize === 0) return;
+        var count = Math.ceil(offSetSize / itemHeight) + overscan;
+        setVisibleCount(count);
+        setOptions(function(options) {
+            return (0, _object_spread_props._)((0, _object_spread._)({}, options), {
+                endIndex: count
+            });
+        });
+    }, [
+        getElement,
+        horizontal,
+        itemHeight,
+        overscan,
+        offSetSize
+    ]);
+    var updateTotalSize = (0, _react.useCallback)(function() {
+        if (!itemsRef.current) return;
+        var items = itemsRef.current.children;
+        if (!items.length) return;
+        // 更新缓存
+        (0, _utils.updateItemSize)(positions, items, sizeKey);
+        var totalSize = (0, _utils.getListTotalSize)(positions, horizontal);
+        setListTotalSize(totalSize);
+    }, [
+        positions,
+        sizeKey,
+        horizontal
+    ]);
+    var scroll = (0, _react.useCallback)(function() {
+        requestAnimationFrame(function(e) {
+            var scrollSize = getElement()[scrollKey];
+            var startIndex = (0, _utils.binarySearch)(positions, horizontal, scrollSize);
+            var overStart = startIndex - overscan > -1 ? startIndex - overscan : 0;
+            // const offSetSize = horizontal ? getElement().offsetWidth : getElement().offsetHeight
+            if (!itemEqual) {
+                updateTotalSize();
+            }
+            var endIndex = (0, _utils.getEndIndex)({
+                list: list,
+                startIndex: startIndex,
+                visibleCount: visibleCount,
+                itemEqual: itemEqual,
+                positions: positions,
+                offSetSize: offSetSize,
+                sizeKey: sizeKey,
+                overscan: overscan
+            });
+            var startOffset = positions[startIndex][offsetKey];
+            setOptions({
+                startOffset: startOffset,
+                startIndex: startIndex,
+                overStart: overStart,
+                endIndex: endIndex
+            });
+            // 无限下滑
+            if (endIndex > list.length - 1) {
+                if (onScroll) {
+                    onScroll();
+                }
+            }
+        });
+    }, [
+        positions,
+        getElement,
+        list,
+        visibleCount,
+        itemEqual,
+        updateTotalSize,
+        offsetKey,
+        sizeKey,
+        scrollKey,
+        horizontal,
+        overscan,
+        offSetSize
+    ]);
+    (0, _react.useEffect)(function() {
+        var element = getElement();
+        element.addEventListener('scroll', scroll, false);
+        return function() {
+            element.removeEventListener('scroll', scroll, false);
+        };
+    }, [
+        getElement,
+        scroll
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
+        className: (0, _classnames.default)('nut-virtualList-box', className)
+    }, rest), {
+        style: (0, _define_property._)({}, sizeKey, containerHeight ? "".concat(offSetSize, "px") : '')
+    }), /*#__PURE__*/ _react.default.createElement("div", {
+        ref: scrollRef,
+        className: (0, _classnames.default)({
+            'nut-horizontal-box': horizontal,
+            'nut-vertical-box': !horizontal
+        }),
+        style: (0, _define_property._)({
+            position: 'relative'
+        }, sizeKey, "".concat(listTotalSize, "px"))
+    }, /*#__PURE__*/ _react.default.createElement("ul", {
+        className: (0, _classnames.default)('nut-virtuallist-items', {
+            'nut-horizontal-items': horizontal,
+            'nut-vertical-items': !horizontal
+        }),
+        ref: itemsRef,
+        style: {
+            transform: horizontal ? "translate3d(".concat(options.startOffset, "px,0,0)") : "translate3d(0,".concat(options.startOffset, "px,0)")
+        }
+    }, list.slice(options.overStart, options.endIndex).map(function(data, index) {
+        var startIndex = options.startIndex, overStart = options.overStart;
+        var dataIndex = overStart + index;
+        var styleVal = dataIndex < startIndex ? 'none' : 'block';
+        var keyVal = key && data[key] ? data[key] : dataIndex;
+        return /*#__PURE__*/ _react.default.createElement("li", {
+            "data-index": "".concat(dataIndex),
+            className: "nut-virtuallist-item",
+            key: "".concat(keyVal),
+            style: {
+                display: styleVal
+            }
+        }, itemRender ? itemRender(data, dataIndex, index) : data);
+    }))));
+};
+VirtualList.displayName = 'NutVirtualList';

package/dist/cjs/packages/watermark/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _watermark = require("./watermark");
+var _default = _watermark.WaterMark;

package/dist/cjs/packages/watermark/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/cjs/packages/watermark/style/index.js

@@ -0,0 +1 @@
+import './watermark.scss';

package/dist/cjs/packages/watermark/style/style.css

@@ -0,0 +1,13 @@
+.nut-watermark {
+  position: absolute;
+  z-index: var(--nutui-watermark-z-index, 1200);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+}
+.nut-watermark-full-page {
+  position: fixed;
+}

package/dist/cjs/packages/watermark/watermark.d.ts

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface WaterMarkProps extends BasicComponent {
+    content: string;
+    fullPage: boolean;
+    zIndex: number;
+    gapX: number;
+    gapY: number;
+    startX: number;
+    startY: number;
+    width: number;
+    height: number;
+    image: string;
+    imageWidth: number;
+    imageHeight: number;
+    rotate: number;
+    color: string;
+    fontStyle: string;
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: string | number;
+}
+export declare const WaterMark: FunctionComponent<Partial<WaterMarkProps> & React.HTMLAttributes<HTMLDivElement>>;