Merge pull request #8 from tkc/fix/class

Update Component Pattern

Author: tkc

package-lock.json

@@ -1,5 +1,4 @@
 import React from "react";
-// import Sparkline from "@rowno/sparkline";
 import style from "./style.module.scss";
 
 export interface ChartCardProps {
@@ -8,23 +7,14 @@ export interface ChartCardProps {
   chartProps: any;
 }
 
-class ChartCard extends React.Component<ChartCardProps> {
-  static defaultProps = {
-    chartProps: {},
-    title: "",
-    amount: "",
-  };
-
-  render() {
-    const { chartProps, title, amount } = this.props;
-    return (
-      <div className={`card ${style.card}`}>
-        {chartProps && <div className={style.chart}>{/* <Sparkline {...chartProps} /> */}</div>}
-        {amount && <div className={style.amount}>{amount}</div>}
-        {title && <div className={style.title}>{title}</div>}
-      </div>
-    );
-  }
+function ChartCard(props: ChartCardProps) {
+  return (
+    <div className={`card ${style.card}`}>
+      {props.chartProps && <div className={style.chart}></div>}
+      {props.amount && <div className={style.amount}>{props.amount}</div>}
+      {props.title && <div className={style.title}>{props.title}</div>}
+    </div>
+  );
 }
 
 export default ChartCard;

src/components/molecules/chart-card/index.tsx

@@ -9,70 +9,66 @@ export interface InfoCardProps {
   btnType: string;
 }
 
-class InfoCard extends React.Component<InfoCardProps> {
-  render() {
-    const { form, icon, btnType, type } = this.props;
-    const className = `${styles.infoCard}`;
-    return (
-      <div>
-        {form === "stats" && (
-          <div className={className}>
-            {icon !== false && (
-              <span className={styles.digit}>
-                <i className={`icmn-${icon}`} />
-              </span>
-            )}
-            <div className={styles.desc}>
-              <span className={styles.title}>{stats.title}</span>
-              <p>Total: {stats.count}</p>
-            </div>
+function InfoCard(props: InfoCardProps) {
+  return (
+    <div>
+      {props.form === "stats" && (
+        <div className={styles.infoCard}>
+          {props.icon !== false && (
+            <span className={styles.digit}>
+              <i className={`icmn-${props.icon}`} />
+            </span>
+          )}
+          <div className={styles.desc}>
+            <span className={styles.title}>{stats.title}</span>
+            <p>Total: {stats.count}</p>
           </div>
-        )}
-        {form === "stats-large" && (
-          <div className={className}>
-            <h5 className="text-uppercase mb-3 text-white">{commerceStats.title}</h5>
-            <div className="clearfix" />
-            <div>
-              <span className="pull-right font-size-36">
-                <strong>{commerceStats.count}</strong>
-              </span>
-              {icon !== false && <i className={`font-size-36 icmn-${icon}`} />}
-            </div>
+        </div>
+      )}
+      {props.form === "stats-large" && (
+        <div className={styles.infoCard}>
+          <h5 className="text-uppercase mb-3 text-white">{commerceStats.title}</h5>
+          <div className="clearfix" />
+          <div>
+            <span className="pull-right font-size-36">
+              <strong>{commerceStats.count}</strong>
+            </span>
+            {props.icon !== false && <i className={`font-size-36 icmn-${props.icon}`} />}
           </div>
-        )}
-        {form === "interactive" && (
-          <div className={`${className} px-3 py-5`}>
-            {icon !== false && (
-              <div className="text-center font-size-30">
-                <i className={`icmn-${icon}`} />
-              </div>
-            )}
-            <div className="mt-2 text-center">
-              <div className="mb-2">
-                <p>Lorem Ipsum is simply dummy text of printing the printing and typesetti...</p>
-              </div>
-              <a href="javascript: void(0);" className={`btn btn-outline-${btnType}`}>
-                Information
-              </a>
+        </div>
+      )}
+      {props.form === "interactive" && (
+        <div className={`${styles.infoCard} px-3 py-5`}>
+          {props.icon !== false && (
+            <div className="text-center font-size-30">
+              <i className={`icmn-${props.icon}`} />
             </div>
-          </div>
-        )}
-        {form === "bordered" && (
-          <div className={`${className} ${styles.bordered}`}>
-            {icon !== false && (
-              <span className={styles.digit}>
-                <i className={`icmn-${icon}`} />
-              </span>
-            )}
-            <div className={styles.desc}>
-              <span className={styles.title}>{stats.title}</span>
-              <p>{stats.descr}</p>
+          )}
+          <div className="mt-2 text-center">
+            <div className="mb-2">
+              <p>Lorem Ipsum is simply dummy text of printing the printing and typesetti...</p>
             </div>
+            <a href="javascript: void(0);" className={`btn btn-outline-${props.btnType}`}>
+              Information
+            </a>
+          </div>
+        </div>
+      )}
+      {props.form === "bordered" && (
+        <div className={`${styles.infoCard} ${styles.bordered}`}>
+          {props.icon !== false && (
+            <span className={styles.digit}>
+              <i className={`icmn-${props.icon}`} />
+            </span>
+          )}
+          <div className={styles.desc}>
+            <span className={styles.title}>{stats.title}</span>
+            <p>{stats.descr}</p>
           </div>
-        )}
-      </div>
-    );
-  }
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default InfoCard;