├── src ├── modules.d.ts ├── devsample │ ├── ColumnLayout │ │ ├── index.ts │ │ ├── App.css │ │ ├── components │ │ │ ├── Header.css │ │ │ ├── index.ts │ │ │ ├── Icon.css │ │ │ ├── Icon.tsx │ │ │ ├── Header.tsx │ │ │ ├── Comment.css │ │ │ └── Comment.tsx │ │ ├── items.ts │ │ └── App.tsx │ ├── FlowLayout │ │ ├── index.ts │ │ ├── App.css │ │ ├── components │ │ │ ├── Header.css │ │ │ ├── Icon.css │ │ │ ├── index.ts │ │ │ ├── Icon.tsx │ │ │ ├── Header.tsx │ │ │ ├── Comment.css │ │ │ └── Comment.tsx │ │ ├── items.ts │ │ └── App.tsx │ ├── Horizontal │ │ ├── index.ts │ │ ├── App.css │ │ ├── components │ │ │ ├── Header.css │ │ │ ├── index.ts │ │ │ ├── Icon.css │ │ │ ├── Icon.tsx │ │ │ ├── Header.tsx │ │ │ ├── Comment.css │ │ │ └── Comment.tsx │ │ ├── items.ts │ │ └── App.tsx │ ├── NewContainer │ │ ├── index.ts │ │ ├── App.css │ │ ├── components │ │ │ ├── Header.css │ │ │ ├── index.ts │ │ │ ├── Icon.css │ │ │ ├── Icon.tsx │ │ │ ├── Header.tsx │ │ │ ├── Comment.tsx │ │ │ └── Comment.css │ │ ├── App.tsx │ │ └── items.tsx │ ├── debug.json │ ├── manifest.json │ ├── ManualLayout │ │ ├── ManualLayout.css │ │ └── ManualLayout.tsx │ ├── lines.ts │ ├── ProgressiveCss │ │ ├── CssLayout.css │ │ └── CssLayout.tsx │ ├── UseSizeSample │ │ └── UseSizeSample.tsx │ ├── index.html │ ├── trackFPS.ts │ ├── console.ts │ └── SampleSelector.tsx ├── react │ ├── index.ts │ └── useSize.tsx ├── common │ ├── lerp.ts │ ├── shims.ts │ ├── utility.ts │ ├── Rect.ts │ ├── memoize.ts │ ├── Rectangle.ts │ ├── Margin.ts │ ├── scrollToShim.ts │ └── ResizeObserver.ts ├── index.ts ├── Virtualizer │ ├── index.ts │ ├── Container.tsx │ ├── VirtualizerApi.ts │ ├── getStableArray.ts │ ├── Virtualizer.tsx │ └── VirtualManager.ts ├── test │ ├── test.html │ ├── sampleLines.ts │ ├── SampleContainer.tsx │ └── ContainerTest.ts └── webpack │ ├── ResolverPlugin.ts │ └── index.ts ├── .gitignore ├── .npmignore ├── watch.sh ├── LICENSE ├── package.json ├── notes.md ├── CONTRIBUTING.md ├── CODE_OF_CONDUCT.md ├── README.md └── tsconfig.json /src/modules.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css" { 2 | } -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default } from "./App"; -------------------------------------------------------------------------------- /src/devsample/FlowLayout/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default } from "./App"; -------------------------------------------------------------------------------- /src/devsample/Horizontal/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default } from "./App"; -------------------------------------------------------------------------------- /src/devsample/NewContainer/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default } from "./App"; -------------------------------------------------------------------------------- /src/react/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default as useSize } from "./useSize"; 3 | -------------------------------------------------------------------------------- /src/devsample/debug.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 9222, 3 | "breakOnStart": false 4 | } -------------------------------------------------------------------------------- /src/devsample/Horizontal/App.css: -------------------------------------------------------------------------------- 1 | 2 | .App .Virtualizer { 3 | background: #fffeb7; 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | lib 4 | node_modules 5 | .cache 6 | yarn-error.log 7 | .parcel-cache 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # this file will be copied to lib before publishing so files relative to that 2 | devsample 3 | test 4 | -------------------------------------------------------------------------------- /src/common/lerp.ts: -------------------------------------------------------------------------------- 1 | 2 | export default function lerp(a: number, b: number, alpha: number) { 3 | return (a * (1 - alpha)) + (b * alpha); 4 | } 5 | -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/App.css: -------------------------------------------------------------------------------- 1 | 2 | .App .Virtualizer { 3 | background: #fffeb7; 4 | --column-gap: 20px; 5 | --row-gap: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/App.css: -------------------------------------------------------------------------------- 1 | 2 | .App .Virtualizer { 3 | background: #fffeb7; 4 | --column-gap: 20px; 5 | --row-gap: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/App.css: -------------------------------------------------------------------------------- 1 | 2 | .Container_App .Virtualizer { 3 | background: #fffeb7; 4 | --column-gap: 12px; 5 | --row-gap: 12px; 6 | } -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/components/Header.css: -------------------------------------------------------------------------------- 1 | .ColumnLayout_Header { 2 | display: block; 3 | background: #b7bdff; 4 | box-sizing: border-box; 5 | padding: 4px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/Header.css: -------------------------------------------------------------------------------- 1 | .FlowLayout_Header { 2 | display: block; 3 | background: #b7bdff; 4 | box-sizing: border-box; 5 | padding: 4px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/Header.css: -------------------------------------------------------------------------------- 1 | .Container_Header { 2 | display: block; 3 | background: #b7bdff; 4 | box-sizing: border-box; 5 | padding: 4px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/Horizontal/components/Header.css: -------------------------------------------------------------------------------- 1 | .Horizontal_Header { 2 | display: inline-block; 3 | background: #b7bdff; 4 | box-sizing: border-box; 5 | padding: 4px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/Icon.css: -------------------------------------------------------------------------------- 1 | .FlowLayout_Icon { 2 | /* use presence of display: inline to indicate grid layout */ 3 | display: inline-block; 4 | width: 100px; 5 | } 6 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default as Comment } from "./Comment"; 3 | export { default as Header } from "./Header"; 4 | export { default as Icon } from "./Icon"; 5 | -------------------------------------------------------------------------------- /src/devsample/Horizontal/components/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default as Comment } from "./Comment"; 3 | export { default as Header } from "./Header"; 4 | export { default as Icon } from "./Icon"; 5 | -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/components/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default as Comment } from "./Comment"; 3 | export { default as Header } from "./Header"; 4 | export { default as Icon } from "./Icon"; 5 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default as Comment } from "./Comment"; 3 | export { default as Header } from "./Header"; 4 | export { default as Icon } from "./Icon"; 5 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/Icon.css: -------------------------------------------------------------------------------- 1 | .Container_Icon { 2 | /* use presence of display: inline to indicate grid layout */ 3 | display: inline-block; 4 | --column-count-self: auto; 5 | --optimum-width: 120px; 6 | } -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/components/Icon.css: -------------------------------------------------------------------------------- 1 | .ColumnLayout_Icon { 2 | /* use presence of display: inline to indicate grid layout */ 3 | display: inline-block; 4 | --column-count-self: auto; 5 | --optimum-width: 120px; 6 | } 7 | -------------------------------------------------------------------------------- /src/devsample/Horizontal/components/Icon.css: -------------------------------------------------------------------------------- 1 | .Horizontal_Icon { 2 | /* use presence of display: inline to indicate grid layout */ 3 | display: inline-block; 4 | width: 100px; 5 | height: 100px; 6 | margin: 8px; 7 | box-sizing: border-box; 8 | } 9 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Icon.css"; 3 | 4 | export default function Icon(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/Horizontal/components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Icon.css"; 3 | 4 | export default function Icon(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Icon.css"; 3 | 4 | export default function Icon(props) { 5 | const { image, updateItem, ...otherProps } = props; 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Icon.css"; 3 | 4 | export default function Icon(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Header.css"; 3 | 4 | export default function Header(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | return
{ item.text }
; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/Horizontal/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Header.css"; 3 | 4 | export default function Header(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | return
{ item.text }
; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Header.css"; 3 | 4 | export default function Header(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | return
{ item.text }
; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Header.css"; 3 | 4 | export default function Header(props) { 5 | const { children, updateItem, ...otherProps } = props; 6 | return
{ children }
; 7 | } 8 | -------------------------------------------------------------------------------- /src/devsample/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Webpack Plugin", 3 | "id": "webpack.plugin", 4 | "version": "0.0.1", 5 | "main": "index.html", 6 | "uiEntrypoints": [ 7 | { 8 | "type": "homescreen", 9 | "panelId": "mainPanel" 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/Comment.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./Comment.css"; 3 | 4 | export default function Comment(props) { 5 | const { children, ...otherProps } = props; 6 | return
{children}
; 10 | } 11 | -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/Comment.css: -------------------------------------------------------------------------------- 1 | .FlowLayout_Comment { 2 | display: flex; 3 | flex-direction: row; 4 | background: #ffb7b9; 5 | border-radius: 4px; 6 | padding: 4px; 7 | box-sizing: border-box; 8 | } 9 | 10 | .FlowLayout_Comment > textarea { 11 | flex: 1; 12 | min-height: 100px; 13 | font-size: 20px; 14 | } -------------------------------------------------------------------------------- /src/devsample/NewContainer/components/Comment.css: -------------------------------------------------------------------------------- 1 | .Container_Comment { 2 | display: flex; 3 | flex-direction: row; 4 | background: #ffb7b9; 5 | border-radius: 4px; 6 | padding: 4px; 7 | box-sizing: border-box; 8 | } 9 | 10 | .Container_Comment > textarea { 11 | flex: 1; 12 | min-height: 100px; 13 | font-size: 20px; 14 | } -------------------------------------------------------------------------------- /src/devsample/ColumnLayout/components/Comment.css: -------------------------------------------------------------------------------- 1 | .ColumnLayout_Comment { 2 | display: flex; 3 | flex-direction: row; 4 | background: #ffb7b9; 5 | border-radius: 4px; 6 | padding: 4px; 7 | box-sizing: border-box; 8 | } 9 | 10 | .ColumnLayout_Comment > textarea { 11 | flex: 1; 12 | min-height: 100px; 13 | font-size: 20px; 14 | } -------------------------------------------------------------------------------- /src/devsample/Horizontal/components/Comment.css: -------------------------------------------------------------------------------- 1 | .Horizontal_Comment { 2 | display: inline-flex; 3 | flex-direction: row; 4 | margin: 8px; 5 | background: #ffb7b9; 6 | border-radius: 4px; 7 | padding: 4px; 8 | box-sizing: border-box; 9 | } 10 | 11 | .Horizontal_Comment > textarea { 12 | flex: 1; 13 | min-height: 100px; 14 | font-size: 20px; 15 | } -------------------------------------------------------------------------------- /src/common/shims.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | import "./scrollToShim"; 12 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | 12 | export const isUXP = typeof document !== "undefined" && (document as any).location.protocol === "plugin:" 13 | -------------------------------------------------------------------------------- /src/Virtualizer/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | export * from "./Virtualizer"; 12 | export * from "./VirtualizerApi"; 13 | export { default } from "./Virtualizer"; 14 | -------------------------------------------------------------------------------- /src/common/utility.ts: -------------------------------------------------------------------------------- 1 | 2 | export function debounce(func, wait, immediate?) { 3 | var timeout; 4 | return function(this: any) { 5 | var context = this, args = arguments; 6 | var later = function() { 7 | timeout = null; 8 | if (!immediate) { 9 | func.apply(context, args); 10 | } 11 | }; 12 | var callNow = immediate && !timeout; 13 | clearTimeout(timeout); 14 | timeout = setTimeout(later, wait); 15 | if (callNow) { 16 | func.apply(context, args); 17 | } 18 | }; 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /src/common/Rect.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | 12 | type Rect = { 13 | x: number 14 | y: number 15 | width: number 16 | height: number 17 | } 18 | 19 | export default Rect 20 | -------------------------------------------------------------------------------- /src/test/test.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | jsdom Unit Test 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /src/react/useSize.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { isUXP } from '..'; 3 | import ResizeObserver from "../common/ResizeObserver"; 4 | 5 | export default function useSize( 6 | ref: React.RefObject, 7 | callback: (t: T) => void, 8 | dependencies: any[] = [] 9 | ) { 10 | useEffect(() => { 11 | if (!isUXP) { 12 | // normal browsers calculate the correct size as soon as it's in the DOM. 13 | callback(ref.current!); 14 | } 15 | let resizeObserver = new ResizeObserver(() => { 16 | callback(ref.current!); 17 | }) 18 | resizeObserver.observe(ref.current!); 19 | return () => { 20 | resizeObserver.unobserve(ref.current!); 21 | } 22 | }, [ref.current, ...dependencies]); 23 | } 24 | -------------------------------------------------------------------------------- /src/webpack/ResolverPlugin.ts: -------------------------------------------------------------------------------- 1 | // import fs from "fs"; 2 | // import path from "path"; 3 | 4 | // const reactSpectrumPath = "@react-spectrum/"; 5 | 6 | // export default class ResolverPlugin { 7 | 8 | // source; 9 | // target; 10 | 11 | // constructor(source = "resolve", target = "resolve") { 12 | // this.source = source; 13 | // this.target = target; 14 | // } 15 | 16 | // apply(resolver) { 17 | // const target = resolver.ensureHook(this.target); 18 | // resolver 19 | // .getHook(this.source) 20 | // .tapAsync("MyResolverPlugin", (request, resolveContext, callback) => { 21 | // // we no longer need this, it's just for debug. 22 | // console.log(request.request + " => " + request.path); 23 | // // return resolver.doResolve(target, newRequest, null, resolveContext, callback); 24 | // callback(); 25 | // }); 26 | // } 27 | // } -------------------------------------------------------------------------------- /watch.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Copyright 2019 Adobe 4 | # All Rights Reserved. 5 | 6 | # NOTICE: Adobe permits you to use, modify, and distribute this file in 7 | # accordance with the terms of the Adobe license agreement accompanying 8 | # it. If you have received this file from a source other than Adobe, 9 | # then your use, modification, or distribution of it requires the prior 10 | # written permission of Adobe. 11 | 12 | # this is the development watch script for those with access 13 | # to the torq-native uxp runtime. 14 | # it is assumed that it's installed to a peer directory. 15 | 16 | source ~/.bashrc 17 | nvm use 10 18 | 19 | # ensure all child processes are killed when we exit this script. 20 | trap "kill 0" SIGINT SIGTERM EXIT 21 | 22 | (cd ../torq-native && node build inspector) & 23 | (yarn watch_sample) & 24 | (sleep 15 && ../torq-native/build/out/bin/macos/v8/nativeui/Debug/demo.app/Contents/MacOS/demo --extension dist) & 25 | 26 | wait 27 | 28 | -------------------------------------------------------------------------------- /src/devsample/ManualLayout/ManualLayout.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | .ManualSampleContainer { 12 | user-select: none; 13 | background: orange; 14 | z-index: 0; 15 | } 16 | .ManualSampleRow { 17 | display: block; 18 | /* 19 | Rows should always appear beneath cells. 20 | This is similar to cc-libraries technique with view by group. 21 | The groups are positioned underneath the cells. 22 | */ 23 | z-index: -1; 24 | background: lightblue; 25 | } 26 | .ManualSampleCell { 27 | /* use presence of display: inline to indicate grid layout */ 28 | border-radius: 4px; 29 | } -------------------------------------------------------------------------------- /src/devsample/NewContainer/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import React, { useState, forwardRef, FunctionComponent } from "react"; 3 | import Container from "../../Virtualizer/Container"; 4 | import items from "./items"; 5 | 6 | type ItemProperties = { recycleType: string, index: number, background: string} 7 | const Item: FunctionComponent = (props: { recycleType: string, index: number, background: string}) => { 8 | let { recycleType, index, background, ...rest } = props; 9 | return
{recycleType} {index}
10 | } 11 | 12 | export default forwardRef(function App(props, ref) { 13 | return ( 14 |
15 |

16 | Container Sample. 17 |

18 | 19 | { items } 20 | 21 |
22 | ); 23 | }) -------------------------------------------------------------------------------- /src/common/memoize.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | 12 | export default function memoize(fn: (input: INPUT) => OUTPUT): (input: INPUT) => OUTPUT { 13 | const symbol = Symbol(); 14 | const cache = new WeakMap(); 15 | return (input: INPUT) => { 16 | const e = Object.isExtensible(input); 17 | let value = e ? input[symbol] : cache.get(input); 18 | if (value === undefined) { 19 | value = fn(input); 20 | if (e) { 21 | input[symbol] = value; 22 | } 23 | else { 24 | cache.set(input, value) 25 | } 26 | } 27 | return value; 28 | } 29 | } -------------------------------------------------------------------------------- /src/devsample/Horizontal/items.ts: -------------------------------------------------------------------------------- 1 | 2 | const lines = [ 3 | "short line", 4 | "slightly longer line", 5 | "way longer line than others", 6 | "short", 7 | "medium length line", 8 | ]; 9 | 10 | let items = new Array(10000).fill(null).map((value, index) => { 11 | let itemsPerSection = 20; 12 | let section = Math.floor(index / itemsPerSection); 13 | if (index % itemsPerSection === 0) { 14 | return { 15 | key: `${-1 - section}`, 16 | type: "Header", 17 | text: `Section ${section}` }; 18 | } 19 | else { 20 | if (Math.floor(index / 12) % 2 === 0) { 21 | return { 22 | key: `${index}`, 23 | type: "Icon", 24 | image: `https://picsum.photos/id/${index % 50}/200/200` 25 | }; 26 | } 27 | else { 28 | return { 29 | key: `${index}`, 30 | type: "Comment", 31 | text: lines[index % lines.length] 32 | }; 33 | } 34 | } 35 | }) 36 | 37 | export default items; 38 | -------------------------------------------------------------------------------- /src/devsample/lines.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | 12 | const lines = [ 13 | "This is a short line", 14 | "This is a much longer line that should wrap around to the next row", 15 | "Medium length section of text here", 16 | "Very short", 17 | "Extremely long sentence here which will probably wrap around to a total of three lines or more", 18 | ]; 19 | 20 | export type Record = { 21 | text: string, 22 | images: string[] 23 | } 24 | 25 | export function getRecord(index: number) { 26 | return { 27 | key: String(index), 28 | type: "cell", 29 | images: [`https://picsum.photos/id/${index % 50}/200/200`], 30 | text: index + " " + lines[index % lines.length] 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /src/test/sampleLines.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | 12 | const lines = [ 13 | "This is a short line", 14 | "This is a much longer line that should wrap around to the next row", 15 | "Medium length section of text here", 16 | "Very short", 17 | "Extremely long sentence here which will probably wrap around to a total of three lines or more", 18 | ]; 19 | 20 | export type Record = { 21 | text: string, 22 | images: string[] 23 | } 24 | 25 | export function getItems(index: number) { 26 | return { 27 | key: String(index), 28 | type: "cell", 29 | images: [`https://picsum.photos/id/${index % 50}/200/200`], 30 | text: index + " " + lines[index % lines.length] 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /src/devsample/NewContainer/items.tsx: -------------------------------------------------------------------------------- 1 | import { Header, Icon, Comment } from "./components"; 2 | import React from "react"; 3 | 4 | const lines = [ 5 | "This is a short line", 6 | "This is a much longer line that should wrap around to the next row", 7 | "Medium length section of text here", 8 | "Very short", 9 | "Extremely long sentence here which will probably wrap around to a total of three lines or more and it's also a run-on sentence.", 10 | ]; 11 | 12 | let items = new Array(10000).fill(null).map((value, index) => { 13 | let itemsPerSection = 20; 14 | let section = Math.floor(index / itemsPerSection); 15 | let key = `${index}`; 16 | if (index % itemsPerSection === 0) { 17 | return
Section {section}
; 18 | } 19 | else { 20 | if (Math.floor(index / 12) % 2 === 0) { 21 | return 22 | } 23 | else { 24 | return {lines[index % lines.length]} 25 | } 26 | } 27 | }) 28 | 29 | export default items; 30 | -------------------------------------------------------------------------------- /src/devsample/ProgressiveCss/CssLayout.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2019 Adobe 3 | All Rights Reserved. 4 | 5 | NOTICE: Adobe permits you to use, modify, and distribute this file in 6 | accordance with the terms of the Adobe license agreement accompanying 7 | it. If you have received this file from a source other than Adobe, 8 | then your use, modification, or distribution of it requires the prior 9 | written permission of Adobe. 10 | */ 11 | .SampleContainer { 12 | user-select: none; 13 | background: lightgray; 14 | } 15 | .SampleRow { 16 | display: block; 17 | background: grey; 18 | margin-left: 0px; 19 | margin-right: 0px; 20 | margin-top: 0px; 21 | margin-bottom: 8px; 22 | } 23 | .SampleRow.selected { 24 | height: 50px; 25 | } 26 | .SampleCell { 27 | /* use presence of display: inline to indicate grid layout */ 28 | display: inline-block; 29 | width: 50px; 30 | height: 50px; 31 | margin: 0px 16px 16px; 32 | } 33 | 34 | @media (max-width: 600px) { 35 | .SampleCell { 36 | display: inline-block; 37 | width: 30px; 38 | height: 30px; 39 | margin: 0px 8px 8px; 40 | } 41 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | © Copyright 2019 Adobe. All rights reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/devsample/FlowLayout/components/Comment.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./Comment.css"; 3 | 4 | export default function Comment(props) { 5 | const { item, updateItem, ...otherProps } = props; 6 | const [editing, setEditing] = useState(false); 7 | return
{ 10 | if (!editing) { 11 | setEditing(!editing); 12 | } 13 | }} 14 | {...otherProps} 15 | > 16 | { 17 | !editing ? item.text :