forstok-ui-lib 8.1.0 → 8.1.2

package/src/components/icon/styles.ts

@@ -97,6 +97,9 @@ import IconEmoji from '../../assets/images/icons/emoji.svg'
 import IconPrice from '../../assets/images/icons/price.svg'
 import IconThumb from '../../assets/images/icons/thumb.svg'
 import IconClipboard from '../../assets/images/icons/clipboard.svg'
+import IconReload from '../../assets/images/icons/reload.svg'
+
+import { IconMode, IconName } from './type'
 
 const NotificationStyled = css`
   width: 44px;
@@ -110,710 +113,148 @@ const NotificationStyled = css`
   justify-content: center;
 `
 
-const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: string, $name: string, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => {
-  let style = ``;
-  switch ($name) {
-    case 'search': 
-      style += `
-        &:before { 
-          content: url(${IconSearch}); 
-        }
-      `
-      break;
-    case 'check': 
-      style += `
-        &:before { 
-          content: url(${IconCheck}); 
-        }
-      `
-      break;
-    case 'check-grey': 
-      style += `
-        &:before { 
-          content: url(${IconCheckGrey}); 
-        }
-      `
-      break;   
-    case 'arrow-left-blue': 
-      style += `
-        &:before { 
-          content: url(${IconArrowLeftBlue}); 
-        }
-      `
-      break;
-    case 'edit': 
-      style += `
-        &:before { 
-          content: url(${IconEdit}); 
-        }
-      `
-      break;
-    case 'arrow': 
-      style += `
-        &:before { 
-          content: url(${IconArrow}); 
-        }
-      `
-      break;
-    case 'discount': 
-      style += `
-        &:before { 
-          content: url(${IconDiscount}); 
-        }
-      `
-      break;  
-    case 'cash': 
-      style += `
-        &:before { 
-          content: url(${IconCash}); 
-        }
-      `
-      break; 
-    case 'credit': 
-      style += `
-        &:before { 
-          content: url(${IconCredit}); 
-        }
-      `
-      break; 
-    case 'debit': 
-      style += `
-        &:before { 
-          content: url(${IconDebit}); 
-        }
-      `
-      break; 
-    case 'bank': 
-      style += `
-        &:before { 
-          content: url(${IconBank}); 
-        }
-      `
-      break; 
-    case 'qris': 
-      style += `
-        &:before { 
-          content: url(${IconQRIS}); 
-        }
-      `
-      break; 
-    case 'wallet': 
-      style += `
-        &:before { 
-          content: url(${IconWallet}); 
-        }
-      `
-      break; 
-    case 'delivery': 
-      style += `
-        &:before { 
-          content: url(${IconDelivery}); 
-        }
-      `
-      break;  
-    case 'success': 
-      style += `
-        &:before { 
-          content: url(${IconSuccess}); 
-        }
-      `
-      break;  
-    case 'email': 
-      style += `
-        &:before { 
-          content: url(${IconEmail}); 
-        }
-      `
-      break;  
-    case 'print': 
-      style += `
-        &:before { 
-          content: url(${IconPrint}); 
-        }
-      `
-      break;  
-    case 'warning': 
-      style += `
-        &:before { 
-          content: url(${IconWarning}); 
-        }
-      `
-      break; 
-    case 'alert': 
-      style += `
-        &:before { 
-          content: url(${IconAlert}); 
-        }
-      `
-      break;
-    case 'barcode': 
-      style += `
-        &:before { 
-          content: url(${IconBarcode}); 
-        }
-      `
-      break; 
-    case 'arrow-upload': 
-      style += `
-        &:before { 
-          content: url(${IconArrowUpload}); 
-        }
-      `
-      break;
-    case 'trash': 
-      style += `
-        &:before { 
-          content: url(${IconTrash}); 
-        }
-      `
-      break;
-    case 'arrow-left': 
-      style += `
-        &:before { 
-          content: url(${IconArrowLeft}); 
-        }
-      `
-      break;
-    case 'arrow-left-double': 
-      style += `
-        &:before { 
-          content: url(${IconArrowLeftDouble}); 
-        }
-      `
-      break;
-    case 'arrow-right': 
-      style += `
-        &:before { 
-          content: url(${IconArrowRight}); 
-        }
-      `
-      break;
-    case 'arrow-right-double': 
-      style += `
-        &:before { 
-          content: url(${IconArrowRightDouble}); 
-        }
-      `
-      break;
-    case 'arrow-down':
-      style += `
-        &:before { 
-          content: url(${IconArrowDown}); 
-        }
-      `
-      break;
-    case 'calendar': 
-      style += `
-        &:before { 
-          content: url(${IconCalendar}); 
-        }
-      `
-      break;
-    case 'question': 
-      style += `
-        &:before { 
-          content: url(${IconQuestion}); 
-          filter: grayscale(100%);
-        }
-      `
-      break;
-    case 'sortby': 
-      style += `
-        &:before { 
-          content: url(${IconSortby}); 
-        }
-      `
-      break;
-    case 'NotificationDownload' :
-      style += `
-        ${NotificationStyled}
-        &:before { 
-          content: url(${IconNotificationDownload}); 
-        }`
-      break;
-    case 'NotificationUpload' :
-      style += `
-        ${NotificationStyled}
-        &:before { 
-          content: url(${IconNotificationUpload}); 
-        }`
-      break;
-    case 'bar': 
-      style += `
-        &:before { 
-          content: url(${IconBar}); 
-        }`
-      break;
-    case 'close': 
-      style += `
-        &:before { 
-          content: url(${IconClose}); 
-        }`
-      break;
-    case 'person': 
-      style += `
-        &:before { 
-          content: url(${IconPerson}); 
-        }`
-      break;
-    case 'person-red': 
-      style += `
-        &:before { 
-          content: url(${IconPersonRed}); 
-        }`
-      break;
-    case 'cart': 
-      style += `
-        &:before { 
-          content: url(${IconCart}); 
-        }`
-      break;
-    case 'back': 
-      style += `
-        &:before { 
-          content: url(${IconBack}); 
-        }
-      `
-      break;
-    case 'time': 
-      style += `
-        &:before { 
-          content: url(${IconTime}); 
-        }
-      `
-      break;
-    case 'dot': 
-      style += `
-        &:before { 
-          content: url(${IconDot}); 
-        }
-      `
-      break;
-    case 'dashboard-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconDashboardLeftNav}); 
-        }
-      `
-      break;
-    case 'dashboard-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconDashboardActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'chat-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconChatLeftNav}); 
-        }
-      `
-      break;
-    case 'chat-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconChatActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'ai-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconAiLeftNav}); 
-        }
-      `
-      break;
-    case 'ai-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconAiActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'reporting-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconReportingLeftNav}); 
-        }
-      `
-      break;
-    case 'reporting-active-left-nav':
-      style += `
-        &:before { 
-          content: url(${IconReportingActiveLeftNav}); 
-        }
-      `
-      break;
-    
-    case 'activity-log-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconActivityLogLeftNav}); 
-        }
-      `
-      break;
-    case 'activity-log-active-left-nav':
-      style += `
-        &:before { 
-          content: url(${IconActivityLogActiveLeftNav}); 
-        }
-      `
-      break;  
-    case 'integration-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconIntegrationLeftNav}); 
-        }
-      `
-      break;
-    case 'integration-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconIntegrationActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'setting-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconSettingLeftNav}); 
-        }
-      `
-      break;
-    case 'setting-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconSettingActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'customer-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconCustomerLeftNav}); 
-        }
-      `
-      break;
-    case 'customer-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconCustomerActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'marketing-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconMarketingLeftNav}); 
-        }
-      `
-      break;
-    case 'marketing-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconMarketingActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'product-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconProductLeftNav}); 
-        }
-      `
-      break;
-    case 'product-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconProductActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'inventory-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconInventoryLeftNav}); 
-        }
-      `
-      break;
-    case 'inventory-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconInventoryActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'order-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconOrderLeftNav}); 
-        }
-      `
-      break;
-    case 'order-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconOrderActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'price-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconPriceLeftNav}); 
-        }
-      `
-      break;
-    case 'price-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconPriceActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'invoice-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconInvoiceLeftNav}); 
-        }
-      `
-      break;
-    case 'invoice-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconInvoiceActiveLeftNav}); 
-        }
-      `
-      break;  
-    case 'warning-chat': 
-      style += `
-        &:before { 
-          content: url(${IconWarningChat}); 
-        }
-      `
-      break;
-    case 'check-chat': 
-      style += `
-        &:before { 
-          content: url(${IconCheckChat}); 
-        }
-      `
-      break; 
-    case 'check-chat-blue': 
-      style += `
-        &:before { 
-          content: url(${IconCheckChatBlue}); 
-        }
-      `
-      break;  
-    case 'phone': 
-      style += `
-        &:before { 
-          content: url(${IconPhone}); 
-        }
-      `
-      break;
-    case 'location': 
-      style += `
-        &:before { 
-          content: url(${IconLocation}); 
-        }
-      `
-      break; 
-    case 'agent':
-      style += `
-        &:before { 
-          content: url(${IconAgent}); 
-        }
-      `
-      break; 
-    case 'report': 
-      style += `
-        &:before { 
-          content: url(${IconReport}); 
-        }
-      `
-      break; 
-    case 'gender': 
-      style += `
-        &:before { 
-          content: url(${IconGender}); 
-        }
-      `
-      break; 
-    case 'birthday': 
-      style += `
-        &:before { 
-          content: url(${IconBirthday}); 
-        }
-      `
-      break; 
-    case 'attach': 
-      style += `
-        &:before { 
-          content: url(${IconAttach}); 
-        }
-      `
-      break;
-    case 'smile': 
-      style += `
-        &:before { 
-          content: url(${IconSmile});  
-        }
-      `
-      break;
-    case 'voucher-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconVoucherLeftNav}); 
-        }
-      `
-      break;
-    case 'voucher-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconVoucherActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'analytic-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconAnalyticLeftNav}); 
-        }
-      `
-      break;
-    case 'analytic-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconAnalyticActiveLeftNav}); 
-        }
-      `
-      break;
-    case 'label-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconLabelLeftNav}); 
-        }
-      `
-      break;
-    case 'label-active-left-nav': 
-      style += `
-        &:before { 
-          content: url(${IconLabelActiveLeftNav}); 
-        }
-      `
-      break;  
-    case 'questions': 
-      style += `
-        &:before { 
-          content: url(${IconQuestions}); 
-        }
-      `
-      break;  
-    case 'faq': 
-      style += `
-        &:before { 
-          content: url(${IconFaq}); 
-        }
-      `
-      break; 
-    case 'api': 
-      style += `
-        &:before { 
-          content: url(${IconApi}); 
-        }
-      `
-      break; 
-    case 'gift': 
-      style += `
-        &:before { 
-          content: url(${IconGift}); 
-        }
-      `
-      break; 
-    case 'document': 
-      style += `
-        &:before { 
-          content: url(${IconDocument}); 
-        }
-      `
-      break;
-    case 'video': 
-      style += `
-        &:before { 
-          content: url(${IconVideo}); 
-        }
-      `
-      break;   
-    case 'image': 
-      style += `
-        &:before { 
-          content: url(${IconImage}); 
-        }
-      `
-      break;  
-    case 'emoji': 
-      style += `
-        &:before { 
-          content: url(${IconEmoji}); 
-        }
-      `
-      break; 
-    case 'price': 
-      style += `
-        &:before { 
-          content: url(${IconPrice}); 
-        }
-      `
-      break;   
-    case 'thumb': 
-      style += `
-        &:before { 
-          content: url(${IconThumb}); 
-        }
-      `
-      break;  
-    case 'clipboard': 
-      style += `
-        &:before { 
-          content: url(${IconClipboard}); 
-        }
-      `
-      break;      
-    default: 
-      break;
-  }
-  if ($width) {
-    style += `
-      &:before { 
-        width: ${$width}; 
-        height: ${$width};
-      }
-    `
-  }
-  if (onClick) {
-    style += `
-      cursor: pointer;
-    `
-  }
-  if ($mode === 'filter') {
-    style += `
-      position: relative;
-    `
-  } else if ($mode === 'disabled') {
-    style += `
-      &, 
-      &:before {
-        opacity: .7;
-      }
-    `
-  } 
-  return style;
+const iconStyles = {
+  'search': IconSearch,
+  'check': IconCheck,
+  'check-grey': IconCheckGrey,
+  'arrow-left-blue': IconArrowLeftBlue,
+  'edit': IconEdit,
+  'arrow': IconArrow,
+  'discount': IconDiscount,
+  'cash': IconCash,
+  'credit': IconCredit,
+  'debit': IconDebit,
+  'bank': IconBank,
+  'qris': IconQRIS,
+  'wallet': IconWallet,
+  'delivery': IconDelivery,
+  'success': IconSuccess,
+  'email': IconEmail,
+  'print': IconPrint,
+  'warning': IconWarning,
+  'alert': IconAlert,
+  'barcode': IconBarcode,
+  'arrow-upload': IconArrowUpload,
+  'trash': IconTrash,
+  'arrow-left': IconArrowLeft, 
+  'arrow-left-double': IconArrowLeftDouble, 
+  'arrow-right': IconArrowRight, 
+  'arrow-right-double': IconArrowRightDouble, 
+  'arrow-down': IconArrowDown, 
+  'calendar': IconCalendar, 
+  'question': IconQuestion, 
+  'sortby': IconSortby, 
+  'NotificationDownload': IconNotificationDownload, 
+  'NotificationUpload': IconNotificationUpload, 
+  'bar': IconBar, 
+  'close': IconClose, 
+  'person': IconPerson, 
+  'person-red': IconPersonRed, 
+  'cart': IconCart, 
+  'back': IconBack, 
+  'time': IconTime, 
+  'dot': IconDot, 
+  'dashboard-left-nav': IconDashboardLeftNav, 
+  'dashboard-active-left-nav': IconDashboardActiveLeftNav, 
+  'chat-left-nav': IconChatLeftNav, 
+  'chat-active-left-nav': IconChatActiveLeftNav, 
+  'ai-left-nav': IconAiLeftNav, 
+  'ai-active-left-nav': IconAiActiveLeftNav, 
+  'reporting-left-nav': IconReportingLeftNav, 
+  'reporting-active-left-nav': IconReportingActiveLeftNav, 
+  'activity-log-left-nav': IconActivityLogLeftNav, 
+  'activity-log-active-left-nav': IconActivityLogActiveLeftNav, 
+  'integration-left-nav': IconIntegrationLeftNav, 
+  'integration-active-left-nav': IconIntegrationActiveLeftNav, 
+  'setting-left-nav': IconSettingLeftNav, 
+  'setting-active-left-nav': IconSettingActiveLeftNav, 
+  'customer-left-nav': IconCustomerLeftNav, 
+  'customer-active-left-nav': IconCustomerActiveLeftNav, 
+  'marketing-left-nav': IconMarketingLeftNav, 
+  'marketing-active-left-nav': IconMarketingActiveLeftNav, 
+  'product-left-nav': IconProductLeftNav, 
+  'product-active-left-nav': IconProductActiveLeftNav, 
+  'inventory-left-nav': IconInventoryLeftNav, 
+  'inventory-active-left-nav': IconInventoryActiveLeftNav, 
+  'order-left-nav': IconOrderLeftNav, 
+  'order-active-left-nav': IconOrderActiveLeftNav, 
+  'price-left-nav': IconPriceLeftNav, 
+  'price-active-left-nav': IconPriceActiveLeftNav, 
+  'invoice-left-nav': IconInvoiceLeftNav, 
+  'invoice-active-left-nav': IconInvoiceActiveLeftNav, 
+  'warning-chat': IconWarningChat, 
+  'check-chat': IconCheckChat, 
+  'check-chat-blue': IconCheckChatBlue, 
+  'phone': IconPhone, 
+  'location': IconLocation, 
+  'agent': IconAgent, 
+  'report': IconReport, 
+  'gender': IconGender, 
+  'birthday': IconBirthday, 
+  'attach': IconAttach, 
+  'smile': IconSmile,  
+  'voucher-left-nav': IconVoucherLeftNav, 
+  'voucher-active-left-nav': IconVoucherActiveLeftNav, 
+  'analytic-left-nav': IconAnalyticLeftNav, 
+  'analytic-active-left-nav': IconAnalyticActiveLeftNav, 
+  'label-left-nav': IconLabelLeftNav, 
+  'label-active-left-nav': IconLabelActiveLeftNav, 
+  'questions': IconQuestions, 
+  'faq': IconFaq, 
+  'api': IconApi, 
+  'gift': IconGift, 
+  'document': IconDocument, 
+  'video': IconVideo, 
+  'image': IconImage, 
+  'emoji': IconEmoji, 
+  'price': IconPrice, 
+  'thumb': IconThumb, 
+  'clipboard': IconClipboard,
+  'reload': IconReload
+} as const
+const modeStyles = {
+  filter: css`
+    position: relative;
+  `,
+  disabled: css`
+    &, 
+    &:before {
+      opacity: .7;
+    }
+  `
 }
+const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: IconMode, $name: IconName, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => css`
+  ${$name && css`
+    &:before { 
+      content: url(${iconStyles[$name]}); 
+    }
+  `}
+
+  ${$name === 'question' && css`
+    &:before { 
+      filter: grayscale(100%);
+    }
+  `}
+
+  ${($name === 'NotificationDownload' || $name === 'NotificationUpload') && css`
+    ${NotificationStyled}
+  `}
+
+  ${$width && css`
+    &:before { 
+      width: ${$width}; 
+      height: ${$width};
+    }
+  `}
+
+  ${onClick && css`
+    cursor: pointer;
+  `}
+
+  ${$mode && modeStyles[$mode]}
+`
 
-export const IconContainer = styled.i<{ $mode?: string, $name: string, $width?: string | number }>`
+export const IconContainer = styled.i<{ $mode?: IconMode, $name: IconName, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }>`
   display: inline-block;
   &:before {
     display: grid;