Skip to content

Commit 2d0e236

Browse files
tobuatobua
committed
feat(react): add more features to React-based implementation
1 parent cd70cde commit 2d0e236

File tree

4 files changed

+449
-6
lines changed

4 files changed

+449
-6
lines changed

‎demo-ssr/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
"astro": "astro"
1010
},
1111
"dependencies": {
12-
"astro": "^1.2.3",
12+
"astro": "^1.2.6",
1313
"indicate": "file:.."
1414
},
1515
"devDependencies": {
16-
"@astrojs/react": "^1.1.2",
16+
"@astrojs/react": "^1.1.3",
1717
"react": "^18.2.0",
1818
"react-dom": "^18.2.0"
1919
}

‎demo-ssr/public/arrow.png

5.67 KB
Loading

‎demo-ssr/src/pages/index.astro

+268
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,29 @@ import { Indicate } from 'indicate'
5858
<div class="box" />
5959
<div class="box" />
6060
</Indicate>
61+
<pre>{`<Indicate arrow={false}>`}</pre>
62+
<Indicate arrow={false}>
63+
<div class="box" />
64+
<div class="box" />
65+
<div class="box" />
66+
<div class="box" />
67+
<div class="box" />
68+
<div class="box" />
69+
<div class="box" />
70+
<div class="box" />
71+
<div class="box" />
72+
<div class="box" />
73+
<div class="box" />
74+
<div class="box" />
75+
<div class="box" />
76+
<div class="box" />
77+
<div class="box" />
78+
<div class="box" />
79+
<div class="box" />
80+
<div class="box" />
81+
<div class="box" />
82+
<div class="box" />
83+
</Indicate>
6184
<pre>{`<Indicate style={{ height: '90px' }}>`}</pre>
6285
<Indicate style={{ height: '90px' }}>
6386
<div style={{ display: 'flex', flexDirection: 'column', rowGap: '10px' }}>
@@ -153,6 +176,25 @@ import { Indicate } from 'indicate'
153176
<div class="box" />
154177
<div class="box" />
155178
</Indicate>
179+
<pre>{`<Indicate as="table">
180+
<Indicate style={{ display: 'inline' }}>`}</pre>
181+
<Indicate as="table">
182+
<tr>
183+
<th>Company</th>
184+
<th>Contact</th>
185+
<th>Country</th>
186+
</tr>
187+
<tr>
188+
<td>Alfreds Futterkiste</td>
189+
<td>Maria Anders</td>
190+
<td>Germany</td>
191+
</tr>
192+
<tr>
193+
<td>Centro comercial Moctezuma</td>
194+
<td>Francisco Chang</td>
195+
<td>Mexico</td>
196+
</tr>
197+
</Indicate>
156198
<h2>Hydrated</h2>
157199
<pre>{`<Indicate client:load>`}</pre>
158200
<Indicate client:load>
@@ -206,6 +248,29 @@ import { Indicate } from 'indicate'
206248
<div class="box" />
207249
<div class="box" />
208250
</Indicate>
251+
<pre>{`<Indicate arrow={false} client:load>`}</pre>
252+
<Indicate arrow={false} client:load>
253+
<div class="box" />
254+
<div class="box" />
255+
<div class="box" />
256+
<div class="box" />
257+
<div class="box" />
258+
<div class="box" />
259+
<div class="box" />
260+
<div class="box" />
261+
<div class="box" />
262+
<div class="box" />
263+
<div class="box" />
264+
<div class="box" />
265+
<div class="box" />
266+
<div class="box" />
267+
<div class="box" />
268+
<div class="box" />
269+
<div class="box" />
270+
<div class="box" />
271+
<div class="box" />
272+
<div class="box" />
273+
</Indicate>
209274
<pre>{`<Indicate click={false} client:load>`}</pre>
210275
<Indicate click={false} client:load>
211276
<div class="box" />
@@ -324,6 +389,209 @@ import { Indicate } from 'indicate'
324389
<div class="box" />
325390
<div class="box" />
326391
</Indicate>
392+
<pre>{`<Indicate arrow={{ icon: 'pointer' }} client:load>`}</pre>
393+
<Indicate arrow={{ icon: 'pointer' }} client:load>
394+
<div class="box" />
395+
<div class="box" />
396+
<div class="box" />
397+
<div class="box" />
398+
<div class="box" />
399+
<div class="box" />
400+
<div class="box" />
401+
<div class="box" />
402+
<div class="box" />
403+
<div class="box" />
404+
<div class="box" />
405+
<div class="box" />
406+
<div class="box" />
407+
<div class="box" />
408+
<div class="box" />
409+
<div class="box" />
410+
<div class="box" />
411+
<div class="box" />
412+
<div class="box" />
413+
<div class="box" />
414+
</Indicate>
415+
<pre>{`<Indicate arrow={{ color: 'blue' }} client:load>`}</pre>
416+
<Indicate arrow={{ color: 'blue' }} client:load>
417+
<div class="box" />
418+
<div class="box" />
419+
<div class="box" />
420+
<div class="box" />
421+
<div class="box" />
422+
<div class="box" />
423+
<div class="box" />
424+
<div class="box" />
425+
<div class="box" />
426+
<div class="box" />
427+
<div class="box" />
428+
<div class="box" />
429+
<div class="box" />
430+
<div class="box" />
431+
<div class="box" />
432+
<div class="box" />
433+
<div class="box" />
434+
<div class="box" />
435+
<div class="box" />
436+
<div class="box" />
437+
</Indicate>
438+
<pre>{`<Indicate arrow={{ image: '/arrow.png' }} client:load>`}</pre>
439+
<Indicate arrow={{ image: '/arrow.png' }} client:load>
440+
<div class="box" />
441+
<div class="box" />
442+
<div class="box" />
443+
<div class="box" />
444+
<div class="box" />
445+
<div class="box" />
446+
<div class="box" />
447+
<div class="box" />
448+
<div class="box" />
449+
<div class="box" />
450+
<div class="box" />
451+
<div class="box" />
452+
<div class="box" />
453+
<div class="box" />
454+
<div class="box" />
455+
<div class="box" />
456+
<div class="box" />
457+
<div class="box" />
458+
<div class="box" />
459+
<div class="box" />
460+
</Indicate>
461+
<pre>{`<Indicate arrow={{ image: 'data:image/svg+xml;base64,...' }} client:load>`}</pre>
462+
<Indicate arrow={{ image: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9ImEiPgogICA8cGF0aCBkPSJtMjM5IDE1OWgzNzMuNzl2NDM0aC0zNzMuNzl6Ii8+CiAgPC9jbGlwUGF0aD4KIDwvZGVmcz4KIDxwYXRoIGQ9Im0yMTIuNDcgNTM5LjU0Yy00My42Ni00My42Ni02Ny43MDctMTAxLjc1LTY3LjcwNy0xNjMuNTQgMC02MS43ODUgMjQuMDQ3LTExOS44OCA2Ny43MDctMTYzLjUzIDQzLjY1Ni00My42NiAxMDEuNzUtNjcuNzA3IDE2My41My02Ny43MDcgNjEuNzg5IDAgMTE5Ljg4IDI0LjA1MSAxNjMuNTQgNjcuNzA3IDQzLjY1NiA0My42NTYgNjcuNzA3IDEwMS43NSA2Ny43MDcgMTYzLjUzIDAgNjEuNzg5LTI0LjA1MSAxMTkuODgtNjcuNzA3IDE2My41NC00My42NiA0My42NTYtMTAxLjc1IDY3LjcwNy0xNjMuNTQgNjcuNzA3LTYxLjc4NSAwLTExOS44OC0yNC4wNTEtMTYzLjUzLTY3LjcwN3ptLTQ5LjIwNy0xNjMuNTRjMCAxMTcuMjkgOTUuNDU3IDIxMi43NCAyMTIuNzQgMjEyLjc0czIxMi43NC05NS40NTcgMjEyLjc0LTIxMi43NGMtMC4wMDM5MDYtMTE3LjI5LTk1LjQ2MS0yMTIuNzQtMjEyLjc1LTIxMi43NHMtMjEyLjc0IDk1LjQ1My0yMTIuNzQgMjEyLjc0eiIvPgogPHBhdGggZD0ibTM2OS45OSA0MzYuMzEgNjAuMzA5LTYwLjMwOS02MC4zMDktNjAuMzA5IDI1LjYyMS0yNS43MTUgODYuMDIzIDg2LjAyMy04Ni4wMjMgODYuMDIzem0yNS42MjEtMTM2LjYyLTE2IDE2LjA5NCA2MC4zMDkgNjAuMzA5LTYwLjMwOSA2MC4zMDkgMTYgMTYuMDk0IDc2LjQwMi03Ni40MDJ6Ii8+CiA8ZyBjbGlwLXBhdGg9InVybCgjYSkiPgogIDxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC45MjQ5NiAwIDAgLjkyNDk2IDEzOS4yMSAxMzkuMjEpIiBkPSJtMjQ5LjUgMzIxLjIgNjUuMjAxLTY1LjIwMS02NS4yMDEtNjUuMjAxIDI3LjctMjcuODAxIDkzLjAwMiA5My4wMDItOTMuMDAyIDkzLjAwMnptMjcuNy0xNDcuNy0xNy4yOTggMTcuMzk5IDY1LjIwMSA2NS4yMDEtNjUuMjAxIDY1LjIwMSAxNy4yOTggMTcuMzk5IDgyLjYtODIuNnoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjEwIi8+CiA8L2c+CiA8cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCguOTI0OTYgMCAwIC45MjQ5NiAxMzkuMjEgMTM5LjIxKSIgZD0ibTE1My45IDMyMS4yIDY1LjEtNjUuMjAxLTY1LjIwMS02NS4yMDEgMjcuNy0yNy44MDEgOTMuMDAyIDkzLjAwMi05My4wMDIgOTMuMDAyem0yNy41OTgtMTQ3LjctMTcuMjk4IDE3LjM5OSA2NS4yMDEgNjUuMjAxLTY1LjIwMSA2NS4yMDEgMTcuMjk4IDE3LjM5OSA4Mi42LTgyLjZ6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIxMCIvPgo8L3N2Zz4K' }} client:load>
463+
<div class="box" />
464+
<div class="box" />
465+
<div class="box" />
466+
<div class="box" />
467+
<div class="box" />
468+
<div class="box" />
469+
<div class="box" />
470+
<div class="box" />
471+
<div class="box" />
472+
<div class="box" />
473+
<div class="box" />
474+
<div class="box" />
475+
<div class="box" />
476+
<div class="box" />
477+
<div class="box" />
478+
<div class="box" />
479+
<div class="box" />
480+
<div class="box" />
481+
<div class="box" />
482+
<div class="box" />
483+
</Indicate>
484+
<pre>{`<Indicate arrow={{ markup: <span>{\`>\`}</span> }} client:load>`}</pre>
485+
<Indicate arrow={{ markup: '>' }} client:load>
486+
<div class="box" />
487+
<div class="box" />
488+
<div class="box" />
489+
<div class="box" />
490+
<div class="box" />
491+
<div class="box" />
492+
<div class="box" />
493+
<div class="box" />
494+
<div class="box" />
495+
<div class="box" />
496+
<div class="box" />
497+
<div class="box" />
498+
<div class="box" />
499+
<div class="box" />
500+
<div class="box" />
501+
<div class="box" />
502+
<div class="box" />
503+
<div class="box" />
504+
<div class="box" />
505+
<div class="box" />
506+
</Indicate>
507+
<pre>{`<Indicate arrow={{ position: 'end' }} client:load>`}</pre>
508+
<Indicate arrow={{ position: 'end' }} client:load>
509+
<div class="box" />
510+
<div class="box" />
511+
<div class="box" />
512+
<div class="box" />
513+
<div class="box" />
514+
<div class="box" />
515+
<div class="box" />
516+
<div class="box" />
517+
<div class="box" />
518+
<div class="box" />
519+
<div class="box" />
520+
<div class="box" />
521+
<div class="box" />
522+
<div class="box" />
523+
<div class="box" />
524+
<div class="box" />
525+
<div class="box" />
526+
<div class="box" />
527+
<div class="box" />
528+
<div class="box" />
529+
</Indicate>
530+
<pre>{`<Indicate hideScrollbar={false} client:load>`}</pre>
531+
<Indicate hideScrollbar={false} client:load>
532+
<div class="box" />
533+
<div class="box" />
534+
<div class="box" />
535+
<div class="box" />
536+
<div class="box" />
537+
<div class="box" />
538+
<div class="box" />
539+
<div class="box" />
540+
<div class="box" />
541+
<div class="box" />
542+
<div class="box" />
543+
<div class="box" />
544+
<div class="box" />
545+
<div class="box" />
546+
<div class="box" />
547+
<div class="box" />
548+
<div class="box" />
549+
<div class="box" />
550+
<div class="box" />
551+
<div class="box" />
552+
</Indicate>
553+
<pre>{`<Indicate hideScrollbar={false} className="hello-class" client:load>`}</pre>
554+
<Indicate hideScrollbar={false} className="hello-class" client:load>
555+
<div class="box" />
556+
<div class="box" />
557+
<div class="box" />
558+
<div class="box" />
559+
<div class="box" />
560+
<div class="box" />
561+
<div class="box" />
562+
<div class="box" />
563+
<div class="box" />
564+
<div class="box" />
565+
<div class="box" />
566+
<div class="box" />
567+
<div class="box" />
568+
<div class="box" />
569+
<div class="box" />
570+
<div class="box" />
571+
<div class="box" />
572+
<div class="box" />
573+
<div class="box" />
574+
<div class="box" />
575+
</Indicate>
576+
<pre>{`<Indicate as="table" client:load>
577+
<Indicate style={{ display: 'inline' }} client:load>`}</pre>
578+
<Indicate as="table" client:load>
579+
<tr>
580+
<th>Company</th>
581+
<th>Contact</th>
582+
<th>Country</th>
583+
</tr>
584+
<tr>
585+
<td>Alfreds Futterkiste</td>
586+
<td>Maria Anders</td>
587+
<td>Germany</td>
588+
</tr>
589+
<tr>
590+
<td>Centro comercial Moctezuma</td>
591+
<td>Francisco Chang</td>
592+
<td>Mexico</td>
593+
</tr>
594+
</Indicate>
327595
</main>
328596
</Layout>
329597

0 commit comments

Comments
 (0)