2021-02-03 11:43:38 +00:00
|
|
|
|
import React from "react";
|
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
import equal from "fast-deep-equal/react";
|
2021-02-25 21:19:45 +00:00
|
|
|
|
import Base from "../themes/base";
|
2021-02-03 11:43:38 +00:00
|
|
|
|
import StyledTextInput from "./styled-text-input";
|
|
|
|
|
|
|
|
|
|
class TextInput extends React.Component {
|
|
|
|
|
shouldComponentUpdate(nextProps) {
|
|
|
|
|
return !equal(this.props, nextProps);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
// console.log(`TextInput render id=${this.props.id}`);
|
|
|
|
|
|
|
|
|
|
return <StyledTextInput {...this.props} />;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
TextInput.propTypes = {
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Used as HTML `id` property */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
id: PropTypes.string,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Used as HTML `name` property */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
name: PropTypes.string,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Supported type of the input fields. */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
type: PropTypes.oneOf(["text", "password", "email"]),
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Value of the input */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
value: PropTypes.string.isRequired,
|
|
|
|
|
maxLength: PropTypes.number,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Placeholder text for the input */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
placeholder: PropTypes.string,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Used as HTML `tabindex` property */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
tabIndex: PropTypes.number,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** input text mask */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
|
|
|
|
|
keepCharPositions: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Supported size of the input fields. */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Indicates the input field has scale */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
scale: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Called with the new value. Required when input is not read only. Parent should pass it back as `value` */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
onChange: PropTypes.func,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Called when field is blurred */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
onBlur: PropTypes.func,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Called when field is focused */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
onFocus: PropTypes.func,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Focus the input field on initial render */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
isAutoFocussed: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
isDisabled: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Indicates that the field is displaying read-only content */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
isReadOnly: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Indicates the input field has an error */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
hasError: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Indicates the input field has a warning */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
hasWarning: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Used as HTML `autocomplete` property */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
autoComplete: PropTypes.string,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Accepts class */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
className: PropTypes.string,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Accepts css style */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Sets the font weight */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Sets font weight value to 600 */
|
2021-02-03 11:43:38 +00:00
|
|
|
|
isBold: PropTypes.bool,
|
2021-03-11 11:33:32 +00:00
|
|
|
|
/** Indicates that component contain border */
|
|
|
|
|
withBorder: PropTypes.bool,
|
2021-02-03 11:43:38 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
TextInput.defaultProps = {
|
|
|
|
|
type: "text",
|
|
|
|
|
value: "",
|
|
|
|
|
maxLength: 255,
|
|
|
|
|
size: "base",
|
|
|
|
|
scale: false,
|
|
|
|
|
tabIndex: -1,
|
|
|
|
|
hasError: false,
|
|
|
|
|
hasWarning: false,
|
|
|
|
|
autoComplete: "off",
|
|
|
|
|
withBorder: true,
|
|
|
|
|
keepCharPositions: false,
|
|
|
|
|
isBold: false,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default TextInput;
|