-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #361 from newfold-labs/add/sitegen-sitelogo
SiteGen Site Logo Step
- Loading branch information
Showing
23 changed files
with
575 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { Button } from '@wordpress/components'; | ||
| import { Icon, chevronRight } from '@wordpress/icons'; | ||
|
|
||
| import { store as nfdOnboardingStore } from '../../../store'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| const ButtonNext = ( { disabled = false } ) => { | ||
| const { nextStep } = useSelect( ( select ) => { | ||
| return { | ||
| nextStep: select( nfdOnboardingStore ).getNextStep(), | ||
| }; | ||
| } ); | ||
| /* [TODO]: some sense of isStepComplete to enable/disable */ | ||
| const navigate = useNavigate(); | ||
| const navigateNext = () => { | ||
| if ( disabled ) { | ||
| return; | ||
| } | ||
|
|
||
| navigate( nextStep.path, { state: { origin: 'header' } } ); | ||
| }; | ||
| return ( | ||
| <Button | ||
| onClick={ () => navigateNext() } | ||
| className={ classNames( 'nfd-onboarding-button--next', { | ||
| 'nfd-onboarding-button--next--disabled': disabled, | ||
| } ) } | ||
| > | ||
| <span className="nfd-onboarding-button--next__text"> | ||
| { __( 'Next', 'wp-module-onboarding' ) } | ||
| </span> | ||
| <Icon | ||
| className="nfd-onboarding-button--next__icon" | ||
| icon={ chevronRight } | ||
| /> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default ButtonNext; |
21 changes: 21 additions & 0 deletions
21
src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .nfd-onboarding-button { | ||
|
|
||
| &--next { | ||
| background-color: var(--nfd-onboarding-primary); | ||
| color: var(--nfd-onboarding-secondary); | ||
| width: 80px; | ||
| height: 50px; | ||
| font-size: 15px; | ||
| border-radius: 8px; | ||
| padding: 16px; | ||
|
|
||
| &--disabled { | ||
| background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.4); | ||
|
|
||
| &:hover { | ||
| cursor: not-allowed; | ||
| color: var(--nfd-onboarding-secondary); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
168 changes: 168 additions & 0 deletions
168
src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| import { memo, useContext, useRef, useState } from '@wordpress/element'; | ||
| import { uploadImage } from '../../../../utils/api/uploader'; | ||
| import Spinner from '../../../Loaders/Spinner'; | ||
| import { ThemeContext } from '../../../ThemeContextProvider'; | ||
| import classNames from 'classnames'; | ||
| import { THEME_LIGHT } from '../../../../../constants'; | ||
|
|
||
| const ImageUploaderWithText = ( { image, imageSetter } ) => { | ||
| const inputRef = useRef( null ); | ||
| const { theme } = useContext( ThemeContext ); | ||
| const [ isUploading, setIsUploading ] = useState( false ); | ||
| const [ onDragActive, setOnDragActive ] = useState( false ); | ||
|
|
||
| async function updateItem( fileData ) { | ||
| if ( fileData ) { | ||
| setIsUploading( true ); | ||
| const res = await uploadImage( fileData ); | ||
| if ( res ) { | ||
| const id = res?.body?.id; | ||
| const url = res?.body?.source_url; | ||
| imageSetter( { | ||
| id, | ||
| url, | ||
| } ); | ||
| } | ||
| } | ||
|
|
||
| setIsUploading( false ); | ||
| } | ||
|
|
||
| const handleClick = () => { | ||
| inputRef?.current.click(); | ||
| }; | ||
|
|
||
| const handleDragEnter = ( e ) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setOnDragActive( true ); | ||
| }; | ||
|
|
||
| const handleDragLeave = ( e ) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setOnDragActive( false ); | ||
| }; | ||
|
|
||
| const handleDragOver = ( e ) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setOnDragActive( true ); | ||
| }; | ||
|
|
||
| const removeSelectedImage = () => { | ||
| imageSetter( { | ||
| id: 0, | ||
| url: '', | ||
| } ); | ||
| if ( inputRef?.current?.files.length > 0 ) { | ||
| inputRef.current.value = ''; | ||
| } | ||
| }; | ||
|
|
||
| const imageChange = ( e ) => { | ||
| if ( e?.target?.files && e?.target?.files.length > 0 ) { | ||
| updateItem( e?.target?.files[ 0 ] ); | ||
| } | ||
| }; | ||
|
|
||
| const handleDrop = ( e ) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setOnDragActive( false ); | ||
| if ( e?.dataTransfer?.files && e?.dataTransfer?.files.length > 0 ) { | ||
| if ( | ||
| e?.dataTransfer?.files[ 0 ]?.type.split( '/' )[ 0 ] === 'image' | ||
| ) { | ||
| updateItem( e?.dataTransfer?.files[ 0 ] ); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className={ `nfd-onboarding-image-uploader--with-text ${ | ||
| onDragActive && | ||
| 'nfd-onboarding-image-uploader--with-text--on-drag' | ||
| }` } | ||
| onDrop={ ( e ) => handleDrop( e ) } | ||
| onDragOver={ ( e ) => handleDragOver( e ) } | ||
| onDragEnter={ ( e ) => handleDragEnter( e ) } | ||
| onDragLeave={ ( e ) => handleDragLeave( e ) } | ||
| > | ||
| { isUploading ? ( | ||
| <Spinner /> | ||
| ) : ( | ||
| <> | ||
| { ( image === undefined || image?.id === 0 ) && ( | ||
| <> | ||
| <div className="nfd-onboarding-image-uploader--with-text__heading"> | ||
| <div | ||
| className={ classNames( | ||
| 'nfd-onboarding-image-uploader--with-text__heading__icon', | ||
| theme === THEME_LIGHT | ||
| ? 'nfd-onboarding-image-uploader--with-text__heading__icon--light' | ||
| : null | ||
| ) } | ||
| ></div> | ||
| <p className="nfd-onboarding-image-uploader--with-text__heading__text"> | ||
| <span className="nfd-onboarding-image-uploader--with-text__heading__text__drop"> | ||
| { __( | ||
| 'Drop your logo here, or ', | ||
| 'wp-module-onboarding' | ||
| ) } | ||
| </span> | ||
| <button | ||
| onClick={ handleClick } | ||
| className="nfd-onboarding-image-uploader--with-text__heading__text__modal" | ||
| > | ||
| { __( | ||
| 'browse', | ||
| 'wp-module-onboarding' | ||
| ) } | ||
| </button> | ||
| <input | ||
| className="nfd-onboarding-image-uploader--with-text__heading__text__input" | ||
| accept="image/*" | ||
| type="file" | ||
| ref={ inputRef } | ||
| onChange={ imageChange } | ||
| /> | ||
| </p> | ||
| </div> | ||
| <div className="nfd-onboarding-image-uploader--with-text__subheading"> | ||
| <p className="nfd-onboarding-image-uploader--with-text__subheading__text"> | ||
| { __( | ||
| 'supports .jpg, .png, .gif', | ||
| 'wp-module-onboarding' | ||
| ) } | ||
| </p> | ||
| </div> | ||
| </> | ||
| ) } | ||
| { image?.id !== 0 && image?.id !== undefined && ( | ||
| <> | ||
| <img | ||
| className="nfd-onboarding-image-uploader--with-text__site_logo" | ||
| src={ image?.url } | ||
| alt="Thumb" | ||
| /> | ||
| <div className="nfd-onboarding-image-uploader--with-text__site_logo-reset"> | ||
| <button | ||
| className="nfd-onboarding-image-uploader--with-text__site_logo-reset__button" | ||
| onClick={ removeSelectedImage } | ||
| > | ||
| { __( 'Reset', 'wp-module-onboarding' ) } | ||
| </button> | ||
| </div> | ||
| </> | ||
| ) } | ||
| </> | ||
| ) } | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default memo( ImageUploaderWithText ); |
Oops, something went wrong.