@douyinfe/semi-ui/lib/cjs/pincode/index.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/pincode/foundation"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/pincode/constants");
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _utils = require("../_utils");
var _input = _interopRequireDefault(require("../input"));
require("@douyinfe/semi-foundation/lib/cjs/pincode/pincode.css");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }
  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }
    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }
    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }
    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
class PinCode extends _baseComponent.default {
  constructor(props) {
    super(props);
    this.inputDOMList = [];
    this.focus = index => {
      const inputDOM = this.inputDOMList[index];
      inputDOM === null || inputDOM === void 0 ? void 0 : inputDOM.focus();
      inputDOM === null || inputDOM === void 0 ? void 0 : inputDOM.setSelectionRange(1, 1);
    };
    this.blur = index => {
      var _a;
      (_a = this.inputDOMList[index]) === null || _a === void 0 ? void 0 : _a.blur();
    };
    this.renderSingleInput = index => {
      return /*#__PURE__*/_react.default.createElement(_input.default, {
        ref: dom => this.inputDOMList[index] = dom,
        key: `input-${index}`,
        autoFocus: this.props.autoFocus && index === 0,
        inputMode: this.props.format === "number" ? "numeric" : "text",
        value: this.state.valueList[index],
        size: this.props.size,
        disabled: this.props.disabled,
        onBlur: () => this.foundation.handleCurrentActiveIndexChange(index, "blur"),
        onFocus: () => this.foundation.handleCurrentActiveIndexChange(index, "focus"),
        onPaste: e => this.foundation.handlePaste(e.nativeEvent, index),
        onKeyDown: e => {
          this.foundation.handleKeyDownOnSingleInput(e.nativeEvent, index);
        },
        onChange: (v, e) => {
          // 检查是否在输入法组合状态（中文输入法等）
          // 原生 InputEvent 有 isComposing 属性，表示是否处于组合输入中
          const nativeEvent = e.nativeEvent;
          if (nativeEvent && 'isComposing' in nativeEvent && nativeEvent.isComposing) {
            return;
          }
          const userInputChar = v[v.length - 1];
          if (this.foundation.validateValue(userInputChar)) {
            this.foundation.completeSingleInput(index, userInputChar);
          }
        }
      });
    };
    this.foundation = new _foundation.default(this.adapter);
    this.state = {
      valueList: (this.props.value || this.props.defaultValue) && (this.props.value || this.props.defaultValue).split("") || [],
      currentActiveIndex: 0
    };
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.value !== this.props.value) {
      this.foundation.updateValueList(this.props.value.split(""));
    }
  }
  get adapter() {
    return Object.assign(Object.assign({}, super.adapter), {
      onCurrentActiveIndexChange: i => __awaiter(this, void 0, void 0, function* () {
        yield this.setStateAsync({
          currentActiveIndex: i
        });
      }),
      notifyValueChange: values => {
        var _a, _b;
        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, values.join(""));
      },
      changeSpecificInputFocusState: (index, state) => {
        var _a, _b, _c, _d;
        if (state === "focus") {
          (_b = (_a = this.inputDOMList[index]) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
        } else if (state === "blur") {
          (_d = (_c = this.inputDOMList[index]) === null || _c === void 0 ? void 0 : _c.blur) === null || _d === void 0 ? void 0 : _d.call(_c);
        }
      },
      updateValueList: valueList => __awaiter(this, void 0, void 0, function* () {
        yield this.setStateAsync({
          valueList
        });
      })
    });
  }
  render() {
    const inputElements = [];
    for (let i = 0; i < this.props.count; i++) {
      inputElements.push(this.renderSingleInput(i));
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-wrapper`, this.props.className),
      style: this.props.style
    }, inputElements);
  }
}
PinCode.__SemiComponentName__ = "PinCode";
PinCode.propTypes = {
  value: _propTypes.default.string,
  format: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.func]),
  onChange: _propTypes.default.func,
  defaultValue: _propTypes.default.string,
  count: _propTypes.default.number,
  className: _propTypes.default.string,
  style: _propTypes.default.object,
  autoFocus: _propTypes.default.bool,
  onComplete: _propTypes.default.func
};
PinCode.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(PinCode.__SemiComponentName__, {
  count: 6,
  format: "number",
  autoFocus: true
});
var _default = exports.default = PinCode;