IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: added error message to text-input

Browse Source
This commit is contained in:
Nikita Gopienko 2019-11-25 16:06:40 +03:00
parent 2edce0c75b
commit 9266c7968e
3 changed files with 56 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/ASC.Web.Components/src/components/text-input/README.md
View File

@ -23,7 +23,7 @@ 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 |
@ -42,3 +42,5 @@ const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
| `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 |

34
web/ASC.Web.Components/src/components/text-input/index.js
View File

@ -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

4
web/ASC.Web.Components/src/components/text-input/text-input.stories.js
View File

@ -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);
}}