Skip to content

Commit

Permalink
refactor: ♻️ moved some stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@espenkalle
espenkalle committed Oct 11, 2023
1 parent 5b7e881 commit 7096234
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 87 deletions.
68 changes: 13 additions & 55 deletions packages/garden/src/lib/components/Garden.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ import { GetIdentifier } from '../types/getIdentifier';
import { GardenConfigProvider } from '../context/gardenConfig';
import { GardenContextProvider } from '../context/gardenContext';
import styled from 'styled-components';
import { GroupingSelector } from './GroupingSelector';
import { GroupingSelector } from './GroupingSelector/GroupingSelector';
import { StyledViewSettings } from './ViewSettings/viewSettings.styles';
import { ViewSettings } from './ViewSettings/ViewSettings';

export type GardenMetaRequest = {
groupingKeys: string[];
Expand Down Expand Up @@ -70,7 +72,6 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
}: GardenProps<TData, TContext>): JSX.Element | null {
const client = useRef(new QueryClient());
const [groupingKeys, setGroupingKeys] = useState<string[]>(initialGrouping);
const [toggle, setToggle] = useState(false);

const [timeInterval, updateTimeInterval] = useState<string | null>(initialTimeInterval ?? null);
const onChangetimeInterval = (timeInterval: string | null) => {
Expand Down Expand Up @@ -103,62 +104,19 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
>
<VirtualContainer context={context as TContext} dataSource={dataSource} />
</GardenConfigProvider>
<StyledAnimatedDiv expanded={toggle}>
{toggle ? (
<>
<div
style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between' }}
>
<Button variant="ghost_icon" onClick={() => setToggle((state) => !state)}>
<Icon data={arrow_forward_ios}></Icon>
</Button>
<p style={{ marginRight: '8px', fontSize: '16px', fontWeight: '500' }}>View Settings</p>
</div>
<GroupingSelector
groupingKeys={groupingKeys}
setGroupingKeys={setGroupingKeys}
timeInterval={timeInterval}
onChangeTimeInterval={onChangetimeInterval}
dateVariant={dateVariant}
onChangeDateVarient={onChangeDateVariant}
context={context as any}
dataSource={dataSource}
/>
</>
) : (
<>
<Button variant="ghost_icon" onClick={() => setToggle((state) => !state)}>
<Icon data={arrow_back_ios}></Icon>
</Button>
<VerticalText>View Settings</VerticalText>
</>
)}
</StyledAnimatedDiv>
<ViewSettings
dataSource={dataSource}
dateVariant={dateVariant}
groupingKeys={groupingKeys}
timeInterval={timeInterval}
context={context}
onChangeDateVariant={onChangeDateVariant}
onChangeTimeInterval={onChangetimeInterval}
setGroupingKeys={setGroupingKeys}
/>
</GardenContextProvider>
</Suspense>
</ErrorBoundary>
</QueryClientProvider>
);
}

type StyledAnimatedDivProps = {
expanded: boolean;
};

const StyledAnimatedDiv = styled.div<StyledAnimatedDivProps>`
width: ${(props) => (props.expanded ? '300px' : '45px')};
box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1);
margin-left: 10px;
padding: 10px;
transition: width 0.1s ease;
overflow: hidden;
`;
const VerticalText = styled.div`
transform: rotate(90deg);
white-space: nowrap;
display: flex;
align-items: center;
margin-top: 3rem;
justify-content: center;
font-size: 16px;
`;
41 changes: 9 additions & 32 deletions ...n/src/lib/components/GroupingSelector.tsx → ...nts/GroupingSelector/GroupingSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import { Autocomplete, Divider, Radio } from '@equinor/eds-core-react';
import { useQuery } from '@tanstack/react-query';
import { Fragment, useRef } from 'react';
import styled from 'styled-components';
import { GardenDataSource } from './Garden';
import { GroupingOption } from '../types';
import { GroupingOption } from '../../types';
import { GardenDataSource } from '../Garden';
import {
RadioCategoryWrapper,
RadioWrapper,
StyledAutoCompleteWrapper,
StyledGroupHeader,
StyledSubGroupHeader,
} from './groupingSelector.styles';

