{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/BoxLayout/index.tsx"],"names":["SPACING_DEFAULT","SPACING_MOBILE","BOX_ITEM_CLASSNAME","fractions","spacingDefaulter","value","currentBreakpoint","Tiny","isThin","fraction","Column","div","display","flexDirection","flexGrow","minWidth","Block","sort","entities","a","b","render","children","Children","toArray","this","props","row","allowSorting","Small","map","entry","element","shift","columns","Micro","reduce","current","item","convert","layout","spacing","spacingBetweenBlocks","Div","css","flexWrap","margin","xy","className","wrap","entity","index","isColumn","key","flexBasis","padding","Component","state","BoxLayout"],"mappings":"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","file":"assets/2.chunk.ea5b79872eaf6151ae64.js","sourcesContent":["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<BlockEntityType[]>((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<BlockEntityType[]>(\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      <Column\r\n        key={index}\r\n        css={{\r\n          flexBasis: `${entity.fraction * 100}%`,\r\n        }}\r\n      >\r\n        {entity.columns.map(wrap(spacingBetweenBlocks, currentBreakpoint))}\r\n      </Column>\r\n    ) : (\r\n        <Block\r\n          key={index}\r\n          css={{\r\n            ...(spacing && {\r\n              padding: {\r\n                xy: `calc(${spacing} / 2)`,\r\n              },\r\n            }),\r\n            flexBasis: spacing ? `calc(${entity.fraction * 100}% - ${spacing})` : `${entity.fraction * 100}%`,\r\n          }}\r\n        >\r\n          {entity.element}\r\n        </Block>\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<PropType> {\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      <styled.Div\r\n        css={{\r\n          display: 'flex',\r\n          flexWrap: 'wrap',\r\n          ...(spacing && {\r\n            margin: {\r\n              xy: `calc(-${spacing} / 2)`,\r\n            },\r\n          }),\r\n          ...(this.props.currentBreakpoint > 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      </styled.Div>\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":""}