fix(dropdown_menu): Open as modal on mobile (#4295)

* fix(dropdown_menu): Open as modal on mobile

* fix(dropdown_menu): Open modal on touch

* fix(dropdown_menu): Show status

* fix(dropdown_menu): Max dimensions and reduce padding

* chore(dropdown_menu): Test new functionality

* refactor: Use DropdownMenuContainer instead of DropdownMenu

* feat(privacy_dropdown): Open as modal on touch devices

* feat(modal_root): Do not load actions-modal async

1 files changed, 42 insertions, 7 deletions

diff --git a/spec/javascript/components/dropdown_menu.test.js b/spec/javascript/components/dropdown_menu.test.js
index 54cdcabf0..a5af730ef 100644
--- a/spec/javascript/components/dropdown_menu.test.js
+++ b/spec/javascript/components/dropdown_menu.test.js
@@ -5,16 +5,24 @@ import React from 'react';
 import DropdownMenu from '../../../app/javascript/mastodon/components/dropdown_menu';
 import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
 
+const isTrue = () => true;
+
 describe('<DropdownMenu />', () => {
   const icon = 'my-icon';
   const size = 123;
-  const action = sinon.spy();
-
-  const items = [
-    { text: 'first item',  action: action, href: '/some/url' },
-    { text: 'second item', action: 'noop' },
-  ];
-  const wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />);
+  let items;
+  let wrapper;
+  let action;
+
+  beforeEach(() => {
+    action = sinon.spy();
+
+    items = [
+      { text: 'first item',  action: action, href: '/some/url' },
+      { text: 'second item', action: 'noop' },
+    ];
+    wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />);
+  });
 
   it('contains one <Dropdown />', () => {
     expect(wrapper).to.have.exactly(1).descendants(Dropdown);
@@ -28,6 +36,16 @@ describe('<DropdownMenu />', () => {
     expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownContent);
   });
 
+  it('does not contain a <DropdownContent /> if isUserTouching', () => {
+    const touchingWrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} isUserTouching={isTrue} />);
+    expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent);
+  });
+
+  it('does not contain a <DropdownContent /> if isUserTouching', () => {
+    const touchingWrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} isUserTouching={isTrue} />);
+    expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent);
+  });
+
   it('uses props.size for <DropdownTrigger /> style values', () => {
     ['font-size', 'width', 'line-height'].map((property) => {
       expect(wrapper.find(DropdownTrigger)).to.have.style(property, `${size}px`);
@@ -53,6 +71,23 @@ describe('<DropdownMenu />', () => {
     expect(wrapper.state('expanded')).to.be.equal(true);
   });
 
+  it('calls onModalOpen when clicking the trigger if isUserTouching', () => {
+    const onModalOpen = sinon.spy();
+    const touchingWrapper = mount(<DropdownMenu icon={icon} items={items} status={3.14} size={size} onModalOpen={onModalOpen} isUserTouching={isTrue} />);
+    touchingWrapper.find(DropdownTrigger).first().simulate('click');
+    expect(onModalOpen.calledOnce).to.be.equal(true);
+    expect(onModalOpen.args[0][0]).to.be.deep.equal({ status: 3.14, actions: items, onClick: touchingWrapper.node.handleClick });
+  });
+
+  it('calls onModalClose when clicking an action if isUserTouching and isModalOpen', () => {
+    const onModalOpen = sinon.spy();
+    const onModalClose = sinon.spy();
+    const touchingWrapper = mount(<DropdownMenu icon={icon} items={items} status={3.14} size={size} isModalOpen onModalOpen={onModalOpen} onModalClose={onModalClose} isUserTouching={isTrue} />);
+    touchingWrapper.find(DropdownTrigger).first().simulate('click');
+    touchingWrapper.node.handleClick({ currentTarget: { getAttribute: () => '0' }, preventDefault: () => null });
+    expect(onModalClose.calledOnce).to.be.equal(true);
+  });
+
   // Error: ReactWrapper::state() can only be called on the root
   /*it('sets expanded to false when clicking outside', () => {
     const wrapper = mount((