forstok-ui-lib 5.1.5 → 5.1.7

package/package.json

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

package/src/assets/images/icons/arrow-red-upload.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 491.95 491.95" style="enable-background:new 0 0 491.95 491.95; fill:#D80027;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M365.675,112.25l-107-107c-7-7-18.4-7-25.5,0l-107,107c-7,7-7,18.4,0,25.5c7.1,7,18.5,7,25.5-0.1l76.3-76.2v310.6
+			c0,9.9,8.1,18,18,18c9.9,0,18-8.1,18-18V61.45l76.3,76.3c3.5,3.5,8.1,5.3,12.7,5.3c4.6,0,9.2-1.8,12.7-5.3
+			C372.675,130.75,372.675,119.35,365.675,112.25z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M439.975,336.35c-9.9,0-18,8.1-18,18v101.6h-352v-101.6c0-9.9-8.1-18-18-18s-18,8.1-18,18v119.6c0,9.9,8,18,18,18h388
+			c9.9,0,18-8.1,18-18v-119.6C457.975,344.45,449.875,336.35,439.975,336.35z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/images/icons/arrow-upload.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M472,312.642v139c0,11.028-8.972,20-20,20H60c-11.028,0-20-8.972-20-20v-139H0v139c0,33.084,26.916,60,60,60h392
+			c33.084,0,60-26.916,60-60v-139H472z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon points="256,0.358 131.716,124.642 160,152.926 236,76.926 236,388.642 276,388.642 276,76.926 352,152.926
+			380.284,124.642 		"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/javascripts/function.ts

@@ -1,4 +1,5 @@
-import { TMessageQuestion } from '../../components/message/typed';
+import { ReactNode } from 'react';
+import { TMessage, TMessageQuestion } from '../../components/message/typed';
 
 export const formatNumber = (n?: string | number, flag?: boolean) => {
   const _flag = flag === undefined ? true : flag
@@ -15,6 +16,16 @@ export const formatNumber = (n?: string | number, flag?: boolean) => {
   return result
 }
 
+export const generateMessage = (type: string, value: string | ReactNode, callback?: () => void, timer?: number) => {
+  let result: TMessage = {
+    $type: type,
+    message: value,
+    timer: timer || (type === 'warning' ? 3000 : 2000)
+  } 
+  callback && (result.callback = () => { callback() })
+  return result
+}
+
 export const generateMessageQuestion = (type: string, title: string, subtitle: string, callback?: () => void, buttonSubmit?: string, cancelCallback?: () => void) => {
   let result: TMessageQuestion = {
     $type: type,

package/src/components/icon/styles.ts

@@ -6,6 +6,7 @@ import IconCheckGrey from '../../assets/images/icons/checkmark-tick-grey.svg';
 import IconCheck from '../../assets/images/icons/checkmark-tick.svg';
 import IconEdit from '../../assets/images/icons/edit.svg';
 import IconArrow from '../../assets/images/icons/arrow.svg';
+import IconArrowUpload from '../../assets/images/icons/arrow-upload.svg'
 import IconDiscount from '../../assets/images/icons/discount.svg';
 import IconCash from '../../assets/images/icons/cash.svg';
 import IconCredit from '../../assets/images/icons/credit.svg';
@@ -156,6 +157,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break; 
+    case 'arrow-upload': 
+      style += `
+        &:before { 
+          content: url(${IconArrowUpload}); 
+        }
+      `
+      break;
     default: 
       break;
   }

package/src/components/index.ts

@@ -15,6 +15,8 @@ export { default as ReactPortalComponent } from './portal';
 export { default as ImageComponent } from './image';
 export { default as SelectComponent } from './select';
 export { default as ErrorComponent } from './error';
+export { default as UploadComponent } from './upload';
+export { default as UploadDragDropComponent } from './upload/drag_drop';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/upload/drag_drop.tsx

@@ -0,0 +1,85 @@
+import { type InputHTMLAttributes, type ReactNode, useState } from 'react';
+import { generateMessage } from '../../assets/javascripts/function';
+import { UploadDragDropContainer, UploadDragDropFileHelper, UploadDragDropFileContainer, UploadInput, UploadDragDropLabel, UploadDragDropFileName, UploadDragDropFileNamePlaceholder, UploadDragDropIcon } from './styles';
+import type { TChangeEvent, TDragEvent } from '../../typeds/base.typed';
+import type { TMessageFunction } from '../message/typed';
+
+type TUpload = InputHTMLAttributes<HTMLInputElement> & {
+  children?: ReactNode
+  evChange?: (arg0: FileList) => void
+  evCreateMessage?: TMessageFunction
+}
+
+const UploadDragDropComponent = ({ children, id, name, evChange, evCreateMessage, ...props }: TUpload) => {
+  const { accept } = props;
+
+  const [dragActive, setDragActive] = useState<boolean>(false);
+
+  const handleDrag: TDragEvent = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    }
+    else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  }
+
+  const handleDrop: TDragEvent = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (e.dataTransfer.files[0]) {
+      const acceptedFormat = accept ? accept.split(',').map(_accept => _accept.trim().replace('.', '')) : null;
+      for (let x= 0; x < e.dataTransfer.files.length; x++) {
+        const curFile = e.dataTransfer.files[x];
+        const curFormat = curFile.name.split('.').pop();
+        if (acceptedFormat?.length && curFormat) {
+          if (!acceptedFormat.includes(curFormat)) {
+            const _failed_props = generateMessage('failed', 'File type is not allowed. Please check again');
+            evCreateMessage && evCreateMessage(_failed_props);
+            return false;
+          }
+        }
+      }
+      evChange && evChange(e.dataTransfer.files);
+    }
+  }
+
+  const handleChange: TChangeEvent = e => {
+    e.preventDefault();
+    const target = e.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+      evChange && evChange(target.files);
+    }
+  }
+
+  return (
+    <UploadDragDropContainer onDragEnter={handleDrag} className={dragActive ? "drag-active" : "" }>
+      <UploadInput id={id} name={name} onChange={handleChange} {...props} />
+      <UploadDragDropLabel id="label-file-dragdrop-upload" htmlFor={id}>
+        <UploadDragDropFileContainer>
+          {
+            children ? (
+              <UploadDragDropFileName>
+                <UploadDragDropIcon />
+                <span>
+                  {children}
+                </span>
+              </UploadDragDropFileName>
+            ) : 
+            (
+              <UploadDragDropFileNamePlaceholder>
+                Drag & Drop file here to upload, or <span>browse</span>.
+              </UploadDragDropFileNamePlaceholder>
+            )
+          }
+        </UploadDragDropFileContainer>
+      </UploadDragDropLabel>
+      { dragActive && <UploadDragDropFileHelper onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop} /> }
+    </UploadDragDropContainer>
+  )
+}
+
+export default UploadDragDropComponent

