-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(tables): normalize tables checkbox, margins & height
- Loading branch information
1 parent
4b559e5
commit e5b5f10
Showing
7 changed files
with
174 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,67 @@ | ||
| import { StyledRsuiteCheckbox } from '@fields/Checkbox' | ||
| import { stopMouseEventPropagation } from '@utils/stopMouseEventPropagation' | ||
| import { type HTMLProps } from 'react' | ||
| import { Checkbox as RsuiteCheckbox } from 'rsuite' | ||
|
|
||
| export type RowCheckboxProps = { | ||
| className?: string | ||
| disabled?: boolean | ||
| isChecked?: boolean | ||
| // handle the case where some child checkboxes are checked to display an indeterminate style (-) | ||
| isIndeterminate?: boolean | ||
| onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | ||
| import { useCallback, type ChangeEvent, type HTMLProps } from 'react' | ||
| import { type CheckboxProps as RsuiteCheckboxProps } from 'rsuite' | ||
| import styled from 'styled-components' | ||
|
|
||
| import type { ValueType } from 'rsuite/esm/Checkbox' | ||
|
|
||
| export type RowCheckboxProps = Omit<RsuiteCheckboxProps, 'onClick' | 'onChange'> & { | ||
| // TODO Maybe replace that with a `((isChecked: boolean) => Promisable<void>) | undefined` for consistency with other boolean fields? | ||
| onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined | ||
| } | ||
| export function RowCheckbox({ | ||
| className = '', | ||
| disabled = false, | ||
| isChecked = false, | ||
| isIndeterminate = false, | ||
| onChange = () => undefined | ||
| }: RowCheckboxProps & HTMLProps<HTMLInputElement>) { | ||
| export function RowCheckbox({ onChange, ...nativeProps }: RowCheckboxProps & HTMLProps<HTMLInputElement>) { | ||
| const handleOnChange = useCallback( | ||
| (_value: ValueType | undefined, _checked: boolean, event: ChangeEvent<HTMLInputElement>) => { | ||
| if (onChange) { | ||
| onChange(event) | ||
| } | ||
| }, | ||
| [onChange] | ||
| ) | ||
|
|
||
| return ( | ||
| <RsuiteCheckbox | ||
| checked={isChecked} | ||
| className={`${className} cursor-pointer`} | ||
| disabled={disabled} | ||
| indeterminate={isIndeterminate} | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| onChange={(_, __, event) => onChange(event)} | ||
| <RestyledRsuiteCheckbox | ||
| $isChecked={nativeProps.checked || nativeProps.indeterminate} | ||
| $isDisabled={nativeProps.disabled} | ||
| $isReadOnly={nativeProps.readOnly} | ||
| {...nativeProps} | ||
| onChange={handleOnChange} | ||
| onClick={stopMouseEventPropagation} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const RestyledRsuiteCheckbox = styled(StyledRsuiteCheckbox)` | ||
| vertical-align: top; | ||
| > .rs-checkbox-checker, | ||
| &.rs-checkbox-indeterminate > .rs-checkbox-checker { | ||
| padding: 0; | ||
| > label { | ||
| > .rs-checkbox-wrapper { | ||
| bottom: 0; | ||
| top: 3px; | ||
| &:before { | ||
| } | ||
| &:after { | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| } | ||
| > .rs-checkbox-inner { | ||
| &:before { | ||
| } | ||
| /* Checkmark */ | ||
| &:after { | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.