takumifukasawa

const units = ["Byte", "KB", "MB", "GB"];

/**
 * ファイルサイズに応じて、ファイル容量の数値と単位を取得
 * 多めに表示するためにceilしている
 *
 * @export
 * @param {number} size
 * @param {number} [floating=1]
 * @returns

takumifukasawa

import { filter, includes, map } from "lodash";

export const AcceptFileExtensions = <const>{
  JPG: "jpg",
  JPEG: "jpeg",
  PNG: "png",
  PDF: "pdf",
};

export type AcceptFileExtensions = typeof AcceptFileExtensions[keyof typeof AcceptFileExtensions];

takumifukasawa

/**
 * ファイルの拡張子を抜き出す
 * ex) test.jpg -> jpg, test.png -> png
 *
 * @export
 * @param {string} str
 * @returns {(string | null)}
 */
export default function getExt(str: string): string | null {
  // if match regex, it will return [".ext", "ext"].

takumifukasawa

import { forEach } from "lodash";
import { DependencyList, useEffect, useState } from "react";
import useTimeout from "./useTimeout";

/**
 * 一定時間trueなflagを保持するhooks
 *
 * - activeを呼ぶとflagを立て直す
 * - depsは何かしらの値が入っている場合はflagを立てる、とみなす
 *   - 例えばhoverのstateを入れた場合、hoverしたらflagは一定時間trueになる

takumifukasawa

import { includes } from "lodash";
import { ChangeEvent, useRef, useState, RefObject } from "react";
import getExt from "~/libs/file/getExt";
import getImageSize from "~/libs/image/getImageSize";
import resizeBase64Image from "~/libs/image/resizeBase64Image";

// NOTE: MB 以外の基準も対応できるようにする？
const calcFileMegaByteSize = (file: File): number => {
  const megaByte = 1024 * 1024;
  return Math.ceil(file.size / megaByte);

takumifukasawa

import { useEffect, useRef } from "react";

/**
 * cache previous value
 *
 * ex)
 * const [value, setValue] = useState<number>(0);
 * const previewState = usePrevious(value);
 *
 * @export

takumifukasawa

import { useEffect, useRef, useState, RefObject } from "react";
import { useComponentWillUnmount } from "~/hooks/common/useLifecycle";

export default function useHover<T extends HTMLElement>(): [
  RefObject<T>,
  boolean
] {
  let willunmount = false;
  useComponentWillUnmount(() => {
    willunmount = true;

takumifukasawa

import { RefObject, useEffect, useRef, useState } from "react";

type Dimensions = {
  bottom: number;
  height: number;
  left: number;
  right: number;
  top: number;
  width: number;
  x: number;

takumifukasawa

import { DependencyList, useEffect, useState } from "react";

/**
 * memolize async value custom hooks
 *
 * base: https://github.com/awmleer/use-async-memo
 *
 * usage1: const value = useAsyncMemo(async () => {}, [deps1, dep2, ...]);
 * usage2: const value = useAsyncMemo(async () => {}, [deps1, dep2, ...], initialValue);
 *

takumifukasawa

import { useEffect, useRef } from "react";

/**
 * manage window timeout hooks
 *
 * ex)
 *
 * const [beginTimer, clearTimer] = useTimeout(() => { ... }, ms);
 *
 * useEffect(() => {