feat(react-native-li): enrich API of renderMarker and MarkerBox

BREAKING CHANGE: `renderMarker` and `MarkerBox` props have changed. Instead of letting the `MarkedListItem` generate the marker string, the `counterRenderer` and `counterIndex` are passed down to `renderMarker`.
jsamr · Apr 15, 2021 · 8a2d851 · 8a2d851
1 parent ff57162
commit 8a2d851
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 39 deletions.
diff --git a/packages/react-native-li/docs/react-native-li.markedlistitem.md b/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, markerStyle, maxNumOfCodepoints, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
+export default function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { counterRenderer, index, startIndex, rtlLineReversed, markerStyle, maxNumOfCodepoints, style, renderMarker, children } | PropsWithChildren&lt;[MarkedListItemProps](./react-native-li.markedlistitemprops.md)<!-- -->&gt; |  |
+|  { counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children } | PropsWithChildren&lt;[MarkedListItemProps](./react-native-li.markedlistitemprops.md)<!-- -->&gt; |  |
 
 <b>Returns:</b>
 

diff --git a/packages/react-native-li/docs/react-native-li.markedlistitemprops.md b/packages/react-native-li/docs/react-native-li.markedlistitemprops.md
@@ -9,8 +9,9 @@ Props for the [MarkedListItem()](./react-native-li.markedlistitem.md) component.
 <b>Signature:</b>
 
 ```typescript
-export declare type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerStyle' | 'rtlLineReversed' | 'startIndex'>> & {
+export declare type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerTextStyle' | 'markerBoxStyle' | 'rtlLineReversed' | 'startIndex'>> & {
     index: number;
+    markerTextWidth: number;
     maxNumOfCodepoints: number;
     style: StyleProp<ViewStyle>;
 };

diff --git a/packages/react-native-li/docs/react-native-li.markedlistprops.markerboxstyle.md b/packages/react-native-li/docs/react-native-li.markedlistprops.markerboxstyle.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; [MarkedListProps](./react-native-li.markedlistprops.md) &gt; [markerBoxStyle](./react-native-li.markedlistprops.markerboxstyle.md)
+
+## MarkedListProps.markerBoxStyle property
+
+Style for the marker box container. It is discouraged to set `(min,max)width` that way. Use [MarkedListProps.computeMarkerBoxWidth](./react-native-li.markedlistprops.computemarkerboxwidth.md) instead.
+
+<b>Signature:</b>
+
+```typescript
+markerBoxStyle?: StyleProp<ViewStyle>;
+```
diff --git a/packages/react-native-li/docs/react-native-li.markedlistprops.markerstyle.md b/packages/react-native-li/docs/react-native-li.markedlistprops.markerstyle.md
diff --git a/packages/react-native-li/docs/react-native-li.markedlistprops.markertextstyle.md b/packages/react-native-li/docs/react-native-li.markedlistprops.markertextstyle.md
@@ -0,0 +1,18 @@
+<!-- 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; [MarkedListProps](./react-native-li.markedlistprops.md) &gt; [markerTextStyle](./react-native-li.markedlistprops.markertextstyle.md)
+
+## MarkedListProps.markerTextStyle property
+
+A plain JavaScript object text style for the marker string. It is advised to pass the same `fontSize` and `lineHeight` as the list content for perfect horizontal alignment.
+
+<b>Signature:</b>
+
+```typescript
+markerTextStyle?: TextStyle;
+```
+
+## Remarks
+
+It should not contain CSS box model properties and it should be a plain JavaScript object. \*\*Do not\*\* use StyleSheet or array styles.
+
diff --git a/packages/react-native-li/docs/react-native-li.markedlistprops.md b/packages/react-native-li/docs/react-native-li.markedlistprops.md
@@ -19,7 +19,8 @@ export interface MarkedListProps
 |  [computeMarkerBoxWidth?](./react-native-li.markedlistprops.computemarkerboxwidth.md) | (maxCodepointsLengthInRange: number, fontSize: number) =&gt; number | <i>(Optional)</i> A function to compute marker box width depending on the maximum length of the marker string in range. |
 |  [counterRenderer](./react-native-li.markedlistprops.counterrenderer.md) | CounterStyleRenderer | The counter renderer for this list. |
 |  [lineStyle?](./react-native-li.markedlistprops.linestyle.md) | StyleProp&lt;ViewStyle&gt; | <i>(Optional)</i> Style for the line wrapper. |
-|  [markerStyle?](./react-native-li.markedlistprops.markerstyle.md) | TextStyle | <i>(Optional)</i> A plain-object text style for the marker. |
+|  [markerBoxStyle?](./react-native-li.markedlistprops.markerboxstyle.md) | StyleProp&lt;ViewStyle&gt; | <i>(Optional)</i> Style for the marker box container. It is discouraged to set <code>(min,max)width</code> that way. Use [MarkedListProps.computeMarkerBoxWidth](./react-native-li.markedlistprops.computemarkerboxwidth.md) instead. |
+|  [markerTextStyle?](./react-native-li.markedlistprops.markertextstyle.md) | TextStyle | <i>(Optional)</i> A plain JavaScript object text style for the marker string. It is advised to pass the same <code>fontSize</code> and <code>lineHeight</code> as the list content for perfect horizontal alignment. |
 |  [renderMarker?](./react-native-li.markedlistprops.rendermarker.md) | (props: [MarkerBoxProps](./react-native-li.markerboxprops.md)<!-- -->) =&gt; ReactNode | <i>(Optional)</i> A custom Marker render function. |
 |  [rtlLineReversed?](./react-native-li.markedlistprops.rtllinereversed.md) | boolean | <i>(Optional)</i> Set the line layout in <code>flexDirection: 'row-reverse'</code> and left-align the marker box. |
 |  [rtlMarkerReversed?](./react-native-li.markedlistprops.rtlmarkerreversed.md) | true \| false \| RtlOptions | <i>(Optional)</i> Should the marker string be rendered in reverse order? |

diff --git a/packages/react-native-li/docs/react-native-li.markerbox.md b/packages/react-native-li/docs/react-native-li.markerbox.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 MarkerBox({ style, markerString }: MarkerBoxProps): JSX.Element;
+export default function MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth }: MarkerBoxProps): JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { style, markerString } | [MarkerBoxProps](./react-native-li.markerboxprops.md) |  |
+|  { style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth } | [MarkerBoxProps](./react-native-li.markerboxprops.md) |  |
 
 <b>Returns:</b>
 

diff --git a/...-native-li.markerboxprops.markerstring.md → ...-native-li.markerboxprops.counterindex.md b/...-native-li.markerboxprops.markerstring.md → ...-native-li.markerboxprops.counterindex.md
@@ -1,13 +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; [markerString](./react-native-li.markerboxprops.markerstring.md)
+[Home](./index.md) &gt; [@jsamr/react-native-li](./react-native-li.md) &gt; [MarkerBoxProps](./react-native-li.markerboxprops.md) &gt; [counterIndex](./react-native-li.markerboxprops.counterindex.md)
 
-## MarkerBoxProps.markerString property
+## MarkerBoxProps.counterIndex property
 
-The content of the marker box.
+The index to render.
 
 <b>Signature:</b>
 
 ```typescript
