@orfeas126/box-ui-elements
Version:
Box UI Elements
107 lines (103 loc) • 3.37 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
*
* @file Content Explorer Create Folder Dialog
* @author Box
*/
import * as React from 'react';
import Modal from 'react-modal';
import { injectIntl, FormattedMessage } from 'react-intl';
import PrimaryButton from '../../../components/primary-button/PrimaryButton';
import Button from '../../../components/button/Button';
import messages from '../messages';
import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL, ERROR_CODE_ITEM_NAME_TOO_LONG, ERROR_CODE_ITEM_NAME_IN_USE } from '../../../constants';
/* eslint-disable jsx-a11y/label-has-for */
const CreateFolderDialog = ({
isOpen,
onCreate,
onCancel,
isLoading,
errorCode,
parentElement,
appElement,
intl
}) => {
let textInput = null;
let error;
/**
* Appends the extension and calls rename function
*/
const create = () => {
if (textInput && textInput.value) {
onCreate(textInput.value);
}
};
/**
* Grabs reference to the input element
*/
const ref = input => {
textInput = input;
if (textInput instanceof HTMLInputElement) {
textInput.focus();
textInput.select();
}
};
/**
* Handles enter key down
*/
const onKeyDown = ({
key
}) => {
switch (key) {
case 'Enter':
create();
break;
default:
break;
}
};
switch (errorCode) {
case ERROR_CODE_ITEM_NAME_IN_USE:
error = messages.createDialogErrorInUse;
break;
case ERROR_CODE_ITEM_NAME_TOO_LONG:
error = messages.createDialogErrorTooLong;
break;
default:
error = errorCode ? messages.createDialogErrorInvalid : null;
break;
}
return /*#__PURE__*/React.createElement(Modal, {
appElement: appElement,
className: CLASS_MODAL_CONTENT,
contentLabel: intl.formatMessage(messages.createDialogLabel),
isOpen: isOpen,
onRequestClose: onCancel,
overlayClassName: CLASS_MODAL_OVERLAY,
parentSelector: () => parentElement,
portalClassName: CLASS_MODAL
}, /*#__PURE__*/React.createElement("label", null, error ? /*#__PURE__*/React.createElement("div", {
className: "be-modal-error"
}, /*#__PURE__*/React.createElement(FormattedMessage, error)) : null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({
tagName: "div"
}, messages.createDialogText)), /*#__PURE__*/React.createElement("input", {
ref: ref,
onKeyDown: onKeyDown,
required: true,
type: "text"
})), /*#__PURE__*/React.createElement("div", {
className: "be-modal-btns"
}, /*#__PURE__*/React.createElement(PrimaryButton, {
"data-testid": "be-btn-create-folder",
isLoading: isLoading,
onClick: create,
type: "button"
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.create)), /*#__PURE__*/React.createElement(Button, {
"data-testid": "be-btn-create-folder-cancel",
isDisabled: isLoading,
onClick: onCancel,
type: "button"
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancel))));
};
export default injectIntl(CreateFolderDialog);
//# sourceMappingURL=CreateFolderDialog.js.map