Skip to content

Commit 31d85b2

Browse files
paultd5wrbrant
paultd5
authored and
wrbrant
committed
I believe 308 is addressed with the useEffect updates on FormElementSTIXDictionary
1 parent 1e91cb8 commit 31d85b2

File tree

3 files changed

+221
-180
lines changed

3 files changed

+221
-180
lines changed

‎src/components/forms/FormSTIXPropertySelection.tsx‎

Lines changed: 92 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useEffect, useState } from 'react';
2-
import Dropdown from '@/components/core/Dropdown';
3-
import { SchemaSTIXProperty } from '@/types/stixSchemaTypes/SchemaSTIXProperty';
4-
import FormElementTextInput from './formElements/FormElementTextInput';
5-
import ButtonBasic from '../elements/ButtonBasic';
6-
import { mdiPlus } from '@mdi/js';
7-
import Icon from '@mdi/react';
1+
import React, { useEffect, useState } from "react";
2+
import Dropdown from "@/components/core/Dropdown";
3+
import { SchemaSTIXProperty } from "@/types/stixSchemaTypes/SchemaSTIXProperty";
4+
import FormElementTextInput from "./formElements/FormElementTextInput";
5+
import ButtonBasic from "../elements/ButtonBasic";
6+
import { mdiPlus } from "@mdi/js";
7+
import Icon from "@mdi/react";
88

