From 81868c889e494915f9dd4118f7e9de71461bfd3b Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 24 Aug 2021 11:29:57 +0700
Subject: [PATCH] styles: btn common with icon as prefix and suffix

---
 pages/index.tsx                                        |  4 ++--
 .../common/ButtonCommon/ButtonCommon.module.scss       |  9 ++++++++-
 src/components/common/ButtonCommon/ButtonCommon.tsx    | 10 ++++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 4b981486d..0005eacd0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,8 +10,8 @@ export default function Home() {
       <ButtonCommon type={ButonType.light} >{ButonType.light} -  Button light</ButtonCommon>
       <ButtonCommon type={ButonType.light} disabled>{ButonType.light} -  Button light</ButtonCommon>
       <ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon size={ButtonSize.large} loading={true}>{ButtonSize.large} - Button default large</ButtonCommon>
-      <ButtonCommon icon={<IconBuy/>} disabled>Button with icon disabled</ButtonCommon>
+      <ButtonCommon size={ButtonSize.large} icon={<IconBuy/>}>{ButtonSize.large} - Button default large</ButtonCommon>
+      <ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
       <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
       <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
       <p>Go to <code>src/components</code> to make your awesome component!</p>
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index eaf930670..81866b687 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -58,8 +58,15 @@
     }
   }
 
+  &.preserve {
+    flex-direction: row-reverse;
+    .icon {
+      margin: 0 0 0 1.6rem;
+    }
+  }
+
   .icon {
-    margin-right: 0.8rem;
+    margin: 0 1.6rem 0 0;
     svg path {
       fill: currentColor;
     }
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 27a4f3d72..6993347e6 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React from 'react'
+import React, { memo } from 'react'
 import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
 import s from './ButtonCommon.module.scss'
 
@@ -8,19 +8,21 @@ interface Props {
     type?: ButonType,
     size?: ButtonSize,
     icon?: any,
+    isIconSuffix?: boolean,
     loading?: boolean,
     disabled?: boolean,
     onClick?: () => void,
 }
 
-const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
-    icon, loading, disabled, children, onClick }: Props) => {
+const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default,
+    icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
     return (
         <button className={classNames({
             [s.buttonCommon]: true,
             [s[type]]: !!type,
             [s[size]]: !!size,
             [s.loading]: loading,
+            [s.preserve]: isIconSuffix,
         })}
             disabled={disabled}
             onClick={onClick}
@@ -31,6 +33,6 @@ const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
             <span className={s.label}>{children}</span>
         </button>
     )
-}
+})
 
 export default ButtonCommon