cspace-ui
Version:
CollectionSpace user interface for browsers
286 lines (281 loc) • 11.2 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 _cspaceInput = require("cspace-input");
var _cspaceLayout = require("cspace-layout");
var _Dock = _interopRequireDefault(require("../sections/Dock"));
var _SearchButtonBar = _interopRequireDefault(require("./SearchButtonBar"));
var _AdvancedSearchBuilderContainer = _interopRequireDefault(require("../../containers/search/AdvancedSearchBuilderContainer"));
var _PanelContainer = require("../../containers/layout/PanelContainer");
var _SearchForm = _interopRequireDefault(require("../../../styles/cspace-ui/SearchForm.css"));
var _SearchFormRecordType = _interopRequireDefault(require("../../../styles/cspace-ui/SearchFormRecordType.css"));
var _SearchFormVocab = _interopRequireDefault(require("../../../styles/cspace-ui/SearchFormVocab.css"));
var _searchHelpers = require("../../helpers/searchHelpers");
var _configHelpers = require("../../helpers/configHelpers");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const {
Label,
LineInput,
RecordTypeInput,
VocabularyInput
} = _cspaceInput.components;
const messages = (0, _reactIntl.defineMessages)({
recordType: {
"id": "searchForm.recordType",
"defaultMessage": "Find"
},
vocabulary: {
"id": "searchForm.vocabulary",
"defaultMessage": "in vocabulary"
},
keyword: {
"id": "searchForm.keyword",
"defaultMessage": "Keywords"
},
fullTextSearch: {
"id": "searchForm.fullTextSearch",
"defaultMessage": "Full Text Search"
}
});
const propTypes = {
config: _propTypes.default.shape({
messages: _propTypes.default.object
}),
dockTop: _propTypes.default.number,
intl: _reactIntl.intlShape,
keywordValue: _propTypes.default.string,
recordTypeValue: _propTypes.default.string,
vocabularyValue: _propTypes.default.string,
advancedSearchCondition: _propTypes.default.instanceOf(_immutable.default.Map),
preferredAdvancedSearchBooleanOp: _propTypes.default.string,
recordTypeInputReadOnly: _propTypes.default.bool,
recordTypeInputRootType: _propTypes.default.string,
recordTypeInputRecordTypes: _propTypes.default.arrayOf(_propTypes.default.string),
recordTypeInputServiceTypes: _propTypes.default.arrayOf(_propTypes.default.string),
showButtons: _propTypes.default.bool,
perms: _propTypes.default.instanceOf(_immutable.default.Map),
getAuthorityVocabCsid: _propTypes.default.func,
buildRecordFieldOptionLists: _propTypes.default.func,
deleteOptionList: _propTypes.default.func,
onAdvancedSearchConditionCommit: _propTypes.default.func,
onClearButtonClick: _propTypes.default.func,
onKeywordCommit: _propTypes.default.func,
onRecordTypeCommit: _propTypes.default.func,
onVocabularyCommit: _propTypes.default.func,
onSearch: _propTypes.default.func
};
class SearchForm extends _react.Component {
constructor() {
super();
this.formatRecordTypeLabel = this.formatRecordTypeLabel.bind(this);
this.formatVocabularyLabel = this.formatVocabularyLabel.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleKeywordInputCommit = this.handleKeywordInputCommit.bind(this);
this.handleRecordTypeDropdownCommit = this.handleRecordTypeDropdownCommit.bind(this);
this.handleVocabularyDropdownCommit = this.handleVocabularyDropdownCommit.bind(this);
}
componentDidMount() {
const {
config,
recordTypeValue,
buildRecordFieldOptionLists
} = this.props;
if (buildRecordFieldOptionLists && recordTypeValue) {
buildRecordFieldOptionLists(config, recordTypeValue);
}
}
componentDidUpdate(prevProps) {
const {
config,
recordTypeValue,
buildRecordFieldOptionLists,
deleteOptionList
} = this.props;
const {
recordTypeValue: prevRecordTypeValue
} = prevProps;
if (recordTypeValue !== prevRecordTypeValue) {
if (deleteOptionList) {
deleteOptionList((0, _configHelpers.getRecordFieldOptionListName)(prevRecordTypeValue));
deleteOptionList((0, _configHelpers.getRecordGroupOptionListName)(prevRecordTypeValue));
}
if (buildRecordFieldOptionLists && recordTypeValue) {
buildRecordFieldOptionLists(config, recordTypeValue);
}
}
}
componentWillUnmount() {
const {
recordTypeValue,
deleteOptionList
} = this.props;
if (deleteOptionList) {
deleteOptionList((0, _configHelpers.getRecordFieldOptionListName)(recordTypeValue));
deleteOptionList((0, _configHelpers.getRecordGroupOptionListName)(recordTypeValue));
}
}
handleFormSubmit(event) {
event.preventDefault();
const {
onSearch
} = this.props;
if (onSearch) {
onSearch();
}
}
handleKeywordInputCommit(path, value) {
const {
onKeywordCommit
} = this.props;
if (onKeywordCommit) {
onKeywordCommit(value);
}
}
handleRecordTypeDropdownCommit(path, value) {
const {
onRecordTypeCommit
} = this.props;
if (onRecordTypeCommit) {
onRecordTypeCommit(value);
}
}
handleVocabularyDropdownCommit(path, value) {
const {
onVocabularyCommit
} = this.props;
if (onVocabularyCommit) {
onVocabularyCommit(value);
}
}
formatRecordTypeLabel(name, config) {
const {
intl
} = this.props;
return intl.formatMessage(config.messages.record.collectionName) || name;
}
formatVocabularyLabel(name, config) {
const {
intl
} = this.props;
return intl.formatMessage(config.messages.name) || name;
}
renderVocabularyInput(recordTypes) {
const {
intl,
recordTypeValue,
vocabularyValue
} = this.props;
if (!recordTypeValue || !recordTypes[recordTypeValue] || !recordTypes[recordTypeValue].vocabularies) {
return null;
}
return /*#__PURE__*/_react.default.createElement("div", {
className: _SearchFormVocab.default.common
}, /*#__PURE__*/_react.default.createElement(Label, null, intl.formatMessage(messages.vocabulary)), /*#__PURE__*/_react.default.createElement(VocabularyInput, {
recordTypes: recordTypes,
recordType: recordTypeValue,
value: vocabularyValue,
formatVocabularyLabel: this.formatVocabularyLabel,
onCommit: this.handleVocabularyDropdownCommit
}));
}
render() {
const {
advancedSearchCondition,
config,
dockTop,
intl,
keywordValue,
perms,
preferredAdvancedSearchBooleanOp,
recordTypeValue,
recordTypeInputReadOnly,
recordTypeInputRootType,
recordTypeInputRecordTypes,
recordTypeInputServiceTypes,
showButtons,
getAuthorityVocabCsid,
onAdvancedSearchConditionCommit,
onClearButtonClick
} = this.props;
const fullTextPanelHeader = /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.fullTextSearch));
// If showButtons is false, render the button bar anyway, but with height 0, so that the submit
// button will exist on the page, invisibly. This allows pressing enter on fields to submit the
// form.
const topButtonBar = /*#__PURE__*/_react.default.createElement(_SearchButtonBar.default, {
onClearButtonClick: onClearButtonClick
});
let header;
if (showButtons) {
header = /*#__PURE__*/_react.default.createElement(_Dock.default, {
dockTop: dockTop,
isSidebarOpen: false
}, topButtonBar);
} else {
header = /*#__PURE__*/_react.default.createElement("div", {
style: {
height: '0',
overflow: 'hidden',
margin: '0'
}
}, topButtonBar);
}
let footer;
if (showButtons) {
footer = /*#__PURE__*/_react.default.createElement("footer", null, /*#__PURE__*/_react.default.createElement(_SearchButtonBar.default, {
onClearButtonClick: onClearButtonClick
}));
}
const searchableRecordTypes = (0, _searchHelpers.getSearchableRecordTypes)(getAuthorityVocabCsid, config, perms);
let recordTypes;
if (recordTypeInputRecordTypes) {
recordTypes = {};
// Filter out searchable record types that are not included in the desired record types list.
recordTypeInputRecordTypes.forEach(recordType => {
recordTypes[recordType] = searchableRecordTypes[recordType];
});
} else {
recordTypes = searchableRecordTypes;
}
return /*#__PURE__*/_react.default.createElement("form", {
autoComplete: "off",
className: _SearchForm.default.common,
onSubmit: this.handleFormSubmit
}, header, /*#__PURE__*/_react.default.createElement(_cspaceLayout.Panel, null, /*#__PURE__*/_react.default.createElement("div", {
className: _SearchFormRecordType.default.common
}, /*#__PURE__*/_react.default.createElement(RecordTypeInput, {
label: intl.formatMessage(messages.recordType),
recordTypes: recordTypes,
rootType: recordTypeInputRootType,
serviceTypes: recordTypeInputServiceTypes,
value: recordTypeValue,
formatRecordTypeLabel: this.formatRecordTypeLabel,
onCommit: this.handleRecordTypeDropdownCommit,
readOnly: recordTypeInputReadOnly
}), this.renderVocabularyInput(recordTypes)), /*#__PURE__*/_react.default.createElement(_PanelContainer.ConnectedPanel, {
collapsible: true,
header: fullTextPanelHeader,
name: "fullTextSearch",
recordType: recordTypeValue
}, /*#__PURE__*/_react.default.createElement(LineInput, {
label: intl.formatMessage(messages.keyword),
value: keywordValue,
onCommit: this.handleKeywordInputCommit
})), /*#__PURE__*/_react.default.createElement(_AdvancedSearchBuilderContainer.default, {
condition: advancedSearchCondition,
config: config,
preferredBooleanOp: preferredAdvancedSearchBooleanOp,
recordType: recordTypeValue,
onConditionCommit: onAdvancedSearchConditionCommit
})), footer);
}
}
exports.default = SearchForm;
SearchForm.propTypes = propTypes;