@visns-studio/visns-components 3.3.5 → 3.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/crm/DataGrid.jsx +17 -2
- package/components/crm/Field.jsx +40 -1
- package/components/crm/Form.jsx +16 -0
- package/package.json +1 -1
|
@@ -1494,14 +1494,29 @@ const DataGrid = forwardRef(
|
|
|
1494
1494
|
filterEditor: filterEditor,
|
|
1495
1495
|
filterEditorProps: filterEditorProps,
|
|
1496
1496
|
render: ({ data }) => {
|
|
1497
|
+
let newData;
|
|
1498
|
+
|
|
1497
1499
|
if (
|
|
1498
1500
|
data &&
|
|
1499
1501
|
column.options &&
|
|
1500
1502
|
column.options[data[column.id]]
|
|
1501
1503
|
) {
|
|
1502
|
-
|
|
1504
|
+
if (
|
|
1505
|
+
column.key &&
|
|
1506
|
+
data[column.key] > 0 &&
|
|
1507
|
+
column.options[
|
|
1508
|
+
data[column.id]
|
|
1509
|
+
].includes('#')
|
|
1510
|
+
) {
|
|
1511
|
+
newData = column.options[
|
|
1512
|
+
data[column.id]
|
|
1513
|
+
].replace(/#/g, data[column.key]);
|
|
1514
|
+
} else {
|
|
1515
|
+
newData =
|
|
1516
|
+
column.options[data[column.id]];
|
|
1517
|
+
}
|
|
1503
1518
|
|
|
1504
|
-
return <span>{
|
|
1519
|
+
return <span>{newData}</span>;
|
|
1505
1520
|
} else {
|
|
1506
1521
|
return null;
|
|
1507
1522
|
}
|
package/components/crm/Field.jsx
CHANGED
|
@@ -29,6 +29,7 @@ function Field({
|
|
|
29
29
|
inputClass,
|
|
30
30
|
mapbox,
|
|
31
31
|
onChange,
|
|
32
|
+
onChangeCheckbox,
|
|
32
33
|
onChangeColour,
|
|
33
34
|
onChangeDate,
|
|
34
35
|
onChangeSelect,
|
|
@@ -227,7 +228,6 @@ function Field({
|
|
|
227
228
|
[
|
|
228
229
|
'address',
|
|
229
230
|
'async-dropdown-ajax',
|
|
230
|
-
'checkbox',
|
|
231
231
|
'colour',
|
|
232
232
|
'copytoclipboard',
|
|
233
233
|
'date',
|
|
@@ -266,6 +266,13 @@ function Field({
|
|
|
266
266
|
}
|
|
267
267
|
} else if (['plaintextheading'].includes(settings.type)) {
|
|
268
268
|
return <h2>{settings.label ? settings.label : ''}</h2>;
|
|
269
|
+
} else if (['checkbox'].includes(settings.type)) {
|
|
270
|
+
return (
|
|
271
|
+
<span className="fi__spancheckbox">
|
|
272
|
+
{settings.label ? settings.label : ''}{' '}
|
|
273
|
+
{settings.required ? '*' : ''}
|
|
274
|
+
</span>
|
|
275
|
+
);
|
|
269
276
|
}
|
|
270
277
|
};
|
|
271
278
|
|
|
@@ -307,6 +314,29 @@ function Field({
|
|
|
307
314
|
|
|
308
315
|
const renderInput = () => {
|
|
309
316
|
switch (settings.type) {
|
|
317
|
+
case 'checkbox':
|
|
318
|
+
return settings.options.length > 0 ? (
|
|
319
|
+
<div className="fi__optionscontainer">
|
|
320
|
+
{settings.options.map((option, index) => (
|
|
321
|
+
<div
|
|
322
|
+
key={`${settings.id}-checkbox-option-${index}`}
|
|
323
|
+
className="fi__checkboxcontainer"
|
|
324
|
+
>
|
|
325
|
+
<input
|
|
326
|
+
name={settings.id}
|
|
327
|
+
type="checkbox"
|
|
328
|
+
className="fi__customcheckbox"
|
|
329
|
+
value={option.label}
|
|
330
|
+
checked={inputValue[index]}
|
|
331
|
+
onChange={onChangeCheckbox}
|
|
332
|
+
/>
|
|
333
|
+
<label className="fi__checkboxlabel">
|
|
334
|
+
{option.label}
|
|
335
|
+
</label>{' '}
|
|
336
|
+
</div>
|
|
337
|
+
))}
|
|
338
|
+
</div>
|
|
339
|
+
) : null;
|
|
310
340
|
case 'text':
|
|
311
341
|
case 'json':
|
|
312
342
|
case 'password':
|
|
@@ -736,6 +766,15 @@ function Field({
|
|
|
736
766
|
}
|
|
737
767
|
|
|
738
768
|
return htmlContainer;
|
|
769
|
+
case 'image':
|
|
770
|
+
return (
|
|
771
|
+
<input
|
|
772
|
+
type="file"
|
|
773
|
+
data-name={settings.id}
|
|
774
|
+
className={inputClass[settings.id]}
|
|
775
|
+
onChange={onChange}
|
|
776
|
+
/>
|
|
777
|
+
);
|
|
739
778
|
case 'richeditor':
|
|
740
779
|
return (
|
|
741
780
|
<Editor
|
package/components/crm/Form.jsx
CHANGED
|
@@ -128,6 +128,18 @@ function Form({
|
|
|
128
128
|
}
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
+
const handleChangeCheckbox = (e) => {
|
|
132
|
+
const { checked, name, value } = e.target;
|
|
133
|
+
|
|
134
|
+
// If the checkbox is checked and not already in the array, add it to the state
|
|
135
|
+
setFormData((prevFormData) => ({
|
|
136
|
+
...prevFormData,
|
|
137
|
+
[name]: checked
|
|
138
|
+
? [...prevFormData.options, value] // Add value if checked
|
|
139
|
+
: prevFormData.options.filter((item) => item !== value), // Remove value if unchecked
|
|
140
|
+
}));
|
|
141
|
+
};
|
|
142
|
+
|
|
131
143
|
const handleChangeColour = (event, color, id) => {
|
|
132
144
|
if (color && event && id) {
|
|
133
145
|
setFormData((prevState) => ({
|
|
@@ -1084,6 +1096,7 @@ function Form({
|
|
|
1084
1096
|
}
|
|
1085
1097
|
mapbox={mapbox}
|
|
1086
1098
|
onChange={handleChange}
|
|
1099
|
+
onChangeCheckbox={handleChangeCheckbox}
|
|
1087
1100
|
onChangeDate={handleChangeDate}
|
|
1088
1101
|
onChangeNumberFormat={
|
|
1089
1102
|
handleChangeNumberFormat
|
|
@@ -1191,6 +1204,9 @@ function Form({
|
|
|
1191
1204
|
}
|
|
1192
1205
|
mapbox={mapbox}
|
|
1193
1206
|
onChange={handleChange}
|
|
1207
|
+
onChangeCheckbox={
|
|
1208
|
+
handleChangeCheckbox
|
|
1209
|
+
}
|
|
1194
1210
|
onChangeColour={handleChangeColour}
|
|
1195
1211
|
onChangeDate={handleChangeDate}
|
|
1196
1212
|
onChangeNumberFormat={
|
package/package.json
CHANGED