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

16
src/FrameChooser.js
View file

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

16
src/HashtagChooser.js
View file

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