6767449306

Committed 06 Nov 2023 07:11AM UTC coverage: 88.011% (-0.1%) from 88.149%

Build # 6767449306

Build Type

Pull #92

github

Committed by

meenu-deriv

Commit Message

fix: added word break

Pull Request Pull Request #92: Meenu/trade page table

Run Details

178 of 255 branches covered (0.0%)

Branch coverage included in aggregate %.

2406 of 2746 new or added lines in 11 files covered. (87.62%)

10 existing lines in 2 files now uncovered.

6157 of 6943 relevant lines covered (88.68%)

3.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

68.6

/libs/templates/src/lib/trade/table/trading-spec-table.tsx

import { useEffect, useState } from 'react';
import { mainInfo, trading_condition, additional_info } from '../data/data';
import { TableDataType } from '../types/types';
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  getPaginationRowModel,
} from '@tanstack/react-table';
import UseColumns from '../hooks/use-columns';
import { Button, qtMerge, Section, Text } from '@deriv/quill-design';
import {
  LabelPairedEllipsisVerticalBoldIcon,
  StandaloneChevronLeftRegularIcon,
  StandaloneChevronRightRegularIcon,
  StandaloneCircleDotFillIcon,
  StandaloneCircleRegularIcon,
  StandaloneXmarkBoldIcon,
} from '@deriv/quill-icons';
import { SearchChip } from '@deriv-com/components';
import { BottomSheet } from '@deriv-com/components';
import clsx from 'clsx';

