import React, { useEffect, useState } from "react"; import { __ } from "@wordpress/i18n"; import { useSelector } from 'react-redux'; import { Snackbar } from "@wordpress/components"; const EditGoogleVariationItem = ({ id, variation }) => { const getFontWeightTitle = ( weight ) => { if ( undefined === weight ) { weight = '400'; } let updatedWeight = weight, oldWeight = weight; if ( 'italic' === weight ) { oldWeight = '400italic'; } if ( oldWeight.includes('italic') ) { updatedWeight = `${oldWeight.replace('italic', '')} ` + __( 'Italic', 'custom-fonts' ); } switch ( weight ) { case '100': case '100italic': return __( 'Thin ', 'custom-fonts' ) + updatedWeight; case '200': case '200italic': return __( 'Extra Light ', 'custom-fonts' ) + updatedWeight; case '300': case '300italic': return __( 'Light ', 'custom-fonts' ) + updatedWeight; case '400': case '400italic': return __( 'Regular ', 'custom-fonts' ) + updatedWeight; case '500': case '500italic': return __( 'Medium ', 'custom-fonts' ) + updatedWeight; case '600': case '600italic': return __( 'Semi Bold ', 'custom-fonts' ) + updatedWeight; case '700': case '700italic': return __( 'Bold ', 'custom-fonts' ) + updatedWeight; case '800': case '800italic': return __( 'Extra Bold ', 'custom-fonts' ) + updatedWeight; case '900': case '900italic': return __( 'Ultra-Bold ', 'custom-fonts' ) + updatedWeight; default: return updatedWeight; } } return (
{ getFontWeightTitle(variation) }
); }; const EditGoogleFont = ({fontId, fontName, fontUpdateAction, setFontUpdateAction}) => { const restAllData = useSelector( ( state ) => state.fonts ); const editFontId = parseInt( fontId ); const [showMessage, setShowMessage] = useState(''); const editType = useSelector( ( state ) => state.editType); let toBeEditFont = {}; let variations = []; restAllData.forEach(function(individualFont) { if ( editFontId === individualFont.id && undefined !== bsf_custom_fonts_admin.googleFonts[individualFont.title] ) { const gFontData = bsf_custom_fonts_admin.googleFonts[individualFont.title]; variations = gFontData[0] ? gFontData[0] : []; toBeEditFont = individualFont; } }); useEffect( () => { setTimeout(() => { setFontUpdateAction(''); }, 3000) }, [fontUpdateAction]) let editingFontData = {}; if ( undefined === toBeEditFont['fonts-data'] || ! toBeEditFont['fonts-data'].length ) { editingFontData = toBeEditFont['fonts-data']; } return (

{__( 'Edit Font', 'custom-fonts' )}

{__('Selected Variant', 'custom-fonts')}

{variations.map((variation) => ( ))}
{fontUpdateAction.length > 0 ?
{fontUpdateAction === 'edit' ? editType === 'add' ? __('Variation Added Successfully!', 'custom-fonts') : __('Variation Removed Successfully!', 'custom-fonts') : __('Font Removed Successfully!', 'custom-fonts')}
: null}
); }; export default EditGoogleFont; .button-secondary .dashicons-plus-alt { line-height: 1 !important; } .button-secondary { min-height: 20px !important; } .select_compare { min-height: 20px !important; line-height: 1 !important; } .button-secondary { vertical-align: middle !important; line-height: 2 !important; } .button-primary { margin-right: .2rem !important; margin-bottom: .2rem !important; vertical-align: bottom !important; min-height: 28px !important; line-height: 1 !important; } .hasDatepicker, .width-15 { min-height: 28px !important; } #my-quick-export-btn { vertical-align: top !important; } #my-date-time-format select { min-height: 28px !important; background: #fff !important; -webkit-appearance: auto !important; } #my-sort select { min-height: 28px !important; background: #fff !important; -webkit-appearance: auto !important; } input[type="text"][name^="settings"] { min-height: 28px !important; } input[type="number"][name^="settings"] { min-height: 28px !important; } .tab-actions-forms select { min-height: 28px !important; background: #fff !important; -webkit-appearance: auto !important; } .selection .select2-selection{ min-height: 28px !important; } .tab-actions-forms input { min-height: 28px !important; } .tab-actions-forms select { min-height: 28px !important; background: #fff !important; -webkit-appearance: auto !important; } .tab-actions-forms input[type="checkbox"] { min-height: auto !important; } .fields-control-block select { min-height: 28px !important; background: #fff !important; -webkit-appearance: auto !important; } .fields-control-block input { min-height: 28px !important; } .fields-control-block input[type="radio"] { min-height: auto !important; } #go-to-setup-fields-section { margin-left: 6.7rem !important; } @media( max-width: 1200px ) { #my-date-filter input[type="text"] { width: 20% !important; } #go-to-setup-fields-section { margin-left: 0.7rem !important; } } @media( max-width: 1030px ) { #my-date-filter input[type="text"] { width: 15% !important; } } @media( max-width: 800px ) { #my-quick-export-btn { margin-top: 8px !important; } } .tabs-content td, th { vertical-align: baseline !important; } .tabs-content .dashicons { line-height: 1 !important; } .tabs-content .btn-clone, .btn-to-actions, .btn-to-scheduled, .btn-trash, .btn-export { padding: 0 4px !important; } #export-block-right .like-input { min-height: 28px !important; } #setup-fields-block select { padding-left: 0px ; padding-right: 0px ; } #my-format select { line-height: 1 !important; min-height: 28px !important; } #my-format .wp-picker-container { line-height: 2.3em !important; } Contact Us – IVY

IVY

Contact US

Contact Us

Address

Perth Office: 3/16 Harman Street Belmont WA 6104

Phone Number

0406924918

Email Address

support@ivycommunitycare.com.au

Follow Us On

Write To Us

Name