From fab58673abf953f6c340b64feeb54cff004f2d19 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 9 Mar 2022 10:28:36 +0300 Subject: [PATCH 1/5] Web:Components: remove new-context-menu and menu-item from components --- .../asc-web-components/menu-item/README.md | 37 -- .../asc-web-components/menu-item/index.js | 167 ------ .../menu-item/menu-item.stories.js | 70 --- .../menu-item/menu-item.test.js | 76 --- .../menu-item/styled-menu-item.js | 168 ------ .../svg/folder-arrow.mobile.react.svg | 3 - .../menu-item/svg/folder-arrow.react.svg | 3 - .../new-context-menu/README.md | 35 -- .../new-context-menu/index.js | 494 ------------------ .../new-context-menu.stories.js | 179 ------- .../new-context-menu/new-context-menu.test.js | 11 - .../styled-new-context-menu.js | 59 --- 12 files changed, 1302 deletions(-) delete mode 100644 packages/asc-web-components/menu-item/README.md delete mode 100644 packages/asc-web-components/menu-item/index.js delete mode 100644 packages/asc-web-components/menu-item/menu-item.stories.js delete mode 100644 packages/asc-web-components/menu-item/menu-item.test.js delete mode 100644 packages/asc-web-components/menu-item/styled-menu-item.js delete mode 100644 packages/asc-web-components/menu-item/svg/folder-arrow.mobile.react.svg delete mode 100644 packages/asc-web-components/menu-item/svg/folder-arrow.react.svg delete mode 100644 packages/asc-web-components/new-context-menu/README.md delete mode 100644 packages/asc-web-components/new-context-menu/index.js delete mode 100644 packages/asc-web-components/new-context-menu/new-context-menu.stories.js delete mode 100644 packages/asc-web-components/new-context-menu/new-context-menu.test.js delete mode 100644 packages/asc-web-components/new-context-menu/styled-new-context-menu.js diff --git a/packages/asc-web-components/menu-item/README.md b/packages/asc-web-components/menu-item/README.md deleted file mode 100644 index f2f4f7af59..0000000000 --- a/packages/asc-web-components/menu-item/README.md +++ /dev/null @@ -1,37 +0,0 @@ -# DropDownItem - -Is a item of DropDown or ContextMenu component - -### Usage - -```js -import MenuItem from "@appserver/components/menu-item"; -``` - -```jsx - console.log("Button 1 clicked")} -/> -``` - -An item can act as separator, header, line, line with arrow or container. - -When used as container, it will retain all styling features and positioning. To disable hover effects in container mode, you can use _noHover_ property.` - -### Properties - -| Props | Type | Required | Values | Default | Description | -| ------------- | :------------: | :------: | :----: | :-------------: | ---------------------------------------------------------- | -| `className` | `string` | - | - | - | Accepts class | -| `id` | `string` | - | - | - | Accepts id | -| `icon` | `string` | - | - | - | Dropdown item icon | -| `label` | `string` | - | - | `Dropdown item` | Dropdown item text | -| `isHeader` | `bool` | - | - | `false` | Tells when the dropdown item should display like header | -| `isSeparator` | `bool` | - | - | `false` | Tells when the dropdown item should display like separator | -| `noHover` | `bool` | - | - | `false` | Disable default style hover effect | -| `onClick` | `func` | - | - | - | What the dropdown item will trigger when clicked | -| `style` | `obj`, `array` | - | - | - | Accepts css style | diff --git a/packages/asc-web-components/menu-item/index.js b/packages/asc-web-components/menu-item/index.js deleted file mode 100644 index 059160adaf..0000000000 --- a/packages/asc-web-components/menu-item/index.js +++ /dev/null @@ -1,167 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { ReactSVG } from "react-svg"; - -import DomHelpers from "../utils/domHelpers"; - -import { isMobile } from "react-device-detect"; -import { - isTablet as isTabletUtils, - isMobile as isMobileUtils, -} from "../utils/device"; - -import { StyledMenuItem, StyledText, IconWrapper } from "./styled-menu-item"; - -import ArrowIcon from "./svg/folder-arrow.react.svg"; -import ArrowMobileIcon from "./svg/folder-arrow.mobile.react.svg"; -import NewContextMenu from "../new-context-menu"; - -//TODO: Add arrow type -const MenuItem = (props) => { - const [hover, setHover] = React.useState(false); - const [positionContextMenu, setPositionContextMenu] = React.useState(null); - const itemRef = React.useRef(null); - const cmRef = React.useRef(null); - //console.log("MenuItem render"); - const { - isHeader, - isSeparator, - label, - icon, - options, - children, - onClick, - hideMenu, - className, - } = props; - - const onHover = () => { - if (!cmRef.current) return; - if (hover) { - getPosition(); - cmRef.current.show(new Event("click")); - } else { - cmRef.current.hide(new Event("click")); - } - }; - - const getPosition = () => { - if (!cmRef.current) return; - if (!itemRef.current) return; - const outerWidth = DomHelpers.getOuterWidth(itemRef.current); - const offset = DomHelpers.getOffset(itemRef.current); - - setPositionContextMenu({ - top: offset.top, - left: offset.left + outerWidth + 10, - width: outerWidth, - }); - }; - - React.useEffect(() => { - onHover(); - }, [hover]); - - const onClickAction = (e) => { - onClick && onClick(e); - hideMenu && hideMenu(); - }; - - return options ? ( - setHover(true)} - onMouseLeave={() => setHover(false)} - > - {icon && ( - - - - )} - {isSeparator ? ( - <> - ) : label ? ( - <> - - {label} - - {isMobile || isTabletUtils() || isMobileUtils() ? ( - - ) : ( - - )} - - - ) : ( - children && children - )} - - ) : ( - - {icon && ( - - - - )} - {isSeparator ? ( - <> - ) : label ? ( - <> - - {label} - - - ) : ( - children && children - )} - - ); -}; - -MenuItem.propTypes = { - /** Tells when the menu item should display like separator */ - isSeparator: PropTypes.bool, - /** Tells when the menu item should display like header */ - isHeader: PropTypes.bool, - /** Accepts tab-index */ - tabIndex: PropTypes.number, - /** Menu item text */ - label: PropTypes.string, - /** Menu item icon */ - icon: PropTypes.string, - /** Tells when the menu item should display like arrow and open context menu */ - options: PropTypes.array, - /** Disable default style hover effect */ - noHover: PropTypes.bool, - /** What the menu item will trigger when clicked */ - onClick: PropTypes.func, - /** Children elements */ - children: PropTypes.any, - /** Accepts class */ - className: PropTypes.string, - /** Accepts id */ - id: PropTypes.string, - /** Accepts css style */ - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - /** Accepts css text-overflow */ - textOverflow: PropTypes.bool, -}; - -MenuItem.defaultProps = { - isSeparator: false, - isHeader: false, - noHover: false, - textOverflow: false, - tabIndex: -1, - label: "", -}; - -export default MenuItem; diff --git a/packages/asc-web-components/menu-item/menu-item.stories.js b/packages/asc-web-components/menu-item/menu-item.stories.js deleted file mode 100644 index a0eec32d24..0000000000 --- a/packages/asc-web-components/menu-item/menu-item.stories.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from "react"; -import MenuItem from "."; - -export default { - title: "Components/MenuItem", - component: MenuItem, - - argTypes: { - onClick: { action: "onClick" }, - }, - parameters: { - docs: { - description: { - component: `Is a item of DropDown or ContextMenu component - -An item can act as separator, header, line, line with arrow or container. - -When used as container, it will retain all styling features and positioning. To disable hover effects in container mode, you can use _noHover_ property.`, - }, - }, - }, -}; - -const Template = () => { - return ( -
- console.log("Header clicked")} - noHover={true} - /> - console.log("Button 1 clicked")} - /> - - console.log("Button 2 clicked")} - /> - console.log("Button 3 clicked")}> -
some child without styles
- - console.log("Button 1 clicked"), - }, - { - key: "key2", - icon: "static/images/nav.logo.react.svg", - label: "Item after separator", - onClick: () => console.log("Button 2 clicked"), - }, - ]} - onClick={() => console.log("Button 2 clicked")} - /> -
- ); -}; -export const Default = Template.bind({}); diff --git a/packages/asc-web-components/menu-item/menu-item.test.js b/packages/asc-web-components/menu-item/menu-item.test.js deleted file mode 100644 index bf1b294e1f..0000000000 --- a/packages/asc-web-components/menu-item/menu-item.test.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from "react"; -import { mount, shallow } from "enzyme"; -import MenuItem from "."; - -const baseProps = { - isSeparator: false, - isHeader: false, - tabIndex: -1, - label: "test", - disabled: false, - icon: "static/images/nav.logo.react.svg", - noHover: false, - onClick: jest.fn(), -}; - -describe("", () => { - it("renders without error", () => { - const wrapper = mount(); - - expect(wrapper).toExist(); - }); - - it("check isSeparator props", () => { - const wrapper = mount(); - - expect(wrapper.prop("isSeparator")).toEqual(true); - }); - - it("check isHeader props", () => { - const wrapper = mount(); - - expect(wrapper.prop("isHeader")).toEqual(true); - }); - - it("check noHover props", () => { - const wrapper = mount(); - - expect(wrapper.prop("noHover")).toEqual(true); - }); - - it("causes function onClick()", () => { - const onClick = jest.fn(); - - const wrapper = shallow( - - ); - - wrapper.find("#test").simulate("click"); - - expect(onClick).toHaveBeenCalled(); - }); - - it("render without child", () => { - const wrapper = shallow(test); - - expect(wrapper.props.children).toEqual(undefined); - }); - - it("accepts id", () => { - const wrapper = mount(); - - expect(wrapper.prop("id")).toEqual("testId"); - }); - - it("accepts className", () => { - const wrapper = mount(); - - expect(wrapper.prop("className")).toEqual("test"); - }); - - it("accepts style", () => { - const wrapper = mount(); - - expect(wrapper.getDOMNode().style).toHaveProperty("color", "red"); - }); -}); diff --git a/packages/asc-web-components/menu-item/styled-menu-item.js b/packages/asc-web-components/menu-item/styled-menu-item.js deleted file mode 100644 index b49b67851b..0000000000 --- a/packages/asc-web-components/menu-item/styled-menu-item.js +++ /dev/null @@ -1,168 +0,0 @@ -import styled, { css } from "styled-components"; -import Base from "../themes/base"; - -import Text from "../text/"; - -import { tablet } from "../utils/device"; -import { isMobile } from "react-device-detect"; - -const styledHeaderText = css` - font-size: ${(props) => props.theme.menuItem.text.header.fontSize}; - line-height: ${(props) => props.theme.menuItem.text.header.lineHeight}; -`; - -const styledMobileText = css` - font-size: ${(props) => props.theme.menuItem.text.mobile.fontSize}; - line-height: ${(props) => props.theme.menuItem.text.mobile.lineHeight}; -`; - -const StyledText = styled(Text)` - width: 100%; - font-weight: ${(props) => props.theme.menuItem.text.fontWeight}; - font-size: ${(props) => props.theme.menuItem.text.fontSize}; - line-height: ${(props) => props.theme.menuItem.text.lineHeight}; - margin: ${(props) => props.theme.menuItem.text.margin}; - color: ${(props) => props.theme.menuItem.text.color}; - text-align: left; - text-transform: none; - text-decoration: none; - user-select: none; - ${isMobile - ? (props) => (props.isHeader ? styledHeaderText : styledMobileText) - : null} - - @media ${tablet} { - ${(props) => (props.isHeader ? styledHeaderText : styledMobileText)} - } -`; -StyledText.defaultProps = { theme: Base }; - -const StyledMenuItem = styled.div` - display: ${(props) => - props.isHeader && !isMobile - ? "none" - : props.textOverflow - ? "block" - : "flex"}; - - align-items: center; - width: 100%; - height: ${(props) => - isMobile - ? props.isHeader - ? props.theme.menuItem.header.height - : props.theme.menuItem.mobile.height - : props.theme.menuItem.height}; - max-height: ${(props) => - isMobile - ? props.isHeader - ? props.theme.menuItem.header.height - : props.theme.menuItem.mobile.height - : props.theme.menuItem.height}; - border: none; - border-bottom: ${(props) => - isMobile && props.isHeader - ? props.theme.menuItem.header.borderBottom - : props.theme.menuItem.borderBottom}; - cursor: ${(props) => (isMobile && props.isHeader ? "default" : "pointer")}; - margin: 0; - margin-bottom: ${(props) => - isMobile && props.isHeader - ? props.theme.menuItem.header.marginBottom - : props.theme.menuItem.marginBottom}; - padding: ${(props) => - isMobile - ? props.theme.menuItem.mobile.padding - : props.theme.menuItem.padding}; - box-sizing: border-box; - background: none; - outline: 0 !important; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - - @media ${tablet} { - display: ${(props) => (props.textOverflow ? "block" : "flex")}; - height: ${(props) => - props.isHeader - ? props.theme.menuItem.header.height - : props.theme.menuItem.mobile.height}; - max-height: ${(props) => - props.isHeader - ? props.theme.menuItem.header.height - : props.theme.menuItem.mobile.height}; - padding: ${(props) => props.theme.menuItem.mobile.padding}; - border: none; - border-bottom: ${(props) => - props.isHeader - ? props.theme.menuItem.header.borderBottom - : props.theme.menuItem.borderBottom}; - margin-bottom: ${(props) => - props.isHeader - ? props.theme.menuItem.header.marginBottom - : props.theme.menuItem.marginBottom}; - cursor: ${(props) => (props.isHeader ? "default" : "pointer")}; - } - - .drop-down-item_icon { - path { - fill: ${(props) => !props.isHeader && props.theme.menuItem.svgFill}; - } - } - - &:hover { - background-color: ${(props) => - props.noHover || props.isHeader - ? props.theme.menuItem.background - : props.theme.menuItem.hover}; - } - ${(props) => - props.isSeparator && - css` - border-bottom: ${props.theme.menuItem.separator.borderBottom}; - cursor: default !important; - margin: ${props.theme.menuItem.separator.margin}; - height: ${props.theme.menuItem.separator.height}; - width: ${props.theme.menuItem.separator.width}; - &:hover { - cursor: default !important; - } - `} - - .arrow-icon { - margin: 0 0 0 8px; - } -`; -StyledMenuItem.defaultProps = { theme: Base }; - -const IconWrapper = styled.div` - display: flex; - align-items: center; - width: ${(props) => - props.isHeader && isMobile - ? props.theme.menuItem.iconWrapper.header.width - : props.theme.menuItem.iconWrapper.width}; - height: ${(props) => - props.isHeader && isMobile - ? props.theme.menuItem.iconWrapper.header.height - : props.theme.menuItem.iconWrapper.height}; - - @media ${tablet} { - width: ${(props) => - props.isHeader - ? props.theme.menuItem.iconWrapper.header.width - : props.theme.menuItem.iconWrapper.width}; - height: ${(props) => - props.isHeader - ? props.theme.menuItem.iconWrapper.header.height - : props.theme.menuItem.iconWrapper.height}; - } - - svg { - &:not(:root) { - width: 100%; - height: 100%; - } - } -`; -IconWrapper.defaultProps = { theme: Base }; - -export { StyledMenuItem, StyledText, IconWrapper }; diff --git a/packages/asc-web-components/menu-item/svg/folder-arrow.mobile.react.svg b/packages/asc-web-components/menu-item/svg/folder-arrow.mobile.react.svg deleted file mode 100644 index 80a4fa4a28..0000000000 --- a/packages/asc-web-components/menu-item/svg/folder-arrow.mobile.react.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/asc-web-components/menu-item/svg/folder-arrow.react.svg b/packages/asc-web-components/menu-item/svg/folder-arrow.react.svg deleted file mode 100644 index add6ca8022..0000000000 --- a/packages/asc-web-components/menu-item/svg/folder-arrow.react.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/asc-web-components/new-context-menu/README.md b/packages/asc-web-components/new-context-menu/README.md deleted file mode 100644 index df6d2a038c..0000000000 --- a/packages/asc-web-components/new-context-menu/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# ContextMenu - -ContextMenu is used for a call context actions on a page. - -> Implemented as part of RowContainer component. - -### Usage - -```js -import NewContextMenu from "@appserver/components/new-context-menu"; -``` - -```jsx - -``` - -For use within separate component it is necessary to determine active zone and events for calling and transferring options in menu. - -In particular case, state is created containing options for particular Row element and passed to component when called. - -ContextMenu contain MenuItem component and can take from the props model(all view) -and header(show only tablet or mobile, when view changed). - -### Properties - -| Props | Type | Required | Values | Default | Description | -| -------------- | :------------: | :------: | :----: | :-----------: | ------------------------ | -| `className` | `string` | - | - | - | Accepts class | -| `id` | `string` | - | - | `contextMenu` | Accepts id | -| `model` | `array` | - | - | `[]` | Items collection | -| `header` | `object` | - | - | `{}` | ContextMenu header | -| `position` | `object` | - | - | `{}` | ContextMenu position | -| `style` | `obj`, `array` | - | - | - | Accepts css style | -| `targetAreaId` | `string` | - | - | - | Id of container apply to | -| `withBackdrop` | `bool` | - | - | `true` | Used to display backdrop | diff --git a/packages/asc-web-components/new-context-menu/index.js b/packages/asc-web-components/new-context-menu/index.js deleted file mode 100644 index d5c7aee291..0000000000 --- a/packages/asc-web-components/new-context-menu/index.js +++ /dev/null @@ -1,494 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import DomHelpers from "../utils/domHelpers"; -import { classNames } from "../utils/classNames"; -import { CSSTransition } from "react-transition-group"; -import { VariableSizeList } from "react-window"; - -import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; - -import { isMobile, isMobileOnly } from "react-device-detect"; -import { - isMobile as isMobileUtils, - isTablet as isTabletUtils, -} from "../utils/device"; - -import Portal from "../portal"; -import MenuItem from "../menu-item"; -import Backdrop from "../backdrop"; - -import StyledContextMenu from "./styled-new-context-menu"; - -// eslint-disable-next-line react/display-name, react/prop-types -const Row = React.memo(({ data, index, style }) => { - // eslint-disable-next-line react/prop-types - if (!data.data[index]) return null; - return ( - - ); -}); - -class NewContextMenu extends React.Component { - constructor(props) { - super(props); - - this.state = { - visible: false, - reshow: false, - resetMenu: false, - changeView: false, - }; - - this.onMenuClick = this.onMenuClick.bind(this); - this.onLeafClick = this.onLeafClick.bind(this); - this.onMenuMouseEnter = this.onMenuMouseEnter.bind(this); - this.onEnter = this.onEnter.bind(this); - this.onEntered = this.onEntered.bind(this); - this.onExit = this.onExit.bind(this); - this.onExited = this.onExited.bind(this); - - this.menuRef = React.createRef(); - } - onMenuClick() { - this.setState({ - resetMenu: false, - }); - } - - onMenuMouseEnter() { - this.setState({ - resetMenu: false, - }); - } - - show(e) { - if (!(e instanceof Event)) { - e.persist(); - } - - e.stopPropagation(); - e.preventDefault(); - - this.currentEvent = e; - - if (this.state.visible) { - this.setState({ reshow: true }); - } else { - this.setState({ visible: true }, () => { - if (this.props.onShow) { - this.props.onShow(this.currentEvent); - } - }); - } - } - - componentDidUpdate(prevProps, prevState) { - if (this.state.visible && prevState.reshow !== this.state.reshow) { - let event = this.currentEvent; - this.setState( - { - visible: false, - reshow: false, - rePosition: false, - changeView: false, - resetMenu: true, - }, - () => this.show(event) - ); - } - } - - hide(e) { - if (!(e instanceof Event)) { - e.persist(); - } - - this.currentEvent = e; - this.setState({ visible: false, reshow: false, changeView: false }, () => { - if (this.props.onHide) { - this.props.onHide(this.currentEvent); - } - }); - } - - hideMenu() { - this.setState({ visible: false, reshow: false, changeView: false }, () => { - if (this.props.onHide) { - this.props.onHide(this.currentEvent); - } - }); - } - - onEnter() { - if (this.props.autoZIndex) { - this.menuRef.current.style.zIndex = String( - this.props.baseZIndex + DomHelpers.generateZIndex() - ); - } - - this.position(this.currentEvent); - } - - onEntered() { - this.bindDocumentListeners(); - } - - onExit() { - this.currentEvent = null; - this.unbindDocumentListeners(); - } - - onExited() { - DomHelpers.revertZIndex(); - } - - position(event) { - if (this.props.position) { - let width = this.menuRef.current.offsetParent - ? this.menuRef.current.offsetWidth - : DomHelpers.getHiddenElementOuterWidth(this.menuRef.current); - let viewport = DomHelpers.getViewport(); - if ( - this.props.position.left + width > - viewport.width - DomHelpers.calculateScrollbarWidth() - ) { - this.menuRef.current.style.right = - // -1 * this.props.position.width + width + "px"; - 0 + "px"; - } else { - this.menuRef.current.style.left = this.props.position.left + "px"; - } - - this.menuRef.current.style.top = this.props.position.top + "px"; - return; - } - if (event) { - let left = event.pageX + 1; - let top = event.pageY + 1; - let width = this.menuRef.current.offsetParent - ? this.menuRef.current.offsetWidth - : DomHelpers.getHiddenElementOuterWidth(this.menuRef.current); - let height = this.menuRef.current.offsetParent - ? this.menuRef.current.offsetHeight - : DomHelpers.getHiddenElementOuterHeight(this.menuRef.current); - let viewport = DomHelpers.getViewport(); - - if ((isMobile || isTabletUtils()) && height > 483) { - this.setState({ changeView: true }); - return; - } - - if ((isMobileOnly || isMobileUtils()) && height > 210) { - this.setState({ changeView: true }); - return; - } - //flip - if (left + width - document.body.scrollLeft > viewport.width) { - left -= width; - } - - //flip - if (top + height - document.body.scrollTop > viewport.height) { - top -= height; - } - - //fit - if (left < document.body.scrollLeft) { - left = document.body.scrollLeft; - } - - //fit - if (top < document.body.scrollTop) { - top = document.body.scrollTop; - } - - this.menuRef.current.style.left = left + "px"; - this.menuRef.current.style.top = top + "px"; - } - } - - onLeafClick(e) { - this.setState({ - resetMenu: true, - }); - - this.hide(e); - - e.stopPropagation(); - } - - isOutsideClicked(e) { - return ( - this.menuRef && - this.menuRef.current && - !( - this.menuRef.current.isSameNode(e.target) || - this.menuRef.current.contains(e.target) - ) - ); - } - - bindDocumentListeners() { - this.bindDocumentResizeListener(); - this.bindDocumentClickListener(); - } - - unbindDocumentListeners() { - this.unbindDocumentResizeListener(); - this.unbindDocumentClickListener(); - } - - bindDocumentClickListener() { - if (!this.documentClickListener) { - this.documentClickListener = (e) => { - if (this.isOutsideClicked(e)) { - //TODO: (&& e.button !== 2) restore after global usage - this.hide(e); - - this.setState({ - resetMenu: true, - }); - } - }; - - document.addEventListener("click", this.documentClickListener); - document.addEventListener("mousedown", this.documentClickListener); - } - } - - bindDocumentContextMenuListener() { - if (!this.documentContextMenuListener) { - this.documentContextMenuListener = (e) => { - this.show(e); - }; - - document.addEventListener( - "contextmenu", - this.documentContextMenuListener - ); - } - } - - bindDocumentResizeListener() { - if (!this.documentResizeListener) { - this.documentResizeListener = (e) => { - if (this.state.visible) { - this.hide(e); - } - }; - - window.addEventListener("resize", this.documentResizeListener); - } - } - - unbindDocumentClickListener() { - if (this.documentClickListener) { - document.removeEventListener("click", this.documentClickListener); - document.removeEventListener("mousedown", this.documentClickListener); - this.documentClickListener = null; - } - } - - unbindDocumentContextMenuListener() { - if (this.documentContextMenuListener) { - document.removeEventListener( - "contextmenu", - this.documentContextMenuListener - ); - this.documentContextMenuListener = null; - } - } - - unbindDocumentResizeListener() { - if (this.documentResizeListener) { - window.removeEventListener("resize", this.documentResizeListener); - this.documentResizeListener = null; - } - } - - componentDidMount() { - if (this.props.global) { - this.bindDocumentContextMenuListener(); - } - } - - componentWillUnmount() { - this.unbindDocumentListeners(); - this.unbindDocumentContextMenuListener(); - - DomHelpers.revertZIndex(); - } - - renderContextMenuItems() { - if (!this.props.model) return null; - if (this.state.changeView) { - const model = this.props.model.filter((item) => !!item); - - const rowHeights = model.map((item, index) => { - if (!item) return 0; - if (item.isSeparator) return 13; - return 36; - }); - - const getItemSize = (index) => rowHeights[index]; - - const height = rowHeights.reduce((a, b) => a + b); - - const viewport = DomHelpers.getViewport(); - - const listHeight = - height + 61 > viewport.height - 64 ? viewport.height - 125 : height; - - return ( - - {Row} - - ); - } else { - const items = this.props.model.map((item, index) => { - if (!item) return; - return ( - - ); - }); - - return items; - } - } - - renderContextMenu() { - const className = classNames("p-contextmenu", this.props.className); - - const items = this.renderContextMenuItems(); - return ( - <> - {this.props.withBackdrop && ( - - )} - - -
- {this.state.changeView && ( - - )} - {items} -
- - - - ); - } - - render() { - const element = this.renderContextMenu(); - - return ; - } -} - -NewContextMenu.propTypes = { - /** Unique identifier of the element */ - id: PropTypes.string, - /** An array of objects */ - model: PropTypes.array, - /** An object of header with icon and label */ - header: PropTypes.object, - /** Position of context menu */ - position: PropTypes.object, - /** Inline style of the component */ - style: PropTypes.object, - /** Style class of the component */ - className: PropTypes.string, - /** Attaches the menu to document instead of a particular item */ - global: PropTypes.bool, - /** Tell when context menu was render with backdrop */ - withBackdrop: PropTypes.bool, - /** Base zIndex value to use in layering */ - autoZIndex: PropTypes.bool, - /** Whether to automatically manage layering */ - baseZIndex: PropTypes.number, - /** DOM element instance where the menu should be mounted */ - appendTo: PropTypes.any, - /** Callback to invoke when a popup menu is shown */ - onShow: PropTypes.func, - /** Callback to invoke when a popup menu is hidden */ - onHide: PropTypes.func, -}; - -NewContextMenu.defaultProps = { - id: null, - model: null, - position: null, - header: null, - style: null, - className: null, - global: false, - autoZIndex: true, - baseZIndex: 0, - appendTo: null, - onShow: null, - onHide: null, - withBackdrop: true, -}; - -export default NewContextMenu; diff --git a/packages/asc-web-components/new-context-menu/new-context-menu.stories.js b/packages/asc-web-components/new-context-menu/new-context-menu.stories.js deleted file mode 100644 index 1571cc624c..0000000000 --- a/packages/asc-web-components/new-context-menu/new-context-menu.stories.js +++ /dev/null @@ -1,179 +0,0 @@ -import React from "react"; -import NewContextMenu from "."; - -export default { - title: "Components/NewContextMenu", - component: NewContextMenu, - - parameters: { - docs: { - description: { - component: `Is a ContextMenu component. - ContextMenu contain MenuItem component and can take from the props model(all view) - and header(show only tablet or mobile, when view changed). -`, - }, - }, - }, -}; - -const Template = (args) => { - const cm = React.useRef(null); - const defaultModel = [ - { - disabled: false, - icon: "/static/images/access.edit.react.svg", - key: "edit", - label: "Edit", - onClick: () => console.log("item 1 clicked"), - }, - { - disabled: false, - icon: "/static/images/eye.react.svg", - key: "preview", - label: "Preview", - onClick: () => console.log("item 2 clicked"), - }, - { isSeparator: true, key: "separator0" }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings1", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings2", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings3", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings4", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings5", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings6", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings7", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings8", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings9", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings10", - label: "Sharing settings", - options: [ - { - key: "key1", - icon: "static/images/nav.logo.react.svg", - label: "Item after separator", - onClick: () => console.log("Button 1 clicked"), - }, - { - key: "key2", - icon: "static/images/nav.logo.react.svg", - label: "Item after separator", - onClick: () => console.log("Button 2 clicked"), - }, - ], - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings11", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings12", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - { - disabled: false, - icon: "/static/images/catalog.shared.react.svg", - key: "sharing-settings13", - label: "Sharing settings", - onClick: () => console.log("item 3 clicked"), - }, - ]; - - const headerOptions = { - icon: "/static/images/catalog.shared.react.svg", - title: "File name", - }; - - return ( -
- - -
cm.current.show(e)} - > - {""} -
-
- ); -}; -export const Default = Template.bind({}); diff --git a/packages/asc-web-components/new-context-menu/new-context-menu.test.js b/packages/asc-web-components/new-context-menu/new-context-menu.test.js deleted file mode 100644 index c5ab43622a..0000000000 --- a/packages/asc-web-components/new-context-menu/new-context-menu.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import { mount, shallow } from "enzyme"; -import NewContextMenu from "."; - -describe("", () => { - it("renders without error", () => { - const wrapper = mount(); - - expect(wrapper).toExist(); - }); -}); diff --git a/packages/asc-web-components/new-context-menu/styled-new-context-menu.js b/packages/asc-web-components/new-context-menu/styled-new-context-menu.js deleted file mode 100644 index 3636b50853..0000000000 --- a/packages/asc-web-components/new-context-menu/styled-new-context-menu.js +++ /dev/null @@ -1,59 +0,0 @@ -import styled, { css } from "styled-components"; -import { isMobile, isMobileOnly } from "react-device-detect"; -import { tablet, mobile } from "../utils/device"; -import Base from "../themes/base"; - -const styledTabletView = css` - width: ${(props) => props.theme.newContextMenu.devices.tabletWidth}; - max-width: ${(props) => props.theme.newContextMenu.devices.tabletWidth}; - max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight}; - left: ${(props) => props.theme.newContextMenu.devices.left}; - right: ${(props) => props.theme.newContextMenu.devices.right}; - bottom: ${(props) => props.theme.newContextMenu.devices.bottom}; - margin: ${(props) => props.theme.newContextMenu.devices.margin}; -`; - -const styledMobileView = css` - width: ${(props) => props.theme.newContextMenu.devices.mobileWidth}; - max-width: ${(props) => props.theme.newContextMenu.devices.mobileWidth}; - max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight}; - left: ${(props) => props.theme.newContextMenu.devices.left}; - bottom: ${(props) => props.theme.newContextMenu.devices.bottom}; -`; - -const StyledContextMenu = styled.div` - .p-contextmenu { - position: absolute; - background: ${(props) => props.theme.newContextMenu.background}; - border: ${(props) => props.theme.newContextMenu.border}; - border-radius: ${(props) => props.theme.newContextMenu.borderRadius}; - -moz-border-radius: ${(props) => props.theme.newContextMenu.borderRadius}; - -webkit-border-radius: ${(props) => - props.theme.newContextMenu.borderRadius}; - box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; - -moz-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; - -webkit-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; - padding: ${(props) => props.theme.newContextMenu.padding}; - - @media ${tablet} { - ${(props) => props.changeView && !isMobile && styledTabletView} - } - - @media ${mobile} { - ${(props) => props.changeView && !isMobile && styledMobileView} - } - - ${(props) => - props.changeView - ? isMobileOnly - ? styledMobileView - : styledTabletView - : null} - } -`; - -StyledContextMenu.defaultProps = { - theme: Base, -}; - -export default StyledContextMenu; From b572b84410627c28c6daf4bbca1b8d5e0685183a Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 9 Mar 2022 10:29:01 +0300 Subject: [PATCH 2/5] Web:Files: change import context menu for tile view --- .../pages/Home/Section/Body/TilesView/sub-components/Tile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index fa0e3f328f..16c8517edf 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import React from "react"; import { ReactSVG } from "react-svg"; import styled, { css } from "styled-components"; -import ContextMenu from "@appserver/components/new-context-menu"; +import ContextMenu from "@appserver/components/context-menu"; import { tablet } from "@appserver/components/utils/device"; import { isDesktop } from "react-device-detect"; From a1c2380007b06c0b259e5b5ae850042c05443a4f Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 9 Mar 2022 15:51:20 +0300 Subject: [PATCH 3/5] Web: Files: moved contextMenuData to withFileActions HOC --- products/ASC.Files/Client/src/HOCs/withFileActions.js | 4 ++++ .../src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js | 5 +---- .../Client/src/pages/Home/Section/Body/TableView/TableRow.js | 4 +--- .../pages/Home/Section/Body/TilesView/sub-components/Tile.js | 4 +--- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/products/ASC.Files/Client/src/HOCs/withFileActions.js b/products/ASC.Files/Client/src/HOCs/withFileActions.js index 58bf6d05a8..6ac4e5c19a 100644 --- a/products/ASC.Files/Client/src/HOCs/withFileActions.js +++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js @@ -235,6 +235,8 @@ export default function withFileActions(WrappedFileItem) { personal, canWebEdit, canViewedDocs, + getModel, + t, } = this.props; const { fileExst, access, id } = item; @@ -268,6 +270,7 @@ export default function withFileActions(WrappedFileItem) { : true; const checkedProps = isEdit || id <= 0 ? false : checked; + const contextMenuData = { getModel, t, item }; return ( ); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js index 6899168b47..e62c11f326 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js @@ -172,8 +172,7 @@ const SimpleFilesRow = (props) => { isActive, inProgress, isAdmin, - getModel, - t, + contextMenuData, } = props; const withAccess = isAdmin || item.access === 0; @@ -183,8 +182,6 @@ const SimpleFilesRow = (props) => { ); - const contextMenuData = { getModel, t, item }; - return ( { setFirsElemChecked, theme, quickButtonsComponent, - getModel, + contextMenuData, } = props; const { acceptBackground, background } = theme.dragAndDrop; - const contextMenuData = { getModel, t, item }; - const element = ( ); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index fa0e3f328f..87cbb6ec78 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js @@ -334,11 +334,9 @@ class Tile extends React.PureComponent { isEdit, contentElement, title, - getModel, - t, + contextMenuData, } = this.props; const { isFolder, id, fileExst } = item; - const contextMenuData = { getModel, t, item }; const renderElement = Object.prototype.hasOwnProperty.call( this.props, From 2a045fc1ef3e47ace47a141f387fff94d8e51b84 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 10 Mar 2022 10:09:10 +0300 Subject: [PATCH 4/5] Web: Files: removed contextMenuData, moved getContextModel to withFileActions HOC --- packages/asc-web-components/context-menu/index.js | 11 ++++++----- packages/asc-web-components/row/index.js | 6 +++--- .../asc-web-components/table-container/TableRow.js | 12 +++++------- .../ASC.Files/Client/src/HOCs/withFileActions.js | 7 +++---- .../Home/Section/Body/RowsView/SimpleFilesRow.js | 4 ++-- .../pages/Home/Section/Body/TableView/TableRow.js | 4 ++-- .../pages/Home/Section/Body/TilesView/FileTile.js | 4 ++-- .../Section/Body/TilesView/sub-components/Tile.js | 6 +++--- 8 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/asc-web-components/context-menu/index.js b/packages/asc-web-components/context-menu/index.js index 97b41c65c4..6edd017f57 100644 --- a/packages/asc-web-components/context-menu/index.js +++ b/packages/asc-web-components/context-menu/index.js @@ -45,9 +45,8 @@ class ContextMenu extends Component { }; show = (e) => { - if (this.props.contextMenuData) { - const { item, t, getModel } = this.props.contextMenuData; - const model = getModel(item, t); + if (this.props.getContextModel) { + const model = this.props.getContextModel(); this.setState({ model }); } @@ -328,7 +327,9 @@ class ContextMenu extends Component { )} )} { style, selectionProp, title, - contextMenuData, + getContextModel, ...rest } = props; @@ -31,10 +31,8 @@ const TableRow = (props) => { }; const renderContext = - Object.prototype.hasOwnProperty.call( - contextMenuData ? contextMenuData.item : props, - "contextOptions" - ) && contextOptions.length > 0; + Object.prototype.hasOwnProperty.call(props, "contextOptions") && + contextOptions.length > 0; const getOptions = () => { fileContextClick && fileContextClick(); @@ -59,7 +57,7 @@ const TableRow = (props) => { onHide={onHideContextMenu} ref={cm} model={contextOptions} - contextMenuData={contextMenuData} + getContextModel={getContextModel} withBackdrop={true} > {renderContext ? ( @@ -89,7 +87,7 @@ TableRow.propTypes = { className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), style: PropTypes.object, title: PropTypes.string, - contextMenuData: PropTypes.object, + getContextModel: PropTypes.func, }; export default TableRow; diff --git a/products/ASC.Files/Client/src/HOCs/withFileActions.js b/products/ASC.Files/Client/src/HOCs/withFileActions.js index 6ac4e5c19a..d308c91bdb 100644 --- a/products/ASC.Files/Client/src/HOCs/withFileActions.js +++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js @@ -217,6 +217,8 @@ export default function withFileActions(WrappedFileItem) { } }; + getContextModel = () => this.props.getModel(this.props.item, this.props.t); + render() { const { item, @@ -235,8 +237,6 @@ export default function withFileActions(WrappedFileItem) { personal, canWebEdit, canViewedDocs, - getModel, - t, } = this.props; const { fileExst, access, id } = item; @@ -270,7 +270,6 @@ export default function withFileActions(WrappedFileItem) { : true; const checkedProps = isEdit || id <= 0 ? false : checked; - const contextMenuData = { getModel, t, item }; return ( ); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js index e62c11f326..0c9a588227 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js @@ -172,7 +172,7 @@ const SimpleFilesRow = (props) => { isActive, inProgress, isAdmin, - contextMenuData, + getContextModel, } = props; const withAccess = isAdmin || item.access === 0; @@ -217,7 +217,7 @@ const SimpleFilesRow = (props) => { isThirdPartyFolder={item.isThirdPartyFolder} className="files-row" withAccess={withAccess} - contextMenuData={contextMenuData} + getContextModel={getContextModel} > { setFirsElemChecked, theme, quickButtonsComponent, - contextMenuData, + getContextModel, } = props; const { acceptBackground, background } = theme.dragAndDrop; @@ -319,7 +319,7 @@ const FilesTableRow = (props) => { onDoubleClick={onFilesClick} checked={checkedProps} contextOptions={item.contextOptions} - contextMenuData={contextMenuData} + getContextModel={getContextModel} title={ item.isFolder ? t("Translations:TitleShowFolderActions") diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js index bff8d83050..812a0b3e5a 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js @@ -36,7 +36,7 @@ const FileTile = (props) => { quickButtonsComponent, badgesComponent, t, - getModel, + getContextModel, } = props; const temporaryExtension = @@ -86,7 +86,7 @@ const FileTile = (props) => { isActive={isActive} inProgress={inProgress} isEdit={isEdit} - getModel={getModel} + getContextModel={getContextModel} t={t} title={ item.isFolder diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index 87cbb6ec78..e8a7a694a0 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js @@ -334,7 +334,7 @@ class Tile extends React.PureComponent { isEdit, contentElement, title, - contextMenuData, + getContextModel, } = this.props; const { isFolder, id, fileExst } = item; @@ -435,7 +435,7 @@ class Tile extends React.PureComponent {
)} @@ -500,7 +500,7 @@ class Tile extends React.PureComponent {
)} Date: Thu, 10 Mar 2022 14:00:15 +0300 Subject: [PATCH 5/5] Web:Common: enable add button when navigation is open --- .../Navigation/sub-components/control-btn.js | 15 ++++++++++----- .../Navigation/sub-components/drop-box.js | 1 + 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index d51079f060..e7b5e1a463 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -15,13 +15,17 @@ const StyledContainer = styled.div` margin-right: 12px; min-width: 17px; - @media ${tablet} { - display: none; - } + ${(props) => + !props.isDropBox && + css` + @media ${tablet} { + display: none; + } + `} ${isMobile && css` - display: none; + ${(props) => !props.isDropBox && "display: none"}; `} } @@ -37,6 +41,7 @@ const StyledContainer = styled.div` const ControlButtons = ({ personal, + isDropBox, isRootFolder, canCreate, getContextOptionsFolder, @@ -46,7 +51,7 @@ const ControlButtons = ({ clearTrash, }) => { return ( - + {!isRootFolder && canCreate ? ( <>