Skip to content

Commit 8c84857

Browse files
author
sj
committed
style(Popover、Tree): 规范组件变量名称 uiwjs#845 
1 parent 5401652 commit 8c84857

File tree

5 files changed

+74
-67
lines changed

5 files changed

+74
-67
lines changed

‎packages/react-popover/src/index.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from 'react';
22
import { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
33
import Confirm from './Confirm';
44
import {
5-
OverlayTriggerPopover,
6-
OverlayTriggerPopoverContent,
7-
OverlayTriggerPopoverArrow,
8-
OverlayTriggerPopoverBodyBase,
5+
PopoverStyleOverlayTrigger,
6+
PopoverStyleOverlayTriggerContent,
7+
PopoverStyleOverlayTriggerArrow,
8+
PopoverStyleOverlayTriggerDiv,
99
} from './style/index';
1010

1111
export interface PopoverProps extends OverlayTriggerProps {
@@ -25,7 +25,7 @@ export default class Popover extends React.Component<PopoverProps> {
2525
renderArrow = () => {
2626
const { prefixCls } = this.props;
2727
return (
28-
<OverlayTriggerPopoverArrow className={`${prefixCls}-arrow`}>
28+
<PopoverStyleOverlayTriggerArrow className={`${prefixCls}-arrow`}>
2929
<svg viewBox="0 0 30 30">
3030
<path
3131
fillOpacity="0.2"
@@ -36,30 +36,30 @@ export default class Popover extends React.Component<PopoverProps> {
3636
d="M8.787 7.036c1.22-1.125 2.21-3.376 2.21-5.03V0v30-2.005c0-1.654-.983-3.9-2.21-5.03l-7.183-6.616c-.81-.746-.802-1.96 0-2.7l7.183-6.614z"
3737
/>
3838
</svg>
39-
</OverlayTriggerPopoverArrow>
39+
</PopoverStyleOverlayTriggerArrow>
4040
);
4141
};
4242
render() {
4343
const { prefixCls, className, content, visibleArrow, ...other } = this.props;
4444
const cls = [prefixCls, className, !visibleArrow ? 'no-arrow' : null].filter(Boolean).join(' ').trim();
4545
return (
46-
<OverlayTriggerPopover
46+
<PopoverStyleOverlayTrigger
4747
{...other}
4848
overlay={
49-
<OverlayTriggerPopoverBodyBase params={{ placement: this.props.placement }} className={cls}>
49+
<PopoverStyleOverlayTriggerDiv params={{ placement: this.props.placement }} className={cls}>
5050
{visibleArrow && this.renderArrow()}
51-
<OverlayTriggerPopoverContent className={`${prefixCls}-inner`}>
51+
<PopoverStyleOverlayTriggerContent className={`${prefixCls}-inner`}>
5252
{this.props.content}
53-
</OverlayTriggerPopoverContent>
54-
</OverlayTriggerPopoverBodyBase>
53+
</PopoverStyleOverlayTriggerContent>
54+
</PopoverStyleOverlayTriggerDiv>
5555
}
5656
>
5757
{typeof this.props.children === 'object' && (this.props.children as JSX.Element).type.name !== 'Icon' ? (
5858
this.props.children
5959
) : (
6060
<span style={{ display: 'block', writingMode: 'vertical-rl' }}>{this.props.children}</span>
6161
)}
62-
</OverlayTriggerPopover>
62+
</PopoverStyleOverlayTrigger>
6363
);
6464
}
6565
}

‎packages/react-popover/src/style/index.ts

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import styled, { css } from 'styled-components';
22
import OverlayTrigger, { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
3-
3+
import { getThemeVariantValue } from '@uiw/utils';
44
interface PopoverWarpProps extends OverlayTriggerProps {
55
defaultTheme?: Record<string, string | number>;
66
}
7-
export const OverlayTriggerPopoverArrow = styled.div<PopoverWarpProps>`
7+
export const PopoverStyleOverlayTriggerArrow = styled.div<PopoverWarpProps>`
88
position: absolute;
99
width: 30px;
1010
height: 30px;
1111
border-color: transparent;
1212
z-index: 21;
1313
`;
1414

15-
export interface OverlayTriggerPopoverBodyBaseProps
15+
export interface PopoverStyleOverlayTriggerProps
1616
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
1717
params?: {
1818
placement?: OverlayTriggerProps['placement'];
1919
};
2020
}
2121

22-
export const OverlayTriggerPopoverBodyBase = styled.div<OverlayTriggerPopoverBodyBaseProps>`
22+
export const PopoverStyleOverlayTriggerDiv = styled.div<PopoverStyleOverlayTriggerProps>`
2323
${(props) =>
2424
['top', 'topLeft', 'topRight'].includes(props.params?.placement || '') &&
2525
css`
@@ -43,14 +43,14 @@ export const OverlayTriggerPopoverBodyBase = styled.div<OverlayTriggerPopoverBod
4343
`}
4444
`;
4545

46-
export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
46+
export const PopoverStyleOverlayTrigger = styled(OverlayTrigger)<PopoverWarpProps>`
4747
position: relative;
4848
display: inline-block;
4949
outline: 0;
5050
${(props) =>
5151
['right', 'rightTop', 'rightBottom'].includes(props.placement || '') &&
5252
css`
53-
& ${OverlayTriggerPopoverArrow} {
53+
& ${PopoverStyleOverlayTriggerArrow} {
5454
left: 2px;
5555
margin-top: -15px;
5656
top: 50%;
@@ -60,7 +60,7 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
6060
${(props) =>
6161
['left', 'leftTop', 'leftBottom'].includes(props.placement || '') &&
6262
css`
63-
& ${OverlayTriggerPopoverArrow} {
63+
& ${PopoverStyleOverlayTriggerArrow} {
6464
transform: rotate(180deg);
6565
margin-top: -15px;
6666
right: 2px;
@@ -71,15 +71,15 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
7171
${(props) =>
7272
['leftTop', 'rightTop'].includes(props.placement || '') &&
7373
css`
74-
& ${OverlayTriggerPopoverArrow} {
74+
& ${PopoverStyleOverlayTriggerArrow} {
7575
top: 15px;
7676
}
7777
`}
7878
7979
${(props) =>
8080
['leftBottom', 'rightBottom'].includes(props.placement || '') &&
8181
css`
82-
& ${OverlayTriggerPopoverArrow} {
82+
& ${PopoverStyleOverlayTriggerArrow} {
8383
bottom: 0;
8484
top: auto;
8585
}
@@ -88,7 +88,7 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
8888
${(props) =>
8989
['top', 'topLeft', 'topRight'].includes(props.placement || '') &&
9090
css`
91-
& ${OverlayTriggerPopoverArrow} {
91+
& ${PopoverStyleOverlayTriggerArrow} {
9292
transform: rotate(-90deg);
9393
bottom: 2px;
9494
left: 50%;
@@ -99,7 +99,7 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
9999
${(props) =>
100100
['bottom', 'bottomLeft', 'bottomRight'].includes(props.placement || '') &&
101101
css`
102-
& ${OverlayTriggerPopoverArrow} {
102+
& ${PopoverStyleOverlayTriggerArrow} {
103103
transform: rotate(90deg);
104104
left: 50%;
105105
margin-left: -15px;
@@ -110,29 +110,36 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
110110
${(props) =>
111111
['bottomLeft', 'topLeft'].includes(props.placement || '') &&
112112
css`
113-
& ${OverlayTriggerPopoverArrow} {
113+
& ${PopoverStyleOverlayTriggerArrow} {
114114
left: 15px;
115115
}
116116
`}
117117
118118
${(props) =>
119119
['bottomRight', 'topRight'].includes(props.placement || '') &&
120120
css`
121-
& ${OverlayTriggerPopoverArrow} {
121+
& ${PopoverStyleOverlayTriggerArrow} {
122122
right: 0;
123123
left: auto;
124124
}
125125
`}
126126
`;
127127

128-
export const OverlayTriggerPopoverContent = styled.div<PopoverWarpProps>`
129-
font-size: 12px;
128+
export const PopoverStyleOverlayTriggerContent = styled.div<PopoverWarpProps>`
129+
font-size: ${(props) => getThemeVariantValue(props, 'fontSizePopoverDefault')};
130130
display: block;
131131
text-align: left;
132132
text-decoration: none;
133133
background-color: #fff;
134134
border-radius: 4px;
135135
min-height: 23px;
136-
box-shadow: rgba(16, 22, 26, 0.1) 0px 0px 0px 1px, rgba(16, 22, 26, 0.2) 0px 2px 4px,
137-
rgba(16, 22, 26, 0.2) 0px 8px 24px;
136+
box-shadow: ${(props) => getThemeVariantValue(props, 'boxShadowPopoverPrimary')};
138137
`;
138+
139+
PopoverStyleOverlayTriggerContent.defaultProps = {
140+
defaultTheme: {
141+
fontSizePopoverDefault: '12px',
142+
boxShadowPopoverPrimary:
143+
'rgba(16, 22, 26, 0.1) 0px 0px 0px 1px, rgba(16, 22, 26, 0.2) 0px 2px 4px, rgba(16, 22, 26, 0.2) 0px 8px 24px',
144+
},
145+
};

‎packages/react-tree/src/TreeNode.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import Icon, { IconProps } from '@uiw/react-icon';
44
import { IProps, noop } from '@uiw/utils';
55
import { TreeData, TreeProps, getChildKeys } from './';
66
import {
7-
CSSTransitionWarp,
8-
TreeNodeUl,
9-
TreeNodeUlLidiv,
10-
TreeNodeUlLidivSpan,
11-
TreeNodeUlLidivSpanIcon,
12-
TreeNodeUlLidivSpanDiv,
7+
TreeNodeStyleCSSTransition,
8+
TreeNodeStyleUl,
9+
TreeNodeStyleUlDiv,
10+
TreeNodeStyleUlLidivSpan,
11+
TreeNodeStyleUlLidivSpanIcon,
12+
TreeNodeStyleUlLidivSpanDiv,
1313
} from './style/index';
1414

1515
interface TreeNodeIconProps {
@@ -88,7 +88,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
8888
}, []);
8989

9090
return (
91-
<CSSTransitionWarp
91+
<TreeNodeStyleCSSTransition
9292
as={CSSTransition}
9393
nodeRef={node}
9494
classNames={prefixCls}
@@ -100,7 +100,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
100100
onEntered={onEntered}
101101
onEntering={onEntering}
102102
>
103-
<TreeNodeUl
103+
<TreeNodeStyleUl
104104
ref={node}
105105
isOpen={isOpen}
106106
level={level}
@@ -145,13 +145,13 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
145145
}
146146
return (
147147
<li key={idx} style={{ display: item.hideNode ? 'none' : 'block' }}>
148-
<TreeNodeUlLidiv className={`${prefixCls}-label`}>
149-
<TreeNodeUlLidivSpan
148+
<TreeNodeStyleUlDiv className={`${prefixCls}-label`}>
149+
<TreeNodeStyleUlLidivSpan
150150
style={{ display: noChild ? 'none' : 'auto' }}
151151
className={`${prefixCls}-switcher`}
152152
onClick={(evn: React.MouseEvent<HTMLElement, MouseEvent>) => onItemClick(item, evn)}
153153
>
154-
<TreeNodeUlLidivSpanIcon
154+
<TreeNodeStyleUlLidivSpanIcon
155155
as={Icon}
156156
type={iconItem || 'caret-right'}
157157
isIcon={typeof icon}
@@ -168,8 +168,8 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
168168
.join(' ')
169169
.trim()}
170170
/>
171-
</TreeNodeUlLidivSpan>
172-
<TreeNodeUlLidivSpanDiv
171+
</TreeNodeStyleUlLidivSpan>
172+
<TreeNodeStyleUlLidivSpanDiv
173173
onClick={(evn) => disabledObj.onClick?.(item, evn)}
174174
judgeSelected={selected}
175175
judgeisSelected={isSelected}
@@ -198,8 +198,8 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
198198
) : (
199199
<Label label={item.label} className={disabledObj.disabledClass} />
200200
)}
201-
</TreeNodeUlLidivSpanDiv>
202-
</TreeNodeUlLidiv>
201+
</TreeNodeStyleUlLidivSpanDiv>
202+
</TreeNodeStyleUlDiv>
203203
{item.children && (
204204
<TreeNode
205205
{...other}
@@ -223,7 +223,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
223223
</li>
224224
);
225225
})}
226-
</TreeNodeUl>
227-
</CSSTransitionWarp>
226+
</TreeNodeStyleUl>
227+
</TreeNodeStyleCSSTransition>
228228
);
229229
}

‎packages/react-tree/src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { IconProps } from '@uiw/react-icon';
33
import { IProps, HTMLDivProps, noop } from '@uiw/utils';
44
import TreeNode from './TreeNode';
55
// import './style/index.less';
6-
import { TreeNodeDiv } from './style/index';
6+
import { TreeNodeStyleWrap } from './style/index';
77

88
export type TreeRenderTitleNode = {
99
selected?: boolean;
@@ -220,7 +220,7 @@ export default function Tree(props: TreeProps) {
220220
onChange?.(item.key, selKeys);
221221
}
222222
return (
223-
<TreeNodeDiv className={cls} {...elementProps}>
223+
<TreeNodeStyleWrap className={cls} {...elementProps}>
224224
<TreeNode
225225
{...{
226226
icon,
@@ -236,6 +236,6 @@ export default function Tree(props: TreeProps) {
236236
data={data}
237237
level={1}
238238
/>
239-
</TreeNodeDiv>
239+
</TreeNodeStyleWrap>
240240
);
241241
}

0 commit comments

Comments
 (0)