@nutui/nutui-react-taro 2.6.13 → 3.0.0-beta.0

package/dist/cjs/packages/badge/badge.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Badge", {
+    enumerable: true,
+    get: function() {
+        return Badge;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+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 _type_of = require("@swc/helpers/_/_type_of");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
+var _typings = require("../../utils/typings");
+var _index = require("../configprovider/index");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    value: '',
+    dot: false,
+    max: 99,
+    top: '4',
+    right: '8',
+    color: '',
+    fill: 'solid'
+});
+var Badge = function Badge(props) {
+    var content = function content() {
+        if (dot || (typeof value === "undefined" ? "undefined" : (0, _type_of._)(value)) === 'object' || value === 0) return null;
+        if (typeof value === 'number' && typeof max === 'number') {
+            return max < value ? "".concat(max, "+") : "".concat(value);
+        }
+        return value;
+    };
+    var isIcon = function isIcon() {
+        if ((typeof value === "undefined" ? "undefined" : (0, _type_of._)(value)) === 'object' && value) return value;
+    };
+    var isNumber = function isNumber() {
+        if (typeof value === 'number' && value) return value;
+    };
+    var isString = function isString() {
+        if (typeof value === 'string' && value) return value;
+    };
+    var _this;
+    var rtl = (0, _index.useRtl)();
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    var classPrefix = 'nut-badge';
+    var classes = (0, _classnames.default)(classPrefix, className, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
+    var contentClasses = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-dot"), dot), "".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)({}, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
+    var getStyle = function getStyle() {
+        var style = {};
+        style.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
+        var dir = rtl ? 'left' : 'right';
+        style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
+        if (color) {
+            if (fill === 'outline') {
+                style.color = color;
+                style.background = '#fff';
+                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
+                    style.border = "1px solid ".concat(color);
+                }
+            } else {
+                style.color = '#fff';
+                style.background = color;
+            }
+        }
+        return style;
+    };
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: classes,
+        style: style
+    }, isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-icon")
+    }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: contentClasses,
+        style: getStyle()
+    }, content()));
+};
+Badge.displayName = 'NutBadge';

package/dist/cjs/packages/badge/index.d.ts

@@ -0,0 +1,3 @@
+import { Badge } from "./badge";
+export type { BadgeFill, BadgeProps } from "./badge";
+export default Badge;

package/dist/cjs/packages/badge/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 _badge = require("./badge");
+var _default = _badge.Badge;

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

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

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

