cspace-ui
Version:
CollectionSpace user interface for browsers
154 lines (153 loc) • 7.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = MediaPriorityOrderPanel;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutable = _interopRequireDefault(require("immutable"));
var _reactRedux = require("react-redux");
var _reactIntl = require("react-intl");
var _cspaceInput = require("cspace-input");
var _record = require("../../actions/record");
var _reducers = require("../../reducers");
var _searchNames = require("../../constants/searchNames");
var _searchResultHelpers = require("../search/searchResultHelpers");
var _PanelContainer = require("../../containers/layout/PanelContainer");
var _MediaSnapshotPanel = require("./MediaSnapshotPanel");
var _MediaPriorityRow = _interopRequireDefault(require("./MediaPriorityRow"));
var _MediaPriorityOrderPanel = _interopRequireDefault(require("../../../styles/cspace-ui/MediaPriorityOrderPanel.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.baseComponents;
const {
RepeatingInput
} = _cspaceInput.components;
const listType = 'common';
const parentDataPath = _MediaSnapshotPanel.mediaPriorityPath.slice(0, -1);
const messages = (0, _reactIntl.defineMessages)({
title: {
"id": "mediaPriorityOrderPanel.title",
"defaultMessage": "Media Priority"
},
titleWithCount: {
"id": "mediaPriorityOrderPanel.titleWithCount",
"defaultMessage": "{title}: {count, number}"
}
});
const propTypes = {
color: _propTypes.default.string,
config: _propTypes.default.shape({
listTypes: _propTypes.default.object,
recordTypes: _propTypes.default.object,
mediaSnapshotSort: _propTypes.default.string
}),
csid: _propTypes.default.string,
recordType: _propTypes.default.string
};
const toRefNameArray = value => {
if (!value) return [];
if (_immutable.default.List.isList(value)) return value.toArray();
return [value];
};
function MediaPriorityOrderPanel(props) {
const {
color,
config,
csid,
recordType
} = props;
const dispatch = (0, _reactRedux.useDispatch)();
const seqID = (0, _reactRedux.useSelector)(state => (0, _reducers.getRecordRelationUpdatedTimestamp)(state, csid));
const searchDescriptor = (0, _react.useMemo)(() => (0, _MediaSnapshotPanel.getSearchDescriptor)({
csid,
mediaRecordType: 'media',
recordRelationUpdatedTimestamp: seqID,
recordType,
sort: config.mediaSnapshotSort || 'title'
}), [config.mediaSnapshotSort, csid, recordType, seqID]);
const storedValue = (0, _reactRedux.useSelector)(state => {
var _getRecordData;
return (_getRecordData = (0, _reducers.getRecordData)(state, csid)) === null || _getRecordData === void 0 ? void 0 : _getRecordData.getIn(_MediaSnapshotPanel.mediaPriorityPath);
});
const searchResult = (0, _reactRedux.useSelector)(state => (0, _reducers.getSearchResult)(state, _searchNames.MEDIA_SNAPSHOT_PANEL_SEARCH_NAME, searchDescriptor));
const recordTypeConfig = config.recordTypes[recordType];
const onCommit = (path, value) => dispatch((0, _record.setFieldValue)(recordTypeConfig, csid, path, value));
const onMoveInstance = (path, newPosition) => dispatch((0, _record.moveFieldValue)(recordTypeConfig, csid, path, newPosition));
const save = () => dispatch((0, _record.saveRecord)(config, recordTypeConfig, undefined, csid)).catch(() => {});
const {
labelsByRefName,
searchLoaded
} = (0, _react.useMemo)(() => {
const {
list,
items
} = (0, _searchResultHelpers.readListItems)(config, listType, searchResult);
const labels = new Map();
if (items) {
items.forEach(item => {
const refName = item.get('refName');
if (refName) {
const label = [item.get('identificationNumber'), item.get('title')].filter(part => !!part).join(' – ');
labels.set(refName, label);
}
});
}
return {
labelsByRefName: labels,
searchLoaded: (list === null || list === void 0 ? void 0 : list.get('totalItems')) != null
};
}, [config, searchResult]);
const mergedValue = (0, _react.useMemo)(() => {
if (!searchLoaded) return null;
const orderedRefNames = toRefNameArray(storedValue).filter(refName => labelsByRefName.has(refName));
const orderedSet = new Set(orderedRefNames);
labelsByRefName.forEach((label, refName) => {
if (!orderedSet.has(refName)) orderedRefNames.push(refName);
});
return _immutable.default.List(orderedRefNames);
}, [labelsByRefName, searchLoaded, storedValue]);
(0, _react.useEffect)(() => {
if (mergedValue && !mergedValue.equals(_immutable.default.List(toRefNameArray(storedValue)))) {
onCommit(_MediaSnapshotPanel.mediaPriorityPath, mergedValue);
}
}, [mergedValue]);
if (!mergedValue) return null;
const saveButton = /*#__PURE__*/_react.default.createElement(MiniButton, {
autoWidth: true,
key: "save",
name: "save",
onClick: save
}, "Save");
const title = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.title);
const header = /*#__PURE__*/_react.default.createElement("h3", null, mergedValue.size === 0 ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({}, messages.titleWithCount, {
values: {
title,
count: 0
}
})) : title);
return /*#__PURE__*/_react.default.createElement(_PanelContainer.ConnectedPanel, {
buttons: mergedValue.size > 0 ? [saveButton] : [],
color: color,
collapsible: true,
collapsed: true,
config: config,
header: header,
name: "mediaPriorityPanel",
recordType: recordType
}, /*#__PURE__*/_react.default.createElement("div", {
className: _MediaPriorityOrderPanel.default.panel
}, mergedValue.size > 0 && /*#__PURE__*/_react.default.createElement(RepeatingInput, {
name: "mediaPriority",
parentPath: parentDataPath,
value: mergedValue,
onCommit: onCommit,
onMoveInstance: onMoveInstance
}, /*#__PURE__*/_react.default.createElement(_MediaPriorityRow.default, {
labelsByRefName: labelsByRefName
}))));
}
MediaPriorityOrderPanel.propTypes = propTypes;