feat: configure margins removal for nested lists in renderersProps.ol|ul

meliorence · Jun 4, 2021 · 316e706 · 316e706
1 parent e0fe7c6
commit 316e706
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 20 deletions.
diff --git a/packages/render-html/src/context/defaultRendererProps.ts b/packages/render-html/src/context/defaultRendererProps.ts
@@ -11,7 +11,9 @@ const defaultRendererProps: Required<RenderersPropsBase> = {
   },
   a: {
     onPress: (_e, href) => Linking.canOpenURL(href) && Linking.openURL(href)
-  }
+  },
+  ol: {},
+  ul: {}
 };
 
 export default defaultRendererProps;
diff --git a/packages/render-html/src/elements/ListElement.tsx b/packages/render-html/src/elements/ListElement.tsx
@@ -10,6 +10,7 @@ import {
 import type {
   DefaultSupportedListStyleType,
   DefaultTagRendererProps,
+  ListElementConfig,
   ListStyleSpec,
   TChildProps,
   UnitaryListStyleSpec
@@ -19,7 +20,8 @@ import { DEFAULT_TEXT_COLOR } from '../constants';
 import pick from 'ramda/src/pick';
 
 export interface ListElementProps<T extends 'ol' | 'ul'>
-  extends DefaultTagRendererProps<TBlock> {
+  extends DefaultTagRendererProps<TBlock>,
+    ListElementConfig {
   listType: T;
   /**
    * Get default list-style-type given the number of nest level for this list.
@@ -29,20 +31,7 @@ export interface ListElementProps<T extends 'ol' | 'ul'>
   getFallbackListStyleTypeFromNestLevel: (
     nestLevel: number
   ) => DefaultSupportedListStyleType;
-  /**
-   * Remove top margin if this element parent is an `li` element and it
-   * is its first child.
-   *
-   * @defaultValue true
-   */
-  enableRemoveTopMarginIfNested?: boolean;
-  /**
-   * Remove bottom margin if this element parent is an `li` element and it
-   * is its last child.
-   *
-   * @defaultValue true
-   */
-  enableRemoveBottomMarginIfNested?: boolean;
+
   /**
    * If `true` and the direction is set to `'rtl'` (either via `dir` attribute
    * or `direction` CSS property):

diff --git a/packages/render-html/src/renderers/OLRenderer.tsx b/packages/render-html/src/renderers/OLRenderer.tsx
@@ -9,8 +9,9 @@ import {
   DefaultSupportedListStyleType
 } from '../shared-types';
 import OLElement, { OLElementProps } from '../elements/OLElement';
+import { useRendererProps } from '../context/RenderersPropsProvider';
 
-function getListStyleTypeFromNestLevel(
+function getFallbackListStyleTypeFromNestLevel(
   nestLevel: number
 ): DefaultSupportedListStyleType {
   switch (nestLevel % 3) {
@@ -27,10 +28,12 @@ export function useOLElementProps(
   props: DefaultTagRendererProps<TBlock>
 ): OLElementProps {
   const listStyleSpecs = props.sharedProps.customListStyleSpecs;
+  const config = useRendererProps('ol');
   return {
     ...props,
     listStyleSpecs,
-    getFallbackListStyleTypeFromNestLevel: getListStyleTypeFromNestLevel
+    getFallbackListStyleTypeFromNestLevel,
+    ...config
   };
 }
 

diff --git a/packages/render-html/src/renderers/ULRenderer.tsx b/packages/render-html/src/renderers/ULRenderer.tsx
@@ -7,8 +7,9 @@ import {
 } from '../shared-types';
 import { TBlock } from '@native-html/transient-render-engine';
 import ULElement, { ULElementProps } from '../elements/ULElement';
+import { useRendererProps } from '../context/RenderersPropsProvider';
 
-function getListStyleTypeFromNestLevel(
+function getFallbackListStyleTypeFromNestLevel(
   nestLevel: number
 ): DefaultSupportedListStyleType {
   switch (nestLevel % 3) {
@@ -25,10 +26,12 @@ export function useULElementProps(
   props: DefaultTagRendererProps<TBlock>
 ): ULElementProps {
   const listStyleSpecs = props.sharedProps.customListStyleSpecs;
+  const config = useRendererProps('ul');
   return {
     ...props,
     listStyleSpecs,
-    getFallbackListStyleTypeFromNestLevel: getListStyleTypeFromNestLevel
+    getFallbackListStyleTypeFromNestLevel,
+    ...config
   };
 }
 

diff --git a/packages/render-html/src/shared-types.ts b/packages/render-html/src/shared-types.ts
@@ -48,6 +48,28 @@ export interface GenericPressableProps extends AccessibilityProps {
   onPress?: TouchableHighlightProps['onPress'];
 }
 
+/**
+ * Configuration for ol and ul.
+ *
+ * @public
+ */
+export interface ListElementConfig {
+  /**
+   * Remove top margin if this element parent is an `li` element and it
+   * is its first child.
+   *
+   * @defaultValue true
+   */
+  enableRemoveTopMarginIfNested?: boolean;
+  /**
+   * Remove bottom margin if this element parent is an `li` element and it
+   * is its last child.
+   *
+   * @defaultValue true
+   */
+  enableRemoveBottomMarginIfNested?: boolean;
+}
+
 /**
  * Props for custom renderers. The convention is to declare a field per renderer.
  * In doing so, you can benefit from `useRendererProps('tagname')` in custom renderers.
@@ -91,6 +113,8 @@ export interface RenderersPropsBase extends Record<string, any> {
      */
     enableExperimentalPercentWidth?: boolean;
   };
+  ul: ListElementConfig;
+  ol: ListElementConfig;
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,9 @@ const defaultRendererProps: Required<RenderersPropsBase> = { @@
       },
       a: {
         onPress: (_e, href) => Linking.canOpenURL(href) && Linking.openURL(href)
-      }
+      },
+      ol: {},
+      ul: {}
     };
     export default defaultRendererProps;