no longer pass in "direction", but use localStorage

paranext · Dec 19, 2024 · c62d871 · c62d871
1 parent ca04f41
commit c62d871
Show file tree

Hide file tree

Showing 54 changed files with 540 additions and 483 deletions.
diff --git a/...ble-react/src/components/advanced/book-chapter-control/book-chapter-control.component.tsx b/...ble-react/src/components/advanced/book-chapter-control/book-chapter-control.component.tsx
@@ -11,7 +11,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/shadcn-ui/dropdown-menu';
-import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import { Canon } from '@sillsdev/scripture';
 import { ScriptureReference, getChaptersForBook } from 'platform-bible-utils';
 import {
@@ -29,8 +29,6 @@ type BookTypeLabels = {
 type BookChapterControlProps = {
   scrRef: ScriptureReference;
   handleSubmit: (scrRef: ScriptureReference) => void;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 };
 
 const ALL_BOOK_IDS = Canon.allBookIds;
@@ -104,7 +102,8 @@ function getBookIdFromEnglishName(bookName: string): string | undefined {
   return undefined;
 }
 
-function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterControlProps) {
+function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps) {
+  const dir: Direction = readDirection();
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedBookId, setSelectedBookId] = useState<string>(
     Canon.bookNumberToId(scrRef.bookNum),
@@ -263,13 +262,13 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
       }
 
       const upOneChapter =
-        (key === 'ArrowRight' && !direction) ||
-        (key === 'ArrowRight' && direction === 'ltr') ||
-        (key === 'ArrowLeft' && direction === 'rtl');
+        (key === 'ArrowRight' && !dir) ||
+        (key === 'ArrowRight' && dir === 'ltr') ||
+        (key === 'ArrowLeft' && dir === 'rtl');
       const downOneChapter =
-        (key === 'ArrowLeft' && !direction) ||
-        (key === 'ArrowLeft' && direction === 'ltr') ||
-        (key === 'ArrowRight' && direction === 'rtl');
+        (key === 'ArrowLeft' && !dir) ||
+        (key === 'ArrowLeft' && dir === 'ltr') ||
+        (key === 'ArrowRight' && dir === 'rtl');
       let chapterOffSet = 0;
       if (upOneChapter) {
         if (highlightedChapter < fetchEndChapter(highlightedBookId)) {
@@ -355,19 +354,18 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
             }}
             handleSubmit={handleInputSubmit}
             placeholder={`${Canon.bookNumberToEnglishName(scrRef.bookNum)} ${scrRef.chapterNum}:${scrRef.verseNum}`}
-            direction={direction}
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           className="tw-m-1 tw-overflow-y-auto tw-p-0 tw-font-normal tw-text-foreground/80"
           // Need to get over the floating window z-index 200
           style={{ width: '233px', maxHeight: '500px', zIndex: '250' }}
           onKeyDown={handleKeyDownContent}
-          align={direction === 'ltr' ? 'start' : 'end'}
+          align={dir === 'ltr' ? 'start' : 'end'}
           ref={contentRef}
         >
           {/* work around until DropdownMenuContent supports a dir prop */}
-          <div dir={direction} className={cn({ 'tw-ps-2': direction === 'rtl' })}>
+          <div className="rtl:tw-ps-2">
             <GoToMenuItem
               handleSort={() => console.log('sorting')}
               handleLocationHistory={() => console.log('location history')}
@@ -393,7 +391,6 @@ function BookChapterControl({ scrRef, handleSubmit, direction }: BookChapterCont
                           ref={(element: HTMLDivElement) => {
                             if (selectedBookId === bookId) menuItemRef.current = element;
                           }}
-                          direction={direction}
                         >
                           <ChapterSelect
                             handleSelectChapter={handleSelectChapter}

diff --git a/...bible-react/src/components/advanced/book-chapter-control/book-chapter-input.component.tsx b/...bible-react/src/components/advanced/book-chapter-control/book-chapter-input.component.tsx
@@ -2,6 +2,7 @@ import { FocusEventHandler, forwardRef, KeyboardEvent, MouseEventHandler } from
 import { History } from 'lucide-react';
 import { Input } from '@/components/shadcn-ui/input';
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 export type BookChapterInputProps = {
   handleSearch: (searchString: string) => void;
@@ -11,23 +12,15 @@ export type BookChapterInputProps = {
   onFocus?: FocusEventHandler<HTMLInputElement>;
   value: string;
   placeholder: string;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 };
 
 // Shadcn Input sets type to "button"- HAVE to prop spread before setting type
 const BookChapterInput = forwardRef<HTMLInputElement, BookChapterInputProps>(
   (
-    {
-      handleSearch,
-      handleKeyDown,
-      handleOnClick,
-      handleSubmit,
-      direction = 'ltr',
-      ...props
-    }: BookChapterInputProps,
+    { handleSearch, handleKeyDown, handleOnClick, handleSubmit, ...props }: BookChapterInputProps,
     ref,
   ) => {
+    const dir: Direction = readDirection();
     return (
       <div className="tw-relative">
         <Input
@@ -49,8 +42,8 @@ const BookChapterInput = forwardRef<HTMLInputElement, BookChapterInputProps>(
         <History
           className={cn(
             'tw-absolute tw-top-1/2 tw-h-4 tw-w-4 tw--translate-y-1/2 tw-transform tw-cursor-pointer tw-text-muted-foreground',
-            { 'tw-right-3': direction === 'ltr' },
-            { 'tw-left-3 tw-right-auto': direction === 'rtl' },
+            { 'tw-right-3': dir === 'ltr' },
+            { 'tw-left-3 tw-right-auto': dir === 'rtl' },
           )}
           onClick={() => {
             // eslint-disable-next-line no-console

diff --git a/...orm-bible-react/src/components/advanced/book-chapter-control/book-menu-item.component.tsx b/...orm-bible-react/src/components/advanced/book-chapter-control/book-menu-item.component.tsx
@@ -2,6 +2,7 @@ import { Canon } from '@sillsdev/scripture';
 import { PropsWithChildren, KeyboardEvent, forwardRef } from 'react';
 import { DropdownMenuItem } from '@/components/shadcn-ui/dropdown-menu';
 import { cn } from '@/utils/shadcn-ui.util';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 export type BookType = 'OT' | 'NT' | 'DC';
 
@@ -25,8 +26,6 @@ type BookMenuItemProps = PropsWithChildren<{
    * coordinated to genre
    */
   bookType: BookType;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 }>;
 
 const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
@@ -39,19 +38,22 @@ const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
       handleKeyDown,
       bookType,
       children,
-      direction,
     }: BookMenuItemProps,
     ref,
   ) => {
+    const dir: Direction = readDirection();
     return (
       <DropdownMenuItem
         ref={ref}
         key={bookId}
         textValue={bookId}
-        className={cn('tw-mx-1 tw-px-1 tw-font-normal tw-text-foreground/80', {
-          // Overriding `data-[highlighted]` changes the default gray background that is normally shown on hover
-          'tw-bg-amber-50 tw-text-yellow-900 data-[highlighted]:tw-bg-amber-100': isSelected,
-        })}
+        className={cn(
+          'tw-mx-1 tw-flex-col tw-items-start tw-px-1 tw-font-normal tw-text-foreground/80',
+          {
+            // Overriding `data-[highlighted]` changes the default gray background that is normally shown on hover
+            'tw-bg-amber-50 tw-text-yellow-900 data-[highlighted]:tw-bg-amber-100': isSelected,
+          },
+        )}
         onSelect={(event: Event) => {
           // preventDefault() here prevents the entire dropdown menu from closing when selecting this item
           event.preventDefault();
@@ -62,7 +64,7 @@ const BookMenuItem = forwardRef<HTMLDivElement, BookMenuItemProps>(
         }}
         onFocus={handleHighlightBook}
         onMouseMove={handleHighlightBook}
-        dir={direction}
+        dir={dir}
       >
         <span
           className={cn(

diff --git a/lib/platform-bible-react/src/components/advanced/book-selector.component.tsx b/lib/platform-bible-react/src/components/advanced/book-selector.component.tsx
@@ -62,7 +62,6 @@ export default function BookSelector({
   startChapter,
   handleSelectStartChapter,
   localizedStrings,
-  direction,
 }: BookSelectorProps) {
   const currentBookText = localizeString(localizedStrings, '%webView_bookSelector_currentBook%');
   const chooseText = localizeString(localizedStrings, '%webView_bookSelector_choose%');
@@ -84,7 +83,6 @@ export default function BookSelector({
       // value is always a string but we need it to be BookSelectionMode
       // eslint-disable-next-line no-type-assertion/no-type-assertion
       onValueChange={(value: string) => onSelectionModeChange(value as BookSelectionMode)}
-      dir={direction}
     >
       <div className="tw-flex tw-w-full tw-flex-col tw-gap-4">
         <div className="tw-grid tw-grid-cols-[25%,25%,50%]">
@@ -101,7 +99,6 @@ export default function BookSelector({
               chapterCount={chapterCount}
               startChapter={startChapter}
               endChapter={endChapter}
-              direction={direction}
             />
           </div>
         </div>

diff --git a/lib/platform-bible-react/src/components/advanced/inventory/inventory-columns.tsx b/lib/platform-bible-react/src/components/advanced/inventory/inventory-columns.tsx
@@ -1,6 +1,7 @@
 import { ColumnDef, SortDirection } from '@/components/advanced/data-table/data-table.component';
 import { Button } from '@/components/shadcn-ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/shadcn-ui/toggle-group';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 import {
   ArrowDownIcon,
   ArrowUpDownIcon,
@@ -157,7 +158,6 @@ export const inventoryStatusColumn = (
   onApprovedItemsChange: (items: string[]) => void,
   unapprovedItems: string[],
   onUnapprovedItemsChange: (items: string[]) => void,
-  direction: 'rtl' | 'ltr' = 'ltr',
 ): ColumnDef<InventoryTableData> => {
   return {
     accessorKey: 'status',
@@ -174,8 +174,9 @@ export const inventoryStatusColumn = (
     cell: ({ row }) => {
       const status: Status = row.getValue('status');
       const item: string = row.getValue('item');
+      const dir: Direction = readDirection();
       return (
-        <ToggleGroup value={status} variant="outline" type="single" dir={direction}>
+        <ToggleGroup value={status} variant="outline" type="single" dir={dir}>
           <ToggleGroupItem
             onClick={() =>
               statusChangeHandler(

diff --git a/lib/platform-bible-react/src/components/advanced/inventory/inventory.component.tsx b/lib/platform-bible-react/src/components/advanced/inventory/inventory.component.tsx
@@ -32,6 +32,7 @@ import {
   Status,
 } from './inventory-utils';
 import { inventoryAdditionalItemColumn } from './inventory-columns';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 /**
  * Object containing all keys used for localization in this component. If you're using this
@@ -245,8 +246,6 @@ type InventoryProps = {
    * other columns you can add these yourself
    */
   columns: ColumnDef<InventoryTableData>[];
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 };
 
 /** Inventory component that is used to view and control the status of provided project settings */
@@ -262,7 +261,6 @@ export default function Inventory({
   scope,
   onScopeChange,
   columns,
-  direction,
 }: InventoryProps) {
   const allItemsText = localizeString(localizedStrings, '%webView_inventory_all%');
   const approvedItemsText = localizeString(localizedStrings, '%webView_inventory_approved%');
@@ -392,13 +390,15 @@ export default function Inventory({
     return occurrence[0].occurrences;
   }, [selectedItem, showAdditionalItems, reducedTableData]);
 
+  const dir: Direction = readDirection();
+
   return (
     <div className="pr-twp tw-flex tw-h-full tw-flex-col">
       <div className="tw-flex tw-items-stretch">
         <Select
           onValueChange={(value) => handleStatusFilterChange(value)}
           defaultValue={statusFilter}
-          dir={direction}
+          dir={dir}
         >
           <SelectTrigger className="tw-m-1">
             <SelectValue placeholder="Select filter" />
@@ -410,11 +410,7 @@ export default function Inventory({
             <SelectItem value="unknown">{unknownItemsText}</SelectItem>
           </SelectContent>
         </Select>
-        <Select
-          onValueChange={(value) => handleScopeChange(value)}
-          defaultValue={scope}
-          dir={direction}
-        >
+        <Select onValueChange={(value) => handleScopeChange(value)} defaultValue={scope} dir={dir}>
           <SelectTrigger className="tw-m-1">
             <SelectValue placeholder="Select scope" />
           </SelectTrigger>

diff --git a/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx b/lib/platform-bible-react/src/components/advanced/multi-select-combo-box.tsx
@@ -28,8 +28,6 @@ interface MultiSelectComboBoxProps {
   customSelectedText?: string;
   sortSelected?: boolean;
   icon?: ReactNode;
-  /** Text and layout direction */
-  direction?: 'rtl' | 'ltr';
 }
 
 function MultiSelectComboBox({
@@ -42,7 +40,6 @@ function MultiSelectComboBox({
   customSelectedText,
   sortSelected = false,
   icon = undefined,
-  direction = 'ltr',
 }: MultiSelectComboBoxProps) {
   const [open, setOpen] = useState(false);
 
@@ -112,7 +109,7 @@ function MultiSelectComboBox({
           <ChevronsUpDown className="tw-ml-2 tw-h-4 tw-w-4 tw-shrink-0 tw-opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="start" className="tw-w-full tw-p-0" dir={direction}>
+      <PopoverContent align="start" className="tw-w-full tw-p-0">
         <Command>
           <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
           <CommandList>

diff --git a/...t/src/components/advanced/scripture-results-viewer/scripture-results-viewer.component.tsx b/...t/src/components/advanced/scripture-results-viewer/scripture-results-viewer.component.tsx
@@ -40,6 +40,7 @@ import {
 } from 'platform-bible-utils';
 import { MouseEvent, useEffect, useMemo, useState } from 'react';
 import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Direction, readDirection } from '@/utils/dir-helper.util';
 
 /**
  * Information (e.g., a checking error or some other type of "transient" annotation) about something
@@ -137,9 +138,6 @@ export type ScriptureResultsViewerProps = ScriptureResultsViewerColumnInfo & {
 
   /** Callback function to notify when a row is selected */
   onRowSelected?: (selectedRow: ScriptureSrcItemDetail | undefined) => void;
-
-  /** Text direction ltr or rtl */
-  direction?: 'ltr' | 'rtl';
 };
 
 function getColumns(
@@ -236,7 +234,6 @@ export default function ScriptureResultsViewer({
   typeColumnName,
   detailsColumnName,
   onRowSelected,
-  direction = 'ltr',
 }: ScriptureResultsViewerProps) {
   const [grouping, setGrouping] = useState<GroupingState>([]);
   const [sorting, setSorting] = useState<SortingState>([{ id: scrBookColId, desc: false }]);
@@ -379,7 +376,6 @@ export default function ScriptureResultsViewer({
           onValueChange={(value) => {
             handleSelectChange(value);
           }}
-          dir={direction}
         >
           <SelectTrigger className="tw-mb-1 tw-mt-2">
             <SelectValue />
@@ -428,6 +424,7 @@ export default function ScriptureResultsViewer({
         )}
         <TableBody>
           {table.getRowModel().rows.map((row, rowIndex) => {
+            const dir: Direction = readDirection();
             return (
               <TableRow
                 data-state={row.getIsSelected() ? 'selected' : ''}
@@ -467,7 +464,7 @@ export default function ScriptureResultsViewer({
                             >
                               {row.getIsExpanded() && <ChevronDown />}
                               {!row.getIsExpanded() &&
-                                (direction === 'ltr' ? <ChevronRight /> : <ChevronLeft />)}{' '}
+                                (dir === 'ltr' ? <ChevronRight /> : <ChevronLeft />)}{' '}
                               {flexRender(cell.column.columnDef.cell, cell.getContext())} (
                               {row.subRows.length})
                             </Button>