Skip to content

Commit eda31ba

Browse files
pomberpomber
committed
Add useMemo to useDimensions
1 parent c8f7b29 commit eda31ba

File tree

2 files changed

+337
-32
lines changed

2 files changed

+337
-32
lines changed

‎packages/smooth-code/src/use-dimensions.tsx‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -44,40 +44,47 @@ function useDimensions(
4444
] = React.useState<Dimensions>(null)
4545

4646
const windowWidth = useWindowWidth()
47-
const prevLongestLine = getLongestLine(
48-
code.prev,
49-
focus.prev
50-
)
51-
const nextLongestLine = getLongestLine(
52-
code.next,
53-
focus.next
54-
)
5547
const prevLineRef = React.useRef<HTMLDivElement>(null!)
5648

57-
const lines = (code.prev || code.next!)
58-
.trim()
59-
.split(newlineRe)
60-
61-
const element = (
62-
<>
63-
<br />
64-
{lines.map((line, i) => (
65-
<div
66-
ref={
67-
line === prevLongestLine
68-
? prevLineRef
69-
: undefined
70-
}
71-
key={i}
72-
>
73-
<div style={{ display: "inline-block" }}>
74-
<span>{line}</span>
49+
const {
50+
prevLongestLine,
51+
nextLongestLine,
52+
element,
53+
} = React.useMemo(() => {
54+
const prevLongestLine = getLongestLine(
55+
code.prev,
56+
focus.prev
57+
)
58+
const nextLongestLine = getLongestLine(
59+
code.next,
60+
focus.next
61+
)
62+
const lines = (code.prev || code.next!)
63+
.trim()
64+
.split(newlineRe)
65+
66+
const element = (
67+
<>
68+
<br />
69+
{lines.map((line, i) => (
70+
<div
71+
ref={
72+
line === prevLongestLine
73+
? prevLineRef
74+
: undefined
75+
}
76+
key={i}
77+
>
78+
<div style={{ display: "inline-block" }}>
79+
<span>{line}</span>
80+
</div>
7581
</div>
76-
</div>
77-
))}
78-
<br />
79-
</>
80-
)
82+
))}
83+
<br />
84+
</>
85+
)
86+
return { prevLongestLine, nextLongestLine, element }
87+
}, [code])
8188

8289
const allDeps = [
8390
...deps,

‎packages/storybook/src/editor-spring.story.js‎

Lines changed: 299 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,61 @@ export const annotations = () => {
6767
)
6868
}
6969

