-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(@leav/ui): be able to play with side panel provided by explorer
- Loading branch information
Showing
30 changed files
with
866 additions
and
455 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
...rc/components/Explorer/useExplorerData.ts → ...ents/Explorer/_queries/useExplorerData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
11 changes: 11 additions & 0 deletions
11
libs/ui/src/components/Explorer/edit-settings/DisplayMode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06 | ||
| // This file is released under LGPL V3 | ||
| // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt | ||
| import {useSharedTranslation} from '_ui/hooks/useSharedTranslation'; | ||
| import {FunctionComponent} from 'react'; | ||
|
|
||
| export const DisplayMode: FunctionComponent = () => { | ||
| const {t} = useSharedTranslation(); | ||
|
|
||
| return <div>TODO</div>; | ||
| }; |
26 changes: 26 additions & 0 deletions
26
libs/ui/src/components/Explorer/edit-settings/EditSettingsContext.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06 | ||
| // This file is released under LGPL V3 | ||
| // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt | ||
| import {createContext, ReactNode} from 'react'; | ||
|
|
||
| interface IActiveSettings { | ||
| content: ReactNode; | ||
| title: string; | ||
| onClickLeftButton?: () => void; | ||
| } | ||
|
|
||
| export interface IEditSettingsContext { | ||
| setActiveSettings: (params: IActiveSettings) => void; | ||
| activeSettings: null | IActiveSettings; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export const EditSettingsContext = createContext<IEditSettingsContext>({ | ||
| setActiveSettings: () => { | ||
| throw new Error('Not implemented'); | ||
| }, | ||
| activeSettings: null, | ||
| onClose: () => { | ||
| throw new Error('Not implemented'); | ||
| } | ||
| }); |
22 changes: 22 additions & 0 deletions
22
libs/ui/src/components/Explorer/edit-settings/EditSettingsContextProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06 | ||
| // This file is released under LGPL V3 | ||
| // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt | ||
| import {FunctionComponent, useState} from 'react'; | ||
| import {EditSettingsContext, IEditSettingsContext} from './EditSettingsContext'; | ||
|
|
||
| export const EditSettingsContextProvider: FunctionComponent = ({children}) => { | ||
| const [activeSettings, setActiveSettings] = useState<IEditSettingsContext['activeSettings']>(null); | ||
| const onClose = () => setActiveSettings(null); | ||
|
|
||
| return ( | ||
| <EditSettingsContext.Provider | ||
| value={{ | ||
| activeSettings, | ||
| setActiveSettings, | ||
| onClose | ||
| }} | ||
| > | ||
| {children} | ||
| </EditSettingsContext.Provider> | ||
| ); | ||
| }; |
75 changes: 75 additions & 0 deletions
75
libs/ui/src/components/Explorer/edit-settings/SettingItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06 | ||
| // This file is released under LGPL V3 | ||
| // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt | ||
| import {KitTypography} from 'aristid-ds'; | ||
| import {FunctionComponent, ReactNode} from 'react'; | ||
| import {FaChevronRight} from 'react-icons/fa'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| const StyledValue = styled(KitTypography.Text)` | ||
| color: var(--general-utilities-disabled); | ||
| `; | ||
|
|
||
| const StyledConfigurationItem = styled.li` | ||
| list-style: none; | ||
| &:first-child { | ||
| margin-top: calc(var(--general-spacing-xs) * 1px); | ||
| } | ||
| > button { | ||
| color: var(--general-utilities-text-primary); | ||
| border: none; | ||
| background: transparent; | ||
| display: flex; | ||
| width: 100%; | ||
| height: 40px; | ||
| align-items: center; | ||
| padding: 0 calc(var(--general-spacing-xs) * 1px); | ||
| gap: calc(var(--general-spacing-xs) * 1px); | ||
| border-radius: calc(var(--general-spacing-xs) * 1px); | ||
| text-align: left; | ||
| cursor: pointer; | ||
| &:hover { | ||
| background: var(--general-utilities-main-light); | ||
| ${StyledValue} { | ||
| color: var(--general-utilities-text-primary); | ||
| } | ||
| } | ||
| .title { | ||
| flex: 1 1 auto; | ||
| } | ||
| .value { | ||
| flex: 0 1 auto; | ||
| text-align: right; | ||
| } | ||
| > svg { | ||
| flex: 0 0 calc(var(--general-spacing-s) * 1px); | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export const SettingItem: FunctionComponent<{ | ||
| icon: ReactNode; | ||
| title: string; | ||
| onClick: () => void; | ||
| value?: string; | ||
| }> = ({icon, title, value = '', onClick}) => ( | ||
| <StyledConfigurationItem> | ||
| <button onClick={onClick}> | ||
| {icon} | ||
| <KitTypography.Text size="fontSize5" ellipsis className="title"> | ||
| {title} | ||
| </KitTypography.Text> | ||
| <StyledValue size="fontSize5" ellipsis className="value"> | ||
| {value} | ||
| </StyledValue> | ||
| <FaChevronRight /> | ||
| </button> | ||
| </StyledConfigurationItem> | ||
| ); |
97 changes: 97 additions & 0 deletions
97
libs/ui/src/components/Explorer/edit-settings/SettingsPanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06 | ||
| // This file is released under LGPL V3 | ||
| // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt | ||
| import styled from 'styled-components'; | ||
| import {FunctionComponent, useState} from 'react'; | ||
| import {KitTypography} from 'aristid-ds'; | ||
| import {FaFilter, FaList, FaSortAlphaDown} from 'react-icons/fa'; | ||
| import {useSharedTranslation} from '_ui/hooks/useSharedTranslation'; | ||
| import {DisplayMode} from './DisplayMode'; | ||
| import {SettingItem} from './SettingItem'; | ||
| import {useEditSettings} from './useEditSettings'; | ||
|
|
||
| export type SettingsPanelPages = 'view-configuration' | 'display-mode'; | ||
|
|
||
| const ContentWrapperStyledDiv = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: calc(var(--general-spacing-s) * 1px); | ||
| `; | ||
|
|
||
| const ConfigurationStyledMenu = styled.menu` | ||
| padding: 0; | ||
| `; | ||
|
|
||
| export const SettingsPanel: FunctionComponent = () => { | ||
| const {t} = useSharedTranslation(); | ||
|
|
||
| const {setActiveSettings, activeSettings} = useEditSettings(); | ||
|
|
||
| const [currentPage, setCurrentPage] = useState<SettingsPanelPages>('view-configuration'); | ||
|
|
||
| const _goToAdvancedSettingsPage = (page: SettingsPanelPages) => { | ||
| if (!activeSettings) { | ||
| throw Error('Should not be able to change side pane page if there is no side panel!'); | ||
| } | ||
|
|
||
| const _changePanelPage = ({ | ||
| pageName, | ||
| title, | ||
| onClickLeftButton | ||
| }: { | ||
| pageName: SettingsPanelPages; | ||
| title: string; | ||
| onClickLeftButton?: () => void; | ||
| }) => { | ||
| setCurrentPage(pageName); | ||
| setActiveSettings({ | ||
| ...activeSettings!, | ||
| title, | ||
| onClickLeftButton | ||
| }); | ||
| }; | ||
|
|
||
| _changePanelPage({ | ||
| pageName: page, | ||
| title: t(`explorer.${page}`), | ||
| onClickLeftButton: () => { | ||
| const rootPanel = {pageName: 'view-configuration', title: t('explorer.settings')} as const; | ||
| _changePanelPage(rootPanel); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| // TODO: look for MemoryRouter | ||
|
|
||
| return ( | ||
| <ContentWrapperStyledDiv> | ||
| {currentPage === 'view-configuration' && ( | ||
| <nav> | ||
| <KitTypography.Title level="h4">{t('explorer.view-configuration')}</KitTypography.Title> | ||
| <ConfigurationStyledMenu> | ||
| <SettingItem | ||
| icon={<FaList />} | ||
| title={t('explorer.display-mode')} | ||
| onClick={() => _goToAdvancedSettingsPage('display-mode')} | ||
| /> | ||
| <SettingItem | ||
| icon={<FaFilter />} | ||
| title={t('explorer.filters')} | ||
| onClick={() => { | ||
| /* TODO: not implemented yet */ | ||
| }} | ||
| /> | ||
| <SettingItem | ||
| icon={<FaSortAlphaDown />} | ||
| title={t('explorer.sort')} | ||
| onClick={() => { | ||
| /* TODO: not implemented yet */ | ||
| }} | ||
| /> | ||
| </ConfigurationStyledMenu> | ||
| </nav> | ||
| )} | ||
| {currentPage === 'display-mode' && <DisplayMode />} | ||
| </ContentWrapperStyledDiv> | ||
| ); | ||
| }; |
41 changes: 41 additions & 0 deletions
41
libs/ui/src/components/Explorer/edit-settings/SidePanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06 | ||
| // This file is released under LGPL V3 | ||
| // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt | ||
| import {ButtonHTMLAttributes, FunctionComponent} from 'react'; | ||
| import {KitSidePanel} from 'aristid-ds'; | ||
| import {useEditSettings} from './useEditSettings'; | ||
| import {useSharedTranslation} from '_ui/hooks/useSharedTranslation'; | ||
|
|
||
| export const SidePanel: FunctionComponent = () => { | ||
| const {t} = useSharedTranslation(); | ||
|
|
||
| const {activeSettings, onClose} = useEditSettings(); | ||
|
|
||
| if (!activeSettings) { | ||
| return null; | ||
| } | ||
|
|
||
| // TODO: handle transition opening/closing on floating prop true | ||
|
|
||
| const makeA11yBackButton: ButtonHTMLAttributes<HTMLButtonElement> = { | ||
| title: String(t('explorer.back')) /* TODO: avoid transform null to 'null' */ | ||
| }; | ||
|
|
||
| return ( | ||
| <KitSidePanel | ||
| style={{zIndex: '10000'}} | ||
| initialOpen | ||
| floating | ||
| closable | ||
| idCardProps={{title: activeSettings.title}} | ||
| leftActionProps={ | ||
| activeSettings.onClickLeftButton | ||
| ? {onClick: activeSettings.onClickLeftButton, ...makeA11yBackButton} | ||
| : undefined | ||
| } | ||
| onClose={onClose} | ||
| > | ||
| {activeSettings.content} | ||
| </KitSidePanel> | ||
| ); | ||
| }; |
Oops, something went wrong.