Fix selecting default values and change detection for select, radio and segments

[MAILPOET-2652]
This commit is contained in:
Rostislav Wolny
2020-01-23 14:39:42 +01:00
committed by Jack Kitterhing
parent 045cf5d911
commit 95ca1533ec
2 changed files with 19 additions and 9 deletions

View File

@@ -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}
> >

View File

@@ -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}`}
/> />