-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
split node-list-row into row and filter-row
Signed-off-by: Huong Nguyen <huongg1409@gmail>
- Loading branch information
Huong Nguyen
committed
Oct 17, 2024
1 parent
39c8db8
commit ca8b72c
Showing
7 changed files
with
238 additions
and
7 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React from 'react'; | ||
| import classnames from 'classnames'; | ||
| import { replaceAngleBracketMatches } from '../../utils'; | ||
| import VisibleIcon from '../icons/visible'; | ||
| import InvisibleIcon from '../icons/invisible'; | ||
| import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle'; | ||
|
|
||
| // The exact fixed height of a row as measured by getBoundingClientRect() | ||
| export const nodeListRowHeight = 32; | ||
| export const FilterRow = ({ | ||
| allUnchecked, | ||
| checked, | ||
| children, | ||
| container: Container = 'div', | ||
| count, | ||
| id, | ||
| invisibleIcon = InvisibleIcon, | ||
| kind, | ||
| label, | ||
| name, | ||
| onChange, | ||
| onClick, | ||
| onMouseEnter, | ||
| onMouseLeave, | ||
| visible, | ||
| visibleIcon = VisibleIcon, | ||
| }) => { | ||
| const VisibilityIcon = checked ? visibleIcon : invisibleIcon; | ||
|
|
||
| return ( | ||
| <Container | ||
| className={classnames( | ||
| 'node-list-row kedro', | ||
| `node-list-row--kind-${kind}`, | ||
| { | ||
| 'node-list-row--visible': visible, | ||
| 'node-list-row--unchecked': !checked, | ||
| } | ||
| )} | ||
| title={name} | ||
| onMouseEnter={visible ? onMouseEnter : null} | ||
| onMouseLeave={visible ? onMouseLeave : null} | ||
| > | ||
| <button | ||
| className={classnames( | ||
| 'node-list-row__text', | ||
| `node-list-row__text--kind-${kind}` | ||
| )} | ||
| // data-test={`nodelist-${icon}-${children ? null : name}`} | ||
| onClick={onClick} | ||
| onFocus={onMouseEnter} | ||
| onBlur={onMouseLeave} | ||
| title={children ? null : name} | ||
| > | ||
| <span | ||
| className={classnames( | ||
| 'node-list-row__label', | ||
| `node-list-row__label--kind-${kind}` | ||
| )} | ||
| dangerouslySetInnerHTML={{ | ||
| __html: replaceAngleBracketMatches(label), | ||
| }} | ||
| /> | ||
| </button> | ||
| <span onClick={onClick} className={'node-list-row__count'}> | ||
| {count} | ||
| </span> | ||
| {VisibilityIcon && ( | ||
| <NodeListRowToggle | ||
| allUnchecked={allUnchecked} | ||
| className={'node-list-row__icon'} | ||
| IconComponent={VisibilityIcon} | ||
| id={id} | ||
| isChecked={checked} | ||
| kind={kind} | ||
| name={name} | ||
| onChange={onChange} | ||
| /> | ||
| )} | ||
| {children} | ||
| </Container> | ||
| ); | ||
| }; |
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
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 |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import React from 'react'; | ||
| import classnames from 'classnames'; | ||
| import { replaceAngleBracketMatches } from '../../utils'; | ||
| import NodeIcon from '../icons/node-icon'; | ||
| import VisibleIcon from '../icons/visible'; | ||
| import InvisibleIcon from '../icons/invisible'; | ||
| import FocusModeIcon from '../icons/focus-mode'; | ||
| import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle'; | ||
|
|
||
| // The exact fixed height of a row as measured by getBoundingClientRect() | ||
| export const nodeListRowHeight = 32; | ||
|
|
||
| export const Row = ({ | ||
| active, | ||
| allUnchecked, | ||
| checked, | ||
| children, | ||
| container: Container = 'div', | ||
| disabled, | ||
| faded, | ||
| focused, | ||
| focusModeIcon = FocusModeIcon, | ||
| highlight, | ||
| icon, | ||
| id, | ||
| invisibleIcon = InvisibleIcon, | ||
| isSlicingPipelineApplied, | ||
| kind, | ||
| label, | ||
| name, | ||
| onChange, | ||
| onClick, | ||
| onMouseEnter, | ||
| onMouseLeave, | ||
| onToggleHoveredFocusMode, | ||
| rowType, | ||
| selected, | ||
| type, | ||
| visible, | ||
| visibleIcon = VisibleIcon, | ||
| }) => { | ||
| const isModularPipeline = type === 'modularPipeline'; | ||
| const FocusIcon = isModularPipeline ? focusModeIcon : null; | ||
| const isChecked = isModularPipeline ? checked || focused : checked; | ||
| const VisibilityIcon = isChecked ? visibleIcon : invisibleIcon; | ||
| const isButton = onClick && kind !== 'filter'; | ||
| const TextButton = isButton ? 'button' : 'div'; | ||
|
|
||
| return ( | ||
| <Container | ||
| className={classnames( | ||
| 'node-list-row kedro', | ||
| `node-list-row--kind-${kind}`, | ||
| { | ||
| 'node-list-row--visible': visible, | ||
| 'node-list-row--active': active, | ||
| 'node-list-row--selected': | ||
| selected || (!isSlicingPipelineApplied && highlight), | ||
| 'node-list-row--disabled': disabled, | ||
| 'node-list-row--unchecked': !isChecked, | ||
| 'node-list-row--overwrite': !(active || selected), | ||
| } | ||
| )} | ||
| title={name} | ||
| onMouseEnter={visible ? onMouseEnter : null} | ||
| onMouseLeave={visible ? onMouseLeave : null} | ||
| > | ||
| <NodeIcon | ||
| className={classnames( | ||
| 'node-list-row__type-icon', | ||
| 'node-list-row__icon', | ||
| { | ||
| 'node-list-row__type-icon--faded': faded, | ||
| 'node-list-row__type-icon--disabled': disabled, | ||
| // 'node-list-row__type-icon--nested': !children, | ||
| 'node-list-row__type-icon--active': active, | ||
| 'node-list-row__type-icon--selected': selected, | ||
| } | ||
| )} | ||
| icon={icon} | ||
| /> | ||
| <TextButton | ||
| className={classnames( | ||
| 'node-list-row__text', | ||
| `node-list-row__text--kind-${kind}`, | ||
| `node-list-row__text--${rowType}` | ||
| )} | ||
| // data-test={`nodelist-${icon}-${children ? null : name}`} | ||
| onClick={onClick} | ||
| onFocus={onMouseEnter} | ||
| onBlur={onMouseLeave} | ||
| title={name} | ||
| > | ||
| <span | ||
| className={classnames( | ||
| 'node-list-row__label', | ||
| `node-list-row__label--kind-${kind}`, | ||
| { | ||
| 'node-list-row__label--faded': faded, | ||
| 'node-list-row__label--disabled': disabled, | ||
| } | ||
| )} | ||
| dangerouslySetInnerHTML={{ | ||
| __html: replaceAngleBracketMatches(label), | ||
| }} | ||
| /> | ||
| </TextButton> | ||
| {VisibilityIcon && ( | ||
| <NodeListRowToggle | ||
| allUnchecked={allUnchecked} | ||
| className={'node-list-row__icon'} | ||
| disabled={isModularPipeline ? focused : disabled} | ||
| focusChecked={isModularPipeline ? false : focused} | ||
| IconComponent={VisibilityIcon} | ||
| id={id} | ||
| isChecked={isChecked} | ||
| kind={kind} | ||
| name={name} | ||
| onChange={onChange} | ||
| selected={selected} | ||
| /> | ||
| )} | ||
| {FocusIcon && ( | ||
| <NodeListRowToggle | ||
| allUnchecked={allUnchecked} | ||
| className={'node-list-row__icon'} | ||
| disabled={disabled} | ||
| focusChecked={focused} | ||
| IconComponent={FocusIcon} | ||
| id={`${id}-focus`} | ||
| isChecked={isChecked} | ||
| kind={kind} | ||
| name={name} | ||
| onChange={onChange} | ||
| onToggleHoveredFocusMode={onToggleHoveredFocusMode} | ||
| selected={selected} | ||
| dataIconType="focus" | ||
| /> | ||
| )} | ||
| {children} | ||
| </Container> | ||
| ); | ||
| }; |