const TradingSpecTable = () => {
  const [data, setData] = useState<TableDataType[]>([]);
  const [selected_filter, setSelectedFilter] = useState<TableDataType[]>(
    mainInfo.data,
  );
  const [selectedInfo, setSelectedInfo] = useState('mainInfo');
  const [searchValue, setSearchValue] = useState('');
  const [showBottomSheet, setShowBottomSheet] = useState(false);

  const handleSubmit = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
  };

  useEffect(() => {
    let updatedRowData = [];
    if (searchValue.length >= 1) {
      updatedRowData = [
        ...selected_filter.filter(
          (item) =>
            item.instrument?.instrument?.match(new RegExp(searchValue, 'i')),
        ),
      ];

      setData(updatedRowData);
    } else {
      setData(selected_filter);
    }
  }, [searchValue, selected_filter]);

  const columns = UseColumns(selectedInfo);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });
  useEffect(() => {
    table.setPageSize(15);
  }, [table]);
  useEffect(() => {
    document.body.style.overflow = showBottomSheet ? 'hidden' : 'scroll';
  }, [showBottomSheet]);
  return (
    <Section className="py-general-4xl md:px-general-md lg:mx-auto lg:max-w-[1232px]">
      <div className="flex flex-row gap-gap-lg px-general-md pb-general-md lg:justify-between lg:px-general-none lg:pb-general-lg">
        <form
          className="w-[323px] md:w-[340px] lg:w-[360px]"
          onSubmit={() => handleSubmit}
        >
          <SearchChip
            onChange={(i) => setSearchValue(i)}
            value={searchValue}
            placeholder="Search"
            size="sm"
          />
        </form>

        <div className="flex gap-gap-md ">
          <LabelPairedEllipsisVerticalBoldIcon
            fill="black"
            iconSize="md"
            className="block md:hidden lg:hidden"
            onClick={() => {
              setShowBottomSheet(true);
            }}
          />

          <Button
            className={qtMerge(
              'hidden md:block lg:block',
              selectedInfo === 'mainInfo'
                ? 'bg-solid-slate-1400'
                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
            )}
            onClick={() => {
              setSelectedFilter(mainInfo.data);
              setSelectedInfo('mainInfo');
            }}
          >
            Main info
          </Button>
          <Button
            className={qtMerge(
              'hidden md:block lg:block',
              selectedInfo === 'trading_condition'
                ? 'bg-solid-slate-1400'
                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
            )}
            onClick={() => {
              setSelectedFilter(trading_condition.data);
              setSelectedInfo('trading_condition');
            }}
          >
            Trading condition
          </Button>
          <Button
            className={qtMerge(
              'hidden md:block lg:block',
              selectedInfo === 'additional_info'
                ? 'bg-solid-slate-1400'
                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
            )}
            onClick={() => {
              setSelectedFilter(additional_info.data);
              setSelectedInfo('additional_info');
            }}
          >
            Additional info
          </Button>
        </div>
      </div>
      <table
        className={clsx(
          data.length < 1 && 'pb-general-lg',
          'inline-block w-[100%] overflow-auto',
        )}
      >
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} className={qtMerge('p-50')}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="p-general-none">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      {data.length < 1 && (
        <div>
          <Text
            size="lg"
            className="break-words px-general-md py-general-2xl text-center text-typography-default"
          >
            Sorry, we couldn’t find any results with "{searchValue}" in it
          </Text>
        </div>
      )}
      {data.length > 1 && (
        <div className="flex flex-col gap-gap-xl pt-general-lg lg:gap-gap-2xl">
          <div className="flex justify-center gap-gap-md">
            <Button
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
              className="bg-opacity-white-100"
            >
              <StandaloneChevronLeftRegularIcon fill="black" iconSize="sm" />
            </Button>
            {table.getPageOptions().map((page) => {
              const selected = page === table.getState().pagination.pageIndex;
              return (
                <Button
                  key={page}
                  onClick={() => table.setPageIndex(page)}
                  color="black"
                  className={qtMerge(
                    selected
                      ? 'bg-solid-slate-1400'
                      : ' bg-background-primary-container text-opacity-black-600',
                    'p-general-md',
                  )}
                >
                  {page + 1}
                </Button>
              );
            })}
            <Button
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
              className="bg-opacity-white-100"
            >
              <StandaloneChevronRightRegularIcon fill="black" iconSize="sm" />
            </Button>
          </div>
        </div>
      )}
      <div className="flex justify-center pt-general-lg lg:pt-general-2xl">
        <Button
          colorStyle="black"
          size="lg"
          className={qtMerge('px-general-md py-600 font-sans')}
        >
          Trade now
        </Button>
      </div>

      {showBottomSheet && (
        <BottomSheet
          heading="Table view"
          placeholdericon={
            <StandaloneXmarkBoldIcon fill="white" iconSize="md" />
          }
          icon={
            <StandaloneXmarkBoldIcon
              fill="black"
              iconSize="md"
              onClick={() => {
                setShowBottomSheet(false);
              }}
            />
          }
        >
          <div className=" flex flex-col p-general-md">
            <div
              className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"
              onClick={() => {
                setSelectedFilter(mainInfo.data);
                setSelectedInfo('mainInfo');
                setShowBottomSheet(false);
              }}
            >
              {selectedInfo === 'mainInfo' ? (
                <StandaloneCircleDotFillIcon fill="black" iconSize="md" />
              ) : (
                <StandaloneCircleRegularIcon fill="black" iconSize="md" />
              )}

              <Text size="md" className="text-typography-default">
                Main info
              </Text>
            </div>
            <div
              className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"
              onClick={() => {
                setSelectedFilter(trading_condition.data);
                setSelectedInfo('trading_condition');
                setShowBottomSheet(false);
              }}
            >
              {selectedInfo === 'trading_condition' ? (
                <StandaloneCircleDotFillIcon fill="black" iconSize="md" />
              ) : (
                <StandaloneCircleRegularIcon fill="black" iconSize="md" />
              )}
              <Text size="md" className="text-typography-default">
                Trading conditions
              </Text>
            </div>
            <div
              className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"
              onClick={() => {
                setSelectedFilter(additional_info.data);
                setSelectedInfo('additional_info');
                setShowBottomSheet(false);
              }}
            >
              {selectedInfo === 'additional_info' ? (
                <StandaloneCircleDotFillIcon fill="black" iconSize="md" />
              ) : (
                <StandaloneCircleRegularIcon fill="black" iconSize="md" />
              )}

              <Text size="md" className="text-typography-default">
                Additional info
              </Text>
            </div>
          </div>
        </BottomSheet>
      )}
    </Section>
  );
};

export default TradingSpecTable;

