baseui
Version:
A React Component library implementing the Base design language
148 lines (146 loc) • 6.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactMultiRef = _interopRequireDefault(require("react-multi-ref"));
var _defaultProps = _interopRequireDefault(require("./default-props"));
var _styledComponents = require("./styled-components");
var _overrides = require("../helpers/overrides");
var _input = require("../input");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
class PinCode extends _react.default.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "_inputRefs", new _reactMultiRef.default());
_defineProperty(this, "state", {
hasFocus: false
});
}
componentDidMount() {
if (this.props.autoFocus) {
const inputRef = this._inputRefs.map.get(0);
if (inputRef && inputRef.focus) inputRef.focus();
}
}
getMaskStyle(i) {
if (this.props.values[i] !== '' && typeof this.props.mask === 'string') {
return this.props.mask;
} else {
return this.props.values[i];
}
}
render() {
const [Root, rootProps] = (0, _overrides.getOverrides)(this.props.overrides.Root, _styledComponents.StyledRoot);
const [Input, inputProps] = (0, _overrides.getOverrides)(this.props.overrides.Input, _input.Input);
const baseOverrides = {
Root: {
component: _styledComponents.StyledInputOverrideRoot
},
Input: {
component: _styledComponents.StyledInputOverrideInput,
props: {
type: typeof this.props.mask === 'boolean' && this.props.mask ? 'password' : 'text'
}
}
};
inputProps.overrides = (0, _overrides.mergeOverrides)(baseOverrides, inputProps.overrides);
return /*#__PURE__*/_react.default.createElement(Root, _extends({
"data-baseweb": "pin-code"
}, rootProps), this.props.values.map((v, i) => {
return /*#__PURE__*/_react.default.createElement(Input, _extends({
"aria-label": this.props['aria-label'],
"aria-labelledby": this.props['aria-labelledby'],
"aria-describedby": this.props['aria-describedby'],
autoComplete: this.props.autoComplete,
disabled: this.props.disabled,
error: this.props.error,
id: this.props.id ? this.props.id + '-' + i : null,
inputMode: "numeric",
inputRef: this._inputRefs.ref(i),
key: i,
name: this.props.name,
onBlur: () => this.setState({
hasFocus: false
}),
onFocus: () => this.setState({
hasFocus: true
})
// @ts-ignore
,
onChange: event => {
const eventValue = event.target.value;
// in the case of an autocomplete or copy and paste
if (eventValue.length > 2) {
// see if we can use the string to fill out our values
if (eventValue.length === this.props.values.length && eventValue.match(/^[0-9]+$/)) {
this.props.onChange({
values: eventValue.split(''),
event
});
}
return;
}
// digit was deleted
if (eventValue === '') {
const newValues = this.props.values.slice();
newValues[i] = '';
this.props.onChange({
values: newValues,
event
});
return;
}
// we want to override the input value with the last digit typed
const currentValue = this.props.values[i];
let newValue = eventValue;
if (currentValue[0] === eventValue[0]) {
newValue = eventValue[1];
} else if (currentValue[0] === eventValue[1]) {
newValue = eventValue[0];
}
// only fire a change event if the new value is a digit
if (newValue.match(/^[0-9]$/)) {
const newValues = this.props.values.slice();
newValues[i] = newValue;
this.props.onChange({
values: newValues,
event
});
// tab to next pin code input if we aren't at end already
if (this.props.manageFocus && i < this.props.values.length - 1) {
const inputRef = this._inputRefs.map.get(i + 1);
if (inputRef && inputRef.focus) inputRef.focus();
}
}
}
// @ts-ignore
,
onKeyDown: event => {
// if we see a backspace/delete and the input is empty, transfer focus backward
if (this.props.manageFocus && event.key === 'Backspace' && this.props.values[i] === '' && i > 0) {
const inputRef = this._inputRefs.map.get(i - 1);
if (inputRef && inputRef.focus) inputRef.focus();
}
},
pattern: "\\d*",
placeholder: this.state.hasFocus ? '' : this.props.placeholder,
positive: this.props.positive,
required: this.props.required,
size: this.props.size,
value: this.getMaskStyle(i)
}, inputProps));
}));
}
}
exports.default = PinCode;
_defineProperty(PinCode, "defaultProps", _defaultProps.default);