9256284974

Committed 27 May 2024 02:12PM UTC coverage: 95.246% (-1.2%) from 96.443%

Build # 9256284974

Build Type

Pull #464

github

Committed by

web-flow

Commit Message

Merge 63471ed86 into 3b43c4e91

Pull Request Pull Request #464: Draft: add Breadcrumb component

Run Details

412 of 458 branches covered (89.96%)

Branch coverage included in aggregate %.

54 of 59 new or added lines in 5 files covered. (91.53%)

3 existing lines in 2 files now uncovered.

710 of 720 relevant lines covered (98.61%)

56.06 hits per line

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

91.11

/src/components/Menu/Menu.tsx

/**
 * Copyright 2023 Mia srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
 */

import { Menu as AntMenu, ConfigProvider, Skeleton } from 'antd'
import { ReactElement, useMemo, useState } from 'react'
import classNames from 'classnames'

import { Hierarchy, Mode } from './Menu.types'
import defaultTheme, { primaryTheme } from './Menu.theme'
import { MenuProps } from './Menu.props'
import formatLabels from './Menu.utils'
import styles from './Menu.module.css'
import { useTheme } from '../../hooks/useTheme'

const { Default, Primary } = Hierarchy
const { Inline } = Mode
const { menu } = styles

export const defaults: Partial<MenuProps> = {
  defaultOpenKeys: [],
  hierarchy: Default,
  items: [],
  isCollapsed: false,
  isLoading: false,
  mode: Inline,
}

/**
 * UI component for presenting nested lists of elements, organized by group or category
 *
 * @link https://ant.design/components/menu
 * @returns {Menu} Menu component
 */
export const Menu = ({
  defaultOpenKeys = defaults.defaultOpenKeys,
  defaultSelectedKey,
  hierarchy = defaults.hierarchy,
  items = defaults.items,
  isCollapsed = defaults.isCollapsed,
  isLoading = defaults.isLoading,
  mode = defaults.mode,
  onClick,
  onOpenChange,
  openKeys,
  selectedKey,
}: MenuProps): ReactElement => {
  const isPrimary = hierarchy === Primary

  const theme = useTheme()
  const menuTheme = isPrimary ? primaryTheme(theme) : defaultTheme(theme)

  const menuClassNames = useMemo(() => classNames([
    menu,
    isPrimary && 'primary',
  ]), [isPrimary])

  const [selectedItem, setSelectedItem] = useState(defaultSelectedKey)

  const formattedItems = useMemo(() => (
    formatLabels(items, selectedKey || selectedItem, isCollapsed, hierarchy)
  ), [items, selectedKey, selectedItem, isCollapsed, hierarchy])

  return (
    <ConfigProvider theme={{ components: { Menu: menuTheme } }}>
      <Skeleton
        active
        loading={isLoading}
        paragraph={Menu.skeletonParagraph}
      >
        <AntMenu
          className={menuClassNames}
          defaultOpenKeys={defaultOpenKeys}
          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}
          // getPopupContainer is needed for nested menus to inherit CSS properties in the vertical mode
          getPopupContainer={() => document.querySelector(`.${menu}`)!}
          inlineCollapsed={isCollapsed}
          inlineIndent={0}
          items={formattedItems}
          mode={mode}
          multiple={false}
          openKeys={openKeys}
          selectable
          selectedKeys={(selectedKey && [selectedKey]) || (selectedItem && [selectedItem]) || undefined}
          onClick={onClick}
          onOpenChange={onOpenChange}
          onSelect={({ key }) => setSelectedItem(key)}
        />
      </Skeleton>
    </ConfigProvider>
  )
}

Menu.skeletonParagraph = {
  rows: 6,
  width: ['30%', '80%', '65%', '30%', '70%', '60%'],
}