1	import { useEffect, useState } from 'react';	1✔
2	import { mainInfo, trading_condition, additional_info } from '../data/data';	1✔
3	import { TableDataType } from '../types/types';	1✔
4	import {	1✔
5	flexRender,	1✔
6	getCoreRowModel,	1✔
7	getSortedRowModel,	1✔
8	useReactTable,	1✔
9	getPaginationRowModel,	1✔
10	} from '@tanstack/react-table';	1✔
11	import UseColumns from '../hooks/use-columns';	1✔
12	import { Button, qtMerge, Section, Text } from '@deriv/quill-design';	1✔
13	import {	1✔
14	LabelPairedEllipsisVerticalBoldIcon,	1✔
15	StandaloneChevronLeftRegularIcon,	1✔
16	StandaloneChevronRightRegularIcon,	1✔
17	StandaloneCircleDotFillIcon,	1✔
18	StandaloneCircleRegularIcon,	1✔
19	StandaloneXmarkBoldIcon,	1✔
20	} from '@deriv/quill-icons';	1✔
21	import { SearchChip } from '@deriv-com/components';	1✔
22	import { BottomSheet } from '@deriv-com/components';	1✔
23	import clsx from 'clsx';	1✔
24		1✔
25	const TradingSpecTable = () => {	1✔
26	const [data, setData] = useState<TableDataType[]>([]);	2✔
27	const [selected_filter, setSelectedFilter] = useState<TableDataType[]>(	2✔
28	mainInfo.data,	2✔
29	);	2✔
30	const [selectedInfo, setSelectedInfo] = useState('mainInfo');	2✔
31	const [searchValue, setSearchValue] = useState('');	2✔
32	const [showBottomSheet, setShowBottomSheet] = useState(false);	2✔
33		2✔
34	const handleSubmit = (e: React.ChangeEvent<HTMLInputElement>) => {	2✔
NEW 35	e.preventDefault();	×
NEW 36	};	×
37		2✔
38	useEffect(() => {	2✔
39	let updatedRowData = [];	1✔
40	if (searchValue.length >= 1) {	1!
NEW 41	updatedRowData = [	×
NEW 42	...selected_filter.filter(	×
NEW 43	(item) =>	×
NEW 44	item.instrument?.instrument?.match(new RegExp(searchValue, 'i')),	×
NEW 45	),	×
NEW 46	];	×
NEW 47		×
NEW 48	setData(updatedRowData);	×
49	} else {	1✔
50	setData(selected_filter);	1✔
51	}	1✔
52	}, [searchValue, selected_filter]);	2✔
53		2✔
54	const columns = UseColumns(selectedInfo);	2✔
55		2✔
56	const table = useReactTable({	2✔
57	data,	2✔
58	columns,	2✔
59	getCoreRowModel: getCoreRowModel(),	2✔
60	getSortedRowModel: getSortedRowModel(),	2✔
61	getPaginationRowModel: getPaginationRowModel(),	2✔
62	});	2✔
63	useEffect(() => {	2✔
64	table.setPageSize(15);	1✔
65	}, [table]);	2✔
66	useEffect(() => {	2✔
67	document.body.style.overflow = showBottomSheet ? 'hidden' : 'scroll';	1!
68	}, [showBottomSheet]);	2✔
69	return (	2✔
70	<Section className="py-general-4xl md:px-general-md lg:mx-auto lg:max-w-[1232px]">	2✔
71	<div className="flex flex-row gap-gap-lg px-general-md pb-general-md lg:justify-between lg:px-general-none lg:pb-general-lg">	2✔
72	<form	2✔
73	className="w-[323px] md:w-[340px] lg:w-[360px]"	2✔
74	onSubmit={() => handleSubmit}	2✔
75	>	2✔
76	<SearchChip	2✔
77	onChange={(i) => setSearchValue(i)}	2✔
78	value={searchValue}	2✔
79	placeholder="Search"	2✔
80	size="sm"	2✔
81	/>	2✔
82	</form>	2✔
83		2✔
84	<div className="flex gap-gap-md ">	2✔
85	<LabelPairedEllipsisVerticalBoldIcon	2✔
86	fill="black"	2✔
87	iconSize="md"	2✔
88	className="block md:hidden lg:hidden"	2✔
89	onClick={() => {	2✔
NEW 90	setShowBottomSheet(true);	×
NEW 91	}}	×
92	/>	2✔
93		2✔
94	<Button	2✔
95	className={qtMerge(	2✔
96	'hidden md:block lg:block',	2✔
97	selectedInfo === 'mainInfo'	2✔
98	? 'bg-solid-slate-1400'	2!
NEW 99	: 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',	×
100	)}	2✔
101	onClick={() => {	2✔
NEW 102	setSelectedFilter(mainInfo.data);	×
NEW 103	setSelectedInfo('mainInfo');	×
NEW 104	}}	×
105	>	2✔
106	Main info	2✔
107	</Button>	2✔
108	<Button	2✔
109	className={qtMerge(	2✔
110	'hidden md:block lg:block',	2✔
111	selectedInfo === 'trading_condition'	2!
NEW 112	? 'bg-solid-slate-1400'	×
113	: 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',	2✔
114	)}	2✔
115	onClick={() => {	2✔
NEW 116	setSelectedFilter(trading_condition.data);	×
NEW 117	setSelectedInfo('trading_condition');	×
NEW 118	}}	×
119	>	2✔
120	Trading condition	2✔
121	</Button>	2✔
122	<Button	2✔
123	className={qtMerge(	2✔
124	'hidden md:block lg:block',	2✔
125	selectedInfo === 'additional_info'	2!
NEW 126	? 'bg-solid-slate-1400'	×
127	: 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',	2✔
128	)}	2✔
129	onClick={() => {	2✔
NEW 130	setSelectedFilter(additional_info.data);	×
NEW 131	setSelectedInfo('additional_info');	×
NEW 132	}}	×
133	>	2✔
134	Additional info	2✔
135	</Button>	2✔
136	</div>	2✔
137	</div>	2✔
138	<table	2✔
139	className={clsx(	2✔
140	data.length < 1 && 'pb-general-lg',	2✔
141	'inline-block w-[100%] overflow-auto',	2✔
142	)}	2✔
143	>	2✔
144	<thead>	2✔
145	{table.getHeaderGroups().map((headerGroup) => (	2✔
146	<tr key={headerGroup.id}>	2✔
147	{headerGroup.headers.map((header) => (	2✔
148	<th key={header.id} className={qtMerge('p-50')}>	10✔
149	{header.isPlaceholder	10!
NEW 150	? null	×
151	: flexRender(	10✔
152	header.column.columnDef.header,	10✔
153	header.getContext(),	10✔
154	)}	10✔
155	</th>	10✔
156	))}	2✔
157	</tr>	2✔
158	))}	2✔
159	</thead>	2✔
160	<tbody>	2✔
161	{table.getRowModel().rows.map((row) => (	2✔
162	<tr key={row.id}>	15✔
163	{row.getVisibleCells().map((cell) => (	15✔
164	<td key={cell.id} className="p-general-none">	75✔
165	{flexRender(cell.column.columnDef.cell, cell.getContext())}	75✔
166	</td>	75✔
167	))}	15✔
168	</tr>	15✔
169	))}	2✔
170	</tbody>	2✔
171	</table>	2✔
172	{data.length < 1 && (	2✔
173	<div>	1✔
174	<Text	1✔
175	size="lg"	1✔
176	className="break-words px-general-md py-general-2xl text-center text-typography-default"	1✔
177	>	1✔
178	Sorry, we couldn’t find any results with "{searchValue}" in it	1✔
179	</Text>	1✔
180	</div>	1✔
181	)}	2✔
182	{data.length > 1 && (	2✔
183	<div className="flex flex-col gap-gap-xl pt-general-lg lg:gap-gap-2xl">	1✔
184	<div className="flex justify-center gap-gap-md">	1✔
185	<Button	1✔
186	onClick={() => table.previousPage()}	1✔
187	disabled={!table.getCanPreviousPage()}	1✔
188	className="bg-opacity-white-100"	1✔
189	>	1✔
190	<StandaloneChevronLeftRegularIcon fill="black" iconSize="sm" />	1✔
191	</Button>	1✔
192	{table.getPageOptions().map((page) => {	1✔
193	const selected = page === table.getState().pagination.pageIndex;	4✔
194	return (	4✔
195	<Button	4✔
196	key={page}	4✔
197	onClick={() => table.setPageIndex(page)}	4✔
198	color="black"	4✔
199	className={qtMerge(	4✔
200	selected	4✔
201	? 'bg-solid-slate-1400'	1✔
202	: ' bg-background-primary-container text-opacity-black-600',	3✔
203	'p-general-md',	4✔
204	)}	4✔
205	>	4✔
206	{page + 1}	4✔
207	</Button>	4✔
208	);	4✔
209	})}	1✔
210	<Button	1✔
211	onClick={() => table.nextPage()}	1✔
212	disabled={!table.getCanNextPage()}	1✔
213	className="bg-opacity-white-100"	1✔
214	>	1✔
215	<StandaloneChevronRightRegularIcon fill="black" iconSize="sm" />	1✔
216	</Button>	1✔
217	</div>	1✔
218	</div>	1✔
219	)}	2✔
220	<div className="flex justify-center pt-general-lg lg:pt-general-2xl">	2✔
221	<Button	2✔
222	colorStyle="black"	2✔
223	size="lg"	2✔
224	className={qtMerge('px-general-md py-600 font-sans')}	2✔
225	>	2✔
226	Trade now	2✔
227	</Button>	2✔
228	</div>	2✔
229		2✔
230	{showBottomSheet && (	2!
NEW 231	<BottomSheet	×
NEW 232	heading="Table view"	×
NEW 233	placeholdericon={	×
NEW 234	<StandaloneXmarkBoldIcon fill="white" iconSize="md" />	×
NEW 235	}	×
NEW 236	icon={	×
NEW 237	<StandaloneXmarkBoldIcon	×
NEW 238	fill="black"	×
NEW 239	iconSize="md"	×
NEW 240	onClick={() => {	×
NEW 241	setShowBottomSheet(false);	×
NEW 242	}}	×
NEW 243	/>	×
NEW 244	}	×
NEW 245	>	×
NEW 246	<div className=" flex flex-col p-general-md">	×
NEW 247	<div	×
NEW 248	className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"	×
NEW 249	onClick={() => {	×
NEW 250	setSelectedFilter(mainInfo.data);	×
NEW 251	setSelectedInfo('mainInfo');	×
NEW 252	setShowBottomSheet(false);	×
NEW 253	}}	×
NEW 254	>	×
NEW 255	{selectedInfo === 'mainInfo' ? (	×
NEW 256	<StandaloneCircleDotFillIcon fill="black" iconSize="md" />	×
NEW 257	) : (	×
NEW 258	<StandaloneCircleRegularIcon fill="black" iconSize="md" />	×
NEW 259	)}	×
NEW 260		×
NEW 261	<Text size="md" className="text-typography-default">	×
NEW 262	Main info	×
NEW 263	</Text>	×
NEW 264	</div>	×
NEW 265	<div	×
NEW 266	className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"	×
NEW 267	onClick={() => {	×
NEW 268	setSelectedFilter(trading_condition.data);	×
NEW 269	setSelectedInfo('trading_condition');	×
NEW 270	setShowBottomSheet(false);	×
NEW 271	}}	×
NEW 272	>	×
NEW 273	{selectedInfo === 'trading_condition' ? (	×
NEW 274	<StandaloneCircleDotFillIcon fill="black" iconSize="md" />	×
NEW 275	) : (	×
NEW 276	<StandaloneCircleRegularIcon fill="black" iconSize="md" />	×
NEW 277	)}	×
NEW 278	<Text size="md" className="text-typography-default">	×
NEW 279	Trading conditions	×
NEW 280	</Text>	×
NEW 281	</div>	×
NEW 282	<div	×
NEW 283	className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"	×
NEW 284	onClick={() => {	×
NEW 285	setSelectedFilter(additional_info.data);	×
NEW 286	setSelectedInfo('additional_info');	×
NEW 287	setShowBottomSheet(false);	×
NEW 288	}}	×
NEW 289	>	×
NEW 290	{selectedInfo === 'additional_info' ? (	×
NEW 291	<StandaloneCircleDotFillIcon fill="black" iconSize="md" />	×
NEW 292	) : (	×
NEW 293	<StandaloneCircleRegularIcon fill="black" iconSize="md" />	×
NEW 294	)}	×
NEW 295		×
NEW 296	<Text size="md" className="text-typography-default">	×
NEW 297	Additional info	×
NEW 298	</Text>	×
NEW 299	</div>	×
NEW 300	</div>	×
NEW 301	</BottomSheet>	×
302	)}	2✔
303	</Section>	2✔
304	);	2✔
305	};	2✔
306		1✔
307	export default TradingSpecTable;	1✔

deriv-com / deriv-com-v2 / 6767449306

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous