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 Textarea component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 16:42:55 +03:00
parent 52b8b25352
commit 0cc5b727c4
3 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/ASC.Web.Components/src/components/textarea/README.md
View File

@ -18,13 +18,14 @@ import { Textarea } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------- | :------: | :------: | :----: | :-----: | -------------------------------------------------------- |
| `value` | `string` | - | - | - | Value for Textarea |
| `placeholder` | `string` | - | - | - | Placeholder for Textarea |
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
| `id` | `string` | - | - | - | Used as HTML `id` property |
| `name` | `string` | - | - | - | Used as HTML `name` property |
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used |
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
| `className` | `string` | - | - | - | Class name |
| Props | Type | Required | Values | Default | Description |
| ------------- | :------------: | :------: | :----: | :-----: | -------------------------------------------------------- |
| `className` | `string` | - | - | - | Class name |
| `id` | `string` | - | - | - | Used as HTML `id` property |
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used |
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
| `name` | `string` | - | - | - | Used as HTML `name` property |
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
| `placeholder` | `string` | - | - | - | Placeholder for Textarea |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | - | - | - | Value for Textarea |

10
web/ASC.Web.Components/src/components/textarea/index.js
View File

@ -6,6 +6,7 @@ import commonInputStyle from '../text-input/common-input-styles';
import TextareaAutosize from 'react-autosize-textarea';
import { tablet } from "../../utils/device";
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearScrollbar = ({ isDisabled, ...props }) => <Scrollbar {...props} />
const StyledScrollbar = styled(ClearScrollbar)`
${commonInputStyle};
@ -24,6 +25,8 @@ const StyledScrollbar = styled(ClearScrollbar)`
}
`;
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearTextareaAutosize = ({ isDisabled, ...props }) => <TextareaAutosize {...props} />
const StyledTextarea = styled(ClearTextareaAutosize)`
${commonInputStyle};
@ -48,12 +51,12 @@ const StyledTextarea = styled(ClearTextareaAutosize)`
`;
class Textarea extends React.PureComponent {
render() {
console.log('Textarea render');
//console.log('Textarea render');
return (
<StyledScrollbar
className={this.props.className}
style={this.props.style}
stype='preMediumBlack'
isDisabled={this.props.isDisabled}
>
@ -84,7 +87,8 @@ Textarea.propTypes = {
placeholder: PropTypes.string,
tabIndex: PropTypes.number,
value: PropTypes.string,
className: PropTypes.string
className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}
Textarea.defaultProps = {

16
web/ASC.Web.Components/src/components/textarea/textarea.test.js
View File

@ -10,4 +10,20 @@ describe('<Textarea />', () => {
expect(wrapper).toExist();
});
it('accepts className', () => {
const wrapper = mount(
<Textarea placeholder="Add comment" onChange={event => alert(event.target.value)} value='value' className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<Textarea placeholder="Add comment" onChange={event => alert(event.target.value)} value='value' style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});