Skip to content

Commit

Permalink
created the TreeElement component
Browse files Browse the repository at this point in the history
  • Loading branch information
ValeriaMaltseva committed Oct 28, 2024
1 parent 9b4d327 commit d7f5d9b
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 22 deletions.
133 changes: 133 additions & 0 deletions assets/js/src/core/components/tree-element/tree-element.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/**
* Pimcore
*
* This source file is available under two different licenses:
* - Pimcore Open Core License (POCL)
* - Pimcore Commercial License (PCL)
* Full copyright and license information is available in
* LICENSE.md which is distributed with this source code.
*
* @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org)
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import { type Meta } from '@storybook/react'
import { Accordion, type AccordionItemType } from './accordion'
import { type CollapseProps } from 'antd'
import React from 'react'
import { Button } from '@Pimcore/components/button/button'

const config: Meta = {
title: 'Components/Layout/Accordion',
component: Accordion,
parameters: {
layout: 'fullscreen'
},
tags: ['autodocs']
}
export default config

const item1: AccordionItemType = {
key: '1',
title: <span>This is panel header 1</span>,
subtitle: <span style={ { color: 'grey' } }>I ate a clock yesterday, and it was so time-consuming, especially when I went back for seconds!</span>,

extra: <Button
type="text"
>Extra</Button>,
children: <p>Mount Vesuvius is a stratovolcano, which is an extremely deadly form of volcano.</p>
}

const successItem: AccordionItemType = {
key: '1',
theme: 'theme-success',
title: <span>This is panel header 1</span>,
subtitle: <span style={ { color: 'grey' } }>I ate a clock yesterday, and it was so time-consuming, especially when I went back for seconds!</span>,
children: <p>Mount Vesuvius is a stratovolcano, which is an extremely deadly form of volcano.</p>
}

const primaryItem: AccordionItemType = {
key: '1',
theme: 'theme-primary',
title: <span>This is panel header 1</span>,
subtitle: <span style={ { color: 'grey' } }>I ate a clock yesterday, and it was so time-consuming, especially when I went back for seconds!</span>,
children: <p>Mount Vesuvius is a stratovolcano, which is an extremely deadly form of volcano.</p>
}

const item2: AccordionItemType = {
key: '2',
title: <span>This is panel header 2</span>,
children: <p>The ancient Egyptians were the first to tame the cat (in about 3000 BC), and used them to control
pests.</p>
}

const item3: AccordionItemType = {
key: '3',
title: <span>This is panel header 3</span>,
children: <p></p>,
disabled: true
}

const items: CollapseProps['items'] = [
item1,
item2
]
export const DefaultSinglePanel = {
args: {
items: [item1]
}
}

export const Primary = {
args: {
items: [primaryItem]
}
}
export const Success = {
args: {
items: [successItem]
}
}

export const ChevronLeft = {
args: {
items: [item1],
expandIconPosition: 'start'
}
}

export const CollapseDisabled = {
args: {
items: [item3]
}
}

export const Ghost = {
args: {
items,
ghost: true
}
}

export const Spaced = {
args: {
items,
spaced: true
}
}

export const ActiveKeyControlled = {
args: {
items,
spaced: true,
activeKey: '2'
}
}

export const ExclusiveAccordion = {
args: {
items,
spaced: true,
accordion: true
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,18 @@

import { createStyles } from 'antd-style'

export const useStyles = createStyles(({ css }) => {
interface IStylesProps {
isHideRootChecker?: boolean
}

export const useStyles = createStyles(({ css }, props: IStylesProps) => {
return {
treeContainer: css`
.ant-tree-list-holder-inner {
.ant-tree-treenode-leaf-last {
&:first-child {
.ant-tree-checkbox {
display: none;
display: ${(props.isHideRootChecker === true) ? 'none' : 'block'};
}
}
}
Expand All @@ -31,6 +35,22 @@ export const useStyles = createStyles(({ css }) => {
align-items: center;
justify-content: center;
}
.ant-tree-switcher_close {
.ant-tree-switcher-icon {
svg {
transform: rotate(0deg);
}
}
}
.ant-tree-switcher_open {
.ant-tree-switcher-icon {
svg {
transform: rotate(-180deg);
}
}
}
`
}
})
49 changes: 49 additions & 0 deletions assets/js/src/core/components/tree-element/tree-element.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* Pimcore
*
* This source file is available under two different licenses:
* - Pimcore Open Core License (POCL)
* - Pimcore Commercial License (PCL)
* Full copyright and license information is available in
* LICENSE.md which is distributed with this source code.
*
* @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org)
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import React from 'react'
import { Tree as AntTree, type TreeProps } from 'antd'
import { Icon } from '@Pimcore/components/icon/icon'
import { useStyles } from './tree-element.styles'

interface ITreeElementProps extends TreeProps {
withCustomSwitcherIcon?: boolean
isHideRootChecker?: boolean
}

export const TreeElement = ({ isHideRootChecker = true, withCustomSwitcherIcon = false, ...props }: ITreeElementProps): React.JSX.Element => {
const { styles } = useStyles({ isHideRootChecker })

const handleCustomSwitcherIcon = (): React.JSX.Element | undefined => {
if (!withCustomSwitcherIcon) return undefined

return (
<Icon
name="chevron-down"
options={ {
width: 12,
height: 12
} }
/>
)
}

return (
<AntTree
className={ styles.treeContainer }
showIcon
switcherIcon={ handleCustomSwitcherIcon }
{ ...props }
/>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from '@Pimcore/components/content-toolbar-sidebar-layout/content-toolbar-sidebar-layout'
import { Toolbar } from '@Pimcore/components/toolbar/toolbar'
import { Content } from '@Pimcore/components/content/content'
import { TagsTreeFiltersContainer } from './components/tags-tree-filters-container/tags-tree-filters-container'
import { TagsTreeFiltersContainer } from './tags-tree-filters-container'
import { useTagFilters } from './hooks/use-tag-filters'
import { useListFilterOptions } from '@Pimcore/modules/asset/editor/types/folder/tab-manager/tabs/list/hooks/use-list'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,20 @@
*/

