@handsontable/react-wrapper
Version:
Best Data Grid for React with Spreadsheet Look and Feel.
1,242 lines (1,210 loc) • 85.4 kB
JavaScript
import React, { useEffect, createContext, useContext, useRef, useCallback, useMemo, useState, useDeferredValue, useImperativeHandle, forwardRef, Fragment, Children, useId } from 'react';
import ReactDOM from 'react-dom';
import Handsontable from 'handsontable/base';
import { getRenderer } from 'handsontable/renderers/registry';
import { getEditor } from 'handsontable/editors/registry';
var bulkComponentContainer = null;
/**
* Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
*/
var AUTOSIZE_WARNING = 'Your `HotTable` configuration includes `autoRowSize`/`autoColumnSize` options, which are not compatible with ' + ' the component-based renderers`. Disable `autoRowSize` and `autoColumnSize` to prevent row and column misalignment.';
/**
* Warning message for the `hot-renderer` obsolete renderer passing method.
*/
var OBSOLETE_HOTRENDERER_WARNING = 'Providing a component-based renderer using `hot-renderer`-annotated component is no longer supported. ' + 'Pass your component using `renderer` prop of the `HotTable` or `HotColumn` component instead.';
/**
* Warning message for the `hot-editor` obsolete editor passing method.
*/
var OBSOLETE_HOTEDITOR_WARNING = 'Providing a component-based editor using `hot-editor`-annotated component is no longer supported. ' + 'Pass your component using `editor` prop of the `HotTable` or `HotColumn` component instead.';
/**
* Warning message for the unexpected children of HotTable component.
*/
var UNEXPECTED_HOTTABLE_CHILDREN_WARNING = 'Unexpected children nodes found in HotTable component. ' + 'Only HotColumn components are allowed.';
/**
* Warning message for the unexpected children of HotColumn component.
*/
var UNEXPECTED_HOTCOLUMN_CHILDREN_WARNING = 'Unexpected children nodes found in HotColumn component. ' + 'HotColumn components do not support any children.';
/**
* Message for the warning thrown if the Handsontable instance has been destroyed.
*/
var HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be' + ' used properly.';
/**
* Default classname given to the wrapper container.
*/
var DEFAULT_CLASSNAME = 'hot-wrapper-editor-container';
/**
* Logs warn to the console if the `console` object is exposed.
*
* @param {...*} args Values which will be logged.
*/
function warn() {
if (typeof console !== 'undefined') {
var _console;
(_console = console).warn.apply(_console, arguments);
}
}
/**
* Detect if `hot-renderer` or `hot-editor` is defined, and if so, throw an incompatibility warning.
*
* @returns {boolean} 'true' if the warning was issued
*/
function displayObsoleteRenderersEditorsWarning(children) {
if (hasChildElementOfType(children, 'hot-renderer')) {
warn(OBSOLETE_HOTRENDERER_WARNING);
return true;
}
if (hasChildElementOfType(children, 'hot-editor')) {
warn(OBSOLETE_HOTEDITOR_WARNING);
return true;
}
return false;
}
/**
* Detect if children of specified type are defined, and if so, throw an incompatibility warning.
*
* @param {ReactNode} children Component children nodes
* @param {ComponentType} Component Component type to check
* @returns {boolean} 'true' if the warning was issued
*/
function displayChildrenOfTypeWarning(children, Component) {
var childrenArray = React.Children.toArray(children);
if (childrenArray.some(function (child) {
return child.type !== Component;
})) {
warn(UNEXPECTED_HOTTABLE_CHILDREN_WARNING);
return true;
}
return false;
}
/**
* Detect if children is defined, and if so, throw an incompatibility warning.
*
* @param {ReactNode} children Component children nodes
* @returns {boolean} 'true' if the warning was issued
*/
function displayAnyChildrenWarning(children) {
var childrenArray = React.Children.toArray(children);
if (childrenArray.length) {
warn(UNEXPECTED_HOTCOLUMN_CHILDREN_WARNING);
return true;
}
return false;
}
/**
* Check the existence of elements of the provided `type` from the `HotColumn` component's children.
*
* @param {ReactNode} children HotTable children array.
* @param {String} type Either `'hot-renderer'` or `'hot-editor'`.
* @returns {boolean} `true` if the child of that type was found, `false` otherwise.
*/
function hasChildElementOfType(children, type) {
var childrenArray = React.Children.toArray(children);
return childrenArray.some(function (child) {
return child.props[type] !== void 0;
});
}
/**
* Create an editor portal.
*
* @param {Document} doc Document to be used.
* @param {ComponentType} Editor Editor component or render function.
* @returns {ReactPortal} The portal for the editor.
*/
function createEditorPortal(doc, Editor) {
if (!doc || !Editor || typeof Editor === 'boolean') {
return null;
}
var editorElement = React.createElement(Editor, null);
var containerProps = getContainerAttributesProps({}, false);
containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
return ReactDOM.createPortal(React.createElement("div", Object.assign({}, containerProps), editorElement), doc.body);
}
/**
* Render a cell component to an external DOM node.
*
* @param {React.ReactElement} rElement React element to be used as a base for the component.
* @param {Document} [ownerDocument] The owner document to set the portal up into.
* @param {String} portalKey The key to be used for the portal.
* @param {HTMLElement} [cachedContainer] The cached container to be used for the portal.
* @returns {{portal: ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
*/
function createPortal(rElement) {
var ownerDocument = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
var portalKey = arguments.length > 2 ? arguments[2] : undefined;
var cachedContainer = arguments.length > 3 ? arguments[3] : undefined;
if (!ownerDocument) {
ownerDocument = document;
}
if (!bulkComponentContainer) {
bulkComponentContainer = ownerDocument.createDocumentFragment();
}
var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
bulkComponentContainer.appendChild(portalContainer);
return {
portal: ReactDOM.createPortal(rElement, portalContainer, portalKey),
portalContainer: portalContainer
};
}
/**
* Get an object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
* component.
*
* @param {HotTableProps} props Object containing the React element props.
* @param {Boolean} randomizeId If set to `true`, the function will randomize the `id` property when no `id` was present in the `prop` object.
* @returns An object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
* component.
*/
function getContainerAttributesProps(props) {
var randomizeId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
return {
id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : undefined),
className: props.className || '',
style: props.style || {}
};
}
/**
* Checks if the environment that the code runs in is a browser.
*
* @returns {boolean}
*/
function isCSR() {
return typeof window !== 'undefined';
}
/**
* A variant of useEffect hook that does not trigger on initial mount, only updates
*
* @param effect Effect function
* @param deps Effect dependencies
*/
function useUpdateEffect(effect, deps) {
var notInitialRender = React.useRef(false);
useEffect(function () {
if (notInitialRender.current) {
return effect();
} else {
notInitialRender.current = true;
}
}, deps);
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _assertThisInitialized(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function _callSuper(t, o, e) {
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: false
}), e;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: true,
configurable: true,
writable: true
}) : e[r] = t, e;
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: true,
configurable: true
}
}), Object.defineProperty(t, "prototype", {
writable: false
}), e && _setPrototypeOf(t, e);
}
function _isNativeReflectConstruct() {
try {
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (t) {}
return (_isNativeReflectConstruct = function () {
return !!t;
})();
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = true,
o = false;
try {
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = true, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == typeof e || "function" == typeof e)) return e;
if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized(t);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r);
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (String )(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var SettingsMapper = /*#__PURE__*/function () {
function SettingsMapper() {
_classCallCheck(this, SettingsMapper);
}
return _createClass(SettingsMapper, null, [{
key: "getSettings",
value:
/**
* Parse component settings into Handsontable-compatible settings.
*
* @param {Object} properties Object containing properties from the HotTable object.
* @param {Object} additionalSettings Additional settings.
* @param {boolean} additionalSettings.isInit Flag determining whether the settings are being set during initialization.
* @param {string[]} additionalSettings.initOnlySettingKeys Array of keys that can be set only during initialization.
* @returns {Object} Handsontable-compatible settings object.
*/
function getSettings(properties) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$prevProps = _ref.prevProps,
prevProps = _ref$prevProps === void 0 ? {} : _ref$prevProps,
_ref$isInit = _ref.isInit,
isInit = _ref$isInit === void 0 ? false : _ref$isInit,
_ref$initOnlySettingK = _ref.initOnlySettingKeys,
initOnlySettingKeys = _ref$initOnlySettingK === void 0 ? [] : _ref$initOnlySettingK;
var shouldSkipProp = function shouldSkipProp(key) {
// Omit settings that can be set only during initialization and are intentionally modified.
if (!isInit && initOnlySettingKeys.includes(key)) {
return prevProps[key] === properties[key];
}
return false;
};
var newSettings = {};
for (var key in properties) {
if (key !== 'children' && !shouldSkipProp(key) && properties.hasOwnProperty(key)) {
newSettings[key] = properties[key];
}
}
return newSettings;
}
}]);
}();
var HotTableContext = createContext(undefined);
var HotTableContextProvider = function HotTableContextProvider(_ref) {
var children = _ref.children;
var columnsSettings = useRef([]);
var setHotColumnSettings = useCallback(function (columnSettings, columnIndex) {
columnsSettings.current[columnIndex] = columnSettings;
}, []);
var componentRendererColumns = useRef(new Map());
var renderedCellCache = useRef(new Map());
var clearRenderedCellCache = useCallback(function () {
return renderedCellCache.current.clear();
}, []);
var portalCache = useRef(new Map());
var clearPortalCache = useCallback(function () {
return portalCache.current.clear();
}, []);
var portalContainerCache = useRef(new Map());
var getRendererWrapper = useCallback(function (Renderer) {
return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
var key = "".concat(row, "-").concat(col);
// Handsontable.Core type is missing guid
var instanceGuid = instance.guid;
var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
var portalKey = "".concat(key, "-").concat(instanceGuid);
if (renderedCellCache.current.has(key)) {
TD.innerHTML = renderedCellCache.current.get(key).innerHTML;
}
if (TD && !TD.getAttribute('ghost-table')) {
var cachedPortal = portalCache.current.get(portalKey);
var cachedPortalContainer = portalContainerCache.current.get(portalContainerKey);
while (TD.firstChild) {
TD.removeChild(TD.firstChild);
}
// if portal already exists, do not recreate
if (cachedPortal && cachedPortalContainer) {
TD.appendChild(cachedPortalContainer);
} else {
var rendererElement = React.createElement(Renderer, {
instance: instance,
TD: TD,
row: row,
col: col,
prop: prop,
value: value,
cellProperties: cellProperties
});
var _createPortal = createPortal(rendererElement, TD.ownerDocument, portalKey, cachedPortalContainer),
portal = _createPortal.portal,
portalContainer = _createPortal.portalContainer;
portalContainerCache.current.set(portalContainerKey, portalContainer);
TD.appendChild(portalContainer);
portalCache.current.set(portalKey, portal);
}
}
renderedCellCache.current.set("".concat(row, "-").concat(col), TD);
return TD;
};
}, []);
var renderersPortalManager = useRef(function () {
return undefined;
});
var setRenderersPortalManagerRef = useCallback(function (pmComponent) {
renderersPortalManager.current = pmComponent;
}, []);
var pushCellPortalsIntoPortalManager = useCallback(function () {
renderersPortalManager.current(_toConsumableArray(portalCache.current.values()));
}, []);
var contextImpl = useMemo(function () {
return {
componentRendererColumns: componentRendererColumns.current,
columnsSettings: columnsSettings.current,
emitColumnSettings: setHotColumnSettings,
getRendererWrapper: getRendererWrapper,
clearPortalCache: clearPortalCache,
clearRenderedCellCache: clearRenderedCellCache,
setRenderersPortalManagerRef: setRenderersPortalManagerRef,
pushCellPortalsIntoPortalManager: pushCellPortalsIntoPortalManager
};
}, [setHotColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
return React.createElement(HotTableContext.Provider, {
value: contextImpl
}, children);
};
/**
* Exposes the table context object to components
*
* @returns HotTableContext
*/
function useHotTableContext() {
return useContext(HotTableContext);
}
var HotColumnContext = createContext(undefined);
var HotColumnContextProvider = function HotColumnContextProvider(_ref) {
var columnIndex = _ref.columnIndex,
getOwnerDocument = _ref.getOwnerDocument,
children = _ref.children;
var contextImpl = useMemo(function () {
return {
columnIndex: columnIndex,
getOwnerDocument: getOwnerDocument
};
}, [columnIndex, getOwnerDocument]);
return React.createElement(HotColumnContext.Provider, {
value: contextImpl
}, children);
};
var useHotColumnContext = function useHotColumnContext() {
return useContext(HotColumnContext);
};
var AbstractMethods = ['close', 'focus', 'open'];
var ExcludedMethods = ['getValue', 'setValue'];
var MethodsMap = {
open: 'onOpen',
close: 'onClose',
prepare: 'onPrepare',
focus: 'onFocus'
};
/**
* Create a class to be passed to the Handsontable's settings.
*
* @param {RefObject<HotEditorHooks>} hooksRef Reference to component-based editor overridden hooks object.
* @param {RefObject} instanceRef Reference to Handsontable-native custom editor class instance.
* @returns {Function} A class to be passed to the Handsontable editor settings.
*/
function makeEditorClass(hooksRef, instanceRef) {
return /*#__PURE__*/function (_Handsontable$editors) {
function CustomEditor(hotInstance) {
var _this;
_classCallCheck(this, CustomEditor);
_this = _callSuper(this, CustomEditor, [hotInstance]);
instanceRef.current = _this;
Object.getOwnPropertyNames(Handsontable.editors.BaseEditor.prototype).forEach(function (propName) {
if (propName === 'constructor' || ExcludedMethods.includes(propName)) {
return;
}
var baseMethod = Handsontable.editors.BaseEditor.prototype[propName];
CustomEditor.prototype[propName] = function () {
var _hooksRef$current;
var result;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (!AbstractMethods.includes(propName)) {
result = baseMethod.call.apply(baseMethod, [this].concat(args)); // call super
}
if (MethodsMap[propName] && (_hooksRef$current = hooksRef.current) !== null && _hooksRef$current !== void 0 && _hooksRef$current[MethodsMap[propName]]) {
var _hooksRef$current$Met;
result = (_hooksRef$current$Met = hooksRef.current[MethodsMap[propName]]).call.apply(_hooksRef$current$Met, [this].concat(args));
}
return result;
}.bind(_this);
});
return _this;
}
_inherits(CustomEditor, _Handsontable$editors);
return _createClass(CustomEditor, [{
key: "focus",
value: function focus() {}
}, {
key: "getValue",
value: function getValue() {
return this.value;
}
}, {
key: "setValue",
value: function setValue(newValue) {
this.value = newValue;
}
}, {
key: "open",
value: function open() {}
}, {
key: "close",
value: function close() {}
}]);
}(Handsontable.editors.BaseEditor);
}
/**
* Context to provide Handsontable-native custom editor class instance to overridden hooks object.
*/
var EditorContext = createContext(undefined);
/**
* Provider of the context that exposes Handsontable-native editor instance and passes hooks object
* for custom editor components.
*
* @param {Ref} hooksRef Reference for component-based editor overridden hooks object.
* @param {RefObject} hotCustomEditorInstanceRef Reference to Handsontable-native editor instance.
*/
var EditorContextProvider = function EditorContextProvider(_ref) {
var hooksRef = _ref.hooksRef,
hotCustomEditorInstanceRef = _ref.hotCustomEditorInstanceRef,
children = _ref.children;
return React.createElement(EditorContext.Provider, {
value: {
hooksRef: hooksRef,
hotCustomEditorInstanceRef: hotCustomEditorInstanceRef
}
}, children);
};
/**
* Hook that allows encapsulating custom behaviours of component-based editor by customizing passed ref with overridden hooks object.
*
* @param {HotEditorHooks} overriddenHooks Overrides specific for the custom editor.
* @param {DependencyList} deps Overridden hooks object React dependency list.
* @returns {UseHotEditorImpl} Editor API methods
*/
function useHotEditor(overriddenHooks, deps) {
var _useContext = useContext(EditorContext),
hooksRef = _useContext.hooksRef,
hotCustomEditorInstanceRef = _useContext.hotCustomEditorInstanceRef;
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
rerenderTrigger = _useState2[0],
setRerenderTrigger = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
editorValue = _useState4[0],
setEditorValue = _useState4[1];
// return a deferred value that allows for optimizing performance by delaying the update of a value until the next render.
var deferredValue = useDeferredValue(editorValue);
useImperativeHandle(hooksRef, function () {
return _objectSpread2(_objectSpread2({}, overriddenHooks), {}, {
onOpen: function onOpen() {
var _hotCustomEditorInsta, _overriddenHooks$onOp;
setEditorValue((_hotCustomEditorInsta = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta === void 0 ? void 0 : _hotCustomEditorInsta.getValue());
overriddenHooks === null || overriddenHooks === void 0 || (_overriddenHooks$onOp = overriddenHooks.onOpen) === null || _overriddenHooks$onOp === void 0 || _overriddenHooks$onOp.call(overriddenHooks);
setRerenderTrigger(function (t) {
return t + 1;
});
}
});
}, deps);
return useMemo(function () {
return {
get value() {
return deferredValue;
},
setValue: function setValue(newValue) {
var _hotCustomEditorInsta2;
setEditorValue(newValue);
(_hotCustomEditorInsta2 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta2 === void 0 || _hotCustomEditorInsta2.setValue(newValue);
},
get isOpen() {
var _hotCustomEditorInsta3, _hotCustomEditorInsta4;
return (_hotCustomEditorInsta3 = (_hotCustomEditorInsta4 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta4 === void 0 ? void 0 : _hotCustomEditorInsta4.isOpened()) !== null && _hotCustomEditorInsta3 !== void 0 ? _hotCustomEditorInsta3 : false;
},
finishEditing: function finishEditing() {
var _hotCustomEditorInsta5;
(_hotCustomEditorInsta5 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta5 === void 0 || _hotCustomEditorInsta5.finishEditing();
},
get row() {
var _hotCustomEditorInsta6;
return (_hotCustomEditorInsta6 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta6 === void 0 ? void 0 : _hotCustomEditorInsta6.row;
},
get col() {
var _hotCustomEditorInsta7;
return (_hotCustomEditorInsta7 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta7 === void 0 ? void 0 : _hotCustomEditorInsta7.col;
}
};
}, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
}
var isHotColumn = function isHotColumn(childNode) {
return childNode.type === HotColumn;
};
var internalProps = ['_columnIndex', '_getOwnerDocument', 'children'];
var HotColumn = function HotColumn(props) {
var _useHotTableContext = useHotTableContext(),
componentRendererColumns = _useHotTableContext.componentRendererColumns,
emitColumnSettings = _useHotTableContext.emitColumnSettings,
getRendererWrapper = _useHotTableContext.getRendererWrapper;
var _useHotColumnContext = useHotColumnContext(),
columnIndex = _useHotColumnContext.columnIndex,
getOwnerDocument = _useHotColumnContext.getOwnerDocument;
/**
* Reference to component-based editor overridden hooks object.
*/
var localEditorHooksRef = useRef(null);
/**
* Reference to HOT-native custom editor class instance.
*/
var localEditorClassInstance = useRef(null);
/**
* Logic performed after mounting & updating of the HotColumn component.
*/
useEffect(function () {
/**
* Filter out all the internal properties and return an object with just the Handsontable-related props.
*
* @returns {Object}
*/
var getSettingsProps = function getSettingsProps() {
return Object.keys(props).filter(function (key) {
return !internalProps.includes(key);
}).reduce(function (obj, key) {
obj[key] = props[key];
return obj;
}, {});
};
/**
* Create the column settings based on the data provided to the `HotColumn` component and its child components.
*/
var createColumnSettings = function createColumnSettings() {
var columnSettings = SettingsMapper.getSettings(getSettingsProps());
if (props.renderer) {
columnSettings.renderer = getRendererWrapper(props.renderer);
componentRendererColumns.set(columnIndex, true);
} else if (props.hotRenderer) {
columnSettings.renderer = props.hotRenderer;
}
if (props.editor) {
columnSettings.editor = makeEditorClass(localEditorHooksRef, localEditorClassInstance);
} else if (props.hotEditor) {
columnSettings.editor = props.hotEditor;
}
return columnSettings;
};
var columnSettings = createColumnSettings();
emitColumnSettings(columnSettings, columnIndex);
if (!displayObsoleteRenderersEditorsWarning(props.children)) {
displayAnyChildrenWarning(props.children);
}
});
var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
/**
* Render the portals of the editors, if there are any.
*
* @returns {ReactElement}
*/
return React.createElement(EditorContextProvider, {
hooksRef: localEditorHooksRef,
hotCustomEditorInstanceRef: localEditorClassInstance
}, editorPortal);
};
var version="16.1.1";
/**
* Component used to manage the renderer component portals.
*/
var RenderersPortalManager = forwardRef(function (_, ref) {
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
portals = _useState2[0],
setPortals = _useState2[1];
useImperativeHandle(ref, function () {
return setPortals;
});
return React.createElement(Fragment, null, portals);
});
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var propTypes = {exports: {}};
var reactIs = {exports: {}};
var reactIs_production_min = {};
var hasRequiredReactIs_production_min;
function requireReactIs_production_min() {
if (hasRequiredReactIs_production_min) return reactIs_production_min;
hasRequiredReactIs_production_min = 1;
var b = "function" === typeof Symbol && Symbol["for"],
c = b ? Symbol["for"]("react.element") : 60103,
d = b ? Symbol["for"]("react.portal") : 60106,
e = b ? Symbol["for"]("react.fragment") : 60107,
f = b ? Symbol["for"]("react.strict_mode") : 60108,
g = b ? Symbol["for"]("react.profiler") : 60114,
h = b ? Symbol["for"]("react.provider") : 60109,
k = b ? Symbol["for"]("react.context") : 60110,
l = b ? Symbol["for"]("react.async_mode") : 60111,
m = b ? Symbol["for"]("react.concurrent_mode") : 60111,
n = b ? Symbol["for"]("react.forward_ref") : 60112,
p = b ? Symbol["for"]("react.suspense") : 60113,
q = b ? Symbol["for"]("react.suspense_list") : 60120,
r = b ? Symbol["for"]("react.memo") : 60115,
t = b ? Symbol["for"]("react.lazy") : 60116,
v = b ? Symbol["for"]("react.block") : 60121,
w = b ? Symbol["for"]("react.fundamental") : 60117,
x = b ? Symbol["for"]("react.responder") : 60118,
y = b ? Symbol["for"]("react.scope") : 60119;
function z(a) {
if ("object" === _typeof(a) && null !== a) {
var u = a.$$typeof;
switch (u) {
case c:
switch (a = a.type, a) {
case l:
case m:
case e:
case g:
case f:
case p:
return a;
default:
switch (a = a && a.$$typeof, a) {
case k:
case n:
case t:
case r:
case h:
return a;
default:
return u;
}
}
case d:
return u;
}
}
}
function A(a) {
return z(a) === m;
}
reactIs_production_min.AsyncMode = l;
reactIs_production_min.ConcurrentMode = m;
reactIs_production_min.ContextConsumer = k;
reactIs_production_min.ContextProvider = h;
reactIs_production_min.Element = c;
reactIs_production_min.ForwardRef = n;
reactIs_production_min.Fragment = e;
reactIs_production_min.Lazy = t;
reactIs_production_min.Memo = r;
reactIs_production_min.Portal = d;
reactIs_production_min.Profiler = g;
reactIs_production_min.StrictMode = f;
reactIs_production_min.Suspense = p;
reactIs_production_min.isAsyncMode = function (a) {
return A(a) || z(a) === l;
};
reactIs_production_min.isConcurrentMode = A;
reactIs_production_min.isContextConsumer = function (a) {
return z(a) === k;
};
reactIs_production_min.isContextProvider = function (a) {
return z(a) === h;
};
reactIs_production_min.isElement = function (a) {
return "object" === _typeof(a) && null !== a && a.$$typeof === c;
};
reactIs_production_min.isForwardRef = function (a) {
return z(a) === n;
};
reactIs_production_min.isFragment = function (a) {
return z(a) === e;
};
reactIs_production_min.isLazy = function (a) {
return z(a) === t;
};
reactIs_production_min.isMemo = function (a) {
return z(a) === r;
};
reactIs_production_min.isPortal = function (a) {
return z(a) === d;
};
reactIs_production_min.isProfiler = function (a) {
return z(a) === g;
};
reactIs_production_min.isStrictMode = function (a) {
return z(a) === f;
};
reactIs_production_min.isSuspense = function (a) {
return z(a) === p;
};
reactIs_production_min.isValidElementType = function (a) {
return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === _typeof(a) && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
};
reactIs_production_min.typeOf = z;
return reactIs_production_min;
}
var reactIs_development = {};
var hasRequiredReactIs_development;
function requireReactIs_development() {
if (hasRequiredReactIs_development) return reactIs_development;
hasRequiredReactIs_development = 1;
if (process.env.NODE_ENV !== "production") {
(function () {
// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
// nor polyfill, then a plain number is used for performance.
var hasSymbol = typeof Symbol === 'function' && Symbol["for"];
var REACT_ELEMENT_TYPE = hasSymbol ? Symbol["for"]('react.element') : 0xeac7;
var REACT_PORTAL_TYPE = hasSymbol ? Symbol["for"]('react.portal') : 0xeaca;
var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol["for"]('react.fragment') : 0xeacb;
var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol["for"]('react.strict_mode') : 0xeacc;
var REACT_PROFILER_TYPE = hasSymbol ? Symbol["for"]('react.profiler') : 0xead2;
var REACT_PROVIDER_TYPE = hasSymbol ? Symbol["for"]('react.provider') : 0xeacd;
var REACT_CONTEXT_TYPE = hasSymbol ? Symbol["for"]('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
// (unstable) APIs that have been removed. Can we remove the symbols?
var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol["for"]('react.async_mode') : 0xeacf;
var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol["for"]('react.concurrent_mode') : 0xeacf;
var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol["for"]('react.forward_ref') : 0xead0;
var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol["for"]('react.suspense') : 0xead1;
var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol["for"]('react.suspense_list') : 0xead8;
var REACT_MEMO_TYPE = hasSymbol ? Symbol["for"]('react.memo') : 0xead3;
var REACT_LAZY_TYPE = hasSymbol ? Symbol["for"]('react.lazy') : 0xead4;
var REACT_BLOCK_TYPE = hasSymbol ? Symbol["for"]('react.block') : 0xead9;
var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol["for"]('react.fundamental') : 0xead5;
var REACT_RESPONDER_TYPE = hasSymbol ? Symbol["for"]('react.responder') : 0xead6;
var REACT_SCOPE_TYPE = hasSymbol ? Symbol["for"]('react.scope') : 0xead7;
function isValidElementType(type) {
return typeof type === 'string' || typeof type === 'function' ||
// Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || _typeof(type) === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
}
function typeOf(object) {
if (_typeof(object) === 'object' && object !== null) {
var $$typeof = object.$$typeof;
switch ($$typeof) {
case REACT_ELEMENT_TYPE:
var type = object.type;
switch (type) {
case REACT_ASYNC_MODE_TYPE:
case REACT_CONCURRENT_MODE_TYPE:
case REACT_FRAGMENT_TYPE:
case REACT_PROFILER_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_SUSPENSE_TYPE:
return type;
default:
var $$typeofType = type && type.$$typeof;
switch ($$typeofType) {
case REACT_CONTEXT_TYPE:
case REACT_FORWARD_REF_TYPE:
case REACT_LAZY_TYPE:
case REACT_MEMO_TYPE:
case REACT_PROVIDER_TYPE:
return $$typeofType;
default:
return $$typeof;
}
}
case REACT_PORTAL_TYPE:
return $$typeof;
}
}
return undefined;
} // AsyncMode is deprecated along with isAsyncMode
var AsyncMode = REACT_ASYNC_MODE_TYPE;
var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
var ContextConsumer = REACT_CONTEXT_TYPE;
var ContextProvider = REACT_PROVIDER_TYPE;
var Element = REACT_ELEMENT_TYPE;
var ForwardRef = REACT_FORWARD_REF_TYPE;
var Fragment = REACT_FRAGMENT_TYPE;
var Lazy = REACT_LAZY_TYPE;
var Memo = REACT_MEMO_TYPE;
var Portal = REACT_PORTAL_TYPE;
var Profiler = REACT_PROFILER_TYPE;
var StrictMode = REACT_STRICT_MODE_TYPE;
var Suspense = REACT_SUSPENSE_TYPE;
var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
function isAsyncMode(object) {
{
if (!hasWarnedAboutDeprecatedIsAsyncMode) {
hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
}
}
return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
}
function isConcurrentMode(object) {
return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
}
function isContextConsumer(object) {
return typeOf(object) === REACT_CONTEXT_TYPE;
}
function isContextProvider(object) {
return typeOf(object) === REACT_PROVIDER_TYPE;
}
function isElement(object) {
return _typeof(object) === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
}
function isForwardRef(object) {
return typeOf(object) === REACT_FORWARD_REF_TYPE;
}
function isFragment(object) {
return typeOf(object) === REACT_FRAGMENT_TYPE;
}
function isLazy(object) {
return typeOf(object) === REACT_LAZY_TYPE;
}
function isMemo(object) {
return typeOf(object) === REACT_MEMO_TYPE;
}
function isPortal(object) {
return typeOf(object) === REACT_PORTAL_TYPE;
}
function isProfiler(object) {
return typeOf(object) === REACT_PROFILER_TYPE;
}
function isStrictMode(object) {
return typeOf(object) === REACT_STRICT_MODE_TYPE;
}
function isSuspense(object) {
return typeOf(object) === REACT_SUSPENSE_TYPE;
}
reactIs_development.AsyncMode = AsyncMode;
reactIs_development.ConcurrentMode = ConcurrentMode;
reactIs_development.ContextConsumer = ContextConsumer;
reactIs_development.ContextProvider = ContextProvider;
reactIs_development.Element = Element;
reactIs_development.ForwardRef = ForwardRef;
reactIs_development.Fragment = Fragment;
reactIs_development.Lazy = Lazy;
reactIs_development.Memo = Memo;
reactIs_development.Portal = Portal;
reactIs_development.Profiler = Profiler;
reactIs_development.StrictMode = StrictMode;
reactIs_development.Suspense = Suspense;
reactIs_development.isAsyncMode = isAsyncMode;
reactIs_development.isConcurrentMode = isConcurrentMode;
reactIs_development.isContextConsumer = isContextConsumer;
reactIs_development.isContextProvider = isContextProvider;
reactIs_development.isElement = isElement;
reactIs_development.isForwardRef = isForwardRef;
reactIs_development.isFragment = isFragment;
reactIs_development.isLazy = isLazy;
reactIs_development.isMemo = isMemo;
reactIs_development.isPortal = isPortal;
reactIs_development.isProfiler = isProfiler;
reactIs_development.isStrictMode = isStrictMode;
reactIs_development.isSuspense = isSuspense;
reactIs_development.isValidElementType = isValidElementType;
reactIs_development.typeOf = typeOf;
})();
}
return reactIs_development;
}
var hasRequiredReactIs;
function requireReactIs() {
if (hasRequiredReactIs) return reactIs.exports;
hasRequiredReactIs = 1;
if (process.env.NODE_ENV === 'production') {
reactIs.exports = requireReactIs_production_min();
} else {
reactIs.exports = requireReactIs_development();
}
return reactIs.exports;
}
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
var objectAssign;
var hasRequiredObjectAssign;
function requireObjectAssign() {
if (hasRequiredObjectAssign) return objectAssign;
hasRequiredObjectAssign = 1;
/* eslint-disable no-unused-vars */
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === undefined) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
function shouldUseNative() {
try {
if (!Object.assign) {
return false;
}
// Detect buggy property enumeration order in older V8 versions.
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
test1[5] = 'de';
if (Object.getOwnPropertyNames(test1)[0] === '5') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test2 = {};
for (var i = 0; i < 10; i++) {
test2['_' + String.fromCharCode(i)] = i;
}
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
return test2[n];
});
if (order2.join('') !== '0123456789') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test3 = {};
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
test3[letter] = letter;
});
if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
return false;
}
return true;
} catch (err) {
// We don't expect any of the above to throw, but better to be safe.
return false;
}
}
objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (getOwnPropertySymbols) {
symbols = getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
return objectAssign;
}
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret_1;
var hasRequiredReactPropTypesSecret;
function requireReactPropTypesSecret() {
if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
hasRequiredReactPropTypesSecret = 1;
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
ReactPropTypesSecret_1 = ReactPropTypesSecret;
return ReactPropTypesSecret_1;
}
var has;
var hasRequiredHas;
function requireHas() {
if (hasRequiredHas) return has;
hasRequiredHas = 1;
has = Function.call.bind(Object.prototype.hasOwnProperty);
return has;
}
var checkPropTypes_1;
var hasRequiredCheckPropTypes;
function requireCheckPropTypes() {
if (hasRequiredCheckPropTypes) return checkPropTypes_1;
hasRequiredCheckPropTypes = 1;
var printWarning = function printWarning() {};
if (process.env.NODE_ENV !== 'production') {
var ReactPropTypesSecret = requireReactPropTypesSecret();
var loggedTypeFailures = {};
var has = requireHas();
printWarning = function printWarning(text) {
var message = 'Warning: ' + text;
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch (x) {/**/}
};
}
/**
* Assert that the values match with the type specs.
* Error messages are memorized and will only be shown once.
*
* @param {object} typeSpecs Map of name to a ReactPropType
* @param {object} values Runtime values that need to be type-checked
* @param {string} location e.g. "prop", "context", "child context"
* @param {string} componentName Name of the component for error messages.
* @param {?Function} getStack Returns the component stack.
* @private
*/
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
if (process.env.NODE_ENV !== 'production') {
for (var typeSpecName in typeSpecs) {
if (has(typeSpecs, typeSpecName)) {
var error;
// Prop type validation may throw. In case they do, we don't want to
// fail the render phase where it didn't fail before. So we log it.
// After these have been cleaned up, we'll let them throw.
try {
// This is intentionally an invariant that gets caught. It's the same
// behavior as without this statement except with a better message.
if (typeof typeSpecs[typeSpecName] !== 'function') {
var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + _typeof(typeSpecs[typeSpecName]) + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
err.name = 'Invariant Violation';
throw err;
}
error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
} catch (ex) {
error = ex;
}
if (error && !(error instanceof Error)) {
printWarning((componentName || 'React class') + ': type specification of ' + location + ' `' + typeSpecName + '` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a ' + _typeof(error) + '. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).');
}
if (error instanceof Error && !(error.message in loggedTypeFailures)) {
// Only monitor th