forstok-ui-lib 6.4.2 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.4.2",
+  "version": "6.5.0",
   "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

@@ -3901,4 +3901,141 @@ export const ScrollArrowContainer = styled.section`
       color: var(--sec-clr-lnk__hvr);
     }
   }
+`
+
+export const BulkSelectContainer = styled.div` 
+  position: relative;
+  display: grid;
+  grid-auto-flow: dense;
+  grid-gap: 10px;
+  > article {
+    font-weight: 600;
+    padding: 3px 4px 3px 0;
+    display: grid;
+    grid-auto-flow: column;
+    &:only-child {
+      margin-left: 0;
+    }
+    &:nth-child(4) {
+      padding-left: 14px;
+    }
+    &:nth-child(4):last-child {
+      width: 200%;
+      padding-left: 0;
+      margin-left: 0;
+    }
+    > section, 
+    > button {
+      margin: -8px -6px -7px -6px;
+    }
+    > section {
+      > section {
+        button {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: block;
+          max-width: 100%;
+          width: 28vw;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+  > section, 
+  > article {
+    max-height: 20px;
+    align-items: center;
+  }
+  @media only screen and (min-width: 375px) {
+    > article {
+      > section {
+        > section {
+          button {
+            width: 31vw;
+          }
+        }
+      }
+    }
+  } 
+  @media only screen and (min-width: 768px) {
+    grid-auto-flow: column;
+    grid-gap: 20px;
+    ._refSelectedBulk {
+      display: none;
+    }
+    > section, 
+    > article {
+      height: auto;
+      max-height: auto;
+      font-size: .875rem;
+      align-items: unset;
+    }
+    > article {
+      &:nth-child(4), 
+      &:last-child, 
+      &:nth-child(4):last-child {
+        width: auto;
+        padding-left: 3px;
+        margin-bottom: 0;
+        text-align: left;
+        > span {
+          padding-left: 0;
+          font-weight: 600;
+        }
+      }
+      > section {
+        > section {
+          button {
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+  @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 ImageChannel = ({ 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 ImageChannel

package/src/components/image/type.ts

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