Merge branch 'master' into feature/translations

web/ASC.Web.Components/package.json

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

web/ASC.Web.Components/src/components/group-button/group-button.test.js

@@ -18,109 +18,187 @@ describe('<GroupButton />', () => {
 
   it('renders with child', () => {
     const wrapper = mount(
-    <GroupButton {...baseProps} isDropdown={true} >
-      <div key='demo' label='demo'>1</div>
-    </GroupButton>);
+      <GroupButton
+        {...baseProps}
+        isDropdown
+      >
+        <div
+          key='demo'
+          label='demo'
+        >
+          Test
+        </div>
+      </GroupButton>);
 
     expect(wrapper).toExist();
+    expect(wrapper.instance().props.isDropdown).toBe(true);
+  });
+
+  it('renders with child and open first item', () => {
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        isDropdown
+        opened
+      >
+        <div
+          key='demo'
+          label='demo'
+        >
+          Test
+        </div>
+      </GroupButton>);
+
+    expect(wrapper).toExist();
+    expect(wrapper.instance().props.isDropdown).toBe(true);
+    expect(wrapper.instance().props.opened).toBe(true);
   });
 
   it('applies disabled prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} disabled={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        disabled={true}
+      />);
 
     expect(wrapper.prop('disabled')).toEqual(true);
   });
 
   it('applies opened prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} opened={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        opened={true}
+      />);
 
     expect(wrapper.prop('opened')).toEqual(true);
     expect(wrapper.state('isOpen')).toEqual(true);
   });
 
   it('applies isDropdown prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} isDropdown={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        isDropdown={true}
+      />);
 
     expect(wrapper.prop('isDropdown')).toEqual(true);
   });
 
   it('applies activated prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} activated={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        activated={true}
+      />);
 
     expect(wrapper.prop('activated')).toEqual(true);
   });
 
   it('applies hovered prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} hovered={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        hovered={true}
+      />);
 
     expect(wrapper.prop('hovered')).toEqual(true);
   });
 
   it('applies isSeparator prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} isSeparator={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        isSeparator={true}
+      />);
 
     expect(wrapper.prop('isSeparator')).toEqual(true);
   });
 
   it('applies isSelect prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} isSelect={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        isSelect={true}
+      />);
 
     expect(wrapper.prop('isSelect')).toEqual(true);
   });
 
   it('applies checked prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} checked={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        checked={true}
+      />);
 
     expect(wrapper.prop('checked')).toEqual(true);
   });
 
   it('applies isIndeterminate prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} isIndeterminate={true} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        isIndeterminate={true}
+      />);
 
     expect(wrapper.prop('isIndeterminate')).toEqual(true);
   });
 
   it('applies dropDownMaxHeight prop', () => {
-    const wrapper = mount(<GroupButton {...baseProps} dropDownMaxHeight={100} />);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        dropDownMaxHeight={100}
+      />);
 
     expect(wrapper.prop('dropDownMaxHeight')).toEqual(100);
   });
 
