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 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} /> ); 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..8c1e2f30e 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';