6706735836

Committed 31 Oct 2023 12:50PM UTC coverage: 85.764% (-1.4%) from 87.193%

Build # 6706735836

Build Type

Pull #107

github

Committed by

prince-deriv

Commit Message

chore: handle mobile dropdown

Pull Request Pull Request #107: Prince/Breadcrumbs

Run Details

131 of 184 branches covered (0.0%)

Branch coverage included in aggregate %.

100 of 100 new or added lines in 5 files covered. (100.0%)

3345 of 3869 relevant lines covered (86.46%)

4.23 hits per line

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

13.92

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

import styles from './base.module.css';
import { LinkProps } from '@deriv-com/utils';
import CustomLink from '../../link';
import { BreadcrumbsProps } from '../types';
import { useWindowWidth } from '@react-hook/window-size';
import { Fragment, useEffect, useState } from 'react';
import { qtMerge } from '@deriv/quill-design';

export function Base({ size = 'sm', links = [], className }: BreadcrumbsProps) {
  const [render_links, setRenderLinks] = useState<LinkProps[]>([]);
  const [dropwdown_links, setDropdownLinks] = useState<LinkProps[]>([]);

  const isLastItem = (key: number) => links.length - 1 > key;
  const links_len = links.length;
  const max_links = 3;
  const hasExtra = useWindowWidth() < 768 && max_links < links_len;

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

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

      setRenderLinks(limited_links);

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

      setDropdownLinks(remaining_links);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [links]);

  return (
    <div className={qtMerge('flex', className)}>
      {render_links.map(({ content, href }, lk) => (
        <Fragment key={`breadcrumbs-${content}`}>
          {hasExtra && lk === 1 && (
            <select
              className={styles['breadcrumbs-select']}
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                if (typeof window !== 'undefined') {
                  window.location.href = e.target.value;
                }
              }}
            >
              {dropwdown_links.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)}
          >
            {content}
          </CustomLink>
        </Fragment>
      ))}
    </div>
  );
}

export default Base;

1	import styles from './base.module.css';	2✔
2	import { LinkProps } from '@deriv-com/utils';	2✔
3	import CustomLink from '../../link';	2✔
4	import { BreadcrumbsProps } from '../types';	2✔
5	import { useWindowWidth } from '@react-hook/window-size';	2✔
6	import { Fragment, useEffect, useState } from 'react';	2✔
7	import { qtMerge } from '@deriv/quill-design';	2✔
8		2✔
9	export function Base({ size = 'sm', links = [], className }: BreadcrumbsProps) {	2✔
10	const [render_links, setRenderLinks] = useState<LinkProps[]>([]);	×
11	const [dropwdown_links, setDropdownLinks] = useState<LinkProps[]>([]);	×
12		×
13	const isLastItem = (key: number) => links.length - 1 > key;	×
14	const links_len = links.length;	×
15	const max_links = 3;	×
16	const hasExtra = useWindowWidth() < 768 && max_links < links_len;	×
17		×
18	useEffect(() => {	×
19	setRenderLinks(links);	×
20		×
21	if (hasExtra) {	×
22	const limited_links = [	×
23	links[0],	×
24	{ content: '...', href: '' },	×
25	links[links_len - 2],	×
26	links[links_len - 1],	×
27	];	×
28		×
29	setRenderLinks(limited_links);	×
30		×
31	const remaining_links: LinkProps[] = links.filter(	×
32	(item) => !new Set(limited_links).has(item),	×
33	);	×
34		×
35	setDropdownLinks(remaining_links);	×
36	}	×
37	// eslint-disable-next-line react-hooks/exhaustive-deps	×
38	}, [links]);	×
39		×
40	return (	×
41	<div className={qtMerge('flex', className)}>	×
42	{render_links.map(({ content, href }, lk) => (	×
43	<Fragment key={`breadcrumbs-${content}`}>	×
44	{hasExtra && lk === 1 && (	×
45	<select	×
46	className={styles['breadcrumbs-select']}	×
47	onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {	×
48	if (typeof window !== 'undefined') {	×
49	window.location.href = e.target.value;	×
50	}	×
51	}}	×
52	>	×
53	{dropwdown_links.map(({ href, content }, dk) => {	×
54	return (	×
55	<option key={`dropdown-${content}`} value={href}>	×
56	{content}	×
57	</option>	×
58	);	×
59	})}	×
60	</select>	×
61	)}	×
62		×
63	<CustomLink	×
64	size={size}	×
65	href={href}	×
66	hasHoverColor={isLastItem(lk)}	×
67	hasHoverDecoration={isLastItem(lk)}	×
68	hasIcon={isLastItem(lk)}	×
69	disabled={!isLastItem(lk)}	×
70	>	×
71	{content}	×
72	</CustomLink>	×
73	</Fragment>	×
74	))}	×
75	</div>	×
76	);	×
77	}	×
78		2✔
79	export default Base;	2✔

deriv-com / deriv-com-v2 / 6706735836

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