feat: support onPress from element models native props

meliorence · Oct 14, 2021 · 7dc5577 · 7dc5577
1 parent 31241fb
commit 7dc5577
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 18 deletions.
diff --git a/packages/render-html/package.json b/packages/render-html/package.json
@@ -91,7 +91,7 @@
   "dependencies": {
     "@jsamr/counter-style": "^2.0.1",
     "@jsamr/react-native-li": "^2.3.0",
-    "@native-html/transient-render-engine": "10.3.0",
+    "@native-html/transient-render-engine": "10.4.0",
     "@types/ramda": "^0.27.40",
     "@types/urijs": "^1.19.15",
     "prop-types": "^15.5.7",

diff --git a/packages/render-html/src/TBlockRenderer.tsx b/packages/render-html/src/TBlockRenderer.tsx
@@ -20,15 +20,11 @@ export const TDefaultBlockRenderer: TDefaultRenderer<TBlock> = ({
       propsForChildren={props.propsForChildren}
     />
   );
-  const commonProps = getNativePropsForTNode(props);
-  if (typeof onPress === 'function') {
-    return React.createElement(
-      GenericPressable,
-      { onPress, ...commonProps },
-      children
-    );
+  const nativeProps = getNativePropsForTNode(props);
+  if (typeof nativeProps.onPress === 'function') {
+    return React.createElement(GenericPressable, nativeProps, children);
   }
-  return React.createElement(View, commonProps, children);
+  return React.createElement(View, nativeProps, children);
 };
 
 const TBlockRenderer = (props: TNodeSubRendererProps<TBlock>) => {

diff --git a/packages/render-html/src/helpers/getNativePropsForTNode.ts b/packages/render-html/src/helpers/getNativePropsForTNode.ts
@@ -2,6 +2,8 @@ import { TBlock, TPhrasing, TText } from '@native-html/transient-render-engine';
 import { TextProps, ViewProps } from 'react-native';
 import { TDefaultRendererProps } from '../shared-types';
 
+const empty: any = {};
+
 /**
  * Extract React Native props for a given {@link TNode}. Native props target
  * either `Text` or `View` elements, with an optional `onPress` prop for
@@ -11,14 +13,20 @@ import { TDefaultRendererProps } from '../shared-types';
  */
 export default function getNativePropsForTNode<
   T extends TPhrasing | TText | TBlock
->(props: TDefaultRendererProps<T>): T extends TBlock ? ViewProps : TextProps {
+>(
+  props: TDefaultRendererProps<T>
+): T extends TBlock ? ViewProps & { onPress?: () => void } : TextProps {
   const { tnode, style, type, nativeProps, onPress } = props;
   const switchProp = type === 'block' ? props.viewProps : props.textProps;
+  const propsFromModel =
+    tnode.getReactNativeProps()?.[type === 'block' ? 'view' : 'text'] || empty;
+  const syntheticOnPress =
+    onPress ?? nativeProps?.onPress ?? propsFromModel.onPress;
   const nextProps: TextProps | ViewProps = {
-    ...(typeof onPress === 'function'
+    ...(typeof syntheticOnPress === 'function'
       ? ({ accessibilityRole: type === 'block' ? 'button' : 'link' } as const)
       : null),
-    ...tnode.getReactNativeProps()?.[type === 'block' ? 'view' : 'text'],
+    ...propsFromModel,
     ...nativeProps,
     ...switchProp,
     onPress,

diff --git a/packages/render-html/src/index.ts b/packages/render-html/src/index.ts
@@ -84,9 +84,15 @@ export type {
   NativeShortKeys,
   NativeTextStyleKey,
   NativeTextStyles,
+  ReactNativeProps,
+  ReactNativePropsDefinitions,
+  ReactNativePropsSwitch,
   SectioningTagNames,
   SetMarkersForTNode,
   StylesConfig,
+  StylessReactNativeProps,
+  StylessReactNativeTextProps,
+  StylessReactNativeViewProps,
   TabularTagNames,
   TagName,
   TBlock,

diff --git a/packages/render-html/src/shared-types.ts b/packages/render-html/src/shared-types.ts
@@ -1061,8 +1061,8 @@ export interface RendererBaseProps<T extends TNode>
    * nativeProps.style, viewProps.style]}`.
    *
    */
-
   nativeProps?: StylessReactNativeProps & { style?: StyleProp<ViewStyle> };
+
   /**
    * Any default renderer should be able to handle press.
    */

diff --git a/yarn.lock b/yarn.lock
@@ -4380,9 +4380,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@native-html/transient-render-engine@npm:10.3.0":
-  version: 10.3.0
-  resolution: "@native-html/transient-render-engine@npm:10.3.0"
+"@native-html/transient-render-engine@npm:10.4.0":
+  version: 10.4.0
+  resolution: "@native-html/transient-render-engine@npm:10.4.0"
   dependencies:
     "@native-html/css-processor": 1.11.0
     "@types/ramda": ^0.27.44
@@ -4395,7 +4395,7 @@ __metadata:
   peerDependencies:
     "@types/react-native": "*"
     react-native: ^*
-  checksum: 60a642e113ccde5f557e8c5a065b162c830107a8cdaddb2b68b36047dfb350236b95ed9c06858ea92be5354d29360791d0860250c54431c3d6e2754ed43b3d9e
+  checksum: 28883f81d5b7aa0af740dec5cb150f96ec23ba388b018e31c71abcee7b545073903f5c8fe93589215129ea2dc0382dbdf913c95ca607a5ca3394787570d04db3
   languageName: node
   linkType: hard
 
@@ -20045,7 +20045,7 @@ fsevents@^1.2.7:
     "@jsamr/counter-style": ^2.0.1
     "@jsamr/react-native-li": ^2.3.0
     "@microsoft/api-extractor": ^7.14.0
-    "@native-html/transient-render-engine": 10.3.0
+    "@native-html/transient-render-engine": 10.4.0
     "@release-it/conventional-changelog": ^2.0.1
     "@testing-library/jest-native": ^4.0.2
     "@testing-library/react-hooks": ^7.0.0