From 282116476cf96bcfabf0dd76ee7e451a410b8d96 Mon Sep 17 00:00:00 2001 From: felipebrunetti94 Date: Sat, 30 Nov 2019 18:46:22 -0300 Subject: [PATCH] Menu: convert to functional --- src/components/Menu/index.js | 247 +++++++++++++---------------------- src/components/Menu/style.js | 55 ++++++++ 2 files changed, 147 insertions(+), 155 deletions(-) create mode 100644 src/components/Menu/style.js diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 27b2e7e..b2663fc 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -1,6 +1,5 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; // Constants import * as ViewModes from '../../constants/viewModes'; @@ -10,163 +9,101 @@ import * as SortModes from '../../constants/sortModes'; import enhanceWithClickOutside from 'react-click-outside'; // Style -const Wrapper = styled.div` - position: absolute; - top: 0; - background: white; - border: 1px solid red; - padding: 8px; - top: ${props => props.top}; - left: ${props => props.left}; -`; - -const FirstLevelWrapper = styled.ul` - margin: 0; - padding: 0; - list-style: none; - z-index: 1; - - > li { - cursor: default; - - &:hover { - background: orange; - } - - & .selected { - background: red; - } - } - - > .first-level { - position: relative; - } - - > .first-level > .nested-level { - display: none; - position: absolute; - top: 0; - left: 0; - background: white; - border: 1px solid red; - padding: 8px; - } - - > .first-level:hover > .nested-level { - display: block; - list-style: none; - left: 40px; - z-index: 2; - - > li:hover { - background: orange; - } - } -`; - -class Menu extends Component { - constructor() { - super(); - - this.handleClickOutside = this.handleClickOutside.bind(this); - } - - handleClickOutside() { - this.props.handleClickOutside(); - } - - render() { - const { - position, type, - viewMode, toggleViewMode, - sortMode, sortableByName, sortableBySize, sortableByType, sortableByLastEdit, handleSortModeChange, - onRename, onDelete, - } = this.props; - - const sortable = sortableByName || sortableBySize || sortableByType || sortableByLastEdit; - - return ( - - - { - type === 'general' && - +import {FirstLevelWrapper, Wrapper} from './style' + + +const Menu = ({ + handleClickOutside, + position, type, + viewMode, toggleViewMode, + sortMode, sortableByName, + sortableBySize, sortableByType, + sortableByLastEdit, handleSortModeChange, + onRename, onDelete}) => { + + const sortable = sortableByName || sortableBySize || sortableByType || sortableByLastEdit; + + return ( + handleClickOutside} + > + { + type === 'general' && + +
  • +
    View
    +
      +
    • toggleViewMode(ViewModes.LIST)} + className={viewMode === ViewModes.LIST && 'selected'}>List
      • +
    • toggleViewMode(ViewModes.SMALL_ICONS)} + className={viewMode === ViewModes.SMALL_ICONS && 'selected'}>Small Icons
      • +
    • toggleViewMode(ViewModes.MEDIUM_ICONS)} + className={viewMode === ViewModes.MEDIUM_ICONS && 'selected'}>Medium Icons
      • +
    • toggleViewMode(ViewModes.LARGE_ICONS)} + className={viewMode === ViewModes.LARGE_ICONS && 'selected'}>Large Icons
      • +
    +
    • + { + sortable &&
  • -
    View
    +
    Sort by
      -
    • toggleViewMode(ViewModes.LIST)} - className={viewMode === ViewModes.LIST && 'selected'}>List
      • -
    • toggleViewMode(ViewModes.SMALL_ICONS)} - className={viewMode === ViewModes.SMALL_ICONS && 'selected'}>Small Icons
      • -
    • toggleViewMode(ViewModes.MEDIUM_ICONS)} - className={viewMode === ViewModes.MEDIUM_ICONS && 'selected'}>Medium Icons
      • -
    • toggleViewMode(ViewModes.LARGE_ICONS)} - className={viewMode === ViewModes.LARGE_ICONS && 'selected'}>Large Icons
      • + { + sortableByName && +
    • handleSortModeChange(SortModes.NAME)} + className={sortMode === SortModes.NAME && 'selected'}>Name
      • + } + + { + sortableBySize && +
    • handleSortModeChange(SortModes.SIZE)} + className={sortMode === SortModes.SIZE && 'selected'}>Size
      • + } + + { + sortableByType && +
    • handleSortModeChange(SortModes.TYPE)} + className={sortMode === SortModes.TYPE && 'selected'}>Type
      • + } + + { + sortableByLastEdit && +
    • handleSortModeChange(SortModes.LAST_EDIT)} + className={sortMode === SortModes.LAST_EDIT && 'selected'}>Last edit
      • + }
    • - - { - sortable && -
  • -
    Sort by
    -
      - { - sortableByName && -
    • handleSortModeChange(SortModes.NAME)} - className={sortMode === SortModes.NAME && 'selected'}>Name
      • - } - - { - sortableBySize && -
    • handleSortModeChange(SortModes.SIZE)} - className={sortMode === SortModes.SIZE && 'selected'}>Size
      • - } - - { - sortableByType && -
    • handleSortModeChange(SortModes.TYPE)} - className={sortMode === SortModes.TYPE && 'selected'}>Type
      • - } - - { - sortableByLastEdit && -
    • handleSortModeChange(SortModes.LAST_EDIT)} - className={sortMode === SortModes.LAST_EDIT && 'selected'}>Last edit
      • - } -
    -
    • - } -     - } - - { - type === 'file' && - - { - onRename && -
  • Rename
    • - } - - { - onDelete && -
  • Delete
    • - } -     - } -     - ); - } + } +     + } + + { + type === 'file' && + + { + onRename && +
  • Rename
    • + } + + { + onDelete && +
  • Delete
    • + } +     + } +     + ); } const PositionProp = { diff --git a/src/components/Menu/style.js b/src/components/Menu/style.js new file mode 100644 index 0000000..6db7c09 --- /dev/null +++ b/src/components/Menu/style.js @@ -0,0 +1,55 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + position: absolute; + top: 0; + background: white; + border: 1px solid red; + padding: 8px; + top: ${props => props.top}; + left: ${props => props.left}; +`; + +export const FirstLevelWrapper = styled.ul` + margin: 0; + padding: 0; + list-style: none; + z-index: 1; + + > li { + cursor: default; + + &:hover { + background: orange; + } + + & .selected { + background: red; + } + } + + > .first-level { + position: relative; + } + + > .first-level > .nested-level { + display: none; + position: absolute; + top: 0; + left: 0; + background: white; + border: 1px solid red; + padding: 8px; + } + + > .first-level:hover > .nested-level { + display: block; + list-style: none; + left: 40px; + z-index: 2; + + > li:hover { + background: orange; + } + } +`;