1	/**
2	* Copyright 2023 Mia srl
3	*
4	* Licensed under the Apache License, Version 2.0 (the "License");
5	* you may not use this file except in compliance with the License.
6	* You may obtain a copy of the License at
7	*
8	* http://www.apache.org/licenses/LICENSE-2.0
9	*
10	* Unless required by applicable law or agreed to in writing, software
11	* distributed under the License is distributed on an "AS IS" BASIS,
12	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	* See the License for the specific language governing permissions and
14	* limitations under the License.
15	*
16	* SPDX-License-Identifier: Apache-2.0
17	*/
18
19	import { Menu as AntMenu, ConfigProvider, Skeleton } from 'antd'	4✔
20	import { ReactElement, useMemo, useState } from 'react'	4✔
21	import classNames from 'classnames'	4✔
22
23	import { Hierarchy, Mode } from './Menu.types'	4✔
24	import defaultTheme, { primaryTheme } from './Menu.theme'	4✔
25	import { MenuProps } from './Menu.props'
26	import formatLabels from './Menu.utils'	4✔
27	import styles from './Menu.module.css'	4✔
28	import { useTheme } from '../../hooks/useTheme'	4✔
29
30	const { Default, Primary } = Hierarchy	4✔
31	const { Inline } = Mode	4✔
32	const { menu } = styles	4✔
33
34	export const defaults: Partial<MenuProps> = {	4✔
35	defaultOpenKeys: [],
36	hierarchy: Default,
37	items: [],
38	isCollapsed: false,
39	isLoading: false,
40	mode: Inline,
41	}
42
43	/**
44	* UI component for presenting nested lists of elements, organized by group or category
45	*
46	* @link https://ant.design/components/menu
47	* @returns {Menu} Menu component
48	*/
49	export const Menu = ({	4✔
50	defaultOpenKeys = defaults.defaultOpenKeys,	9✔
51	defaultSelectedKey,
52	hierarchy = defaults.hierarchy,	8✔
53	items = defaults.items,	1✔
54	isCollapsed = defaults.isCollapsed,	8✔
55	isLoading = defaults.isLoading,	8✔
56	mode = defaults.mode,	8✔
57	onClick,
58	onOpenChange,
59	openKeys,
60	selectedKey,
61	}: MenuProps): ReactElement => {
62	const isPrimary = hierarchy === Primary	18✔
63
64	const theme = useTheme()	18✔
65	const menuTheme = isPrimary ? primaryTheme(theme) : defaultTheme(theme)	18✔
66
67	const menuClassNames = useMemo(() => classNames([	18✔
68	menu,
69	isPrimary && 'primary',	10✔
70	]), [isPrimary])
71
72	const [selectedItem, setSelectedItem] = useState(defaultSelectedKey)	18✔
73
74	const formattedItems = useMemo(() => (	18✔
75	formatLabels(items, selectedKey \|\| selectedItem, isCollapsed, hierarchy)	18✔
76	), [items, selectedKey, selectedItem, isCollapsed, hierarchy])
77
78	return (	18✔
79	<ConfigProvider theme={{ components: { Menu: menuTheme } }}>
80	<Skeleton
81	active
82	loading={isLoading}
83	paragraph={Menu.skeletonParagraph}
84	>
85	<AntMenu
86	className={menuClassNames}
87	defaultOpenKeys={defaultOpenKeys}
88	defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}	9!
89	// getPopupContainer is needed for nested menus to inherit CSS properties in the vertical mode
90	getPopupContainer={() => document.querySelector(`.${menu}`)!}	40✔
91	inlineCollapsed={isCollapsed}
92	inlineIndent={0}
93	items={formattedItems}
94	mode={mode}
95	multiple={false}
96	openKeys={openKeys}
97	selectable
98	selectedKeys={(selectedKey && [selectedKey]) \|\| (selectedItem && [selectedItem]) \|\| undefined}	27!
99	onClick={onClick}
100	onOpenChange={onOpenChange}
UNCOV 101	onSelect={({ key }) => setSelectedItem(key)}	×
102	/>
103	</Skeleton>
104	</ConfigProvider>
105	)
106	}
107
108	Menu.skeletonParagraph = {	4✔
109	rows: 6,
110	width: ['30%', '80%', '65%', '30%', '70%', '60%'],
111	}

mia-platform / design-system / 9256284974

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