Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",

web/ASC.Web.Components/src/components/calendar-new/README.md

@@ -20,7 +20,6 @@ import { NewCalendar } from "asc-web-components";
   minDate={new Date("1970/01/01")}
   maxDate={new Date("3000/01/01")}
   locale="ru"
-  scaled={false}
 />;
 ```
 
@@ -36,4 +35,4 @@ import { NewCalendar } from "asc-web-components";
 | `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                                               |
-| `scaled`       | `bool`   |    -     |        |                          | Selected calendar size                                       |
+

web/ASC.Web.Components/src/components/calendar-new/calendar.test.js

@@ -1,25 +1,153 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import NewCalendar from '.';
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { Weekdays, Days, Day } from "./sub-components/";
+import NewCalendar from "./";
 
-describe('<NewCalendar />', () => {
-  it('renders without error', () => {
-    const wrapper = mount(
-      <NewCalendar
-          onChange={date => {
-          console.log('Selected date:', date);
-          }}
-          disabled={false}
-          themeColor='#ED7309'
-          selectedDate={new Date()}
-          openToDate={new Date()}
-          minDate={new Date("1970/01/01")}
-          maxDate={new Date("3000/01/01")}
-          locale='ru'
-          scaled={false}
-      />
-    );
+const baseCalendarProps = {
+  isDisabled: false,
+  themeColor: "#ED7309",
+  selectedDate: new Date(),
+  openToDate: new Date(),
+  minDate: new Date("1970/01/01"),
+  maxDate: new Date("3000/01/01"),
+  locale: "en",
+  onChange: () => jest.fn()
+};
 
+const baseWeekdaysProps = {
+  optionsWeekdays: [
+    { key: "en_0", value: "Mo", color: "" },
+    { key: "en_1", value: "Tu", color: "" },
+    { key: "en_2", value: "We", color: "" },
+    { key: "en_3", value: "Th", color: "" },
+    { key: "en_4", value: "Fr", color: "" },
+    { key: "en_5", value: "Sa", color: "#A3A9AE" },
+    { key: "en_6", value: "Su", color: "#A3A9AE" }
+  ],
+  size: "base"
+};
+
+const baseDaysProps = {
+  optionsDays: [
+    {
+      className: "calendar-month_neighboringMonth",
+      dayState: "prev",
+      disableClass: null,
+      value: 25
+    },
+    {
+      className: "calendar-month_neighboringMonth",
+      dayState: "prev",
+      disableClass: null,
+      value: 26
+    }
+  ],
+  onDayClick: jest.fn,
+  size: "base"
+};
+
+const baseDayProps = {
+  day: {
+    className: "calendar-month_neighboringMonth",
+    dayState: "prev",
+    disableClass: null,
+    value: 26
+  },
+
+  onDayClick: jest.fn,
+  size: "base"
+};
+
+describe("Weekdays tests:", () => {
+  it("Weekdays renders without error", () => {
+    const wrapper = mount(<Weekdays {...baseWeekdaysProps} />);
     expect(wrapper).toExist();
   });
+
+  it("Weekdays not re-render test", () => {
+    const wrapper = shallow(<Weekdays {...baseWeekdaysProps} />).instance();
+    const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
+    expect(shouldUpdate).toBe(false);
+  });
+
+  it("Weekdays property size passed", () => {
+    const wrapper = mount(<Weekdays {...baseWeekdaysProps} size={"big"} />);
+    expect(wrapper.prop("size")).toEqual("big");
+  });
+});
+
+describe("Days tests:", () => {
+  it("Days renders without error", () => {
+    const wrapper = mount(<Days {...baseDaysProps} />);
+    expect(wrapper).toExist();
+  });
+
+  it("Days not re-render test", () => {
+    const wrapper = shallow(<Days {...baseDaysProps} />).instance();
+    const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
+    expect(shouldUpdate).toBe(false);
+  });
+
+  it("Days property size passed", () => {
+    const wrapper = mount(<Days {...baseDaysProps} size={"big"} />);
+    expect(wrapper.prop("size")).toEqual("big");
+  });
+  /*
+  it("Days click event", () => {
+    const mockCallBack = jest.fn();
+
+    const button = shallow(<Days {...baseDaysProps} />);
+    button.find("DayContent").simulate("click");
+    expect(mockCallBack.mock.calls.length).toEqual(1);
+  });
+*/
+});
+
+describe("Day tests:", () => {
+  it("Day renders without error", () => {
+    const wrapper = mount(<Day {...baseDayProps} />);
+    expect(wrapper).toExist();
+  });
+
+  it("Day not re-render test", () => {
+    const wrapper = shallow(<Day {...baseDayProps} />).instance();
+    const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
+    expect(shouldUpdate).toBe(false);
+  });
+
+  it("Day property size passed", () => {
+    const wrapper = mount(<Day {...baseDayProps} size={"big"} />);
+    expect(wrapper.prop("size")).toEqual("big");
+  });
+});
+
+describe("Calendar tests:", () => {
+  it("Calendar renders without error", () => {
+    const wrapper = mount(<NewCalendar {...baseCalendarProps} />);
+    expect(wrapper).toExist();
+  });
+
+  /*
+  it("Calendar has rendered content.", () => {
+    const wrapper = mount(<NewCalendar {...baseCalendarProps} />);
+    //expect(wrapper.find('span')).toExist();
+    expect(wrapper.find("ul")).not.toExist();
+  });
+*/
+
+  it("Calendar not re-render test", () => {
+    const wrapper = shallow(<NewCalendar {...baseCalendarProps} />).instance();
+    const shouldUpdate = wrapper.shouldComponentUpdate(
+      wrapper.props,
+      wrapper.state
+    );
+    expect(shouldUpdate).toBe(false);
+  });
+
+  it("Calendar disabled when isDisabled is passed", () => {
+    const wrapper = mount(
+      <NewCalendar {...baseCalendarProps} isDisabled={true} />
+    );
+    expect(wrapper.prop("isDisabled")).toEqual(true);
+  });
 });

web/ASC.Web.Components/src/components/calendar-new/index.js

@@ -603,15 +603,16 @@ class Calendar extends Component {
       isDisabled
     } = this.props;
 
-    const { hasError } = this.state;
+    const { hasError, optionsDays } = this.state;
 
     if (
       this.compareDates(selectedDate, nextProps.selectedDate) === 0 &&
       this.compareDates(openToDate, nextProps.openToDate) === 0 &&
       this.compareDates(minDate, nextProps.minDate) === 0 &&
       this.compareDates(maxDate, nextProps.maxDate) === 0 &&
-      isDisabled !== nextProps.isDisabled &&
-      hasError !== nextState.hasError
+      isDisabled === nextProps.isDisabled &&
+      hasError === nextState.hasError &&
+      optionsDays === nextState.optionsDays
     ) {
       return false;
     }

web/ASC.Web.Components/src/components/textarea/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import commonInputStyle from '../text-input/common-input-styles';
 import TextareaAutosize from 'react-autosize-textarea';
 
-const ClearScrollbar = ({isDisabled, ...props}) => <Scrollbar {...props} />
+const ClearScrollbar = ({ isDisabled, ...props }) => <Scrollbar {...props} />
 const StyledScrollbar = styled(ClearScrollbar)`
   ${commonInputStyle};
     :focus-within {
@@ -23,7 +23,7 @@ const StyledScrollbar = styled(ClearScrollbar)`
 }
 
 `;
-const ClearTextareaAutosize = ({isDisabled, ...props}) => <TextareaAutosize {...props} />
+const ClearTextareaAutosize = ({ isDisabled, ...props }) => <TextareaAutosize {...props} />
 const StyledTextarea = styled(ClearTextareaAutosize)`
   ${commonInputStyle};
   width: 100%;
@@ -52,6 +52,7 @@ class Textarea extends React.PureComponent {
     // console.log('Textarea render');
     return (
       <StyledScrollbar
+        className={this.props.className}
         stype='preMediumBlack'
         isDisabled={this.props.isDisabled}
       >
@@ -81,7 +82,8 @@ Textarea.propTypes = {
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
   tabIndex: PropTypes.number,
-  value: PropTypes.string
+  value: PropTypes.string,
+  className: PropTypes.string
 }
 
 Textarea.defaultProps = {
@@ -90,6 +92,7 @@ Textarea.defaultProps = {
   placeholder: '',
   value: '',
   tabIndex: -1,
+  className: ''
 }
 
 export default Textarea;