From 5671a408c150d94e0302fc40ed389e62dc5a666f Mon Sep 17 00:00:00 2001 From: Katalina Okano Date: Tue, 13 Jul 2021 22:59:05 -0400 Subject: [PATCH] fix(Editor): add reset/delete actions to each category (fixes #302) --- .../atoms/button/Button.styled.ts | 11 ++++++- .../design-system/atoms/button/Button.tsx | 4 ++- .../editor-category/EditorCategory.styled.ts | 8 ++++- .../editor-category/EditorCategory.tsx | 15 ++++++++- .../ServerCategoryEditor.tsx | 33 ++++++++++++++++--- 5 files changed, 63 insertions(+), 8 deletions(-) diff --git a/packages/design-system/atoms/button/Button.styled.ts b/packages/design-system/atoms/button/Button.styled.ts index 49819ea..4a7a5fa 100644 --- a/packages/design-system/atoms/button/Button.styled.ts +++ b/packages/design-system/atoms/button/Button.styled.ts @@ -3,9 +3,18 @@ import { fontCSS } from '@roleypoly/design-system/atoms/fonts'; import { text300, text400 } from '@roleypoly/design-system/atoms/typography'; import styled, { css } from 'styled-components'; -export const IconContainer = styled.div` +export const IconContainer = styled.div<{ small?: boolean }>` margin-right: 0.6rem; font-size: 1.75em; + + ${(props) => + props.small && + css` + margin-right: 0.2rem; + font-size: 1.25em; + position: relative; + top: 2px; + `} `; const base = css` diff --git a/packages/design-system/atoms/button/Button.tsx b/packages/design-system/atoms/button/Button.tsx index e48d1c9..3afc06a 100644 --- a/packages/design-system/atoms/button/Button.tsx +++ b/packages/design-system/atoms/button/Button.tsx @@ -31,7 +31,9 @@ export const Button = (props: ButtonProps) => { onClick={props.onClick} disabled={props.disabled} > - {props.icon && {props.icon}} + {props.icon && ( + {props.icon} + )}
{props.children}
); diff --git a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts index b8e9c31..abfabdb 100644 --- a/packages/design-system/molecules/editor-category/EditorCategory.styled.ts +++ b/packages/design-system/molecules/editor-category/EditorCategory.styled.ts @@ -29,12 +29,18 @@ export const Box = styled.div` flex-wrap: wrap; `; -export const Section = styled.div<{ big?: boolean }>` +export const Section = styled.div<{ big?: boolean; actions?: boolean }>` padding: 7px 5px; flex: 1 2 ${(props) => (props.big ? '100%' : '50%')}; ${onSmallScreen(css` flex-basis: 100%; `)} + + ${(props) => + props.actions && + css` + display: flex; + `}; `; export const RoleContainer = styled.div` diff --git a/packages/design-system/molecules/editor-category/EditorCategory.tsx b/packages/design-system/molecules/editor-category/EditorCategory.tsx index db18d6f..9321f3a 100644 --- a/packages/design-system/molecules/editor-category/EditorCategory.tsx +++ b/packages/design-system/molecules/editor-category/EditorCategory.tsx @@ -1,3 +1,4 @@ +import { Button } from '@roleypoly/design-system/atoms/button'; import { Popover } from '@roleypoly/design-system/atoms/popover'; import { Role } from '@roleypoly/design-system/atoms/role'; import { TextInput } from '@roleypoly/design-system/atoms/text-input'; @@ -7,7 +8,7 @@ import { RoleSearch } from '@roleypoly/design-system/molecules/role-search'; import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types'; import { sortBy, uniq } from 'lodash'; import * as React from 'react'; -import { GoPlus } from 'react-icons/go'; +import { GoHistory, GoPlus, GoTrashcan } from 'react-icons/go'; import ReactTooltip from 'react-tooltip'; import { AddRoleButton, Box, RoleContainer, Section } from './EditorCategory.styled'; @@ -17,6 +18,8 @@ export type CategoryProps = { category: CategoryT; unselectedRoles: RoleT[]; onChange: (updatedCategory: CategoryT) => void; + onReset: () => void; + onDelete: () => void; }; export const EditorCategory = (props: CategoryProps) => { @@ -43,6 +46,16 @@ export const EditorCategory = (props: CategoryProps) => { return ( +
+ +   + +
+
Category Name diff --git a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx index 891d767..0db57ec 100644 --- a/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx +++ b/packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx @@ -34,6 +34,13 @@ const resetOrder = (categories: Category[]) => const forceOrder = (categories: Category[]) => categories.map((c, index) => ({ ...c, position: index })); +const defaultCategory: Omit, 'position'> = { + name: 'New Category', + type: CategoryType.Multi, + roles: [], + hidden: false, +}; + export const ServerCategoryEditor = (props: Props) => { const [reorderMode, setReorderMode] = React.useState(false); @@ -62,12 +69,9 @@ export const ServerCategoryEditor = (props: Props) => { const categories = resetOrder(props.guild.data.categories); const newCategory: Category = { + ...defaultCategory, id: KSUID.randomSync().string, - name: 'New Category', - type: CategoryType.Multi, position: categories.length, - roles: [], - hidden: false, }; props.onChange([...categories, newCategory]); @@ -82,6 +86,25 @@ export const ServerCategoryEditor = (props: Props) => { props.onChange(resetOrder(categories)); }; + const onCategoryDelete = (category: Category) => () => { + const newCategories = props.guild.data.categories.filter((c) => c.id !== category.id); + props.onChange(resetOrder(newCategories)); + }; + + const onCategoryReset = (category: Category) => () => { + const newCategories = props.guild.data.categories.map((c) => { + if (c.id === category.id) { + return { + ...defaultCategory, + id: KSUID.randomSync().string, + position: category.position, + }; + } + return c; + }); + props.onChange(resetOrder(newCategories)); + }; + if (reorderMode) { return ; } @@ -109,6 +132,8 @@ export const ServerCategoryEditor = (props: Props) => { .filter((r) => r !== undefined) as Role[] } onChange={updateSingleCategory} + onDelete={onCategoryDelete(category)} + onReset={onCategoryReset(category)} /> ))