git.iko.soy/bridge
on master help sign in
Merge pull request #297 from urbit/sigil-dl-btn
9507541Fang
src/components/SigilDownloader.js → src/components/DownloadSigilButton.jsrenamed+18−8
compare with master
unifiedsplit
@@ -5,9 +5,13 @@ import { sigil, stringRenderer } from 'urbit-sigil-js';
5
5
6import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
6import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
7
7
8−import WithTooltip from 'components/WithTooltip';
8+import { DownloadButton } from 'components/Buttons';
9
9
10−export default function SigilDownloader({ point, children }) {
10+export default function DownloadSigilButton({
11+ point,
12+ children = 'Download Sigil',
13+ ...rest
14+}) {
11 const [downloaded, setDownloaded] = useState(false);
15 const [downloaded, setDownloaded] = useState(false);
12 const downloadSigil = () => {
16 const downloadSigil = () => {
13 const patp = ob.patp(point);
17 const patp = ob.patp(point);
@@ -24,7 +28,6 @@ export default function SigilDownloader({ point, children }) {
24 // make sigil svg and encoded into base64
28 // make sigil svg and encoded into base64
25 const svg = sigil({
29 const svg = sigil({
26 patp,
30 patp,
27− full: true,
28 renderer: stringRenderer,
31 renderer: stringRenderer,
29 size: _size,
32 size: _size,
30 colors: ['#FFFFFF', '#000000'],
33 colors: ['#FFFFFF', '#000000'],
@@ -52,11 +55,18 @@ export default function SigilDownloader({ point, children }) {
52 const canvasRef = useRef(null);
55 const canvasRef = useRef(null);
53
56
54 return (
57 return (
58+ <>
59+ <DownloadButton
60+ as="span"
61+ disabled={downloaded}
62+ onClick={downloadSigil}
63+ detail={
55− <WithTooltip content={downloaded ? 'Downloaded!' : 'Download'}>
64+ downloaded ? 'Downloaded!' : 'Download the sigil for this point'
65+ }
66+ {...rest}>
56− {React.Children.map(children, child =>
67+ {children}
57− React.cloneElement(child, { onClick: downloadSigil })
68+ </DownloadButton>
58− )}
59 <canvas style={{ display: 'none' }} ref={canvasRef} />
69 <canvas style={{ display: 'none' }} ref={canvasRef} />
60− </WithTooltip>
70+ </>
61 );
71 );
62}
72}
src/views/Point.js+4−4
@@ -10,7 +10,7 @@ import Greeting from 'components/Greeting';
10import Passport from 'components/Passport';
10import Passport from 'components/Passport';
11import { ForwardButton, BootArvoButton } from 'components/Buttons';
11import { ForwardButton, BootArvoButton } from 'components/Buttons';
12import { matchBlinky } from 'components/Blinky';
12import { matchBlinky } from 'components/Blinky';
13−import SigilDownloader from 'components/SigilDownloader';
13+import DownloadSigilButton from 'components/SigilDownloader';
14
14
15import * as need from 'lib/need';
15import * as need from 'lib/need';
16import useInvites from 'lib/useInvites';
16import useInvites from 'lib/useInvites';
@@ -90,9 +90,7 @@ export default function Point() {
90 return (
90 return (
91 <View pop={pop} inset>
91 <View pop={pop} inset>
92 <Greeting point={point} />
92 <Greeting point={point} />
93− <SigilDownloader point={point}>
94− <Passport point={Just(point)} />
93+ <Passport point={Just(point)} />
95− </SigilDownloader>
96 <Grid className="pt2">
94 <Grid className="pt2">
97 {inviteButton}
95 {inviteButton}
98 <Grid.Item
96 <Grid.Item
@@ -117,6 +115,8 @@ export default function Point() {
117 )}
115 )}
118 <Grid.Item full as={BootArvoButton} />
116 <Grid.Item full as={BootArvoButton} />
119 <Grid.Divider />
117 <Grid.Divider />
118+ <Grid.Item full as={DownloadSigilButton} point={point} />
119+ <Grid.Divider />
120 </Grid>
120 </Grid>
121 </View>
121 </View>
122 );
122 );