{"version":3,"file":"MasonryLayout.DA7BAIM2.mjs","names":[],"sources":["https:/framerusercontent.com/modules/6bkDpbiOzYKEW62WB9IO/rXOdfyZrqO7iYh34N0vH/MasonryLayout.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";///////////////////////////\n// Code from Nikolay Goncharuk on GitHub:\n// https://github.com/GoncharukBro/react-smart-masonry/blob/master/src/Masonry.tsx\n// https://github.com/GoncharukBro/react-smart-masonry/blob/master/src/useResize.ts\n//\n// Modified\n//\n// Copyright (c) 2021 Nikolay Goncharuk\n// MIT License\nimport{useState,useLayoutEffect,useEffect,useMemo,useRef,Children,forwardRef,isValidElement}from\"react\";function getCurrentBreakpoints(breakpoints,width){const normalizedBreakpoints=breakpoints&&Object.entries(breakpoints).sort((a,b)=>b[1]-a[1]);return normalizedBreakpoints===null||normalizedBreakpoints===void 0?void 0:normalizedBreakpoints.filter(item=>item[1]<=width).map(item=>item[0]);}function getState(breakpoints,width){return{width,currentBreakpoints:getCurrentBreakpoints(breakpoints,width)};}function useResize(breakpoints){const[state,setState]=useState(()=>getState(breakpoints,0)//global.innerWidth)\n);useEffect(()=>{const handleResize=()=>{setState(getState(breakpoints,window.innerWidth));};window.addEventListener(\"resize\",handleResize);return()=>{window.removeEventListener(\"resize\",handleResize);};},[breakpoints]);return state;}function getCurrentParam(breakpoints,param,defaultValue){if(typeof param===\"object\"){const breakpoint=breakpoints===null||breakpoints===void 0?void 0:breakpoints.find(item=>param[item]!==undefined);var _breakpoint;return breakpoint!==undefined?(_breakpoint=param[breakpoint])!==null&&_breakpoint!==void 0?_breakpoint:defaultValue:defaultValue;}return param;}const DEFAULT_COLUMNS=1;const DEFAULT_GAP=0;function MasonryComponent({breakpoints,columns=DEFAULT_COLUMNS,gap=DEFAULT_GAP,reverse=false,autoArrange=false,children,style,...otherProps},forwardedRef){const{currentBreakpoints}=useResize(breakpoints);const elements=useRef([]);const[arrange,setArrange]=useState(false);const[currentColumns,setCurrentColumns]=useState(()=>{return getCurrentParam(currentBreakpoints,columns,DEFAULT_COLUMNS);});const[currentGap,setCurrentGap]=useState(()=>{return getCurrentParam(currentBreakpoints,gap,DEFAULT_GAP);});// eslint-disable-next-line react-hooks/exhaustive-deps\nuseLayoutEffect(()=>{if(autoArrange&&!arrange)setArrange(true);return()=>{if(autoArrange&&arrange)setArrange(false);};});useEffect(()=>{const param=getCurrentParam(currentBreakpoints,columns,DEFAULT_COLUMNS);setCurrentColumns(param);},[columns,currentBreakpoints]);useEffect(()=>{const param=getCurrentParam(currentBreakpoints,gap,DEFAULT_GAP);setCurrentGap(param);},[gap,currentBreakpoints]);const layout=useMemo(()=>{if(currentColumns<1)return[];const arrayOfChildren=Children.toArray(children);if(reverse)arrayOfChildren.reverse();const newLayout=Array.from({length:currentColumns},()=>{return[];});const columnHeights=newLayout.map(()=>0);const getcolumnIndex=index=>{if(autoArrange&&arrange&&elements.current.length>0){const columnIndex=columnHeights.findIndex(item=>{return item===Math.min(...columnHeights);});const element=elements.current.find(item=>item.index===index);const elementHeight=element===null||element===void 0?void 0:element.element.getBoundingClientRect().height;columnHeights[columnIndex]+=elementHeight||0;return columnIndex;}return index%currentColumns;};arrayOfChildren.forEach((child,index)=>{if(child&&/*#__PURE__*/isValidElement(child)){newLayout[getcolumnIndex(index)].push({element:child,index});}});return newLayout;},[arrange,autoArrange,children,currentColumns,reverse]);const temporaryElements=[];const addElement=index=>element=>{if(element!==null){temporaryElements.push({element,index});elements.current=temporaryElements;}};return /*#__PURE__*/_jsx(\"div\",{ref:forwardedRef,style:{display:\"flex\",gap:currentGap,...style},...otherProps,children:layout.map((column,columnIndex)=>/*#__PURE__*/_jsx(\"div\",{style:{flex:1,display:\"flex\",flexDirection:\"column\",gap:currentGap},children:column.map((item,itemIndex)=>/*#__PURE__*/_jsx(\"div\",{ref:addElement(item.index),children:item.element},itemIndex))},columnIndex))});}const Masonry=/*#__PURE__*/forwardRef(MasonryComponent);///////////////////////////\n/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function MasonryLayout(props){let layers=[];if(props.columnWidth==\"fill\"){for(let i=0;i<props.layers.length;i++){let layer=props.layers[i];if(!layer.props.style){layer.props.style={};}layer.props.style.width=\"100%\";layers.push(layer);}}else{layers=props.layers;}if(props.columns==1){return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:props.gap},children:layers});}else{return /*#__PURE__*/_jsx(Masonry,{columns:props.columns,gap:props.gap,autoArrange:props.autoArrange,reverse:props.reverse,children:layers});}}MasonryLayout.defaultProps={layers:[],columns:3,columnWidth:\"fit\",autoArrange:true,reverse:false,gap:10};addPropertyControls(MasonryLayout,{layers:{type:ControlType.Array,control:{type:ControlType.ComponentInstance}},columns:{type:ControlType.Number,defaultValue:MasonryLayout.defaultProps.columns,min:1,step:1,displayStepper:true,hidden(props){return props.direction==\"h\";}},columnWidth:{type:ControlType.Enum,defaultValue:MasonryLayout.defaultProps.columnWidth,options:[\"fit\",\"fill\"],optionTitles:[\"Fit\",\"Fill\"],displaySegmentedControl:true},autoArrange:{type:ControlType.Boolean,defaultValue:MasonryLayout.defaultProps.autoArrange,description:\"Arranges each layer into the shortest column.\"},reverse:{type:ControlType.Boolean,defaultValue:MasonryLayout.defaultProps.reverse},gap:{type:ControlType.Number,defaultValue:MasonryLayout.defaultProps.gap,min:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MasonryLayout\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"MasonryProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MasonryLayout.map"],"mappings":"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"}