Fix selecting default values and change detection for select, radio and segments
[MAILPOET-2652]
This commit is contained in:
committed by
Jack Kitterhing
parent
045cf5d911
commit
95ca1533ec
@@ -20,7 +20,7 @@ const PreviewItem = ({
|
|||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={value.isChecked || false}
|
defaultChecked={value.isChecked || false}
|
||||||
onChange={(event) => onCheck(value.id, event.target.checked)}
|
onChange={(event) => onCheck(value.id, event.target.checked)}
|
||||||
key={`check-${value.id}`}
|
key={`check-${value.id}`}
|
||||||
/>
|
/>
|
||||||
@@ -67,23 +67,33 @@ const Preview = ({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove unwanted properties added by sortable
|
||||||
|
const sanitizeValue = (value) => {
|
||||||
|
const sanitized = { ...value };
|
||||||
|
delete sanitized.chosen;
|
||||||
|
delete sanitized.selected;
|
||||||
|
return sanitized;
|
||||||
|
};
|
||||||
|
|
||||||
const onUpdate = (valueId, text) => {
|
const onUpdate = (valueId, text) => {
|
||||||
const value = valuesWhileMoved.find((v) => v.id === valueId);
|
const value = valuesWhileMoved.find((v) => v.id === valueId);
|
||||||
value.name = text;
|
value.name = text;
|
||||||
update(value);
|
update(sanitizeValue(value));
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCheck = (valueId, checked) => {
|
const onCheck = (valueId, checked) => {
|
||||||
|
const value = valuesWhileMoved.find((v) => v.id === valueId);
|
||||||
if (checked) {
|
if (checked) {
|
||||||
const checkedValue = valuesWhileMoved.find((v) => v.isChecked);
|
const checkedValue = valuesWhileMoved.find((v) => v.isChecked);
|
||||||
if (checkedValue) {
|
if (checkedValue) {
|
||||||
checkedValue.isChecked = false;
|
delete checkedValue.isChecked;
|
||||||
update(checkedValue);
|
update(sanitizeValue(checkedValue));
|
||||||
}
|
}
|
||||||
|
value.isChecked = true;
|
||||||
|
} else {
|
||||||
|
delete value.isChecked;
|
||||||
}
|
}
|
||||||
const value = valuesWhileMoved.find((v) => v.id === valueId);
|
update(sanitizeValue(value));
|
||||||
value.isChecked = checked;
|
|
||||||
update(value);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderItems = () => (valuesWhileMoved.map((value, index) => (
|
const renderItems = () => (valuesWhileMoved.map((value, index) => (
|
||||||
@@ -100,7 +110,7 @@ const Preview = ({
|
|||||||
return (useDragAndDrop ? (
|
return (useDragAndDrop ? (
|
||||||
<ReactSortable
|
<ReactSortable
|
||||||
list={valuesWhileMoved}
|
list={valuesWhileMoved}
|
||||||
setList={onReorder}
|
setList={(reorderedValues) => onReorder(reorderedValues.map(sanitizeValue))}
|
||||||
className="mailpoet-dnd-items-list"
|
className="mailpoet-dnd-items-list"
|
||||||
animation={100}
|
animation={100}
|
||||||
>
|
>
|
||||||
|
@@ -18,7 +18,7 @@ const PreviewItem = ({
|
|||||||
>
|
>
|
||||||
<CheckboxControl
|
<CheckboxControl
|
||||||
label={segment.name}
|
label={segment.name}
|
||||||
checked={!!segment.isChecked}
|
defaultChecked={!!segment.isChecked}
|
||||||
onChange={partial(onCheck, segment.id)}
|
onChange={partial(onCheck, segment.id)}
|
||||||
key={`check-${segment.id}`}
|
key={`check-${segment.id}`}
|
||||||
/>
|
/>
|
||||||
|
Reference in New Issue
Block a user