From 3f6bc8888ed774a3f8efab57763b98418e8cd179 Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Sun, 17 Nov 2024 10:48:35 +0800 Subject: [PATCH 1/3] feat(group): optimize area checkbox selection logic --- components/Group/Form/Fields/AreaCheckbox.jsx | 35 +++++++++++++------ .../Group/Form/Fields/CheckboxGroup.jsx | 4 +-- components/Group/Form/Fields/Select.jsx | 3 +- components/Group/Form/Fields/TextField.jsx | 3 +- components/Group/Form/index.jsx | 2 +- components/Group/Form/useGroupForm.jsx | 8 ++--- 6 files changed, 35 insertions(+), 20 deletions(-) diff --git a/components/Group/Form/Fields/AreaCheckbox.jsx b/components/Group/Form/Fields/AreaCheckbox.jsx index f82f1b4..f2c320c 100644 --- a/components/Group/Form/Fields/AreaCheckbox.jsx +++ b/components/Group/Form/Fields/AreaCheckbox.jsx @@ -17,29 +17,46 @@ export default function AreaCheckbox({ const getPhysicalArea = (data) => options.find((option) => data.includes(option.name)); - const handleChange = (val) => - control.onChange({ target: { name, value: val } }); + const handleChange = (val, action, _value) => { + if (action === 'add' && _value === '待討論') { + control.onChange({ target: { name, value: ['待討論'] } }); + setIsPhysicalArea(false); + return; + } + if (action === 'remove' && !val.length) { + control.onChange({ target: { name, value: ['待討論'] } }); + setIsPhysicalArea(false); + return; + } + control.onChange({ target: { name, value: val.filter((v) => v !== '待討論') } }); + }; const physicalAreaValue = getPhysicalArea(value)?.name || ''; const toggleIsPhysicalArea = () => { const updatedValue = value.filter((v) => !getPhysicalArea([v])); - handleChange(updatedValue); - setIsPhysicalArea((pre) => !pre); + if (isPhysicalArea && updatedValue.includes('待討論')) { + handleChange(updatedValue, 'add', '待討論'); + } else { + handleChange(updatedValue); + setIsPhysicalArea((pre) => !pre); + } }; const handleCheckboxChange = (_value) => { - const updatedValue = value.includes(_value) + const hasValue = value.includes(_value); + const action = hasValue ? 'remove' : 'add'; + const updatedValue = hasValue ? value.filter((v) => v !== _value) : [...value, _value]; - handleChange(updatedValue); + handleChange(updatedValue, action, _value); }; const handlePhysicalAreaChange = ({ target }) => { const updatedValue = value .filter((v) => !getPhysicalArea([v])) .concat(target.value); - handleChange(updatedValue); + handleChange(updatedValue, 'add', target.value); }; const physicalAreaControl = { @@ -57,14 +74,12 @@ export default function AreaCheckbox({ } label="實體活動" - disabled={value.includes('待討論')} checked={isPhysicalArea} />