feat(react-native-li): add rtlMarkerReversed prop to MarkerBox

Author: jsamr

packages/react-native-li/docs/react-native-li.markedlistitem.md

@@ -11,14 +11,14 @@ See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-l
 <b>Signature:</b>
 
 ```typescript
-export default function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
+export default function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children } | PropsWithChildren&lt;[MarkedListItemProps](./react-native-li.markedlistitemprops.md)<!-- -->&gt; |  |
+|  { counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children } | PropsWithChildren&lt;[MarkedListItemProps](./react-native-li.markedlistitemprops.md)<!-- -->&gt; |  |
 
 <b>Returns:</b>
 

packages/react-native-li/docs/react-native-li.markedlistitemprops.md

@@ -9,7 +9,7 @@ Props for the [MarkedListItem()](./react-native-li.markedlistitem.md) component.
 <b>Signature:</b>
 
 ```typescript
-export declare type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerTextStyle' | 'markerBoxStyle' | 'rtlLineReversed' | 'startIndex'>> & {
+export declare type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerTextStyle' | 'markerBoxStyle' | 'rtlLineReversed' | 'rtlMarkerReversed' | 'startIndex'>> & {
     index: number;
     markerTextWidth: number;
     maxNumOfCodepoints: number;

packages/react-native-li/docs/react-native-li.markerboxprops.md

@@ -21,5 +21,6 @@ export interface MarkerBoxProps
 |  [markerTextStyle](./react-native-li.markerboxprops.markertextstyle.md) | TextStyle | Style for any text element. Should not contain CSS box model properties. |
 |  [markerTextWidth](./react-native-li.markerboxprops.markertextwidth.md) | number | The width for the marker text element. |
 |  [maxNumOfCodepoints](./react-native-li.markerboxprops.maxnumofcodepoints.md) | number | The maximum length of the <code>markerString</code> in range. |
+|  [rtlMarkerReversed](./react-native-li.markerboxprops.rtlmarkerreversed.md) | true \| false | Whether to reverse or not the order of elements in marker (prefix, counter, suffix). |
 |  [style](./react-native-li.markerboxprops.style.md) | StyleProp&lt;TextStyle&gt; | Style for the container <code>Text</code> element. |
 

packages/react-native-li/docs/react-native-li.markerboxprops.rtlmarkerreversed.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@jsamr/react-native-li](./react-native-li.md) &gt; [MarkerBoxProps](./react-native-li.markerboxprops.md) &gt; [rtlMarkerReversed](./react-native-li.markerboxprops.rtlmarkerreversed.md)
+
+## MarkerBoxProps.rtlMarkerReversed property
+
+Whether to reverse or not the order of elements in marker (prefix, counter, suffix).
+
+<b>Signature:</b>
+
+```typescript
+rtlMarkerReversed: true | false;
+```

packages/react-native-li/docs/react-native-li.md

@@ -9,7 +9,7 @@
 |  Function | Description |
 |  --- | --- |
 |  [MarkedList({ children, ...props })](./react-native-li.markedlist.md) | A component which given a counter style, wraps each of its children with a [MarkedListItem()](./react-native-li.markedlistitem.md)<!-- -->. The latter prepends the child with a marker box containing a marker string representation for this child index.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#markers)<!-- -->. |
-|  [MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children })](./react-native-li.markedlistitem.md) | A component which reproduces CSS3 <code>display: list-item;</code> behavior. It prepends its child with a marker box containing a marker string representation for this child index.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#markers)<!-- -->. |
+|  [MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children })](./react-native-li.markedlistitem.md) | A component which reproduces CSS3 <code>display: list-item;</code> behavior. It prepends its child with a marker box containing a marker string representation for this child index.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#markers)<!-- -->. |
 |  [MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth })](./react-native-li.markerbox.md) | Default component to render the list marker.<!-- -->See [CSS Lists and Counters Module Level 3, Markers](https://www.w3.org/TR/css-lists-3/#marker-pseudo) |
 |  [useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, length, renderMarker, computeMarkerBoxWidth })](./react-native-li.usemarkedlist.md) | A hook to reuse MarkedList logic to render custom lists components in combination with [MarkedListItem()](./react-native-li.markedlistitem.md)<!-- -->. |
 

packages/react-native-li/etc/react-native-li.api.md

@@ -21,10 +21,10 @@ export { MarkedList }
 export default MarkedList;
 
 // @public
-export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
+export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
 
 // @public
-export type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerTextStyle' | 'markerBoxStyle' | 'rtlLineReversed' | 'startIndex'>> & {
+export type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerTextStyle' | 'markerBoxStyle' | 'rtlLineReversed' | 'rtlMarkerReversed' | 'startIndex'>> & {
     index: number;
     markerTextWidth: number;
     maxNumOfCodepoints: number;
@@ -54,6 +54,7 @@ export interface MarkerBoxProps {
     markerTextStyle: TextStyle;
     markerTextWidth: number;
     maxNumOfCodepoints: number;
+    rtlMarkerReversed: true | false;
     style: StyleProp<TextStyle>;
 }
 

packages/react-native-li/src/MarkedListItem.tsx

@@ -15,6 +15,7 @@ export type MarkedListItemProps = Required<
     | 'markerTextStyle'
     | 'markerBoxStyle'
     | 'rtlLineReversed'
+    | 'rtlMarkerReversed'
     | 'startIndex'
   >
 > & {
@@ -38,6 +39,7 @@ export default function MarkedListItem({
   index,
   startIndex,
   rtlLineReversed,
+  rtlMarkerReversed,
   markerTextStyle,
   markerBoxStyle,
   maxNumOfCodepoints,
@@ -53,6 +55,8 @@ export default function MarkedListItem({
       key={index}>
       {renderMarker({
         counterRenderer,
+        rtlMarkerReversed:
+          typeof rtlMarkerReversed === 'boolean' ? rtlMarkerReversed : true,
         counterIndex: index + startIndex,
         maxNumOfCodepoints,
         style: markerBoxStyle,

packages/react-native-li/src/shared-types.ts

@@ -32,6 +32,11 @@ export interface MarkerBoxProps {
    * The maximum length of the `markerString` in range.
    */
   maxNumOfCodepoints: number;
+  /**
+   * Whether to reverse or not the order of elements in marker (prefix,
+   * counter, suffix).
+   */
+  rtlMarkerReversed: true | false;
 }
 
 /**

packages/react-native-li/src/useMarkedList.ts

@@ -68,13 +68,14 @@ export default function useMarkedList({
   );
   return {
     maxNumOfCodepoints,
+    rtlMarkerReversed,
+    markerTextWidth,
+    renderMarker,
+    startIndex,
     rtlLineReversed: syntheticRtlLineReversed,
     markerTextStyle: syntheticMarkerTextStyle,
-    markerTextWidth,
     markerBoxStyle: markerBoxStyle as any,
-    renderMarker,
     counterRenderer: renderer,
-    startIndex,
     style: lineStyle
   };
 }