diff --git a/packages/react-core/src/components/Timestamp/examples/TimestampBasicFormats.tsx b/packages/react-core/src/components/Timestamp/examples/TimestampBasicFormats.tsx index c009cb986ee..18df09b252a 100644 --- a/packages/react-core/src/components/Timestamp/examples/TimestampBasicFormats.tsx +++ b/packages/react-core/src/components/Timestamp/examples/TimestampBasicFormats.tsx @@ -1,7 +1,7 @@ import { Timestamp, TimestampFormat } from '@patternfly/react-core'; export const TimestampBasicFormats: React.FunctionComponent = () => { - const currentDate = new Date(); + const currentDate = new Date('2025-04-21T23:35:25'); return ( <> diff --git a/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx b/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx index e90e4404da9..9a6bb90c834 100644 --- a/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx +++ b/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx @@ -1,7 +1,7 @@ import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core'; export const TimestampDefaultTooltip: React.FunctionComponent = () => { - const currentDate = new Date(); + const currentDate = new Date('2025-04-21T14:30:00'); return ( <> diff --git a/packages/react-core/src/demos/RTL/RTL.md b/packages/react-core/src/demos/RTL/RTL.md index a2c97ba4aeb..7a989a3cacc 100644 --- a/packages/react-core/src/demos/RTL/RTL.md +++ b/packages/react-core/src/demos/RTL/RTL.md @@ -18,6 +18,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; +import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL'; import './examples/PaginatedTable.css'; diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx deleted file mode 100644 index bbe8286d4b2..00000000000 --- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx +++ /dev/null @@ -1,504 +0,0 @@ -import { Fragment, useEffect, useState } from 'react'; -import { - Avatar, - Brand, - Breadcrumb, - BreadcrumbItem, - Button, - ButtonVariant, - Card, - Content, - Divider, - Dropdown, - DropdownGroup, - DropdownItem, - DropdownList, - Icon, - Label, - Masthead, - MastheadMain, - MastheadLogo, - MastheadContent, - MastheadBrand, - MastheadToggle, - MenuToggle, - Nav, - NavItem, - NavList, - Page, - PageBreadcrumb, - PageSection, - PageSidebar, - PageSidebarBody, - PageToggleButton, - Pagination, - PaginationVariant, - Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, - Truncate -} from '@patternfly/react-core'; - -import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; -import translationsEn from './examples/translations.en.json'; -import translationsHe from './examples/translations.he.json'; -import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; -import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon'; -import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon'; -import WalkingIcon from '@patternfly/react-icons/dist/esm/icons/walking-icon'; -import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -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] = useState(translationsEn); - const [page, setPage] = useState(1); - const [perPage, setPerPage] = useState(10); - - const columns = [ - translation.table.columns.servers, - translation.table.columns.status, - translation.table.columns.location, - translation.table.columns.modified, - translation.table.columns.url - ]; - - const numRows = 25; - const getRandomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - const createRows = () => { - const rows = []; - for (let i = 0; i < numRows; i++) { - const num = i + 1; - const rowObj = { - name: translation.table.rows.node + num, - status: [ - translation.table.rows.status.stopped, - translation.table.rows.status.running, - translation.table.rows.status.down, - translation.table.rows.status.needsMaintenance - ][getRandomInteger(0, 3)], - location: [ - translation.table.rows.locations.raleigh, - translation.table.rows.locations.boston, - translation.table.rows.locations.atlanta, - translation.table.rows.locations.sanFrancisco - ][getRandomInteger(0, 3)], - lastModified: [ - translation.table.rows.lastModified.oneHr, - translation.table.rows.lastModified.threeHrs, - translation.table.rows.lastModified.fiveHrs, - translation.table.rows.lastModified.sevenMins, - translation.table.rows.lastModified.fortyTwoMins, - translation.table.rows.lastModified.twoDays, - translation.table.rows.lastModified.oneMonth - ][getRandomInteger(0, 6)], - url: 'http://www.redhat.com/en/office-locations/node' + num - }; - rows.push(rowObj); - } - - return rows; - }; - - const rows = createRows(); - const [managedRows, setManagedRows] = useState(rows); - const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10)); - const [isDirRTL, setIsDirRTL] = useState(false); - - const capitalize = (input) => input[0].toUpperCase() + input.substring(1); - - const switchTranslation = () => { - setIsDirRTL((prevIsDirRTL) => !prevIsDirRTL); - setTranslation((prevTranslation) => (prevTranslation === translationsEn ? translationsHe : translationsEn)); - }; - - useEffect(() => { - const newRows = createRows(); - setManagedRows(newRows); - setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage)); - }, [translation]); - - useEffect(() => { - const html = document.querySelector('html'); - html.dir = isDirRTL ? 'rtl' : 'ltr'; - }, [isDirRTL]); - - // Pagination logic - - const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => { - setPaginatedRows(managedRows.slice(startIdx, endIdx)); - setPage(newPage); - }; - - const handlePerPageSelect = (_evt, newPerPage, _newPage, startIdx, endIdx) => { - setPaginatedRows(managedRows.slice(startIdx, endIdx)); - setPerPage(newPerPage); - }; - - const renderPagination = (variant) => { - const { pagination } = translation; - - return ( - - ); - }; - - const breadcrumbItems = { - home: { - url: '#home' - }, - category: { - url: '#category' - }, - subCategory: { - url: 'sub-category' - } - }; - - const renderLabel = (labelText) => { - switch (labelText) { - case 'Running': - case 'רץ': - return ( - - ); - case 'Stopped': - case 'עצר': - return ( - - ); - case 'Needs maintenance': - case 'זקוק לתחזוקה': - return ( - - ); - case 'Down': - case 'מטה': - return ( - - ); - } - }; - - const toolbarItems = ( - - - - - - - {renderPagination(PaginationVariant.top)} - - - - ); - - const pageNav = ( - - ); - - const sidebar = ( - - {pageNav} - - ); - - const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); - - const kebabDropdownItems = ( - <> - }>{translation.kebabDropdown.settings} - }>{translation.kebabDropdown.help} - - ); - - const userDropdownItems = ( - <> - {translation.userDropdown.myProfile} - {translation.userDropdown.userManagement} - {translation.userDropdown.logout} - - ); - - const onDropdownToggle = () => { - setIsDropdownOpen(!isDropdownOpen); - }; - - const onDropdownSelect = () => { - setIsDropdownOpen(false); - }; - - const onKebabDropdownToggle = () => { - setIsKebabDropdownOpen(!isKebabDropdownOpen); - }; - - const onKebabDropdownSelect = () => { - setIsKebabDropdownOpen(false); - }; - - const onFullKebabToggle = () => { - setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen); - }; - - const onFullKebabSelect = () => { - setIsFullKebabDropdownOpen(false); - }; - - const masthead = ( - - - - - - - - - - - {translation.brandLanguage && {translation.brandLanguage}} - - - - - - - - - -