type GroupingSelectorProps<TContext> = {
dataSource: GardenDataSource<TContext>;
Expand Down Expand Up @@ -144,32 +150,3 @@ export function GroupingSelector<TContext>({
</>
);
}

export const StyledAutoCompleteWrapper = styled.div`
display: flex;
align-items: center;
flex-direction: column;
gap: 1em;
`;

export const StyledGroupHeader = styled.div`
font-weight: 500px;
padding-top: 2rem;
`;
export const StyledSubGroupHeader = styled.div`
padding-left: 1rem;
padding-top: 1rem;
`;
export const RadioWrapper = styled.div`
display: flex;
align-items: start;
flex-direction: column;
gap: 1em;
`;

export const RadioCategoryWrapper = styled.div`
display: flex;
align-items: start;
flex-direction: column;
gap: 0.1em;
`;
30 changes: 30 additions & 0 deletions packages/garden/src/lib/components/GroupingSelector/groupingSelector.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import styled from 'styled-components';

export const StyledAutoCompleteWrapper = styled.div`
display: flex;
align-items: center;
flex-direction: column;
gap: 1em;
`;

export const StyledGroupHeader = styled.div`
font-weight: 500px;
padding-top: 2rem;
`;
export const StyledSubGroupHeader = styled.div`
padding-left: 1rem;
padding-top: 1rem;
`;
export const RadioWrapper = styled.div`
display: flex;
align-items: start;
flex-direction: column;
gap: 1em;
`;

export const RadioCategoryWrapper = styled.div`
display: flex;
align-items: start;
flex-direction: column;
gap: 0.1em;
`;
65 changes: 65 additions & 0 deletions packages/garden/src/lib/components/ViewSettings/ViewSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Button, Icon } from '@equinor/eds-core-react';
import { useState } from 'react';

import { arrow_back_ios, arrow_forward_ios, chevron_down, chevron_up } from '@equinor/eds-icons';
import { GardenDataSource } from '../Garden';
import { GroupingSelector } from '../GroupingSelector/GroupingSelector';
import { StyledViewSettings, VerticalText } from './viewSettings.styles';

interface ViewSettingsProps<TData extends Record<PropertyKey, unknown>, TContext = undefined> {
dataSource: GardenDataSource<TContext>;
context?: TContext;
groupingKeys: string[];
timeInterval: string | null;
dateVariant: string | null;
onChangeTimeInterval: (timeInterval: string | null) => void;
onChangeDateVariant: (dateVariant: string | null) => void;
setGroupingKeys: (keys: string[]) => void;
}

Icon.add({ chevron_down, chevron_up });

export function ViewSettings<TData extends Record<PropertyKey, unknown>, TContext = undefined>({
dataSource,
context,
groupingKeys,
timeInterval,
dateVariant,
onChangeTimeInterval,
onChangeDateVariant,
setGroupingKeys,
}: ViewSettingsProps<TData, TContext>): JSX.Element | null {
const [toggle, setToggle] = useState(false);

return (
<StyledViewSettings expanded={toggle}>
{toggle ? (
<>
<div style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
<Button variant="ghost_icon" onClick={() => setToggle((state) => !state)}>
<Icon data={arrow_forward_ios}></Icon>
</Button>
<p style={{ marginRight: '8px', fontSize: '16px', fontWeight: '500' }}>View Settings</p>
</div>
<GroupingSelector
groupingKeys={groupingKeys}
setGroupingKeys={setGroupingKeys}
timeInterval={timeInterval}
onChangeTimeInterval={onChangeTimeInterval}
dateVariant={dateVariant}
onChangeDateVarient={onChangeDateVariant}
context={context as any}
dataSource={dataSource}
/>
</>
) : (
<>
<Button variant="ghost_icon" onClick={() => setToggle((state) => !state)}>
<Icon data={arrow_back_ios}></Icon>
</Button>
<VerticalText>View Settings</VerticalText>
</>
)}
</StyledViewSettings>
);
}
23 changes: 23 additions & 0 deletions packages/garden/src/lib/components/ViewSettings/viewSettings.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import styled from 'styled-components';

type StyledViewSettingsProps = {
expanded: boolean;
};

export const StyledViewSettings = styled.div<StyledViewSettingsProps>`
width: ${(props) => (props.expanded ? '300px' : '45px')};
box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1);
margin-left: 10px;
padding: 10px;
transition: width 0.1s ease;
overflow: hidden;
`;
export const VerticalText = styled.div`
transform: rotate(90deg);
white-space: nowrap;
display: flex;
align-items: center;
margin-top: 3rem;
justify-content: center;
font-size: 16px;
`;

0 comments on commit 7096234

Please sign in to comment.