Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 10x 10x 105x 2x 103x 2x 101x 125x 10x 125x 125x 18x 107x 2x 105x 10x 10x | import React from 'react';
import PropTypes from 'prop-types';
import { control, typography, refType } from 'src/utils/styledHelpers';
import { removeSomeProps } from 'src/utils/componentHelpers';
import Cleave from 'cleave.js/react';
import CleavePhone from 'cleave.js/dist/addons/cleave-phone.us'; // eslint-disable-line no-unused-vars
import TextareaAutosize from 'react-textarea-autosize';
import { cleaveOption, isCleaveInput } from './utils';
const propsToTrim = [
'formStyle',
'labelText',
'plainText',
'validationError',
'currency',
'email',
'formatterOptions',
'inputRef',
'integer',
'maxRows',
'multiline',
'numeric',
'password',
'phone',
'plainText',
'postalCode',
...Object.keys(control.propTypes),
...Object.keys(typography.propTypes),
];
const getInputType = props => {
if (props.password) {
return 'password';
}
if (props.email) {
return 'email';
}
return 'text';
};
const getTabIndex = plainText => (plainText ? '-1' : '0');
export const TextInputComponent = props => {
const {
inputRef, maxRows, multiline, plainText, ...otherProps
} = props;
if (isCleaveInput(otherProps)) {
return (
<Cleave
autoComplete="no"
htmlRef={inputRef}
options={cleaveOption(otherProps)}
readOnly={plainText}
tabIndex={getTabIndex(plainText)}
{...removeSomeProps(otherProps, propsToTrim)}
/>
);
}
if (multiline) {
return (
<>
<div className="multiline-scroll-shield" />
<TextareaAutosize
inputRef={inputRef}
maxRows={maxRows}
readOnly={plainText}
tabIndex={getTabIndex(plainText)}
{...removeSomeProps(otherProps, propsToTrim)}
/>
</>
);
}
return (
<input
ref={inputRef}
readOnly={plainText}
tabIndex={getTabIndex(plainText)}
type={getInputType(otherProps)}
{...removeSomeProps(otherProps, propsToTrim)}
/>
);
};
TextInputComponent.propTypes = {
email: PropTypes.bool,
inputRef: refType,
maxRows: PropTypes.number,
multiline: PropTypes.bool,
password: PropTypes.bool,
plainText: PropTypes.bool,
};
TextInputComponent.defaultProps = {
email: false,
inputRef: () => {},
maxRows: 4,
multiline: false,
password: false,
plainText: false,
};
|