Skip to content

Commit d38fffb

Browse files
raymond-lamraymond-lam
committed
Remove restrictions in Object and Section Name
1 parent d2487c6 commit d38fffb

18 files changed

+144
-99
lines changed

‎src/formBuilder/Add.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { createUseStyles } from 'react-jss';
1212
import { faPlusSquare } from '@fortawesome/free-solid-svg-icons';
1313
import FontAwesomeIcon from './FontAwesomeIcon';
1414
import FBRadioGroup from './radio/FBRadioGroup';
15+
import { getRandomId } from './utils';
1516

1617
const useStyles = createUseStyles({
1718
addDetails: {
@@ -33,36 +34,35 @@ const useStyles = createUseStyles({
3334
});
3435

3536
export default function Add({
36-
name,
3737
addElem,
3838
hidden,
3939
}: {
40-
name: string,
4140
addElem: (choice: string) => void,
4241
hidden?: boolean,
4342
}) {
4443
const classes = useStyles();
4544
const [popoverOpen, setPopoverOpen] = useState(false);
4645
const [createChoice, setCreateChoice] = useState('card');
46+
const [elementId] = useState(getRandomId());
4747

4848
return (
4949
<div style={{ display: hidden ? 'none' : 'initial' }}>
50-
<span id={`${name}_add`}>
50+
<span id={`${elementId}_add`}>
5151
<FontAwesomeIcon
5252
icon={faPlusSquare}
5353
onClick={() => setPopoverOpen(true)}
5454
/>
5555
</span>
56-
<UncontrolledTooltip placement='top' target={`${name}_add`}>
56+
<UncontrolledTooltip placement='top' target={`${elementId}_add`}>
5757
Create new form element
5858
</UncontrolledTooltip>
5959
<Popover
6060
placement='bottom'
61-
target={`${name}_add`}
61+
target={`${elementId}_add`}
6262
isOpen={popoverOpen}
6363
toggle={() => setPopoverOpen(false)}
6464
className={`add-details ${classes.addDetails}`}
65-
id={`${name}_add_popover`}
65+
id={`${elementId}_add_popover`}
6666
>
6767
<PopoverHeader>Create New</PopoverHeader>
6868
<PopoverBody>

‎src/formBuilder/Card.js

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import CardGeneralParameterInputs from './CardGeneralParameterInputs';
1616
import Add from './Add';
1717
import FontAwesomeIcon from './FontAwesomeIcon';
1818
import Tooltip from './Tooltip';
19+
import { getRandomId } from './utils';
1920
import type { Parameters, Mods, FormInput } from './types';
2021

2122
const useStyles = createUseStyles({
@@ -129,6 +130,7 @@ export default function Card({
129130
}) {
130131
const classes = useStyles();
131132
const [modalOpen, setModalOpen] = React.useState(false);
133+
const [elementId] = React.useState(getRandomId());
132134

133135
return (
134136
<React.Fragment>
@@ -142,7 +144,7 @@ export default function Card({
142144
{componentProps.parent ? (
143145
<Tooltip
144146
text={`Depends on ${(componentProps.parent: any)}`}
145-
id={`${componentProps.path}_parentinfo`}
147+
id={`${elementId}_parentinfo`}
146148
type='alert'
147149
/>
148150
) : (
@@ -151,35 +153,35 @@ export default function Card({
151153
{componentProps.$ref !== undefined ? (
152154
<Tooltip
153155
text={`Is an instance of pre-configured component ${(componentProps.$ref: any)}`}
154-
id={`${componentProps.path}_refinfo`}
156+
id={`${elementId}_refinfo`}
155157
type='alert'
156158
/>
157159
) : (
158160
''
159161
)}
160162
</span>
161163
<span className='arrows'>
162-
<span id={`${componentProps.path}_moveupbiginfo`}>
164+
<span id={`${elementId}_moveupbiginfo`}>
163165
<FontAwesomeIcon
164166
icon={faArrowUp}
165167
onClick={() => (onMoveUp ? onMoveUp() : {})}
166168
/>
167169
</span>
168170
<UncontrolledTooltip
169171
placement='top'
170-
target={`${componentProps.path}_moveupbiginfo`}
172+
target={`${elementId}_moveupbiginfo`}
171173
>
172174
Move form element up
173175
</UncontrolledTooltip>
174-
<span id={`${componentProps.path}_movedownbiginfo`}>
176+
<span id={`${elementId}_movedownbiginfo`}>
175177
<FontAwesomeIcon
176178
icon={faArrowDown}
177179
onClick={() => (onMoveDown ? onMoveDown() : {})}
178180
/>
179181
</span>
180182
<UncontrolledTooltip
181183
placement='top'
182-
target={`${componentProps.path}_movedownbiginfo`}
184+
target={`${elementId}_movedownbiginfo`}
183185
>
184186
Move form element down
185187
</UncontrolledTooltip>
@@ -200,24 +202,21 @@ export default function Card({
200202
/>
201203
</div>
202204
<div className={classes.cardInteractions}>
203-
<span id={`${componentProps.path}_editinfo`}>
205+
<span id={`${elementId}_editinfo`}>
204206
<FontAwesomeIcon
205207
icon={faPencilAlt}
206208
onClick={() => setModalOpen(true)}
207209
/>
208210
</span>
209-
<UncontrolledTooltip
210-
placement='top'
211-
target={`${componentProps.path}_editinfo`}
212-
>
211+
<UncontrolledTooltip placement='top' target={`${elementId}_editinfo`}>
213212
Additional configurations for this form element
214213
</UncontrolledTooltip>
215-
<span id={`${componentProps.path}_trashinfo`}>
214+
<span id={`${elementId}_trashinfo`}>
216215
<FontAwesomeIcon icon={faTrash} onClick={onDelete || (() => {})} />
217216
</span>
218217
<UncontrolledTooltip
219218
placement='top'
220-
target={`${componentProps.path}_trashinfo`}
219+
target={`${elementId}_trashinfo`}
221220
>
222221
Delete form element
223222
</UncontrolledTooltip>
@@ -230,11 +229,7 @@ export default function Card({
230229
}
231230
isChecked={!!componentProps.required}
232231
label='Required'
233-
id={`${
234-
typeof componentProps.path === 'string'
235-
? componentProps.path
236-
: 'card'
237-
}_required`}
232+
id={`${elementId}_required`}
238233
/>
239234
</div>
240235
<CardModal
@@ -249,14 +244,7 @@ export default function Card({
249244
TypeSpecificParameters={TypeSpecificParameters}
250245
/>
251246
</Collapse>
252-
{addElem ? (
253-
<Add
254-
name={`${componentProps.path}`}
255-
addElem={(choice: string) => addElem(choice)}
256-
/>
257-
) : (
258-
''
259-
)}
247+
{addElem ? <Add addElem={(choice: string) => addElem(choice)} /> : ''}
260248
</React.Fragment>
261249
);
262250
}

‎src/formBuilder/CardGallery.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ export default function CardGallery({
7575
{componentArr.length === 0 && <h5>No components in "definitions"</h5>}
7676
<div className='form_footer'>
7777
<Add
78-
name='form_gallery'
7978
addElem={(choice: string) => {
8079
if (choice === 'card') {
8180
addCardObj({

‎src/formBuilder/CardGeneralParameterInputs.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
categoryToNameMap,
1212
categoryType,
1313
subtractArray,
14+
getRandomId,
1415
} from './utils';
1516
import type { Parameters, Mods, FormInput } from './types';
1617
import Tooltip from './Tooltip';
@@ -34,6 +35,7 @@ export default function CardGeneralParameterInputs({
3435
const [descriptionState, setDescriptionState] = React.useState(
3536
parameters.description,
3637
);
38+
const [elementId] = React.useState(getRandomId());
3739
const categoryMap = categoryToNameMap(parameters.category, allFormInputs);
3840

3941
const fetchLabel = (labelName: string, defaultLabel: string): string => {
@@ -77,7 +79,7 @@ export default function CardGeneralParameterInputs({
7779
? mods.tooltipDescriptions.cardObjectName
7880
: 'The back-end name of the object'
7981
}
80-
id={`${(keyState: string)}_nameinfo`}
82+
id={`${elementId}_nameinfo`}
8183
type='help'
8284
/>
8385
</h5>
@@ -87,7 +89,7 @@ export default function CardGeneralParameterInputs({
8789
placeholder='Key'
8890
type='text'
8991
onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
90-
setKeyState(ev.target.value.replace(/\W/g, '_'))
92+
setKeyState(ev.target.value)
9193
}
9294
onBlur={(ev: SyntheticInputEvent<HTMLInputElement>) =>
9395
onChange({
@@ -114,7 +116,7 @@ export default function CardGeneralParameterInputs({
114116
? mods.tooltipDescriptions.cardDisplayName
115117
: 'The user-facing name of this object'
116118
}
117-
id={`${(keyState: string)}-titleinfo`}
119+
id={`${elementId}-titleinfo`}
118120
type='help'
119121
/>
120122
</h5>
@@ -142,7 +144,7 @@ export default function CardGeneralParameterInputs({
142144
? mods.tooltipDescriptions.cardDescription
143145
: 'This will appear as help text on the form'
144146
}
145-
id={`${(keyState: string)}-descriptioninfo`}
147+
id={`${elementId}-descriptioninfo`}
146148
type='help'
147149
/>
148150
</h5>
@@ -174,7 +176,7 @@ export default function CardGeneralParameterInputs({
174176
? mods.tooltipDescriptions.cardInputType
175177
: 'The type of form input displayed on the form'
176178
}
177-
id={`${(keyState: string)}-inputinfo`}
179+
id={`${elementId}-inputinfo`}
178180
type='help'
179181
/>
180182
</h5>

‎src/formBuilder/FormBuilder.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,6 @@ export default function FormBuilder({
384384
</div>
385385
<div className={`form-footer ${classes.formFooter}`}>
386386
<Add
387-
name='form-builder'
388387
addElem={(choice: string) => {
389388
if (choice === 'card') {
390389
addCardObj({

0 commit comments

Comments
 (0)