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

package/dist/cjs/packages/shortpassword/shortpassword.js

@@ -0,0 +1,169 @@
+"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, {
+    InternalShortPassword: function() {
+        return InternalShortPassword;
+    },
+    ShortPassword: function() {
+        return ShortPassword;
+    }
+});
+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 _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
+var _index1 = require("../configprovider/index");
+var _typings = require("../../utils/typings");
+var _usepropsvalue = require("../../utils/use-props-value");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    value: '',
+    visible: false,
+    plain: false,
+    hideFooter: true,
+    length: 6,
+    autoFocus: false
+});
+var InternalShortPassword = function InternalShortPassword(props, ref) {
+    var locale = (0, _index1.useConfig)().locale;
+    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
+        "title",
+        "description",
+        "tips",
+        "visible",
+        "value",
+        "error",
+        "hideFooter",
+        "length",
+        "plain",
+        "style",
+        "className",
+        "closeable",
+        "autoFocus",
+        "onFocus",
+        "onChange",
+        "onConfirm",
+        "onTips",
+        "onCancel",
+        "onClose",
+        "onComplete",
+        "onOverlayClick",
+        "onCloseIconClick"
+    ]);
+    var classPrefix = 'nut-shortpassword';
+    var comLen = (0, _react.useMemo)(function() {
+        return Math.min(Math.max(4, length || 4), 6);
+    }, [
+        length
+    ]);
+    var format = function format(val) {
+        return val.slice(0, comLen);
+    };
+    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: outerVisible,
+        defaultValue: false,
+        finalValue: false
+    }), 2), visible = _usePropsValue[0], setVisible = _usePropsValue[1];
+    var handleClose = function handleClose() {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        setVisible(false);
+    };
+    var actions = {
+        open: function open() {
+            setVisible(true);
+        },
+        close: function close() {
+            setVisible(false);
+        }
+    };
+    (0, _react.useImperativeHandle)(ref, function() {
+        return actions;
+    });
+    var _usePropsValue1 = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: value,
+        onChange: onChange
+    }), 2), inputValue = _usePropsValue1[0], setInputValue = _usePropsValue1[1];
+    (0, _react.useEffect)(function() {
+        if (visible && autoFocus) {
+            onFocus && onFocus();
+        }
+    }, [
+        visible
+    ]);
+    (0, _react.useEffect)(function() {
+        var val = format(value);
+        if (val.length >= comLen) {
+            onComplete && onComplete(val);
+        }
+        setInputValue(format(value));
+    }, [
+        value
+    ]);
+    var sure = function sure() {
+        onConfirm && onConfirm(inputValue);
+    };
+    return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
+        style: {
+            padding: '32px 24px 28px 24px',
+            borderRadius: '12px',
+            textAlign: 'center'
+        },
+        visible: visible,
+        closeable: true,
+        onOverlayClick: onClose,
+        onCloseIconClick: onClose
+    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
+        className: (0, _classnames.default)(classPrefix, className),
+        style: style
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-title")
+    }, title || locale.shortpassword.title), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-description")
+    }, description || locale.shortpassword.description), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-input"),
+        onClick: onFocus
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-input-site")
+    }), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-input-fake")
+    }, (0, _to_consumable_array._)(new Array(comLen).keys()).map(function(item, index) {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-input-fake-li"),
+            key: index
+        }, inputValue.length > index && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, plain ? inputValue[index] : /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-input-fake-li-icon")
+        })));
+    }))), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-message")
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-message-error")
+    }, error), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-message-forget"),
+        onClick: onTips
+    }, tips || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Tips, {
+        size: 11
+    }), locale.shortpassword.tips))), !hideFooter && /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-footer")
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-footer-cancel"),
+        onClick: onCancel
+    }, locale.cancel), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-footer-sure"),
+        onClick: sure
+    }, locale.confirm))));
+};
+var ShortPassword = /*#__PURE__*/ _react.default.forwardRef(InternalShortPassword);

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

@@ -0,0 +1,2 @@
+import '../../popup/style';
+import './shortpassword.scss';

package/dist/cjs/packages/shortpassword/style/shortpassword.scss

@@ -0,0 +1,147 @@
+.nut-shortpassword {
+  &-title {
+    line-height: 1;
+    font-size: $font-size-large;
+    color: $color-title;
+  }
+
+  &-description {
+    margin-top: 12px;
+    margin-bottom: 24px;
+    line-height: 1;
+    font-size: $font-size-small;
+    color: $color-text;
+  }
+
+  &-input {
+    padding: 0 0 10px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    &-real {
+      position: absolute;
+      right: 0;
+      width: 247px;
+      height: 41px;
+      outline: 0 none;
+      border: 0;
+      text-decoration: none;
+      z-index: -99;
+    }
+
+    &-site {
+      width: 247px;
+      height: 41px;
+      border-radius: 4px;
+    }
+
+    &-fake {
+      top: 5%;
+      width: 100%;
+      height: 41px;
+      margin: 0 auto;
+      box-sizing: border-box;
+      background: $shortpassword-background-color;
+      border-radius: 4px;
+      border: 1px solid $shortpassword-border-color;
+      display: flex;
+      position: absolute;
+      left: 0;
+
+      &-li {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &-icon {
+          height: 6px;
+          width: 6px;
+          border-radius: 50%;
+          background: #000;
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  &-message {
+    margin-top: 9px;
+    display: flex;
+    justify-content: space-between;
+    width: 247px;
+
+    &-error {
+      line-height: 1;
+      font-size: $font-size-xs;
+      color: $shortpassword-error;
+    }
+
+    &-forget {
+      line-height: 1;
+      font-size: $font-size-small;
+      color: $shortpassword-forget;
+      display: flex;
+      align-items: center;
+
+      .nut-icon {
+        margin-right: 3px;
+      }
+    }
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+
+    &-cancel {
+      background: $white;
+      border: 1px solid $color-primary;
+      border-radius: 15px;
+      padding: 8px 38px;
+      line-height: 1;
+      font-size: $font-size-base;
+      color: $color-primary;
+    }
+
+    &-sure {
+      background: linear-gradient(
+        135deg,
+        $color-primary 0%,
+        $color-primary-stop-2 100%
+      );
+      border-radius: 15px;
+      padding: 8px 38px;
+      line-height: 1;
+      font-size: $font-size-base;
+      color: $color-primary-text;
+    }
+  }
+}
+
+[dir='rtl'] .nut-shortpassword,
+.nut-rtl .nut-shortpassword {
+  &-input {
+    &-real {
+      right: auto;
+      left: 0;
+    }
+
+    &-fake {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &-footer {
+    &-sure {
+      background: linear-gradient(
+        -135deg,
+        $color-primary 0%,
+        $color-primary-stop-2 100%
+      );
+    }
+  }
+}