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;
}XML-RPC server accepts POST requests only.