-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9b4d327
commit d7f5d9b
Showing
7 changed files
with
217 additions
and
22 deletions.
There are no files selected for viewing
133 changes: 133 additions & 0 deletions
133
assets/js/src/core/components/tree-element/tree-element.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
assets/js/src/core/components/tree-element/tree-element.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 } | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters