From 8a2d851ba14223a94349ab6942da1fe6998441ed Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 15 Apr 2021 07:48:53 -0300 Subject: [PATCH] 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`. --- .../docs/react-native-li.markedlistitem.md | 4 ++-- .../react-native-li.markedlistitemprops.md | 3 ++- ...native-li.markedlistprops.markerboxstyle.md | 13 +++++++++++++ ...ct-native-li.markedlistprops.markerstyle.md | 13 ------------- ...ative-li.markedlistprops.markertextstyle.md | 18 ++++++++++++++++++ .../docs/react-native-li.markedlistprops.md | 3 ++- .../docs/react-native-li.markerbox.md | 4 ++-- ...t-native-li.markerboxprops.counterindex.md} | 8 ++++---- ...native-li.markerboxprops.counterrenderer.md | 13 +++++++++++++ ...native-li.markerboxprops.markertextstyle.md | 13 +++++++++++++ ...native-li.markerboxprops.markertextwidth.md | 13 +++++++++++++ .../docs/react-native-li.markerboxprops.md | 5 ++++- .../react-native-li/docs/react-native-li.md | 6 +++--- .../docs/react-native-li.usemarkedlist.md | 4 ++-- .../react-native-li/etc/react-native-li.api.md | 17 +++++++++++------ .../react-native-li/src/MarkedListItem.tsx | 6 ++++-- packages/react-native-li/src/shared-types.ts | 16 ++++++++++++++-- 17 files changed, 120 insertions(+), 39 deletions(-) create mode 100644 packages/react-native-li/docs/react-native-li.markedlistprops.markerboxstyle.md delete mode 100644 packages/react-native-li/docs/react-native-li.markedlistprops.markerstyle.md create mode 100644 packages/react-native-li/docs/react-native-li.markedlistprops.markertextstyle.md rename packages/react-native-li/docs/{react-native-li.markerboxprops.markerstring.md => react-native-li.markerboxprops.counterindex.md} (58%) create mode 100644 packages/react-native-li/docs/react-native-li.markerboxprops.counterrenderer.md create mode 100644 packages/react-native-li/docs/react-native-li.markerboxprops.markertextstyle.md create mode 100644 packages/react-native-li/docs/react-native-li.markerboxprops.markertextwidth.md diff --git a/packages/react-native-li/docs/react-native-li.markedlistitem.md b/packages/react-native-li/docs/react-native-li.markedlistitem.md index b05ba75..90858ba 100644 --- 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 Signature: ```typescript -export default function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerStyle, maxNumOfCodepoints, style, renderMarker, children }: PropsWithChildren): JSX.Element; +export default function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren): JSX.Element; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| { counterRenderer, index, startIndex, rtlLineReversed, markerStyle, maxNumOfCodepoints, style, renderMarker, children } | PropsWithChildren<[MarkedListItemProps](./react-native-li.markedlistitemprops.md)> | | +| { counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children } | PropsWithChildren<[MarkedListItemProps](./react-native-li.markedlistitemprops.md)> | | Returns: diff --git a/packages/react-native-li/docs/react-native-li.markedlistitemprops.md b/packages/react-native-li/docs/react-native-li.markedlistitemprops.md index 4bfa95d..62e36ac 100644 --- 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. Signature: ```typescript -export declare type MarkedListItemProps = Required> & { +export declare type MarkedListItemProps = Required> & { index: number; + markerTextWidth: number; maxNumOfCodepoints: number; style: StyleProp; }; 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 new file mode 100644 index 0000000..d4e76ea --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markedlistprops.markerboxstyle.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkedListProps](./react-native-li.markedlistprops.md) > [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. + +Signature: + +```typescript +markerBoxStyle?: StyleProp; +``` 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 deleted file mode 100644 index c4695ca..0000000 --- a/packages/react-native-li/docs/react-native-li.markedlistprops.markerstyle.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkedListProps](./react-native-li.markedlistprops.md) > [markerStyle](./react-native-li.markedlistprops.markerstyle.md) - -## MarkedListProps.markerStyle property - -A plain-object text style for the marker. - -Signature: - -```typescript -markerStyle?: TextStyle; -``` 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 new file mode 100644 index 0000000..1b5b345 --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markedlistprops.markertextstyle.md @@ -0,0 +1,18 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkedListProps](./react-native-li.markedlistprops.md) > [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. + +Signature: + +```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 index 92427d6..e0382e5 100644 --- 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) => number | (Optional) 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<ViewStyle> | (Optional) Style for the line wrapper. | -| [markerStyle?](./react-native-li.markedlistprops.markerstyle.md) | TextStyle | (Optional) A plain-object text style for the marker. | +| [markerBoxStyle?](./react-native-li.markedlistprops.markerboxstyle.md) | StyleProp<ViewStyle> | (Optional) 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. | +| [markerTextStyle?](./react-native-li.markedlistprops.markertextstyle.md) | TextStyle | (Optional) 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. | | [renderMarker?](./react-native-li.markedlistprops.rendermarker.md) | (props: [MarkerBoxProps](./react-native-li.markerboxprops.md)) => ReactNode | (Optional) A custom Marker render function. | | [rtlLineReversed?](./react-native-li.markedlistprops.rtllinereversed.md) | boolean | (Optional) Set the line layout in flexDirection: 'row-reverse' and left-align the marker box. | | [rtlMarkerReversed?](./react-native-li.markedlistprops.rtlmarkerreversed.md) | true \| false \| RtlOptions | (Optional) 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 index d701ed5..c015e0e 100644 --- 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 Signature: ```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) | | Returns: diff --git a/packages/react-native-li/docs/react-native-li.markerboxprops.markerstring.md b/packages/react-native-li/docs/react-native-li.markerboxprops.counterindex.md similarity index 58% rename from packages/react-native-li/docs/react-native-li.markerboxprops.markerstring.md rename to packages/react-native-li/docs/react-native-li.markerboxprops.counterindex.md index b649248..07b8ec2 100644 --- a/packages/react-native-li/docs/react-native-li.markerboxprops.markerstring.md +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.counterindex.md @@ -1,13 +1,13 @@ -[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkerBoxProps](./react-native-li.markerboxprops.md) > [markerString](./react-native-li.markerboxprops.markerstring.md) +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkerBoxProps](./react-native-li.markerboxprops.md) > [counterIndex](./react-native-li.markerboxprops.counterindex.md) -## MarkerBoxProps.markerString property +## MarkerBoxProps.counterIndex property -The content of the marker box. +The index to render. Signature: ```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 new file mode 100644 index 0000000..d500a41 --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.counterrenderer.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkerBoxProps](./react-native-li.markerboxprops.md) > [counterRenderer](./react-native-li.markerboxprops.counterrenderer.md) + +## MarkerBoxProps.counterRenderer property + +The renderer to generate the marker string. + +Signature: + +```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 new file mode 100644 index 0000000..80c01b3 --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.markertextstyle.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkerBoxProps](./react-native-li.markerboxprops.md) > [markerTextStyle](./react-native-li.markerboxprops.markertextstyle.md) + +## MarkerBoxProps.markerTextStyle property + +Style for any text element. Should not contain CSS box model properties. + +Signature: + +```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 new file mode 100644 index 0000000..007bc25 --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.markertextwidth.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkerBoxProps](./react-native-li.markerboxprops.md) > [markerTextWidth](./react-native-li.markerboxprops.markertextwidth.md) + +## MarkerBoxProps.markerTextWidth property + +The width for the marker text element. + +Signature: + +```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 index b6fdf91..dbf7d0c 100644 --- 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 markerString in range. | | [style](./react-native-li.markerboxprops.style.md) | StyleProp<TextStyle> | Style for the container Text element. | diff --git a/packages/react-native-li/docs/react-native-li.md b/packages/react-native-li/docs/react-native-li.md index e77e019..1d7c8a1 100644 --- 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 display: list-item; 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 display: list-item; 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 index e8dd63c..3bb5b39 100644 --- 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 Signature: ```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; ``` @@ -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) & { length: number; } | | +| { counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, length, renderMarker, computeMarkerBoxWidth } | [MarkedListProps](./react-native-li.markedlistprops.md) & { length: number; } | | Returns: diff --git a/packages/react-native-li/etc/react-native-li.api.md b/packages/react-native-li/etc/react-native-li.api.md index cacaaf8..225918f 100644 --- 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): JSX.Element; +export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren): JSX.Element; // @public -export type MarkedListItemProps = Required> & { +export type MarkedListItemProps = Required> & { index: number; + markerTextWidth: number; maxNumOfCodepoints: number; style: StyleProp; }; @@ -35,7 +36,8 @@ export interface MarkedListProps { computeMarkerBoxWidth?: (maxCodepointsLengthInRange: number, fontSize: number) => number; counterRenderer: CounterStyleRenderer; lineStyle?: StyleProp; - markerStyle?: TextStyle; + markerBoxStyle?: StyleProp; + markerTextStyle?: TextStyle; renderMarker?: (props: MarkerBoxProps) => ReactNode; rtlLineReversed?: boolean; rtlMarkerReversed?: true | false | RtlOptions; @@ -43,17 +45,20 @@ export interface MarkedListProps { } // @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; } // @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; diff --git a/packages/react-native-li/src/MarkedListItem.tsx b/packages/react-native-li/src/MarkedListItem.tsx index 4b63c00..8c6aa8b 100644 --- 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; }; @@ -40,18 +41,19 @@ export default function MarkedListItem({ markerTextStyle, markerBoxStyle, maxNumOfCodepoints, + markerTextWidth, style, renderMarker, children }: PropsWithChildren) { - const markerString = counterRenderer.renderMarker(index + startIndex); return ( {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 index 2b93b76..7f82e47 100644 --- 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; /** - * 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. */