From fca8f20c99a1f09ff3035a307d42ced670b09669 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 21 Dec 2022 16:01:12 +0530 Subject: [PATCH 1/4] Added New CSS and Toggle feature --- src/OnboardingSPA/components/MiniPreview/index.js | 12 ++++++++---- .../components/MiniPreview/stylesheet.scss | 13 +++++++++++-- .../components/SocialMediaForm/index.js | 9 ++++----- .../pages/Steps/BasicInfo/basicInfoForm.js | 5 +++++ 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js index 411c0452e..46d0bcc9e 100644 --- a/src/OnboardingSPA/components/MiniPreview/index.js +++ b/src/OnboardingSPA/components/MiniPreview/index.js @@ -9,7 +9,7 @@ import { translations } from '../../utils/locales/translations'; * * @returns */ -const MiniPreview = ({ title, desc, icon, socialData }) => { +const MiniPreview = ({ title, desc, icon, socialData, isSocialFormOpen, setIsSocialFormOpen }) => { var iconPreview = icon == "" || icon == undefined ? content.icon : icon; var titlePreview = title == "" ? sprintf(__(content.title, 'wp-module-onboarding'), translations('Site')) : title; @@ -72,10 +72,14 @@ const MiniPreview = ({ title, desc, icon, socialData }) => { function socialIconList() { var socialIconList = [] socialDataset.map( (socialInfo) => { - !socialInfo.url || - socialIconList.push( -
) + socialIconList.push( +
setIsSocialFormOpen(!isSocialFormOpen)} + className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`} + style={{ backgroundImage: socialInfo.image }} /> + ) }) + console.log(socialIconList); return socialIconList; } diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 9f8098106..24dd803ab 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -88,8 +88,11 @@ $title-browser-color: #3858E9; justify-content: flex-start; &_icon{ + opacity: 1; width: 24px; height: 24px; + filter: none; + cursor: pointer; text-align: center; padding-right: 6px; background-position: center; @@ -97,8 +100,14 @@ $title-browser-color: #3858E9; background-clip: padding-box; transition: opacity 0.4s ease-in-out; - &.invalid-url { - opacity: 0.8; + &.--no-url { + opacity: 0.5; + filter: grayscale(1); + } + + &.--invalid-url { + opacity: 0.75; + filter: none; } } } diff --git a/src/OnboardingSPA/components/SocialMediaForm/index.js b/src/OnboardingSPA/components/SocialMediaForm/index.js index 340048175..26ebd5c44 100644 --- a/src/OnboardingSPA/components/SocialMediaForm/index.js +++ b/src/OnboardingSPA/components/SocialMediaForm/index.js @@ -4,8 +4,7 @@ import { useState, useEffect } from '@wordpress/element'; import Tooltip from './../Tooltip' -const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => { - const [isActive, setIsActive] = useState(false); +const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials, isSocialFormOpen, setIsSocialFormOpen }) => { const [facebook, setFacebook] = useState(""); const [twitter, setTwitter] = useState(""); const [instagram, setInstagram] = useState(""); @@ -131,7 +130,7 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => { const checkValidUrlDebounce = _.debounce(checkValidUrl, 1000); const handleAccordion = (e) => { - setIsActive(!isActive); + setIsSocialFormOpen(!isSocialFormOpen); } const handleChange = (e) => { @@ -222,9 +221,9 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials }) => { 'wp-module-onboarding' )}
-
+
-
{ handleSubmit(e) }}> + { handleSubmit(e) }}> {buildSocialBoxes()}
diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js index a8b992830..015b4ebbf 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js @@ -29,6 +29,7 @@ const BasicInfoForm = () => { const [ siteLogo, setSiteLogo ] = useState( 0 ); const [ socialData, setSocialData ] = useState( '' ); const [ isValidSocials, setIsValidSocials ] = useState( false ); + const [ isSocialFormOpen, setIsSocialFormOpen ] = useState( false ); const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); const { editEntityRecord } = useDispatch( coreStore ); @@ -187,7 +188,9 @@ const BasicInfoForm = () => { @@ -201,6 +204,8 @@ const BasicInfoForm = () => { title={ siteTitle } desc={ siteDesc } socialData={ socialData } + isSocialFormOpen={ isSocialFormOpen } + setIsSocialFormOpen={ setIsSocialFormOpen } /> From b358103afab665654258ae1583cd0d12666fecf9 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 26 Dec 2022 13:43:12 +0530 Subject: [PATCH 2/4] Review Comments --- src/OnboardingSPA/components/MiniPreview/index.js | 1 - .../pages/Steps/BasicInfo/basicInfoForm.js | 10 ++++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js index 46d0bcc9e..d67597062 100644 --- a/src/OnboardingSPA/components/MiniPreview/index.js +++ b/src/OnboardingSPA/components/MiniPreview/index.js @@ -79,7 +79,6 @@ const MiniPreview = ({ title, desc, icon, socialData, isSocialFormOpen, setIsSoc style={{ backgroundImage: socialInfo.image }} /> ) }) - console.log(socialIconList); return socialIconList; } diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js index 015b4ebbf..8e3152fb3 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js @@ -1,7 +1,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; -import { useState, useEffect } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; +import { useState, useEffect, useRef } from '@wordpress/element'; import content from './content.json'; import TextInput from '../../../components/TextInput'; @@ -19,6 +19,7 @@ import { translations } from '../../../utils/locales/translations'; * @return */ const BasicInfoForm = () => { + const socialMediaRef = useRef(null); const [ isError, setIsError ] = useState( false ); const [ flowData, setFlowData ] = useState(); const [ isLoaded, setisLoaded ] = useState( false ); @@ -65,6 +66,11 @@ const BasicInfoForm = () => { return dataToSave; } + useEffect(() => { + if(isSocialFormOpen) + socialMediaRef.current.scrollIntoView(); + }, [isSocialFormOpen]); + useEffect( () => { async function getFlowData() { const socialDataAPI = await getSettings(); @@ -184,7 +190,7 @@ const BasicInfoForm = () => { textValue={ siteDesc } textValueSetter={ setSiteDesc } /> -
+
Date: Mon, 2 Jan 2023 13:09:58 +0530 Subject: [PATCH 3/4] Replaced with MAP --- src/OnboardingSPA/components/MiniPreview/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js index d67597062..a49f3e638 100644 --- a/src/OnboardingSPA/components/MiniPreview/index.js +++ b/src/OnboardingSPA/components/MiniPreview/index.js @@ -70,16 +70,14 @@ const MiniPreview = ({ title, desc, icon, socialData, isSocialFormOpen, setIsSoc } function socialIconList() { - var socialIconList = [] - socialDataset.map( (socialInfo) => { - socialIconList.push( + return socialDataset.map( (socialInfo) => { + return (
setIsSocialFormOpen(!isSocialFormOpen)} className={`browser-content_social_icon ${socialInfo.url ? isValidUrl(socialInfo.url) || '--invalid-url' : '--no-url' }`} style={{ backgroundImage: socialInfo.image }} /> - ) - }) - return socialIconList; + ) + }) } return ( From 11f498323c34f5798c44d7cc8b2dda0e99f8ac92 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 2 Jan 2023 13:10:30 +0530 Subject: [PATCH 4/4] Fixed a Error --- src/OnboardingSPA/components/SocialMediaForm/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/SocialMediaForm/index.js b/src/OnboardingSPA/components/SocialMediaForm/index.js index 26ebd5c44..16f24265e 100644 --- a/src/OnboardingSPA/components/SocialMediaForm/index.js +++ b/src/OnboardingSPA/components/SocialMediaForm/index.js @@ -104,11 +104,10 @@ const SocialMediaForm = ({ socialData, setSocialData, setIsValidSocials, isSocia } } - setDataAndActiveErrorState( data, activeError); + setDataAndActiveErrorState(data, socialInput, activeError); } - const setDataAndActiveErrorState = (data, activeError) => { - + const setDataAndActiveErrorState = (data, socialInput, activeError) => { if (!data){ var activeErrorFiltered = activeError.filter(function (item) { return item !== socialInput