cspace-ui
Version:
CollectionSpace user interface for browsers
249 lines (247 loc) • 7.95 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(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); } /* 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));