From a2ce51c52db9d8aed50e107e5d78a9f045f25be5 Mon Sep 17 00:00:00 2001
From: kshih-lab49 <keng-yu.shih@lab49.com>
Date: Tue, 26 Apr 2022 15:48:13 -0400
Subject: [PATCH 1/3] Added ability to modify the components' dom structure

---
 src/Flash.tsx                          | 28 +++++++++++++++++++++++---
 src/components/Container.tsx           | 25 +++++++++++++++++++++++
 src/components/Value.tsx               | 23 +++++++++++++++++++++
 src/components/types.ts                |  8 ++++++++
 stories/Flash.stories.tsx              | 20 ++++++++++++++++++
 stories/components/CustomContainer.tsx | 26 ++++++++++++++++++++++++
 stories/components/CustomValue.tsx     | 10 +++++++++
 7 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Container.tsx
 create mode 100644 src/components/Value.tsx
 create mode 100644 src/components/types.ts
 create mode 100644 stories/components/CustomContainer.tsx
 create mode 100644 stories/components/CustomValue.tsx

diff --git a/src/Flash.tsx b/src/Flash.tsx
index 3d8aefc..d11cced 100644
--- a/src/Flash.tsx
+++ b/src/Flash.tsx
@@ -1,5 +1,8 @@
 import classnames from 'classnames';
 import React from 'react';
+import { Container } from './components/Container';
+import { Value } from './components/Value';
+import { ComponentsConfig } from './components/types';
 
 import { formatters, Formatter } from './formatters/index';
 