package/src/components/upload/index.tsx

@@ -0,0 +1,31 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { UploadContainer, UploadInput, UploadLabel, UploadIcon, UploadSpan } from './styles';
+
+type TUpload = InputHTMLAttributes<HTMLInputElement> & {
+  children?: ReactNode
+  mode?: string
+  'data-idx'?: number
+  'data-detail'?: any
+}
+
+const UploadComponent = ({ children, mode, ...props }: TUpload) => {
+  const { id, width } = props;
+  return (
+      mode === 'image' ?  (
+        <>
+          {children}
+          <UploadInput {...('data-idx' in props) && {'data-idx': props['data-idx']}} {...props['data-detail'] && { 'data-detail': props['data-detail'] }} {...props} />
+        </>
+      ) : (
+        <UploadContainer $width={width}>
+          <UploadLabel htmlFor={id}>
+            <UploadIcon></UploadIcon>
+            <UploadSpan>{children}</UploadSpan>
+          </UploadLabel>
+          <UploadInput {...('data-idx' in props) && {'data-idx': props['data-idx']}} {...props['data-detail'] && { 'data-detail': props['data-detail'] }} {...props} />
+        </UploadContainer>
+      )
+  )
+}
+
+export default UploadComponent;

package/src/components/upload/styles.tsx

@@ -0,0 +1,127 @@
+import styled, { css } from 'styled-components';
+import IconRedUpload from '../../assets/images/icons/arrow-red-upload.svg';
+
+const IconStyles = css`
+  display: inline-block;
+  pointer-events: none;
+`
+
+const getUploadContainerModifiedStyled = ({ $width }: { $width?: string | number }) => {
+  let style = ''
+  if ($width) {
+    style += `
+      &, & ${UploadLabel} {
+        width: ${$width};
+        display: block;
+      }
+      & ${UploadSpan} {
+        width: calc(width - 15);
+        display: block;
+      }
+    `
+  }
+  return style
+}
+
+export const UploadContainer = styled.div<{ $width?: string | number }>`
+  cursor: pointer;
+  ${getUploadContainerModifiedStyled}
+`
+export const UploadLabel = styled.label`
+  padding: 5px 10px 5px 25px;
+  color: var(--sta-clr);
+  border: 1px solid var(--err-clr-ln);
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  position: relative;
+  font-weight: 600;
+  border-radius: var(--ter-rd);
+`
+export const UploadSpan = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+export const UploadIcon = styled.i`
+  position: absolute;
+  left: 10px;
+  &:before { 
+    ${IconStyles}
+    content: url(${IconRedUpload});
+    width: 12px;
+  }  
+`
+export const UploadInput = styled.input.attrs(({ type }:{ type?: string }) => ({
+  type: type || 'file'
+}))`
+  opacity: 0;
+  position: absolute;
+  left: 0;
+`
+export const UploadDragDropContainer = styled.div` 
+  display: grid;
+  position: relative;
+  align-items: center;
+  text-align: center;
+  min-height: 150px;
+  border: 1.25px dashed rgba(163, 163, 163, 0.5);
+  border-radius: 4px;
+  background-color: #EFEFEF;
+  &.drag-active {
+    background-color: #EFEFEF50;
+  }
+  ${UploadInput} {
+    z-index: -10;
+  }
+`
+export const UploadDragDropLabel = styled.label`
+  padding: 5px 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  position: relative;
+`
+export const UploadDragDropFileHelper = styled.div` 
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+`
+export const UploadDragDropFileContainer = styled.div` 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+export const UploadDragDropFileNamePlaceholder = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  > span {
+    color: #FF585C;
+    font-weight: 600;
+  }
+`
+export const UploadDragDropFileName = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: center;
+  grid-gap: 6px
+  font-weight: 600;
+  color: #FF585C;
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+export const UploadDragDropIcon = styled.i`
+  &:before { 
+    content: url(${IconRedUpload});
+    width: 14px;
+    ${IconStyles}
+  }  
+`