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; display: flex;
align-items: center; align-items: center;
input {
display: none;
}
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;

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

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