From bd1ae6e10e5d47ec7e497774f1fdc1119cf5315a Mon Sep 17 00:00:00 2001 From: Peiman Date: Mon, 11 Nov 2024 12:32:59 +0330 Subject: [PATCH 1/4] feat: add breakpoint to the table component --- .../ui/src/2_molecules/Table/Table.module.css | 27 +++++++++++++++---- .../src/2_molecules/Table/Table.stories.tsx | 5 ++++ packages/ui/src/2_molecules/Table/Table.tsx | 26 +++++++++++------- .../ui/src/2_molecules/Table/Table.types.ts | 7 +++++ packages/ui/src/2_molecules/Table/index.ts | 2 +- 5 files changed, 51 insertions(+), 16 deletions(-) diff --git a/packages/ui/src/2_molecules/Table/Table.module.css b/packages/ui/src/2_molecules/Table/Table.module.css index 69da5188d..b6c058328 100644 --- a/packages/ui/src/2_molecules/Table/Table.module.css +++ b/packages/ui/src/2_molecules/Table/Table.module.css @@ -1,7 +1,24 @@ -.desktop { - @apply hidden lg:block; +.md { + &.desktop { + @apply hidden md:block; + } + &.mobile { + @apply block md:hidden; + } } - -.mobile { - @apply block lg:hidden; +.lg { + &.desktop { + @apply hidden lg:block; + } + &.mobile { + @apply block lg:hidden; + } +} +.xl { + &.desktop { + @apply hidden xl:block; + } + &.mobile { + @apply block xl:hidden; + } } diff --git a/packages/ui/src/2_molecules/Table/Table.stories.tsx b/packages/ui/src/2_molecules/Table/Table.stories.tsx index be8f27469..efc7e7abe 100644 --- a/packages/ui/src/2_molecules/Table/Table.stories.tsx +++ b/packages/ui/src/2_molecules/Table/Table.stories.tsx @@ -141,6 +141,11 @@ Basic.argTypes = { description: 'Callback which gets fired when order options need to be updated.', }, + breakpoint: { + control: 'TableBreakpoint', + description: + 'The breakpoint on which Table switches from mobile device to desktop', + }, }; export const NoData = Template.bind({}); diff --git a/packages/ui/src/2_molecules/Table/Table.tsx b/packages/ui/src/2_molecules/Table/Table.tsx index 9676615ae..bdd6731c4 100644 --- a/packages/ui/src/2_molecules/Table/Table.tsx +++ b/packages/ui/src/2_molecules/Table/Table.tsx @@ -1,3 +1,6 @@ +import classNames from 'classnames'; + +import { Breakpoint } from '../../types'; import { RowObject } from '../TableBase'; import styles from './Table.module.css'; import { TableProps } from './Table.types'; @@ -7,13 +10,16 @@ import { TableMobile } from './components/TableMobile/TableMobile'; // No React.FC, since doesn't support Generic PropTypes export const Table = ( props: TableProps, -) => ( - <> -
- -
-
- -
- -); +) => { + const breakpoint = props.breakpoint || Breakpoint.lg; + return ( + <> +
+ +
+
+ +
+ + ); +}; diff --git a/packages/ui/src/2_molecules/Table/Table.types.ts b/packages/ui/src/2_molecules/Table/Table.types.ts index 9853694e8..a300631ea 100644 --- a/packages/ui/src/2_molecules/Table/Table.types.ts +++ b/packages/ui/src/2_molecules/Table/Table.types.ts @@ -16,6 +16,12 @@ export type ColumnOptions = { sampleData?: ReactNode; }; +export enum TableBreakpoint { + md = 'md', + lg = 'lg', + xl = 'xl', +} + export type TableProps = { className?: string; rowClassName?: string; @@ -40,6 +46,7 @@ export type TableProps = { subtitleRenderer?: (row: RowType) => ReactNode; expandedIndex?: number; flatMode?: boolean; + breakpoint?: TableBreakpoint; }; export enum OrderDirection { diff --git a/packages/ui/src/2_molecules/Table/index.ts b/packages/ui/src/2_molecules/Table/index.ts index 31715270e..2e7b4542e 100644 --- a/packages/ui/src/2_molecules/Table/index.ts +++ b/packages/ui/src/2_molecules/Table/index.ts @@ -1,3 +1,3 @@ export * from './Table'; -export { OrderDirection } from './Table.types'; +export { OrderDirection, TableBreakpoint } from './Table.types'; export type { OrderOptions } from './Table.types'; From f1cb37976ba28400835c4075527f513bbddfa2ca Mon Sep 17 00:00:00 2001 From: Rick <81699526+rick23p@users.noreply.github.com> Date: Mon, 11 Nov 2024 12:33:58 +0330 Subject: [PATCH 2/4] Create wicked-donuts-collect.md --- .changeset/wicked-donuts-collect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wicked-donuts-collect.md diff --git a/.changeset/wicked-donuts-collect.md b/.changeset/wicked-donuts-collect.md new file mode 100644 index 000000000..df0586f9e --- /dev/null +++ b/.changeset/wicked-donuts-collect.md @@ -0,0 +1,5 @@ +--- +"@sovryn/ui": patch +--- + +SOV-4570: Extend Table component From f0a23da356699e1786cba30e4bc6af3f0cb7dacd Mon Sep 17 00:00:00 2001 From: Rick Date: Thu, 14 Nov 2024 17:56:33 +0330 Subject: [PATCH 3/4] fix: change ambient pools table breakpoint --- .../components/AmbientPoolsTable/AmbientPoolsTable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolsTable/AmbientPoolsTable.tsx b/apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolsTable/AmbientPoolsTable.tsx index af11b2a19..1f4be100f 100644 --- a/apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolsTable/AmbientPoolsTable.tsx +++ b/apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolsTable/AmbientPoolsTable.tsx @@ -3,7 +3,7 @@ import React, { FC, useCallback, useMemo, useRef, useState } from 'react'; import { t } from 'i18next'; import { Link } from 'react-router-dom'; -import { Table } from '@sovryn/ui'; +import { Table, TableBreakpoint } from '@sovryn/ui'; import { AssetPairRenderer } from '../../../../../../2_molecules/AssetPairRenderer/AssetPairRenderer'; import { AssetPairSize } from '../../../../../../2_molecules/AssetPairRenderer/AssetPairRenderer.types'; @@ -79,6 +79,7 @@ export const AmbientPoolsTable: FC = ({ items }) => { expandedIndex={expandedIndex} className={styles.table} rowTitle={generateRowTitle} + breakpoint={TableBreakpoint.xl} /> ); From e9deaabc180229d6fb4455dfddd3536166a40ca9 Mon Sep 17 00:00:00 2001 From: Rick Date: Mon, 18 Nov 2024 16:41:23 +0330 Subject: [PATCH 4/4] fix: typo --- packages/ui/src/2_molecules/Table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/2_molecules/Table/Table.tsx b/packages/ui/src/2_molecules/Table/Table.tsx index bdd6731c4..8c1e2f30e 100644 --- a/packages/ui/src/2_molecules/Table/Table.tsx +++ b/packages/ui/src/2_molecules/Table/Table.tsx @@ -17,7 +17,7 @@ export const Table = (
-
+