From df8387d5c0866ca126ecbc88cf91300d80e63f99 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Tue, 2 Nov 2021 11:45:00 +0100 Subject: [PATCH] Refactor channel menu (#105) --- .../src/components/Form/ChannelMenu.tsx | 106 +++++++----------- .../src/components/Icons/CheckIcon.tsx | 23 +++- .../src/components/Icons/ClearIcon.tsx | 23 +++- .../src/components/Icons/MembersSmallIcon.tsx | 42 +++++++ .../src/components/Icons/MuteIcon.tsx | 23 +++- 5 files changed, 131 insertions(+), 86 deletions(-) create mode 100644 packages/react-chat/src/components/Icons/MembersSmallIcon.tsx diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx index a4fdf4d1..4a66adff 100644 --- a/packages/react-chat/src/components/Form/ChannelMenu.tsx +++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx @@ -5,8 +5,27 @@ import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; import { ChannelData } from "../../models/ChannelData"; import { ChatMessage } from "../../models/ChatMessage"; +import { CheckSvg } from "../Icons/CheckIcon"; +import { ClearSvg } from "../Icons/ClearIcon"; +import { MembersSmallSvg } from "../Icons/MembersSmallIcon"; +import { MuteSvg } from "../Icons/MuteIcon"; import { textSmallStyles } from "../Text"; +type MenuItemProps = { + Svg: ({ width, height }: { width: number; height: number }) => JSX.Element; + text: string; + onClick: () => void; +}; + +function MenuItem({ Svg, text, onClick }: MenuItemProps) { + return ( + + + {text} + + ); +} + interface ChannelMenuProps { channel: ChannelData; @@ -34,74 +53,25 @@ export const ChannelMenu = ({ switchMemberList(); setShowChannelMenu(false); }} - > - - - - - View members - + Svg={MembersSmallSvg} + text="View Members" + /> )} - channel.isMuted === true}> - - - - Mute Chat - - clearNotifications(channel.id)}> - - - - - Mark as Read - - messages.length === 0}> - - - - - Clear History - + channel.isMuted === true} + Svg={MuteSvg} + text="Mute Chat" + /> + clearNotifications(channel.id)} + Svg={CheckSvg} + text="Mark as Read" + /> + messages.length === 0} + Svg={ClearSvg} + text="Clear History" + /> ); @@ -124,7 +94,7 @@ const MenuList = styled.ul` list-style: none; `; -const MenuItem = styled.li` +const Item = styled.li` width: 100%; display: flex; align-items: center; diff --git a/packages/react-chat/src/components/Icons/CheckIcon.tsx b/packages/react-chat/src/components/Icons/CheckIcon.tsx index 7d9575ac..63670083 100644 --- a/packages/react-chat/src/components/Icons/CheckIcon.tsx +++ b/packages/react-chat/src/components/Icons/CheckIcon.tsx @@ -1,14 +1,21 @@ import React from "react"; import styled from "styled-components"; -export const CheckIcon = () => { +type CheckSvgProps = { + width: number; + height: number; + className?: string; +}; + +export function CheckSvg({ width, height, className }: CheckSvgProps) { return ( - { clipRule="evenodd" d="M7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668ZM7.99992 13.6668C4.8703 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.8703 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668Z" /> - + ); +} + +export const CheckIcon = () => { + return ; }; -const Icon = styled.svg` +const Icon = styled(CheckSvg)` & > path { fill: ${({ theme }) => theme.tertiary}; } diff --git a/packages/react-chat/src/components/Icons/ClearIcon.tsx b/packages/react-chat/src/components/Icons/ClearIcon.tsx index 384ed007..3d537d12 100644 --- a/packages/react-chat/src/components/Icons/ClearIcon.tsx +++ b/packages/react-chat/src/components/Icons/ClearIcon.tsx @@ -1,14 +1,21 @@ import React from "react"; import styled from "styled-components"; -export const ClearIcon = () => { +type ClearSvgProps = { + width: number; + height: number; + className?: string; +}; + +export function ClearSvg({ height, width, className }: ClearSvgProps) { return ( - { clipRule="evenodd" d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668ZM7.99992 13.6668C11.1295 13.6668 13.6666 11.1298 13.6666 8.00016C13.6666 4.87055 11.1295 2.3335 7.99992 2.3335C4.87031 2.3335 2.33325 4.87055 2.33325 8.00016C2.33325 11.1298 4.87031 13.6668 7.99992 13.6668Z" /> - + ); +} + +export const ClearIcon = () => { + return ; }; -const Icon = styled.svg` +const Icon = styled(ClearSvg)` & > path { fill: ${({ theme }) => theme.tertiary}; } diff --git a/packages/react-chat/src/components/Icons/MembersSmallIcon.tsx b/packages/react-chat/src/components/Icons/MembersSmallIcon.tsx new file mode 100644 index 00000000..00d212b4 --- /dev/null +++ b/packages/react-chat/src/components/Icons/MembersSmallIcon.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import styled from "styled-components"; + +type MembersSmallSvgProps = { + width: number; + height: number; + className?: string; +}; + +export function MembersSmallSvg({ + height, + width, + className, +}: MembersSmallSvgProps) { + return ( + + + + + ); +} + +export const MembersIcon = () => { + return ; +}; + +const Icon = styled(MembersSmallSvg)` + & > path { + fill: ${({ theme }) => theme.primary}; + } +`; diff --git a/packages/react-chat/src/components/Icons/MuteIcon.tsx b/packages/react-chat/src/components/Icons/MuteIcon.tsx index f6c4c080..7e6dff13 100644 --- a/packages/react-chat/src/components/Icons/MuteIcon.tsx +++ b/packages/react-chat/src/components/Icons/MuteIcon.tsx @@ -1,25 +1,36 @@ import React from "react"; import styled from "styled-components"; -export const MuteIcon = () => { +type MuteSvgProps = { + width: number; + height: number; + className?: string; +}; + +export function MuteSvg({ width, height, className }: MuteSvgProps) { return ( - - + ); +} + +export const MuteIcon = () => { + return ; }; -const Icon = styled.svg` +const Icon = styled(MuteSvg)` & > path { fill: ${({ theme }) => theme.tertiary}; }