Skip to content

Commit aa558be

Browse files
noahFavelonoahFavelo
committed
change prop casing so react dosent yell, also make it so that text in nestable elements is done properly.
1 parent 2d16151 commit aa558be

File tree

6 files changed

+45
-38
lines changed

6 files changed

+45
-38
lines changed

‎__tests__/componentBuilder.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ describe('componentBuilder', () => {
124124
name: 'p',
125125
childId: 4,
126126
style: {},
127-
attributes: { compText: 'Hello, world!' },
127+
attributes: { comptext: 'Hello, world!' },
128128
events: {},
129129
stateProps: [],
130130
passedInProps: [],

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
7474
const [flexAlign, setFlexAlign] = useState('');
7575
const [flexOptionsVisible, setFlexOptionsVisible] = useState(false);
7676
const [BGColor, setBGColor] = useState('');
77-
const [compText, setCompText] = useState('');
77+
const [comptext, setcomptext] = useState('');
7878
const [compLink, setCompLink] = useState('');
7979
const [cssClasses, setCssClasses] = useState('');
8080
const [compWidth, setCompWidth] = useState('');
@@ -153,7 +153,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
153153
if (configTarget.child && element.childId === configTarget.child.id) {
154154
const attributes = element.attributes;
155155
const style = element.style;
156-
setCompText(attributes.compText ? attributes.compText : '');
156+
setcomptext(attributes.comptext ? attributes.comptext : '');
157157
setCompLink(attributes.compLink ? attributes.compLink : '');
158158
setCssClasses(attributes.cssClasses ? attributes.cssClasses : '');
159159
}
@@ -200,8 +200,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
200200
case 'bgcolor':
201201
setBGColor(inputVal);
202202
break;
203-
case 'compText':
204-
setCompText(inputVal);
203+
case 'comptext':
204+
setcomptext(inputVal);
205205
break;
206206
case 'compLink':
207207
setCompLink(inputVal);
@@ -321,15 +321,15 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
321321
newContextObj[componentProviderId] = { statesFromProvider: new Set() };
322322
}
323323
newContextObj[componentProviderId].statesFromProvider.add(statePropsId);
324-
if (attributeName === 'compText') {
325-
newContextObj[componentProviderId].compText = statePropsId;
324+
if (attributeName === 'comptext') {
325+
newContextObj[componentProviderId].comptext = statePropsId;
326326
setStateUsedObj({
327327
...stateUsedObj,
328-
compText: stateKey,
329-
compTextProviderId: componentProviderId,
330-
compTextPropsId: statePropsId
328+
comptext: stateKey,
329+
comptextProviderId: componentProviderId,
330+
comptextPropsId: statePropsId
331331
});
332-
setCompText(newInput);
332+
setcomptext(newInput);
333333
setUseContextObj(newContextObj);
334334
}
335335

@@ -419,7 +419,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
419419
dispatch(updateCss({ style: styleObj, contextParam: contextParam }));
420420

421421
const attributesObj: any = {};
422-
if (compText !== '') attributesObj.compText = compText;
422+
if (comptext !== '') attributesObj.comptext = comptext;
423423
if (compLink !== '') attributesObj.compLink = compLink;
424424
if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
425425
dispatch(
@@ -768,14 +768,14 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
768768
<div className={classes.configValue}>
769769
<FormControl className={classes.formControl}>
770770
<TextField
771-
name="compText"
771+
name="comptext"
772772
className={classes.select}
773773
inputProps={{
774774
className: isThemeLight
775775
? `${classes.selectInput} ${classes.lightThemeFontColor}`
776776
: `${classes.selectInput} ${classes.darkThemeFontColor}`
777777
}}
778-
value={compText}
778+
value={comptext}
779779
onChange={handleChange}
780780
placeholder="text"
781781
/>
@@ -784,7 +784,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
784784
<div>
785785
<UseStateModal
786786
updateAttributeWithState={updateAttributeWithState}
787-
attributeToChange="compText"
787+
attributeToChange="comptext"
788788
childId={state.canvasFocus.childId}
789789
/>
790790
</div>

‎app/src/helperFunctions/componentBuilder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const componentBuilder = (
1818
const elementType = element.name;
1919
const childId = element.childId;
2020
const elementStyle = element.style;
21-
const innerText = element.attributes.compText;
21+
const innerText = element.attributes.comptext;
2222
const classRender = element.attributes.cssClasses;
2323
const activeLink = element.attributes.compLink;
2424

‎app/src/helperFunctions/generateCode.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -312,11 +312,11 @@ const generateUnformattedCode = (
312312
let innerText = '';
313313
let activeLink = '""';
314314

315-
if (childElement.attributes && childElement.attributes.compText) {
315+
if (childElement.attributes && childElement.attributes.comptext) {
316316
innerText =
317-
childElement.stateUsed && childElement.stateUsed.compText
318-
? `{${childElement.stateUsed.compText}}`
319-
: childElement.attributes.compText;
317+
childElement.stateUsed && childElement.stateUsed.comptext
318+
? `{${childElement.stateUsed.comptext}}`
319+
: childElement.attributes.comptext;
320320
}
321321

322322
if (childElement.attributes && childElement.attributes.compLink) {
@@ -346,10 +346,15 @@ const generateUnformattedCode = (
346346

347347
const tagDetails = elementTagDetails(childElement);
348348
if (isNestable) {
349+
// console.log( // NO, just no...
350+
// 'this is a nestable element so we cant put anything inside of it.'
351+
// );
349352
if (childElement.children) {
350353
const childJsx = writeNestedElements(childElement.children, level + 1);
351354
jsxArray.push(`${indentation}<${childElement.tag} ${tagDetails}>`);
352355
jsxArray.push(...childJsx);
356+
jsxArray.push(innerText); //NOTE, we are just sticking this on to the end, technically in react you can put it in the middle tho but there is not even a button for setting where the text goes.
357+
// we could have an 'empty' element if we wanted to do text.
353358
jsxArray.push(`${indentation}</${childElement.tag}>`);
354359
} else {
355360
jsxArray.push(`${indentation}<${childElement.tag} ${tagDetails} />`);
@@ -360,6 +365,8 @@ const generateUnformattedCode = (
360365
);
361366
}
362367

368+
// who is the genius who decided that if an element is nestable then it can not have inner text?
369+
363370
return jsxArray;
364371
};
365372

‎app/src/interfaces/Interfaces.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,16 +171,16 @@ export interface ManageSeparators {
171171
}
172172

173173
export interface StateUsed {
174-
compTextProviderId: number;
175-
compTextPropsId: number;
176-
compText: string;
174+
comptextProviderId: number;
175+
comptextPropsId: number;
176+
comptext: string;
177177
compLinkProviderId: number;
178178
compLinkPropsId: number;
179179
compLink: string;
180180
}
181181

182182
export interface Attributes {
183-
compText?: string;
183+
comptext?: string;
184184
compLink?: string;
185185
cssClasses?: string;
186186
}

‎app/src/redux/reducers/slice/appStateSlice.ts

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -699,14 +699,14 @@ const appStateSlice = createSlice({
699699
for (let i = 0; i < components.length; i++) {
700700
//if the component uses context from component being deleted
701701
if (components[i].useContext && components[i].useContext[id]) {
702-
// iterate over children to see where it is being used, then reset that compText/compLink/useState
702+
// iterate over children to see where it is being used, then reset that comptext/compLink/useState
703703
for (let child of components[i].children) {
704704
if (child.stateUsed) {
705-
if (child.stateUsed.compTextProviderId === id) {
706-
child.attributes.compText = '';
707-
delete child.stateUsed.compText;
708-
delete child.stateUsed.compTextProviderId;
709-
delete child.stateUsed.compTextPropsId;
705+
if (child.stateUsed.comptextProviderId === id) {
706+
child.attributes.comptext = '';
707+
delete child.stateUsed.comptext;
708+
delete child.stateUsed.comptextProviderId;
709+
delete child.stateUsed.comptextPropsId;
710710
}
711711
if (child.stateUsed.compLinkProviderId === id) {
712712
child.attributes.compLink = '';
@@ -1241,25 +1241,25 @@ const appStateSlice = createSlice({
12411241
// we then iterate through the rest of the components
12421242
// check if a useContext if created and if the useContext contains the providerId
12431243
// we then delete from the set, statesFromProvider, the row id, and regenerate the code
1244-
// Ex: useContext {1: {statesFromProvider: Set, compLink, compText}, 2 : ..., 3 : ...}
1244+
// Ex: useContext {1: {statesFromProvider: Set, compLink, comptext}, 2 : ..., 3 : ...}
12451245
if (
12461246
component.useContext &&
12471247
component.useContext[state.canvasFocus.componentId]
12481248
) {
12491249
component.useContext[
12501250
state.canvasFocus.componentId
12511251
].statesFromProvider.delete(action.payload.rowId);
1252-
// iterate over children to see where it is being used, then reset that compText/compLink/useState
1252+
// iterate over children to see where it is being used, then reset that comptext/compLink/useState
12531253
for (let child of component.children) {
12541254
if (child.stateUsed) {
12551255
if (
1256-
child.stateUsed.compTextProviderId === currComponent.id &&
1257-
child.stateUsed.compTextPropsId === action.payload.rowId
1256+
child.stateUsed.comptextProviderId === currComponent.id &&
1257+
child.stateUsed.comptextPropsId === action.payload.rowId
12581258
) {
1259-
child.attributes.compText = '';
1260-
delete child.stateUsed.compText;
1261-
delete child.stateUsed.compTextProviderId;
1262-
delete child.stateUsed.compTextPropsId;
1259+
child.attributes.comptext = '';
1260+
delete child.stateUsed.comptext;
1261+
delete child.stateUsed.comptextProviderId;
1262+
delete child.stateUsed.comptextPropsId;
12631263
}
12641264
if (
12651265
child.stateUsed.compLinkProviderId === currComponent.id &&

0 commit comments

Comments
 (0)