refactor(popover): 重构popover组件样式 #845 (#868)

Author: matuancc

packages/react-popover/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import OverlayTrigger, { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
 import Confirm from './Confirm';
-import './style/index.less';
+import { OverlayTriggerPopover, OverlayTriggerPopoverContent, OverlayTriggerPopoverArrow } from './style/index';
 
 export interface PopoverProps extends OverlayTriggerProps {
   content?: React.ReactNode;
@@ -20,7 +20,7 @@ export default class Popover extends React.Component<PopoverProps> {
   renderArrow = () => {
     const { prefixCls } = this.props;
     return (
-      <div className={`${prefixCls}-arrow`}>
+      <OverlayTriggerPopoverArrow className={`${prefixCls}-arrow`}>
         <svg viewBox="0 0 30 30">
           <path
             fillOpacity="0.2"
@@ -31,19 +31,22 @@ 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>
-      </div>
+      </OverlayTriggerPopoverArrow>
     );
   };
   render() {
     const { prefixCls, className, content, visibleArrow, ...other } = this.props;
     const cls = [prefixCls, className, !visibleArrow ? 'no-arrow' : null].filter(Boolean).join(' ').trim();
     return (
-      <OverlayTrigger
+      <OverlayTriggerPopover
+        as={OverlayTrigger}
         {...other}
         overlay={
           <div className={cls}>
             {visibleArrow && this.renderArrow()}
-            <div className={`${prefixCls}-inner`}>{this.props.content}</div>
+            <OverlayTriggerPopoverContent className={`${prefixCls}-inner`}>
+              {this.props.content}
+            </OverlayTriggerPopoverContent>
           </div>
         }
       >
@@ -52,7 +55,7 @@ export default class Popover extends React.Component<PopoverProps> {
         ) : (
           <span style={{ display: 'block', writingMode: 'vertical-rl' }}>{this.props.children}</span>
         )}
-      </OverlayTrigger>
+      </OverlayTriggerPopover>
     );
   }
 }

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

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components';
+import { PopoverProps } from '../index';
+
+interface PopoverWarpProps extends PopoverProps {
+  defaultTheme?: Record<string, string | number>;
+}
+export const OverlayTriggerPopoverArrow = styled.div<PopoverWarpProps>`
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-color: transparent;
+  z-index: 21;
+`;
+
+export const OverlayTriggerPopover = styled.div<PopoverWarpProps>`
+  position: relative;
+  display: inline-block;
+  outline: 0;
+
+  ${(props) =>
+    ['right', 'rightTop', 'rightBottom'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        left: 2px;
+        margin-top: -15px;
+        top: 50%;
+      }
+    `}
+
+  ${(props) =>
+    ['left', 'leftTop', 'leftBottom'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        transform: rotate(180deg);
+        margin-top: -15px;
+        right: 2px;
+        top: 50%;
+      }
+    `} 
+
+  ${(props) =>
+    ['leftTop', 'rightTop'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        top: 15px;
+      }
+    `} 
+
+  ${(props) =>
+    ['leftBottom', 'rightBottom'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        bottom: 0;
+        top: auto;
+      }
+    `} 
+
+  ${(props) =>
+    ['top', 'topLeft', 'topRight'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        transform: rotate(-90deg);
+        bottom: 2px;
+        left: 50%;
+        margin-left: -15px;
+      }
+    `} 
+
+  ${(props) =>
+    ['bottom', 'bottomLeft', 'bottomRight'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        transform: rotate(90deg);
+        left: 50%;
+        margin-left: -15px;
+        top: 2px;
+      }
+    `} 
+
+  ${(props) =>
+    ['bottomLeft', 'topLeft'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        left: 15px;
+      }
+    `} 
+
+  ${(props) =>
+    ['bottomRight', 'topRight'].includes(props.placement || '') &&
+    css`
+      & ${OverlayTriggerPopoverArrow} {
+        right: 0;
+        left: auto;
+      }
+    `}
+`;
+
+export const OverlayTriggerPopoverContent = styled.div<PopoverWarpProps>`
+  font-size: 12px;
+  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';
+`;

packages/react-textarea/src/index.tsx

@@ -7,9 +7,6 @@ export interface TextareaProps extends IProps, HTMLTextProps {}
 
 export default React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
   const { prefixCls = 'w-textarea', className, ...restProps } = props;
-  {
-    console.log('1111', props);
-  }
   return (
     <TextareaWarp className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...restProps} ref={ref}>
       {props.children}