@@ -0,0 +1,71 @@
+.nut-badge {
+  position: relative;
+  display: inline-block;
+}
+.nut-badge-icon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  top: -10%;
+  right: -15%;
+  padding: var(--nutui-badge-icon-padding, 3px);
+  text-align: center;
+  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+  z-index: var(--nutui-badge-z-index, 1);
+}
+.nut-badge-icon .nut-icon {
+  width: var(--nutui-badge-icon-size, 12px);
+  height: var(--nutui-badge-icon-size, 12px);
+  font-size: var(--nutui-badge-icon-size, 12px);
+}
+.nut-badge-sup {
+  height: var(--nutui-badge-height, 14px);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  color: var(--nutui-badge-color, #fff);
+  padding: var(--nutui-badge-padding, 0 4px);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));
+  font-weight: normal;
+  text-align: center;
+  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+  min-width: var(--nutui-badge-min-width, 5px);
+  white-space: nowrap;
+  z-index: 1;
+}
+.nut-badge-one {
+  height: var(--nutui-badge-height, 14px);
+  width: var(--nutui-badge-height, 14px);
+  padding: 0;
+}
+.nut-badge-content {
+  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+}
+.nut-badge-dot {
+  width: var(--nutui-badge-dot-width, 7px);
+  height: var(--nutui-badge-dot-width, 7px);
+  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: var(--nutui-badge-dot-width, 7px);
+  padding: 0;
+}
+.nut-badge-outline .nut-badge-content {
+  background: var(--nutui-color-primary-text, #ffffff);
+  border: 1px solid var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-color-primary, #ff0f23);
+}
+
+[dir=rtl] .nut-badge-icon,
+.nut-rtl .nut-badge-icon {
+  right: auto;
+  left: -15%;
+}
+[dir=rtl] .nut-badge-content,
+.nut-rtl .nut-badge-content {
+  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
+}

package/dist/cjs/packages/badge/style/style.harmony.css

@@ -0,0 +1,68 @@
+.nut-badge {
+  position: relative;
+  display: inline-block;
+}
+.nut-badge-icon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  top: -10%;
+  right: -15%;
+  padding: 3px;
+  text-align: center;
+  border: 0px solid #ffffff;
+  border-radius: 14px;
+  z-index: 1;
+}
+.nut-badge-icon .nut-icon {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+.nut-badge-sup {
+  height: 14px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  color: #fff;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: normal;
+  text-align: center;
+  border: 0px solid #ffffff;
+  border-radius: 14px;
+  min-width: 5px;
+  white-space: nowrap;
+  z-index: 1;
+}
+.nut-badge-one {
+  height: 14px;
+  width: 14px;
+  padding: 0;
+}
+.nut-badge-content {
+  transform: translateY(-50%) translateX(100%);
+}
+.nut-badge-dot {
+  width: 7px;
+  height: 7px;
+  border: 0px solid #ffffff;
+  border-radius: 7px;
+  padding: 0;
+}
+
+[dir=rtl] .nut-badge-icon,
+.nut-rtl .nut-badge-icon {
+  right: auto;
+  left: -15%;
+}
+[dir=rtl] .nut-badge-content {
+  transform: translateY(-50%) translateX(-100%);
+}
+.nut-rtl .nut-badge-content {
+  transform: translateY(-50%) translateX(-100%);
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface BarrageProps extends BasicComponent {
+    list: Array<string>;
+    interval: number;
+    loop: boolean;
+    duration: number;
+    rows: number;
+    gapY: number;
+}
+export declare const Barrage: React.ForwardRefExoticComponent<Partial<BarrageProps> & React.RefAttributes<unknown>>;

package/dist/cjs/packages/barrage/barrage.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Barrage", {
+    enumerable: true,
+    get: function() {
+        return Barrage;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+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 _ts_generator = require("@swc/helpers/_/_ts_generator");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
+var _typings = require("../../utils/typings");
+var _getrectbytaro = require("../../utils/get-rect-by-taro");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    list: [],
+    interval: 500,
+    loop: true,
+    duration: 3000,
+    rows: 3,
+    gapY: 10
+});
+var classPrefix = "nut-barrage";
+var InternalBarrage = function InternalBarrage(props, ref) {
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, interval = _ref.interval, loop = _ref.loop, list = _ref.list, duration = _ref.duration, rows = _ref.rows, gapY = _ref.gapY, restProps = (0, _object_without_properties._)(_ref, [
+        "className",
+        "interval",
+        "loop",
+        "list",
+        "duration",
+        "rows",
+        "gapY"
+    ]);
+    var barrageBody = (0, _react.useRef)(null);
+    var barrageContainer = (0, _react.useRef)(null);
+    var barrageCWidth = (0, _react.useRef)(0);
+    var timer = (0, _react.useRef)(0);
+    var index = (0, _react.useRef)(0);
+    var times = (0, _react.useRef)([]);
+    var historyIndex = (0, _react.useRef)(-1);
+    var classes = (0, _classnames.default)(classPrefix, className);
+    (0, _react.useImperativeHandle)(ref, function() {
+        return {
+            add: function add(word) {
+                var _index = index.current % list.length;
+                if (!loop && index.current === list.length) {
+                    list.splice(list.length, 0, word);
+                } else {
+                    list.splice(_index, 0, word);
+                }
+            }
+        };
+    });
+    var getNodeWidth = function() {
+        var _ref = (0, _async_to_generator._)(function(node) {
+            var type, refe;
+            var _arguments = arguments;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        type = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : 'width';
+                        if (!node) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            (0, _getrectbytaro.getRectByTaro)(node)
+                        ];
+                    case 1:
+                        refe = _state.sent();
+                        return [
+                            2,
+                            Math.ceil(type === 'height' ? refe.height : refe.width)
+                        ];
+                    case 2:
+                        return [
+                            2,
+                            0
+                        ];
+                }
+            });
+        });
+        return function getNodeWidth(node) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    (0, _react.useEffect)(function() {
+        var init = function() {
+            var _ref = (0, _async_to_generator._)(function() {
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            if (!barrageBody.current) return [
+                                3,
+                                2
+                            ];
+                            return [
+                                4,
+                                getNodeWidth(barrageBody.current)
+                            ];
+                        case 1:
+                            barrageCWidth.current = _state.sent();
+                            _state.label = 2;
+                        case 2:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function init() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        init();
+        setTimeout(function() {
+            var _barrageBody_current;
+            (_barrageBody_current = barrageBody.current) === null || _barrageBody_current === void 0 ? void 0 : _barrageBody_current.style.setProperty('--move-distance', "-".concat(barrageCWidth.current, "px"));
+            index.current = 0;
+            run();
+        }, 300);
+        return function() {
+            clearInterval(timer.current);
+        };
+    }, [
+        list
+    ]);
+    var run = function run() {
+        clearInterval(timer.current);
+        var intervalCache = interval;
+        var _index = (loop ? index.current % list.length : index.current) % rows;
+        var result = times.current[_index] - rows * interval;
+        if (result > 0) {
+            intervalCache += result;
+        }
+        timer.current = window.setTimeout(function() {
+            play();
+        }, intervalCache);
+    };
+    var play = function() {
+        var _ref = (0, _async_to_generator._)(function() {
+            var _index, el, currentIndex, width, height, elScrollDuration, error;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!loop && index.current >= list.length) {
+                            return [
+                                2
+                            ];
+                        }
+                        _index = loop ? index.current % list.length : index.current;
+                        el = document.createElement("View");
+                        currentIndex = _index % rows;
+                        if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
+                            currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
+                        }
+                        historyIndex.current = currentIndex;
+                        el.innerHTML = list[_index];
+                        el.classList.add('barrage-item');
+                        barrageContainer.current.appendChild(el);
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            4,
+                            ,
+                            5
+                        ]);
+                        return [
+                            4,
+                            getNodeWidth(el)
+                        ];
+                    case 2:
+                        width = _state.sent();
+                        return [
+                            4,
+                            getNodeWidth(el, 'height')
+                        ];
+                    case 3:
+                        height = _state.sent();
+                        el.classList.add('move');
+                        elScrollDuration = width / barrageCWidth.current * duration;
+                        times.current[currentIndex] = Math.ceil(elScrollDuration);
+                        el.style.animationDuration = "".concat((duration + elScrollDuration).toFixed(2), "ms");
+                        el.style.top = "".concat(currentIndex * (height + gapY) + 20, "px");
+                        el.style.width = "".concat(width, "px");
+                        return [
+                            3,
+                            5
+                        ];
+                    case 4:
+                        error = _state.sent();
+                        console.log('异常自动流转到下一个');
+                        return [
+                            3,
+                            5
+                        ];
+                    case 5:
+                        el.addEventListener('animationend', function() {
+                            barrageContainer.current.removeChild(el);
+                        });
+                        index.current++;
+                        run();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function play() {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
+        className: classes,
+        ref: barrageBody
+    }, restProps), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        ref: barrageContainer,
+        className: "bContainer"
+    }));
+};
+var Barrage = /*#__PURE__*/ _react.default.forwardRef(InternalBarrage);
+Barrage.displayName = 'NutBarrage';

