cspace-ui
Version:
CollectionSpace user interface for browsers
280 lines (226 loc) • 9.08 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("../../../src/helpers/refNameHelpers");
var _MiniViewPopupAutocompleteInput = _interopRequireDefault(require("../../../styles/cspace-ui/MiniViewPopupAutocompleteInput.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _extends() { _extends = Object.assign || 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); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
const {
AutocompleteInput
} = _cspaceInput.baseComponents;
const {
labelable,
repeatable
} = _cspaceInput.enhancers;
const propTypes = _objectSpread({}, 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.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
};
}
componentWillUpdate(newProps) {
if (newProps.value !== this.props.value) {
this.close();
}
}
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();
if (this.domNode && this.state.isOpen) {
this.setState({
isOpen: false,
value: null,
element: null
});
}
}
open(value, element) {
this.cancelOpen();
this.cancelClose();
this.setState({
isOpen: true,
value,
element
});
}
handleDropdownClose() {
this.close();
this.state = {
isFiltering: false
};
}
handleDropdownOpen() {
this.close();
this.setState({
isFiltering: true
});
}
handleItemMouseEnter(value, element) {
this.cancelClose();
this.openTimer = setTimeout(() => {
this.open(value, element);
}, this.props.openDelay);
}
handleItemMouseLeave() {
this.cancelOpen();
this.closeTimer = window.setTimeout(() => {
this.close();
}, this.props.openDelay);
}
handleMiniViewMouseEnter() {
this.cancelClose();
this.cancelOpen();
}
handleMiniViewPopupDomRef(ref) {
this.miniViewPopupDomNode = ref;
}
handleMouseEnter() {
const {
isFiltering,
isOpen
} = this.state;
if (!isFiltering && !isOpen) {
this.openTimer = setTimeout(() => {
this.open(this.props.value);
}, this.props.openDelay);
}
}
handleMouseLeave() {
this.close();
}
handleRef(ref) {
this.domNode = ref;
}
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 _react.default.createElement(_MiniViewPopup.default, {
config: config,
recordType: recordType,
vocabulary: vocabulary,
csid: csid,
style: style,
domRef: this.handleMiniViewPopupDomRef,
onMouseEnter: this.handleMiniViewMouseEnter
});
}
render() {
const _this$props = this.props,
{
/* eslint-disable no-unused-vars */
openDelay,
perms,
clearRecord
} = _this$props,
remainingProps = _objectWithoutProperties(_this$props, ["openDelay", "perms", "clearRecord"]);
if (this.props.asText) {
return _react.default.createElement(_AutocompleteInputContainer.default, remainingProps);
}
const {
isFiltering
} = this.state;
const className = this.props.embedded ? _MiniViewPopupAutocompleteInput.default.embedded : _MiniViewPopupAutocompleteInput.default.normal;
let popup;
let filteringPopup;
if (isFiltering) {
filteringPopup = this.renderMiniViewPopup();
} else {
popup = this.renderMiniViewPopup();
}
return _react.default.createElement("div", {
className: className,
ref: this.handleRef,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}, _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 = repeatable(labelable(BaseMiniViewPopupAutocompleteInput));
exports.default = _default;