From a722b6276f3ab99cf3fac5a21039dcb2267e68de Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Thu, 10 Apr 2025 18:09:50 +0400 Subject: [PATCH 01/19] implement: icon component --- .../content_view/content/card/cover.tsx | 6 +- .../grids/new/card_view/header_panel/item.tsx | 36 +-- .../__internal/grids/new/grid_core/icon.tsx | 304 ++++++++++++++++++ 3 files changed, 317 insertions(+), 29 deletions(-) create mode 100644 packages/devextreme/js/__internal/grids/new/grid_core/icon.tsx diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx index eeba93408a65..2ba4f875030d 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx @@ -1,12 +1,12 @@ import messageLocalization from '@js/localization/message'; import { combineClasses } from '@ts/core/utils/combine_classes'; +import { Icon } from '@ts/grids/new/grid_core/icon'; import { Component } from 'inferno'; export const CLASSES = { cover: 'dx-card-cover', image: 'dx-card-cover-image', noImage: 'dx-card-cover-noimage', - noImageIcon: 'dx-icon dx-icon-imagethumbnail', }; export interface CoverProps { @@ -41,8 +41,8 @@ export class Cover extends Component { /> )} {!src && ( -
)} diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx index d3fe17c14273..a083934d140a 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx @@ -3,6 +3,7 @@ import { MultipleKeyDownHandler } from '@ts/grids/new/grid_core/keyboard_navigat import type { ComponentType } from 'inferno'; import { Component, createRef } from 'inferno'; +import { Icon } from '../../grid_core/icon'; import type { Status } from './column_sortable'; export const CLASSES = { @@ -16,29 +17,6 @@ export const CLASSES = { iconEmpty: 'dx-header-filter-icon', iconFilled: 'dx-header-filter-icon--selected', }, - icon: 'dx-icon', -}; - -// TODO: extract icons to separate component -const ICONS = { - // TODO: move to dx-icon once they are updated - forbid: ( - - - - ), - // TODO: move to dx-icon once they are updated - moving: ( - - - - ), - sortUp:
, - sortDown:
, }; interface SortIconProps { @@ -50,8 +28,8 @@ interface SortIconProps { function SortIcon(props: SortIconProps): JSX.Element { return (
- {props.sortOrder === 'asc' && ICONS.sortUp} - {props.sortOrder === 'desc' && ICONS.sortDown} + {props.sortOrder === 'asc' && } + {props.sortOrder === 'desc' && } { props.showSortIndex && (
@@ -95,6 +73,12 @@ export class Item extends Component { hasHeaderFilterValue ? CLASSES.headerFilter.iconFilled : '', ].join(' '); + const icon = this.props.status && { + forbid: , + moving: , + none: undefined, + }[this.props.status]; + return (
{ onKeyUp={this.keyboardHandler.onKeyUpHandler} onContextMenu={this.props.onContextMenu} > - {this.props.status && ICONS[this.props.status]} + {icon} {Template &&