-  it('componentDidUpdate() state lifecycle test', () => {
-    const wrapper = shallow(<GroupButton {...baseProps} />);
-    const instance = wrapper.instance();
 
-    wrapper.setState({ isOpen: true });
+  it('applies id', () => {
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        id="testId"
+      />
+    );
 
-    instance.componentDidUpdate(wrapper.props(), wrapper.state());
-
-    expect(wrapper.state()).toBe(wrapper.state());
+    expect(wrapper.prop('id')).toEqual('testId');
   });
 
-  it('componentDidUpdate() props lifecycle test', () => {
-    const wrapper = shallow(<GroupButton {...baseProps} />);
-    const instance = wrapper.instance();
+  it('applies className', () => {
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        className="test"
+      />
+    );
 
-    instance.componentDidUpdate({ opened: true }, wrapper.state());
-
-    expect(wrapper.props()).toBe(wrapper.props());
+    expect(wrapper.prop('className')).toEqual('test');
   });
 
-  it('componentWillUnmount() props lifecycle test', () => {
-    const wrapper = shallow(<GroupButton {...baseProps} />);
-    const instance = wrapper.instance();
+  it('applies style', () => {
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        style={{ color: 'red' }}
+      />
+    );
 
-    instance.componentWillUnmount();
-
-    expect(wrapper).toExist(false);
+    expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
   });
 
   it('causes function dropDownItemClick()', () => {
     const onClick = jest.fn();
-    const onSelect = jest.fn()
-    const child = (<div onClick={onClick}>1</div>);
+    const onSelect = jest.fn();
+    const child = (<div onClick={onClick}>test</div>);
     const wrapper = shallow(
-      <GroupButton {...baseProps} opened={true} onSelect={onSelect} >
+      <GroupButton
+        {...baseProps}
+        opened={true}
+        onSelect={onSelect}
+      >
         {child}
       </GroupButton>);
     const instance = wrapper.instance();
@@ -132,8 +210,15 @@ describe('<GroupButton />', () => {
   });
 
   it('causes function dropDownToggleClick()', () => {
+    const child = (<div>test</div>);
     const wrapper = shallow(
-      <GroupButton {...baseProps} opened={true} />);
+      <GroupButton
+        {...baseProps}
+        opened
+        isDropdown
+      >
+        {child}
+      </GroupButton>);
     const instance = wrapper.instance();
 
     instance.dropDownToggleClick();
@@ -141,47 +226,82 @@ describe('<GroupButton />', () => {
     expect(wrapper.state('isOpen')).toBe(false);
   });
 
-  it('causes function checkboxChange()', () => {
-    const wrapper = shallow(
-      <GroupButton {...baseProps} selected='demo' />);
+  it('causes function checkboxChange(e)', () => {
+    const child = (<div>test</div>);
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        opened
+        isSelect
+        isDropdown
+        onChange={onChange}
+        selected='test'
+      >
+        {child}
+      </GroupButton>);
     const instance = wrapper.instance();
+    const event = new Event('click', { target: { checked: true } });
 
-    instance.checkboxChange();
+    instance.checkboxChange(event);
 
-    expect(wrapper.state('selected')).toBe('demo');
+    /*  TODO: Way of normal simulation
+        wrapper.find('input[type="checkbox"]').simulate('change', {target:{checked:true}}) */
+
+    expect(onChange).toBeCalled();
+    expect(wrapper.state('selected')).toBe('test');
   });
 
-  it('causes function handleClick()', () => {
-    const wrapper = mount(<GroupButton {...baseProps} />);
+  it('causes function clickOutsideAction(e)', () => {
+    const child = (<div>test</div>);
+    const wrapper = mount(
+      <GroupButton
+        {...baseProps}
+        opened
+        isSelect
+        isDropdown
+        selected='test'
+      >
+        {child}
+      </GroupButton>);
     const instance = wrapper.instance();
+    const event = new Event('click', { target: {} });
 
-    instance.handleClick(new Event('click'));
+    instance.clickOutsideAction(event);
 
+    expect(wrapper.state('selected')).toBe('test');
     expect(wrapper.state('isOpen')).toBe(false);
   });
 
-  it('accepts id', () => {
+  it('calling componentDidUpdate()', () => {
+    const child = (<div>test</div>);
     const wrapper = mount(
-      <GroupButton {...baseProps}  id="testId" />
-    );
+      <GroupButton
+        {...baseProps}
+        opened
+        isSelect
+        isDropdown
+        selected='test'
+      >
+        {child}
+      </GroupButton>);
 
-    expect(wrapper.prop('id')).toEqual('testId');
-  });
+    expect(wrapper.state('selected')).toBe('test');
+    expect(wrapper.state('isOpen')).toBe(true);
 
-  it('accepts className', () => {
-    const wrapper = mount(
-      <GroupButton {...baseProps}  className="test" />
-    );
+    wrapper.setProps({
+      opened: false
+    });
 
-    expect(wrapper.prop('className')).toEqual('test');
-  });
+    expect(wrapper.state('selected')).toBe('test');
+    expect(wrapper.state('isOpen')).toBe(false);
 
-  it('accepts style', () => {
-    const wrapper = mount(
-      <GroupButton {...baseProps}  style={{ color: 'red' }} />
-    );
+    wrapper.setProps({
+      selected: 'new test'
+    });
 
-    expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
+    expect(wrapper.state('selected')).toBe('new test');
+    expect(wrapper.state('isOpen')).toBe(false);
   });
 
 });

web/ASC.Web.Components/src/components/group-button/index.js

@@ -5,9 +5,8 @@ import { Icons } from "../icons";
 import DropDown from "../drop-down";
 import DropDownItem from "../drop-down-item";
 import Checkbox from "../checkbox";
-import { handleAnyClick } from '../../utils/event';
 import { tablet } from '../../utils/device'
- 
+
 const textColor = "#333333",
   disabledTextColor = "#A3A9AE";
 
@@ -115,56 +114,64 @@ class GroupButton extends React.PureComponent {
       isOpen: props.opened,
       selected: props.selected
     };
-
-    if (props.opened)
-      handleAnyClick(true, this.handleClick);
   }
 
-  handleClick = (e) =>
-    this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
+  setIsOpen = isOpen => this.setState({ isOpen: isOpen });
 
-  stopAction = (e) => e.preventDefault();
+  setSelected = selected => this.setState({ selected: selected });
 
-  toggle = (isOpen) => this.setState({ isOpen: isOpen });
+  componentDidUpdate(prevProps) {
+    if (this.props.opened !== prevProps.opened) {
+      this.setIsOpen(this.props.opened);
+    }
 
-  checkboxChange = (e) => {
-    this.props.onChange && this.props.onChange(e.target.checked);
-    this.setState({ selected: this.props.selected });
+    if (this.props.selected !== prevProps.selected) {
+      this.setSelected(this.props.selected);
+    }
+  }
+
+  clickOutsideAction = e => {
+    this.state.isOpen && !this.ref.current.contains(e.target) && this.setIsOpen(false);
+  }
+
+  checkboxChange = e => {
+    this.props.onChange && this.props.onChange(e.target && e.target.checked);
+
+    this.setSelected(this.props.selected);
   };
 
-  dropDownItemClick = (child) => {
+  dropDownItemClick = child => {
     child.props.onClick && child.props.onClick();
     this.props.onSelect && this.props.onSelect(child);
-    this.setState({ selected: child.props.label });
-    this.toggle(!this.state.isOpen);
+    this.setSelected(child.props.label);
+    this.setIsOpen(!this.state.isOpen);
   };
 
-  dropDownToggleClick = (e) => {
-    this.props.disabled ? this.stopAction(e) : this.toggle(!this.state.isOpen);
+  dropDownToggleClick = () => {
+    this.setIsOpen(!this.state.isOpen);
   };
 
-  componentWillUnmount() {
-    handleAnyClick(false, this.handleClick);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.opened !== prevProps.opened) {
-      this.toggle(this.props.opened);
-    }
-
-    if (this.state.isOpen !== prevState.isOpen) {
-      handleAnyClick(this.state.isOpen, this.handleClick);
-    }
-  }
-
   render() {
     //console.log("GroupButton render");
-    const { label, isDropdown, disabled, isSeparator, isSelect, isIndeterminate, children, checked, dropDownMaxHeight, id, className, style } = this.props;
+    const {
+      checked,
+      children,
+      className,
+      disabled,
+      dropDownMaxHeight,
+      id,
+      isDropdown,
+      isIndeterminate,
+      isSelect,
+      isSeparator,
+      label,
+      style
+    } = this.props;
 
     const color = disabled ? disabledTextColor : textColor;
     const itemLabel = !isSelect ? label : this.state.selected;
     const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } : {};
-    const offsetSelectDropDown = isSelect ? { manualX : (window.innerWidth <= 1024) ? '16px' : '24px'} : {};
+    const offsetSelectDropDown = isSelect ? { manualX: (window.innerWidth <= 1024) ? '16px' : '24px' } : {};
 
     return (
       <StyledGroupButton ref={this.ref} id={id} className={className} style={style}>
@@ -197,8 +204,7 @@ class GroupButton extends React.PureComponent {
               {...offsetSelectDropDown}
               manualY='72px'
               open={this.state.isOpen}
-              clickOutsideAction={this.dropDownToggleClick}
-              withBackdrop={true}
+              clickOutsideAction={this.clickOutsideAction}
             >
               {React.Children.map(children, (child) =>
                 <DropDownItem
@@ -220,40 +226,40 @@ class GroupButton extends React.PureComponent {
 }
 
 GroupButton.propTypes = {
-  label: PropTypes.string,
-  disabled: PropTypes.bool,
   activated: PropTypes.bool,
-  opened: PropTypes.bool,
-  hovered: PropTypes.bool,
-  isDropdown: PropTypes.bool,
-  isSeparator: PropTypes.bool,
-  tabIndex: PropTypes.number,
-  onClick: PropTypes.func,
-  fontWeight: PropTypes.string,
-  onSelect: PropTypes.func,
-  isSelect: PropTypes.bool,
-  selected: PropTypes.string,
-  onChange: PropTypes.func,
-  isIndeterminate: PropTypes.bool,
-  children: PropTypes.any,
   checked: PropTypes.bool,
-  dropDownMaxHeight: PropTypes.number,
+  children: PropTypes.any,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
+  dropDownMaxHeight: PropTypes.number,
+  fontWeight: PropTypes.string,
+  hovered: PropTypes.bool,
   id: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+  isDropdown: PropTypes.bool,
+  isIndeterminate: PropTypes.bool,
+  isSelect: PropTypes.bool,
+  isSeparator: PropTypes.bool,
+  label: PropTypes.string,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  opened: PropTypes.bool,
+  selected: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  tabIndex: PropTypes.number
 };
 
 GroupButton.defaultProps = {
-  label: "Group button",
-  disabled: false,
   activated: false,
-  opened: false,
+  disabled: false,
+  fontWeight: "600",
   hovered: false,
   isDropdown: false,
+  isSelect: false,
   isSeparator: false,
-  tabIndex: -1,
-  fontWeight: "600",
-  isSelect: false
+  label: "Group button",
+  opened: false,
+  tabIndex: -1
 };
 
 export default GroupButton;

web/ASC.Web.Components/src/components/main-button/index.js

@@ -173,7 +173,6 @@ class MainButton extends React.PureComponent {
         {this.props.isDropdown ? (
           <StyledDropDown
             open={this.state.isOpen}
-            withBackdrop
             clickOutsideAction={this.handleClick}
             {...this.props}
             onClick={this.onDropDownClick}