Skip to content

Commit 769e869

Browse files
GarrettHutsonGarrettHutson
committed
makes tailwind mode fully functional
1 parent fee40ab commit 769e869

File tree

2 files changed

+89
-112
lines changed

2 files changed

+89
-112
lines changed

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 87 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, {
55
useMemo,
66
useCallback
77
} from 'react';
8-
import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
8+
import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
99
import {
1010
FormControl,
1111
TextField,
@@ -56,13 +56,13 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
5656

5757
const currFocus = getFocus().child;
5858

59-
useEffect( () => {
59+
useEffect(() => {
6060
currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
6161
setEventAll(['', '']);
6262
if (currFocus) {
6363
const addedEvent: [] = [];
64-
for (const [event, funcName] of Object.entries(currFocus?.events)){
65-
addedEvent.push({ id: event , funcName })
64+
for (const [event, funcName] of Object.entries(currFocus?.events)) {
65+
addedEvent.push({ id: event, funcName })
6666
}
6767
setEventRow(addedEvent);
6868
}
@@ -71,10 +71,10 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
7171
//this function allows properties to persist and appear in nested divs
7272
function deepIterate(arr) {
7373
const output = [];
74-
for(let i = 0; i < arr.length; i++) {
75-
if(arr[i].typeId === 1000) continue;
74+
for (let i = 0; i < arr.length; i++) {
75+
if (arr[i].typeId === 1000) continue;
7676
output.push(arr[i]);
77-
if(arr[i].children.length) {
77+
if (arr[i].children.length) {
7878
output.push(...deepIterate(arr[i].children));
7979
}
8080
}
@@ -186,19 +186,19 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
186186
if (currentChild.name !== 'input' && currentChild.name !== 'img')
187187
currentChild.children.forEach(child => searchArray.push(child));
188188
}
189-
189+
190190
// if type is Component, use child's typeId to search through state components and find matching component's name
191191
if (focusChild.type === 'Component') {
192192
focusTarget.child.type = 'component';
193193
focusTarget.child.name = state.components.find(
194-
comp => comp.id === focusChild.typeId
195-
).name;
196-
// if type is HTML Element, search through HTML types to find matching element's name
194+
comp => comp.id === focusChild.typeId
195+
).name;
196+
// if type is HTML Element, search through HTML types to find matching element's name
197197
} else if (focusChild.type === 'HTML Element') {
198198
focusTarget.child.type = 'HTML element';
199199
focusTarget.child.name = state.HTMLTypes.find(
200-
elem => elem.id === focusChild.typeId
201-
).name;
200+
elem => elem.id === focusChild.typeId
201+
).name;
202202
}
203203
}
204204
return focusTarget;
@@ -232,28 +232,28 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
232232
return isLinked;
233233
};
234234

235-
const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
235+
const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey = '') => {
236236
const newInput = statePropsRow.value;
237237
// get the stateProps of the componentProvider
238238
const currentComponent = state.components[state.canvasFocus.componentId - 1];
239-
let newContextObj = {...currentComponent.useContext};
240-
if(!newContextObj) {
239+
let newContextObj = { ...currentComponent.useContext };
240+
if (!newContextObj) {
241241
newContextObj = {};
242242
}
243243
if (!newContextObj[componentProviderId]) {
244-
newContextObj[componentProviderId] = {statesFromProvider : new Set()};
244+
newContextObj[componentProviderId] = { statesFromProvider: new Set() };
245245
}
246246
newContextObj[componentProviderId].statesFromProvider.add(statePropsId);
247247
if (attributeName === 'compText') {
248248
newContextObj[componentProviderId].compText = statePropsId;
249-
setStateUsedObj({...stateUsedObj, compText: stateKey, compTextProviderId: componentProviderId, compTextPropsId: statePropsId});
249+
setStateUsedObj({ ...stateUsedObj, compText: stateKey, compTextProviderId: componentProviderId, compTextPropsId: statePropsId });
250250
setCompText(newInput);
251251
setUseContextObj(newContextObj);
252252
}
253253

254254
if (attributeName === 'compLink') {
255255
newContextObj[componentProviderId].compLink = statePropsId;
256-
setStateUsedObj({...stateUsedObj, compLink: stateKey, compLinkProviderId: componentProviderId, compLinkPropsId: statePropsId});
256+
setStateUsedObj({ ...stateUsedObj, compLink: stateKey, compLinkProviderId: componentProviderId, compLinkPropsId: statePropsId });
257257
setCompLink(newInput);
258258
setUseContextObj(newContextObj);
259259
}
@@ -307,17 +307,22 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
307307
};
308308

309309

310-
const handleSave = (): Object => {
311-
console.log('stateusedobj',stateUsedObj)
310+
const handleSave = (tailwind): Object => {
311+
if (tailwind !== true) {
312+
dispatch({
313+
type: 'CHANGE TAILWIND',
314+
payload: false
315+
})
316+
}
312317
dispatch({
313318
type: 'UPDATE STATE USED',
314-
payload: {stateUsedObj: stateUsedObj}
319+
payload: { stateUsedObj: stateUsedObj }
315320
})
316321

317322

318323
dispatch({
319324
type: 'UPDATE USE CONTEXT',
320-
payload: { useContextObj: useContextObj}
325+
payload: { useContextObj: useContextObj }
321326
})
322327

323328
const styleObj: any = {};
@@ -351,55 +356,12 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
351356
return styleObj;
352357
};
353358
const handleTailwind = (): Object => {
354-
console.log('stateusedobj',stateUsedObj)
355-
dispatch({ type: 'CHANGE TAILWIND', payload: true });
356-
357-
358-
handleSave()
359-
360-
// dispatch({
361-
// type: 'UPDATE STATE USED',
362-
// payload: {stateUsedObj: stateUsedObj}
363-
// })
364-
365-
366-
// dispatch({
367-
// type: 'UPDATE USE CONTEXT',
368-
// payload: { useContextObj: useContextObj}
369-
// })
370-
371-
// const styleObj: any = {};
372-
// if (displayMode !== '') styleObj.display = displayMode;
373-
// if (flexDir !== '') styleObj.flexDirection = flexDir;
374-
// if (flexJustify !== '') styleObj.justifyContent = flexJustify;
375-
// if (flexAlign !== '') styleObj.alignItems = flexAlign;
376-
// if (compWidth !== '') styleObj.width = compWidth;
377-
// if (compHeight !== '') styleObj.height = compHeight;
378-
// if (BGColor !== '') styleObj.backgroundColor = BGColor;
379-
// dispatch({
380-
// type: 'UPDATE CSS',
381-
// payload: { style: styleObj }
382-
// });
383-
384-
// const attributesObj: any = {};
385-
// if (compText !== '') attributesObj.compText = compText;
386-
// if (compLink !== '') attributesObj.compLink = compLink;
387-
// if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
388-
// dispatch({
389-
// type: 'UPDATE ATTRIBUTES',
390-
// payload: { attributes: attributesObj }
391-
// });
392-
393-
// const eventsObj: any = {};
394-
// if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
395-
// dispatch({
396-
// type: 'UPDATE EVENTS',
397-
// payload: { events: eventsObj }
398-
// });
399-
400-
// return styleObj;
401-
402359

360+
dispatch({
361+
type: 'CHANGE TAILWIND',
362+
payload: true
363+
});
364+
handleSave(true)
403365
}
404366

405367
// UNDO/REDO functionality--onClick these functions will be invoked.
@@ -488,20 +450,20 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
488450
// the || is for either Mac or Windows OS
489451
// Undo
490452
(e.key === 'z' && e.metaKey && !e.shiftKey) ||
491-
(e.key === 'z' && e.ctrlKey && !e.shiftKey)
453+
(e.key === 'z' && e.ctrlKey && !e.shiftKey)
492454
? handleUndo()
493455
: // Redo
494456
(e.shiftKey && e.metaKey && e.key === 'z') ||
495457
(e.shiftKey && e.ctrlKey && e.key === 'z')
496-
? handleRedo()
497-
: // Delete HTML tag off canvas
498-
e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT"
499-
? handleDelete()
500-
: // Save
501-
(e.key === 's' && e.ctrlKey && e.shiftKey) ||
502-
(e.key === 's' && e.metaKey && e.shiftKey)
503-
? handleSave()
504-
: '';
458+
? handleRedo()
459+
: // Delete HTML tag off canvas
460+
e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT"
461+
? handleDelete()
462+
: // Save
463+
(e.key === 's' && e.ctrlKey && e.shiftKey) ||
464+
(e.key === 's' && e.metaKey && e.shiftKey)
465+
? handleSave()
466+
: '';
505467
}, []);
506468

507469
useEffect(() => {
@@ -511,28 +473,28 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
511473
};
512474
}, []);
513475

514-
if(state.canvasFocus.childId === null) {
476+
if (state.canvasFocus.childId === null) {
515477
return (
516478
<div className="column right" id="rightContainer" style={style}>
517479
<ProjectManager />
518-
<div className="rightPanelWrapper">
519-
<div>
520-
<div className={classes.rootConfigHeader}>
521-
<h4
522-
className={
523-
isThemeLight
524-
? classes.lightThemeFontColor
525-
: classes.darkThemeFontColor
526-
}
527-
>
528-
Parent Component:
529-
<br />
530-
<br />
531-
<span className={classes.rootCompName}>{configTarget.name}</span>
532-
</h4>
533-
</div>
480+
<div className="rightPanelWrapper">
481+
<div>
482+
<div className={classes.rootConfigHeader}>
483+
<h4
484+
className={
485+
isThemeLight
486+
? classes.lightThemeFontColor
487+
: classes.darkThemeFontColor
488+
}
489+
>
490+
Parent Component:
491+
<br />
492+
<br />
493+
<span className={classes.rootCompName}>{configTarget.name}</span>
494+
</h4>
534495
</div>
535496
</div>
497+
</div>
536498
<ProjectManager />
537499
</div>
538500
)
@@ -638,7 +600,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
638600
items={[
639601
{ value: '', text: 'default' },
640602
{ value: 'auto', text: 'auto' },
641-
{ value: '100%', text: '100%'},
603+
{ value: '100%', text: '100%' },
642604
{ value: '50%', text: '50%' },
643605
{ value: '25%', text: '25%' }
644606
]}
@@ -717,9 +679,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
717679
</div>
718680
<div>
719681
<UseStateModal
720-
updateAttributeWithState={updateAttributeWithState}
721-
attributeToChange="compText"
722-
childId={state.canvasFocus.childId}/>
682+
updateAttributeWithState={updateAttributeWithState}
683+
attributeToChange="compText"
684+
childId={state.canvasFocus.childId} />
723685
</div>
724686
</div>
725687
<div className={classes.configRow}>
@@ -751,8 +713,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
751713
</div>
752714
<div>
753715
<UseStateModal
754-
updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink"
755-
childId={state.canvasFocus.childId}/>
716+
updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink"
717+
childId={state.canvasFocus.childId} />
756718
</div>
757719
</div>
758720
<div className={classes.configRow}>
@@ -798,9 +760,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
798760
{ value: 'onMouseOver', text: 'onMouseOver' },
799761
{ value: 'onKeyDown', text: 'onKeyDown' }
800762
]}
801-
/>
763+
/>
802764
</div>
803-
{ eventAll[0] && (<div className={classes.configRow}>
765+
{eventAll[0] && (<div className={classes.configRow}>
804766
<div
805767
className={
806768
isThemeLight
@@ -824,8 +786,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
824786
placeholder="Function Name"
825787
/>
826788
</FormControl>
827-
</div> )}
828-
{ currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
789+
</div>)}
790+
{currFocus && Object.keys(currFocus.events).length !== 0 && (<div className={'event-table'}>
829791
<DataGrid
830792
rows={eventRow}
831793
columns={eventColumnTabs}
@@ -846,10 +808,25 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
846808
onClick={handleSave}
847809
id="saveButton"
848810
>
849-
SAVE
811+
CSS
812+
</Button>
813+
</div>
814+
<div >
815+
816+
<Button
817+
variant='contained'
818+
color="primary"
819+
className={
820+
isThemeLight
821+
? `${classes.button} ${classes.saveButtonLight}`
822+
: `${classes.button} ${classes.saveButtonDark}`
823+
}
824+
onClick={handleTailwind}
825+
id="tailwind"
826+
>
827+
Tailwind
850828
</Button>
851829
</div>
852-
<div onClick={handleTailwind}>tailwind</div>
853830
{configTarget.child ? (
854831
<div className={classes.buttonRow}>
855832
<Button

‎app/src/reducers/componentReducer.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -429,9 +429,9 @@ const reducer = (state: State, action: Action) => {
429429
return { ...state, components, nextTopSeparatorId };
430430
}
431431
case 'CHANGE TAILWIND' : {
432-
console.log('tailwind', state)
433-
return {...state, tailwind:true}
432+
return {...state, tailwind: action.payload}
434433
}
434+
435435
// Change the focus component and child
436436
case 'CHANGE FOCUS': {
437437
const {

0 commit comments

Comments
 (0)