-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
OKTA-726074 feat: add DataComponent work feat: add DataComponent stories feat: add enableWrapping for backwards compat with hasTextWrapping refactor: alphabetize all the props refactor: reorganize the imports refactor: adding translations refactor: remove negative margin from card accessory refactor: convert sx to styled wherever needed refactor: fix some missing callback deps feat: adding row expansion to stack cards feat: add proper open mechanism to stack cards feat: updating table translations refactor: replace Box with MuiBox for native flex support refactor: implement all code review feedback feat: add docs for Data View
- Loading branch information
1 parent
03349a6
commit 19bc10b
Showing
34 changed files
with
5,991 additions
and
54 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
97 changes: 97 additions & 0 deletions
97
packages/odyssey-react-mui/src/labs/DataComponents/BulkActionsMenu.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 (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved. | ||
| * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") | ||
| * | ||
| * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
| * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * | ||
| * See the License for the specific language governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| import { memo, useCallback, Dispatch, SetStateAction } from "react"; | ||
| import { MRT_RowData, MRT_RowSelectionState } from "material-react-table"; | ||
| import styled from "@emotion/styled"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| import { Box } from "../../Box"; | ||
| import { Button } from "../../Button"; | ||
| import { ChevronDownIcon } from "../../icons.generated"; | ||
| import { MenuButton } from "../../MenuButton"; | ||
| import { UniversalProps } from "./componentTypes"; | ||
| import { | ||
| DesignTokens, | ||
| useOdysseyDesignTokens, | ||
| } from "../../OdysseyDesignTokensContext"; | ||
|
|
||
| export type BulkActionsMenuProps = { | ||
| data: MRT_RowData[]; | ||
| menuItems: UniversalProps["bulkActionMenuItems"]; | ||
| rowSelection: MRT_RowSelectionState; | ||
| setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>; | ||
| }; | ||
|
|
||
| const BulkActionsContainer = styled("div", { | ||
| shouldForwardProp: (prop) => prop !== "odysseyDesignTokens", | ||
| })<{ | ||
| odysseyDesignTokens: DesignTokens; | ||
| }>(({ odysseyDesignTokens }) => ({ | ||
| display: "flex", | ||
| gap: odysseyDesignTokens.Spacing2, | ||
| })); | ||
|
|
||
| const BulkActionsMenu = ({ | ||
| data, | ||
| menuItems, | ||
| rowSelection, | ||
| setRowSelection, | ||
| }: BulkActionsMenuProps) => { | ||
| const odysseyDesignTokens = useOdysseyDesignTokens(); | ||
| const { t } = useTranslation(); | ||
|
|
||
| const selectedRowCount = Object.values(rowSelection).filter(Boolean).length; | ||
|
|
||
| const handleSelectAll = useCallback(() => { | ||
| const rows = Object.fromEntries(data.map((row) => [row.id, true])); | ||
| setRowSelection(rows); | ||
| }, [data, setRowSelection]); | ||
|
|
||
| const handleSelectNone = useCallback(() => { | ||
| setRowSelection({}); | ||
| }, [setRowSelection]); | ||
|
|
||
| return ( | ||
| <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}> | ||
| {selectedRowCount > 0 && ( | ||
| <MenuButton | ||
| ariaLabel="More actions" | ||
| buttonLabel={t("table.actions.selectsome", { selectedRowCount })} | ||
| buttonVariant="primary" | ||
| endIcon={<ChevronDownIcon />} | ||
| > | ||
| {menuItems?.(rowSelection)} | ||
| </MenuButton> | ||
| )} | ||
| <Box> | ||
| <Button | ||
| isDisabled={selectedRowCount === data.length} // Disabled if all are selected | ||
| label={t("table.actions.selectall")} | ||
| onClick={handleSelectAll} | ||
| variant="secondary" | ||
| /> | ||
| <Button | ||
| isDisabled={selectedRowCount === 0} // Disabled if none are selected | ||
| label={t("table.actions.selectnone")} | ||
| onClick={handleSelectNone} | ||
| variant="secondary" | ||
| /> | ||
| </Box> | ||
| </BulkActionsContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const MemoizedBulkActionsMenu = memo(BulkActionsMenu); | ||
| MemoizedBulkActionsMenu.displayName = "BulkActionsMenu"; | ||
|
|
||
| export { MemoizedBulkActionsMenu as BulkActionsMenu }; |
99 changes: 99 additions & 0 deletions
99
packages/odyssey-react-mui/src/labs/DataComponents/DataStack.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,99 @@ | ||
| /*! | ||
| * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved. | ||
| * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") | ||
| * | ||
| * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
| * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * | ||
| * See the License for the specific language governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| import { memo, useMemo } from "react"; | ||
|
|
||
| import { availableStackLayouts } from "./constants"; | ||
| import { | ||
| AvailableStackLayouts, | ||
| StackProps, | ||
| UniversalProps, | ||
| } from "./componentTypes"; | ||
| import { DataView } from "./DataView"; | ||
|
|
||
| export type DataStackProps = UniversalProps & | ||
| StackProps & { | ||
| initialLayout?: (typeof availableStackLayouts)[number]; | ||
| availableLayouts?: AvailableStackLayouts; | ||
| }; | ||
|
|
||
| const DataStack = ({ | ||
| availableLayouts, | ||
| bulkActionMenuItems, | ||
| cardProps, | ||
| currentPage, | ||
| emptyPlaceholder, | ||
| errorMessage, | ||
| filters, | ||
| getData, | ||
| hasFilters, | ||
| hasPagination, | ||
| hasRowReordering, | ||
| hasRowSelection, | ||
| hasSearch, | ||
| hasSearchSubmitButton, | ||
| isEmpty, | ||
| isLoading, | ||
| isNoResults, | ||
| isRowReorderingDisabled, | ||
| maxGridColumns, | ||
| noResultsPlaceholder, | ||
| onChangeRowSelection, | ||
| paginationType, | ||
| resultsPerPage, | ||
| rowActionMenuItems, | ||
| searchDelayTime, | ||
| totalRows, | ||
| }: DataStackProps) => { | ||
| const stackOptions = useMemo( | ||
| () => ({ | ||
| cardProps, | ||
| maxGridColumns, | ||
| rowActionMenuItems, | ||
| }), | ||
| [cardProps, maxGridColumns, rowActionMenuItems], | ||
| ); | ||
|
|
||
| return ( | ||
| <DataView | ||
| availableLayouts={availableLayouts} | ||
| bulkActionMenuItems={bulkActionMenuItems} | ||
| currentPage={currentPage} | ||
| emptyPlaceholder={emptyPlaceholder} | ||
| errorMessage={errorMessage} | ||
| filters={filters} | ||
| getData={getData} | ||
| hasFilters={hasFilters} | ||
| hasPagination={hasPagination} | ||
| hasRowReordering={hasRowReordering} | ||
| hasSearch={hasSearch} | ||
| hasSearchSubmitButton={hasSearchSubmitButton} | ||
| hasRowSelection={hasRowSelection} | ||
| isEmpty={isEmpty} | ||
| isLoading={isLoading} | ||
| isNoResults={isNoResults} | ||
| isRowReorderingDisabled={isRowReorderingDisabled} | ||
| noResultsPlaceholder={noResultsPlaceholder} | ||
| onChangeRowSelection={onChangeRowSelection} | ||
| paginationType={paginationType} | ||
| resultsPerPage={resultsPerPage} | ||
| searchDelayTime={searchDelayTime} | ||
| stackOptions={stackOptions} | ||
| totalRows={totalRows} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const MemoizedDataStack = memo(DataStack); | ||
| MemoizedDataStack.displayName = "DataStack"; | ||
|
|
||
| export { MemoizedDataStack as DataStack }; |
Oops, something went wrong.