70+
export const longCode = () => {
71+
const [code, setCode] = React.useState(null)
72+
73+
React.useEffect(() => {
74+
highlight({
75+
code: largeCode,
76+
lang: "md",
77+
theme,
78+
}).then(code => setCode(code))
79+
}, [])
80+
81+
const [stepIndex, setStepIndex] = React.useState(0)
82+
83+
const focuses = ["1,7:14", "20:27", "33:37,53"]
84+
85+
const step = {
86+
files: [
87+
{
88+
name: "index.js",
89+
code,
90+
focus: focuses[stepIndex % focuses.length],
91+
annotations: [],
92+
},
93+
],
94+
northPanel: {
95+
tabs: ["index.js"],
96+
active: "index.js",
97+
heightRatio: 1,
98+
},
99+
}
100+
return (
101+
<Page>
102+
{code ? (
103+
<>
104+
<button
105+
onClick={() => setStepIndex(stepIndex + 1)}
106+
>
107+
Next
108+
</button>
109+
<EditorSpring
110+
{...step}
111+
codeConfig={{ theme, minZoom: 0.5 }}
112+
frameProps={{ style: { height: 400 } }}
113+
/>
114+
</>
115+
) : (
116+
"Loading..."
117+
)}
118+
</Page>
119+
)
120+
}
121+
70122
function SingleEditor({
71123
inputCode,
124+
lang = "js",
72125
focus = "",
73126
annotations = [],
74127
}) {
@@ -77,7 +130,7 @@ function SingleEditor({
77130
React.useEffect(() => {
78131
highlight({
79132
code: inputCode,
80-
lang: "js",
133+
lang,
81134
theme,
82135
}).then(code => setCode(code))
83136
}, [inputCode])
@@ -104,3 +157,248 @@ function SingleEditor({
104157
"Loading..."
105158
)
106159
}
160+
161+
const largeCode = `
162+
# Hello World
163+
164+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
165+
166+
## Basic syntax highlighting
167+
168+
~~~js
169+
function lorem(ipsum, dolor = 1) {
170+
const sit = ipsum == null ? 0 : ipsum.sit;
171+
dolor = sit - amet(dolor);
172+
return consectetur(ipsum);
173+
}
174+
~~~
175+
176+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
177+
178+
## Focusing parts of the code
179+
180+
~~~js focus=2,4[10:38]
181+
function lorem(ipsum, dolor = 1) {
182+
const sit = ipsum == null ? 0 : ipsum.sit;
183+
dolor = sit - amet(dolor);
184+
return consectetur(ipsum);
185+
}
186+
~~~
187+
188+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
189+
190+
## Multiple files together
191+
192+
<CH.Code>
193+
194+
~~~js index.js
195+
function lorem(ipsum, dolor = 1) {
196+
sit = ipsum - amet(dolor);
197+
return sit;
198+
}
199+
~~~
200+
201+
---
202+
203+
~~~js index.css
204+
.bar {
205+
height: 10px;
206+
width: 10px;
207+
}
208+
~~~
209+
210+
</CH.Code>
211+
212+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
213+
214+
## Annotations
215+
216+
~~~js bg=2:3 box=5[16:26]
217+
function lorem(ipsum, dolor = 1) {
218+
const sit = ipsum == null ? 0 : ipsum.sit;
219+
dolor = sit - amet(dolor);
220+
return sit ? consectetur(ipsum) : [];
221+
}
222+
~~~
223+
224+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
225+
226+
## And more annotations
227+
228+
~~~js focus=4,8
229+
function lorem(ipsum, dolor = 1) {
230+
const sit = ipsum == null && 0;
231+
dolor = sit - amet(dolor);
232+
// link[16:26] https://github.com/code-hike/codehike
233+
return sit ? consectetur(ipsum) : [];
234+
}
235+
236+
function adipiscing(...elit) {
237+
// label something something
238+
console.log("hover me");
239+
return elit.map((ipsum) => ipsum.sit);
240+
}
241+
~~~
242+
243+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
244+
245+
## And even custom annotations
246+
247+
import { MyTooltipAnnotation } from "./MyTooltipAnnotation";
248+
249+
~~~js
250+
function lorem(ipsum, dolor = 1) {
251+
const sit = ipsum == null && 0;
252+
dolor = sit - amet(dolor);
253+
return sit ? consectetur(ipsum) : [];
254+
}
255+
256+
function adipiscing(...elit) {
257+
const sit = ipsum == null && 0;
258+
dolor = sit - amet(dolor);
259+
console.log(2);
260+
return elit.map((ipsum) => ipsum.sit);
261+
}
262+
~~~
263+
264+
<CH.Annotation as={MyTooltipAnnotation} focus="4[16:26]">
265+
266+
### Something
267+
268+
Lorem ipsum dolor sit amet, consectetur
269+
adipiscing elit.
270+
271+
</CH.Annotation>
272+
273+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
274+
275+
# Spotlight
276+
277+
<CH.Spotlight>
278+
279+
~~~js app.js
280+
function lorem(ipsum, dolor = 1) {
281+
const sit = ipsum == null && 0;
282+
dolor = sit - amet(dolor);
283+
return sit ? consectetur(ipsum) : [];
284+
}
285+
~~~
286+
287+
---
288+
289+
Change focus
290+
291+
~~~js app.js focus=2:4
292+
293+
~~~
294+
295+
---
296+
297+
Or change the code
298+
299+
~~~js app.js focus=6:10
300+
function lorem(ipsum, dolor = 1) {
301+
const sit = ipsum == null && 0;
302+
dolor = sit - amet(dolor);
303+
return sit ? consectetur(ipsum) : [];
304+
}
305+
306+
function adipiscing(...elit) {
307+
console.log(elit);
308+
return elit.map((ipsum) => ipsum.sit);
309+
}
310+
~~~
311+
312+
---
313+
314+
Or change the file
315+
316+
~~~js app.js focus=1:4
317+
function adipiscing(...elit) {
318+
console.log(elit);
319+
return elit.map((ipsum) => ipsum.sit);
320+
}
321+
~~~
322+
323+
</CH.Spotlight>
324+
325+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
326+
327+
## Scrollycoding
328+
329+
<CH.Scrollycoding
330+
preset="https://codesandbox.io/s/zzgrb"
331+
>
332+
333+
### Step 1
334+
335+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel.
336+
337+
~~~jsx app.js focus=3:9
338+
import Circle from "./circle";
339+
const red = "hsl(0 85% 60%)";
340+
export default function App() {
341+
return (
342+
<div>
343+
<Circle color={red} />
344+
</div>
345+
);
346+
}
347+
~~~
348+
349+
---
350+
351+
### Step 2
352+
353+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan.
354+
355+
~~~jsx app.js focus=5:9
356+
import Circle from "./circle";
357+
const red = "hsl(0 85% 60%)";
358+
export default function App() {
359+
return (
360+
<div>
361+
<Circle color={red} />
362+
<Circle color={red} />
363+
<Circle color={red} />
364+
</div>
365+
);
366+
}
367+
~~~
368+
369+
---
370+
371+
### Step 3
372+
373+
At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel.
374+
375+
~~~jsx app.js focus=2,6:8
376+
377+
~~~
378+
379+
---
380+
381+
### Step 4
382+
383+
Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Praesent elementum facilisis leo vel fringilla. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Lorem ipsum dolor sit amet.
384+
385+
~~~jsx app.js focus=8:10
386+
import Circle from "./circle";
387+
const red = "hsl(0 85% 60%)";
388+
const blue = "hsl(240 50% 60%)";
389+
const gold = "hsl(60 60% 60%)";
390+
export default function App() {
391+
return (
392+
<div>
393+
<Circle color={red} />
394+
<Circle color={blue} />
395+
<Circle color={gold} />
396+
</div>
397+
);
398+
}
399+
~~~
400+
401+
</CH.Scrollycoding>
402+
403+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
404+
`.trim()

0 commit comments

Comments
 (0)