{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/two-column-layout/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { create, tsx } from '@dojo/framework/core/vdom';\nimport { RenderResult } from '@dojo/framework/core/interfaces';\nimport theme from '../middleware/theme';\nimport * as fixedCss from './styles/two-column-layout.m.css';\nimport * as css from '../theme/default/two-column-layout.m.css';\nimport * as baseCss from '../common/styles/base.m.css';\nimport breakpoint from '@dojo/framework/core/middleware/breakpoint';\nimport { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';\nimport resize from '@dojo/framework/core/middleware/resize';\nimport drag from '@dojo/framework/core/middleware/drag';\n\nexport interface TwoColumnLayoutProperties {\n\t/** Determines if the leading or trailing column should be larger, and which will be rendered if the layout collapses.\n\t * If not set columns will be the same size and the leading column will be visible when collapsed\n\t */\n\tbias?: 'leading' | 'trailing';\n\t/** Set the width at which the two column layout will collapse to a single column. Defaults to 600 pixels */\n\tbreakpoint?: number;\n\tresize?: boolean;\n}\n\nexport interface TwoColumnLayoutChildren {\n\tleading: RenderResult;\n\ttrailing: RenderResult;\n}\n\ninterface TwoColumnIcache {\n\twidth?: number;\n}\nconst icache = createICacheMiddleware<TwoColumnIcache>();\nconst factory = create({ theme, breakpoint, icache, resize, drag })\n\t.properties<TwoColumnLayoutProperties>()\n\t.children<TwoColumnLayoutChildren>();\n\nexport const TwoColumnLayout = factory(function TwoColumnLayout({\n\tproperties,\n\tchildren,\n\tmiddleware: { theme, breakpoint: breakpointMiddleware, icache, resize: resizeMiddleware, drag }\n}) {\n\tconst { bias, breakpoint = 600, resize } = properties();\n\tconst { breakpoint: currentBreakpoint } = breakpointMiddleware.get('root', {\n\t\tSMALL: 0,\n\t\tLARGE: breakpoint\n\t}) || { breakpoint: 'LARGE' };\n\tconst size = resizeMiddleware.get('leading');\n\tlet width = resize && icache.get('width');\n\tconst shouldCollapse = currentBreakpoint === 'SMALL';\n\tconst thumbDrag = drag.get('divider');\n\n\tif (resize && thumbDrag.isDragging && size) {\n\t\tconst currentWidth = typeof width === 'number' ? width : size.width;\n\t\twidth = icache.set('width', thumbDrag.delta.x + currentWidth);\n\t} else if (\n\t\tresize &&\n\t\t!thumbDrag.isDragging &&\n\t\ttypeof width === 'number' &&\n\t\tsize &&\n\t\tsize.width !== width\n\t) {\n\t\twidth = icache.set('width', size.width);\n\t}\n\n\tconst classes = theme.classes(css);\n\tconst { leading, trailing } = children()[0];\n\treturn (\n\t\t<div\n\t\t\tkey=\"root\"\n\t\t\tclasses={[\n\t\t\t\ttheme.variant(),\n\t\t\t\tfixedCss.root,\n\t\t\t\tclasses.root,\n\t\t\t\ttypeof width === 'number' && fixedCss.resize\n\t\t\t]}\n\t\t>\n\t\t\t<div\n\t\t\t\tkey=\"leading\"\n\t\t\t\tclasses={[\n\t\t\t\t\tbias === 'leading' && fixedCss.biased,\n\t\t\t\t\tbias === undefined && !shouldCollapse && fixedCss.even,\n\t\t\t\t\tbias === 'trailing' && shouldCollapse && baseCss.visuallyHidden,\n\t\t\t\t\tbias === 'trailing' && !shouldCollapse && classes.small,\n\t\t\t\t\tclasses.column\n\t\t\t\t]}\n\t\t\t\tstyles={typeof width === 'number' ? { flexBasis: `${width}px` } : {}}\n\t\t\t>\n\t\t\t\t{leading}\n\t\t\t</div>\n\t\t\t{resize && !shouldCollapse && <div classes={classes.divider} key=\"divider\" />}\n\t\t\t<div\n\t\t\t\tkey=\"trailing\"\n\t\t\t\tclasses={[\n\t\t\t\t\tbias === 'trailing' && fixedCss.biased,\n\t\t\t\t\tbias === undefined && !shouldCollapse && fixedCss.even,\n\t\t\t\t\t(bias === 'leading' || bias === undefined) &&\n\t\t\t\t\t\tshouldCollapse &&\n\t\t\t\t\t\tbaseCss.visuallyHidden,\n\t\t\t\t\tbias === 'leading' && !shouldCollapse && classes.small,\n\t\t\t\t\tclasses.column\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t{trailing}\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nexport default TwoColumnLayout;\n"]}