@@ -45,6 +48,10 @@ export interface Props {
    * Value to display. The only required prop.
    */
   value: number;
+  /**
+   * Components configs to do custom rendering
+   */
+  components?: ComponentsConfig;
 }
 
 /**
@@ -79,6 +86,10 @@ export const Flash = ({
   upColor = '#00d865',
   value,
   stylePrefix = 'rvf_Flash',
+  components = {
+    Container: Container,
+    Value: Value,
+  },
 }: Props) => {
   const ref = React.useRef<number>(value);
   const [flash, setFlash] = React.useState<FlashDirection | null>(null);
@@ -120,9 +131,20 @@ export const Flash = ({
     };
   }, [value, timeout]);
 
+  const containerProps = {
+    cls,
+    style,
+  };
+
+  const valueProps = {
+    value,
+    valueFormatter,
+    stylePrefix,
+  };
+
   return (
-    <div className={cls} style={style}>
-      <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>
-    </div>
+    <components.Container {...containerProps}>
+      <components.Value {...valueProps} />
+    </components.Container>
   );
 };
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
new file mode 100644
index 0000000..caf94f0
--- /dev/null
+++ b/src/components/Container.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+
+export interface CommonProps {
+  /**
+   * classnames to be used with the Container component
+   */
+  cls: string;
+
+  /**
+   * Custom styles to be used for the Container component
+   */
+  style: React.CSSProperties;
+}
+
+export interface ContainerProps extends CommonProps {
+  children: ReactNode;
+}
+
+export const Container = ({ children, cls, style }: ContainerProps) => {
+  return (
+    <div className={cls} style={style}>
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/Value.tsx b/src/components/Value.tsx
new file mode 100644
index 0000000..9b7bace
--- /dev/null
+++ b/src/components/Value.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Formatter, formatters } from '../formatters/index';
+
+export interface CommonProps {
+  /**
+   * Pass your own formatter function.
+   */
+  valueFormatter: Formatter;
+  /**
+   * Prefix for the CSS selectors in the DOM.
+   */
+  stylePrefix: string;
+  /**
+   * Value to display..
+   */
+  value: number;
+}
+
+export interface ValueProps extends CommonProps {}
+
+export const Value = ({ valueFormatter, stylePrefix = 'rvf_Flash', value }: ValueProps) => {
+  return <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>;
+};
diff --git a/src/components/types.ts b/src/components/types.ts
new file mode 100644
index 0000000..fa4587b
--- /dev/null
+++ b/src/components/types.ts
@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+import { ContainerProps } from './Container';
+import { ValueProps } from './Value';
+
+export interface ComponentsConfig {
+  Container: ComponentType<ContainerProps>;
+  Value: ComponentType<ValueProps>;
+}
diff --git a/stories/Flash.stories.tsx b/stories/Flash.stories.tsx
index 289b550..d2329a1 100644
--- a/stories/Flash.stories.tsx
+++ b/stories/Flash.stories.tsx
@@ -6,6 +6,9 @@ import { Flash, Props } from '../src/Flash';
 import { useInterval } from './useInterval';
 import { ValueSetter } from './components/ValueSetter';
 import pkg from '../package.json';
+import { Value } from '../src/components/Value';
+import { CustomContainer } from './components/CustomContainer';
+import { CustomValue } from './components/CustomValue';
 
 export default {
   title: 'Flash',
@@ -225,3 +228,20 @@ export const MakeItNice = () => {
     </div>
   );
 };
+
+export const CustomComponent = () => {
+  return (
+    <ValueSetter initialValue={999}>
+      {(value: number) => (
+        <Flash
+          value={value}
+          formatter="currency"
+          components={{
+            Container: CustomContainer,
+            Value: CustomValue,
+          }}
+        />
+      )}
+    </ValueSetter>
+  );
+};
diff --git a/stories/components/CustomContainer.tsx b/stories/components/CustomContainer.tsx
new file mode 100644
index 0000000..6b41df6
--- /dev/null
+++ b/stories/components/CustomContainer.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { ContainerProps } from '../../src/components/Container';
+
+export const CustomContainer = ({ children, cls, style }: ContainerProps) => {
+  const customStyles: React.CSSProperties = {
+    border: '1px solid rgba(0, 0, 0, .1)',
+    borderRadius: '3px',
+    display: 'inline-flex',
+    margin: 50,
+    width: 150,
+    padding: '20px 40px 25px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: '-apple-system, BlinkMacSystemFont',
+    fontSize: 42,
+    fontWeight: 200,
+    boxShadow: '0 11px 17px -8px rgba(0, 0, 0, 0.3)',
+    transitionProperty: 'background-color, box-shadow, border-color !important',
+  };
+
+  return (
+    <div className={cls} style={{ ...style, ...customStyles }}>
+      {children}
+    </div>
+  );
+};
diff --git a/stories/components/CustomValue.tsx b/stories/components/CustomValue.tsx
new file mode 100644
index 0000000..49ae47f
--- /dev/null
+++ b/stories/components/CustomValue.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { ValueProps } from '../../src/components/Value';
+
+export const CustomValue = ({ stylePrefix, valueFormatter, value }: ValueProps) => {
+  return (
+    <span className={`${stylePrefix}__value`}>
+      {valueFormatter(value)}
+    </span>
+  );
+};

From 0ff32b1b71762fa7f448b72ce5a8fc0b45caf146 Mon Sep 17 00:00:00 2001
From: kshih-lab49 <keng-yu.shih@lab49.com>
Date: Tue, 26 Apr 2022 15:54:12 -0400
Subject: [PATCH 2/3] Fix linting errors

---
 src/Flash.tsx            | 19 ++++---------------
 src/components/Value.tsx |  2 +-
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/Flash.tsx b/src/Flash.tsx
index d11cced..aa8832d 100644
--- a/src/Flash.tsx
+++ b/src/Flash.tsx
@@ -87,8 +87,8 @@ export const Flash = ({
   value,
   stylePrefix = 'rvf_Flash',
   components = {
-    Container: Container,
-    Value: Value,
+    Container,
+    Value,
   },
 }: Props) => {
   const ref = React.useRef<number>(value);
@@ -131,20 +131,9 @@ export const Flash = ({
     };
   }, [value, timeout]);
 
-  const containerProps = {
-    cls,
-    style,
-  };
-
-  const valueProps = {
-    value,
-    valueFormatter,
-    stylePrefix,
-  };
-
   return (
-    <components.Container {...containerProps}>
-      <components.Value {...valueProps} />
+    <components.Container cls={cls} style={style}>
+      <components.Value value={value} valueFormatter={valueFormatter} stylePrefix={stylePrefix} />
     </components.Container>
   );
 };
diff --git a/src/components/Value.tsx b/src/components/Value.tsx
index 9b7bace..6e3c89f 100644
--- a/src/components/Value.tsx
+++ b/src/components/Value.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Formatter, formatters } from '../formatters/index';
+import { Formatter } from '../formatters/index';
 
 export interface CommonProps {
   /**

From 730a43d996cbb5f1557a2172677a2da93a5ab79f Mon Sep 17 00:00:00 2001
From: kshih-lab49 <keng-yu.shih@lab49.com>
Date: Tue, 26 Apr 2022 16:01:13 -0400
Subject: [PATCH 3/3] Remove unused imports

---
 stories/Flash.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/stories/Flash.stories.tsx b/stories/Flash.stories.tsx
index d2329a1..9a5e4dd 100644
--- a/stories/Flash.stories.tsx
+++ b/stories/Flash.stories.tsx
@@ -6,7 +6,6 @@ import { Flash, Props } from '../src/Flash';
 import { useInterval } from './useInterval';
 import { ValueSetter } from './components/ValueSetter';
 import pkg from '../package.json';
-import { Value } from '../src/components/Value';
 import { CustomContainer } from './components/CustomContainer';
 import { CustomValue } from './components/CustomValue';