import { useTagGetCollectionQuery } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice.gen'
import { Tree } from 'antd'
import React, { type Key } from 'react'
import { Content } from '@Pimcore/components/content/content'
import { Flex } from '@Pimcore/components/flex/flex'
import { Icon } from '@Pimcore/components/icon/icon'
import { TreeElement } from '@Pimcore/components/tree-element/tree-element'
import {
useCreateTreeStructure
} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/hooks/use-create-tree-structure'
import { useStyles } from './tags-tree-filters-container.styles'

export const TagsTreeFiltersContainer = ({ addOrUpdateFieldFilter, checkedKeys, setCheckedKeys }: { addOrUpdateFieldFilter: (value: any) => void, checkedKeys: any, setCheckedKeys: any }): React.JSX.Element => {
const { data: tags, isLoading: tagsLoading } = useTagGetCollectionQuery({
page: 1,
pageSize: 9999
})
const { createTreeStructure } = useCreateTreeStructure()
const { styles } = useStyles()

if (tagsLoading) {
return <Content loading />
Expand Down Expand Up @@ -60,24 +57,14 @@ export const TagsTreeFiltersContainer = ({ addOrUpdateFieldFilter, checkedKeys,
gap={ 'small' }
vertical
>
<Tree
<TreeElement
checkStrictly
checkable
checkedKeys={ { checked: checkedKeys, halfChecked: [] } }
className={ styles.treeContainer }
defaultExpandedKeys={ ['root'] }
onCheck={ handleCheck }
showIcon
switcherIcon={ (
<Icon
name="chevron-down"
options={ {
width: 12,
height: 12
} }
/>
) }
treeData={ treeData }
withCustomSwitcherIcon
/>
</Flex>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
*/

import React, { type Key } from 'react'
import { Input, Tree, type TreeProps } from 'antd'
import { Input, type TreeProps } from 'antd'
import {
type Tag,
type TagAssignToElementApiArg,
Expand All @@ -26,6 +26,7 @@ import {
} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/hooks/use-optimistic-update'
import { flattenArray } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/utils/flattn-tags-array'
import { Flex } from '@Pimcore/components/flex/flex'
import { TreeElement } from '@Pimcore/components/tree-element/tree-element'

export interface TagsTreeProps {
elementId: number
Expand Down Expand Up @@ -87,14 +88,15 @@ export const TagsTree = ({ elementId, elementType, tags, setFilter, isLoading, d
placeholder="Search"
/>

<Tree
<TreeElement
checkStrictly
checkable
checkedKeys={ { checked: defaultCheckedTags, halfChecked: [] } }
defaultExpandedKeys={ ['root'] }
onCheck={ onCheck }
showIcon
treeData={ treeData }
withCustomSwitcherIcon
/>
</Flex>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1458,5 +1458,9 @@
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts.map",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts.map"
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts.map",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.styles.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.styles.d.ts",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.d.ts",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.d.ts.map",
"build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.styles.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/tree-element/tree-element.styles.d.ts.map"
}

0 comments on commit d7f5d9b

Please sign in to comment.