30:T4cd,{ const _ = { style: { visibility: "hidden" } } const a = { label: "A", style: { color: "red" } } const b = { label: "B" } const c = { label: "C" } const d = { label: "D" } const e = { label: "E" } const defineLayout = (...defs) => ({ rows: [...defs] }) const track = (...defs) => ({ cols: [...defs] }) const layout = defineLayout( track(a, a, a, a), track(b, b, c, c), track(_, _, d, d), track(e, e), ) const toContainerSize = layout => { let maxSize = 0 layout.rows.forEach((row, rowIndex) => { maxSize = Math.max(maxSize, row.cols.length) }) return maxSize } const toItems = layout => { const items = [] let itemId = 0 let columnSpan = 1 layout.rows.forEach((row, rowIndex) => { row.cols.forEach((col, colIndex) => { const item = { ...col, id: ++itemId, columns: itemColumns({ span: columnSpan }) } items.push(item) }) }) return items } const container = { columns: containerColumns({ size: toContainerSize(layout) }), } const initialItems = toItems(layout) return React.render(htm`<${GridColumns} ...${{ container, initialItems }} />`) }31:T5eb,{ const _ = { style: { visibility: "hidden" } } const a = { label: "A", style: { color: "red" } } const b = { label: "B" } const c = { label: "C" } const d = { label: "D" } const e = { label: "E" } const defineLayout = (...defs) => ({ rows: [...defs] }) const track = (...defs) => ({ cols: [...defs] }) const layout = defineLayout( track(a, a, a, a), track(b, b, c, c), track(_, _, d, d), track(e, e), ) const toContainerSize = layout => { let maxSize = 0 layout.rows.forEach((row, rowIndex) => { maxSize = Math.max(maxSize, row.cols.length) }) return maxSize } const toItems = layout => { const items = [] let itemId = 0 let columnSpan = 1 let columnStart = undefined let previousCol = null layout.rows.forEach((row, rowIndex) => { row.cols.forEach((col, colIndex) => { if (previousCol !== col) { columnSpan = 1 } else { columnSpan += 1 } const item = { ...col, id: ++itemId, columns: itemColumns({ span: columnSpan, start: columnStart }) } if (columnSpan > 1) { items.pop() } items.push(item) previousCol = col }) }) return items } const container = { columns: containerColumns({ size: toContainerSize(layout) }), } const initialItems = toItems(layout) return React.render(htm`<${GridColumns} ...${{ container, initialItems }} />`) }32:T780,GridPositions = ({ container, initialItems }) => { const pixels = value => `${value}px` const percentage = value => `${value * 100}%` const translate = (x, y) => `translate(${x}, ${y})` const { items, setItems, toItemProps, toContainerProps } = useItemContainer({ container, initialItems, containerProps: container => ({ style: { position: "relative", width: `calc(${percentage(1)} + ${pixels(container.gaps.x)}`, height: pixels( container.gaps.y * (container.size.h - 1) + container.size.h * container.rowHeight ), _marginRight: `-${pixels(container.gaps.x)}`, _border: "1px solid #ccc", boxSizing: "border-box", ...container.style, } }), itemProps: item => { const itemBounds = { x: item.bounds.x / container.size.w / (item.bounds.w / container.size.w), y: item.bounds.y * container.gaps.y + (item.bounds.y / container.size.h) * (container.size.h * container.rowHeight), w: item.bounds.w / container.size.w, h: item.bounds.h * container.rowHeight, } return { style: { position: "absolute", width: `calc(${percentage(itemBounds.w)} - ${pixels(container.gaps.x)})`, height: pixels(itemBounds.h), // transform: translate(percentage(itemBounds.x), pixels(itemBounds.y)), transform: ` translateX(${percentage(itemBounds.x)}) ${item.bounds.x === 0 ? "" : `translateX(${pixels(container.gaps.x)})`} translateY(${pixels(itemBounds.y)}) `, padding: "12px", border: "1px solid #ccc", boxSizing: "border-box", ...item.style, }, } }, }) return htm`<${ItemContainer} ...${{items, toContainerProps, toItemProps }} />` } 33:[] 2e:{"title":"Column Layouts","cells":[{"id":0,"value":"md`# Column Layouts\n\n_Some examples of column layouts using React components and htm tagged literals. The \\`React\\` and \\`htm\\` variables are defined in the appendix section at the document's end_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Example 1.1: Display Grid with Items\n\nThis defines a grid container with grid column items. Each item has an unique \\`id\\`. The container is a \\`

\\` with \\`display: grid\\`. It uses the \\`containerColumns()\\` helper which outputs, e.g. \\`\"repeat(4, 1fr)\"\\`. The items use \\`itemColumn()\\` helper which outputs, e.g. \\`\"1 / span 2\"\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"{\n const container = {\n columns: containerColumns({ size: 4 }),\n }\n const initialItems = [\n { id: 1, label: \"A\", columns: itemColumns({ span: 4, start: 1 }), style: { color: \"red\" } },\n { id: 2, label: \"B\", columns: itemColumns({ span: 2 }) },\n { id: 3, label: \"C\", columns: itemColumns({ span: 2 }) },\n { id: 4, label: \"D\", columns: itemColumns({ span: 2, start: 3 }) },\n { id: 5, label: \"E\", columns: itemColumns({ span: 2, start: 1 }) },\n ]\n \n return React.render(htm`<${GridColumns} ...${{ container, initialItems }} />`)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`## Example 1.2: Display Grid with Items Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`## Example 1.3: Display Grid with Items Layout and Column Spans`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`## Grid Columns`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"GridColumns = ({ container, initialItems }) => {\n const { items, setItems, toItemProps, toContainerProps } = useItemContainer({\n container,\n initialItems,\n containerProps: container => ({\n style: {\n display: \"grid\",\n gridTemplateColumns: container.columns,\n gridColumnGap: \"12px\",\n gridRowGap: \"12px\",\n padding: \"12px\",\n border: \"1px solid #ccc\",\n boxSizing: \"border-box\",\n ...container.style,\n },\n }),\n itemProps: item => ({\n style: {\n gridColumn: item.columns,\n padding: \"12px\",\n border: \"1px solid #ccc\",\n ...item.style,\n },\n }),\n })\n\n return htm`<${ItemContainer} ...${{items, toContainerProps, toItemProps }} />`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"containerColumns = ({ size }) => `repeat(${size}, 1fr)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"itemColumns = ({ span, start, end }) => [start, `span ${span}`, end].filter(it => it).join(\" / \") ","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`## Example 2.1: Position Absolute with Items`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"{\n const container = {\n size: { w: 4, h: 4 },\n gaps: { x: 16, y: 16 },\n rowHeight: 50,\n }\n const initialItems = [\n { id: 1, label: \"A\", bounds: { y: 0, x: 0, h: 1, w: 4 }, style: { color: \"red\" } },\n { id: 2, label: \"B\", bounds: { y: 1, x: 0, h: 1, w: 2 } },\n { id: 3, label: \"C\", bounds: { y: 1, x: 2, h: 1, w: 2 } },\n { id: 4, label: \"D\", bounds: { y: 2, x: 2, h: 1, w: 2 } },\n { id: 5, label: \"E\", bounds: { y: 3, x: 0, h: 1, w: 2 } },\n ]\n\n return React.render(htm`<${GridPositions} ...${{ container, initialItems }} />`)\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`## Grid Positions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`## Item Container`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"useItemContainer = ({ container, initialItems, containerProps, itemProps }) => {\n const [items, setItems] = React.useState(initialItems)\n return {\n items,\n setItems,\n toContainerProps: () => containerProps(container),\n toItemProps: id => {\n const item = items.find(item => item.id === id)\n return itemProps(item)\n },\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"ItemContainer = ({ items, toContainerProps, toItemProps }) => htm`\n

\n ${items.map(item => htm`\n

\n ${item.label}\n

\n `)}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Appendix\n\n- React: A declarative, efficient, and flexible JavaScript library for building user interfaces. [GitHub repository](https://github.com/facebook/react)\n- Babel: The compiler for writing next generation JavaScript. [GitHub repository](https://github.com/babel/babel)\n- htm: Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support. [GitHub repository](https://github.com/developit/htm)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"htm = import('https://unpkg.com/htm@2?module').then(r => r.default.bind(React.createElement))","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"function jsx(args = {}) {\n function transform(strings, ...values) {\n let s = strings[0];\n for (let i = 0, n = values.length; i < n; ++i) s += values[i] + strings[i + 1];\n const f = eval(Babel.transform(`(React,${Object.keys(args)})=>${s}`, {presets: [\"es2015\", \"react\"]}).code);\n return f(React, ...Object.values(args));\n }\n return Array.isArray(args) \n ? (args = {}, transform.apply(this, arguments)) \n : transform;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"React = {\n const r = require.alias({\n \"react\": \"react@16.8.6/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16.8.6/umd/react-dom.production.min.js\"\n });\n const React = await r(\"react\");\n const ReactDOM = await r(\"react-dom\");\n React.render = root => {\n const div = html`

`;\n ReactDOM.render(root, div);\n return div;\n };\n return React;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Babel = require(\"@babel/standalone@7.4.4/babel.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}