@desynova-digital/player 4.0.0 → 4.0.2

package/utils/Menu.jsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-import { Button } from '@desynova-digital/components';
-
-const propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element),
-  icon: PropTypes.string,
-  style: PropTypes.instanceOf(Object),
-  active: PropTypes.bool,
-  position: PropTypes.string
-};
-
-const defaultProps = {
-  position: 'center'
-};
-
-const MenuContainer = styled.div`
-  width: 20px;
-  position: relative;
-  &:hover {
-    .menu-popup {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-  .menu-popup {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    bottom: 20px;
-    padding-bottom: 16px;
-    z-index: 10;
-    transition: all 350ms ease-in-out;
-    &.right {
-      left: -10px;
-      &:after {
-        left: 15px;
-      }
-    }
-    &.center {
-      left: 50%;
-      transform: translateX(-50%);
-      &:after {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-    }
-    &.left {
-      right: -10px;
-      &:after {
-        right: 15px;
-      }
-    }
-    &.active {
-      visibility: visible;
-      opacity: 1;
-    }
-    &:after {
-      content: '';
-      border-left: 6px solid transparent;
-      position: absolute;
-      border-right: 6px solid transparent;
-      border-top: 6px solid rgb(0, 206, 198);
-      bottom: 10px;
-    }
-    .menu-list {
-      border-radius: 10px;
-      background: #fff;
-      min-width: 175px;
-      max-height: 500px;
-      transition: all 250ms ease-in-out;
-      overflow: auto;
-      max-height: 400px;
-    }
-  }
-`;
-
-const MenuIcon = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0px;
-  &:hover,
-  &:focus {
-    background: transparent;
-    svg path {
-      fill: #00cec6;
-    }
-  }
-`;
-
-export default function Menu({ style, children, icon, active, position }) {
-  return (
-    <MenuContainer style={style}>
-      <MenuIcon display="rounded" appearance="cta" icon={icon} iconWidth={16} iconHeight={16} width={20} height={20} />
-      <div className={active ? `menu-popup active ${position}` : `menu-popup ${position}`}>
-        <div className="menu-list">{children}</div>
-      </div>
-    </MenuContainer>
-  );
-}
-
-Menu.propTypes = propTypes;
-Menu.defaultProps = defaultProps;
-Menu.displayName = 'Menu';