z-react-ui/es/send-msg/Toolbar/FileUpload.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import React, { useCallback, useRef } from 'react';
import { chatPrefix } from '@/_config';
import { usePrefixCls } from '@/_hooks'; // #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

var FileUpload = function FileUpload(_ref) {
  var onUploadFile = _ref.onUploadFile;
  var prefixCls = usePrefixCls('chat-file-upload');
  var inputRef = useRef();
  var handleFileBtn = useCallback(function (e, path) {
    var target = e.target;
    target.src = "".concat(chatPrefix, "/").concat(path);
  }, []);
  var onFileUpload = useCallback(function (e) {
    handleFileBtn(e, 'toolbar_files_down@2x.png');
    inputRef.current.click();
  }, [handleFileBtn]);
  var handleChange = useCallback(function (e) {
    onUploadFile(e);
  }, [onUploadFile]);
  return /*#__PURE__*/React.createElement("div", {
    className: prefixCls
  }, /*#__PURE__*/React.createElement("img", {
    className: "".concat(prefixCls, "-img"),
    onClick: onFileUpload,
    onMouseEnter: function onMouseEnter(e) {
      return handleFileBtn(e, 'toolbar_files_hover@2x.png');
    },
    onMouseLeave: function onMouseLeave(e) {
      return handleFileBtn(e, 'toolbar_files_normal@2x.png');
    },
    src: "".concat(chatPrefix, "/toolbar_files_normal@2x.png")
  }), /*#__PURE__*/React.createElement("input", {
    type: "file",
    className: "".concat(prefixCls, "-file"),
    ref: inputRef,
    onChange: handleChange
  }));
};

export default FileUpload;