From 56c46053c15b772855774604ac511ddeb2d0be33 Mon Sep 17 00:00:00 2001 From: Ajay Pratap Date: Fri, 29 Mar 2024 01:06:47 +0530 Subject: [PATCH] Convert right-to-left demo to TS (#10164) * covert RTL demo to TS * update component type jsx to tsx * update type js to ts * fix doc build job * implement review comments * fix types --- .gitignore | 1 + packages/react-core/src/demos/RTL/RTL.md | 2 +- ...{PaginatedTable.jsx => PaginatedTable.tsx} | 70 +++++++++++++------ 3 files changed, 50 insertions(+), 23 deletions(-) rename packages/react-core/src/demos/RTL/examples/{PaginatedTable.jsx => PaginatedTable.tsx} (89%) diff --git a/.gitignore b/.gitignore index ac4282c4b23..07168936c32 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ lerna-debug.log .vscode # For vim *.swp +.yarn diff --git a/packages/react-core/src/demos/RTL/RTL.md b/packages/react-core/src/demos/RTL/RTL.md index 7285d2b3f36..cec5a0441d4 100644 --- a/packages/react-core/src/demos/RTL/RTL.md +++ b/packages/react-core/src/demos/RTL/RTL.md @@ -26,6 +26,6 @@ This demonstrates how the UI adapts to the writing mode of the page. ### Paginated table -```js file="./examples/PaginatedTable.jsx" isFullscreen +```js file="./examples/PaginatedTable.tsx" isFullscreen ``` diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx similarity index 89% rename from packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx rename to packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx index 3199822b294..f0f005e46a5 100644 --- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx +++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx @@ -58,10 +58,22 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; -export const PaginatedTableAction = () => { - const [translation, setTranslation] = React.useState(translationsEn); - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(10); +interface Row { + name: string; + status: string; + location: string; + lastModified: string; + url: string; +} + +interface Translation { + [key: string]: any; +} + +export const PaginatedTableAction: React.FunctionComponent = () => { + const [translation, setTranslation] = React.useState(translationsEn); + const [page, setPage] = React.useState(1); + const [perPage, setPerPage] = React.useState(10); const columns = [ translation.table.columns.servers, @@ -71,13 +83,13 @@ export const PaginatedTableAction = () => { translation.table.columns.url ]; - const numRows = 25; - const getRandomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; + const numRows: number = 25; + const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min; const createRows = () => { - const rows = []; + const rows: Row[] = []; for (let i = 0; i < numRows; i++) { const num = i + 1; - const rowObj = { + const rowObj: Row = { name: translation.table.rows.node + num, status: [ translation.table.rows.status.stopped, @@ -110,14 +122,14 @@ export const PaginatedTableAction = () => { const rows = createRows(); const [managedRows, setManagedRows] = React.useState(rows); - const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10)); - const [isDirRTL, setIsDirRTL] = React.useState(false); + const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10)); + const [isDirRTL, setIsDirRTL] = React.useState(false); - const capitalize = (input) => input[0].toUpperCase() + input.substring(1); + const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1); const switchTranslation = () => { setIsDirRTL((prevIsDirRTL) => !prevIsDirRTL); - setTranslation((prevTranslation) => (prevTranslation === translationsEn ? translationsHe : translationsEn)); + setTranslation((prevTranslation: string) => (prevTranslation === translationsEn ? translationsHe : translationsEn)); }; React.useEffect(() => { @@ -133,17 +145,29 @@ export const PaginatedTableAction = () => { // Pagination logic - const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => { + const handleSetPage = ( + _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPage: number, + _perPage: number | undefined, + startIdx: number | undefined, + endIdx: number | undefined + ) => { setPaginatedRows(managedRows.slice(startIdx, endIdx)); setPage(newPage); }; - const handlePerPageSelect = (_evt, newPerPage, _newPage, startIdx, endIdx) => { + const handlePerPageSelect = ( + _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPerPage: number, + _newPage: number, + startIdx: number | undefined, + endIdx: number | undefined + ) => { setPaginatedRows(managedRows.slice(startIdx, endIdx)); setPerPage(newPerPage); }; - const renderPagination = (variant) => { + const renderPagination = (variant: PaginationVariant) => { const { pagination } = translation; return ( @@ -181,7 +205,7 @@ export const PaginatedTableAction = () => { } }; - const renderLabel = (labelText) => { + const renderLabel = (labelText: string) => { switch (labelText) { case 'Running': case 'רץ': @@ -280,9 +304,9 @@ export const PaginatedTableAction = () => { ); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); + const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); const kebabDropdownItems = ( <> @@ -434,15 +458,17 @@ export const PaginatedTableAction = () => { ); + const breadcrumbItemsLength = Object.keys(breadcrumbItems).length; + return ( - {Object.keys(breadcrumbItems).map((key, idx, arr) => ( + {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => ( {translation.breadcrumbs[key]} - {breadcrumbItems.length} + {breadcrumbItemsLength} ))} @@ -465,7 +491,7 @@ export const PaginatedTableAction = () => { - {paginatedRows.map((row, rowIndex) => ( + {paginatedRows.map((row: Row, rowIndex: number) => ( <> {Object.entries(row).map(([key, value]) => {