From 0129091abe676a17d59d4a0f72094b81952d1c37 Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sat, 29 Oct 2022 13:50:15 +0300 Subject: [PATCH 01/13] fixed dropdown logic and style --- libs/react/ui-core/src/lib/dropdown/dropdown.stories.tsx | 2 +- libs/react/ui-core/src/lib/dropdown/useDropdown.tsx | 8 +++++++- styles/components/dropdown/index.scss | 4 ++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/libs/react/ui-core/src/lib/dropdown/dropdown.stories.tsx b/libs/react/ui-core/src/lib/dropdown/dropdown.stories.tsx index dcc20c0..ecae310 100644 --- a/libs/react/ui-core/src/lib/dropdown/dropdown.stories.tsx +++ b/libs/react/ui-core/src/lib/dropdown/dropdown.stories.tsx @@ -31,5 +31,5 @@ Primary.args = { {label: 'Вариант 04', key: 'key 4'}, ], icon: , - errorText: 'Ошибка!!!' + errorText: 'Ошибка!!!', }; diff --git a/libs/react/ui-core/src/lib/dropdown/useDropdown.tsx b/libs/react/ui-core/src/lib/dropdown/useDropdown.tsx index f5909a2..8476bc2 100644 --- a/libs/react/ui-core/src/lib/dropdown/useDropdown.tsx +++ b/libs/react/ui-core/src/lib/dropdown/useDropdown.tsx @@ -15,13 +15,19 @@ export function useDropdown(props:DropdownProps):useDropdownProps { props.defaultSelectedKey && props.items.find((item) => item.key === props.defaultSelectedKey)?.label || null) + useEffect(() => { + if(props.defaultSelectedKey) { + setActiveItemKey(props.defaultSelectedKey) + } + }, [props.defaultSelectedKey]) + useEffect(() => { document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } - }) + }, []) const handleOpen = useCallback((isOpen: boolean) => { if(!props.disabled) { diff --git a/styles/components/dropdown/index.scss b/styles/components/dropdown/index.scss index 5e882e4..277baf5 100644 --- a/styles/components/dropdown/index.scss +++ b/styles/components/dropdown/index.scss @@ -22,6 +22,7 @@ } .dropdown-value { + width: 100%; user-select: none; box-sizing: border-box; display: flex; @@ -43,9 +44,8 @@ color: dt.$general-60; } .dropdown-label { - width: fit-content; + width: 100%; min-width: 146px; - max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; From 641c6a3c9b87c43f4e43723aaa8d292cbf3405ed Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sat, 29 Oct 2022 14:08:44 +0300 Subject: [PATCH 02/13] start table --- libs/react/ui-core/src/index.ts | 1 + .../Buttons/markdownButtons.stories.tsx | 14 +++++++++++ .../Preview/markdownPreview.stories.tsx | 14 +++++++++++ .../Redactor/markdownRedactor.stories.tsx | 14 +++++++++++ .../notifications--Notice.stories.tsx | 12 ++++++++++ .../notifications--Notifications.stories.tsx | 14 +++++++++++ .../notifications--noticesList.stories.tsx | 14 +++++++++++ ...useNotification--contextHolder.stories.tsx | 14 +++++++++++ ...eNotification--useNotification.stories.tsx | 14 +++++++++++ .../ui-core/src/lib/table/TableProps.d.ts | 23 +++++++++++++++++++ .../ui-core/src/lib/table/table.module.scss | 1 + .../ui-core/src/lib/table/table.spec.tsx | 10 ++++++++ .../ui-core/src/lib/table/table.stories.tsx | 12 ++++++++++ libs/react/ui-core/src/lib/table/table.tsx | 12 ++++++++++ .../timeline/timelineHiddenItems.stories.tsx | 14 +++++++++++ .../src/lib/timeline/timelineItem.stories.tsx | 14 +++++++++++ styles/components/table/index.scss | 1 + 17 files changed, 198 insertions(+) create mode 100644 libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx create mode 100644 libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx create mode 100644 libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx create mode 100644 libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx create mode 100644 libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx create mode 100644 libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx create mode 100644 libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx create mode 100644 libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx create mode 100644 libs/react/ui-core/src/lib/table/TableProps.d.ts create mode 100644 libs/react/ui-core/src/lib/table/table.module.scss create mode 100644 libs/react/ui-core/src/lib/table/table.spec.tsx create mode 100644 libs/react/ui-core/src/lib/table/table.stories.tsx create mode 100644 libs/react/ui-core/src/lib/table/table.tsx create mode 100644 libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx create mode 100644 libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx create mode 100644 styles/components/table/index.scss diff --git a/libs/react/ui-core/src/index.ts b/libs/react/ui-core/src/index.ts index 8e19d37..a10e0bd 100644 --- a/libs/react/ui-core/src/index.ts +++ b/libs/react/ui-core/src/index.ts @@ -1,3 +1,4 @@ +export * from './lib/table/table'; export * from './lib/markdown/markdown'; export * from './lib/spinner/spinner'; export * from './lib/steps/steps'; diff --git a/libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx b/libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx new file mode 100644 index 0000000..11b067a --- /dev/null +++ b/libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { MarkdownButtons } from './markdownButtons'; + +export default { + component: MarkdownButtons, + title: 'MarkdownButtons', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx b/libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx new file mode 100644 index 0000000..8d6b316 --- /dev/null +++ b/libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { MarkdownPreview } from './markdownPreview'; + +export default { + component: MarkdownPreview, + title: 'MarkdownPreview', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx b/libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx new file mode 100644 index 0000000..c99204b --- /dev/null +++ b/libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { MarkdownRedactor } from './markdownRedactor'; + +export default { + component: MarkdownRedactor, + title: 'MarkdownRedactor', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx b/libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx new file mode 100644 index 0000000..4b7d91b --- /dev/null +++ b/libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx @@ -0,0 +1,12 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Notice } from './notifications'; + +export default { + component: Notice, + title: 'Notice', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx b/libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx new file mode 100644 index 0000000..3e6a612 --- /dev/null +++ b/libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Notifications } from './notifications'; + +export default { + component: Notifications, + title: 'Notifications', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx b/libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx new file mode 100644 index 0000000..813b1b9 --- /dev/null +++ b/libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { noticesList } from './notifications'; + +export default { + component: noticesList, + title: 'noticesList', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx b/libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx new file mode 100644 index 0000000..9e60dea --- /dev/null +++ b/libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { contextHolder } from './useNotification'; + +export default { + component: contextHolder, + title: 'contextHolder', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx b/libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx new file mode 100644 index 0000000..87ae321 --- /dev/null +++ b/libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { useNotification } from './useNotification'; + +export default { + component: useNotification, + title: 'useNotification', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/table/TableProps.d.ts b/libs/react/ui-core/src/lib/table/TableProps.d.ts new file mode 100644 index 0000000..0e7cc22 --- /dev/null +++ b/libs/react/ui-core/src/lib/table/TableProps.d.ts @@ -0,0 +1,23 @@ +import {DefaultParams} from '../../default-types/defaultParams' + +export interface TableProps extends DefaultParams{ + columns: ColumnType + data: any +} + +export interface ColumnType { + title?: ColumnTitle + // Sorter + sorter?: + | boolean + | CompareFn + | { + compare?: CompareFn; + /** Config multiple sorter order priority */ + multiple?: number + }; + sortOrder?: SortOrder; + defaultSortOrder?: SortOrder; + sortDirections?: SortOrder[]; + showSorterTooltip?: boolean | TooltipProps +} diff --git a/libs/react/ui-core/src/lib/table/table.module.scss b/libs/react/ui-core/src/lib/table/table.module.scss new file mode 100644 index 0000000..31deeae --- /dev/null +++ b/libs/react/ui-core/src/lib/table/table.module.scss @@ -0,0 +1 @@ +@use '../../../../../../styles/components/table' as *; diff --git a/libs/react/ui-core/src/lib/table/table.spec.tsx b/libs/react/ui-core/src/lib/table/table.spec.tsx new file mode 100644 index 0000000..bb3d32a --- /dev/null +++ b/libs/react/ui-core/src/lib/table/table.spec.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { Table } from './table'; + +describe('Table', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/react/ui-core/src/lib/table/table.stories.tsx b/libs/react/ui-core/src/lib/table/table.stories.tsx new file mode 100644 index 0000000..2630b38 --- /dev/null +++ b/libs/react/ui-core/src/lib/table/table.stories.tsx @@ -0,0 +1,12 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Table } from './table'; + +export default { + component: Table, + title: 'Table', +} as ComponentMeta; + +const Template: ComponentStory = (args) =>
; + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/table/table.tsx b/libs/react/ui-core/src/lib/table/table.tsx new file mode 100644 index 0000000..a84108e --- /dev/null +++ b/libs/react/ui-core/src/lib/table/table.tsx @@ -0,0 +1,12 @@ +import { forwardRef } from 'react'; +import styles from './table.module.scss'; +import { TableProps } from './TableProps'; + +export const Table = forwardRef((props: TableProps, ref: any) => { + return ( +
+ +
+ ); +}) + diff --git a/libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx b/libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx new file mode 100644 index 0000000..3926737 --- /dev/null +++ b/libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { TimelineHiddenItems } from './timelineHiddenItems'; + +export default { + component: TimelineHiddenItems, + title: 'TimelineHiddenItems', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx b/libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx new file mode 100644 index 0000000..3fc3365 --- /dev/null +++ b/libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx @@ -0,0 +1,14 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { TimelineItem } from './timelineItem'; + +export default { + component: TimelineItem, + title: 'TimelineItem', +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/styles/components/table/index.scss b/styles/components/table/index.scss new file mode 100644 index 0000000..0d35871 --- /dev/null +++ b/styles/components/table/index.scss @@ -0,0 +1 @@ +@use '../../../styles/design-tokens' as dt; From cf3ca031d7fac7b5a3ed0136cb9e1181febc08b9 Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sat, 29 Oct 2022 23:38:20 +0300 Subject: [PATCH 03/13] add layout --- .../Buttons/markdownButtons.stories.tsx | 14 ---- .../Preview/markdownPreview.stories.tsx | 14 ---- .../Redactor/markdownRedactor.stories.tsx | 14 ---- .../notifications--Notice.stories.tsx | 12 --- .../notifications--Notifications.stories.tsx | 14 ---- .../notifications--noticesList.stories.tsx | 14 ---- ...useNotification--contextHolder.stories.tsx | 14 ---- ...eNotification--useNotification.stories.tsx | 14 ---- .../ui-core/src/lib/table/TableProps.d.ts | 29 +++---- .../ui-core/src/lib/table/table.spec.tsx | 4 +- .../ui-core/src/lib/table/table.stories.tsx | 79 ++++++++++++++++++- libs/react/ui-core/src/lib/table/table.tsx | 34 +++++++- .../timeline/timelineHiddenItems.stories.tsx | 14 ---- .../src/lib/timeline/timelineItem.stories.tsx | 14 ---- styles/components/table/index.scss | 9 +++ 15 files changed, 132 insertions(+), 161 deletions(-) delete mode 100644 libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx delete mode 100644 libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx diff --git a/libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx b/libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx deleted file mode 100644 index 11b067a..0000000 --- a/libs/react/ui-core/src/lib/markdown/Buttons/markdownButtons.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MarkdownButtons } from './markdownButtons'; - -export default { - component: MarkdownButtons, - title: 'MarkdownButtons', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx b/libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx deleted file mode 100644 index 8d6b316..0000000 --- a/libs/react/ui-core/src/lib/markdown/Preview/markdownPreview.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MarkdownPreview } from './markdownPreview'; - -export default { - component: MarkdownPreview, - title: 'MarkdownPreview', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx b/libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx deleted file mode 100644 index c99204b..0000000 --- a/libs/react/ui-core/src/lib/markdown/Redactor/markdownRedactor.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MarkdownRedactor } from './markdownRedactor'; - -export default { - component: MarkdownRedactor, - title: 'MarkdownRedactor', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx b/libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx deleted file mode 100644 index 4b7d91b..0000000 --- a/libs/react/ui-core/src/lib/notification/notifications--Notice.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Notice } from './notifications'; - -export default { - component: Notice, - title: 'Notice', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx b/libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx deleted file mode 100644 index 3e6a612..0000000 --- a/libs/react/ui-core/src/lib/notification/notifications--Notifications.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Notifications } from './notifications'; - -export default { - component: Notifications, - title: 'Notifications', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx b/libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx deleted file mode 100644 index 813b1b9..0000000 --- a/libs/react/ui-core/src/lib/notification/notifications--noticesList.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { noticesList } from './notifications'; - -export default { - component: noticesList, - title: 'noticesList', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx b/libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx deleted file mode 100644 index 9e60dea..0000000 --- a/libs/react/ui-core/src/lib/notification/useNotification--contextHolder.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { contextHolder } from './useNotification'; - -export default { - component: contextHolder, - title: 'contextHolder', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx b/libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx deleted file mode 100644 index 87ae321..0000000 --- a/libs/react/ui-core/src/lib/notification/useNotification--useNotification.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { useNotification } from './useNotification'; - -export default { - component: useNotification, - title: 'useNotification', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/table/TableProps.d.ts b/libs/react/ui-core/src/lib/table/TableProps.d.ts index 0e7cc22..7e0cc5d 100644 --- a/libs/react/ui-core/src/lib/table/TableProps.d.ts +++ b/libs/react/ui-core/src/lib/table/TableProps.d.ts @@ -1,23 +1,16 @@ import {DefaultParams} from '../../default-types/defaultParams' +import React from 'react' -export interface TableProps extends DefaultParams{ - columns: ColumnType - data: any +export interface TableProps extends DefaultParams{ + columns: ColumnsType[] + data: readonly RecordType[] } -export interface ColumnType { - title?: ColumnTitle - // Sorter - sorter?: - | boolean - | CompareFn - | { - compare?: CompareFn; - /** Config multiple sorter order priority */ - multiple?: number - }; - sortOrder?: SortOrder; - defaultSortOrder?: SortOrder; - sortDirections?: SortOrder[]; - showSorterTooltip?: boolean | TooltipProps +export interface ColumnsType { + title: React.ReactNode | string + key: React.Key + dataIndex: string + colSpan?: number + rowSpan?: number + width?: number } diff --git a/libs/react/ui-core/src/lib/table/table.spec.tsx b/libs/react/ui-core/src/lib/table/table.spec.tsx index bb3d32a..df36afb 100644 --- a/libs/react/ui-core/src/lib/table/table.spec.tsx +++ b/libs/react/ui-core/src/lib/table/table.spec.tsx @@ -4,7 +4,7 @@ import { Table } from './table'; describe('Table', () => { it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); + // const { baseElement } = render(
); + // expect(baseElement).toBeTruthy(); }); }); diff --git a/libs/react/ui-core/src/lib/table/table.stories.tsx b/libs/react/ui-core/src/lib/table/table.stories.tsx index 2630b38..36075ff 100644 --- a/libs/react/ui-core/src/lib/table/table.stories.tsx +++ b/libs/react/ui-core/src/lib/table/table.stories.tsx @@ -1,12 +1,89 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; import { Table } from './table'; +import {ColumnsType} from './TableProps' +import React from 'react' +import {Button} from '../button/button' export default { component: Table, title: 'Table', } as ComponentMeta; -const Template: ComponentStory = (args) =>
; +const Template: ComponentStory = (args) => { + + interface DataType { + key: number | string; + name: string | React.ReactNode; + phone: string; + age: number; + } + + const columns: ColumnsType[] = [ + { + title: 'Name', + dataIndex: 'name', + key: 1, + colSpan: 2, + rowSpan: 2, + width: 500 + }, + { + title: 'Phone', + dataIndex: 'phone', + colSpan: 0, + rowSpan: 0, + key: 2, + }, + { + title: 'Age', + dataIndex: 'age', + key: 3, + }, + ] + + const data: DataType[] = [ + { + key: 1, + name: 'name1', + phone: 'phone1', + age:1, + }, + { + key: 2, + name: 'name2', + phone: 'phone2', + age: 2, + }, + { + key: 3, + name: 'name3', + phone: 'phone3', + age: 3, + }, + { + key: 4, + phone: 'phone4', + name: 'name4', + age: 4, + }, + { + key: 5, + name:
+ ) +}; export const Primary = Template.bind({}); Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/table/table.tsx b/libs/react/ui-core/src/lib/table/table.tsx index a84108e..838fe00 100644 --- a/libs/react/ui-core/src/lib/table/table.tsx +++ b/libs/react/ui-core/src/lib/table/table.tsx @@ -2,10 +2,40 @@ import { forwardRef } from 'react'; import styles from './table.module.scss'; import { TableProps } from './TableProps'; -export const Table = forwardRef((props: TableProps, ref: any) => { +export const Table = forwardRef((props: TableProps, ref: any) => { + console.log(props.columns) return (
- + + + {(Object.values(props.columns)).map((item, index) => { + if(item.colSpan === 0 || item.rowSpan === 0) return null + return ( + + ) + })} + + + + { + (Object.values(props.data)).map((item) => { + return ( + + {props.columns.map((column, index) => { + if(column.colSpan === 0 || column.rowSpan === 0) return null + return ( + + ) + })} + + ) + }) + } +
+ {item.title} +
+ {item[column.dataIndex]} +
); }) diff --git a/libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx b/libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx deleted file mode 100644 index 3926737..0000000 --- a/libs/react/ui-core/src/lib/timeline/timelineHiddenItems.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { TimelineHiddenItems } from './timelineHiddenItems'; - -export default { - component: TimelineHiddenItems, - title: 'TimelineHiddenItems', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx b/libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx deleted file mode 100644 index 3fc3365..0000000 --- a/libs/react/ui-core/src/lib/timeline/timelineItem.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { TimelineItem } from './timelineItem'; - -export default { - component: TimelineItem, - title: 'TimelineItem', -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/styles/components/table/index.scss b/styles/components/table/index.scss index 0d35871..befdc79 100644 --- a/styles/components/table/index.scss +++ b/styles/components/table/index.scss @@ -1 +1,10 @@ @use '../../../styles/design-tokens' as dt; + +.container { + border: 1px solid black; + border-collapse: collapse; + + & th, td { + border: 1px solid black; + } +} From 0d241ad774bccf60f7046d58ae5d09746a9f767e Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sun, 30 Oct 2022 00:03:52 +0300 Subject: [PATCH 04/13] added colspan and rowspan --- .../ui-core/src/lib/table/TableProps.d.ts | 6 ++++++ .../ui-core/src/lib/table/table.stories.tsx | 20 +++++++++++++++++-- libs/react/ui-core/src/lib/table/table.tsx | 13 ++++++++---- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/libs/react/ui-core/src/lib/table/TableProps.d.ts b/libs/react/ui-core/src/lib/table/TableProps.d.ts index 7e0cc5d..3e5e9da 100644 --- a/libs/react/ui-core/src/lib/table/TableProps.d.ts +++ b/libs/react/ui-core/src/lib/table/TableProps.d.ts @@ -13,4 +13,10 @@ export interface ColumnsType { colSpan?: number rowSpan?: number width?: number + onCell?: GetComponentProps } + +export type GetComponentProps = ( + data: DataType, + index: number, +) => React.TdHTMLAttributes; diff --git a/libs/react/ui-core/src/lib/table/table.stories.tsx b/libs/react/ui-core/src/lib/table/table.stories.tsx index 36075ff..0485ef8 100644 --- a/libs/react/ui-core/src/lib/table/table.stories.tsx +++ b/libs/react/ui-core/src/lib/table/table.stories.tsx @@ -24,8 +24,24 @@ const Template: ComponentStory = (args) => { dataIndex: 'name', key: 1, colSpan: 2, - rowSpan: 2, - width: 500 + width: 500, + onCell: (value, index) => { + if (index === 0) { + return {rowSpan: 3} + } + else if(index === 1 || index === 2) { + return {rowSpan: 0} + } + else { + return {rowSpan: 1} + } + // if (index % 2 === 1) { + // return {rowSpan: 0} + // } + // else { + // return {rowSpan: 2} + // } + } }, { title: 'Phone', diff --git a/libs/react/ui-core/src/lib/table/table.tsx b/libs/react/ui-core/src/lib/table/table.tsx index 838fe00..773875e 100644 --- a/libs/react/ui-core/src/lib/table/table.tsx +++ b/libs/react/ui-core/src/lib/table/table.tsx @@ -20,13 +20,18 @@ export const Table = forwardRef((props: TableProps, ref: any) => { { - (Object.values(props.data)).map((item) => { + (Object.values(props.data)).map((item, index) => { + return ( - {props.columns.map((column, index) => { - if(column.colSpan === 0 || column.rowSpan === 0) return null + {props.columns.map((column, tdIndex) => { + let attributes + if(column.onCell) { + attributes = column.onCell(item, index) + } + if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null return ( - + {item[column.dataIndex]} ) From 40c7264fd972bd377e35f4cb6f9f17f269c2112a Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sun, 30 Oct 2022 15:15:38 +0300 Subject: [PATCH 05/13] Added some styles + footer --- .../ui-core/src/lib/table/TableProps.d.ts | 6 +++- .../ui-core/src/lib/table/table.stories.tsx | 15 +++++----- libs/react/ui-core/src/lib/table/table.tsx | 30 ++++++++++++++++--- libs/react/ui-core/src/lib/table/useTable.ts | 17 +++++++++++ styles/components/table/index.scss | 19 +++++++++--- 5 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 libs/react/ui-core/src/lib/table/useTable.ts diff --git a/libs/react/ui-core/src/lib/table/TableProps.d.ts b/libs/react/ui-core/src/lib/table/TableProps.d.ts index 3e5e9da..044467b 100644 --- a/libs/react/ui-core/src/lib/table/TableProps.d.ts +++ b/libs/react/ui-core/src/lib/table/TableProps.d.ts @@ -3,7 +3,9 @@ import React from 'react' export interface TableProps extends DefaultParams{ columns: ColumnsType[] - data: readonly RecordType[] + data: RecordType[] + footer?: RecordType + tableLayout?: TableLayout } export interface ColumnsType { @@ -20,3 +22,5 @@ export type GetComponentProps = ( data: DataType, index: number, ) => React.TdHTMLAttributes; + +export type TableLayout = 'auto' | 'fixed'; diff --git a/libs/react/ui-core/src/lib/table/table.stories.tsx b/libs/react/ui-core/src/lib/table/table.stories.tsx index 0485ef8..45ec39a 100644 --- a/libs/react/ui-core/src/lib/table/table.stories.tsx +++ b/libs/react/ui-core/src/lib/table/table.stories.tsx @@ -35,12 +35,6 @@ const Template: ComponentStory = (args) => { else { return {rowSpan: 1} } - // if (index % 2 === 1) { - // return {rowSpan: 0} - // } - // else { - // return {rowSpan: 2} - // } } }, { @@ -96,8 +90,15 @@ const Template: ComponentStory = (args) => { }, ] + const footer: DataType = { + key: 7, + name: 'name7', + phone: 'phone7', + age: 7, + } + return ( - +
) }; diff --git a/libs/react/ui-core/src/lib/table/table.tsx b/libs/react/ui-core/src/lib/table/table.tsx index 773875e..a326f83 100644 --- a/libs/react/ui-core/src/lib/table/table.tsx +++ b/libs/react/ui-core/src/lib/table/table.tsx @@ -1,17 +1,19 @@ import { forwardRef } from 'react'; import styles from './table.module.scss'; import { TableProps } from './TableProps'; +import {useTable} from './useTable' export const Table = forwardRef((props: TableProps, ref: any) => { + const {classes} = useTable(props) console.log(props.columns) return ( -
+
{(Object.values(props.columns)).map((item, index) => { if(item.colSpan === 0 || item.rowSpan === 0) return null return ( - ) @@ -27,11 +29,11 @@ export const Table = forwardRef((props: TableProps, ref: any) => { {props.columns.map((column, tdIndex) => { let attributes if(column.onCell) { - attributes = column.onCell(item, index) + attributes = column.onCell(item, index) // index - row number } if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null return ( - ) @@ -41,6 +43,26 @@ export const Table = forwardRef((props: TableProps, ref: any) => { }) } + { + props.footer && + + + {props.columns.map((column, tdIndex) => { + let attributes + if(column.onCell) { + debugger + attributes = column.onCell(props.footer, props.data.length) // footer row number + } + if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null + return ( + + ) + })} + + + }
+ {item.title} + {item[column.dataIndex]}
+ {props.footer[column.dataIndex]} +
); }) diff --git a/libs/react/ui-core/src/lib/table/useTable.ts b/libs/react/ui-core/src/lib/table/useTable.ts new file mode 100644 index 0000000..a058f2b --- /dev/null +++ b/libs/react/ui-core/src/lib/table/useTable.ts @@ -0,0 +1,17 @@ +import {useMemo} from 'react' +import {getClasses} from '../../utils/getClasses' +import styles from './table.module.scss' +import {TableProps} from './TableProps' + +export const useTable = (props: TableProps) => { + + const classes = useMemo(() => { + const conditions:{[index: string]:boolean} = { + "table": true, + "table-fixed": props.tableLayout === 'fixed' + }; + return getClasses(conditions, styles, props.className) + }, [props]); + + return {classes} +} diff --git a/styles/components/table/index.scss b/styles/components/table/index.scss index befdc79..8fc2ab5 100644 --- a/styles/components/table/index.scss +++ b/styles/components/table/index.scss @@ -1,10 +1,21 @@ @use '../../../styles/design-tokens' as dt; -.container { - border: 1px solid black; +.table { border-collapse: collapse; + table-layout: auto; - & th, td { - border: 1px solid black; + &.table-fixed { + table-layout: fixed; + } + + & .table-head, .table-cell { + box-sizing: border-box; + border: 1px solid dt.$general-50; + color: dt.$general-90; + padding: 16px 20px; + text-align: center; + } + & .table-head, .table-footer { + background-color: dt.$general-30; } } From 0573b7c7960fe144aa90f954af6cce9038567029 Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sun, 30 Oct 2022 16:14:57 +0300 Subject: [PATCH 06/13] Split for components --- .../ui-core/src/lib/table/Body/tableBody.tsx | 37 +++++++++++ .../src/lib/table/Footer/tableFooter.tsx | 47 ++++++++++++++ .../src/lib/table/Header/tableHeader.tsx | 26 ++++++++ .../ui-core/src/lib/table/TableProps.d.ts | 2 +- .../ui-core/src/lib/table/table.stories.tsx | 2 + libs/react/ui-core/src/lib/table/table.tsx | 65 +++---------------- styles/components/table/index.scss | 9 +++ 7 files changed, 130 insertions(+), 58 deletions(-) create mode 100644 libs/react/ui-core/src/lib/table/Body/tableBody.tsx create mode 100644 libs/react/ui-core/src/lib/table/Footer/tableFooter.tsx create mode 100644 libs/react/ui-core/src/lib/table/Header/tableHeader.tsx diff --git a/libs/react/ui-core/src/lib/table/Body/tableBody.tsx b/libs/react/ui-core/src/lib/table/Body/tableBody.tsx new file mode 100644 index 0000000..c09003f --- /dev/null +++ b/libs/react/ui-core/src/lib/table/Body/tableBody.tsx @@ -0,0 +1,37 @@ +import React, {FC} from 'react' +import styles from '../table.module.scss' +import {ColumnsType} from '../TableProps' + +const TableBody:FC> = ({data, columns}) => { + return ( + + { + (data.map((item, index) => { + return ( + + {columns.map((column, tdIndex) => { + let attributes + if(column.onCell) { + attributes = column.onCell(item, index) // index - row number + } + if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null + return ( + + {item[column.dataIndex]} + + ) + })} + + ) + })) + } + + ) +} + +export default TableBody + +type MyProps = { + data: RecordType[] + columns: ColumnsType[] +} diff --git a/libs/react/ui-core/src/lib/table/Footer/tableFooter.tsx b/libs/react/ui-core/src/lib/table/Footer/tableFooter.tsx new file mode 100644 index 0000000..8bd1363 --- /dev/null +++ b/libs/react/ui-core/src/lib/table/Footer/tableFooter.tsx @@ -0,0 +1,47 @@ +import React, {FC} from 'react' +import styles from '../table.module.scss' +import {ColumnsType} from '../TableProps' + +const TableFooter:FC> = ({footer, columns, dataLength}) => { + return ( + <> + { + footer && + !React.isValidElement(footer) + ? + + + {columns.map((column, index) => { + let attributes + if(column.onCell) { + attributes = column.onCell(footer, dataLength) // footer row number + } + if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null + return ( + + {footer[column.dataIndex]} + + ) + })} + + + : + + + + {footer} + + + + } + + ) +} + +export default TableFooter + +type MyProps = { + footer?: RecordType | React.ReactNode + columns: ColumnsType[] + dataLength: number +} diff --git a/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx b/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx new file mode 100644 index 0000000..d1f529d --- /dev/null +++ b/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx @@ -0,0 +1,26 @@ +import React, {FC} from 'react' +import styles from '../table.module.scss' +import {ColumnsType} from '../TableProps' + +const TableHeader:FC> = ({columns}) => { + return ( + + + {columns.map((item) => { + if(item.colSpan === 0 || item.rowSpan === 0) return null + return ( + + {item.title} + + ) + })} + + + ) +} + +export default TableHeader + +type MyProps = { + columns: ColumnsType[] +} diff --git a/libs/react/ui-core/src/lib/table/TableProps.d.ts b/libs/react/ui-core/src/lib/table/TableProps.d.ts index 044467b..7224fba 100644 --- a/libs/react/ui-core/src/lib/table/TableProps.d.ts +++ b/libs/react/ui-core/src/lib/table/TableProps.d.ts @@ -4,7 +4,7 @@ import React from 'react' export interface TableProps extends DefaultParams{ columns: ColumnsType[] data: RecordType[] - footer?: RecordType + footer?: RecordType | React.ReactNode tableLayout?: TableLayout } diff --git a/libs/react/ui-core/src/lib/table/table.stories.tsx b/libs/react/ui-core/src/lib/table/table.stories.tsx index 45ec39a..837a283 100644 --- a/libs/react/ui-core/src/lib/table/table.stories.tsx +++ b/libs/react/ui-core/src/lib/table/table.stories.tsx @@ -26,6 +26,7 @@ const Template: ComponentStory = (args) => { colSpan: 2, width: 500, onCell: (value, index) => { + if (index === 0) { return {rowSpan: 3} } @@ -96,6 +97,7 @@ const Template: ComponentStory = (args) => { phone: 'phone7', age: 7, } + const footerNode =
Итого
return ( diff --git a/libs/react/ui-core/src/lib/table/table.tsx b/libs/react/ui-core/src/lib/table/table.tsx index a326f83..29b1a0a 100644 --- a/libs/react/ui-core/src/lib/table/table.tsx +++ b/libs/react/ui-core/src/lib/table/table.tsx @@ -1,68 +1,19 @@ +import React from 'react' import { forwardRef } from 'react'; -import styles from './table.module.scss'; import { TableProps } from './TableProps'; import {useTable} from './useTable' +import TableHeader from './Header/tableHeader' +import TableBody from './Body/tableBody' +import TableFooter from './Footer/tableFooter' export const Table = forwardRef((props: TableProps, ref: any) => { const {classes} = useTable(props) - console.log(props.columns) + return (
- - - {(Object.values(props.columns)).map((item, index) => { - if(item.colSpan === 0 || item.rowSpan === 0) return null - return ( - - ) - })} - - - - { - (Object.values(props.data)).map((item, index) => { - - return ( - - {props.columns.map((column, tdIndex) => { - let attributes - if(column.onCell) { - attributes = column.onCell(item, index) // index - row number - } - if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null - return ( - - ) - })} - - ) - }) - } - - { - props.footer && - - - {props.columns.map((column, tdIndex) => { - let attributes - if(column.onCell) { - debugger - attributes = column.onCell(props.footer, props.data.length) // footer row number - } - if((attributes?.colSpan === 0 || column.colSpan === 0) || (attributes?.rowSpan === 0 || column.rowSpan === 0)) return null - return ( - - ) - })} - - - } + + +
- {item.title} -
- {item[column.dataIndex]} -
- {props.footer[column.dataIndex]} -
); }) diff --git a/styles/components/table/index.scss b/styles/components/table/index.scss index 8fc2ab5..eaac1a3 100644 --- a/styles/components/table/index.scss +++ b/styles/components/table/index.scss @@ -14,8 +14,17 @@ color: dt.$general-90; padding: 16px 20px; text-align: center; + + font-size: dt.$typo-font-p-medium-size; + line-height: dt.$typo-font-p-medium-line-height; + font-weight: dt.$typo-font-p-medium-weight; } & .table-head, .table-footer { background-color: dt.$general-30; } + & .table-footer { + &-element { + text-align: left; + } + } } From 523d7639ed2ba4893c70486a7c6e1b566d9e7afb Mon Sep 17 00:00:00 2001 From: Zayac11 Date: Sun, 30 Oct 2022 18:07:53 +0300 Subject: [PATCH 07/13] added columns sort, it sorts initial data array --- .../src/lib/table/Header/tableHeader.tsx | 21 +++++-- .../src/lib/table/Header/useTableHeader.ts | 19 +++++++ .../ui-core/src/lib/table/TableProps.d.ts | 3 + .../ui-core/src/lib/table/table.stories.tsx | 27 ++++----- libs/react/ui-core/src/lib/table/table.tsx | 10 ++-- libs/react/ui-core/src/lib/table/useTable.ts | 57 ++++++++++++++++++- styles/components/table/index.scss | 29 ++++++++++ 7 files changed, 140 insertions(+), 26 deletions(-) create mode 100644 libs/react/ui-core/src/lib/table/Header/useTableHeader.ts diff --git a/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx b/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx index d1f529d..99d557e 100644 --- a/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx +++ b/libs/react/ui-core/src/lib/table/Header/tableHeader.tsx @@ -1,16 +1,24 @@ import React, {FC} from 'react' import styles from '../table.module.scss' -import {ColumnsType} from '../TableProps' +import {ColumnsType, TableSortType} from '../TableProps' +import Icon from '../../icon/icon' +import {useTableHeader} from './useTableHeader' -const TableHeader:FC> = ({columns}) => { +const TableHeader:FC> = ({columns, sortValue, sortType, sortTable}) => { + const {getIconClasses} = useTableHeader({columns, sortValue, sortType, sortTable}) return ( {columns.map((item) => { if(item.colSpan === 0 || item.rowSpan === 0) return null return ( - - {item.title} + item.sorter && sortTable(item.dataIndex, sortType)} className={styles['table-head']} colSpan={item.colSpan} rowSpan={item.rowSpan} style={{width: item.width}} key={item.key}> + + {item.title} + { + item.sorter && + } + ) })} @@ -21,6 +29,9 @@ const TableHeader:FC> = ({columns}) => { export default TableHeader -type MyProps = { +export type TableHeaderProps = { columns: ColumnsType[] + sortValue: string + sortType: TableSortType + sortTable: (value: string, type: TableSortType) => void } diff --git a/libs/react/ui-core/src/lib/table/Header/useTableHeader.ts b/libs/react/ui-core/src/lib/table/Header/useTableHeader.ts new file mode 100644 index 0000000..11a39ce --- /dev/null +++ b/libs/react/ui-core/src/lib/table/Header/useTableHeader.ts @@ -0,0 +1,19 @@ +import {useCallback} from 'react' +import styles from '../table.module.scss' +import {TableHeaderProps} from './tableHeader' +import {getClasses} from '../../../utils/getClasses' + +export const useTableHeader = (props: TableHeaderProps) => { + + const getIconClasses = useCallback((title: string) => { + const conditions:{[index: string]:boolean} = { + "table-head-sort": true, + "table-head-sort-active": props.sortValue === title && props.sortType !== '', + "table-head-sort-descending": props.sortType === 'descending' || props.sortType === '', + "table-head-sort-ascending": props.sortType === 'ascending', + }; + return getClasses(conditions, styles) + }, [props]); + + return {getIconClasses} +} diff --git a/libs/react/ui-core/src/lib/table/TableProps.d.ts b/libs/react/ui-core/src/lib/table/TableProps.d.ts index 7224fba..d4b13c1 100644 --- a/libs/react/ui-core/src/lib/table/TableProps.d.ts +++ b/libs/react/ui-core/src/lib/table/TableProps.d.ts @@ -15,6 +15,7 @@ export interface ColumnsType { colSpan?: number rowSpan?: number width?: number + sorter?: boolean onCell?: GetComponentProps } @@ -24,3 +25,5 @@ export type GetComponentProps = ( ) => React.TdHTMLAttributes; export type TableLayout = 'auto' | 'fixed'; + +export type TableSortType = 'descending' | 'ascending' | '' diff --git a/libs/react/ui-core/src/lib/table/table.stories.tsx b/libs/react/ui-core/src/lib/table/table.stories.tsx index 837a283..082cb69 100644 --- a/libs/react/ui-core/src/lib/table/table.stories.tsx +++ b/libs/react/ui-core/src/lib/table/table.stories.tsx @@ -49,6 +49,7 @@ const Template: ComponentStory = (args) => { title: 'Age', dataIndex: 'age', key: 3, + sorter: true }, ] @@ -59,27 +60,21 @@ const Template: ComponentStory = (args) => { phone: 'phone1', age:1, }, - { - key: 2, - name: 'name2', - phone: 'phone2', - age: 2, - }, - { - key: 3, - name: 'name3', - phone: 'phone3', - age: 3, - }, { key: 4, phone: 'phone4', name: 'name4', age: 4, }, + { + key: 2, + name: 'name2', + phone: 'phone2', + age: 2, + }, { key: 5, - name: