diff --git a/packages/counter-style/docs/counter-style.rtloptions.md b/packages/counter-style/docs/counter-style.rtloptions.md index 04affad..1f816ac 100644 --- a/packages/counter-style/docs/counter-style.rtloptions.md +++ b/packages/counter-style/docs/counter-style.rtloptions.md @@ -16,7 +16,7 @@ export interface RtlOptions | Property | Type | Description | | --- | --- | --- | -| [reverseCounter?](./counter-style.rtloptions.reversecounter.md) | boolean | (Optional) | -| [reversePrefix?](./counter-style.rtloptions.reverseprefix.md) | boolean | (Optional) | -| [reverseSuffix?](./counter-style.rtloptions.reversesuffix.md) | boolean | (Optional) | +| [reverseCounter?](./counter-style.rtloptions.reversecounter.md) | boolean | (Optional) Reverse the order of characters in the counter. | +| [reversePrefix?](./counter-style.rtloptions.reverseprefix.md) | boolean | (Optional) Reverse the order of characters in the prefix. | +| [reverseSuffix?](./counter-style.rtloptions.reversesuffix.md) | boolean | (Optional) Reverse the order of characters in the suffix. | diff --git a/packages/counter-style/docs/counter-style.rtloptions.reversecounter.md b/packages/counter-style/docs/counter-style.rtloptions.reversecounter.md index bdca999..0d55737 100644 --- a/packages/counter-style/docs/counter-style.rtloptions.reversecounter.md +++ b/packages/counter-style/docs/counter-style.rtloptions.reversecounter.md @@ -4,8 +4,15 @@ ## RtlOptions.reverseCounter property +Reverse the order of characters in the counter. + Signature: ```typescript reverseCounter?: boolean; ``` + +## Example + +`abc` becomes `cba` + diff --git a/packages/counter-style/docs/counter-style.rtloptions.reverseprefix.md b/packages/counter-style/docs/counter-style.rtloptions.reverseprefix.md index e5791b9..2dc48e6 100644 --- a/packages/counter-style/docs/counter-style.rtloptions.reverseprefix.md +++ b/packages/counter-style/docs/counter-style.rtloptions.reverseprefix.md @@ -4,8 +4,15 @@ ## RtlOptions.reversePrefix property +Reverse the order of characters in the prefix. + Signature: ```typescript reversePrefix?: boolean; ``` + +## Example + +`-|` becomes `|-` + diff --git a/packages/counter-style/docs/counter-style.rtloptions.reversesuffix.md b/packages/counter-style/docs/counter-style.rtloptions.reversesuffix.md index 658756a..1727992 100644 --- a/packages/counter-style/docs/counter-style.rtloptions.reversesuffix.md +++ b/packages/counter-style/docs/counter-style.rtloptions.reversesuffix.md @@ -4,8 +4,15 @@ ## RtlOptions.reverseSuffix property +Reverse the order of characters in the suffix. + Signature: ```typescript reverseSuffix?: boolean; ``` + +## Example + +`. ` becomes ` .` + diff --git a/packages/counter-style/etc/counter-style.api.md b/packages/counter-style/etc/counter-style.api.md index b182264..9ea39eb 100644 --- a/packages/counter-style/etc/counter-style.api.md +++ b/packages/counter-style/etc/counter-style.api.md @@ -52,11 +52,8 @@ export type MaxCodepointLengthInRangeComputer = (min: number, max: number) => nu // @public export interface RtlOptions { - // (undocumented) reverseCounter?: boolean; - // (undocumented) reversePrefix?: boolean; - // (undocumented) reverseSuffix?: boolean; } 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 fd1dbbd..6b70d5f 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, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren): JSX.Element; +export default function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, enableMarkerClipping, children }: PropsWithChildren): JSX.Element; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| { counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children } | PropsWithChildren<[MarkedListItemProps](./react-native-li.markedlistitemprops.md)> | | +| { counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, enableMarkerClipping, 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 c6e9944..c67be59 100644 --- a/packages/react-native-li/docs/react-native-li.markedlistitemprops.md +++ b/packages/react-native-li/docs/react-native-li.markedlistitemprops.md @@ -13,6 +13,7 @@ export declare type MarkedListItemProps = Required; }; ``` diff --git a/packages/react-native-li/docs/react-native-li.markedlistprops.enablemarkerclipping.md b/packages/react-native-li/docs/react-native-li.markedlistprops.enablemarkerclipping.md new file mode 100644 index 0000000..61a491e --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markedlistprops.enablemarkerclipping.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkedListProps](./react-native-li.markedlistprops.md) > [enableMarkerClipping](./react-native-li.markedlistprops.enablemarkerclipping.md) + +## MarkedListProps.enableMarkerClipping property + +Clip the marker text when it overflows the marker box. + +Signature: + +```typescript +enableMarkerClipping?: boolean; +``` 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 4112186..18c348b 100644 --- a/packages/react-native-li/docs/react-native-li.markedlistprops.md +++ b/packages/react-native-li/docs/react-native-li.markedlistprops.md @@ -20,6 +20,7 @@ export interface MarkedListProps | [Container?](./react-native-li.markedlistprops.container.md) | ComponentType<any> | (Optional) The component used to wrap list elements. | | [counterRenderer](./react-native-li.markedlistprops.counterrenderer.md) | CounterStyleRenderer | The counter renderer for this list. | | [dynamicMarkerBoxWidth?](./react-native-li.markedlistprops.dynamicmarkerboxwidth.md) | boolean | (Optional) Should the width of the marker box be computed dynamically, e.g. depend on the longest marker in the list? | +| [enableMarkerClipping?](./react-native-li.markedlistprops.enablemarkerclipping.md) | boolean | (Optional) Clip the marker text when it overflows the marker box. | | [lineStyle?](./react-native-li.markedlistprops.linestyle.md) | StyleProp<ViewStyle> | (Optional) Style for the line wrapper. | | [markerBoxStyle?](./react-native-li.markedlistprops.markerboxstyle.md) | StyleProp<ViewStyle> | (Optional) Style for the marker box container. | | [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. | 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 c015e0e..374909f 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, counterRenderer, counterIndex, markerTextStyle, markerTextWidth }: MarkerBoxProps): JSX.Element; +export default function MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth, enableMarkerClipping }: MarkerBoxProps): JSX.Element; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| { style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth } | [MarkerBoxProps](./react-native-li.markerboxprops.md) | | +| { style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth, enableMarkerClipping } | [MarkerBoxProps](./react-native-li.markerboxprops.md) | | Returns: diff --git a/packages/react-native-li/docs/react-native-li.markerboxprops.enablemarkerclipping.md b/packages/react-native-li/docs/react-native-li.markerboxprops.enablemarkerclipping.md new file mode 100644 index 0000000..27a4fb2 --- /dev/null +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.enablemarkerclipping.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@jsamr/react-native-li](./react-native-li.md) > [MarkerBoxProps](./react-native-li.markerboxprops.md) > [enableMarkerClipping](./react-native-li.markerboxprops.enablemarkerclipping.md) + +## MarkerBoxProps.enableMarkerClipping property + +Clip the marker text when it overflows the marker box. + +Signature: + +```typescript +enableMarkerClipping: boolean; +``` 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 06a74a7..01baf27 100644 --- a/packages/react-native-li/docs/react-native-li.markerboxprops.md +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.md @@ -18,9 +18,10 @@ export interface MarkerBoxProps | --- | --- | --- | | [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. | +| [enableMarkerClipping](./react-native-li.markerboxprops.enablemarkerclipping.md) | boolean | Clip the marker text when it overflows the marker box. | | [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 \| false | The width for the marker text element. | | [maxNumOfCodepoints](./react-native-li.markerboxprops.maxnumofcodepoints.md) | number | The maximum length of the markerString 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). | +| [rtlMarkerReversed](./react-native-li.markerboxprops.rtlmarkerreversed.md) | boolean | Whether to reverse or not the order of elements in marker (prefix, counter, suffix). | | [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.markerboxprops.rtlmarkerreversed.md b/packages/react-native-li/docs/react-native-li.markerboxprops.rtlmarkerreversed.md index 7b27c1f..3369076 100644 --- a/packages/react-native-li/docs/react-native-li.markerboxprops.rtlmarkerreversed.md +++ b/packages/react-native-li/docs/react-native-li.markerboxprops.rtlmarkerreversed.md @@ -9,5 +9,5 @@ Whether to reverse or not the order of elements in marker (prefix, counter, suff Signature: ```typescript -rtlMarkerReversed: true | false; +rtlMarkerReversed: boolean; ``` diff --git a/packages/react-native-li/docs/react-native-li.md b/packages/react-native-li/docs/react-native-li.md index 45e3f89..b088c0d 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, Container, ...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, rtlMarkerReversed, 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, dynamicMarkerBoxWidth, 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, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, enableMarkerClipping, 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, enableMarkerClipping })](./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, dynamicMarkerBoxWidth, length, renderMarker, enableMarkerClipping, 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 8e82c65..71b1dfa 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, markerTextStyle, markerBoxStyle, dynamicMarkerBoxWidth, length, renderMarker, computeMarkerBoxWidth }: MarkedListProps & { +export default function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, dynamicMarkerBoxWidth, length, renderMarker, enableMarkerClipping, computeMarkerBoxWidth }: MarkedListProps & { length: number; }): Omit; ``` @@ -18,7 +18,7 @@ export default function useMarkedList({ counterRenderer, startIndex, lineStyle, | Parameter | Type | Description | | --- | --- | --- | -| { counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, dynamicMarkerBoxWidth, length, renderMarker, computeMarkerBoxWidth } | [MarkedListProps](./react-native-li.markedlistprops.md) & { length: number; } | | +| { counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, dynamicMarkerBoxWidth, length, renderMarker, enableMarkerClipping, 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 37f1670..d8525f0 100644 --- a/packages/react-native-li/etc/react-native-li.api.md +++ b/packages/react-native-li/etc/react-native-li.api.md @@ -22,13 +22,14 @@ export { MarkedList } export default MarkedList; // @public -export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, children }: PropsWithChildren): JSX.Element; +export function MarkedListItem({ counterRenderer, index, startIndex, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, maxNumOfCodepoints, markerTextWidth, style, renderMarker, enableMarkerClipping, children }: PropsWithChildren): JSX.Element; // @public export type MarkedListItemProps = Required> & { index: number; markerTextWidth: number | false; maxNumOfCodepoints: number; + enableMarkerClipping: boolean; style: StyleProp; }; @@ -38,6 +39,7 @@ export interface MarkedListProps { Container?: ComponentType; counterRenderer: CounterStyleRenderer; dynamicMarkerBoxWidth?: boolean; + enableMarkerClipping?: boolean; lineStyle?: StyleProp; markerBoxStyle?: StyleProp; markerTextStyle?: TextStyle; @@ -48,21 +50,22 @@ export interface MarkedListProps { } // @public -export function MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth }: MarkerBoxProps): JSX.Element; +export function MarkerBox({ style, counterRenderer, counterIndex, markerTextStyle, markerTextWidth, enableMarkerClipping }: MarkerBoxProps): JSX.Element; // @public export interface MarkerBoxProps { counterIndex: number; counterRenderer: CounterStyleRenderer; + enableMarkerClipping: boolean; markerTextStyle: TextStyle; markerTextWidth: number | false; maxNumOfCodepoints: number; - rtlMarkerReversed: true | false; + rtlMarkerReversed: boolean; style: StyleProp; } // @public -export function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, dynamicMarkerBoxWidth, length, renderMarker, computeMarkerBoxWidth }: MarkedListProps & { +export function useMarkedList({ counterRenderer, startIndex, lineStyle, rtlLineReversed, rtlMarkerReversed, markerTextStyle, markerBoxStyle, dynamicMarkerBoxWidth, length, renderMarker, enableMarkerClipping, computeMarkerBoxWidth }: MarkedListProps & { length: number; }): Omit;