@nutui/nutui-react-taro 2.7.0 → 3.0.0-beta.1

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

@@ -0,0 +1,265 @@
+.nut-range-container {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+  height: 4px;
+  align-items: center;
+  justify-content: space-between;
+}
+.nut-range-container-native {
+  height: auto;
+}
+
+.nut-range {
+  display: block;
+  position: relative;
+  height: 4px;
+  margin: 0 15px;
+  background-color: #ffebf1;
+  border-radius: 2px;
+  flex: 1;
+  cursor: pointer;
+}
+.nut-range::before {
+  position: absolute;
+  inset-block: -8px;
+  inset-inline: 0;
+  content: "";
+}
+.nut-range-min {
+  font-size: 12px;
+  color: #1a1a1a;
+  user-select: none;
+}
+.nut-range-max {
+  font-size: 12px;
+  color: #1a1a1a;
+  user-select: none;
+}
+.nut-range-bar {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #ff0f23;
+  border-radius: 2px;
+  transition: all 0.2s;
+}
+.nut-range-button {
+  position: absolute;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ff0f23;
+  outline: none;
+  align-items: center;
+  top: 50%;
+  left: 50%;
+}
+.nut-range-button-wrapper {
+  width: 24px;
+  height: 24px;
+}
+.nut-range-button-wrapper-right {
+  width: 24px;
+  height: 24px;
+}
+.nut-range-button-wrapper-left {
+  width: 24px;
+  height: 24px;
+}
+.nut-range-button-wrapper, .nut-range-button-wrapper-right {
+  touch-action: none;
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  cursor: grab;
+  outline: none;
+}
+.nut-range-button-wrapper-left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+}
+.nut-range-button-number {
+  position: relative;
+  width: 200%;
+  height: 24px;
+  line-height: 14px;
+  padding: 5px 0;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  font-size: 12px;
+  color: #1a1a1a;
+  text-align: center;
+  vertical-align: center;
+  box-sizing: border-box;
+}
+.nut-range-disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+}
+.nut-range-disabled .nut-range-button-wrapper,
+.nut-range-disabled .nut-range-button-wrapper-left,
+.nut-range-disabled .nut-range-button-wrapper-right {
+  cursor: not-allowed;
+}
+.nut-range-mark {
+  position: absolute;
+  width: 100%;
+  height: 14px;
+  overflow: visible;
+  top: 50%;
+}
+.nut-range-mark-text-wrapper {
+  position: absolute;
+  height: 100%;
+  top: 14px;
+  display: inline-block;
+  transform: translateX(-10px);
+}
+.nut-range-mark-text {
+  position: absolute;
+  line-height: 16px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  word-break: keep-all;
+  user-select: none;
+}
+.nut-range-tick {
+  position: absolute;
+  top: -20px;
+  width: 11px;
+  height: 11px;
+  left: 0px;
+  border-radius: 6px;
+  background: #ffebf1;
+}
+.nut-range-tick-active {
+  background: #ff0f23;
+}
+
+.nut-range-vertical-container {
+  height: 100%;
+  flex-direction: column;
+  padding: 0px 15px;
+}
+
+.nut-range-vertical {
+  width: 4px;
+  margin: 15px 0px;
+}
+.nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
+  position: absolute;
+  top: initial;
+  top: 100%;
+  left: 50%;
+  right: initial;
+}
+.nut-range-vertical-button-wrapper-left {
+  top: 0px;
+  left: 50%;
+  right: initial;
+}
+.nut-range-vertical-button-number {
+  left: 0px;
+  top: 50%;
+}
+.nut-range-vertical-mark {
+  position: absolute;
+  width: 36px;
+  height: 100%;
+  top: initial;
+  right: 50%;
+  overflow: visible;
+  font-size: 12px;
+  padding: 0px;
+}
+.nut-range-vertical-mark-hm {
+  left: -34px;
+}
+.nut-range-vertical-mark-text-wrapper {
+  height: 16px;
+  position: absolute;
+  display: inline-block;
+  user-select: none;
+  transform: translateY(-11px);
+}
+.nut-range-vertical-mark-text {
+  height: 100%;
+  line-height: 16px;
+  color: #999;
+  text-align: center;
+  word-break: keep-all;
+}
+.nut-range-vertical-tick {
+  position: absolute;
+  top: 2px;
+  left: 31px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background: #ffebf1;
+}
+.nut-range-vertical-tick-active {
+  background: #ff0f23;
+}
+
+[dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,
+.rtl-nut-range-button-wrapper,
+.rtl-nut-range-button-wrapper-right {
+  left: 0;
+  right: initial;
+}
+[dir=rtl] .nut-range-button-wrapper-left,
+.rtl-nut-range-button-wrapper-left {
+  right: 0;
+  left: initial;
+}
+[dir=rtl] .nut-range-tick,
+.rtl-nut-range-tick {
+  right: 0px;
+  left: initial;
+}
+[dir=rtl] .nut-range-mark-text,
+.rtl-nut-range-mark-text {
+  transform: translateX(10px);
+}
+[dir=rtl] .nut-range-vertical-button-wrapper, [dir=rtl] .nut-range-vertical-button-wrapper-right,
+.rtl-nut-range-vertical-button-wrapper,
+.rtl-nut-range-vertical-button-wrapper-right {
+  right: 50%;
+  left: initial;
+}
+[dir=rtl] .nut-range-vertical-button-wrapper-left,
+.rtl-nut-range-vertical-button-wrapper-left {
+  right: 50%;
+  left: initial;
+}
+[dir=rtl] .nut-range-vertical-mark,
+.rtl-nut-range-vertical-mark {
+  right: auto;
+  left: 50%;
+}
+[dir=rtl] .nut-range-vertical-tick,
+.rtl-nut-range-vertical-tick {
+  left: auto;
+  right: 30px;
+  margin-left: 0;
+  margin-right: 0px;
+}
+[dir=rtl] .nut-range-vertical-mark-text-wrapper,
+.rtl-nut-range-vertical-mark-text-wrapper {
+  transform: translateY(-11px);
+}

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

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

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

@@ -0,0 +1,3 @@
+import { Rate } from "./rate";
+export type { RateProps } from "./rate";
+export default Rate;

package/dist/cjs/packages/rate/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 _rate = require("./rate");
+var _default = _rate.Rate;

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

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface RateProps extends BasicComponent {
+    count: number;
+    value: number;
+    defaultValue: number;
+    min: number;
+    checkedIcon: React.ReactNode;
+    uncheckedIcon: React.ReactNode;
+    disabled: boolean;
+    readOnly: boolean;
+    allowHalf: boolean;
+    touchable: boolean;
+    onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
+}
+export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/cjs/packages/rate/rate.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Rate", {
+    enumerable: true,
+    get: function() {
+        return Rate;
+    }
+});
+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 _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 _iconsreacttaro = require("@nutui/icons-react-taro");
+var _taro = require("@tarojs/taro");
+var _components = require("@tarojs/components");
+var _typings = require("../../utils/typings");
+var _usepropsvalue = require("../../utils/use-props-value");
+var _getrectbytaro = require("../../utils/get-rect-by-taro");
+var _userefs = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-refs"));
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    count: 5,
+    min: 0,
+    checkedIcon: null,
+    uncheckedIcon: null,
+    disabled: false,
+    readOnly: false,
+    allowHalf: false,
+    touchable: false
+});
+var Rate = function Rate(props) {
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
+    var classPrefix = 'nut-rate';
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)([
+        1,
+        2,
+        3,
+        4,
+        5
+    ]), 2), countArray = _useState[0], setCountArray = _useState[1];
+    var _useRefs = (0, _sliced_to_array._)((0, _userefs.default)(), 2), refs = _useRefs[0], setRefs = _useRefs[1];
+    var rateRects = (0, _react.useRef)([]);
+    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: value,
+        defaultValue: Math.max(defaultValue || 0, min),
+        finalValue: 0,
+        onChange: onChange
+    }), 2), score = _usePropsValue[0], setScore = _usePropsValue[1];
+    (0, _react.useEffect)(function() {
+        var tmp = [];
+        for(var i = 1; i <= Number(count); i++){
+            tmp.push(i);
+        }
+        setCountArray(tmp);
+    }, [
+        count
+    ]);
+    var renderIcon = function renderIcon(n) {
+        return n <= score ? checkedIcon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.StarFill, null) : uncheckedIcon || (checkedIcon ? /*#__PURE__*/ _react.default.cloneElement(checkedIcon, {
+            color: undefined
+        }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.StarFill, null));
+    };
+    var onClick = function onClick(e, index) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled || readOnly) return;
+        var value = 0;
+        if (!(index === 1 && score === index)) {
+            value = index;
+        }
+        value = Math.max(value, min);
+        setScore(value);
+    };
+    var onHalfClick = function onHalfClick(event, n) {
+        event.preventDefault();
+        event.stopPropagation();
+        var value = Math.max(min, n - 0.5);
+        setScore(value);
+    };
+    var getScoreByPosition = function getScoreByPosition(x) {
+        var _rateRects_current;
+        if ((_rateRects_current = rateRects.current) === null || _rateRects_current === void 0 ? void 0 : _rateRects_current.length) {
+            for(var index = rateRects.current.length - 1; index >= 0; index--){
+                var item = rateRects.current[index];
+                if (item && x > item.left) {
+                    return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
+                }
+            }
+            return 0;
+        }
+    };
+    var updateRects = function updateRects() {
+        var _loop = function _loop(index) {
+            var item = refs[index];
+            if (item) {
+                (0, _getrectbytaro.getRectByTaro)(item).then(function(res) {
+                    rateRects.current[index] = res;
+                });
+            }
+        };
+        for(var index = 0; index < refs.length; index++)_loop(index);
+    };
+    (0, _taro.useReady)(function() {
+        updateRects();
+    });
+    var handleTouchStart = function handleTouchStart(e) {
+        if (!touchable || readOnly || disabled) {
+            return;
+        }
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+        e.stopPropagation();
+        updateRects();
+    };
+    var handleTouchMove = function handleTouchMove(e) {
+        if (!touchable || readOnly || disabled) {
+            return;
+        }
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+        e.stopPropagation();
+        var val = getScoreByPosition(e.touches[0].clientX);
+        if (val !== undefined) {
+            setScore(Math.max(min, val));
+        }
+    };
+    var handleTouchEnd = function handleTouchEnd(e) {
+        if (!touchable || readOnly || disabled) {
+            return;
+        }
+        if (e.cancelable) {
+            e.preventDefault();
+        }
+        e.stopPropagation();
+        var val = getScoreByPosition(e.changedTouches[0].clientX);
+        if (val !== undefined) {
+            setScore(Math.max(min, val));
+            onTouchEnd && onTouchEnd(e, Math.max(min, val));
+        }
+    };
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)(classPrefix, {
+            disabled: disabled,
+            readonly: readOnly
+        }, className),
+        catchMove: true,
+        style: style,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd
+    }, countArray.map(function(n, index) {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-item"),
+            key: n,
+            ref: setRefs(index),
+            onClick: function onClick1(event) {
+                return onClick(event, n);
+            }
+        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: (0, _classnames.default)("".concat(classPrefix, "-item-icon"), (0, _define_property._)({}, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score))
+        }, renderIcon(n)), allowHalf && score > n - 1 && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: (0, _classnames.default)("".concat(classPrefix, "-item-half"), "".concat(classPrefix, "-item-icon"), "".concat(classPrefix, "-item-icon-half")),
+            onClick: function onClick(event) {
+                return onHalfClick(event, n);
+            }
+        }, renderIcon(n)));
+    }));
+};
+Rate.displayName = 'NutRate';

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

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

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

