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

Merge branch 'master' of https://github.com/ONLYOFFICE/AppServer

Browse Source
This commit is contained in:
Daniil Senkiv 2020-01-30 16:30:23 +03:00
commit ae252a7ccf
3 changed files with 153 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ASC.Web.Components/package.json
View File

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

151
web/ASC.Web.Components/src/components/group-buttons-menu/group-buttons-menu.test.js
View File

@ -3,6 +3,19 @@ import { mount, shallow } from 'enzyme';
import GroupButtonsMenu from '.';
import DropDownItem from '../drop-down-item';
beforeEach(() => {
const div = document.createElement('div');
div.setAttribute('id', 'container');
document.body.appendChild(div);
});
afterEach(() => {
const div = document.getElementById('container');
if (div) {
document.body.removeChild(div);
}
});
const defaultMenuItems = [
{
label: 'Select',
@ -29,6 +42,13 @@ const defaultMenuItems = [
}
];
const getMenuItems = (count = 10) => new Array(count).fill(
{
label: 'test item',
disabled: false,
onClick: jest.fn()
});
const baseProps = {
checked: false,
menuItems: defaultMenuItems,
@ -87,9 +107,11 @@ describe('<GroupButtonsMenu />', () => {
const wrapper = mount(<GroupButtonsMenu {...baseProps} />);
const instance = wrapper.instance();
instance.countMenuItems(null, 2, 1);
instance.countMenuItems([], 2, 1);
instance.countMenuItems([1, 2], 200, 2);
instance.countMenuItems([1,2,3,4], 1, 2);
instance.countMenuItems([1, 2, 3, 4, 5], 10, 100);
instance.countMenuItems([1, 2, 3, 4], 1, 2);
expect(wrapper.state('visible')).toBe(true);
});
@ -114,7 +136,7 @@ describe('<GroupButtonsMenu />', () => {
const wrapper = shallow(<GroupButtonsMenu {...baseProps} visible={false} />);
const instance = wrapper.instance();
instance.componentDidUpdate({ visible: true, menuItems: defaultMenuItems }, wrapper.state());
instance.componentDidUpdate({ visible: true, menuItems: getMenuItems(3) }, wrapper.state());
expect(wrapper.props()).toBe(wrapper.props());
});
@ -142,4 +164,129 @@ describe('<GroupButtonsMenu />', () => {
expect(wrapper).toExist(false);
});
it('render with 100% width', () => {
const wrapper = mount(
<div style={{ width: '100%' }}>
<GroupButtonsMenu {...baseProps} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('100%');
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(2);
});
it('render with 1024px width and 3 items', () => {
const wrapper = mount(
<div style={{ width: '1024px' }}>
<GroupButtonsMenu {...baseProps} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('1024px');
expect(menuNode.props.menuItems.length).toEqual(3);
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(2);
})
it('render with 1024px width and 10 items', () => {
const wrapper = mount(
<div style={{ width: '1024px' }}>
<GroupButtonsMenu {...baseProps} menuItems={getMenuItems(10)} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('1024px');
expect(menuNode.props.menuItems.length).toEqual(10);
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(9);
})
it('render with 1024px width and 100 items', () => {
const wrapper = mount(
<div style={{ width: '1024px' }}>
<GroupButtonsMenu {...baseProps} menuItems={getMenuItems(100)} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('1024px');
expect(menuNode.props.menuItems.length).toEqual(100);
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(99);
})
it('render with 500px width and 3 items', () => {
const wrapper = mount(
<div style={{ width: '500px' }}>
<GroupButtonsMenu {...baseProps} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('500px');
expect(menuNode.props.menuItems.length).toEqual(3);
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(2);
})
it('render with 500px width and 10 items', () => {
const wrapper = mount(
<div style={{ width: '500px' }}>
<GroupButtonsMenu {...baseProps} menuItems={getMenuItems(10)} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('500px');
expect(menuNode.props.menuItems.length).toEqual(10);
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(9);
})
it('render with 500px width and 100 items', () => {
const wrapper = mount(
<div style={{ width: '500px' }}>
<GroupButtonsMenu {...baseProps} menuItems={getMenuItems(100)} />
</div>, { attachTo: document.getElementById('container') });
const menuNodeStyle = wrapper.get(0).props.style;
const menuNode = wrapper.find(GroupButtonsMenu).instance();
const moreItemsCount = menuNode.state.moreItems.length;
const priorityItemsCount = menuNode.state.priorityItems.length;
expect(menuNodeStyle.width).toEqual('500px');
expect(menuNode.props.menuItems.length).toEqual(100);
expect(priorityItemsCount).toEqual(1);
expect(moreItemsCount).toEqual(99);
})
});

7
web/ASC.Web.Components/src/components/group-buttons-menu/index.js
View File

@ -117,14 +117,13 @@ class GroupButtonsMenu extends React.PureComponent {
countMenuItems = (array, outerWidth, moreWidth) => {
const itemsArray = array || []
const moreButton = moreWidth || 0;
let total = (moreButton + 80);
let total = (moreWidth || 0) + 80;
for (let i = 0, len = itemsArray.length; i < len; i++) {
if (total + array[i] > outerWidth) {
if (total + itemsArray[i] > outerWidth) {
return i < 1 ? 1 : i;
} else {
total += array[i];
total += itemsArray[i];
}
}
};