Skip to content

Commit af25ae0

Browse files
mdunnmonmdunnmon
authored
Merge pull request #3 from oslabs-beta/feature/tailwind
Feature/tailwind
2 parents 63c49c2 + 769e869 commit af25ae0

File tree

4 files changed

+178
-203
lines changed

4 files changed

+178
-203
lines changed

‎app/src/containers/AppContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ const AppContainer = (props) => {
5353

5454
return (
5555
<StyledEngineProvider injectFirst>
56-
// Mui theme provider provides themed styling to all MUI components in app
5756
<ThemeProvider theme={isThemeLight ? lightTheme : darkTheme}>
5857
<styleContext.Provider value={{ style, setStyle, isThemeLight }}>
5958
<div>

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 90 additions & 107 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
}
@@ -305,18 +305,24 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
305305
payload: { event: selectedEvent }
306306
});
307307
};
308-
const handleTailwind = (): Object => {
309-
console.log('stateusedobj',stateUsedObj)
310-
dispatch({ type: 'CHANGE TAILWIND', payload: true });
308+
309+
310+
const handleSave = (tailwind): Object => {
311+
if (tailwind !== true) {
312+
dispatch({
313+
type: 'CHANGE TAILWIND',
314+
payload: false
315+
})
316+
}
311317
dispatch({
312318
type: 'UPDATE STATE USED',
313-
payload: {stateUsedObj: stateUsedObj}
319+
payload: { stateUsedObj: stateUsedObj }
314320
})
315321

316322

317323
dispatch({
318324
type: 'UPDATE USE CONTEXT',
319-
payload: { useContextObj: useContextObj}
325+
payload: { useContextObj: useContextObj }
320326
})
321327

322328
const styleObj: any = {};
@@ -347,55 +353,17 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
347353
type: 'UPDATE EVENTS',
348354
payload: { events: eventsObj }
349355
});
350-
351356
return styleObj;
357+
};
358+
const handleTailwind = (): Object => {
352359

353-
354-
}
355-
356-
const handleSave = (): Object => {
357-
console.log('stateusedobj',stateUsedObj)
358-
dispatch({
359-
type: 'UPDATE STATE USED',
360-
payload: {stateUsedObj: stateUsedObj}
361-
})
362-
363-
364-
dispatch({
365-
type: 'UPDATE USE CONTEXT',
366-
payload: { useContextObj: useContextObj}
367-
})
368-
369-
const styleObj: any = {};
370-
if (displayMode !== '') styleObj.display = displayMode;
371-
if (flexDir !== '') styleObj.flexDirection = flexDir;
372-
if (flexJustify !== '') styleObj.justifyContent = flexJustify;
373-
if (flexAlign !== '') styleObj.alignItems = flexAlign;
374-
if (compWidth !== '') styleObj.width = compWidth;
375-
if (compHeight !== '') styleObj.height = compHeight;
376-
if (BGColor !== '') styleObj.backgroundColor = BGColor;
377-
dispatch({
378-
type: 'UPDATE CSS',
379-
payload: { style: styleObj }
380-
});
381-
382-
const attributesObj: any = {};
383-
if (compText !== '') attributesObj.compText = compText;
384-
if (compLink !== '') attributesObj.compLink = compLink;
385-
if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
386360
dispatch({
387-
type: 'UPDATE ATTRIBUTES',
388-
payload: { attributes: attributesObj }
361+
type: 'CHANGE TAILWIND',
362+
payload: true
389363
});
364+
handleSave(true)
365+
}
390366

