Helper Methods

helper.ts

//Converts file to base64
export const fileToBase64 = async (file: File[]) => {
  let selectedFile = file[0];
  const canvas = document.createElement('canvas');
  const context = canvas.getContext("2d");
  return await new Promise((resolve, reject) => {
    const reader = new FileReader();
    if(selectedFile.size >= 1020000) {
      reject('Image file is larger than 1mb, please reduce the size!');
    }
    reader.readAsDataURL(selectedFile);
    reader.onload = () => {
      const img = new Image();
      if (reader.result) { img.src = reader.result.toString() }
      //This function uses html5 canvas to scale down the image size smoothly, see: https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly
      img.onload = () => {

        // set size proportional to image
        canvas.height = canvas.width * (img.height / img.width);

        // step 1 - resize to 50%
        const cvs = document.createElement('canvas');
        const ctx = cvs.getContext('2d');

        cvs.width = img.width * 0.4;
        cvs.height = img.height * 0.4;
        ctx && ctx.drawImage(img, 0, 0, cvs.width, cvs.height);

        // step 2, resize to final size
        context && context.drawImage(cvs, 0, 0, cvs.width * 0.5, cvs.height * 0.5,
          0, 0, canvas.width, canvas.height);

        const data = ctx && ctx.canvas.toDataURL('image/jpeg', 1);
        //@ts-ignore
        resolve(data && data.toString().replace(/^data:(.*,)?/, ''))
      }
    };
    reader.onerror = error => reject(error);
  });
}


export const composeClasses = (...styles: (string | boolean | undefined)[]): string => styles
  .filter(item => item)
  .join(' ');


export const capitalizeValue = (text: string): string => {
  if (text === null) return '';
  return text.toLowerCase().split(' ').map((eachText) => {
    eachText = String(eachText).trim();
    eachText = (eachText !== 'null' && eachText !== 'undefined') && eachText || '';
    return eachText.charAt(0).toUpperCase() + eachText.slice(1);
  }).join(' ');
};

import React, {useState} from "react";
import {composeClasses} from "lib/utils";
import styles from "./tab.scss";

interface ITab {
  activeTab: string;
  label: string;
  onClickProp: any;
}

const Tab: React.FC<ITab> = ({activeTab, label, onClickProp}) => {

  const onClick = () => {
    onClickProp(label);
  }

  return (
    <li
      className={composeClasses(
        styles.tabListItem,
        activeTab === label && styles.tabListActive)}
      onClick={onClick}
    >
      {label}
    </li>
  );
}

export const Tabs: React.FC<{children: any; detailType?: any}> = ({children, detailType}) => {
  const [activeTab, setActiveTab] = useState(detailType);

  const onClickTabItem = (tab: any) => {
    setActiveTab(tab)
  }

  return (
    <div className="tabs">
      {/* <ol className={styles.tabHorList}>
        {children.map((child: any) => {
          const { label } = child.props;

          return (
            <Tab
              activeTab={activeTab}
              key={label}
              label={label}
              onClickProp={onClickTabItem}
            />
          );
        })}
      </ol> */}
      <div className="tab-content">
        {children.map((child: any) => {
          if (child.props.label !== activeTab) return undefined;
          return child.props.children;
        })}
      </div>
    </div>
  )
}

interface Props{
  label?: string;
}
type ITabItem = Props & React.HTMLProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;

export const TabItem: React.FC<ITabItem> = ({label, children}) => {
  return (
    <div data-label={label}>
      {children}
    </div>
  )
}

// Toyosi tabs
const Tab: React.FC<ITab> = ({ onClick, label, activeTab }) => {
  const onClickTab = () => {
    onClick(label);
  };

  return (
    <li
      className={composeClasses(styles.tabListItem, activeTab === label ? styles.tabListActive : '')}
      onClick={onClickTab}
    >
      {label}
    </li>
  );
};

export const Tabs: React.FC<ITabs> = ({ children }) => {
  const [activeTab, setActiveTab] = useState(children[0].activeTab);

  const onClickTabItem = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div className="tabs">
      <ol className="tab-list">
        {children.map((child) => {
          const { label } = child.props;

          return (
            <Tab
              activeTab={activeTab}
              key={label}
              label={label}
              onClick={onClickTabItem}
            />
          );
        })}
      </ol>
      <div className="tab-content">
        {children.map((child) => {
          if (child.props.label !== activeTab) return undefined;
          return child.props.children;
        })}
      </div>
    </div>
  );
};


// click away listener React
useEffect(() => {
    const container = sortOptionRef.current;

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const listenForOutsideClicks = (event: MouseEvent) => {
      if (container) {
        const isClickInside = container.contains(event.target);

        if (!isClickInside) {
          setToggleDropdown(false);
        }
      }
    };

    const listenForEscButton = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setToggleDropdown(false);
      }
    };

    if (toggleDropdown) {
      document.addEventListener('click', listenForOutsideClicks);
      document.addEventListener('keydown', listenForEscButton);
    } else {
      document.removeEventListener('click', listenForOutsideClicks);
      document.removeEventListener('keydown', listenForEscButton);
    }

    return () => {
      document.removeEventListener('click', listenForOutsideClicks);
      document.removeEventListener('keydown', listenForEscButton);
    };
  }, [sortOptionRef, toggleDropdown]);