feat: implement falsyNode realisation & update card body component

src/components/devsupport/components/falsyNode/falsyNode.component.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { StyleType } from '../../../theme';
+
+export type RenderProp<Props = {}> = (props?: Props) => React.ReactElement;
+
+export type FalsyNodeProps<Props = {}> = Props & {
+  fallback?: React.ReactElement;
+  children?: React.ReactElement;
+  style?: StyleType;
+};
+
+/**
+ * Helper component for optional properties that should render cloned component.
+ *
+ * Accepts props of a component that is expected to be rendered,
+ * and `children` which may be React Element only.
+ *
+ * If it is a React Element, will call it with props passed to this component.
+ *
+ * @property {RenderProp} children - React jsx component to be rendered.
+ * @property {React.ReactElement} fallback - Element to render if children is null or undefined.
+ *
+ * @example Will render nothing.
+ * ```
+ * <FalsyNode />
+ * ```
+ *
+ * @example Will render red title.
+ * ```
+ * const Title = () => (
+ *   <FalsyNode
+ *     style={{ color: 'red' }}
+ *     component={props => <Text {...props}>Title</Text>}
+ *   />
+ * );
+ * ```
+ */
+
+type ChildElement = React.ReactElement;
+type ChildrenProp = ChildElement | ChildElement[];
+
+export class FalsyNode<Props = {}> extends React.Component<FalsyNodeProps<Props>> {
+
+  private renderChildElement = (source: ChildElement, props: any): ChildElement => {
+    return React.cloneElement(source, {
+      ...props,
+      ...source.props,
+      style: [this.props?.style, source.props.style],
+    });
+  };
+
+  private renderComponentChildren = (source: ChildrenProp, props: any): ChildElement[] => {
+    return React.Children.map(source, child => this.renderChildElement(child, props));
+  };
+
+  public render(): React.ReactElement {
+    const { children, fallback, ...props } = this.props;
+
+    if (!children) {
+      return fallback || null;
+    }
+
+    return <>{this.renderComponentChildren(children, props)}</>;
+  }
+}

src/components/devsupport/index.ts

@@ -3,6 +3,7 @@ export {
   RenderProp,
 } from './components/falsyFC/falsyFC.component';
 export { FalsyText } from './components/falsyText/falsyText.component';
+export { FalsyNode } from './components/falsyNode/falsyNode.component';
 export {
   TouchableWithoutFeedback,
   TouchableWithoutFeedbackProps,

src/components/ui/card/card.component.tsx

@@ -14,6 +14,7 @@ import {
 import {
   EvaStatus,
   FalsyFC,
+  FalsyNode,
   RenderProp,
   TouchableWeb,
   TouchableWebElement,
@@ -33,7 +34,7 @@ type CardStyledProps = Overwrite<StyledComponentProps, {
 }>;
 
 export interface CardProps extends TouchableWebProps, CardStyledProps {
-  children?: React.ReactNode;
+  children?: React.ReactElement;
   header?: RenderProp<ViewProps>;
   footer?: RenderProp<ViewProps>;
   accent?: RenderProp<ViewProps>;
@@ -150,9 +151,9 @@ export class Card extends React.Component<CardProps> {
           component={header}
         />
         {header && <Divider/>}
-        <View style={evaStyle.body}>
+        <FalsyNode style={evaStyle.body}>
           {children}
-        </View>
+        </FalsyNode>
         {footer && <Divider/>}
         <FalsyFC
           style={[styles.transparent, evaStyle.footer]}