bisheng/visual-blueprint-builder
1
0
Fork 0
mirror of https://fast.feibisi.com/https://github.com/lubusIN/visual-blueprint-builder.git synced 2025-10-03 04:01:24 +08:00
Code Issues Projects Packages Activity Actions

fix(ui): remove skip button, add loader, fix spacing and fix close gallery modal on import (#70)

Browse source
This commit is contained in:
Cy-Yaksh 2025-05-27 13:06:45 +05:30
parent 459e58cc18
commit 497ff0e35c
3 changed files with 43 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/editor/blueprint-gallery.js
View file

@ -14,6 +14,7 @@ import {
__experimentalHeading as Heading,
__experimentalGrid as Grid,
__experimentalVStack as VStack,
Spinner,
} from '@wordpress/components';

/**
@ -26,6 +27,7 @@ function Gallery({ label = 'Gallery', icon = null, handleClose }) {
const { createNotice } = useDispatch(noticesStore);
const [isModalOpen, setModalOpen] = useState(false);
const [blueprintList, setBlueprintList] = useState(null);
const [importingBlueprint, setImportingBlueprint] = useState(null);

/**
* Fetches the list of blueprints from the remote JSON file.
@ -62,6 +64,8 @@ function Gallery({ label = 'Gallery', icon = null, handleClose }) {
};

const fetchBlueprintDetails = async (blueprintName) => {
setImportingBlueprint(blueprintName);

const blueprintUrl = `https://raw.githubusercontent.com/WordPress/blueprints/trunk/${blueprintName}`;
try {
const response = await fetch(blueprintUrl);
@ -81,11 +85,14 @@ function Gallery({ label = 'Gallery', icon = null, handleClose }) {
...defaultValues,
...validatedData,
};

// Pass the processed data to the handler
handleBlueprintData(mergedData, createNotice, updateBlueprintConfig);
await handleBlueprintData(mergedData, createNotice, updateBlueprintConfig);
} catch (error) {
createNotice('error', __('Error fetching blueprint from Gallery', 'wp-playground-blueprint-editor') + `: ${error.message}`);
} finally {
setImportingBlueprint(null); // Stop loader
setModalOpen(false);
if (handleClose) handleClose();
}
};

@ -119,7 +126,6 @@ function Gallery({ label = 'Gallery', icon = null, handleClose }) {
{Object.entries(blueprintList).map(([blueprintName, blueprintDetails], index) => (
<Card
key={index}
elevation={3}
>
<CardBody style={{ height: '100%', justifyContent: 'space-between', display: 'flex', flexDirection: 'column' }}>
{/* Blueprint Info */}
@ -134,7 +140,7 @@ function Gallery({ label = 'Gallery', icon = null, handleClose }) {
lineHeight={'1.5em'}
size={15}
color='#777'
style={{wordBreak: 'break-word'}}
style={{ wordBreak: 'break-word' }}
>
{blueprintDetails.description}
</Text>
@ -145,10 +151,18 @@ function Gallery({ label = 'Gallery', icon = null, handleClose }) {
style={{
borderRadius: '4px',
alignSelf: 'flex-end',
marginTop: '16px'
}}
onClick={() => { fetchBlueprintDetails(blueprintName); handleClose(); }}
onClick={() => fetchBlueprintDetails(blueprintName)}
disabled={importingBlueprint === blueprintName}
>
{__('Import', 'wp-playground-blueprint-editor')}
{importingBlueprint === blueprintName ? (
<>
<Spinner /> {' '} {__('Importing...', 'wp-playground-blueprint-editor')}
</>
) : (
__('Import', 'wp-playground-blueprint-editor')
)}
</Button>
</CardBody>
</Card>

3
src/editor/onboarding.js
View file

@ -62,9 +62,6 @@ const OnboardingModal = () => {
>
{__('Blank', 'wp-playground-blueprint-editor')}
</Button>
<Button variant="tertiary" onClick={handleClose}>
{__('Skip', 'wp-playground-blueprint-editor')}
</Button>
</Grid>
</Modal>
);

33
src/editor/open-json.js
View file

@ -1,25 +1,32 @@
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { FormFileUpload, DropZone } from '@wordpress/components';
import { FormFileUpload, DropZone, Spinner } from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';
import { handleBlueprintData, useBlueprintData } from './utils'
import { useState } from '@wordpress/element';

const OpenJson = ({ label = 'Open', icon = null, handleClose }) => {
const { createNotice } = useDispatch(noticesStore);
const { updateBlueprintConfig } = useBlueprintData();
const [isUploadingJson, setIsUploadingJson] = useState(false);

// Process JSON file content
const processJsonFile = (file) => {
const processJsonFile = async (file) => {
if (file.type === 'application/json') {
const reader = new FileReader();
reader.onload = () => {
reader.onload = async () => {
try {
const jsonData = JSON.parse(reader.result);
handleBlueprintData(jsonData, createNotice, updateBlueprintConfig);
setIsUploadingJson(true); // Show spinner
await handleBlueprintData(jsonData, createNotice, updateBlueprintConfig);
if (handleClose) handleClose();
}
catch (err) {
createNotice('error', __('Invalid JSON file.', 'wp-playground-blueprint-editor'));
}
finally {
setIsUploadingJson(false); // Hide spinner
}
};
reader.readAsText(file);
} else {
@ -32,7 +39,6 @@ const OpenJson = ({ label = 'Open', icon = null, handleClose }) => {
const file = event.target.files[0];
if (file) {
processJsonFile(file);
handleClose();
}
};

@ -50,15 +56,22 @@ const OpenJson = ({ label = 'Open', icon = null, handleClose }) => {
className='upload_blueprint_json'
accept="application/json"
onChange={handleFileSelection}
icon={icon}
icon={null}
style={{
height: '100%',
flexDirection: 'column',
padding:'13px'
padding: '13px'
}}
>
{__(label, 'wp-playground-blueprint-editor')}

>
{!isUploadingJson && (<>
{icon && (
<span style={{ width: 24, height: 24, display: 'inline-block' }}>
{icon}
</span>
)}
{__(label, 'wp-playground-blueprint-editor')}
</>)}
{isUploadingJson && (<Spinner style={{ margin: 0 }} />)}
<DropZone
onFilesDrop={handleFileDrop}
accept="application/json"