roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 09:59:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

category skeleton

Browse source
This commit is contained in:
41666 2021-07-06 14:42:39 -05:00
parent 098a4133df
commit 28bebd531f
4 changed files with 59 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/design-system/molecules/editor-category/EditorCategory.styled.ts
View file

@ -1,4 +1,5 @@
import styled from 'styled-components';
import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
import styled, { css } from 'styled-components';
export const Head = styled.div`
margin: 7px 5px;
@ -18,3 +19,18 @@ export const HeadSub = styled.div`
flex-shrink: 0;
margin-top: -4px;
`;
export const Box = styled.div`
display: flex;
align-items: top;
justify-content: space-between;
flex-wrap: wrap;
`;
export const Section = styled.div<{ big?: boolean }>`
padding: 7px 5px;
flex: 1 2 ${(props) => (props.big ? '100%' : '50%')};
${onSmallScreen(css`
flex-basis: 100%;
`)}
`;

68
packages/design-system/molecules/editor-category/EditorCategory.tsx
View file

@ -1,50 +1,60 @@
import { TextInput } from '@roleypoly/design-system/atoms/text-input';
import { Toggle } from '@roleypoly/design-system/atoms/toggle';
import { Text } from '@roleypoly/design-system/atoms/typography';
import { Category as CategoryT, Role as RoleT } from '@roleypoly/types';
import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
import * as React from 'react';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { Head, HeadTitle } from './EditorCategory.styled';
import { Box, Section } from './EditorCategory.styled';
export type CategoryProps = {
title: string;
roles: RoleT[];
category: CategoryT;
selectedRoles: string[];
onChange: (updatedCategory: CategoryT) => void;
type: 'single' | 'multi';
};
const Category = styled.div`
display: flex;
flex-wrap: wrap;
`;
const Container = styled.div`
overflow: hidden;
padding: 5px;
`;
export const EditorCategory = (props: CategoryProps) => {
const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
props.onChange({ ...props.category, [key]: value });
};
return (
<>
<Head>
<HeadTitle>
<div>
<Text>Category Name</Text>
</div>
<TextInput
value={props.category.name}
onChange={(event) => updateValue('name', event.target.value)}
/>
</HeadTitle>
</Head>
<Category></Category>
<Box>
<Section>
<div>
<Text>Category Name</Text>
</div>
<TextInput
value={props.category.name}
onChange={(event) => updateValue('name', event.target.value)}
/>
</Section>
<Section>
<div>
<Text>Options</Text>
</div>
<div>
<Toggle
state={props.category.hidden}
onChange={(value) => updateValue('hidden', value)}
>
Show this category to members
</Toggle>
<Toggle
state={props.category.type === CategoryType.Multi}
onChange={(value) =>
updateValue('type', value ? CategoryType.Multi : CategoryType.Single)
}
>
Let members pick more than one role
</Toggle>
</div>
</Section>
<Section big>aa</Section>
<ReactTooltip id={props.category.id} />
</>
</Box>
);
};