feat: popover 2.0+

leonwgc · Apr 20, 2024 · 673f2e6 · 673f2e6
1 parent c692de1
commit 673f2e6
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 34 deletions.
diff --git a/demo/PopMenu.tsx b/demo/PopMenu.tsx
@@ -32,7 +32,7 @@ export default function App() {
   return (
     <PageWrap>
       <Cell
-        title="动画效果"
+        title="过渡动画效果"
         content={<Switch checked={animated} onChange={(c) => setAnimated(c)}></Switch>}
       ></Cell>
       <DemoBlock title="自定义菜单">
@@ -41,7 +41,7 @@ export default function App() {
             arrow={true}
             onVisibleChange={setV}
             placement="bottom"
-            animate={animated}
+            transition={animated}
             trigger="click"
             content={
               <div>

diff --git a/demo/Popover.tsx b/demo/Popover.tsx
@@ -1,7 +1,16 @@
 import React, { useState, useRef } from 'react';
 import PageWrap from './common/PageWrap';
 import DemoBlock from './common/DemoBlock';
-import { Popover, Button, Avatar, AutoCenter, useForceUpdate, Space } from 'react-uni-comps';
+import { Popover, Button, Avatar, AutoCenter, useForceUpdate, Space, styled } from 'react-uni-comps';
+
+
+const StyledContent = styled.div`
+  width: 100px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 
 const placements = [
   'top',
@@ -31,23 +40,22 @@ export default function App() {
       <DemoBlock title="普通" padding={40}>
         <AutoCenter>
           <Popover
+            style={{ background: '#000', color: '#fff', padding: 0 }}
             placement={placements[ref.current] as any}
             visible={visible}
             onClose={() => setVisible(false)}
-            content={<div style={{ padding: 20 }}>{placements[ref.current]}</div>}
+            content={<StyledContent>{placements[ref.current]}</StyledContent>}
           >
             <Button
               type="primary"
+              style={{ height: 80, width: 160 }}
               onClick={() => {
-                if (!visible) {
-                  setVisible(true);
-                } else {
-                  forceRender();
-                }
+                setVisible(true);
                 ref.current++;
                 if (ref.current > 11) {
                   ref.current = 0;
                 }
+                forceRender();
               }}
             >
               点我试试
@@ -64,6 +72,7 @@ export default function App() {
               const p = placements[ref.current++] as any;
 
               Popover.show({
+                style: { padding: 20, background: 'red', color: '#fff' },
                 anchor: elRef,
                 content: p,
                 placement: p,
@@ -92,6 +101,6 @@ export default function App() {
           </Avatar>
         </AutoCenter>
       </DemoBlock>
-    </PageWrap>
+    </PageWrap >
   );
 }
diff --git a/demo/Tooltip.tsx b/demo/Tooltip.tsx
@@ -15,21 +15,19 @@ export default function App() {
       <DemoBlock>
         <AutoCenter>
           <Space>
-            <Tooltip title="This's tooltip" animate={animate}>
+            <Tooltip title="This's tooltip" transition={animate}>
               <Button type="primary">默认</Button>
             </Tooltip>
 
+            <Tooltip transition={animate} placement="bottom" title="This's tooltip">
+              <Button type="primary">下方</Button>
+            </Tooltip>
+
             <Tooltip
-              animate={animate}
-              offset={{ x: -10, y: 15 }}
-              arrow={false}
-              placement="right"
               title="This's tooltip"
+              transition={animate}
+              style={{ background: 'red', fontSize: 12 }}
             >
-              <Button type="primary">右侧</Button>
-            </Tooltip>
-
-            <Tooltip title="This's tooltip" style={{ background: 'red', fontSize: 12 }}>
               <Button type="primary">自定义样式</Button>
             </Tooltip>
           </Space>

diff --git a/docs/404.html b/docs/404.html
@@ -74,6 +74,6 @@
   <body>
     <div id="root"></div>
 
-    <script src="/react-uni-comps/umi.5c10480b.js"></script>
+    <script src="/react-uni-comps/umi.90188e1b.js"></script>
   </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -74,6 +74,6 @@
   <body>
     <div id="root"></div>
 
-    <script src="/react-uni-comps/umi.5c10480b.js"></script>
+    <script src="/react-uni-comps/umi.90188e1b.js"></script>
   </body>
 </html>
diff --git a/docs/umi.5c10480b.js b/docs/umi.5c10480b.js
diff --git a/docs/umi.90188e1b.js b/docs/umi.90188e1b.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-uni-comps",
-  "version": "1.8.7",
-  "description": "React hooks-based components for desktop and mobile env",
+  "version": "1.8.8",
+  "description": "React hooks based components for desktop and mobile",
   "homepage": "https://leonwgc.github.io/react-uni-comps/",
   "keywords": [
     "react",
@@ -103,7 +103,7 @@
     "sortablejs": "^1.14.0",
     "styled-components": "^5.3.3",
     "tslib": "^2.4.0",
-    "w-popover": "1.1.8",
+    "w-popover": "~2.0.4",
     "w-qrcode": "~1.1.0",
     "w-touch": "2.0.0"
   },

diff --git a/src/PopMenu.tsx b/src/PopMenu.tsx
@@ -56,7 +56,7 @@ export type Props = React.HTMLAttributes<HTMLDivElement> & {
    * 展开动画
    * @default true
    *  */
-  animate?: boolean;
+  transition?: boolean;
 };
 
 export interface PopMenuRefType {
@@ -138,6 +138,7 @@ const PopMenu = React.forwardRef<PopMenuRefType, Props>((props, ref) => {
       {...popoverRest}
       className={clsx('uc-popmenu', className)}
       visible={visible}
+      transitionDuration={350}
       onClose={onClose}
       placement={placement}
       closeOnClickOutside={closeOnClickOutside}

diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -35,7 +35,7 @@ export type Props = {
    * 展开动画
    * @default true
    *  */
-  animate?: boolean;
+  transition?: boolean;
 } & BaseProps;
 
 /** 文字提示气泡框, 基于Popover */

diff --git a/types/PopMenu.d.ts b/types/PopMenu.d.ts
@@ -47,7 +47,7 @@ export declare type Props = React.HTMLAttributes<HTMLDivElement> & {
      * 展开动画
      * @default true
      *  */
-    animate?: boolean;
+    transition?: boolean;
 };
 export interface PopMenuRefType {
     show: () => void;
@@ -107,6 +107,6 @@ declare const PopMenu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTML
      * 展开动画
      * @default true
      *  */
-    animate?: boolean;
+    transition?: boolean;
 } & React.RefAttributes<PopMenuRefType>>;
 export default PopMenu;
diff --git a/types/Tooltip.d.ts b/types/Tooltip.d.ts
@@ -27,7 +27,7 @@ export declare type Props = {
      * 展开动画
      * @default true
      *  */
-    animate?: boolean;
+    transition?: boolean;
 } & BaseProps;
 /** 文字提示气泡框, 基于Popover */
 declare const Tooltip: {

diff --git a/yarn.lock b/yarn.lock
@@ -16267,10 +16267,10 @@ [email protected]:
   resolved "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
 
-w-popover@1.1.8:
-  version "1.1.8"
-  resolved "https://registry.npmmirror.com/w-popover/-/w-popover-1.1.8.tgz#e0e0532ee65d9fbe9a3a036002b22b3468146dc2"
-  integrity sha512-38ukt3RcY32Bj/wMd00XB3zdGA07Dkx/dSiYgQ4QUe22EW3RtnKB742ro7/q574Wqi/d8KKppDvDuVS0kjMiJw==
+w-popover@~2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/w-popover/-/w-popover-2.0.4.tgz#926f61dcaf7509c7212fa636357def7c4e92b51a"
+  integrity sha512-lMW722iJjz/52R9lWJCAkL2RekNt4rD6GvN7apzoQlBTscntggizuIrZDbhYK/Jeg+hk6msovr/2fWS3j/Se6Q==
 
 w-qrcode@~1.1.0:
   version "1.1.0"