-
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.
81 Adds simple context menu (WIP) and updates the sorting mechanism f…
…or tables in the whole app
- Loading branch information
1 parent
d95a0bb
commit 410c68e
Showing
13 changed files
with
218 additions
and
72 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
151 changes: 131 additions & 20 deletions
151
...s/orchestrator-ui-components/src/components/WFOTable/WFOBasicTable/WFOTableHeaderCell.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 |
|---|---|---|
| @@ -1,32 +1,143 @@ | ||
| import React, { FC, ReactNode } from 'react'; | ||
| import React, { FC, ReactNode, useState } from 'react'; | ||
|
|
||
| import { SortOrder } from '../../../types'; | ||
| import { WFOSortDirectionIcon } from './WFOSortDirectionIcon'; | ||
| import { | ||
| EuiFieldSearch, | ||
| EuiHorizontalRule, | ||
| EuiPopover, | ||
| EuiText, | ||
| useGeneratedHtmlId, | ||
| } from '@elastic/eui'; | ||
| import { WFOSortAsc, WFOSortDesc } from '../../../icons'; | ||
| import { useOrchestratorTheme } from '../../../hooks'; | ||
|
|
||
| export type WFOTableHeaderCellProps = { | ||
| sortDirection?: SortOrder; | ||
| onClick?: () => void; | ||
| sortOrder?: SortOrder; | ||
| onSetSortOrder?: (updatedSortOrder: SortOrder) => void; | ||
| isSortable?: boolean; | ||
| children: ReactNode; | ||
| }; | ||
|
|
||
| // Todo add dropdown logic here | ||
| export const WFOTableHeaderCell: FC<WFOTableHeaderCellProps> = ({ | ||
| sortDirection, | ||
| sortOrder, | ||
| children, | ||
| onClick, | ||
| isSortable = true, | ||
| }) => ( | ||
| <div | ||
| css={{ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| cursor: isSortable ? 'pointer' : 'not-allowed', | ||
| }} | ||
| onClick={isSortable ? onClick : undefined} | ||
| > | ||
| <div>{children}</div> | ||
| {isSortable && sortDirection ? ( | ||
| <WFOSortDirectionIcon sortDirection={sortDirection} /> | ||
| ) : null} | ||
| </div> | ||
| ); | ||
| onSetSortOrder, | ||
| }) => { | ||
| const { theme } = useOrchestratorTheme(); | ||
| const smallContextMenuPopoverId = useGeneratedHtmlId({ | ||
| prefix: 'smallContextMenuPopover', | ||
| }); | ||
|
|
||
| const [isPopoverOpen, setPopover] = useState(false); | ||
| const handleButtonClick = () => setPopover(!isPopoverOpen); | ||
| const handleClosePopover = () => setPopover(false); | ||
|
|
||
| const PopoverButton = () => ( | ||
| <button onClick={handleButtonClick}> | ||
| <div | ||
| css={{ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| cursor: isSortable ? 'pointer' : 'not-allowed', | ||
| }} | ||
| > | ||
| <div css={{ fontWeight: theme.font.weight.semiBold }}> | ||
| {children} | ||
| </div> | ||
| {sortOrder && ( | ||
| <WFOSortDirectionIcon sortDirection={sortOrder} /> | ||
| )} | ||
| </div> | ||
| </button> | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiPopover | ||
| id={smallContextMenuPopoverId} | ||
| button={<PopoverButton />} | ||
| isOpen={isPopoverOpen} | ||
| closePopover={handleClosePopover} | ||
| panelPaddingSize="none" | ||
| anchorPosition="downLeft" | ||
| > | ||
| <div | ||
| css={{ | ||
| margin: 12, | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <EuiText | ||
| size="xs" | ||
| css={{ fontWeight: theme.font.weight.medium }} | ||
| > | ||
| Title and controls | ||
| </EuiText> | ||
| <div css={{ display: 'flex', alignItems: 'center' }}> | ||
| <button | ||
| css={{ display: 'flex', alignItems: 'center' }} | ||
| onClick={() => | ||
| onSetSortOrder && onSetSortOrder(SortOrder.ASC) | ||
| } | ||
| > | ||
| <WFOSortAsc | ||
| color={ | ||
| sortOrder === SortOrder.ASC | ||
| ? theme.colors.title | ||
| : theme.colors.lightShade | ||
| } | ||
| /> | ||
| </button> | ||
| <button | ||
| css={{ display: 'flex', alignItems: 'center' }} | ||
| onClick={() => | ||
| onSetSortOrder && onSetSortOrder(SortOrder.DESC) | ||
| } | ||
| > | ||
| <WFOSortDesc | ||
| color={ | ||
| sortOrder === SortOrder.DESC | ||
| ? theme.colors.title | ||
| : theme.colors.lightShade | ||
| } | ||
| /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <EuiHorizontalRule margin="none" /> | ||
| <div css={{ margin: 12 }}> | ||
| <EuiFieldSearch | ||
| placeholder="Search" | ||
| // value={value} | ||
| // onChange={(e) => onChange(e)} | ||
| isClearable={false} | ||
| /> | ||
| </div> | ||
| </EuiPopover> | ||
| ); | ||
| }; | ||
|
|
||
| // export const WFOTableHeaderCell: FC<WFOTableHeaderCellProps> = ({ | ||
| // sortDirection, | ||
| // children, | ||
| // onClick, | ||
| // isSortable = true, | ||
| // }) => ( | ||
| // <div | ||
| // css={{ | ||
| // display: 'flex', | ||
| // alignItems: 'center', | ||
| // cursor: isSortable ? 'pointer' : 'not-allowed', | ||
| // }} | ||
| // onClick={isSortable ? onClick : undefined} | ||
| // > | ||
| // <div>{children}</div> | ||
| // {isSortable && sortDirection ? ( | ||
| // <WFOSortDirectionIcon sortDirection={sortDirection} /> | ||
| // ) : null} | ||
| // </div> | ||
| // ); |
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
32 changes: 32 additions & 0 deletions
32
packages/orchestrator-ui-components/src/icons/WFOSortAsc.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,32 @@ | ||
| import React, { FC } from 'react'; | ||
| import { WFOIconProps } from './WFOIconProps'; | ||
|
|
||
| export const WFOSortAsc: FC<WFOIconProps> = ({ | ||
| width = 24, | ||
| height = 24, | ||
| color = '#000000', | ||
| }) => ( | ||
| <svg | ||
| width={width} | ||
| height={height} | ||
| viewBox="0 0 24 24" | ||
| version="1.1" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <title>icon/sort-asc</title> | ||
| <g | ||
| id="Symbols" | ||
| stroke="none" | ||
| strokeWidth="1" | ||
| fill="none" | ||
| fillRule="evenodd" | ||
| > | ||
| <g id="icon/sort-asc" fill={color} fillRule="nonzero"> | ||
| <path | ||
| d="M5,5 C4.44772,5 4,5.44772 4,6 C4,6.55228 4.44772,7 5,7 L16,7 C16.5523,7 17,6.55228 17,6 C17,5.44772 16.5523,5 16,5 L5,5 Z M5,9 C4.44772,9 4,9.44772 4,10 C4,10.55228 4.44772,11 5,11 L10,11 C10.55228,11 11,10.55228 11,10 C11,9.44772 10.55228,9 10,9 L5,9 Z M5,13 C4.44772,13 4,13.4477 4,14 C4,14.5523 4.44772,15 5,15 L9,15 C9.55228,15 10,14.5523 10,14 C10,13.4477 9.55228,13 9,13 L5,13 Z M15.0000025,18 C15.0000025,18.5523 15.4477,19 16.0000025,19 C16.5523,19 17.0000025,18.5523 17.0000025,18 L17.0000025,12.4142 L18.2929,13.7071 C18.6834,14.0976 19.3166,14.0976 19.7071,13.7071 C20.0976,13.3166 20.0976,12.6834 19.7071,12.2929 L16.7071,9.29289 C16.5196,9.10536 16.2652,9 16.0000025,9 C15.7348,9 15.4804,9.10536 15.2929,9.29289 L12.2929,12.2929 C11.90237,12.6834 11.90237,13.3166 12.2929,13.7071 C12.6834,14.0976 13.3166,14.0976 13.7071,13.7071 L15.0000025,12.4142 L15.0000025,18 Z" | ||
| id="Combined-Shape" | ||
| ></path> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| ); |
Oops, something went wrong.