Checkbox Group: Fix duplicate state (#5970)
This commit is contained in:
parent
91b8463b35
commit
3cc0fffef4
@ -116,9 +116,9 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
|
|||||||
permissions, havePermissionChanged, handlePermissionChange, resetPermissions,
|
permissions, havePermissionChanged, handlePermissionChange, resetPermissions,
|
||||||
} = useManagePermissions(chat?.defaultBannedRights);
|
} = useManagePermissions(chat?.defaultBannedRights);
|
||||||
|
|
||||||
const [peerIdsToDeleteAll, setPeerIdsToDeleteAll] = useState<string[] | undefined>(undefined);
|
const [peerIdsToDeleteAll, setPeerIdsToDeleteAll] = useState<string[]>([]);
|
||||||
const [peerIdsToBan, setPeerIdsToBan] = useState<string[] | undefined>(undefined);
|
const [peerIdsToBan, setPeerIdsToBan] = useState<string[]>([]);
|
||||||
const [peerIdsToReportSpam, setPeerIdsToReportSpam] = useState<string[] | undefined>(undefined);
|
const [peerIdsToReportSpam, setPeerIdsToReportSpam] = useState<string[]>([]);
|
||||||
const [isMediaDropdownOpen, setIsMediaDropdownOpen] = useState(false);
|
const [isMediaDropdownOpen, setIsMediaDropdownOpen] = useState(false);
|
||||||
const [isAdditionalOptionsVisible, setIsAdditionalOptionsVisible] = useState(false);
|
const [isAdditionalOptionsVisible, setIsAdditionalOptionsVisible] = useState(false);
|
||||||
const [shouldDeleteForAll, setShouldDeleteForAll] = useState(true);
|
const [shouldDeleteForAll, setShouldDeleteForAll] = useState(true);
|
||||||
@ -330,9 +330,9 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isOpen && prevIsOpen) {
|
if (!isOpen && prevIsOpen) {
|
||||||
setPeerIdsToReportSpam(undefined);
|
setPeerIdsToReportSpam([]);
|
||||||
setPeerIdsToDeleteAll(undefined);
|
setPeerIdsToDeleteAll([]);
|
||||||
setPeerIdsToBan(undefined);
|
setPeerIdsToBan([]);
|
||||||
setShouldDeleteForAll(true);
|
setShouldDeleteForAll(true);
|
||||||
setIsMediaDropdownOpen(false);
|
setIsMediaDropdownOpen(false);
|
||||||
setIsAdditionalOptionsVisible(false);
|
setIsAdditionalOptionsVisible(false);
|
||||||
|
|||||||
@ -276,6 +276,7 @@ const Poll: FC<OwnProps> = ({
|
|||||||
? (
|
? (
|
||||||
<CheckboxGroup
|
<CheckboxGroup
|
||||||
options={answers}
|
options={answers}
|
||||||
|
selected={chosenOptions}
|
||||||
onChange={handleCheckboxChange}
|
onChange={handleCheckboxChange}
|
||||||
disabled={message.isScheduled || isSubmitting}
|
disabled={message.isScheduled || isSubmitting}
|
||||||
loadingOptions={isSubmitting ? chosenOptions : undefined}
|
loadingOptions={isSubmitting ? chosenOptions : undefined}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import type { ChangeEvent } from 'react';
|
import type { ChangeEvent } from 'react';
|
||||||
import type { FC, TeactNode } from '../../lib/teact/teact';
|
import type { FC, TeactNode } from '../../lib/teact/teact';
|
||||||
import React, { memo, useState } from '../../lib/teact/teact';
|
import React, { memo } from '../../lib/teact/teact';
|
||||||
|
|
||||||
import type { ApiUser } from '../../api/types';
|
import type { ApiUser } from '../../api/types';
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ export type IRadioOption = {
|
|||||||
type OwnProps = {
|
type OwnProps = {
|
||||||
id?: string;
|
id?: string;
|
||||||
options: IRadioOption[];
|
options: IRadioOption[];
|
||||||
selected?: string[];
|
selected: string[];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
nestedCheckbox?: boolean;
|
nestedCheckbox?: boolean;
|
||||||
loadingOptions?: string[];
|
loadingOptions?: string[];
|
||||||
@ -42,14 +42,12 @@ const CheckboxGroup: FC<OwnProps> = ({
|
|||||||
onChange,
|
onChange,
|
||||||
className,
|
className,
|
||||||
}) => {
|
}) => {
|
||||||
const [values, setValues] = useState<string[]>(selected || []);
|
|
||||||
|
|
||||||
const handleChange = useLastCallback((event: ChangeEvent<HTMLInputElement>, nestedOptionList?: IRadioOption) => {
|
const handleChange = useLastCallback((event: ChangeEvent<HTMLInputElement>, nestedOptionList?: IRadioOption) => {
|
||||||
const { value, checked } = event.currentTarget;
|
const { value, checked } = event.currentTarget;
|
||||||
let newValues: string[];
|
let newValues: string[];
|
||||||
|
|
||||||
if (checked) {
|
if (checked) {
|
||||||
newValues = [...values, value];
|
newValues = [...selected, value];
|
||||||
if (nestedOptionList && value) {
|
if (nestedOptionList && value) {
|
||||||
newValues.push(nestedOptionList.value);
|
newValues.push(nestedOptionList.value);
|
||||||
}
|
}
|
||||||
@ -61,7 +59,7 @@ const CheckboxGroup: FC<OwnProps> = ({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
newValues = values.filter((v) => v !== value);
|
newValues = selected.filter((v) => v !== value);
|
||||||
if (nestedOptionList && value === nestedOptionList.value) {
|
if (nestedOptionList && value === nestedOptionList.value) {
|
||||||
nestedOptionList.nestedOptions?.forEach((nestedOption) => {
|
nestedOptionList.nestedOptions?.forEach((nestedOption) => {
|
||||||
newValues = newValues.filter((v) => v !== nestedOption.value);
|
newValues = newValues.filter((v) => v !== nestedOption.value);
|
||||||
@ -74,12 +72,10 @@ const CheckboxGroup: FC<OwnProps> = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setValues(newValues);
|
|
||||||
onChange(newValues);
|
onChange(newValues);
|
||||||
});
|
});
|
||||||
const getCheckedNestedCount = useLastCallback((nestedOptions: IRadioOption[]) => {
|
const getCheckedNestedCount = useLastCallback((nestedOptions: IRadioOption[]) => {
|
||||||
const checkedCount = nestedOptions?.filter((nestedOption) => values.includes(nestedOption.value)).length;
|
const checkedCount = nestedOptions?.filter((nestedOption) => selected.includes(nestedOption.value)).length;
|
||||||
return checkedCount > 0 ? checkedCount : nestedOptions.length;
|
return checkedCount > 0 ? checkedCount : nestedOptions.length;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -98,7 +94,7 @@ const CheckboxGroup: FC<OwnProps> = ({
|
|||||||
nestedCheckbox={nestedCheckbox}
|
nestedCheckbox={nestedCheckbox}
|
||||||
nestedCheckboxCount={getCheckedNestedCount(option.nestedOptions ?? [])}
|
nestedCheckboxCount={getCheckedNestedCount(option.nestedOptions ?? [])}
|
||||||
nestedOptionList={option}
|
nestedOptionList={option}
|
||||||
values={values}
|
values={selected}
|
||||||
isRound={isRound}
|
isRound={isRound}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user