Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): fix indeterminate state issue and react warning in checkbox component (#2890)

Browse source
This commit is contained in:
Charles Zhao 2023-01-10 13:01:22 +08:00 committed by GitHub
parent c6b2370356
commit 550cbe3436
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/components/Checkbox/index.module.scss
View file

@ -5,10 +5,6 @@
display: flex;
align-items: center;
input {
display: none;
}
.icon {
width: 20px;
height: 20px;

11
packages/console/src/components/Checkbox/index.tsx
View file

@ -1,6 +1,6 @@
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { useEffect, useState } from 'react';
import { useLayoutEffect, useState } from 'react';
import { onKeyDownHandler } from '@/utilities/a11y';
@ -8,7 +8,6 @@ import { Tooltip } from '../Tip';
import * as styles from './index.module.scss';
type Props = {
name?: string;
/* eslint-disable react/boolean-prop-naming */
checked: boolean;
disabled: boolean;
@ -21,7 +20,6 @@ type Props = {
};
const Checkbox = ({
name,
checked,
disabled,
indeterminate,
@ -32,9 +30,9 @@ const Checkbox = ({
}: Props) => {
const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);
useEffect(() => {
setIsIndeterminate(isIndeterminate);
}, [isIndeterminate]);
useLayoutEffect(() => {
setIsIndeterminate(indeterminate);
}, [indeterminate]);
const handleChange = () => {
if (disabled) {
@ -59,7 +57,6 @@ const Checkbox = ({
onClick={handleChange}
onKeyDown={onKeyDownHandler(handleChange)}
>
<input type="checkbox" checked={checked} disabled={disabled} name={name} />
<Tooltip horizontalAlign="start" content={tooltip} anchorClassName={styles.tooltipAnchor}>
<svg
className={classNames(