99
type Props = {
1010
propertyOptions: SchemaSTIXProperty[];
@@ -13,7 +13,7 @@ type Props = {
1313
setSelectedProperties: React.Dispatch<React.SetStateAction<SchemaSTIXProperty[]>>;
1414
includeAddNew?: boolean;
1515
label?: string;
16-
size: 'standard' | 'small';
16+
size: "standard" | "small";
1717
overrideIsCheckboxDisabled?: boolean;
1818
onAdd?: (p: SchemaSTIXProperty) => void;
1919
};
@@ -24,103 +24,110 @@ const FormSTIXPropertySelection: React.FC<Props> = ({
2424
selectedProperties,
2525
setSelectedProperties,
2626
includeAddNew,
27-
label = 'Properties',
27+
label = "Properties",
2828
size,
2929
overrideIsCheckboxDisabled = false,
3030
onAdd,
3131
}) => {
3232
const [newPropertyName, setNewPropertyName] = useState("");
33-
const [buttonSize, setButtonSize] = useState<string>('');
34-
const [buttonContainerSize, setButtonContainerSize] = useState<string>('');
33+
const [buttonSize, setButtonSize] = useState<string>("");
34+
const [buttonContainerSize, setButtonContainerSize] = useState<string>("");
3535

3636
useEffect(() => {
37-
setButtonSize((size === 'standard') ? 'btn-sm' : 'btn-xs');
38-
setButtonContainerSize((size === 'standard') ? 'w-[150px]' : 'w-[105px] h-fit');
37+
setButtonSize(size === "standard" ? "btn-sm" : "btn-xs");
38+
setButtonContainerSize(size === "standard" ? "w-[150px]" : "w-[105px] h-fit");
3939
}, [size]);
4040

41-
const [filter, setFilter] = useState('');
41+
const [filter, setFilter] = useState("");
4242

4343
useEffect(() => {
4444
if (selectedProperties.length === 0) {
45-
setFilter('');
45+
setFilter("");
4646
}
4747
}, [selectedProperties, setSelectedProperties]);
4848

49-
return (<Dropdown
50-
title={label}
51-
filter={filter}
52-
setFilter={setFilter}
53-
includeDropdownArrow
54-
additionalClasses={`flex items-center bg-white dark:bg-neutralc-950 border border-neutralc-900 dark:border-neutralc-500 rounded-md ${buttonContainerSize} w-max`}
55-
additionalButtonClasses={`${buttonSize}`}
56-
>
57-
<div className="relative">
58-
<div className={`max-h-60 overflow-y-scroll scrollbar w-60 ${includeAddNew ? 'mb-8' : ''} `}>
59-
{propertyOptions?.filter(o => o.name.includes(filter)).toSorted((a, b) => a.name.localeCompare(b.name)).map((prop, i) =>
60-
<label key={i} className="label cursor-pointer dark:text-neutralc-300 dark:hover:text-white dark:hover:bg-neutralc-800 text-neutralc-700 hover:text-black hover:bg-neutralc-200">
61-
<span className="mr-2">{prop.name}</span>
62-
<input
63-
type="checkbox"
64-
className="checkbox checkbox-primary hover:checkbox-neutralc"
65-
checked={selectedProperties.find(selectedProperty => selectedProperty.name === prop.name) ? true : false}
66-
disabled={prop.mandatory && !overrideIsCheckboxDisabled}
67-
onChange={(event) => {
68-
if (event.target.checked) {
69-
selectedProperties.push(prop);
70-
// Need this so that React recognizes the variable change and updates the checkbox
71-
setSelectedProperties(selectedProperties.toSorted((a, b) => a.name.localeCompare(b.name)));
72-
} else {
73-
setSelectedProperties(selectedProperties.filter(p => p.name !== prop.name));
49+
return (
50+
<Dropdown
51+
title={label}
52+
filter={filter}
53+
setFilter={setFilter}
54+
includeDropdownArrow
55+
additionalClasses={`flex items-center bg-white dark:bg-neutralc-950 border border-neutralc-900 dark:border-neutralc-500 rounded-md ${buttonContainerSize} w-fit`}
56+
additionalButtonClasses={`${buttonSize}`}
57+
>
58+
<div className="relative">
59+
<div className={`max-h-60 overflow-y-scroll scrollbar w-60 ${includeAddNew ? "mb-8" : ""} `}>
60+
{propertyOptions
61+
?.filter((o) => o.name.includes(filter))
62+
.toSorted((a, b) => a.name.localeCompare(b.name))
63+
.map((prop, i) => (
64+
<label
65+
key={i}
66+
className="label cursor-pointer dark:text-neutralc-300 dark:hover:text-white dark:hover:bg-neutralc-800 text-neutralc-700 hover:text-black hover:bg-neutralc-200"
67+
>
68+
<span className="mr-2">{prop.name}</span>
69+
<input
70+
type="checkbox"
71+
className="checkbox checkbox-primary hover:checkbox-neutralc"
72+
checked={selectedProperties.find((selectedProperty) => selectedProperty.name === prop.name) ? true : false}
73+
disabled={prop.mandatory && !overrideIsCheckboxDisabled}
74+
onChange={(event) => {
75+
if (event.target.checked) {
76+
selectedProperties.push(prop);
77+
// Need this so that React recognizes the variable change and updates the checkbox
78+
setSelectedProperties(selectedProperties.toSorted((a, b) => a.name.localeCompare(b.name)));
79+
} else {
80+
setSelectedProperties(selectedProperties.filter((p) => p.name !== prop.name));
81+
}
82+
}}
83+
/>
84+
</label>
85+
))}
86+
</div>
87+
<div className="absolute bottom-0 left-0 w-full px-2">
88+
{includeAddNew && setPropertyOptions ? (
89+
<div className="flex items-center gap-2">
90+
<FormElementTextInput
91+
type="text"
92+
placeholder="Property name..."
93+
value={newPropertyName}
94+
onChange={(event) => {
95+
setNewPropertyName(event.target.value);
96+
}}
97+
additionalInputClasses="p-2 dark:placeholder:text-neutralc-100 placeholder:text-neutralc-900 dark:text-white text-black btn-xs"
98+
includeInfo={false}
99+
/>
100+
<ButtonBasic
101+
label={
102+
<div className="flex items-center justify-between">
103+
<Icon path={mdiPlus} size={1} />
104+
<span>Add</span>
105+
</div>
74106
}
75-
}}
76-
/>
77-
</label>
78-
)}
79-
80-
</div>
81-
<div className="absolute bottom-0 left-0 w-full px-2">
82-
{includeAddNew && setPropertyOptions ?
83-
<div className='flex items-center gap-2'>
84-
<FormElementTextInput
85-
type="text"
86-
placeholder="Property name..."
87-
value={newPropertyName}
88-
onChange={(event) => { setNewPropertyName(event.target.value) }}
89-
additionalInputClasses='p-2 dark:placeholder:text-neutralc-100 placeholder:text-neutralc-900 dark:text-white text-black btn-xs'
90-
includeInfo={false}
91-
/>
92-
<ButtonBasic
93-
label={
94-
<div className='flex items-center justify-between'>
95-
<Icon path={mdiPlus} size={1} />
96-
<span>Add</span>
97-
</div>
98-
}
99-
type={'btn-primary'}
100-
additionalClasses='btn-xs'
101-
disabled={newPropertyName === undefined || newPropertyName === ''}
102-
onClick={() => {
103-
// Can't add a property with no name
104-
if (!newPropertyName) return;
107+
type={"btn-primary"}
108+
additionalClasses="btn-xs"
109+
disabled={newPropertyName === undefined || newPropertyName === ""}
110+
onClick={() => {
111+
// Can't add a property with no name
112+
if (!newPropertyName) return;
105113

106-
const p: SchemaSTIXProperty = { name: newPropertyName, type: "string" };
107-
propertyOptions.push(p);
108-
selectedProperties.push(p);
114+
const p: SchemaSTIXProperty = { name: newPropertyName, type: "string" };
115+
propertyOptions.push(p);
116+
selectedProperties.push(p);
109117

110-
setPropertyOptions(propertyOptions.toSorted((a, b) => a.name.localeCompare(b.name)));
111-
setSelectedProperties(selectedProperties.toSorted((a, b) => a.name.localeCompare(b.name)));
118+
setPropertyOptions(propertyOptions.toSorted((a, b) => a.name.localeCompare(b.name)));
119+
setSelectedProperties(selectedProperties.toSorted((a, b) => a.name.localeCompare(b.name)));
112120

113-
setNewPropertyName("");
114-
onAdd && onAdd(p);
115-
}}
116-
/>
117-
</div>
118-
: null
119-
}
121+
setNewPropertyName("");
122+
onAdd && onAdd(p);
123+
}}
124+
/>
125+
</div>
126+
) : null}
127+
</div>
120128
</div>
121-
</div>
122-
</Dropdown>
129+
</Dropdown>
123130
);
124131
};
125132

126-
export default FormSTIXPropertySelection;
133+
export default FormSTIXPropertySelection;

0 commit comments

Comments
 (0)