6860499675

Committed 14 Nov 2023 07:30AM UTC coverage: 87.348% (-0.2%) from 87.546%

Build # 6860499675

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #155 from deriv-com/michio/fix-link-chips-usage

Run Details

184 of 258 branches covered (0.0%)

Branch coverage included in aggregate %.

12 of 45 new or added lines in 4 files covered. (26.67%)

2 existing lines in 1 file now uncovered.

6513 of 7409 relevant lines covered (87.91%)

3.51 hits per line

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

12.05

/libs/components/src/lib/breadcrumbs/base/index.tsx

import CustomLink from '../../link';
import { BreadcrumbsProps } from '../types';
import { useWindowWidth } from '@react-hook/window-size';
import { Fragment, ReactNode, useEffect, useState } from 'react';
import { qtMerge } from '@deriv/quill-design';
import { maxLinks } from './constants';

export function Base({ size = 'sm', links = [], className }: BreadcrumbsProps) {
  //todo: removed [LinkProps] from utils/generics and added here. we need to update this because we are using this on multiple places
  interface LinkProps {
    content: ReactNode;
    href: string;
  }

  const [renderLinks, setRenderLinks] = useState<LinkProps[]>([]);
  const [dropdownLinks, setDropdownLinks] = useState<LinkProps[]>([]);

  const isLastItem = (key: number) => renderLinks.length - 1 > key;
  const linksLen = links.length;
  const hasExtra = useWindowWidth() < 768 && maxLinks < linksLen;

  useEffect(() => {
    setRenderLinks(links);

    if (hasExtra) {
      const limitedLinks = [
        links[0],
        { content: '...', href: '' },
        links[linksLen - 2],
        links[linksLen - 1],
      ];

      setRenderLinks(limitedLinks);

      const remainingLinks: LinkProps[] = links.filter(
        (item) => !new Set(limitedLinks).has(item),
      );

      setDropdownLinks(remainingLinks);
    }
  }, [links]);

  return (
    <div className={qtMerge('flex', className)}>
      {renderLinks.map(({ content, href }, lk) => (
        <Fragment key={`breadcrumbs-${content}`}>
          {hasExtra && lk === 1 && (
            <select
              className="relative -right-600 -ml-1200 w-1300 opacity-50"
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                if (typeof window !== 'undefined') {
                  window.location.href = e.target.value;
                }
              }}
            >
              {dropdownLinks.map(({ href, content }, dk) => {
                return (
                  <option key={`dropdown-${content}`} value={href}>
                    {content}
                  </option>
                );
              })}
            </select>
          )}

          <CustomLink
            size={size}
            href={href}
            hasHoverColor={isLastItem(lk)}
            hasHoverDecoration={isLastItem(lk)}
            hasIcon={isLastItem(lk)}
            disabled={!isLastItem(lk)}
            className="items-center"
          >
            {content}
          </CustomLink>
        </Fragment>
      ))}
    </div>
  );
}

export default Base;

1	import CustomLink from '../../link';	2✔
2	import { BreadcrumbsProps } from '../types';	2✔
3	import { useWindowWidth } from '@react-hook/window-size';	2✔
4	import { Fragment, ReactNode, useEffect, useState } from 'react';	2✔
5	import { qtMerge } from '@deriv/quill-design';	2✔
6	import { maxLinks } from './constants';	2✔
7		2✔
8	export function Base({ size = 'sm', links = [], className }: BreadcrumbsProps) {	2✔
9	//todo: removed [LinkProps] from utils/generics and added here. we need to update this because we are using this on multiple places	×
10	interface LinkProps {	×
11	content: ReactNode;	×
12	href: string;	×
13	}	×
14		×
15	const [renderLinks, setRenderLinks] = useState<LinkProps[]>([]);	×
16	const [dropdownLinks, setDropdownLinks] = useState<LinkProps[]>([]);	×
17		×
18	const isLastItem = (key: number) => renderLinks.length - 1 > key;	×
19	const linksLen = links.length;	×
20	const hasExtra = useWindowWidth() < 768 && maxLinks < linksLen;	×
21		×
22	useEffect(() => {	×
23	setRenderLinks(links);	×
24		×
25	if (hasExtra) {	×
26	const limitedLinks = [	×
27	links[0],	×
28	{ content: '...', href: '' },	×
29	links[linksLen - 2],	×
30	links[linksLen - 1],	×
31	];	×
32		×
33	setRenderLinks(limitedLinks);	×
34		×
35	const remainingLinks: LinkProps[] = links.filter(	×
36	(item) => !new Set(limitedLinks).has(item),	×
37	);	×
38		×
39	setDropdownLinks(remainingLinks);	×
40	}	×
41	}, [links]);	×
42		×
43	return (	×
44	<div className={qtMerge('flex', className)}>	×
45	{renderLinks.map(({ content, href }, lk) => (	×
46	<Fragment key={`breadcrumbs-${content}`}>	×
47	{hasExtra && lk === 1 && (	×
48	<select	×
49	className="relative -right-600 -ml-1200 w-1300 opacity-50"	×
50	onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {	×
51	if (typeof window !== 'undefined') {	×
52	window.location.href = e.target.value;	×
53	}	×
54	}}	×
55	>	×
56	{dropdownLinks.map(({ href, content }, dk) => {	×
57	return (	×
58	<option key={`dropdown-${content}`} value={href}>	×
59	{content}	×
60	</option>	×
61	);	×
62	})}	×
63	</select>	×
64	)}	×
65		×
66	<CustomLink	×
67	size={size}	×
68	href={href}	×
69	hasHoverColor={isLastItem(lk)}	×
70	hasHoverDecoration={isLastItem(lk)}	×
71	hasIcon={isLastItem(lk)}	×
72	disabled={!isLastItem(lk)}	×
NEW 73	className="items-center"	×
74	>	×
75	{content}	×
76	</CustomLink>	×
77	</Fragment>	×
78	))}	×
79	</div>	×
80	);	×
81	}	×
82		2✔
83	export default Base;	2✔

deriv-com / deriv-com-v2 / 6860499675

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