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

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

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-26 16:08:26 +03:00
parent ff7f588d57
commit bbcfc701b6
3 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/ASC.Web.Components/src/components/calendar/README.md
View File

@ -25,14 +25,17 @@ import { Calendar } from "asc-web-components";
#### Properties
| Props | Type | Required | Values | Default | Description |
| -------------- | :------: | :------: | :-----------: | :-----------------------: | ------------------------------------------------------------ |
| `onChange` | `func` | - | - | - | Function called when the user select a day |
| `isDisabled` | `bool` | - | - | - | Disabled react-calendar |
| `themeColor` | `string` | - | - | `#ED7309` | Color of the selected day |
| `selectedDate` | `date` | - | - | `new Date()` | Selected date value |
| `openToDate` | `date` | - | - | `new Date()` | The beginning of a period that shall be displayed by default |
| `minDate` | `date` | - | - | `new Date("1970/01/01")` | Minimum date that the user can select. |
| `maxDate` | `date` | - | - | `new Date("3000/01/01")` | Maximum date that the user can select. |
| `locale` | `string` | - | - | `User's browser settings` | Browser locale |
| `size` | `oneOf` | - | `base`, `big` | `base` | Calendar size |
| Props | Type | Required | Values | Default | Description |
| -------------- | :------------: | :------: | :-----------: | :-----------------------: | ------------------------------------------------------------ |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isDisabled` | `bool` | - | - | - | Disabled react-calendar |
| `locale` | `string` | - | - | `User's browser settings` | Browser locale |
| `maxDate` | `date` | - | - | `new Date("3000/01/01")` | Maximum date that the user can select. |
| `minDate` | `date` | - | - | `new Date("1970/01/01")` | Minimum date that the user can select. |
| `onChange` | `func` | - | - | - | Function called when the user select a day |
| `openToDate` | `date` | - | - | `new Date()` | The beginning of a period that shall be displayed by default |
| `selectedDate` | `date` | - | - | `new Date()` | Selected date value |
| `size` | `oneOf` | - | `base`, `big` | `base` | Calendar size |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `themeColor` | `string` | - | - | `#ED7309` | Color of the selected day |

24
web/ASC.Web.Components/src/components/calendar/calendar.test.js
View File

@ -316,4 +316,28 @@ describe("Calendar tests:", () => {
expect(wrapper2.props).toBe(wrapper2.props);
expect(wrapper2.state).toBe(wrapper2.state);
});
it('accepts id', () => {
const wrapper = mount(
<Calendar {...baseCalendarProps} id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<Calendar {...baseCalendarProps} className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<Calendar {...baseCalendarProps} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});

9
web/ASC.Web.Components/src/components/calendar/index.js
View File

@ -592,7 +592,7 @@ class Calendar extends Component {
render() {
//console.log("Calendar render");
const { size, themeColor } = this.props;
const { size, themeColor, style, id, className } = this.props;
const {
optionsMonth,
selectedOptionMonth,
@ -608,7 +608,7 @@ class Calendar extends Component {
const dropDownSizeYear = optionsYear.length > 4 ? 184 : undefined;
return (
<CalendarContainer hasError={hasError} size={size}>
<CalendarContainer className={className} id={id} style={style} hasError={hasError} size={size}>
<CalendarStyle size={size} color={themeColor} isDisabled={isDisabled}>
<ComboBoxStyle>
<ComboBoxMonthStyle size={size}>
@ -658,7 +658,10 @@ Calendar.propTypes = {
maxDate: PropTypes.instanceOf(Date),
locale: PropTypes.string,
isDisabled: PropTypes.bool,
size: PropTypes.oneOf(["base", "big"])
size: PropTypes.oneOf(["base", "big"]),
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
Calendar.defaultProps = {