-markerString: string;
+counterIndex: number;
 ```
diff --git a/packages/react-native-li/docs/react-native-li.markerboxprops.counterrenderer.md b/packages/react-native-li/docs/react-native-li.markerboxprops.counterrenderer.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; [counterRenderer](./react-native-li.markerboxprops.counterrenderer.md)
+
+## MarkerBoxProps.counterRenderer property
+
+The renderer to generate the marker string.
+
+<b>Signature:</b>
+
+```typescript
+counterRenderer: CounterStyleRenderer;
+```
diff --git a/packages/react-native-li/docs/react-native-li.markerboxprops.markertextstyle.md b/packages/react-native-li/docs/react-native-li.markerboxprops.markertextstyle.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; [markerTextStyle](./react-native-li.markerboxprops.markertextstyle.md)
+
+## MarkerBoxProps.markerTextStyle property
+
+Style for any text element. Should not contain CSS box model properties.
+
+<b>Signature:</b>
+
+```typescript
+markerTextStyle: TextStyle;
+```
diff --git a/packages/react-native-li/docs/react-native-li.markerboxprops.markertextwidth.md b/packages/react-native-li/docs/react-native-li.markerboxprops.markertextwidth.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; [markerTextWidth](./react-native-li.markerboxprops.markertextwidth.md)
+
+## MarkerBoxProps.markerTextWidth property
+
+The width for the marker text element.
+
+<b>Signature:</b>
+
+```typescript
+markerTextWidth: number;
+```
diff --git a/packages/react-native-li/docs/react-native-li.markerboxprops.md b/packages/react-native-li/docs/react-native-li.markerboxprops.md
@@ -16,7 +16,10 @@ export interface MarkerBoxProps
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [markerString](./react-native-li.markerboxprops.markerstring.md) | string | The content of the marker box. |
+|  [counterIndex](./react-native-li.markerboxprops.counterindex.md) | number | The index to render. |
+|  [counterRenderer](./react-native-li.markerboxprops.counterrenderer.md) | CounterStyleRenderer | The renderer to generate the marker string. |
+|  [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. |
 |  [style](./react-native-li.markerboxprops.style.md) | StyleProp&lt;TextStyle&gt; | Style for the container <code>Text</code> element. |
 
diff --git a/packages/react-native-li/docs/react-native-li.md b/packages/react-native-li/docs/react-native-li.md
@@ -9,9 +9,9 @@
 |  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, markerStyle, maxNumOfCodepoints, 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, markerString })](./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, markerStyle, 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)<!-- -->. |
+|  [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)<!-- -->. |
+|  [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)<!-- -->. |
 
 ## Interfaces
 

diff --git a/packages/react-native-li/docs/react-native-li.usemarkedlist.md b/packages/react-native-li/docs/react-native-li.usemarkedlist.md
@@ -9,7 +9,7 @@ A hook to reuse MarkedList logic to render custom lists components in combinatio
 <b>Signature:</b>
 
 ```typescript
