From 886c2583574cce6058ecb20478c5b60f020cf693 Mon Sep 17 00:00:00 2001 From: bakhirev Date: Thu, 15 Aug 2024 14:52:27 +0300 Subject: [PATCH] update --- src/ts/components/Cards/components/Card.tsx | 25 +++++-- src/ts/components/Cards/components/Line.tsx | 14 ++-- .../Cards/helpers/getCardConfigs.ts | 8 ++- .../components/Cards/styles/index.module.scss | 66 +++++++++++++++---- src/ts/components/UiKit/components/Tags.tsx | 3 + .../components/UiKit/styles/tags.module.scss | 6 +- 6 files changed, 97 insertions(+), 25 deletions(-) diff --git a/src/ts/components/Cards/components/Card.tsx b/src/ts/components/Cards/components/Card.tsx index bf5da03..ad1d10a 100644 --- a/src/ts/components/Cards/components/Card.tsx +++ b/src/ts/components/Cards/components/Card.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { IColumn } from 'ts/components/Table/interfaces/Column'; import Line from './Line'; +import LineWithTemplate from './LineWithTemplate'; import Title from './Title'; import style from '../styles/index.module.scss'; @@ -19,6 +20,7 @@ function Card({ className, customStyle, }: ICardProps) { + let alreadySetHeader = false; const parts = lines.map((line: IColumn, columnIndex: number) => { const value = line.properties ? item[line.properties] @@ -28,13 +30,13 @@ function Card({ ? line.formatter(value) : value; - if (typeof line.template === 'function') { - return line.template(formattedValue, item); - } + const hasTemplate = typeof line.template === 'function'; + const content = hasTemplate // @ts-ignore + ? line.template(formattedValue, item) + : `${line.prefixes ?? ''}${formattedValue ?? ''}${line.suffixes ?? ''}`; - const content = `${line.prefixes ?? ''}${formattedValue ?? ''}${line.suffixes ?? ''}`; - - if (!columnIndex) { + if (!alreadySetHeader && line.title) { + alreadySetHeader = true; return ( 110))) { + return ( + <LineWithTemplate + key={`${line.title}_${columnIndex}`} + item={item} + column={line} + value={content} + /> + ); + } + return ( <Line key={`${line.title}_${columnIndex}`} diff --git a/src/ts/components/Cards/components/Line.tsx b/src/ts/components/Cards/components/Line.tsx index 331a1d3..000b355 100644 --- a/src/ts/components/Cards/components/Line.tsx +++ b/src/ts/components/Cards/components/Line.tsx @@ -17,17 +17,21 @@ function Line({ item, value, className, -}: ILineProps): JSX.Element { +}: ILineProps): JSX.Element | null { const { t } = useTranslation(); const columnClassName = typeof column.className === 'function' ? column.className('body', item) : column.className; + const type = typeof value; + if (!column.title + || type === 'undefined' + || value === '' + || (type === 'number' && isNaN(value as number)) + || (type === 'object' && !value)) return null; + return ( - <div - key={column.title} - className={`${style.card_line} ${className || ''} ${columnClassName || ''}`} - > + <div className={`${style.card_line} ${className || ''} ${columnClassName || ''}`}> <div className={style.card_line_title}> {t(column.title || '')} </div> diff --git a/src/ts/components/Cards/helpers/getCardConfigs.ts b/src/ts/components/Cards/helpers/getCardConfigs.ts index 24073f4..e4f44ee 100644 --- a/src/ts/components/Cards/helpers/getCardConfigs.ts +++ b/src/ts/components/Cards/helpers/getCardConfigs.ts @@ -8,9 +8,13 @@ function getCardConfigs( column: IColumn, index: number, ) => { + if (index === 0) { + acc.text.push(column); + return acc; + } + const nextColumn = dirtyColumns[index + 1]; - if (column.template === ColumnTypesEnum.SHORT_NUMBER - && typeof nextColumn?.template === 'function') { + if (column.template === ColumnTypesEnum.SHORT_NUMBER && typeof nextColumn?.template === 'function') { acc.text.push({ ...column, title: nextColumn?.title, diff --git a/src/ts/components/Cards/styles/index.module.scss b/src/ts/components/Cards/styles/index.module.scss index 01f6bd9..bb494a9 100644 --- a/src/ts/components/Cards/styles/index.module.scss +++ b/src/ts/components/Cards/styles/index.module.scss @@ -1,15 +1,18 @@ @import 'src/styles/variables'; .card { + position: relative; display: inline-block; width: 100%; - padding: var(--space-s); + padding: var(--space-xxl) var(--space-s) var(--space-s); margin: 0 var(--space-xxl) var(--space-xxl) 0; - border-radius: var(--border-radius-m); - border: 1px solid var(--color-border); + page-break-inside: avoid; box-sizing: border-box; vertical-align: top; + + border-radius: var(--border-radius-m); + border: 1px solid var(--color-border); background-color: var(--color-white); &_wrapper { @@ -18,21 +21,36 @@ } &_title { + position: absolute; + top: -13px; + left: 20%; + right: 20%; + font-size: var(--font-m); font-weight: bold; - display: block; + display: inline-block; + padding: var(--space-xxs) var(--space-s); margin: 0 0 var(--space-l); line-height: 1.3; - white-space: normal; + white-space: nowrap; + overflow: hidden; text-overflow: ellipsis; text-align: center; + + border-radius: var(--border-radius-s); + border: 1px solid var(--color-border); + background-color: var(--color-white); } &_line { - display: block; + display: flex; + justify-content: space-between; + align-items: center; + + padding: var(--space-xxs) var(--space-xxs) var(--space-xxxs); + white-space: nowrap; - padding: var(--space-xxs); box-sizing: border-box; border: none; @@ -40,26 +58,52 @@ &_value { font-size: var(--font-s); position: relative; + display: inline-block; + width: max-content; + line-height: 1.3; white-space: normal; text-overflow: ellipsis; vertical-align: top; box-sizing: border-box; text-align: left; - } - &_title { - width: 60%; + color: var(--color-42); } &_value { - width: 40%; text-align: right; } } + + &_line_with_template { + display: block; + text-align: center; + margin-top: var(--space-xxs); + border-top: 2px dotted var(--color-border); + + &_title { + font-size: var(--font-s); + + display: block; + padding: var(--space-xxs) var(--space-xxs) var(--space-xxs); + + line-height: 1.3; + white-space: normal; + text-overflow: ellipsis; + vertical-align: top; + box-sizing: border-box; + + color: var(--color-42); + } + } } .card_line + .card_line { border-top: 1px solid var(--color-border); } + +.card_line_with_template > .line_chart { + margin-top: 0; +} diff --git a/src/ts/components/UiKit/components/Tags.tsx b/src/ts/components/UiKit/components/Tags.tsx index 94eb057..b57e106 100644 --- a/src/ts/components/UiKit/components/Tags.tsx +++ b/src/ts/components/UiKit/components/Tags.tsx @@ -13,6 +13,7 @@ function UiKitTags({ }: IUiKitTagsProps) { const values = Array.isArray(value) ? value : [value]; const formattedValues = values.filter((v) => v); + if (!formattedValues?.length) return null; const items = formattedValues .map((tagValue: any) => ( @@ -22,6 +23,8 @@ function UiKitTags({ /> )); + if (!items?.length) return null; + return ( <div className={style.ui_kit_tags}> {items} diff --git a/src/ts/components/UiKit/styles/tags.module.scss b/src/ts/components/UiKit/styles/tags.module.scss index 3b61352..a8a5d81 100644 --- a/src/ts/components/UiKit/styles/tags.module.scss +++ b/src/ts/components/UiKit/styles/tags.module.scss @@ -7,7 +7,7 @@ &_item { display: inline-block; padding: var(--space-xxxs) var(--space-xs); - margin: 0 var(--space-xs) var(--space-xs) 0; + margin: 0 0 var(--space-xs) 0; font-size: var(--font-s); font-weight: 100; @@ -25,3 +25,7 @@ color: var(--color-black); } } + +.ui_kit_tags_item + .ui_kit_tags_item { + margin-right: var(--space-xs); +}