391-
const eventsObj: any = {};
392-
if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
393-
dispatch({
394-
type: 'UPDATE EVENTS',
395-
payload: { events: eventsObj }
396-
});
397-
return styleObj;
398-
};
399367
// UNDO/REDO functionality--onClick these functions will be invoked.
400368
const handleUndo = () => {
401369
dispatch({ type: 'UNDO', payload: {} });
@@ -482,20 +450,20 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
482450
// the || is for either Mac or Windows OS
483451
// Undo
484452
(e.key === 'z' && e.metaKey && !e.shiftKey) ||
485-
(e.key === 'z' && e.ctrlKey && !e.shiftKey)
453+
(e.key === 'z' && e.ctrlKey && !e.shiftKey)
486454
? handleUndo()
487455
: // Redo
488456
(e.shiftKey && e.metaKey && e.key === 'z') ||
489457
(e.shiftKey && e.ctrlKey && e.key === 'z')
490-
? handleRedo()
491-
: // Delete HTML tag off canvas
492-
e.key === 'Backspace' && e.target.tagName !== "TEXTAREA" && e.target.tagName !== "INPUT"
493-
? handleDelete()
494-
: // Save
495-
(e.key === 's' && e.ctrlKey && e.shiftKey) ||
496-
(e.key === 's' && e.metaKey && e.shiftKey)
497-
? handleSave()
498-
: '';
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+
: '';
499467
}, []);
500468

501469
useEffect(() => {
@@ -505,28 +473,28 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
505473
};
506474
}, []);
507475

508-
if(state.canvasFocus.childId === null) {
476+
if (state.canvasFocus.childId === null) {
509477
return (
510478
<div className="column right" id="rightContainer" style={style}>
511479
<ProjectManager />
512-
<div className="rightPanelWrapper">
513-
<div>
514-
<div className={classes.rootConfigHeader}>
515-
<h4
516-
className={
517-
isThemeLight
518-
? classes.lightThemeFontColor
519-
: classes.darkThemeFontColor
520-
}
521-
>
522-
Parent Component:
523-
<br />
524-
<br />
525-
<span className={classes.rootCompName}>{configTarget.name}</span>
526-
</h4>
527-
</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>
528495
</div>
529496
</div>
497+
</div>
530498
<ProjectManager />
531499
</div>
532500
)
@@ -632,7 +600,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
632600
items={[
633601
{ value: '', text: 'default' },
634602
{ value: 'auto', text: 'auto' },
635-
{ value: '100%', text: '100%'},
603+
{ value: '100%', text: '100%' },
636604
{ value: '50%', text: '50%' },
637605
{ value: '25%', text: '25%' }
638606
]}
@@ -711,9 +679,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
711679
</div>
712680
<div>
713681
<UseStateModal
714-
updateAttributeWithState={updateAttributeWithState}
715-
attributeToChange="compText"
716-
childId={state.canvasFocus.childId}/>
682+
updateAttributeWithState={updateAttributeWithState}
683+
attributeToChange="compText"
684+
childId={state.canvasFocus.childId} />
717685
</div>
718686
</div>
719687
<div className={classes.configRow}>
@@ -745,8 +713,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
745713
</div>
746714
<div>
747715
<UseStateModal
748-
updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink"
749-
childId={state.canvasFocus.childId}/>
716+
updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink"
717+
childId={state.canvasFocus.childId} />
750718
</div>
751719
</div>
752720
<div className={classes.configRow}>
@@ -792,9 +760,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
792760
{ value: 'onMouseOver', text: 'onMouseOver' },
793761
{ value: 'onKeyDown', text: 'onKeyDown' }
794762
]}
795-
/>
763+
/>
796764
</div>
797-
{ eventAll[0] && (<div className={classes.configRow}>
765+
{eventAll[0] && (<div className={classes.configRow}>
798766
<div
799767
className={
800768
isThemeLight
@@ -818,8 +786,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
818786
placeholder="Function Name"
819787
/>
820788
</FormControl>
821-
</div> )}
822-
{ 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'}>
823791
<DataGrid
824792
rows={eventRow}
825793
columns={eventColumnTabs}
@@ -840,10 +808,25 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
840808
onClick={handleSave}
841809
id="saveButton"
842810
>
843-
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
844828
</Button>
845829
</div>
846-
<div onClick={handleTailwind}>tailwind</div>
847830
{configTarget.child ? (
848831
<div className={classes.buttonRow}>
849832
<Button

0 commit comments

Comments
 (0)