-
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
BREAKING CHANGE: - Remove `isChecked` prop in `TableWithSelectableRows.RowCheckbox`, replaced by native `checked` prop. - Remove `isIndeterminate` prop in `TableWithSelectableRows.RowCheckbox`, replaced by original Rsuite `indeterminate` prop. - Remove `$isHighlighted` prop in `TableWithSelectableRows.Td`, replaced by the same prop on `TableWithSelectableRows.BodyTr`. - In order to work properly with `RowCheckbox`, `TableWithSelectableRows` now requires `<Table $withRowCheckbox />`. - Following the `SimpleTable` & `TableWithSelectableRows` margins/heights normalization, including a few hacks, it may break some UI widths & heights. - Please check `TableWithSelectableRows.stories.tsx` to see a full example on how to use/update it. - As shown in the story, be careful **NOT** to wrap the checkbox table header cell within `<TableWithSelectableRows.SortContainer />` since the flex display breaks its internal positioning.
- Loading branch information
1 parent
176b161
commit 23afb70
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.