@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
238 lines (230 loc) • 8.31 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var Filename = require('./Filename.js');
var FileUploaderButton = require('./FileUploaderButton.js');
var usePrefix = require('../../internal/usePrefix.js');
var Button = require('../Button/Button.js');
require('../Button/Button.Skeleton.js');
var match = require('../../internal/keyboard/match.js');
var keys = require('../../internal/keyboard/keys.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
class FileUploader extends React__default["default"].Component {
constructor() {
super(...arguments);
_rollupPluginBabelHelpers.defineProperty(this, "state", {
filenames: []
});
_rollupPluginBabelHelpers.defineProperty(this, "nodes", []);
_rollupPluginBabelHelpers.defineProperty(this, "uploaderButton", /*#__PURE__*/React__default["default"].createRef());
_rollupPluginBabelHelpers.defineProperty(this, "handleChange", evt => {
evt.stopPropagation();
const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
this.setState({
filenames: this.props.multiple ? this.state.filenames.concat(filenames) : filenames
});
if (this.props.onChange) {
this.props.onChange(evt);
}
});
_rollupPluginBabelHelpers.defineProperty(this, "handleClick", (evt, _ref) => {
let {
index,
filenameStatus
} = _ref;
if (filenameStatus === 'edit') {
evt.stopPropagation();
const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
this.setState({
filenames: filteredArray
});
if (this.props.onDelete) {
this.props.onDelete(evt);
this.uploaderButton.current?.focus?.();
}
this.props.onClick?.(evt);
}
});
_rollupPluginBabelHelpers.defineProperty(this, "clearFiles", () => {
// A clearFiles function that resets filenames and can be referenced using a ref by the parent.
this.setState({
filenames: []
});
});
}
static getDerivedStateFromProps(_ref2, state) {
let {
filenameStatus
} = _ref2;
const {
prevFilenameStatus
} = state;
return prevFilenameStatus === filenameStatus ? null : {
filenameStatus,
prevFilenameStatus: filenameStatus
};
}
render() {
const {
iconDescription,
buttonLabel,
buttonKind,
disabled,
filenameStatus,
labelDescription,
labelTitle,
className,
multiple,
accept,
name,
size = 'md',
onDelete,
// eslint-disable-line
...other
} = this.props;
const prefix = this.context;
const classes = cx__default["default"]({
[`${prefix}--form-item`]: true,
[className]: className
});
const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
[`${prefix}--label-description--disabled`]: disabled
});
const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
[`${prefix}--file__selected-file--md`]: size === 'md',
[`${prefix}--file__selected-file--sm`]: size === 'sm'
});
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
className: classes
}, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement("p", {
className: getHelperLabelClasses(`${prefix}--file--label`)
}, labelTitle), /*#__PURE__*/React__default["default"].createElement("p", {
className: getHelperLabelClasses(`${prefix}--label-description`)
}, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
innerRef: this.uploaderButton,
disabled: disabled,
labelText: buttonLabel,
multiple: multiple,
buttonKind: buttonKind,
onChange: this.handleChange,
disableLabelChanges: true,
accept: accept,
name: name,
size: size
}), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--file-container`
}, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
key: index,
className: selectedFileClasses,
ref: node => this.nodes[index] = node // eslint-disable-line
}, other), /*#__PURE__*/React__default["default"].createElement("p", {
className: `${prefix}--file-filename`,
id: name
}, name), /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--file__state-container`
}, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
name: name,
iconDescription: iconDescription,
status: filenameStatus,
onKeyDown: evt => {
if (match.matches(evt, [keys.Enter, keys.Space])) {
this.handleClick(evt, {
index,
filenameStatus
});
}
},
onClick: evt => this.handleClick(evt, {
index,
filenameStatus
})
}))))));
}
}
_rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
/**
* Specify the types of files that this input should be able to receive
*/
accept: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
/**
* Specify the type of the `<FileUploaderButton>`
*/
buttonKind: PropTypes__default["default"].oneOf(Button.ButtonKinds),
/**
* Provide the label text to be read by screen readers when interacting with
* the `<FileUploaderButton>`
*/
buttonLabel: PropTypes__default["default"].string,
/**
* Provide a custom className to be applied to the container node
*/
className: PropTypes__default["default"].string,
/**
* Specify whether file input is disabled
*/
disabled: PropTypes__default["default"].bool,
/**
* Specify the status of the File Upload
*/
filenameStatus: PropTypes__default["default"].oneOf(['edit', 'complete', 'uploading']).isRequired,
/**
* Provide a description for the complete/close icon that can be read by screen readers
*/
iconDescription: PropTypes__default["default"].string.isRequired,
/**
* Specify the description text of this `<FileUploader>`
*/
labelDescription: PropTypes__default["default"].string,
/**
* Specify the title text of this `<FileUploader>`
*/
labelTitle: PropTypes__default["default"].string,
/**
* Specify if the component should accept multiple files to upload
*/
multiple: PropTypes__default["default"].bool,
/**
* Provide a name for the underlying `<input>` node
*/
name: PropTypes__default["default"].string,
/**
* Provide an optional `onChange` hook that is called each time the input is
* changed
*/
onChange: PropTypes__default["default"].func,
/**
* Provide an optional `onClick` hook that is called each time the
* FileUploader is clicked
*/
onClick: PropTypes__default["default"].func,
/**
* Provide an optional `onDelete` hook that is called when an uploaded item
* is removed
*/
onDelete: PropTypes__default["default"].func,
/**
* Specify the size of the FileUploaderButton, from a list of available
* sizes.
*/
size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
});
_rollupPluginBabelHelpers.defineProperty(FileUploader, "contextType", usePrefix.PrefixContext);
_rollupPluginBabelHelpers.defineProperty(FileUploader, "defaultProps", {
disabled: false,
filenameStatus: 'uploading',
buttonLabel: '',
buttonKind: 'primary',
multiple: false,
onClick: () => {},
accept: []
});
exports["default"] = FileUploader;