VoltEuropa/profile.volt.link
VoltEuropa/profile.volt.link
1
0
Fork 0
mirror of https://github.com/voltbonn/profile-picture-generator.git synced 2024-12-22 07:45:04 +00:00
Code Activity

send more data in the onChange events

Browse source
This commit is contained in:
thomasrosen 2021-04-21 00:00:34 +02:00
parent 9524f62fda
commit f3587e6f16
3 changed files with 30 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/App.js
View file

@ -72,12 +72,14 @@ function trigger_download(name, data){
} }
function App({ getString }) { function App({ getString }) {
const [frameURL, setFrameURL] = useState(null) const [frame, setFrame] = useState(null)
const [hashtagURL, setHashtagURL] = useState(null) const [hashtag, setHashtag] = useState(null)
const [originalPhoto, setOriginalPhoto] = useState(null) const [originalPhoto, setOriginalPhoto] = useState(null)
const [originalPhotoRation, setOriginalPhotoRation] = useState(1) const [originalPhotoRation, setOriginalPhotoRation] = useState(1)
const [orientation, set_orientation] = useState(null) const [orientation, set_orientation] = useState(null)
const frameURL = !!frame ? frame.src : null
const hashtagURL = !!hashtag ? hashtag.src : null
// const [combinedImage, set_combinedImage] = useState(null) // const [combinedImage, set_combinedImage] = useState(null)
@ -86,13 +88,13 @@ function App({ getString }) {
const [cords, setCords] = useState({x:0, y:0, scale:1}) const [cords, setCords] = useState({x:0, y:0, scale:1})
const handleFrameURL = useCallback(newFrameURL => { const handleFrame = useCallback(newFrame => {
setFrameURL(newFrameURL) setFrame(newFrame)
}, [setFrameURL]) }, [setFrame])
const handleHashtagURL = useCallback(newHashtagURL => { const handleHashtag = useCallback(newHashtag => {
setHashtagURL(newHashtagURL) setHashtag(newHashtag)
}, [setHashtagURL]) }, [setHashtag])
const handleCordsChange = useCallback(({x, y, scale}) => { const handleCordsChange = useCallback(({x, y, scale}) => {
setCords({ x, y, scale }) setCords({ x, y, scale })
@ -302,9 +304,9 @@ function App({ getString }) {
{true || !!originalPhoto ? (<> {true || !!originalPhoto ? (<>
<h2><Localized id="title_choose_frame" /></h2> <h2><Localized id="title_choose_frame" /></h2>
<FrameChooser onChange={handleFrameURL} /> <FrameChooser onChange={handleFrame} />
<h2><Localized id="title_choose_hashtag" /></h2> <h2><Localized id="title_choose_hashtag" /></h2>
<HashtagChooser onChange={handleHashtagURL} /> <HashtagChooser onChange={handleHashtag} />
</>) : null} </>) : null}
{!!originalPhoto && !!frameURL && !!handleHashtagURL ? (<> {!!originalPhoto && !!frameURL && !!handleHashtagURL ? (<>

16
src/FrameChooser.js
View file

@ -4,6 +4,8 @@ function FrameChooser({onChange}) {
const [frames, setFrames] = useState([]) const [frames, setFrames] = useState([])
const [choosenFrame, setChoosenFrame] = useState(null) const [choosenFrame, setChoosenFrame] = useState(null)
const choosenFrameSRC = !!choosenFrame ? choosenFrame.src : null
useEffect(() => { useEffect(() => {
async function loadFrames(){ async function loadFrames(){
Promise.all( Promise.all(
@ -21,20 +23,20 @@ function FrameChooser({onChange}) {
.map(async frame_filename => { .map(async frame_filename => {
return { return {
name: frame_filename, name: frame_filename,
src: await import(`./frames/${frame_filename}.png`), src: (await import(`./frames/${frame_filename}.png`)).default,
} }
}) })
) )
.then(new_frames => { .then(new_frames => {
setFrames(new_frames) setFrames(new_frames)
setChoosenFrame(new_frames[0].src.default) setChoosenFrame(new_frames[0])
}) })
} }
loadFrames() loadFrames()
}, []) }, [])
const handleImageChoosing = useCallback(event => { const handleImageChoosing = useCallback(frame => {
setChoosenFrame(event.target.dataset.src) setChoosenFrame(frame)
}, [setChoosenFrame]) }, [setChoosenFrame])
useEffect(() => { useEffect(() => {
@ -45,13 +47,13 @@ function FrameChooser({onChange}) {
<div className="FrameChooser"> <div className="FrameChooser">
{ {
frames.map(frame => { frames.map(frame => {
const frame_src_path = frame.src.default const frame_src_path = frame.src
const isChoosen = choosenFrame === frame_src_path const isChoosen = choosenFrameSRC === frame_src_path
return <div return <div
key={frame_src_path} key={frame_src_path}
data-src={frame_src_path} data-src={frame_src_path}
className={isChoosen ? 'frame choosen' : 'frame'} className={isChoosen ? 'frame choosen' : 'frame'}
onClick={handleImageChoosing} onClick={() => handleImageChoosing(frame)}
> >
<img alt={frame.name} src={frame_src_path} /> <img alt={frame.name} src={frame_src_path} />
</div> </div>

16
src/HashtagChooser.js
View file

@ -5,6 +5,8 @@ function HashtagChooser({ onChange, getString }) {
const [frames, setFrames] = useState([]) const [frames, setFrames] = useState([])
const [choosenFrame, setChoosenFrame] = useState(null) const [choosenFrame, setChoosenFrame] = useState(null)
const choosenFrameSRC = !!choosenFrame ? choosenFrame.src : null
useEffect(() => { useEffect(() => {
async function loadFrames() { async function loadFrames() {
Promise.all( Promise.all(
@ -38,20 +40,20 @@ function HashtagChooser({ onChange, getString }) {
.map(async frame_filename => { .map(async frame_filename => {
return { return {
name: frame_filename, name: frame_filename,
src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`), src: frame_filename === '' ? '' : (await import(`./hashtags/${frame_filename}.png`)).default,
} }
}) })
) )
.then(new_frames => { .then(new_frames => {
setFrames(new_frames) setFrames(new_frames)
setChoosenFrame(new_frames[0].src.default) setChoosenFrame(new_frames[0])
}) })
} }
loadFrames() loadFrames()
}, []) }, [])
const handleImageChoosing = useCallback(event => { const handleImageChoosing = useCallback(frame => {
setChoosenFrame(event.target.dataset.src) setChoosenFrame(frame)
}, [setChoosenFrame]) }, [setChoosenFrame])
useEffect(() => { useEffect(() => {
@ -62,9 +64,9 @@ function HashtagChooser({ onChange, getString }) {
<div className="HashtagChooser"> <div className="HashtagChooser">
{ {
frames.map(frame => { frames.map(frame => {
const frame_src_path = frame.src.default const frame_src_path = frame.src
const isChoosen = choosenFrame === frame_src_path const isChoosen = choosenFrameSRC === frame_src_path
return <button key={frame.name} data-src={frame_src_path} className={isChoosen ? 'isInRow choosen' : 'isInRow'} onClick={handleImageChoosing}> return <button key={frame.name} data-src={frame_src_path} className={isChoosen ? 'isInRow choosen' : 'isInRow'} onClick={() => handleImageChoosing(frame)}>
{frame.name === '' ? getString('button_no_hashtag') : frame.name} {frame.name === '' ? getString('button_no_hashtag') : frame.name}
</button> </button>
}) })