forstok-ui-lib 6.4.3 → 6.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.4.3",
+  "version": "6.5.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/javascripts/function.ts

@@ -108,14 +108,8 @@ export const generateMessageQuestion = (type: string, title: string, subtitle: s
   return result;
 }
 
-export const currencyNumber = (value: number) => {
-  if (value === null) {
-    return value;
-  } else if (typeof value == 'number') {
-    return value.toLocaleString('id-ID', {style: 'currency', currency: 'IDR', minimumFractionDigits: 0});
-  } else {
-    return value;
-  }
+export const currencyNumber = (value?: number | null) => {
+  return (value !== undefined  && value !== null) ? value.toLocaleString('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }) : '-'
 }
 
 export const evUpdateInputRc = (input?: HTMLInputElement, value?: string | number) => {
@@ -679,4 +673,9 @@ export const evSetTotal = (totalCount: number, totalEl: HTMLSpanElement, callbac
   if (callback && typeof(callback) == "function") {
     callback()
   }
+}
+
+export const humanise = (value?: string) => {
+  const underscoreMatch = /_/g, underscoreMatch2 = /-/g
+  return value ? value.replace(underscoreMatch, " ").replace(underscoreMatch2, " ") : ''
 }

package/src/assets/stylesheets/shares.styles.ts

@@ -3996,4 +3996,46 @@ export const BulkSelectContainer = styled.div`
   @media only screen and (min-width: 1024px) {
     grid-gap: 32px;
   }
+`
+
+export const DotIcon = styled.span<{ $color?: string, $mode?: 'activities' }>`
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  margin-top: -4px;
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+
+  ${({ $color }) => $color && css`
+    background-color: ${$color}
+  `}
+
+  ${({ $mode }) => $mode === 'activities' && css`
+    margin-top: -6px;
+    margin-left: -2.5px;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+  `}
+`
+
+export const ItemQtyLabel = styled.span` 
+  text-align: right;
+  display: grid;
+`
+
+export const APILabel = styled.label`
+  color: var(--act-clr);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  padding: 3px 5px;
+  background-color: #21BA45;
+  display: block;
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  z-index: 1;
+  border-radius: var(--ter-rd);
 `

package/src/components/image/channel.tsx

@@ -0,0 +1,62 @@
+import Image from '.'
+
+import { InitialContainer, APILabel } from '../../assets/stylesheets/shares.styles'
+
+import { ImageMode } from './type'
+
+const ImageChannelComponent = ({ data, label, size, isImageOnly, $mode }:{ data?: any, label?: string, size?: string, isImageOnly?: boolean, $mode?: ImageMode }) => {
+  const fontSize = size ? ((parseInt(size) / 2) > 10 ? (parseInt(size) / 2) : 10) : 10
+  const defSize = size || '20px'
+
+  if (!data) {
+    return (
+      <>{!isImageOnly && <span>{label || '-'}</span>}</>
+    )
+  }
+
+  const defName = label || data?.name || data?.storeName || data?.store_name || data?.accountName || data?.channelName || data?.channel_name || 'No Store'
+  const defSrc = data?.icon || data?.imageUrl || data?.channelImage || data?.channel_image || ''
+  const defColor = data?.color || data?.channelColor || data?.channel_color || '#ooo'
+  const defInitial = data?.channelInitials || data?.channelInitial || data?.channel_initials || data?.initials || ''
+  const isAPI = data?.availableAPI
+
+  return (
+    <> 
+      <div>
+        {defSrc ? (
+          <Image
+            $mode={$mode}
+            width='auto'
+            height={defSize}
+            src={defSrc || '/'}
+            alt={data.channelName || data.channel_name || ''} 
+          />
+        ) : (
+          defInitial? (
+            <InitialContainer style={{
+              width: defSize, 
+              height: defSize, 
+              backgroundColor: defColor, 
+              fontSize: fontSize+'px'}}
+            >{defInitial}</InitialContainer>
+          ) : (
+            <Image
+              $mode={$mode}
+              width='auto'
+              height={defSize}
+              src={'/'}
+            />
+          )
+        )}
+      </div>
+      {!isImageOnly && (
+        <span className='multi-elipsis' title={defName}>
+          {defName}
+          {isAPI && <APILabel className='_refLabel'>API</APILabel>}
+        </span>
+      )}
+    </>
+  )
+}
+
+export default ImageChannelComponent

package/src/components/image/type.ts

@@ -0,0 +1,3 @@
+export type ImageMode = 
+  | 'store'
+  | 'product'

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { default as MessageComponent } from './message';
 export { default as MessageQuestionComponent } from './message/question'; 
 export { default as PopupComponent } from './popup';
 export { default as ImageComponent } from './image';
+export { default as ImageChannelComponent } from './image/channel';
 export { default as SelectComponent } from './select';
 export { default as MenuList } from './select/menulist';
 export { default as ErrorComponent } from './error';