@yamada-ui/react/dist/cjs/components/file-input/use-file-input.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-file-input.cjs","names":["useFieldProps","useControllableState","useClickable","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","props","mergeRefs"],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  assignRef,\n  dataAttr,\n  handlerAll,\n  isNull,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" | \"input\" = \"input\"> =\n  FieldProps &\n    Omit<HTMLProps<Y>, \"defaultValue\" | \"onChange\" | \"ref\" | \"value\"> &\n    Pick<HTMLProps<\"input\">, \"accept\" | \"multiple\" | \"ref\"> & {\n      /**\n       * The initial value of the file input.\n       */\n      defaultValue?: File[]\n      /**\n       * Ref to a reset function.\n       */\n      resetRef?: RefObject<(() => void) | null>\n      /**\n       * The value of the file input.\n       */\n      value?: File[]\n      /**\n       * Function to be called when a file change event occurs.\n       */\n      onChange?: (files: File[] | undefined) => void\n    }\n\nexport const useFileInput = <Y extends \"button\" | \"input\" = \"input\">(\n  props: UseFileInputProps<Y>,\n) => {\n  const {\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      accept,\n      defaultValue,\n      disabled,\n      multiple,\n      readOnly,\n      required,\n      resetRef,\n      value,\n      onChange: onChangeProp,\n      onClick: onClickProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseFileInputProps<Y>>(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [values, setValues] = useControllableState<File[] | undefined>({\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n  })\n  const count = values?.length ?? 0\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    inputRef.current?.click()\n  }, [interactive])\n\n  const onReset = useCallback(() => {\n    if (inputRef.current) inputRef.current.value = \"\"\n\n    setValues(undefined)\n  }, [setValues])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const files = !isNull(ev.currentTarget.files)\n        ? Array.from(ev.currentTarget.files)\n        : undefined\n\n      setValues(files?.length ? files : undefined)\n    },\n    [setValues],\n  )\n\n  const clickableProps = useClickable<HTMLElement, Dict>({\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n    disabled,\n    focusOnClick: interactive,\n    onClick: handlerAll(onClickProp, onClick),\n  })\n\n  assignRef(resetRef, onReset)\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      id,\n      form,\n      type: \"file\",\n      name,\n      accept,\n      disabled,\n      multiple,\n      readOnly,\n      required,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      required,\n      ariaProps,\n      dataProps,\n      id,\n      form,\n      name,\n      accept,\n      disabled,\n      multiple,\n      readOnly,\n      ref,\n      onChange,\n    ],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-placeholder\": dataAttr(!count),\n      ...clickableProps,\n      tabIndex: interactive ? 0 : clickableProps.tabIndex,\n      ...props,\n    }),\n    [clickableProps, count, interactive],\n  )\n\n  return {\n    disabled,\n    interactive,\n    readOnly,\n    required,\n    values,\n    clickableProps,\n    getFieldProps,\n    getInputProps,\n  }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;;;;;;AAyCA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,cACA,UACA,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,YACT,GAAG,QAEL,WACA,WACA,eACEA,sCAAiD,MAAM;CAC3D,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,QAAQ,aAAaC,gEAAyC;EACnE;EACA;EACA,UAAU;EACX,CAAC;CACF,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,uCAA4B;AAChC,MAAI,CAAC,YAAa;AAElB,WAAS,SAAS,OAAO;IACxB,CAAC,YAAY,CAAC;CAEjB,MAAM,uCAA4B;AAChC,MAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAE/C,YAAU,OAAU;IACnB,CAAC,UAAU,CAAC;CAEf,MAAM,mCACH,OAAsC;EACrC,MAAM,QAAQ,+CAAQ,GAAG,cAAc,MAAM,GACzC,MAAM,KAAK,GAAG,cAAc,MAAM,GAClC;AAEJ,YAAU,OAAO,SAAS,QAAQ,OAAU;IAE9C,CAAC,UAAU,CACZ;CAED,MAAM,iBAAiBC,+CAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA,cAAc;EACd,2DAAoB,aAAa,QAAQ;EAC1C,CAAC;AAEF,uBAAU,UAAU,QAAQ;CAE5B,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,GAAGC;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAKC,sBAAU,UAAUD,QAAM,KAAK,IAAI;EACxC,4DAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,uCAhBC,UAAQ,EAAE,MAAM;GACf,oEAA6B,CAAC,MAAM;GACpC,GAAG;GACH,UAAU,cAAc,IAAI,eAAe;GAC3C,GAAGA;GACJ,GACD;GAAC;GAAgB;GAAO;GAAY,CACrC;EAUC;EACD"}