cspace-ui
Version:
CollectionSpace user interface for browsers
250 lines (248 loc) • 8.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.BaseMiniViewPopupAutocompleteInput = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutable = _interopRequireDefault(require("immutable"));
var _cspaceInput = require("cspace-input");
var _MiniViewPopup = _interopRequireDefault(require("./MiniViewPopup"));
var _AutocompleteInputContainer = _interopRequireDefault(require("../../containers/input/AutocompleteInputContainer"));
var _permissionHelpers = require("../../helpers/permissionHelpers");
var _refNameHelpers = require("../../helpers/refNameHelpers");
var _MiniViewPopupAutocompleteInput = _interopRequireDefault(require("../../../styles/cspace-ui/MiniViewPopupAutocompleteInput.css"));
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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* global window */
const {
AutocompleteInput
} = _cspaceInput.baseComponents;
const {
labelable,
repeatable
} = _cspaceInput.enhancers;
const propTypes = {
// eslint-disable-next-line react/forbid-foreign-prop-types
...AutocompleteInput.propTypes,
openDelay: _propTypes.default.number,
perms: _propTypes.default.instanceOf(_immutable.default.Map),
clearRecord: _propTypes.default.func
};
const defaultProps = {
openDelay: 500
};
const contextTypes = {
config: _propTypes.default.shape({
recordTypes: _propTypes.default.object
})
};
class BaseMiniViewPopupAutocompleteInput extends _react.Component {
constructor(props) {
super(props);
this.handleDropdownClose = this.handleDropdownClose.bind(this);
this.handleDropdownOpen = this.handleDropdownOpen.bind(this);
this.handleItemMouseEnter = this.handleItemMouseEnter.bind(this);
this.handleItemMouseLeave = this.handleItemMouseLeave.bind(this);
this.handleMiniViewMouseEnter = this.handleMiniViewMouseEnter.bind(this);
this.handleMiniViewPopupDomRef = this.handleMiniViewPopupDomRef.bind(this);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.handleRef = this.handleRef.bind(this);
this.state = {
isOpen: false
};
}
// eslint-disable-next-line camelcase
UNSAFE_componentWillUpdate(nextProps) {
const {
value
} = this.props;
const {
value: nextValue
} = nextProps;
if (nextValue !== value) {
this.close();
}
}
handleDropdownClose() {
this.close();
this.setState({
isFiltering: false
});
}
handleDropdownOpen() {
this.close();
this.setState({
isFiltering: true
});
}
handleItemMouseEnter(value, element) {
this.cancelClose();
const {
openDelay
} = this.props;
this.openTimer = setTimeout(() => {
this.open(value, element);
}, openDelay);
}
handleItemMouseLeave() {
this.cancelOpen();
const {
openDelay
} = this.props;
this.closeTimer = window.setTimeout(() => {
this.close();
}, openDelay);
}
handleMiniViewMouseEnter() {
this.cancelClose();
this.cancelOpen();
}
handleMiniViewPopupDomRef(ref) {
this.miniViewPopupDomNode = ref;
}
handleMouseEnter() {
const {
isFiltering,
isOpen
} = this.state;
if (!isFiltering && !isOpen) {
const {
openDelay,
value
} = this.props;
this.openTimer = setTimeout(() => {
this.open(value);
}, openDelay);
}
}
handleMouseLeave() {
this.close();
}
handleRef(ref) {
this.domNode = ref;
}
cancelClose() {
if (this.closeTimer) {
window.clearTimeout(this.closeTimer);
this.openTimer = null;
}
}
cancelOpen() {
if (this.openTimer) {
window.clearTimeout(this.openTimer);
this.openTimer = null;
}
}
close() {
this.cancelOpen();
this.cancelClose();
const {
isOpen
} = this.state;
if (this.domNode && isOpen) {
this.setState({
isOpen: false,
value: null,
element: null
});
}
}
open(value, element) {
this.cancelOpen();
this.cancelClose();
this.setState({
isOpen: true,
value,
element
});
}
renderMiniViewPopup() {
const {
isOpen,
value,
element
} = this.state;
if (!value || !isOpen) {
return undefined;
}
const {
perms
} = this.props;
const {
config
} = this.context;
const csid = (0, _refNameHelpers.refNameToCsid)(value);
const recordType = (0, _refNameHelpers.getRecordType)(config, value);
const vocabulary = (0, _refNameHelpers.getVocabulary)(config, value);
if (!recordType || !csid) {
return undefined;
}
if (!(0, _permissionHelpers.canRead)(recordType, perms)) {
return undefined;
}
let style;
if (element) {
const inputRect = this.domNode.getBoundingClientRect();
const itemRect = element.getBoundingClientRect();
style = {
left: itemRect.width,
top: itemRect.top - inputRect.top - inputRect.height
};
}
return /*#__PURE__*/_react.default.createElement(_MiniViewPopup.default, {
config: config,
recordType: recordType,
vocabulary: vocabulary,
csid: csid,
style: style,
domRef: this.handleMiniViewPopupDomRef,
onMouseEnter: this.handleMiniViewMouseEnter
});
}
render() {
const {
openDelay,
perms,
clearRecord,
...remainingProps
} = this.props;
const {
asText,
embedded
} = remainingProps;
if (asText) {
return /*#__PURE__*/_react.default.createElement(_AutocompleteInputContainer.default, remainingProps);
}
const {
isFiltering
} = this.state;
const className = embedded ? _MiniViewPopupAutocompleteInput.default.embedded : _MiniViewPopupAutocompleteInput.default.normal;
let popup;
let filteringPopup;
if (isFiltering) {
filteringPopup = this.renderMiniViewPopup();
} else {
popup = this.renderMiniViewPopup();
}
return /*#__PURE__*/_react.default.createElement("div", {
className: className,
ref: this.handleRef,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}, /*#__PURE__*/_react.default.createElement(_AutocompleteInputContainer.default, _extends({}, remainingProps, {
onClose: this.handleDropdownClose,
onOpen: this.handleDropdownOpen,
onItemMouseEnter: this.handleItemMouseEnter,
onItemMouseLeave: this.handleItemMouseLeave,
menuFooter: filteringPopup
})), popup);
}
}
exports.BaseMiniViewPopupAutocompleteInput = BaseMiniViewPopupAutocompleteInput;
BaseMiniViewPopupAutocompleteInput.propTypes = propTypes;
BaseMiniViewPopupAutocompleteInput.defaultProps = defaultProps;
BaseMiniViewPopupAutocompleteInput.contextTypes = contextTypes;
var _default = exports.default = repeatable(labelable(BaseMiniViewPopupAutocompleteInput));