Skip to content

Commit

Permalink
updated styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValeriaMaltseva
ValeriaMaltseva committed Oct 28, 2024
1 parent 8be6bdd commit b475923
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 137 deletions.
185 changes: 111 additions & 74 deletions assets/js/src/core/components/simple-tree/simple-tree.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,87 +13,124 @@

import { createStyles } from 'antd-style'

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

export const useStyles = createStyles(({ token, css }, props: IStylesProps) => {
return {
tree: css`
.ant-tree-treenode {
padding: 2px ${token.paddingSM}px 2px 0;
position: relative;
gap: 8px;
@media (hover: hover) {
&:hover {
background-color: ${token.controlItemBgActiveHover};
}
}
&:focus {
outline: none;
background-color: ${token.controlItemBgActiveHover};
}
treeContainer: css`
.ant-tree-list-holder-inner {
.ant-tree-treenode-leaf-last {
&:first-child {
.ant-tree-checkbox {
display: ${(props.isHideRootChecker === true) ? 'none' : 'block'};
}
}
}
}
.ant-tree-switcher {
display: flex;
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);
}
}
}
.ant-tree-treenode {
padding: 2px ${token.paddingSM}px 2px 0;
position: relative;
gap: 8px;
@media (hover: hover) {
&:hover {
background-color: ${token.controlItemBgActiveHover};
}
}
&:focus {
outline: none;
background-color: ${token.controlItemBgActiveHover};
}
}
.ant-tree-treenode-selected {
background-color: ${token.controlItemBgActive};
}
.ant-tree-treenode-selected {
background-color: ${token.controlItemBgActive};
}
.ant-tree-list .ant-tree-node-content-wrapper {
background: none;
position: static;
padding: 0;
line-height: 20px;
min-height: 20px;
display: flex;
gap: 8px;
.ant-tree-list .ant-tree-node-content-wrapper {
background: none;
position: static;
padding: 0;
line-height: 20px;
min-height: 20px;
display: flex;
gap: 8px;
&:hover {
background: none;
}
}
&:hover {
background: none;
}
}
.ant-tree-list .ant-tree-switcher {
position: relative;
z-index: 1;
width: 16px;
height: 16px;
background: none;
}
.ant-tree-list .ant-tree-switcher {
position: relative;
z-index: 1;
width: 16px;
height: 16px;
background: none;
}
.ant-tree-title__btn {
background: transparent;
border: none;
color: ${token.colorTextTreeElement};
cursor: pointer;
padding: 0;
font-size: ${token.fontSize}px;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.ant-tree-title__btn {
background: transparent;
border: none;
color: ${token.colorTextTreeElement};
cursor: pointer;
padding: 0;
font-size: ${token.fontSize}px;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.ant-tree-list .ant-tree-iconEle.ant-tree-iconEle {
width: 16px;
height: 16px;
line-height: 22px;
}
.ant-tree-checkbox {
margin: 1px 0 0 0;
z-index: 1;
}
.ant-tree-draggable-icon {
display: none;
}
.ant-tree-switcher-noop {
pointer-events: none;
}
`
.ant-tree-list .ant-tree-iconEle.ant-tree-iconEle {
width: 16px;
height: 16px;
line-height: 22px;
}
.ant-tree-checkbox {
margin: 1px 0 0 0;
z-index: 1;
}
.ant-tree-draggable-icon {
display: none;
}
.ant-tree-switcher-noop {
pointer-events: none;
}
`
}
}, { hashPriority: 'high' })
7 changes: 4 additions & 3 deletions assets/js/src/core/components/simple-tree/simple-tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,11 @@ interface SimpleTreeProps extends TreeProps {
onSelected?: (key: any) => void
onLoadData?: (node) => Promise<any>
withCustomSwitcherIcon?: boolean
isHideRootChecker?: boolean
}

const SimpleTree = ({ treeData, className, defaultExpandedKeys, onCheck, onActionsClick, onDragAndDrop, onSelected, onLoadData, withCustomSwitcherIcon, ...props }: SimpleTreeProps): React.JSX.Element => {
const { styles } = useStyles()
const SimpleTree = ({ treeData, className, defaultExpandedKeys, onCheck, onActionsClick, onDragAndDrop, onSelected, onLoadData, withCustomSwitcherIcon, isHideRootChecker = true, ...props }: SimpleTreeProps): React.JSX.Element => {
const { styles } = useStyles({ isHideRootChecker })

const [selectedKeys, setSelectedKeys] = React.useState<Key[]>([])
const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(defaultExpandedKeys ?? [])
Expand All @@ -62,7 +63,7 @@ const SimpleTree = ({ treeData, className, defaultExpandedKeys, onCheck, onActio
<Tree
blockNode
checkable={ onCheck !== undefined }
className={ cn(styles.tree, className) }
className={ cn(styles.treeContainer, className) }
draggable
expandedKeys={ expandedKeys }
loadData={ onLoadData !== null ? onLoadData : undefined }
Expand Down
56 changes: 0 additions & 56 deletions assets/js/src/core/components/tree-element/tree-element.styles.ts
View file

This file was deleted.

4 changes: 0 additions & 4 deletions assets/js/src/core/components/tree-element/tree-element.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,13 @@
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

Expand All @@ -40,7 +37,6 @@ export const TreeElement = ({ isHideRootChecker = true, withCustomSwitcherIcon =

return (
<AntTree
className={ styles.treeContainer }
showIcon
switcherIcon={ handleCustomSwitcherIcon }
{ ...props }
Expand Down

0 comments on commit b475923

Please sign in to comment.