diff options
Diffstat (limited to 'client/src/admin/jsx/creator/Step1.jsx')
-rw-r--r-- | client/src/admin/jsx/creator/Step1.jsx | 51 |
1 files changed, 42 insertions, 9 deletions
diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx index 647661e..3e2e05d 100644 --- a/client/src/admin/jsx/creator/Step1.jsx +++ b/client/src/admin/jsx/creator/Step1.jsx @@ -1,11 +1,23 @@ import React, { useState } from 'react'; import { WithHover, t, goTo } from '../../hocs'; +import { onKeyPress } from '../../helpers' -const Step1 = () => { - const [websiteTitle, setWebsiteTitle] = useState(''); - const [websiteDescription, setWebsiteDescription] = useState(''); +const Step1 = ({ setStep, data, setData }) => { + const [websiteTitle, setWebsiteTitle] = useState(data.websiteTitle || ''); + const [websiteDescription, setWebsiteDescription] = useState(data.websiteDescription || ''); const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : ''; + const uploadFavicon = () => ( + console.log('this will upload favicon') + ) + + const handleNext = () => { + if (isNextActive) { + setData({ ...data, websiteTitle, websiteDescription }); + setStep('step2'); + } + } + return ( <div className="creator"> <div className="creator__header">{ t('main-information') }</div> @@ -21,7 +33,9 @@ const Step1 = () => { className="text-input-field" value={websiteTitle} /> - <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label> + <label htmlFor="website-title" className="text-input-label"> + {`${t('website-title')} (${websiteTitle.length})`} + </label> </div> </WithHover> </div> @@ -32,16 +46,25 @@ const Step1 = () => { onChange={e => setWebsiteDescription(e.target.value)} id="website-description" name="website-description" - placeholder={t('website-description')}> + placeholder={t('website-description')} + value={websiteDescription} + > </textarea> - <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label> + <label htmlFor="website-description" className="text-area-label"> + {`${t('website-description')} (${websiteDescription.length})`} + </label> </div> </WithHover> </div> <div className="creator__input-line"> <div className='creator__favicon'> <WithHover message="upload-favicon-hover"> - <div className="creator__favicon-ico">+</div> + <div + className="creator__favicon-ico" + onKeyPress={onKeyPress} + onClick={uploadFavicon} + tabIndex="0" + >+</div> </WithHover> <span className="creator__favicon-text"> {t('upload-favicon')} @@ -50,12 +73,22 @@ const Step1 = () => { </div> <div className="creator__btns"> <WithHover message="creator-cancel-hover"> - <div onClick={goTo('main')} className="creator__btns-cancel"> + <div + onClick={goTo('main')} + onKeyPress={onKeyPress} + className="creator__btns-cancel" + tabIndex="0" + > {t('cancel')} </div> </WithHover> <WithHover message="creator-next-hover"> - <div className={`creator__btns-next ${isNextActive}`}> + <div + className={`creator__btns-next ${isNextActive}`} + onClick={handleNext} + onKeyPress={onKeyPress} + tabIndex={isNextActive ? "0" : "-1"} + > {t('next')} </div> </WithHover> |