-
Notifications
You must be signed in to change notification settings - Fork 0
/
Scrollable-stories.cd69c33e.iframe.bundle.js
2 lines (2 loc) · 19.6 KB
/
Scrollable-stories.cd69c33e.iframe.bundle.js
1
2
/*! For license information please see Scrollable-stories.cd69c33e.iframe.bundle.js.LICENSE.txt */
"use strict";(self.webpackChunkstorybook=self.webpackChunkstorybook||[]).push([[380],{"./src/Scrollable.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ScrollPaneTemplate:()=>ScrollPaneTemplate,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_sheetxl_common_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../packages/common-react/src/scroll/Scrollbar.tsx"),_sheetxl_common_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../packages/common-react/src/scroll/ScrollPane.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("./src/storybook-panels.css"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const createRedScrollbar=props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_sheetxl_common_react__WEBPACK_IMPORTED_MODULE_3__.Ze,{style:{border:"red solid 3px"},...props});createRedScrollbar.displayName="createRedScrollbar";const createCustomCorner=({width,height})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("button",{style:{minWidth:`${width}px`,width:`${width}px`,minHeight:`${height}px`,height:`${height}px`,background:"green",border:"blue solid 2px"}});createCustomCorner.displayName="createCustomCorner";const Template=props=>{const{showVerticalScrollbar,showHorizontalScrollbar,createHorizontalScrollbar,createVerticalScrollbar,createScrollCorner,...rest}=props,scrollPaneProps=rest,refScrollPane=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(),[viewport,setViewport]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({left:0,top:0,width:100,height:100,totalWidth:1e3,totalHeight:1e3});return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:"storybook-container",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_sheetxl_common_react__WEBPACK_IMPORTED_MODULE_4__.Gr,{...scrollPaneProps,viewport,onScrollViewport:scrollPoint=>{setViewport((prev=>({...prev,top:scrollPoint.top??prev.top,left:scrollPoint.left??prev.left})))},ref:refScrollPane,showVerticalScrollbar,showHorizontalScrollbar,createHorizontalScrollbar,createVerticalScrollbar,createScrollCorner,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{border:"1px solid green",width:"100%",height:"100%",background:"pink",overflow:"hidden"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("button",{style:{position:"relative",left:650-viewport.left+"px",top:550-viewport.top+"px",width:"100px",height:"20px"},onClick:()=>{console.log(refScrollPane.current)},children:"Floating"})})})})};Template.displayName="Template";const ScrollPaneTemplate=Template.bind({});ScrollPaneTemplate.args={createHorizontalScrollbar:createRedScrollbar,createVerticalScrollbar:createRedScrollbar,createScrollCorner:createCustomCorner,showVerticalScrollbar:!0,showHorizontalScrollbar:!0};const __WEBPACK_DEFAULT_EXPORT__={title:"Scrollable",component:_sheetxl_common_react__WEBPACK_IMPORTED_MODULE_4__.Gr,parameters:{controls:{sort:"requiredFirst"}}};ScrollPaneTemplate.parameters={...ScrollPaneTemplate.parameters,docs:{...ScrollPaneTemplate.parameters?.docs,source:{originalSource:"props => {\n const {\n showVerticalScrollbar,\n showHorizontalScrollbar,\n createHorizontalScrollbar,\n createVerticalScrollbar,\n createScrollCorner,\n ...rest\n } = (props as any);\n const scrollPaneProps: ScrollPaneProps = rest;\n const refScrollPane = useRef<ScrollPaneElement>();\n\n // const viewport:ScrollableViewport =\n const [viewport, setViewport] = useState<ScrollableViewport>({\n left: 0,\n top: 0,\n width: 100,\n height: 100,\n totalWidth: 1000,\n totalHeight: 1000\n });\n return <div className=\"storybook-container\">\r\n <ScrollPane {...scrollPaneProps} viewport={viewport} onScrollViewport={(scrollPoint: Partial<TopLeft>) => {\n setViewport((prev: ScrollableViewport) => {\n return {\n ...prev,\n top: scrollPoint.top ?? prev.top,\n left: scrollPoint.left ?? prev.left\n };\n });\n }} ref={refScrollPane} showVerticalScrollbar={showVerticalScrollbar} showHorizontalScrollbar={showHorizontalScrollbar} createHorizontalScrollbar={createHorizontalScrollbar} createVerticalScrollbar={createVerticalScrollbar} createScrollCorner={createScrollCorner}>\r\n <div style={{\n border: '1px solid green',\n width: '100%',\n height: '100%',\n background: 'pink',\n overflow: 'hidden'\n }}>\r\n <button style={{\n position: 'relative',\n left: `${650 - viewport.left}px`,\n top: `${550 - viewport.top}px`,\n width: '100px',\n height: '20px'\n }} onClick={() => {\n // scrollPane is a regular component\n console.log(refScrollPane.current);\n }}>\r\n Floating\r\n </button>\r\n </div>\r\n\r\n </ScrollPane>\r\n </div>;\n}",...ScrollPaneTemplate.parameters?.docs?.source}}};const __namedExportsOrder=["ScrollPaneTemplate"]},"../../packages/common-react/src/hooks/useCallbackRef.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,c:()=>useCallbackRef});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const useCallbackRef=(callback,deps)=>{const cbCurrent=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(((...args)=>callback?.(...args)),deps),refCB=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();refCB.current=cbCurrent;const stableCB=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(((...args)=>refCB.current?.(...args)),[]);if(refCB.current)return stableCB},__WEBPACK_DEFAULT_EXPORT__=useCallbackRef},"../../packages/common-react/src/utils/ReactUtils.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Uu:()=>toPrettyKeyCode,th:()=>detectIt,zJ:()=>boundPixel});var _sheetxl_common__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../packages/common/src/utils/CommonUtils.ts"),detect_it__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/detect-it/dist/detect-it.esm.js");new Set(["INPUT","TEXTAREA","SELECT"]);function detectIt(){return detect_it__WEBPACK_IMPORTED_MODULE_0__}function boundPixel(pixel,_increase=!1){return pixel}const toPrettyKeyCode=key=>"BracketLeft"===key?"[":"BracketRight"===key?"]":_sheetxl_common__WEBPACK_IMPORTED_MODULE_1__.ie(key)},"../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!./src/storybook-panels.css":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/css-loader/dist/runtime/noSourceMaps.js"),_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".storybook-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n /* border: green solid 3px; */\n}\n\n.storybook-container > *:first-child {\n border: blue solid 1px;\n\n position: relative;\n flex: 1;\n width: 100%;\n height: 100%;\n}\n\n.innerZoomElementWrapper .storybook-container > *:first-child {\n border: purple solid 1px;\n min-height: 400px;\n position: 'relative';\n}\n",""]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"../../node_modules/css-loader/dist/runtime/api.js":module=>{module.exports=function(cssWithMappingToString){var list=[];return list.toString=function toString(){return this.map((function(item){var content="",needLayer=void 0!==item[5];return item[4]&&(content+="@supports (".concat(item[4],") {")),item[2]&&(content+="@media ".concat(item[2]," {")),needLayer&&(content+="@layer".concat(item[5].length>0?" ".concat(item[5]):""," {")),content+=cssWithMappingToString(item),needLayer&&(content+="}"),item[2]&&(content+="}"),item[4]&&(content+="}"),content})).join("")},list.i=function i(modules,media,dedupe,supports,layer){"string"==typeof modules&&(modules=[[null,modules,void 0]]);var alreadyImportedModules={};if(dedupe)for(var k=0;k<this.length;k++){var id=this[k][0];null!=id&&(alreadyImportedModules[id]=!0)}for(var _k=0;_k<modules.length;_k++){var item=[].concat(modules[_k]);dedupe&&alreadyImportedModules[item[0]]||(void 0!==layer&&(void 0===item[5]||(item[1]="@layer".concat(item[5].length>0?" ".concat(item[5]):""," {").concat(item[1],"}")),item[5]=layer),media&&(item[2]?(item[1]="@media ".concat(item[2]," {").concat(item[1],"}"),item[2]=media):item[2]=media),supports&&(item[4]?(item[1]="@supports (".concat(item[4],") {").concat(item[1],"}"),item[4]=supports):item[4]="".concat(supports)),list.push(item))}},list}},"../../node_modules/css-loader/dist/runtime/noSourceMaps.js":module=>{module.exports=function(i){return i[1]}},"../../node_modules/react-use/esm/misc/util.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Bd:()=>isBrowser,lQ:()=>noop});var noop=function(){};var isBrowser="undefined"!=typeof window},"../../node_modules/react-use/esm/useIsomorphicLayoutEffect.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=__webpack_require__("../../node_modules/react-use/esm/misc/util.js").Bd?react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect:react__WEBPACK_IMPORTED_MODULE_0__.useEffect},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":(__unused_webpack_module,exports,__webpack_require__)=>{var f=__webpack_require__("../../node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"../../node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")},"./src/storybook-panels.css":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/style-loader/dist/runtime/styleDomAPI.js"),_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__),_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/style-loader/dist/runtime/insertBySelector.js"),_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__),_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__),_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/style-loader/dist/runtime/insertStyleElement.js"),_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__),_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/style-loader/dist/runtime/styleTagTransform.js"),_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__),_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_7_use_1_storybook_panels_css__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!./src/storybook-panels.css"),options={};options.styleTagTransform=_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default(),options.setAttributes=_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default(),options.insert=_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null,"head"),options.domAPI=_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default(),options.insertStyleElement=_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default();_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_7_use_1_storybook_panels_css__WEBPACK_IMPORTED_MODULE_6__.A,options),_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_7_use_1_storybook_panels_css__WEBPACK_IMPORTED_MODULE_6__.A&&_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_7_use_1_storybook_panels_css__WEBPACK_IMPORTED_MODULE_6__.A.locals&&_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_7_use_1_storybook_panels_css__WEBPACK_IMPORTED_MODULE_6__.A.locals},"../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":module=>{var stylesInDOM=[];function getIndexByIdentifier(identifier){for(var result=-1,i=0;i<stylesInDOM.length;i++)if(stylesInDOM[i].identifier===identifier){result=i;break}return result}function modulesToDom(list,options){for(var idCountMap={},identifiers=[],i=0;i<list.length;i++){var item=list[i],id=options.base?item[0]+options.base:item[0],count=idCountMap[id]||0,identifier="".concat(id," ").concat(count);idCountMap[id]=count+1;var indexByIdentifier=getIndexByIdentifier(identifier),obj={css:item[1],media:item[2],sourceMap:item[3],supports:item[4],layer:item[5]};if(-1!==indexByIdentifier)stylesInDOM[indexByIdentifier].references++,stylesInDOM[indexByIdentifier].updater(obj);else{var updater=addElementStyle(obj,options);options.byIndex=i,stylesInDOM.splice(i,0,{identifier,updater,references:1})}identifiers.push(identifier)}return identifiers}function addElementStyle(obj,options){var api=options.domAPI(options);api.update(obj);return function updater(newObj){if(newObj){if(newObj.css===obj.css&&newObj.media===obj.media&&newObj.sourceMap===obj.sourceMap&&newObj.supports===obj.supports&&newObj.layer===obj.layer)return;api.update(obj=newObj)}else api.remove()}}module.exports=function(list,options){var lastIdentifiers=modulesToDom(list=list||[],options=options||{});return function update(newList){newList=newList||[];for(var i=0;i<lastIdentifiers.length;i++){var index=getIndexByIdentifier(lastIdentifiers[i]);stylesInDOM[index].references--}for(var newLastIdentifiers=modulesToDom(newList,options),_i=0;_i<lastIdentifiers.length;_i++){var _index=getIndexByIdentifier(lastIdentifiers[_i]);0===stylesInDOM[_index].references&&(stylesInDOM[_index].updater(),stylesInDOM.splice(_index,1))}lastIdentifiers=newLastIdentifiers}}},"../../node_modules/style-loader/dist/runtime/insertBySelector.js":module=>{var memo={};module.exports=function insertBySelector(insert,style){var target=function getTarget(target){if(void 0===memo[target]){var styleTarget=document.querySelector(target);if(window.HTMLIFrameElement&&styleTarget instanceof window.HTMLIFrameElement)try{styleTarget=styleTarget.contentDocument.head}catch(e){styleTarget=null}memo[target]=styleTarget}return memo[target]}(insert);if(!target)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");target.appendChild(style)}},"../../node_modules/style-loader/dist/runtime/insertStyleElement.js":module=>{module.exports=function insertStyleElement(options){var element=document.createElement("style");return options.setAttributes(element,options.attributes),options.insert(element,options.options),element}},"../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=function setAttributesWithoutAttributes(styleElement){var nonce=__webpack_require__.nc;nonce&&styleElement.setAttribute("nonce",nonce)}},"../../node_modules/style-loader/dist/runtime/styleDomAPI.js":module=>{module.exports=function domAPI(options){if("undefined"==typeof document)return{update:function update(){},remove:function remove(){}};var styleElement=options.insertStyleElement(options);return{update:function update(obj){!function apply(styleElement,options,obj){var css="";obj.supports&&(css+="@supports (".concat(obj.supports,") {")),obj.media&&(css+="@media ".concat(obj.media," {"));var needLayer=void 0!==obj.layer;needLayer&&(css+="@layer".concat(obj.layer.length>0?" ".concat(obj.layer):""," {")),css+=obj.css,needLayer&&(css+="}"),obj.media&&(css+="}"),obj.supports&&(css+="}");var sourceMap=obj.sourceMap;sourceMap&&"undefined"!=typeof btoa&&(css+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))," */")),options.styleTagTransform(css,styleElement,options.options)}(styleElement,options,obj)},remove:function remove(){!function removeStyleElement(styleElement){if(null===styleElement.parentNode)return!1;styleElement.parentNode.removeChild(styleElement)}(styleElement)}}}},"../../node_modules/style-loader/dist/runtime/styleTagTransform.js":module=>{module.exports=function styleTagTransform(css,styleElement){if(styleElement.styleSheet)styleElement.styleSheet.cssText=css;else{for(;styleElement.firstChild;)styleElement.removeChild(styleElement.firstChild);styleElement.appendChild(document.createTextNode(css))}}}}]);