@vnmfify/core/uploader/uploader.js

```shell npm i @vnmfify/core -S ```

import _isEmpty from "lodash/isEmpty";
import _map from "lodash/map";
import _filter from "lodash/filter";
var _excluded = ["className", "defaultValue", "value", "disabled", "removable", "maxFiles", "multiple", "children", "onUpload", "onChange"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { useUncontrolled } from "@vnmfify/hooks";
import { Close } from "@vnmfify/icons";
import { View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { useCallback, useMemo } from "react";
import Loading from "../loading";
import { prefixClassname } from "../styles";
import UploaderImage from "./uploader-image";
import UploaderMask from "./uploader-mask";
import UploaderUpload from "./uploader-upload";
import UploaderContext from "./uploader.context";
import { getOneUploadFile, getUploadFiles } from "./uploader.shared";

function renderUploaderMask(file) {
  return ((file === null || file === void 0 ? void 0 : file.status) === "uploading" || (file === null || file === void 0 ? void 0 : file.status) === "failed") && /*#__PURE__*/React.createElement(UploaderMask, {
    icon: (file === null || file === void 0 ? void 0 : file.status) === "uploading" ? /*#__PURE__*/React.createElement(Loading, null) : (file === null || file === void 0 ? void 0 : file.status) === "failed" ? /*#__PURE__*/React.createElement(Close, null) : undefined,
    message: file.message
  });
}

function UploadFilesRender(props) {
  var {
    defaultValue,
    value: valueProp,
    disabled,
    multiple,
    maxFiles = Number.MAX_VALUE,
    onChange: onChangeProp
  } = props;
  var {
    value = [],
    setValue
  } = useUncontrolled({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  var renderImage = useCallback((file, index) => /*#__PURE__*/React.createElement(UploaderImage, {
    key: index,
    type: file === null || file === void 0 ? void 0 : file.type,
    url: file === null || file === void 0 ? void 0 : file.url,
    name: file === null || file === void 0 ? void 0 : file.name,
    removable: file !== null && file !== void 0 && file.removable && (file === null || file === void 0 ? void 0 : file.status) !== "uploading" ? true : undefined,
    children: renderUploaderMask(file),
    onRemove: () => {
      if (!disabled) {
        if (multiple) {
          setValue(_filter(value, item => item !== file));
        } else {
          setValue(null);
        }
      }
    }
  }), [disabled, multiple, setValue, value]);
  var files = useMemo(() => {
    if (!multiple) {
      return [];
    }

    var __files__ = _map(getUploadFiles(value), renderImage);

    if (__files__.length < maxFiles) {
      __files__.push( /*#__PURE__*/React.createElement(UploaderUpload, {
        key: "upload"
      }));
    }

    return __files__;
  }, [maxFiles, multiple, renderImage, value]);

  if (_isEmpty(value)) {
    return /*#__PURE__*/React.createElement(UploaderUpload, null);
  }

  if (!multiple) {
    var file = getOneUploadFile(value);
    return renderImage(file);
  }

  return files;
}

export default function Uploader(props) {
  var {
    className,
    defaultValue,
    value,
    disabled = false,
    removable = true,
    maxFiles,
    multiple,
    children,
    onUpload,
    onChange
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  return /*#__PURE__*/React.createElement(UploaderContext.Provider, {
    value: {
      removable,
      disabled,
      onUpload
    }
  }, /*#__PURE__*/React.createElement(View, _objectSpread({
    className: classNames(prefixClassname("uploader"), className)
  }, restProps), /*#__PURE__*/React.createElement(View, {
    className: classNames(prefixClassname("uploader__wrapper"), {
      [prefixClassname("uploader__wrapper--disabled")]: disabled
    })
  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(UploadFilesRender, {
    defaultValue: defaultValue,
    value: value,
    disabled: disabled,
    maxFiles: maxFiles,
    multiple: multiple,
    onChange: onChange
  }))));
}
//# sourceMappingURL=uploader.js.map