Web: Components: added error message to text-input
This commit is contained in:
parent
2edce0c75b
commit
9266c7968e
@ -22,23 +22,25 @@ const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------------- | :------: | :------: | :-----------------------------: | :-----: | ------------------------------------------------------------------------------------------------------ |
|
||||
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
||||
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
||||
| `value` | `string` | ✅ | - | - | Value of the input |
|
||||
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
|
||||
| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` |
|
||||
| `onBlur` | `func` | - | - | - | Called when field is blurred |
|
||||
| `onFocus` | `func` | - | - | - | Called when field is focused |
|
||||
| `isAutoFocussed` | `bool` | - | - | - | Focus the input field on initial render |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
||||
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
|
||||
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
||||
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
||||
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
|
||||
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
||||
| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border |
|
||||
| `mask` | `array` | - | - | - | input text mask |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------------- | :------: | :------: | :-----------------------------: | :-------: | ------------------------------------------------------------------------------------------------------ |
|
||||
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
||||
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
||||
| `value` | `string` | ✅ | - | - | Value of the input |
|
||||
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
|
||||
| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` |
|
||||
| `onBlur` | `func` | - | - | - | Called when field is blurred |
|
||||
| `onFocus` | `func` | - | - | - | Called when field is focused |
|
||||
| `isAutoFocussed` | `bool` | - | - | - | Focus the input field on initial render |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
||||
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
|
||||
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
|
||||
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
|
||||
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
|
||||
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
|
||||
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
|
||||
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
|
||||
| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border |
|
||||
| `mask` | `array` | - | - | - | input text mask |
|
||||
| `errorMessage` | `string` | - | - | - | Error message text |
|
||||
| `errorColor` | `string` | - | - | "#C96C27" | Error text color |
|
||||
|
@ -4,6 +4,7 @@ import styled from 'styled-components';
|
||||
import commonInputStyle from '../text-input/common-input-styles';
|
||||
import MaskedInput from 'react-text-mask'
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { Text } from "../text";
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable react/prop-types */
|
||||
@ -80,6 +81,18 @@ const StyledInput = styled(Input).attrs((props) => ({
|
||||
${props => !props.withBorder && `border: none;`}
|
||||
`;
|
||||
|
||||
const ErrorLabel = styled.label`
|
||||
word-wrap: break-word;
|
||||
font-size: 10px;
|
||||
max-width: ${props =>
|
||||
(props.scale && '100%') ||
|
||||
(props.size === 'base' && '173px') ||
|
||||
(props.size === 'middle' && '300px') ||
|
||||
(props.size === 'big' && '350px') ||
|
||||
(props.size === 'huge' && '500px')
|
||||
};
|
||||
`;
|
||||
|
||||
class TextInput extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !isEqual(this.props, nextProps);
|
||||
@ -87,7 +100,19 @@ class TextInput extends React.Component {
|
||||
|
||||
render() {
|
||||
// console.log(`TextInput render id=${this.props.id}`);
|
||||
return (<StyledInput {...this.props} />);
|
||||
const {scale, size, errorMessage, errorColor} = this.props;
|
||||
return (
|
||||
<>
|
||||
<StyledInput {...this.props} />
|
||||
<Text.Body fontSize={10} color={errorColor}>
|
||||
<ErrorLabel
|
||||
scale={scale}
|
||||
size={size}
|
||||
>
|
||||
{errorMessage}
|
||||
</ErrorLabel>
|
||||
</Text.Body>
|
||||
</>);
|
||||
}
|
||||
}
|
||||
|
||||
@ -114,7 +139,9 @@ TextInput.propTypes = {
|
||||
isReadOnly: PropTypes.bool,
|
||||
hasError: PropTypes.bool,
|
||||
hasWarning: PropTypes.bool,
|
||||
autoComplete: PropTypes.string
|
||||
autoComplete: PropTypes.string,
|
||||
errorMessage: PropTypes.string,
|
||||
errorColor: PropTypes.string
|
||||
}
|
||||
|
||||
TextInput.defaultProps = {
|
||||
@ -128,7 +155,8 @@ TextInput.defaultProps = {
|
||||
hasWarning: false,
|
||||
autoComplete: 'off',
|
||||
withBorder: true,
|
||||
keepCharPositions: false
|
||||
keepCharPositions: false,
|
||||
errorColor: "#C96C27"
|
||||
}
|
||||
|
||||
export default TextInput
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { StringValue } from 'react-values';
|
||||
import { withKnobs, boolean, text, select, number } from '@storybook/addon-knobs/react';
|
||||
import { withKnobs, boolean, text, select, number, color } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import TextInput from '.';
|
||||
@ -42,6 +42,8 @@ storiesOf('Components|Input', module)
|
||||
withBorder={boolean('withBorder', true)}
|
||||
mask={text("mask", null)}
|
||||
value={value}
|
||||
errorMessage={text("errorMessage", "Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit")}
|
||||
errorColor={color('errorColor', "#C96C27")}
|
||||
onChange={e => {
|
||||
set(e.target.value);
|
||||
}}
|
||||
|
Loading…
Reference in New Issue
Block a user