From 57ba1514c70c39972e3624792c3a1ee8beca7120 Mon Sep 17 00:00:00 2001
From: kshih-lab49 <keng-yu.shih@lab49.com>
Date: Fri, 20 May 2022 15:55:51 -0400
Subject: [PATCH 1/3] Set up the render props support

---
 src/Flash.tsx             | 30 +++++++++++++++++
 stories/Flash.stories.tsx | 69 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)

diff --git a/src/Flash.tsx b/src/Flash.tsx
index 3d8aefc..1997633 100644
--- a/src/Flash.tsx
+++ b/src/Flash.tsx
@@ -8,6 +8,29 @@ export enum FlashDirection {
   Up = 'up',
 }
 
+export interface RenderProps {
+  /**
+   * The className to be applied to the wrapper if needed.
+   */
+  wrapperClassName?: string;
+  /**
+   * The computed inline styles for the wrapper element.
+   */
+  style?: React.CSSProperties;
+  /**
+   * The className to be applied to the label if needed.
+   */
+  labelClassName?: string;
+  /**
+   * The value exposed to the renderProps.
+   */
+  value?: number;
+  /**
+   * The formatter function to format the value.
+   */
+  valueFormatter?: Formatter;
+}
+
 export interface Props {
   /**
    * Color value when the component flashes 'down'.
@@ -45,6 +68,8 @@ export interface Props {
    * Value to display. The only required prop.
    */
   value: number;
+
+  render?: (renderProps: RenderProps) => JSX.Element;
 }
 
 /**
@@ -70,6 +95,7 @@ export interface Props {
  * add your own unique styles.
  */
 export const Flash = ({
+  render,
   downColor = '#d43215',
   formatter,
   formatterFn,
@@ -120,6 +146,10 @@ export const Flash = ({
     };
   }, [value, timeout]);
 
+  if (render) {
+    return render({ cls, style, valueFormatter, value, labelClassName: `${stylePrefix}__value` });
+  }
+
   return (
     <div className={cls} style={style}>
       <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>
diff --git a/stories/Flash.stories.tsx b/stories/Flash.stories.tsx
index 289b550..09b0b3a 100644
--- a/stories/Flash.stories.tsx
+++ b/stories/Flash.stories.tsx
@@ -225,3 +225,72 @@ export const MakeItNice = () => {
     </div>
   );
 };
+
+export const RenderProps = () => {
+  return (
+    <div className="make-it-nice">
+      <style
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: `
+          .make-it-nice .rvf_Flash {
+            border: 1px solid rgba(0, 0, 0, .1);
+            border-radius: 3px;
+            display: inline-flex;
+            margin: 50px;
+            width: 150px;
+            padding: 20px 40px 25px;
+            align-items: center;
+            justify-content: center;
+            font-family: -apple-system, BlinkMacSystemFont;
+            font-size: 42px;
+            font-weight: 200;
+            box-shadow: 0 11px 17px -8px rgba(0, 0, 0, 0.3);
+            transition-property: background-color, box-shadow, border-color !important;
+          }
+
+          .make-it-nice .rvf_Flash:hover {
+            box-shadow: 0 11px 14px -11px rgba(0, 0, 0, 0.3);
+          }
+
+          .make-it-nice .rvf_Flash:hover:not(.rvf_Flash--flashing) {
+            background-color: rgba(0, 0, 0, 0.03);
+          }
+
+          .make-it-nice .rvf_Flash__value {
+            transition: color .1s ease-in-out;
+          }
+
+          .make-it-nice .rvf_Flash--flashing-up {
+            border-color: #07b357;
+          }
+
+          .make-it-nice .rvf_Flash--flashing-down {
+            border-color: #912b19;
+          }
+
+          .make-it-nice .rvf_Flash--flashing .rvf_Flash__value {
+            color: #fff;
+          }
+        `,
+        }}
+      />
+
+      <ValueSetter initialValue={999}>
+        {(value: number) => (
+          <div className="example-wrapper">
+            <Flash 
+              value={value} 
+              formatter={"currency"}
+              render={props => (
+                <div className={props.cls} style={props.style}>
+                  <span className={props.labelClassName}>{props.valueFormatter(props.value)}</span>
+                </div>
+              )} 
+            /> 
+          </div>
+        )}
+      </ValueSetter>
+    </div>
+  );
+}

From 529c5813a1fa22c90d4e083b11294935f552a0cc Mon Sep 17 00:00:00 2001
From: kshih-lab49 <keng-yu.shih@lab49.com>
Date: Fri, 20 May 2022 16:00:42 -0400
Subject: [PATCH 2/3] Corrected typings

---
 src/Flash.tsx             | 7 ++++++-
 stories/Flash.stories.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Flash.tsx b/src/Flash.tsx
index 1997633..a9fbc23 100644
--- a/src/Flash.tsx
+++ b/src/Flash.tsx
@@ -147,7 +147,12 @@ export const Flash = ({
   }, [value, timeout]);
 
   if (render) {
-    return render({ cls, style, valueFormatter, value, labelClassName: `${stylePrefix}__value` });
+    return render({ 
+      wrapperClassName: cls, 
+      style,
+      valueFormatter, 
+      value, 
+      labelClassName: `${stylePrefix}__value` });
   }
 
   return (
diff --git a/stories/Flash.stories.tsx b/stories/Flash.stories.tsx
index 09b0b3a..981bc1f 100644
--- a/stories/Flash.stories.tsx
+++ b/stories/Flash.stories.tsx
@@ -283,7 +283,7 @@ export const RenderProps = () => {
               value={value} 
               formatter={"currency"}
               render={props => (
-                <div className={props.cls} style={props.style}>
+                <div className={props.wrapperClassName} style={props.style}>
                   <span className={props.labelClassName}>{props.valueFormatter(props.value)}</span>
                 </div>
               )} 

From a642ab97dda298a7538df851b5e2ba31c83e79df Mon Sep 17 00:00:00 2001
From: kshih-lab49 <keng-yu.shih@lab49.com>
Date: Fri, 20 May 2022 16:04:46 -0400
Subject: [PATCH 3/3] Fix linting

---
 src/Flash.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Flash.tsx b/src/Flash.tsx
index a9fbc23..20b6984 100644
--- a/src/Flash.tsx
+++ b/src/Flash.tsx
@@ -147,12 +147,13 @@ export const Flash = ({
   }, [value, timeout]);
 
   if (render) {
-    return render({ 
-      wrapperClassName: cls, 
+    return render({
+      wrapperClassName: cls,
       style,
-      valueFormatter, 
-      value, 
-      labelClassName: `${stylePrefix}__value` });
+      valueFormatter,
+      value,
+      labelClassName: `${stylePrefix}__value`,
+    });
   }
 
   return (