@douyinfe/semi-ui/lib/es/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.

var __awaiter = this && this.__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());
  });
};
import React from 'react';
import PropTypes from 'prop-types';
import cls from 'classnames';
import PinCodeFoundation from '@douyinfe/semi-foundation/lib/es/pincode/foundation';
import { cssClasses } from '@douyinfe/semi-foundation/lib/es/pincode/constants';
import BaseComponent from '../_base/baseComponent';
import { getDefaultPropsFromGlobalConfig } from '../_utils';
import Input from '../input';
import '@douyinfe/semi-foundation/lib/es/pincode/pincode.css';
class PinCode extends BaseComponent {
  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.createElement(Input, {
        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 => {
          const userInputChar = v[v.length - 1];
          if (this.foundation.validateValue(userInputChar)) {
            this.foundation.completeSingleInput(index, userInputChar);
          }
        }
      });
    };
    this.foundation = new PinCodeFoundation(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.createElement("div", {
      className: cls(`${cssClasses.PREFIX}-wrapper`, this.props.className),
      style: this.props.style
    }, inputElements);
  }
}
PinCode.__SemiComponentName__ = "PinCode";
PinCode.propTypes = {
  value: PropTypes.string,
  format: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
  onChange: PropTypes.func,
  defaultValue: PropTypes.string,
  count: PropTypes.number,
  className: PropTypes.string,
  style: PropTypes.object,
  autoFocus: PropTypes.bool,
  onComplete: PropTypes.func
};
PinCode.defaultProps = getDefaultPropsFromGlobalConfig(PinCode.__SemiComponentName__, {
  count: 6,
  format: "number",
  autoFocus: true
});
export default PinCode;