cspace-ui
Version:
CollectionSpace user interface for browsers
305 lines (302 loc) • 11.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactIntl = require("react-intl");
var _immutable = _interopRequireDefault(require("immutable"));
var _get = _interopRequireDefault(require("lodash/get"));
var _cspaceLayout = require("cspace-layout");
var _cspaceInput = require("cspace-input");
var _TableRow = _interopRequireDefault(require("cspace-layout/styles/cspace-layout/TableRow.css"));
var _CancelButton = _interopRequireDefault(require("../navigation/CancelButton"));
var _SearchTable = _interopRequireDefault(require("../../../styles/cspace-ui/SearchTable.css"));
var _PinnedQueriesModal = _interopRequireDefault(require("../../../styles/cspace-ui/PinnedQueriesModal.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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); }
const {
MiniButton
} = _cspaceInput.components;
const messages = (0, _reactIntl.defineMessages)({
title: {
"id": "pinnedQueriesModal.title",
"defaultMessage": "Pinned Queries"
},
empty: {
"id": "pinnedQueriesModal.empty",
"defaultMessage": "No pinned queries."
},
nameColumn: {
"id": "pinnedQueriesModal.column.name",
"defaultMessage": "Name"
},
typeColumn: {
"id": "pinnedQueriesModal.column.type",
"defaultMessage": "Type"
},
descriptionColumn: {
"id": "pinnedQueriesModal.column.description",
"defaultMessage": "Description"
},
delete: {
"id": "pinnedQueriesModal.delete",
"defaultMessage": "Delete"
},
confirmDelete: {
"id": "pinnedQueriesModal.confirmDelete",
"defaultMessage": "Delete?"
},
confirm: {
"id": "pinnedQueriesModal.confirm",
"defaultMessage": "Confirm"
},
cancel: {
"id": "pinnedQueriesModal.cancel",
"defaultMessage": "Cancel"
},
close: {
"id": "pinnedQueriesModal.close",
"defaultMessage": "Close"
},
execute: {
"id": "pinnedQueriesModal.execute",
"defaultMessage": "Click to load"
},
actionsColumn: {
"id": "pinnedQueriesModal.column.actions",
"defaultMessage": "Actions"
},
deviceNote: {
"id": "pinnedQueriesModal.deviceNote",
"defaultMessage": "Currently, pinned queries are available from the same device and browser combination. Please see the {userManualLink} for additional information."
},
userManual: {
"id": "pinnedQueriesModal.userManual",
"defaultMessage": "User Manual"
},
userManualUrl: {
"id": "pinnedQueriesModal.userManualUrl",
"defaultMessage": "https://collectionspace.atlassian.net/wiki/spaces/CUD/pages/4613242886/Pinned+Queries"
}
});
const propTypes = {
config: _propTypes.default.shape({
recordTypes: _propTypes.default.object
}),
isOpen: _propTypes.default.bool,
pinnedQueries: _propTypes.default.instanceOf(_immutable.default.List),
deleteQuery: _propTypes.default.func,
onLoadQuery: _propTypes.default.func,
onCloseButtonClick: _propTypes.default.func
};
const defaultProps = {
pinnedQueries: _immutable.default.List()
};
const contextTypes = {
intl: _reactIntl.intlShape
};
const renderEmpty = () => /*#__PURE__*/_react.default.createElement("div", {
className: _PinnedQueriesModal.default.empty
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.empty));
class PinnedQueriesModal extends _react.Component {
constructor(props) {
super(props);
this.renderButtonBar = this.renderButtonBar.bind(this);
this.state = {
confirmDeleteId: null
};
}
// eslint-disable-next-line camelcase
UNSAFE_componentWillReceiveProps(nextProps) {
const {
isOpen
} = this.props;
const {
isOpen: nextIsOpen
} = nextProps;
if (!isOpen && nextIsOpen) {
this.setState({
confirmDeleteId: null
});
}
}
handleConfirmDeleteButtonClick(id) {
const {
deleteQuery
} = this.props;
if (deleteQuery) {
deleteQuery(id);
}
this.setState({
confirmDeleteId: null
});
}
handleLoadQuery(query) {
const {
onLoadQuery
} = this.props;
if (onLoadQuery && this.isRecordTypeKnown(query)) {
onLoadQuery(query);
}
}
handleRowKeyDown(event, query) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.handleLoadQuery(query);
}
}
isRecordTypeKnown(query) {
const {
config
} = this.props;
return !!(0, _get.default)(config, ['recordTypes', query.get('recordType')]);
}
formatRecordTypeLabel(recordType) {
const {
config
} = this.props;
const {
intl
} = this.context;
const collectionNameMessage = (0, _get.default)(config, ['recordTypes', recordType, 'messages', 'record', 'collectionName']);
if (collectionNameMessage) {
return intl.formatMessage(collectionNameMessage);
}
return recordType;
}
renderActionsCell(query) {
const {
confirmDeleteId
} = this.state;
const {
intl
} = this.context;
const id = query.get('id');
if (confirmDeleteId === id) {
return /*#__PURE__*/_react.default.createElement("div", {
className: _PinnedQueriesModal.default.actions
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.confirmDelete), /*#__PURE__*/_react.default.createElement(MiniButton, {
"aria-label": intl.formatMessage(messages.confirm),
name: "confirmDeleteQuery",
title: intl.formatMessage(messages.confirm),
onClick: event => {
event.stopPropagation();
this.handleConfirmDeleteButtonClick(id);
}
}, "\u2713"), /*#__PURE__*/_react.default.createElement(MiniButton, {
"aria-label": intl.formatMessage(messages.cancel),
name: "cancelDeleteQuery",
title: intl.formatMessage(messages.cancel),
onClick: event => {
event.stopPropagation();
this.setState({
confirmDeleteId: null
});
}
}, "\u2715"));
}
return /*#__PURE__*/_react.default.createElement("div", {
className: _PinnedQueriesModal.default.actions
}, /*#__PURE__*/_react.default.createElement(MiniButton, {
"aria-label": intl.formatMessage(messages.delete),
name: "deleteQuery",
title: intl.formatMessage(messages.delete),
onClick: event => {
event.stopPropagation();
this.setState({
confirmDeleteId: id
});
}
}, "\u2212"));
}
renderQueryRow(query, index) {
const {
intl
} = this.context;
const executable = this.isRecordTypeKnown(query);
const classes = [index % 2 === 0 ? _SearchTable.default.even : _SearchTable.default.odd, executable ? _TableRow.default.common : null, executable ? _PinnedQueriesModal.default.executable : null].filter(Boolean).join(' ');
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
return /*#__PURE__*/_react.default.createElement("tr", {
className: classes,
key: query.get('id'),
tabIndex: 0,
title: executable ? intl.formatMessage(messages.execute) : undefined,
onClick: () => this.handleLoadQuery(query),
onKeyDown: event => this.handleRowKeyDown(event, query)
}, /*#__PURE__*/_react.default.createElement("td", null, query.get('name')), /*#__PURE__*/_react.default.createElement("td", null, this.formatRecordTypeLabel(query.get('recordType'))), /*#__PURE__*/_react.default.createElement("td", null, query.get('description')), /*#__PURE__*/_react.default.createElement("td", null, this.renderActionsCell(query)));
/* eslint-enable */
}
renderQueryTable() {
const {
pinnedQueries
} = this.props;
const {
intl
} = this.context;
if (pinnedQueries.isEmpty()) {
return renderEmpty();
}
return /*#__PURE__*/_react.default.createElement("div", {
className: `${_SearchTable.default.results} ${_PinnedQueriesModal.default.tableContainer}`
}, /*#__PURE__*/_react.default.createElement("table", {
className: _PinnedQueriesModal.default.queryTable
}, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
scope: "col"
}, intl.formatMessage(messages.nameColumn)), /*#__PURE__*/_react.default.createElement("th", {
scope: "col"
}, intl.formatMessage(messages.typeColumn)), /*#__PURE__*/_react.default.createElement("th", {
scope: "col"
}, intl.formatMessage(messages.descriptionColumn)), /*#__PURE__*/_react.default.createElement("th", {
scope: "col",
"aria-label": intl.formatMessage(messages.actionsColumn)
}))), /*#__PURE__*/_react.default.createElement("tbody", null, pinnedQueries.map((query, index) => this.renderQueryRow(query, index)).toArray())));
}
renderDeviceNote() {
const {
intl
} = this.context;
return /*#__PURE__*/_react.default.createElement("p", {
className: _PinnedQueriesModal.default.note
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({}, messages.deviceNote, {
values: {
userManualLink: /*#__PURE__*/_react.default.createElement("a", {
href: intl.formatMessage(messages.userManualUrl),
rel: "noreferrer",
target: "_blank"
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.userManual))
}
})));
}
renderButtonBar() {
const {
onCloseButtonClick
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CancelButton.default, {
label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.close),
onClick: onCloseButtonClick
}));
}
render() {
const {
isOpen,
onCloseButtonClick
} = this.props;
return /*#__PURE__*/_react.default.createElement(_cspaceLayout.Modal, {
className: _PinnedQueriesModal.default.common,
isOpen: isOpen,
title: /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.title)),
closeButtonClassName: "material-icons",
closeButtonLabel: "close",
renderButtonBar: this.renderButtonBar,
onCloseButtonClick: onCloseButtonClick
}, this.renderQueryTable(), this.renderDeviceNote());
}
}
exports.default = PinnedQueriesModal;
PinnedQueriesModal.propTypes = propTypes;
PinnedQueriesModal.defaultProps = defaultProps;
PinnedQueriesModal.contextTypes = contextTypes;