-export default function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerStyle, length, renderMarker, computeMarkerBoxWidth }: MarkedListProps & {
+export default function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, length, renderMarker, computeMarkerBoxWidth }: MarkedListProps & {
     length: number;
 }): Omit<MarkedListItemProps, 'index'>;
 ```
@@ -18,7 +18,7 @@ export default function useMarkedList({ counterRenderer, startIndex, lineStyle,
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerStyle, length, renderMarker, computeMarkerBoxWidth } | [MarkedListProps](./react-native-li.markedlistprops.md) &amp; { length: number; } |  |
+|  { counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, length, renderMarker, computeMarkerBoxWidth } | [MarkedListProps](./react-native-li.markedlistprops.md) &amp; { length: number; } |  |
 
 <b>Returns:</b>
 

diff --git a/packages/react-native-li/etc/react-native-li.api.md b/packages/react-native-li/etc/react-native-li.api.md
@@ -21,11 +21,12 @@ export { MarkedList }
 export default MarkedList;
 
 // @public
-export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerStyle, maxNumOfCodepoints, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
+export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren<MarkedListItemProps>): JSX.Element;
 
 // @public
-export type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerStyle' | 'rtlLineReversed' | 'startIndex'>> & {
+export type MarkedListItemProps = Required<Pick<MarkedListProps, 'counterRenderer' | 'renderMarker' | 'markerTextStyle' | 'markerBoxStyle' | 'rtlLineReversed' | 'startIndex'>> & {
     index: number;
+    markerTextWidth: number;
     maxNumOfCodepoints: number;
     style: StyleProp<ViewStyle>;
 };
@@ -35,25 +36,29 @@ export interface MarkedListProps {
     computeMarkerBoxWidth?: (maxCodepointsLengthInRange: number, fontSize: number) => number;
     counterRenderer: CounterStyleRenderer;
     lineStyle?: StyleProp<ViewStyle>;
-    markerStyle?: TextStyle;
+    markerBoxStyle?: StyleProp<ViewStyle>;
+    markerTextStyle?: TextStyle;
     renderMarker?: (props: MarkerBoxProps) => ReactNode;
     rtlLineReversed?: boolean;
     rtlMarkerReversed?: true | false | RtlOptions;
     startIndex?: number;
 }
 
 // @public
-export function MarkerBox({ style, markerString }: MarkerBoxProps): JSX.Element;
+export function MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth }: MarkerBoxProps): JSX.Element;
 
 // @public
 export interface MarkerBoxProps {
-    markerString: string;
+    counterIndex: number;
+    counterRenderer: CounterStyleRenderer;
+    markerTextStyle: TextStyle;
+    markerTextWidth: number;
     maxNumOfCodepoints: number;
     style: StyleProp<TextStyle>;
 }
 
 // @public
-export function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerStyle, length, renderMarker, computeMarkerBoxWidth }: MarkedListProps & {
+export function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, length, renderMarker, computeMarkerBoxWidth }: MarkedListProps & {
     length: number;
 }): Omit<MarkedListItemProps, 'index'>;
 

diff --git a/packages/react-native-li/src/MarkedListItem.tsx b/packages/react-native-li/src/MarkedListItem.tsx
@@ -19,6 +19,7 @@ export type MarkedListItemProps = Required<
   >
 > & {
   index: number;
+  markerTextWidth: number;
   maxNumOfCodepoints: number;
   style: StyleProp<ViewStyle>;
 };
@@ -40,18 +41,19 @@ export default function MarkedListItem({
   markerTextStyle,
   markerBoxStyle,
   maxNumOfCodepoints,
+  markerTextWidth,
   style,
   renderMarker,
   children
 }: PropsWithChildren<MarkedListItemProps>) {
-  const markerString = counterRenderer.renderMarker(index + startIndex);
   return (
     <View
       testID="marked-list-item"
       style={[rtlLineReversed ? styles.lineRtl : styles.lineLtr, style]}
       key={index}>
       {renderMarker({
-        markerString,
+        counterRenderer,
+        counterIndex: index + startIndex,
         maxNumOfCodepoints,
         style: markerBoxStyle,
         markerTextStyle,

diff --git a/packages/react-native-li/src/shared-types.ts b/packages/react-native-li/src/shared-types.ts
@@ -13,9 +13,21 @@ export interface MarkerBoxProps {
    */
   style: StyleProp<TextStyle>;
   /**
-   * The content of the marker box.
+   * Style for any text element. Should not contain CSS box model properties.
    */
-  markerString: string;
+  markerTextStyle: TextStyle;
+  /**
+   * The width for the marker text element.
+   */
+  markerTextWidth: number;
+  /**
+   * The renderer to generate the marker string.
+   */
+  counterRenderer: CounterStyleRenderer;
+  /**
+   * The index to render.
+   */
+  counterIndex: number;
   /**
    * The maximum length of the `markerString` in range.
    */