{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Instagram/InstagramBlock.tsx","webpack:///./Avensia.Common/Features/Shared/BoxLayout/index.tsx"],"names":["Post","div","flexBasis","margin","y","x","Placeholder","props","slicedImages","instagramMedia","slice","placeholders","length","mappedPosts","map","post","mediaType","key","mediaUrl","url","to","instagramLink","itemProp","src","ratio","OneToOne","preset","Tiny","poster","videoPosterUrl","width","controls","preload","Div","css","display","flexFlow","justifyContent","marginTop","className","Array","fill","elem","index","SPACING_DEFAULT","SPACING_MOBILE","BOX_ITEM_CLASSNAME","fractions","spacingDefaulter","value","currentBreakpoint","isThin","fraction","Column","flexDirection","flexGrow","minWidth","Block","sort","entities","a","b","render","children","Children","toArray","this","row","allowSorting","Small","entry","element","shift","columns","Micro","reduce","current","item","convert","layout","spacing","spacingBetweenBlocks","flexWrap","xy","wrap","entity","isColumn","padding","Component","state","BoxLayout"],"mappings":"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","file":"assets/30.chunk.09f994c72eaa542116de.js","sourcesContent":["/**\r\n * @ComponentFor InstagramBlockViewModel\r\n */\r\n\r\nimport React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { Link } from '@avensia/scope';\r\nimport RequiredPropType from './InstagramBlockViewModel.type';\r\nimport * as style from '../../Style';\r\nimport Image, { Ratio as ImageRatio, Preset as ImagePreset } from 'Shared/Image/Ratio';\r\nimport { BOX_ITEM_CLASSNAME } from 'Shared/BoxLayout';\r\n\r\ntype PropType = RequiredPropType & {\r\n currentBreakpoint: number;\r\n};\r\n\r\nconst Post = styled.div({\r\n flexBasis: '100%',\r\n margin: { y: style.medium, x: 0 },\r\n [style.minMicroMediaQuery]: {\r\n flexBasis: '48%',\r\n },\r\n [style.minTinyMediaQuery]: {\r\n flexBasis: '32%',\r\n },\r\n [style.minMediumMediaQuery]: {\r\n flexBasis: '8%',\r\n },\r\n});\r\n\r\nconst Placeholder = styled(Post, {\r\n margin: { y: 0, x: 0 },\r\n});\r\n\r\nfunction renderPlaceholders(numOfPlaceholders: number) {\r\n return new Array(numOfPlaceholders).fill(0).map((elem, index) => );\r\n}\r\n\r\nconst InstagramBlock = (props: PropType) => {\r\n const maxItems = 12;\r\n const slicedImages = !!props.instagramMedia && props.instagramMedia.slice(0, maxItems);\r\n const placeholders = maxItems - slicedImages.length;\r\n const mappedPosts =\r\n !!props.instagramMedia &&\r\n slicedImages.map(post => {\r\n if (post.mediaType === 'image') {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n } else if (post.mediaType === 'video') {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n });\r\n\r\n return (\r\n mappedPosts &&\r\n mappedPosts.length > 0 && (\r\n \r\n {mappedPosts}\r\n {placeholders > 0 && renderPlaceholders(placeholders)}\r\n \r\n )\r\n );\r\n};\r\n\r\nexport default InstagramBlock;\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport connect from '../connect';\r\nimport { Breakpoint } from '@avensia/scope';\r\nimport * as style from '../Style';\r\n\r\nexport const SPACING_DEFAULT = style.pixelsToUnit(25);\r\nexport const SPACING_MOBILE = style.pixelsToUnit(15);\r\nexport const BOX_CLASSNAME = 'purefun-box';\r\nexport const BOX_ITEM_CLASSNAME = 'purefun-box-item';\r\n\r\nconst fractions = {\r\n '1:2': 1 / 2,\r\n '1:3': 1 / 3,\r\n '1:4': 1 / 4,\r\n '2:3': 2 / 3,\r\n '3:4': 3 / 4,\r\n};\r\n\r\nexport type LayoutAliasType = keyof typeof fractions;\r\n\r\ntype LayoutColumnType = LayoutAliasType[] & {\r\n 0: LayoutAliasType;\r\n 1: LayoutAliasType[] & {\r\n 0: LayoutAliasType;\r\n 1: LayoutAliasType;\r\n };\r\n};\r\n\r\nexport type LayoutType = LayoutAliasType | LayoutColumnType;\r\n\r\nfunction spacingDefaulter(value: boolean | string, currentBreakpoint: number) {\r\n return value === true ? (currentBreakpoint > Breakpoint.Tiny ? SPACING_DEFAULT : SPACING_MOBILE) : value;\r\n}\r\n\r\nfunction isThin(fraction: number) {\r\n return fraction <= 1 / 3;\r\n}\r\n\r\nconst Column = styled.div({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n minWidth: 0,\r\n});\r\n\r\nconst Block = styled.div({\r\n flexGrow: 1,\r\n minWidth: 0,\r\n});\r\n\r\ntype BlockEntityType = {\r\n fraction: number;\r\n element: React.ReactNode;\r\n};\r\n\r\ntype ColumnEntityType = {\r\n fraction: number;\r\n columns: BlockEntityType[];\r\n};\r\n\r\nfunction sort(entities: BlockEntityType[]) {\r\n return entities.sort((a, b) => b.fraction - a.fraction);\r\n}\r\n\r\nfunction convert(\r\n row: LayoutType[],\r\n children: React.ReactNode[],\r\n currentBreakpoint: number,\r\n allowSorting?: boolean,\r\n ): (BlockEntityType | ColumnEntityType)[] {\r\n if (currentBreakpoint > Breakpoint.Small) {\r\n return row.map(entry => {\r\n if (typeof entry === 'string') {\r\n return {\r\n fraction: fractions[entry],\r\n element: children.shift(),\r\n };\r\n }\r\n\r\n return {\r\n fraction: fractions[entry[0]],\r\n columns: entry[1].map(entry => ({\r\n fraction: fractions[entry],\r\n element: children.shift(),\r\n })),\r\n };\r\n });\r\n }\r\n\r\n // Flatten all blocks to full or half width\r\n if (currentBreakpoint > Breakpoint.Micro) {\r\n const entities = row.reduce((current, item) => {\r\n if (typeof item === 'string') {\r\n return [\r\n ...current,\r\n {\r\n fraction: isThin(fractions[item]) ? 0.5 : 1,\r\n element: children.shift(),\r\n },\r\n ];\r\n }\r\n\r\n const value = isThin(fractions[item[0]]) ? 0.5 : 1;\r\n return [\r\n ...current,\r\n ...item[1].map(() => ({\r\n fraction: value,\r\n element: children.shift(),\r\n })),\r\n ];\r\n }, []);\r\n\r\n return allowSorting ? sort(entities) : entities;\r\n }\r\n\r\n // Flatten all blocks to full width\r\n const entities = row.reduce(\r\n (current, entry) =>\r\n typeof entry === 'string'\r\n ? [\r\n ...current,\r\n {\r\n fraction: 1,\r\n element: children.shift(),\r\n },\r\n ]\r\n : [\r\n ...current,\r\n ...entry[1].map(() => ({\r\n fraction: 1,\r\n element: children.shift(),\r\n })),\r\n ],\r\n [],\r\n );\r\n\r\n return allowSorting ? sort(entities) : entities;\r\n}\r\n\r\nfunction isColumn(entity: BlockEntityType | ColumnEntityType): entity is ColumnEntityType {\r\n return 'columns' in entity;\r\n}\r\n\r\nfunction wrap(spacingBetweenBlocks: boolean | string, currentBreakpoint: number) {\r\n const spacing = spacingDefaulter(spacingBetweenBlocks, currentBreakpoint);\r\n return (entity: BlockEntityType | ColumnEntityType, index: number): React.ReactNode => {\r\n return isColumn(entity) ? (\r\n \r\n {entity.columns.map(wrap(spacingBetweenBlocks, currentBreakpoint))}\r\n \r\n ) : (\r\n \r\n {entity.element}\r\n \r\n );\r\n };\r\n}\r\n\r\ntype RequiredPropType = {\r\n layout: LayoutType[];\r\n spacingBetweenBlocks?: boolean | string;\r\n allowSorting?: boolean;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n};\r\n\r\ntype ConnectStateType = {\r\n currentBreakpoint: number;\r\n};\r\n\r\ntype PropType = StyledProps & RequiredPropType & ConnectStateType;\r\n\r\nclass BoxLayout extends React.Component {\r\n render() {\r\n const children = React.Children.toArray(this.props.children);\r\n const entities = convert(this.props.layout, children, this.props.currentBreakpoint, this.props.allowSorting);\r\n const spacing = spacingDefaulter(this.props.spacingBetweenBlocks, this.props.currentBreakpoint);\r\n return (\r\n Breakpoint.Small && {\r\n flexWrap: 'nowrap',\r\n }),\r\n }}\r\n className={BOX_CLASSNAME}\r\n >\r\n {entities.map(wrap(this.props.spacingBetweenBlocks, this.props.currentBreakpoint))}\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nexport default styled(\r\n connect(\r\n (state): ConnectStateType => ({\r\n currentBreakpoint: state.currentBreakpoint,\r\n }),\r\n )(BoxLayout),\r\n);\r\n"],"sourceRoot":""}