fix:规范组件变量名称 uiwjs #845(#897)

uiwjs · Aug 6, 2022 · 95f7edb · 95f7edb
1 parent 2dc3087
commit 95f7edb
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 67 deletions.
diff --git a/packages/react-popover/src/index.tsx b/packages/react-popover/src/index.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
 import Confirm from './Confirm';
 import {
-  OverlayTriggerPopover,
-  OverlayTriggerPopoverContent,
-  OverlayTriggerPopoverArrow,
-  OverlayTriggerPopoverBodyBase,
+  PopoverStyleOverlayTrigger,
+  PopoverStyleOverlayTriggerContent,
+  PopoverStyleOverlayTriggerArrow,
+  PopoverStyleOverlayTriggerDiv,
 } from './style/index';
 
 export interface PopoverProps extends OverlayTriggerProps {
@@ -25,7 +25,7 @@ export default class Popover extends React.Component<PopoverProps> {
   renderArrow = () => {
     const { prefixCls } = this.props;
     return (
-      <OverlayTriggerPopoverArrow className={`${prefixCls}-arrow`}>
+      <PopoverStyleOverlayTriggerArrow className={`${prefixCls}-arrow`}>
         <svg viewBox="0 0 30 30">
           <path
             fillOpacity="0.2"
@@ -36,30 +36,30 @@ export default class Popover extends React.Component<PopoverProps> {
             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"
           />
         </svg>
-      </OverlayTriggerPopoverArrow>
+      </PopoverStyleOverlayTriggerArrow>
     );
   };
   render() {
     const { prefixCls, className, content, visibleArrow, ...other } = this.props;
     const cls = [prefixCls, className, !visibleArrow ? 'no-arrow' : null].filter(Boolean).join(' ').trim();
     return (
-      <OverlayTriggerPopover
+      <PopoverStyleOverlayTrigger
         {...other}
         overlay={
-          <OverlayTriggerPopoverBodyBase params={{ placement: this.props.placement }} className={cls}>
+          <PopoverStyleOverlayTriggerDiv params={{ placement: this.props.placement }} className={cls}>
             {visibleArrow && this.renderArrow()}
-            <OverlayTriggerPopoverContent className={`${prefixCls}-inner`}>
+            <PopoverStyleOverlayTriggerContent className={`${prefixCls}-inner`}>
               {this.props.content}
-            </OverlayTriggerPopoverContent>
-          </OverlayTriggerPopoverBodyBase>
+            </PopoverStyleOverlayTriggerContent>
+          </PopoverStyleOverlayTriggerDiv>
         }
       >
         {typeof this.props.children === 'object' && (this.props.children as JSX.Element).type.name !== 'Icon' ? (
           this.props.children
         ) : (
           <span style={{ display: 'block', writingMode: 'vertical-rl' }}>{this.props.children}</span>
         )}
-      </OverlayTriggerPopover>
+      </PopoverStyleOverlayTrigger>
     );
   }
 }
diff --git a/packages/react-popover/src/style/index.ts b/packages/react-popover/src/style/index.ts
@@ -1,25 +1,25 @@
 import styled, { css } from 'styled-components';
 import OverlayTrigger, { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
-
+import { getThemeVariantValue } from '@uiw/utils';
 interface PopoverWarpProps extends OverlayTriggerProps {
   defaultTheme?: Record<string, string | number>;
 }
-export const OverlayTriggerPopoverArrow = styled.div<PopoverWarpProps>`
+export const PopoverStyleOverlayTriggerArrow = styled.div<PopoverWarpProps>`
   position: absolute;
   width: 30px;
   height: 30px;
   border-color: transparent;
   z-index: 21;
 `;
 
-export interface OverlayTriggerPopoverBodyBaseProps
+export interface PopoverStyleOverlayTriggerProps
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   params?: {
     placement?: OverlayTriggerProps['placement'];
   };
 }
 
-export const OverlayTriggerPopoverBodyBase = styled.div<OverlayTriggerPopoverBodyBaseProps>`
+export const PopoverStyleOverlayTriggerDiv = styled.div<PopoverStyleOverlayTriggerProps>`
   ${(props) =>
     ['top', 'topLeft', 'topRight'].includes(props.params?.placement || '') &&
     css`
@@ -43,14 +43,14 @@ export const OverlayTriggerPopoverBodyBase = styled.div<OverlayTriggerPopoverBod
     `}
 `;
 
-export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
+export const PopoverStyleOverlayTrigger = styled(OverlayTrigger)<PopoverWarpProps>`
   position: relative;
   display: inline-block;
   outline: 0;
   ${(props) =>
     ['right', 'rightTop', 'rightBottom'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         left: 2px;
         margin-top: -15px;
         top: 50%;
@@ -60,7 +60,7 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
   ${(props) =>
     ['left', 'leftTop', 'leftBottom'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         transform: rotate(180deg);
         margin-top: -15px;
         right: 2px;
@@ -71,15 +71,15 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
   ${(props) =>
     ['leftTop', 'rightTop'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         top: 15px;
       }
     `} 
 
   ${(props) =>
     ['leftBottom', 'rightBottom'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         bottom: 0;
         top: auto;
       }
@@ -88,7 +88,7 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
   ${(props) =>
     ['top', 'topLeft', 'topRight'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         transform: rotate(-90deg);
         bottom: 2px;
         left: 50%;
@@ -99,7 +99,7 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
   ${(props) =>
     ['bottom', 'bottomLeft', 'bottomRight'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         transform: rotate(90deg);
         left: 50%;
         margin-left: -15px;
@@ -110,29 +110,36 @@ export const OverlayTriggerPopover = styled(OverlayTrigger)<PopoverWarpProps>`
   ${(props) =>
     ['bottomLeft', 'topLeft'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         left: 15px;
       }
     `} 
 
   ${(props) =>
     ['bottomRight', 'topRight'].includes(props.placement || '') &&
     css`
-      & ${OverlayTriggerPopoverArrow} {
+      & ${PopoverStyleOverlayTriggerArrow} {
         right: 0;
         left: auto;
       }
     `}
 `;
 
-export const OverlayTriggerPopoverContent = styled.div<PopoverWarpProps>`
-  font-size: 12px;
+export const PopoverStyleOverlayTriggerContent = styled.div<PopoverWarpProps>`
+  font-size: ${(props) => getThemeVariantValue(props, 'fontSizePopoverDefault')};
   display: block;
   text-align: left;
   text-decoration: none;
   background-color: #fff;
   border-radius: 4px;
   min-height: 23px;
-  box-shadow: 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;
+  box-shadow: ${(props) => getThemeVariantValue(props, 'boxShadowPopoverPrimary')};
 `;
+
+PopoverStyleOverlayTriggerContent.defaultProps = {
+  defaultTheme: {
+    fontSizePopoverDefault: '12px',
+    boxShadowPopoverPrimary:
+      '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',
+  },
+};
diff --git a/packages/react-tree/src/TreeNode.tsx b/packages/react-tree/src/TreeNode.tsx
@@ -4,12 +4,12 @@ import Icon, { IconProps } from '@uiw/react-icon';
 import { IProps, noop } from '@uiw/utils';
 import { TreeData, TreeProps, getChildKeys } from './';
 import {
-  CSSTransitionWarp,
-  TreeNodeUl,
-  TreeNodeUlLidiv,
-  TreeNodeUlLidivSpan,
-  TreeNodeUlLidivSpanIcon,
-  TreeNodeUlLidivSpanDiv,
+  TreeNodeStyleCSSTransition,
+  TreeNodeStyleUl,
+  TreeNodeStyleUlDiv,
+  TreeNodeStyleUlLidivSpan,
+  TreeNodeStyleUlLidivSpanIcon,
+  TreeNodeStyleUlLidivSpanDiv,
 } from './style/index';
 
 interface TreeNodeIconProps {
@@ -88,7 +88,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
   }, []);
 
   return (
-    <CSSTransitionWarp
+    <TreeNodeStyleCSSTransition
       as={CSSTransition}
       nodeRef={node}
       classNames={prefixCls}
@@ -100,7 +100,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
       onEntered={onEntered}
       onEntering={onEntering}
     >
-      <TreeNodeUl
+      <TreeNodeStyleUl
         ref={node}
         isOpen={isOpen}
         level={level}
@@ -145,13 +145,13 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
           }
           return (
             <li key={idx} style={{ display: item.hideNode ? 'none' : 'block' }}>
-              <TreeNodeUlLidiv className={`${prefixCls}-label`}>
-                <TreeNodeUlLidivSpan
+              <TreeNodeStyleUlDiv className={`${prefixCls}-label`}>
+                <TreeNodeStyleUlLidivSpan
                   style={{ display: noChild ? 'none' : 'auto' }}
                   className={`${prefixCls}-switcher`}
                   onClick={(evn: React.MouseEvent<HTMLElement, MouseEvent>) => onItemClick(item, evn)}
                 >
-                  <TreeNodeUlLidivSpanIcon
+                  <TreeNodeStyleUlLidivSpanIcon
                     as={Icon}
                     type={iconItem || 'caret-right'}
                     isIcon={typeof icon}
@@ -168,8 +168,8 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
                       .join(' ')
                       .trim()}
                   />
-                </TreeNodeUlLidivSpan>
-                <TreeNodeUlLidivSpanDiv
+                </TreeNodeStyleUlLidivSpan>
+                <TreeNodeStyleUlLidivSpanDiv
                   onClick={(evn) => disabledObj.onClick?.(item, evn)}
                   judgeSelected={selected}
                   judgeisSelected={isSelected}
@@ -198,8 +198,8 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
                   ) : (
                     <Label label={item.label} className={disabledObj.disabledClass} />
                   )}
-                </TreeNodeUlLidivSpanDiv>
-              </TreeNodeUlLidiv>
+                </TreeNodeStyleUlLidivSpanDiv>
+              </TreeNodeStyleUlDiv>
               {item.children && (
                 <TreeNode
                   {...other}
@@ -223,7 +223,7 @@ export default function TreeNode<T>(props: TreeNodeProps<T>) {
             </li>
           );
         })}
-      </TreeNodeUl>
-    </CSSTransitionWarp>
+      </TreeNodeStyleUl>
+    </TreeNodeStyleCSSTransition>
   );
 }
diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx
@@ -3,7 +3,7 @@ import { IconProps } from '@uiw/react-icon';
 import { IProps, HTMLDivProps, noop } from '@uiw/utils';
 import TreeNode from './TreeNode';
 // import './style/index.less';
-import { TreeNodeDiv } from './style/index';
+import { TreeNodeStyleWrap } from './style/index';
 
 export type TreeRenderTitleNode = {
   selected?: boolean;
@@ -220,7 +220,7 @@ export default function Tree(props: TreeProps) {
     onChange?.(item.key, selKeys);
   }
   return (
-    <TreeNodeDiv className={cls} {...elementProps}>
+    <TreeNodeStyleWrap className={cls} {...elementProps}>
       <TreeNode
         {...{
           icon,
@@ -236,6 +236,6 @@ export default function Tree(props: TreeProps) {
         data={data}
         level={1}
       />
-    </TreeNodeDiv>
+    </TreeNodeStyleWrap>
   );
 }