@@ -0,0 +1,76 @@
+.nut-rate {
+  display: flex;
+  touch-action: pan-x;
+}
+.nut-rate.disabled .nut-rate-item-icon {
+  cursor: not-allowed;
+}
+.nut-rate.readonly .nut-rate-item-icon {
+  cursor: default;
+}
+.nut-rate-item {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  margin-right: var(--nutui-rate-item-margin, 14px);
+}
+.nut-rate-item:last-child {
+  margin-right: 0;
+}
+.nut-rate-item-half {
+  position: absolute;
+  height: 100%;
+  width: 50% !important;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.nut-rate-item-half .nut-icon {
+  flex-shrink: 0;
+}
+.nut-rate-item-icon {
+  display: flex;
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+  cursor: pointer;
+}
+.nut-rate-item-icon-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.nut-rate-item-icon.nut-rate-item-icon::before {
+  position: relative;
+  top: auto;
+  left: auto;
+  transform: none;
+}
+
+[dir=rtl] .nut-rate-item,
+.nut-rtl .nut-rate-item {
+  margin-right: 0;
+  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+[dir=rtl] .nut-rate-item:last-child,
+.nut-rtl .nut-rate-item:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item-half,
+.nut-rtl .nut-rate-item-half {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half,
+.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-rate-item-icon.nut-rate-item-icon::before,
+.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
+  left: auto;
+  right: auto;
+}

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

@@ -0,0 +1,80 @@
+.nut-rate {
+  display: flex;
+  touch-action: pan-x;
+}
+.nut-rate.disabled .nut-rate-item-icon {
+  cursor: not-allowed;
+}
+.nut-rate.readonly .nut-rate-item-icon {
+  cursor: default;
+}
+.nut-rate-item {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  margin-right: 14px;
+}
+.nut-rate-item:last-child {
+  margin-right: 0;
+}
+.nut-rate-item-half {
+  position: absolute;
+  height: 100%;
+  width: 50% !important;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.nut-rate-item-half .nut-icon {
+  flex-shrink: 0;
+}
+.nut-rate-item-icon {
+  display: flex;
+  color: #FF0F23;
+  cursor: pointer;
+}
+.nut-rate-item-icon-disabled {
+  color: #C2C4CC;
+}
+.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.nut-rate-item-icon.nut-rate-item-icon::before {
+  position: relative;
+  top: auto;
+  left: auto;
+  transform: none;
+}
+
+[dir=rtl] .nut-rate-item {
+  margin-right: 0;
+  margin-left: 14px;
+}
+
+.nut-rtl .nut-rate-item {
+  margin-right: 0;
+  margin-left: 14px;
+}
+[dir=rtl] .nut-rate-item:last-child,
+.nut-rtl .nut-rate-item:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item-half,
+.nut-rtl .nut-rate-item-half {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half,
+.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-rate-item-icon.nut-rate-item-icon::before,
+.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
+  left: auto;
+  right: auto;
+}

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

@@ -0,0 +1,4 @@
+import { ResultPage } from "./resultpage";
+export type { ResultPageProps, ResultPageAction } from "./resultpage";
+export type { ResultPageStatusOptions, ResultPageStatus } from './types';
+export default ResultPage;

package/dist/cjs/packages/resultpage/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 _resultpage = require("./resultpage");
+var _default = _resultpage.ResultPage;

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

@@ -0,0 +1,20 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { BasicComponent } from "../../utils/typings";
+import { ButtonFill, ButtonSize, ButtonType } from "../button/button";
+import { ResultPageStatus } from './types';
+export type ResultPageAction = {
+    text: React.ReactNode;
+    type?: ButtonType;
+    size?: ButtonSize;
+    fill?: ButtonFill;
+    disabled?: boolean;
+    onClick?: () => () => void;
+};
+export interface ResultPageProps extends BasicComponent {
+    title: ReactNode;
+    description: ReactNode;
+    icon: ReactNode;
+    status: ResultPageStatus;
+    actions: ResultPageAction[];
+}
+export declare const ResultPage: FunctionComponent<Partial<ResultPageProps> & React.HTMLAttributes<HTMLDivElement>>;