package/dist/cjs/packages/barrage/index.d.ts

@@ -0,0 +1,3 @@
+import { Barrage } from "./barrage";
+export type { BarrageProps } from "./barrage";
+export default Barrage;

package/dist/cjs/packages/barrage/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 _barrage = require("./barrage");
+var _default = _barrage.Barrage;

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

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

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

@@ -0,0 +1,77 @@
+.nut-barrage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: var(--nutui-gray-3, #f5f6fa);
+  color: var(--nutui-gray-7, #1a1a1a);
+}
+.nut-barrage .barrage-item {
+  display: block;
+  position: absolute;
+  right: 0;
+  padding: 4px 16px;
+  border-radius: 16px;
+  font-size: var(--nutui-font-size-2, 12px);
+  text-align: center;
+  white-space: pre;
+  transform: translateX(100%);
+  background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1));
+  box-sizing: border-box;
+}
+.nut-barrage .barrage-item.move {
+  will-change: transform;
+  animation-name: moving;
+  animation-timing-function: linear;
+  animation-play-state: running;
+}
+@keyframes moving {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(var(--move-distance));
+  }
+}
+@-webkit-keyframes moving {
+  from {
+    -webkit-transform: translateX(100%);
+  }
+  to {
+    -webkit-transform: translateX(var(--move-distance));
+  }
+}
+
+[dir=rtl] .nut-barrage,
+.nut-rtl .nut-barrage {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-barrage .barrage-item,
+.nut-rtl .nut-barrage .barrage-item {
+  transform: translateX(-100%);
+  background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1));
+}
+[dir=rtl] .nut-barrage .barrage-item.move,
+.nut-rtl .nut-barrage .barrage-item.move {
+  animation-name: moving-rtl;
+}
+@keyframes moving-rtl {
+  from {
+    transform: translateX(var(--move-distance));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@-webkit-keyframes moving-rtl {
+  from {
+    transform: translateX(var(--move-distance));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}

package/dist/cjs/packages/barrage/style/style.harmony.css

@@ -0,0 +1,80 @@
+.nut-barrage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: #F7F8FC;
+  color: #1A1A1A;
+}
+.nut-barrage .barrage-item {
+  display: block;
+  position: absolute;
+  right: 0;
+  padding: 4px 16px;
+  border-radius: 16px;
+  font-size: 12px;
+  text-align: center;
+  white-space: pre;
+  transform: translateX(100%);
+  background: undefined;
+  box-sizing: border-box;
+}
+.nut-barrage .barrage-item.move {
+  will-change: transform;
+  animation-name: moving;
+  animation-timing-function: linear;
+  animation-play-state: running;
+}
+@keyframes moving {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: undefined;
+  }
+}
+@-webkit-keyframes moving {
+  from {
+    -webkit-transform: translateX(100%);
+  }
+  to {
+    -webkit-transform: undefined;
+  }
+}
+
+[dir=rtl] .nut-barrage,
+.nut-rtl .nut-barrage {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-barrage .barrage-item {
+  transform: translateX(-100%);
+  background: undefined;
+}
+.nut-rtl .nut-barrage .barrage-item {
+  transform: translateX(-100%);
+  background: undefined;
+}
+[dir=rtl] .nut-barrage .barrage-item.move,
+.nut-rtl .nut-barrage .barrage-item.move {
+  animation-name: moving-rtl;
+}
+@keyframes moving-rtl {
+  from {
+    transform: undefined;
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@-webkit-keyframes moving-rtl {
+  from {
+    transform: undefined;
+  }
+  to {
+    transform: translateX(100%);
+  }
+}