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
patternfly · Mar 28, 2024 · 56c4605 · 56c4605
1 parent 544cbe8
commit 56c4605
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 23 deletions.
diff --git 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
@@ -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/...src/demos/RTL/examples/PaginatedTable.jsx → ...src/demos/RTL/examples/PaginatedTable.tsx b/...src/demos/RTL/examples/PaginatedTable.jsx → ...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<Translation>(translationsEn);
+ const [page, setPage] = React.useState<number>(1);
+ const [perPage, setPerPage] = React.useState<number>(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<Row[]>(rows.slice(0, 10));
+ const [isDirRTL, setIsDirRTL] = React.useState<boolean>(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 = () => {
  </PageSidebar>
  );
 
- const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
- const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
- const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+ const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
+ const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState<boolean>(false);
+ const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState<boolean>(false);
 
  const kebabDropdownItems = (
  <>
@@ -434,15 +458,17 @@ export const PaginatedTableAction = () => {
  </Masthead>
  );
 
+ const breadcrumbItemsLength = Object.keys(breadcrumbItems).length;
+
  return (
  <React.Fragment>
  <Page sidebar={sidebar} header={masthead} isManagedSidebar>
  <PageBreadcrumb>
  <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
- {Object.keys(breadcrumbItems).map((key, idx, arr) => (
+ {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => (
  <BreadcrumbItem key={idx} isActive={arr.length - 1 === idx} to={`${breadcrumbItems[key].url}`}>
  {translation.breadcrumbs[key]}
- {breadcrumbItems.length}
+ {breadcrumbItemsLength}
  </BreadcrumbItem>
  ))}
  </Breadcrumb>
@@ -465,7 +491,7 @@ export const PaginatedTableAction = () => {
  </Tr>
  </Thead>
  <Tbody>
- {paginatedRows.map((row, rowIndex) => (
+ {paginatedRows.map((row: Row, rowIndex: number) => (
  <Tr key={rowIndex}>
  <>
  {Object.entries(row).map(([key, value]) => {