@nutui/nutui-react/dist/esm/ShortPassword.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useMemo, useImperativeHandle, useEffect } from "react";
import { Tips } from "@nutui/icons-react";
import classNames from "classnames";
import Popup__default from "./Popup.js";
import { useConfig } from "./ConfigProvider.js";
import { C as ComponentDefaults } from "./typings.js";
import { u as usePropsValue } from "./use-props-value.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: "", visible: false, plain: false, hideFooter: true, length: 6, autoFocus: false });
const InternalShortPassword = (props, ref) => {
  const { locale } = useConfig();
  const _a = Object.assign(Object.assign({}, defaultProps), props), { title, description, tips, visible: outerVisible, value, error, hideFooter, length, plain, style, className, closeable, autoFocus, onFocus, onChange, onConfirm, onTips, onCancel, onClose, onComplete, onOverlayClick, onCloseIconClick } = _a, rest = __rest(_a, ["title", "description", "tips", "visible", "value", "error", "hideFooter", "length", "plain", "style", "className", "closeable", "autoFocus", "onFocus", "onChange", "onConfirm", "onTips", "onCancel", "onClose", "onComplete", "onOverlayClick", "onCloseIconClick"]);
  const classPrefix = "nut-shortpassword";
  const comLen = useMemo(() => {
    return Math.min(Math.max(4, length || 4), 6);
  }, [length]);
  const format = (val) => {
    return val.slice(0, comLen);
  };
  const [visible, setVisible] = usePropsValue({
    value: outerVisible,
    defaultValue: false,
    finalValue: false
  });
  const handleClose = () => {
    onClose === null || onClose === void 0 ? void 0 : onClose();
    setVisible(false);
  };
  const actions = {
    open: () => {
      setVisible(true);
    },
    close: () => {
      setVisible(false);
    }
  };
  useImperativeHandle(ref, () => actions);
  const [inputValue, setInputValue] = usePropsValue({ value, onChange });
  useEffect(() => {
    if (visible && autoFocus) {
      onFocus && onFocus();
    }
  }, [visible]);
  useEffect(() => {
    const val = format(value);
    if (val.length >= comLen) {
      onComplete && onComplete(val);
    }
    setInputValue(format(value));
  }, [value]);
  const sure = () => {
    onConfirm && onConfirm(inputValue);
  };
  return React__default.createElement(
    Popup__default,
    Object.assign({ style: {
      padding: "32px 24px 28px 24px",
      borderRadius: "12px",
      textAlign: "center"
    }, visible, closeable: true, onOverlayClick: handleClose, onCloseIconClick: handleClose }, rest),
    React__default.createElement(
      "div",
      { className: classNames(classPrefix, className), style },
      React__default.createElement("div", { className: `${classPrefix}-title` }, title || locale.shortpassword.title),
      React__default.createElement("div", { className: `${classPrefix}-description` }, description || locale.shortpassword.description),
      React__default.createElement(
        "div",
        { className: `${classPrefix}-input`, onClick: onFocus },
        React__default.createElement("div", { className: `${classPrefix}-input-site` }),
        React__default.createElement("div", { className: `${classPrefix}-input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
          return React__default.createElement("div", { className: `${classPrefix}-input-fake-li`, key: index }, inputValue.length > index && React__default.createElement(React__default.Fragment, null, plain ? inputValue[index] : React__default.createElement("div", { className: `${classPrefix}-input-fake-li-icon` })));
        }))
      ),
      React__default.createElement(
        "div",
        { className: `${classPrefix}-message` },
        React__default.createElement("div", { className: `${classPrefix}-message-error` }, error),
        React__default.createElement("div", { className: `${classPrefix}-message-forget`, onClick: onTips }, tips || React__default.createElement(
          React__default.Fragment,
          null,
          React__default.createElement(Tips, { width: 11, height: 11 }),
          locale.shortpassword.tips
        ))
      ),
      !hideFooter && React__default.createElement(
        "div",
        { className: `${classPrefix}-footer` },
        React__default.createElement("div", { className: `${classPrefix}-footer-cancel`, onClick: onCancel }, locale.cancel),
        React__default.createElement("div", { className: `${classPrefix}-footer-sure`, onClick: sure }, locale.confirm)
      )
    )
  );
};
const ShortPassword = React__default.forwardRef(InternalShortPassword);
export {
  ShortPassword as default
};