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

web: Components: Added id, className and style property for TextInput component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 16:33:50 +03:00
parent 56d11ac758
commit a338375efd
3 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 |
| ---------------- | :------------: | :------: | :-----------------------------: | :-----: | ------------------------------------------------------------------------------------------------------ |
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
| `className` | `string` | - | - | - | Accepts class |
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning |
| `id` | `string` | - | - | - | Used as HTML `id` property |
| `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 |
| `mask` | `array` | - | - | - | input text mask |
| `name` | `string` | - | - | - | Used as HTML `name` property |
| `onBlur` | `func` | - | - | - | Called when field is blurred |
| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` |
| `onFocus` | `func` | - | - | - | Called when field is focused |
| `placeholder` | `string` | - | - | - | Placeholder text for the input |
| `scale` | `bool` | - | - | - | Indicates the input field has scale |
| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. |
| `value` | `string` | ✅ | - | - | Value of the input |
| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border |

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

@ -114,7 +114,10 @@ TextInput.propTypes = {
isReadOnly: PropTypes.bool,
hasError: PropTypes.bool,
hasWarning: PropTypes.bool,
autoComplete: PropTypes.string
autoComplete: PropTypes.string,
className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}
TextInput.defaultProps = {

24
web/ASC.Web.Components/src/components/text-input/text-input.test.js
View File

@ -33,4 +33,28 @@ describe('<TextInput />', () => {
expect(shouldUpdate).toBe(true);
});
it('accepts id', () => {
const wrapper = mount(
<TextInput value="text" onChange={event => alert(event.target.value)} id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<TextInput value="text" onChange={event => alert(event.target.value)}className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<TextInput value="text" onChange={event => alert(event.target.value)} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});