feat(react-native-li): add markerTextStyle and markerBoxStyle props

BREAKING CHANGE: `markerStyle` has been dropped. Use `markerBoxStyle` to style the marker container, and `markerTextStyle` to style the marker string.
jsamr · Apr 15, 2021 · ff57162 · ff57162
1 parent 1aa086f
commit ff57162
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 23 deletions.
diff --git a/packages/react-native-li/src/MarkedListItem.tsx b/packages/react-native-li/src/MarkedListItem.tsx
@@ -12,7 +12,8 @@ export type MarkedListItemProps = Required<
     MarkedListProps,
     | 'counterRenderer'
     | 'renderMarker'
-    | 'markerStyle'
+    | 'markerTextStyle'
+    | 'markerBoxStyle'
     | 'rtlLineReversed'
     | 'startIndex'
   >
@@ -36,7 +37,8 @@ export default function MarkedListItem({
   index,
   startIndex,
   rtlLineReversed,
-  markerStyle,
+  markerTextStyle,
+  markerBoxStyle,
   maxNumOfCodepoints,
   style,
   renderMarker,
@@ -51,7 +53,9 @@ export default function MarkedListItem({
       {renderMarker({
         markerString,
         maxNumOfCodepoints,
-        style: markerStyle
+        style: markerBoxStyle,
+        markerTextStyle,
+        markerTextWidth
       })}
       {children}
     </View>

diff --git a/packages/react-native-li/src/MarkerBox.tsx b/packages/react-native-li/src/MarkerBox.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { MarkerBoxProps } from './shared-types';
 
 /**
@@ -9,10 +9,20 @@ import { MarkerBoxProps } from './shared-types';
  *
  * @public
  */
-export default function MarkerBox({ style, markerString }: MarkerBoxProps) {
+export default function MarkerBox({
+  style,
+  counterRenderer,
+  counterIndex,
+  markerTextStyle,
+  markerTextWidth
+}: MarkerBoxProps) {
   return (
-    <Text testID="marker-box" style={style}>
-      {markerString}
-    </Text>
+    <View style={style}>
+      <Text
+        testID="marker-box"
+        style={[markerTextStyle, { width: markerTextWidth }]}>
+        {counterRenderer.renderMarker(counterIndex)}
+      </Text>
+    </View>
   );
 }
diff --git a/packages/react-native-li/src/shared-types.ts b/packages/react-native-li/src/shared-types.ts
@@ -61,9 +61,20 @@ export interface MarkedListProps {
    */
   lineStyle?: StyleProp<ViewStyle>;
   /**
-   * A plain-object text style for the marker.
+   * 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.
+   *
+   * @remarks It should not contain CSS box model properties and it should be a
+   * plain JavaScript object. **Do not** use StyleSheet or array styles.
+   */
+  markerTextStyle?: TextStyle;
+  /**
+   * Style for the marker box container. It is discouraged to set
+   * `(min,max)width` that way. Use
+   * {@link MarkedListProps.computeMarkerBoxWidth} instead.
    */
-  markerStyle?: TextStyle;
+  markerBoxStyle?: StyleProp<ViewStyle>;
   /**
    * A function to compute marker box width depending on the maximum length of
    * the marker string in range.

diff --git a/packages/react-native-li/src/useMarkedList.ts b/packages/react-native-li/src/useMarkedList.ts
@@ -12,6 +12,8 @@ const defaultComputeMarkerBoxWidth: NonNullable<
   MarkedListProps['computeMarkerBoxWidth']
 > = (maxNumOfCodepoints, fontSize) => maxNumOfCodepoints * fontSize * 0.6;
 
+const DEFAULT_FONT_SIZE = 14;
+
 /**
  * A hook to reuse MarkedList logic to render custom lists components in
  * combination with {@link MarkedListItem}.
@@ -24,7 +26,8 @@ export default function useMarkedList({
   lineStyle,
   rtlLineReversed = false,
   rtlMarkerReversed = false,
-  markerStyle,
+  markerTextStyle,
+  markerBoxStyle,
   length = 0,
   renderMarker = defaultRenderMarker,
   computeMarkerBoxWidth = defaultComputeMarkerBoxWidth
@@ -35,10 +38,13 @@ export default function useMarkedList({
     [counterRenderer, length, startIndex]
   );
   const syntheticRtlLineReversed = !I18nManager.isRTL && rtlLineReversed;
-  const markerWidth = useMemo(
+  const markerTextWidth = useMemo(
     () =>
-      computeMarkerBoxWidth(maxNumOfCodepoints, markerStyle?.fontSize ?? 14),
-    [computeMarkerBoxWidth, markerStyle?.fontSize, maxNumOfCodepoints]
+      computeMarkerBoxWidth(
+        maxNumOfCodepoints,
+        markerTextStyle?.fontSize ?? DEFAULT_FONT_SIZE
+      ),
+    [computeMarkerBoxWidth, markerTextStyle?.fontSize, maxNumOfCodepoints]
   );
   const renderer = useMemo(
     () =>
@@ -49,18 +55,23 @@ export default function useMarkedList({
         : counterRenderer,
     [counterRenderer, rtlMarkerReversed]
   );
-  const syntheticMarkerStyle = {
-    flexGrow: 0,
-    flexShrink: 0,
-    width: markerWidth,
-    fontSize: 14,
-    textAlign: syntheticRtlLineReversed ? 'left' : 'right',
-    ...markerStyle
-  } as const;
+  const syntheticMarkerTextStyle = useMemo(
+    () =>
+      ({
+        flexGrow: 0,
+        flexShrink: 0,
+        fontSize: DEFAULT_FONT_SIZE,
+        textAlign: syntheticRtlLineReversed ? 'left' : 'right',
+        ...markerTextStyle
+      } as const),
+    [markerTextStyle, syntheticRtlLineReversed]
+  );
   return {
     maxNumOfCodepoints,
     rtlLineReversed: syntheticRtlLineReversed,
-    markerStyle: syntheticMarkerStyle,
+    markerTextStyle: syntheticMarkerTextStyle,
+    markerTextWidth,
+    markerBoxStyle: markerBoxStyle as any,
     renderMarker,
     counterRenderer: renderer,
     startIndex,