UNPKG

react-konva-grid

Version:

Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets

2 lines 42.8 kB
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{299:function(module,exports,__webpack_require__){__webpack_require__(300),__webpack_require__(446),__webpack_require__(447),__webpack_require__(635),module.exports=__webpack_require__(636)},364:function(module,exports){},447:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(129),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(7);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.addDecorator)(_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_1__.withKnobs)},636:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(129);module._StorybookPreserveDecorators=!0,Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(638)],module)}.call(this,__webpack_require__(637)(module))},638:function(module,exports,__webpack_require__){var map={"./Grid.stories.tsx":683};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=638},683:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"BaseGrid",(function(){return Grid_stories_BaseGrid})),__webpack_require__.d(__webpack_exports__,"BaseGridWithSelection",(function(){return Grid_stories_BaseGridWithSelection})),__webpack_require__.d(__webpack_exports__,"VariableSizeGrid",(function(){return Grid_stories_VariableSizeGrid})),__webpack_require__.d(__webpack_exports__,"LargeGrid",(function(){return Grid_stories_LargeGrid})),__webpack_require__.d(__webpack_exports__,"DataGrid",(function(){return Grid_stories_DataGrid})),__webpack_require__.d(__webpack_exports__,"DataGridResize",(function(){return Grid_stories_DataGridResize})),__webpack_require__.d(__webpack_exports__,"GridWithFrozenRow",(function(){return Grid_stories_GridWithFrozenRow})),__webpack_require__.d(__webpack_exports__,"GridWithFrozenColumns",(function(){return Grid_stories_GridWithFrozenColumns})),__webpack_require__.d(__webpack_exports__,"GridWithFrozenEdges",(function(){return Grid_stories_GridWithFrozenEdges})),__webpack_require__.d(__webpack_exports__,"EditableGrid",(function(){return Grid_stories_EditableGrid}));var react=__webpack_require__(0),react_default=__webpack_require__.n(react),ReactKonvaCore=__webpack_require__(39),itemKey=function itemKey(_ref5){var rowIndex=_ref5.rowIndex,columnIndex=_ref5.columnIndex;return"".concat(rowIndex,":").concat(columnIndex)},getRowOffset=function getRowOffset(_ref6){var index=_ref6.index,rowHeight=_ref6.rowHeight,columnWidth=_ref6.columnWidth,instanceProps=_ref6.instanceProps;return getItemMetadata({itemType:"row",index:index,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps}).offset},getColumnOffset=function getColumnOffset(_ref7){var index=_ref7.index,rowHeight=_ref7.rowHeight,columnWidth=_ref7.columnWidth,instanceProps=_ref7.instanceProps;return getItemMetadata({itemType:"column",index:index,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps}).offset},helpers_getRowHeight=function getRowHeight(index,instanceProps){return instanceProps.rowMetadataMap[index].size},helpers_getColumnWidth=function getColumnWidth(index,instanceProps){return instanceProps.columnMetadataMap[index].size},getItemMetadata=function getItemMetadata(_ref8){var itemMetadataMap,itemSize,lastMeasuredIndex,itemType=_ref8.itemType,index=_ref8.index,rowHeight=_ref8.rowHeight,columnWidth=_ref8.columnWidth,instanceProps=_ref8.instanceProps;if("column"===itemType?(itemMetadataMap=instanceProps.columnMetadataMap,itemSize=columnWidth,lastMeasuredIndex=instanceProps.lastMeasuredColumnIndex):(itemMetadataMap=instanceProps.rowMetadataMap,itemSize=rowHeight,lastMeasuredIndex=instanceProps.lastMeasuredRowIndex),index>lastMeasuredIndex){var offset=0;if(lastMeasuredIndex>=0){var itemMetadata=itemMetadataMap[lastMeasuredIndex];offset=itemMetadata.offset+itemMetadata.size}for(var i=lastMeasuredIndex+1;i<=index;i++){var size=itemSize(i);itemMetadataMap[i]={offset:offset,size:size},offset+=size}"column"===itemType?instanceProps.lastMeasuredColumnIndex=index:instanceProps.lastMeasuredRowIndex=index}return itemMetadataMap[index]},findNearestItem=function findNearestItem(_ref9){var itemMetadataMap,lastMeasuredIndex,itemType=_ref9.itemType,rowHeight=_ref9.rowHeight,columnWidth=_ref9.columnWidth,rowCount=_ref9.rowCount,columnCount=_ref9.columnCount,instanceProps=_ref9.instanceProps,offset=_ref9.offset;return"column"===itemType?(itemMetadataMap=instanceProps.columnMetadataMap,lastMeasuredIndex=instanceProps.lastMeasuredColumnIndex):(itemMetadataMap=instanceProps.rowMetadataMap,lastMeasuredIndex=instanceProps.lastMeasuredRowIndex),(lastMeasuredIndex>0?itemMetadataMap[lastMeasuredIndex].offset:0)>=offset?findNearestItemBinarySearch({itemType:itemType,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps,high:lastMeasuredIndex,low:0,offset:offset}):findNearestItemExponentialSearch({itemType:itemType,rowHeight:rowHeight,rowCount:rowCount,columnCount:columnCount,columnWidth:columnWidth,instanceProps:instanceProps,index:Math.max(0,lastMeasuredIndex),offset:offset})},findNearestItemBinarySearch=function findNearestItemBinarySearch(_ref10){for(var itemType=_ref10.itemType,rowHeight=_ref10.rowHeight,columnWidth=_ref10.columnWidth,instanceProps=_ref10.instanceProps,high=_ref10.high,low=_ref10.low,offset=_ref10.offset;low<=high;){var middle=low+Math.floor((high-low)/2),currentOffset=getItemMetadata({itemType:itemType,rowHeight:rowHeight,columnWidth:columnWidth,index:middle,instanceProps:instanceProps}).offset;if(currentOffset===offset)return middle;currentOffset<offset?low=middle+1:currentOffset>offset&&(high=middle-1)}return low>0?low-1:0},findNearestItemExponentialSearch=function findNearestItemExponentialSearch(_ref11){for(var itemType=_ref11.itemType,rowHeight=_ref11.rowHeight,columnWidth=_ref11.columnWidth,rowCount=_ref11.rowCount,columnCount=_ref11.columnCount,instanceProps=_ref11.instanceProps,index=_ref11.index,offset=_ref11.offset,itemCount="column"===itemType?columnCount:rowCount,interval=1;index<itemCount&&getItemMetadata({itemType:itemType,rowHeight:rowHeight,columnWidth:columnWidth,index:index,instanceProps:instanceProps}).offset<offset;)index+=interval,interval*=2;return findNearestItemBinarySearch({itemType:itemType,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps,high:Math.min(index,itemCount-1),low:Math.floor(index/2),offset:offset})};function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||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 _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}var defaultProps={width:800,height:800,rowCount:200,columnCount:200,rowHeight:function defaultRowHeight(){return 20},columnWidth:function defaultColumnWidth(){return 100},scrollbarSize:17,showScrollbar:!0,selectionBackgroundColor:"rgb(14, 101, 235, 0.1)",selectionBorderColor:"#1a73e8",selections:[],frozenRows:0,frozenColumns:0},Grid=Object(react.memo)(Object(react.forwardRef)((function(props,forwardedRef){var containerWidth=props.width,containerHeight=props.height,estimatedColumnWidth=props.estimatedColumnWidth,estimatedRowHeight=props.estimatedRowHeight,rowHeight=props.rowHeight,columnWidth=props.columnWidth,rowCount=props.rowCount,columnCount=props.columnCount,scrollbarSize=props.scrollbarSize,onScroll=(props.children,props.onScroll),showScrollbar=props.showScrollbar,selectionBackgroundColor=props.selectionBackgroundColor,selectionBorderColor=props.selectionBorderColor,selections=props.selections,frozenRows=props.frozenRows,frozenColumns=props.frozenColumns,itemRenderer=props.itemRenderer;Object(react.useImperativeHandle)(forwardedRef,(function(){return{scrollTo:scrollTo,stage:stageRef.current,resetAfterIndices:resetAfterIndices,getScrollPosition:getScrollPosition}}));var instanceProps=Object(react.useRef)({columnMetadataMap:{},rowMetadataMap:{},lastMeasuredColumnIndex:-1,lastMeasuredRowIndex:-1,estimatedColumnWidth:estimatedColumnWidth||50,estimatedRowHeight:estimatedRowHeight||50}),stageRef=Object(react.useRef)(null),verticalScrollRef=Object(react.useRef)(null),wheelingRef=Object(react.useRef)(null),horizontalScrollRef=Object(react.useRef)(null),_useReducer2=_slicedToArray(Object(react.useReducer)((function(s){return s+1}),0),2),forceRender=(_useReducer2[0],_useReducer2[1]),_useState2=_slicedToArray(Object(react.useState)(0),2),scrollTop=_useState2[0],setScrollTop=_useState2[1],_useState4=_slicedToArray(Object(react.useState)(0),2),scrollLeft=_useState4[0],setScrollLeft=_useState4[1],getScrollPosition=Object(react.useCallback)((function(){return{scrollTop:scrollTop,scrollLeft:scrollLeft}}),[scrollTop,scrollLeft]),resetAfterIndices=Object(react.useCallback)((function(_ref){var columnIndex=_ref.columnIndex,rowIndex=_ref.rowIndex,_ref$shouldForceUpdat=_ref.shouldForceUpdate,shouldForceUpdate=void 0===_ref$shouldForceUpdat||_ref$shouldForceUpdat;"number"==typeof columnIndex&&(instanceProps.current.lastMeasuredColumnIndex=Math.min(instanceProps.current.lastMeasuredColumnIndex,columnIndex-1)),"number"==typeof rowIndex&&(instanceProps.current.lastMeasuredRowIndex=Math.min(instanceProps.current.lastMeasuredRowIndex,rowIndex-1)),shouldForceUpdate&&forceRender()}),[]),handleScroll=Object(react.useCallback)((function(e){setScrollTop(e.target.scrollTop),onScroll&&onScroll({scrollTop:e.target.scrollTop,scrollLeft:scrollLeft})}),[scrollLeft]),handleScrollLeft=Object(react.useCallback)((function(e){setScrollLeft(e.target.scrollLeft),onScroll&&onScroll({scrollLeft:e.target.scrollLeft,scrollTop:scrollTop})}),[scrollTop]),scrollTo=Object(react.useCallback)((function(_ref2){var scrollTop=_ref2.scrollTop,scrollLeft=_ref2.scrollLeft;showScrollbar?(horizontalScrollRef.current&&(horizontalScrollRef.current.scrollLeft=scrollLeft),verticalScrollRef.current&&(verticalScrollRef.current.scrollTop=scrollTop)):(void 0!==scrollLeft&&setScrollLeft(scrollLeft),void 0!==scrollTop&&setScrollTop(scrollTop))}),[showScrollbar]),handleWheel=Object(react.useCallback)((function(event){var _horizontalScrollRef$,_verticalScrollRef$cu;if(!wheelingRef.current){var _event$nativeEvent=event.nativeEvent,deltaX=_event$nativeEvent.deltaX,deltaY=_event$nativeEvent.deltaY,deltaMode=_event$nativeEvent.deltaMode,dx=deltaX,dy=deltaY;if(1===deltaMode&&(dy*=17),horizontalScrollRef.current&&verticalScrollRef.current){var x=null===(_horizontalScrollRef$=horizontalScrollRef.current)||void 0===_horizontalScrollRef$?void 0:_horizontalScrollRef$.scrollLeft,y=null===(_verticalScrollRef$cu=verticalScrollRef.current)||void 0===_verticalScrollRef$cu?void 0:_verticalScrollRef$cu.scrollTop;wheelingRef.current=window.requestAnimationFrame((function(){wheelingRef.current=null,horizontalScrollRef.current&&(horizontalScrollRef.current.scrollLeft=x+dx),verticalScrollRef.current&&(verticalScrollRef.current.scrollTop=y+dy)}))}}}),[]),rowStartIndex=function getRowStartIndexForOffset(_ref){var rowHeight=_ref.rowHeight,columnWidth=_ref.columnWidth,rowCount=_ref.rowCount,columnCount=_ref.columnCount,instanceProps=_ref.instanceProps,offset=_ref.offset;return findNearestItem({itemType:"row",rowHeight:rowHeight,columnWidth:columnWidth,rowCount:rowCount,columnCount:columnCount,instanceProps:instanceProps,offset:offset})}({rowHeight:rowHeight,columnWidth:columnWidth,rowCount:rowCount,columnCount:columnCount,instanceProps:instanceProps.current,offset:scrollTop}),rowStopIndex=function getRowStopIndexForStartIndex(_ref2){for(var startIndex=_ref2.startIndex,rowCount=_ref2.rowCount,rowHeight=_ref2.rowHeight,columnWidth=_ref2.columnWidth,scrollTop=_ref2.scrollTop,containerHeight=_ref2.containerHeight,instanceProps=_ref2.instanceProps,itemMetadata=getItemMetadata({itemType:"row",rowHeight:rowHeight,columnWidth:columnWidth,index:startIndex,instanceProps:instanceProps}),maxOffset=scrollTop+containerHeight,offset=itemMetadata.offset+itemMetadata.size,stopIndex=startIndex;stopIndex<rowCount-1&&offset<maxOffset;)stopIndex++,offset+=getItemMetadata({itemType:"row",rowHeight:rowHeight,columnWidth:columnWidth,index:stopIndex,instanceProps:instanceProps}).size;return stopIndex}({startIndex:rowStartIndex,rowCount:rowCount,rowHeight:rowHeight,columnWidth:columnWidth,scrollTop:scrollTop,containerHeight:containerHeight,instanceProps:instanceProps.current}),columnStartIndex=function getColumnStartIndexForOffset(_ref3){var rowHeight=_ref3.rowHeight,columnWidth=_ref3.columnWidth,rowCount=_ref3.rowCount,columnCount=_ref3.columnCount,instanceProps=_ref3.instanceProps,offset=_ref3.offset;return findNearestItem({itemType:"column",rowHeight:rowHeight,columnWidth:columnWidth,rowCount:rowCount,columnCount:columnCount,instanceProps:instanceProps,offset:offset})}({rowHeight:rowHeight,columnWidth:columnWidth,rowCount:rowCount,columnCount:columnCount,instanceProps:instanceProps.current,offset:scrollLeft}),columnStopIndex=function getColumnStopIndexForStartIndex(_ref4){for(var startIndex=_ref4.startIndex,rowHeight=_ref4.rowHeight,columnWidth=_ref4.columnWidth,instanceProps=_ref4.instanceProps,containerWidth=_ref4.containerWidth,scrollLeft=_ref4.scrollLeft,columnCount=_ref4.columnCount,itemMetadata=getItemMetadata({itemType:"column",index:startIndex,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps}),maxOffset=scrollLeft+containerWidth,offset=itemMetadata.offset+itemMetadata.size,stopIndex=startIndex;stopIndex<columnCount-1&&offset<maxOffset;)stopIndex++,offset+=getItemMetadata({itemType:"column",rowHeight:rowHeight,columnWidth:columnWidth,index:stopIndex,instanceProps:instanceProps}).size;return stopIndex}({startIndex:columnStartIndex,columnCount:columnCount,rowHeight:rowHeight,columnWidth:columnWidth,scrollLeft:scrollLeft,containerWidth:containerWidth,instanceProps:instanceProps.current}),estimatedTotalHeight=function getEstimatedTotalHeight(rowCount,estimatedRowHeight,instanceProps){var totalSizeOfMeasuredRows=0,lastMeasuredRowIndex=instanceProps.lastMeasuredRowIndex,rowMetadataMap=instanceProps.rowMetadataMap;if(lastMeasuredRowIndex>=rowCount&&(lastMeasuredRowIndex=rowCount-1),lastMeasuredRowIndex>=0){var itemMetadata=rowMetadataMap[lastMeasuredRowIndex];totalSizeOfMeasuredRows=itemMetadata.offset+itemMetadata.size}return totalSizeOfMeasuredRows+(rowCount-lastMeasuredRowIndex-1)*estimatedRowHeight}(rowCount,instanceProps.current.estimatedRowHeight,instanceProps.current),estimatedTotalWidth=function getEstimatedTotalWidth(columnCount,estimatedColumnWidth,instanceProps){var totalSizeOfMeasuredRows=0,lastMeasuredColumnIndex=instanceProps.lastMeasuredColumnIndex,columnMetadataMap=instanceProps.columnMetadataMap;if(lastMeasuredColumnIndex>=columnCount&&(lastMeasuredColumnIndex=columnCount-1),lastMeasuredColumnIndex>=0){var itemMetadata=columnMetadataMap[lastMeasuredColumnIndex];totalSizeOfMeasuredRows=itemMetadata.offset+itemMetadata.size}return totalSizeOfMeasuredRows+(columnCount-lastMeasuredColumnIndex-1)*estimatedColumnWidth}(columnCount,instanceProps.current.estimatedColumnWidth,instanceProps.current),cells=[];if(columnCount>0&&rowCount)for(var rowIndex=rowStartIndex;rowIndex<=rowStopIndex;rowIndex++)for(var columnIndex=columnStartIndex;columnIndex<=columnStopIndex;columnIndex++){var width=helpers_getColumnWidth(columnIndex,instanceProps.current),x=getColumnOffset({index:columnIndex,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current}),height=helpers_getRowHeight(rowIndex,instanceProps.current),y=getRowOffset({index:rowIndex,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current});cells.push(itemRenderer({x:x,y:y,width:width,height:height,rowIndex:rowIndex,columnIndex:columnIndex,key:itemKey({rowIndex:rowIndex,columnIndex:columnIndex})}))}for(var frozenRowCells=[],_rowIndex=0;_rowIndex<Math.min(columnStopIndex,frozenRows);_rowIndex++)for(var _columnIndex=columnStartIndex;_columnIndex<=columnStopIndex;_columnIndex++){var _width=helpers_getColumnWidth(_columnIndex,instanceProps.current),_x=getColumnOffset({index:_columnIndex,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current}),_height=helpers_getRowHeight(_rowIndex,instanceProps.current),_y=getRowOffset({index:_rowIndex,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current});frozenRowCells.push(itemRenderer({x:_x,y:_y,width:_width,height:_height,rowIndex:_rowIndex,columnIndex:_columnIndex,key:itemKey({rowIndex:_rowIndex,columnIndex:_columnIndex})}))}for(var frozenColumnCells=[],_columnIndex2=0;_columnIndex2<Math.min(columnStopIndex,frozenColumns);_columnIndex2++)for(var _rowIndex2=rowStartIndex;_rowIndex2<=rowStopIndex;_rowIndex2++){var _width2=helpers_getColumnWidth(_columnIndex2,instanceProps.current),_x2=getColumnOffset({index:_columnIndex2,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current}),_height2=helpers_getRowHeight(_rowIndex2,instanceProps.current),_y2=getRowOffset({index:_rowIndex2,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current});frozenColumnCells.push(itemRenderer({x:_x2,y:_y2,width:_width2,height:_height2,rowIndex:_rowIndex2,columnIndex:_columnIndex2,key:itemKey({rowIndex:_rowIndex2,columnIndex:_columnIndex2})}))}for(var frozenIntersectionCells=[],_rowIndex3=0;_rowIndex3<Math.min(rowStopIndex,frozenRows);_rowIndex3++)for(var _columnIndex3=0;_columnIndex3<Math.min(columnStopIndex,frozenColumns);_columnIndex3++){var _width3=helpers_getColumnWidth(_columnIndex3,instanceProps.current),_x3=getColumnOffset({index:_columnIndex3,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current}),_height3=helpers_getRowHeight(_rowIndex3,instanceProps.current),_y3=getRowOffset({index:_rowIndex3,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current});frozenIntersectionCells.push(itemRenderer({x:_x3,y:_y3,width:_width3,height:_height3,rowIndex:_rowIndex3,columnIndex:_columnIndex3,key:itemKey({rowIndex:_rowIndex3,columnIndex:_columnIndex3})}))}var selectionAreas=Object(react.useMemo)((function(){for(var areas=[],i=0;i<selections.length;i++){var _selections$i=selections[i],top=_selections$i.top,left=_selections$i.left,right=_selections$i.right,bottom=_selections$i.bottom,selectionBounds={x:0,y:0,width:0,height:0},actualBottom=Math.min(rowStopIndex,bottom),actualRight=Math.min(columnStopIndex,right);selectionBounds.y=getRowOffset({index:top,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current}),selectionBounds.height=getRowOffset({index:actualBottom,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current})-selectionBounds.y+helpers_getRowHeight(actualBottom,instanceProps.current),selectionBounds.x=getColumnOffset({index:left,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current}),selectionBounds.width=getColumnOffset({index:actualRight,rowHeight:rowHeight,columnWidth:columnWidth,instanceProps:instanceProps.current})-selectionBounds.x+helpers_getColumnWidth(actualRight,instanceProps.current),areas.push(react_default.a.createElement(ReactKonvaCore.Rect,{key:i,stroke:selectionBorderColor,x:selectionBounds.x,y:selectionBounds.y,width:selectionBounds.width,height:selectionBounds.height,fill:selectionBackgroundColor,shadowForStrokeEnabled:!1,listening:!1,hitStrokeWidth:0}))}return areas}),[selections,rowStopIndex,columnStopIndex]);return react_default.a.createElement("div",{style:{position:"relative",width:containerWidth}},react_default.a.createElement("div",{onWheel:handleWheel,tabIndex:-1},react_default.a.createElement(ReactKonvaCore.Stage,{width:containerWidth,height:containerHeight,ref:stageRef},react_default.a.createElement(ReactKonvaCore.Layer,{clearBeforeDraw:!1},react_default.a.createElement(ReactKonvaCore.Group,{offsetY:scrollTop,offsetX:scrollLeft},cells),react_default.a.createElement(ReactKonvaCore.Group,{offsetY:scrollTop,offsetX:0},frozenColumnCells),react_default.a.createElement(ReactKonvaCore.Group,{offsetY:0,offsetX:scrollLeft},frozenRowCells),react_default.a.createElement(ReactKonvaCore.Group,{offsetY:0,offsetX:0},frozenIntersectionCells)),react_default.a.createElement(ReactKonvaCore.FastLayer,{listening:!1,offsetY:scrollTop,offsetX:scrollLeft,hitGraphEnabled:!1},selectionAreas))),showScrollbar?react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement("div",{style:{height:containerHeight,overflow:"scroll",position:"absolute",right:0,top:0,width:scrollbarSize},onScroll:handleScroll,ref:verticalScrollRef},react_default.a.createElement("div",{style:{position:"absolute",height:estimatedTotalHeight,width:1}})),react_default.a.createElement("div",{style:{overflow:"scroll",position:"absolute",bottom:0,left:0,width:containerWidth,height:scrollbarSize},onScroll:handleScrollLeft,ref:horizontalScrollRef},react_default.a.createElement("div",{style:{position:"absolute",width:estimatedTotalWidth,height:1}}))):null)})));Grid.defaultProps=defaultProps;var src_Grid=Grid,ReactKonva=__webpack_require__(9),dist=__webpack_require__(7);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Grid_stories_slicedToArray(arr,i){return function Grid_stories_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function Grid_stories_iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function Grid_stories_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return Grid_stories_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Grid_stories_arrayLikeToArray(o,minLen)}(arr,i)||function Grid_stories_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 Grid_stories_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}__webpack_exports__.default={title:"Grid",component:src_Grid};var Grid_stories_BaseGrid=function BaseGrid(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600),Cell=function Cell(_ref){var rowIndex=_ref.rowIndex,columnIndex=_ref.columnIndex,x=_ref.x,y=_ref.y,width=_ref.width,height=_ref.height,text="".concat(rowIndex,"x").concat(columnIndex);return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))},App=function App(){return react_default.a.createElement(src_Grid,{width:width,height:height,columnCount:200,rowCount:200,columnWidth:function columnWidth(index){return 100},itemRenderer:function itemRenderer(props){return react_default.a.createElement(Cell,props)},rowHeight:function rowHeight(index){return 20}})};return react_default.a.createElement(App,null)},Grid_stories_BaseGridWithSelection=function BaseGridWithSelection(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600);return react_default.a.createElement(src_Grid,{width:width,height:height,selections:[{top:2,right:3,left:2,bottom:20},{top:2,right:5,left:5,bottom:20}],columnCount:200,rowCount:200,columnWidth:function columnWidth(index){return 100},rowHeight:function rowHeight(index){return 20},itemRenderer:function Cell(_ref2){var rowIndex=_ref2.rowIndex,columnIndex=_ref2.columnIndex,x=_ref2.x,y=_ref2.y,width=_ref2.width,height=_ref2.height,text="".concat(rowIndex,"x").concat(columnIndex);return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))}})},Grid_stories_VariableSizeGrid=function VariableSizeGrid(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600);return react_default.a.createElement(src_Grid,{width:width,height:height,columnCount:200,rowCount:200,columnWidth:function columnWidth(index){return index%3==0?200:100},rowHeight:function rowHeight(index){return index%2==0?40:20},itemRenderer:function Cell(_ref3){var rowIndex=_ref3.rowIndex,columnIndex=_ref3.columnIndex,x=_ref3.x,y=_ref3.y,width=_ref3.width,height=_ref3.height,text="".concat(rowIndex,"x").concat(columnIndex);return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))}})},Grid_stories_LargeGrid=function LargeGrid(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600);return react_default.a.createElement(src_Grid,{width:width,height:height,columnCount:1e6,rowCount:1e6,columnWidth:function columnWidth(index){return index%3==0?200:100},rowHeight:function rowHeight(index){return index%2==0?40:20},itemRenderer:function Cell(_ref4){var rowIndex=_ref4.rowIndex,columnIndex=_ref4.columnIndex,x=_ref4.x,y=_ref4.y,width=_ref4.width,height=_ref4.height,text="".concat(rowIndex,"x").concat(columnIndex),fill=columnIndex%2==0?rowIndex%2==0?"#f8f8f0":"white":rowIndex%2?"#f8f8f0":"white";return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:fill,stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))}})};Grid_stories_LargeGrid.story={name:"1,000,000 rows and cols"};var Grid_stories_DataGrid=function DataGrid(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600),gridRef=Object(react.useRef)(),frozenColumns=Object(dist.number)("frozenColumns",1),Cell=function Cell(_ref5){var rowIndex=_ref5.rowIndex,columnIndex=_ref5.columnIndex,x=_ref5.x,y=_ref5.y,width=_ref5.width,height=_ref5.height,header=_ref5.header,text=header?columnIndex<frozenColumns?"S/No":"Header ".concat(columnIndex):"".concat(rowIndex,"x").concat(columnIndex),fill=header?"#eee":"white";return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:fill,stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,fontStyle:header?"bold":"normal",verticalAlign:"middle",align:"center"}))};return react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement(src_Grid,{columnCount:1e5,height:40,rowCount:1,frozenColumns:frozenColumns,ref:gridRef,width:width,columnWidth:function columnWidth(index){return 0===index?80:index%3==0?200:100},rowHeight:function rowHeight(index){return index%2==0?40:20},showScrollbar:!1,itemRenderer:function itemRenderer(props){return react_default.a.createElement(Cell,_extends({},props,{header:!0}))}}),react_default.a.createElement(src_Grid,{columnCount:1e5,rowCount:1e5,frozenColumns:frozenColumns,height:height,width:width,columnWidth:function columnWidth(index){return 0===index?80:index%3==0?200:100},rowHeight:function rowHeight(index){return index%2==0?40:20},onScroll:function onScroll(_ref6){var scrollLeft=_ref6.scrollLeft;gridRef.current.scrollTo({scrollLeft:scrollLeft})},itemRenderer:Cell}))},Grid_stories_DataGridResize=function DataGridResize(){var DraggableRect=function DraggableRect(props){return react_default.a.createElement(ReactKonva.Rect,_extends({fill:"blue",draggable:!0,dragBoundFunc:function dragBoundFunc(pos){return _objectSpread(_objectSpread({},pos),{},{y:0})}},props))},HeaderComponent=function HeaderComponent(_ref7){_ref7.rowIndex;var columnIndex=_ref7.columnIndex,x=_ref7.x,y=_ref7.y,width=_ref7.width,height=_ref7.height,key=_ref7.key,frozenColumns=_ref7.frozenColumns,onResize=_ref7.onResize,text=columnIndex<frozenColumns?"S/No":"Header ".concat(columnIndex);return react_default.a.createElement(ReactKonva.Group,{key:key},react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:"#eee",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,fontStyle:"bold",verticalAlign:"middle",align:"center"}),react_default.a.createElement(DraggableRect,{x:x+width-5,y:y,width:5,height:height,onDragMove:function onDragMove(e){var newWidth=e.target.x()-x+5;onResize(columnIndex,newWidth)}}))},Cell=function Cell(_ref8){var rowIndex=_ref8.rowIndex,columnIndex=_ref8.columnIndex,x=_ref8.x,y=_ref8.y,width=_ref8.width,height=_ref8.height,text="".concat(rowIndex,"x").concat(columnIndex);return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,fontStyle:"normal",verticalAlign:"middle",align:"center"}))},App=function App(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600),gridRef=Object(react.useRef)(),mainGridRef=Object(react.useRef)(),frozenColumns=Object(dist.number)("frozenColumns",1),_useState2=Grid_stories_slicedToArray(Object(react.useState)({}),2),columnWidthMap=_useState2[0],setColumnWidthMap=_useState2[1],handleResize=function handleResize(columnIndex,newWidth){setColumnWidthMap((function(prev){return _objectSpread(_objectSpread({},prev),{},_defineProperty({},columnIndex,newWidth))})),gridRef.current.resetAfterIndices({columnIndex:columnIndex}),mainGridRef.current.resetAfterIndices({columnIndex:columnIndex})};return react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column"}},react_default.a.createElement(src_Grid,{columnCount:1e5,height:40,rowCount:1,frozenColumns:frozenColumns,ref:gridRef,width:width,columnWidth:function columnWidth(index){return index in columnWidthMap?columnWidthMap[index]:0===index?80:index%3==0?200:100},rowHeight:function rowHeight(index){return index%2==0?40:20},showScrollbar:!1,itemRenderer:function itemRenderer(props){return react_default.a.createElement(HeaderComponent,_extends({onResize:handleResize,frozenColumns:frozenColumns},props))}}),react_default.a.createElement(src_Grid,{columnCount:1e5,rowCount:1e5,frozenColumns:frozenColumns,height:height,width:width,ref:mainGridRef,columnWidth:function columnWidth(index){return index in columnWidthMap?columnWidthMap[index]:0===index?80:index%3==0?200:100},rowHeight:function rowHeight(index){return index%2==0?40:20},onScroll:function onScroll(_ref9){var scrollLeft=_ref9.scrollLeft;gridRef.current.scrollTo({scrollLeft:scrollLeft})},itemRenderer:Cell}))};return react_default.a.createElement(App,null)};Grid_stories_DataGridResize.story={name:"Grid with resizable headers"};var Grid_stories_GridWithFrozenRow=function GridWithFrozenRow(){var frozenRows=Object(dist.number)("frozenRows",1),width=Object(dist.number)("width",900),height=Object(dist.number)("height",600);return react_default.a.createElement(src_Grid,{width:width,height:height,columnCount:200,rowCount:200,frozenRows:frozenRows,columnWidth:function columnWidth(index){return 100},rowHeight:function rowHeight(index){return 20},itemRenderer:function Cell(_ref10){var rowIndex=_ref10.rowIndex,columnIndex=_ref10.columnIndex,x=_ref10.x,y=_ref10.y,width=_ref10.width,height=_ref10.height,text="".concat(rowIndex,"x").concat(columnIndex),isFrozen=rowIndex<frozenRows;return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:isFrozen?"lightblue":"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))}})};Grid_stories_GridWithFrozenRow.story={name:"Frozen rows"};var Grid_stories_GridWithFrozenColumns=function GridWithFrozenColumns(){var frozenColumns=Object(dist.number)("frozenColumns",1),width=Object(dist.number)("width",900),height=Object(dist.number)("height",600);return react_default.a.createElement(src_Grid,{width:width,height:height,columnCount:200,rowCount:200,frozenColumns:frozenColumns,columnWidth:function columnWidth(index){return 100},rowHeight:function rowHeight(index){return 20},itemRenderer:function Cell(_ref11){var rowIndex=_ref11.rowIndex,columnIndex=_ref11.columnIndex,x=_ref11.x,y=_ref11.y,width=_ref11.width,height=_ref11.height,text="".concat(rowIndex,"x").concat(columnIndex),isFrozen=columnIndex<frozenColumns;return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:isFrozen?"lightblue":"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))}})};Grid_stories_GridWithFrozenColumns.story={name:"Frozen columns"};var Grid_stories_GridWithFrozenEdges=function GridWithFrozenEdges(){var frozenRows=Object(dist.number)("frozenRows",1),frozenColumns=Object(dist.number)("frozenColumns",1),width=Object(dist.number)("width",900),height=Object(dist.number)("height",600);return react_default.a.createElement(src_Grid,{width:width,height:height,columnCount:200,rowCount:200,frozenColumns:frozenColumns,frozenRows:frozenRows,columnWidth:function columnWidth(index){return 100},rowHeight:function rowHeight(index){return 20},itemRenderer:function Cell(_ref12){var rowIndex=_ref12.rowIndex,columnIndex=_ref12.columnIndex,x=_ref12.x,y=_ref12.y,width=_ref12.width,height=_ref12.height,text="".concat(rowIndex,"x").concat(columnIndex),isFrozen=rowIndex<frozenRows||columnIndex<frozenColumns;return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:isFrozen?"lightblue":"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))}})};Grid_stories_GridWithFrozenEdges.story={name:"Frozen columns and rows"};var Grid_stories_EditableGrid=function EditableGrid(){var getColumnWidth=function getColumnWidth(columnIndex){return 100},getRowHeight=function getRowHeight(columnIndex){return 20},Cell=function Cell(_ref13){var rowIndex=_ref13.rowIndex,columnIndex=_ref13.columnIndex,x=_ref13.x,y=_ref13.y,width=_ref13.width,height=_ref13.height,data=_ref13.data,onSelect=_ref13.onSelect,onDblClick=_ref13.onDblClick,text=data[[rowIndex,columnIndex].toString()]||"".concat(rowIndex,"x").concat(columnIndex);return react_default.a.createElement(ReactKonva.Group,{columnIndex:columnIndex,rowIndex:rowIndex,onDblClick:onDblClick,onMouseDown:onSelect},react_default.a.createElement(ReactKonva.Rect,{x:x,y:y,height:height,width:width,fill:"white",stroke:"grey",strokeWidth:.5}),react_default.a.createElement(ReactKonva.Text,{x:x,y:y,height:height,width:width,text:text,verticalAlign:"middle",align:"center"}))},Input=function Input(_ref14){var onChange=_ref14.onChange,props=_objectWithoutProperties(_ref14,["onChange"]),inputRef=Object(react.useRef)();return Object(react.useEffect)((function(){inputRef.current&&(inputRef.current.focus(),inputRef.current.select())}),[]),react_default.a.createElement("input",_extends({type:"text",ref:inputRef,onChange:onChange},props))},App=function App(){var width=Object(dist.number)("width",900),height=Object(dist.number)("height",600),gridRef=Object(react.useRef)(),_useState4=Grid_stories_slicedToArray(Object(react.useState)(_defineProperty({},[1,2].toString(),2)),2),data=_useState4[0],setData=_useState4[1],_useState7=Grid_stories_slicedToArray(Object(react.useState)([]),2),selections=_useState7[0],setSelections=_useState7[1],_useState9=Grid_stories_slicedToArray(Object(react.useState)(!1),2),showEditInput=_useState9[0],setShowEditInput=_useState9[1],_useState11=Grid_stories_slicedToArray(Object(react.useState)({x:0,y:0,width:0,height:0,rowIndex:null,columnIndex:null,value:""}),2),editPosition=_useState11[0],setEditPosition=_useState11[1],_useState13=Grid_stories_slicedToArray(Object(react.useState)({scrollLeft:0,scrollTop:0}),2),scrollPosition=_useState13[0],setScrollPosition=_useState13[1],handleSelect=function handleSelect(e){var _e$currentTarget$attr=e.currentTarget.attrs,rowIndex=_e$currentTarget$attr.rowIndex,columnIndex=_e$currentTarget$attr.columnIndex;setSelections([{top:rowIndex,left:columnIndex,bottom:rowIndex,right:columnIndex}])},handleDblClick=function handleDblClick(e){var _e$currentTarget$attr2=e.currentTarget.attrs,rowIndex=_e$currentTarget$attr2.rowIndex,columnIndex=_e$currentTarget$attr2.columnIndex,node=e.target,width=node.width(),x=node.x(),y=node.y(),height=node.height();setScrollPosition(gridRef.current.getScrollPosition()),setEditPosition({x:x,y:y,width:width,height:height,rowIndex:rowIndex,columnIndex:columnIndex,value:data[[rowIndex,columnIndex].toString()]||""}),setShowEditInput(!0)};return react_default.a.createElement("div",{style:{position:"relative"}},react_default.a.createElement(src_Grid,{ref:gridRef,width:width,height:height,columnCount:200,rowCount:200,columnWidth:getColumnWidth,rowHeight:getRowHeight,selections:selections,itemRenderer:function itemRenderer(props){return react_default.a.createElement(Cell,_extends({onSelect:handleSelect,onDblClick:handleDblClick,data:data},props))},onScroll:setScrollPosition}),showEditInput&&react_default.a.createElement(Input,{onChange:function onChange(e){var value=e.target.value;setEditPosition((function(prevData){return _objectSpread(_objectSpread({},prevData),{},{value:value})}))},value:editPosition.value,onBlur:function onBlur(){setShowEditInput(!1)},style:{position:"absolute",left:showEditInput?editPosition.x:-2e3,top:showEditInput?editPosition.y:-2e3,transform:"translate3d(-".concat(scrollPosition.scrollLeft,"px, -").concat(scrollPosition.scrollTop,"px, 0)"),height:editPosition.height,width:editPosition.width,margin:0,padding:"0 5px",boxSizing:"border-box",border:"1px rgba(66, 133, 244, 1) solid",outline:"none",zIndex:10},onKeyDown:function onKeyDown(e){if(13===e.which){var value=editPosition.value;setData((function(prevData){return _objectSpread(_objectSpread({},prevData),{},_defineProperty({},[editPosition.rowIndex,editPosition.columnIndex].toString(),value))})),setShowEditInput(!1)}}}))};return react_default.a.createElement(App,null)};Grid_stories_EditableGrid.story={name:"Editable grid"}}},[[299,1,2]]]); //# sourceMappingURL=main.d28d6105ec691200f52b.bundle.js.map