Merge pull request #17 from popo-fishes/pl

Pl
popo-fishes · Sep 8, 2024 · 53e4abf · 53e4abf
2 parents 6e7d355 + 8b2f01e
commit 53e4abf
Show file tree

Hide file tree

Showing 28 changed files with 549 additions and 72 deletions.
diff --git a/.docs/docs/libraries/dialog.md b/.docs/docs/libraries/dialog.md
@@ -150,6 +150,12 @@ export default () => {
 | header           | 头部内容                                                                                       | ReactNode         | —             |
 | footer           | 底部内容                                                                                       | ReactNode         | —             |
 | getContainer     | 指定 Dialog 挂载的节点, 需要始终返回唯一 dom 节点                                              | () => HTMLElement | document.body |
+| transitionName        | [动画名称, 请查看描述](https://reactcommunity.org/react-transition-group/css-transition)                                                                                                 | string                               | —        |
+| duration        | 执行动画的时长(以毫秒为单位)的                                                                                                 | number                               | 300       |
 | beforeClose      | 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候 | Function          | —             |
 | onClose          | 点击遮罩层或右上角叉或取消按钮的回调                                                           | function(e)       | —             |
 | afterClose       | Dialog 完全关闭后的回调                                                                        | Function          | —             |
+
+#### 注意
+
+- `<Dialog />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnClose`。
diff --git a/.docs/docs/libraries/popover.md b/.docs/docs/libraries/popover.md
@@ -0,0 +1,104 @@
+---
+order: 4
+group:
+  title: 数据展示
+  order: 3
+---
+
+# Popover 气泡卡片
+
+Popover 是在 Tooltip 基础上开发出来的。 因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
+
+## 基础用法
+1. trigger 属性被用来决定 popover 的触发方式，支持的触发方式： `hover` `click` 如果你想手动控制它，可以设置 visible 属性。
+2. 最简单的用法，浮层的大小由内容区域决定。
+
+```tsx
+import React from 'react';
+import { Button, Popover } from 'camelia';
+
+const content = (
+  <div className="layout-init-box">
+    <p>There is a lot of content</p>
+    <p>There is a lot of content</p>
+  </div>
+);
+
+const App: React.FC = () => (
+  <>
+    <Popover content={content} title="Title">
+      <Button plain className="mr-4">Hover</Button>
+    </Popover>
+    <Popover content={content} title="Title" trigger="click">
+      <Button plain >click</Button>
+    </Popover>
+  </>
+);
+
+export default App;
+```
+
+## 虚拟触发
+
+1. 可以由虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景
+2. 结合visible，你可以做的主动控制Popover
+
+```tsx
+import React, { useState, useRef } from 'react';
+import { Button, Popover } from 'camelia';
+import { useClickAway } from "camelia/shared";
+
+const content = (
+  <div className="layout-init-box">
+    <p>There is a lot of content</p>
+    <p>There is a lot of content</p>
+  </div>
+);
+
+const App: React.FC = () => {
+  const [clicked, setClicked] = useState(false);
+  const [enable, setEnable] = useState(false);
+
+  const virtualRef = useRef(null)
+  const popoverRef = useRef(null)
+
+  // 点击弹窗外面主动取消
+  useClickAway(() => {
+    setClicked(false)
+  }, popoverRef.current?.popupRef, {
+    enable
+  });
+
+  return(
+    <>
+      <Button plain ref={virtualRef} onClick={() => setClicked(!clicked)}>Click me</Button>
+      <Popover
+        title="Title"
+        content={content}
+        ref={popoverRef}
+        virtualRef={virtualRef}
+        virtualTriggering
+        visible={clicked}
+        onOpenChange={(v) =>{
+          setEnable(v)
+        }}
+      />
+    </>
+  )
+}
+
+export default App;
+```
+
+## API
+
+| 参数    | 说明     | 类型                         | 默认值 | 版本 |
+| ------- | -------- | ---------------------------- | ------ | ---- |
+| content | 卡片内容 | ReactNode \| () => ReactNode | -      |      |
+| title   | 卡片标题 | ReactNode \| () => ReactNode | -      |      |
+
+更多属性请参考 [Tooltip](http://cameliya.cn/libraries/tooltip#api)。
+
+## 注意
+
+请确保 `Popover` 的子元素能接受 `onMouseEnter` `onMouseLeave` `onClick` 事件。
diff --git a/.docs/docs/libraries/tooltip.md b/.docs/docs/libraries/tooltip.md
@@ -98,24 +98,26 @@ export default App;
 | strategy          | 描述要使用的定位策略。默认情况下，它是absolute                                                           | string                             | absolute |
 | hideAfterTime     | 消失的延迟，以毫秒为单位           | number                                | 100      |
 | showAfterTime     | 出现延迟，以毫秒为单位                                                                                   | number                               | 100        |
-| transitionName        | 动画名称                                                                                                 | string                               | —        |
+| transitionName        | [动画名称, 请查看描述](https://reactcommunity.org/react-transition-group/css-transition)                                                                                                 | string                               | —        |
 | duration        | 执行动画的时长(以毫秒为单位)的                                                                                                 | number                               | 200       |
 | disabled          | 是否禁止                                                                                                 | boolean                              | false    |
-| destroyTooltipOnHide        | 关闭后是否销毁 Tooltip                             | boolean                             | false     |
+| destroyTooltipOnHide        | 关闭后是否销毁 Tooltip                             | boolean                             | true     |
 | overlayClassName       | 卡片类名                                                                                         | string                               | —        |
 | overlayStyle       | 卡片style                                                                                          | CSSProperties                       | —        |
 | zIndex            | 设置 Tooltip 的 z-index                                                                                               | number                              | —        |
 | visible           | 受控模式，来控制它的显示与关闭                                                                           | boolean                             | —        |
 | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode:HTMLElement) => void | —        |
 | showArrow | tooltip 的内容是否有箭头 | boolean | true        |
-| onShow | 显示时的回调 | () => void | —        |
-| onHide | 隐藏时的回调 | () => void | —        |
+| virtualTriggering | 用来标识虚拟触发是否被启用 | boolean | false        |
+| virtualRef | 标识虚拟触发时的触发元素 | MutableRefObject< HTMLElement > | —        |
+| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | —        |
 
 ### Methods
 
 | 名称         | 说明                                                                             | 类型                         |
 | ------------ | -------------------------------------------------------------------------------- | ---------------------------- |
 | tooltipRef    | tooltip Component                                                           | object                 |
+| popupRef | 获取popup的ref, 可能有些业务场景是想要获取popup节点的               | object |
 | onOpen       | 控制显示状态                                                          | Function                 |
 | onClose      | 控制隐藏状态, 可以传递一个time来覆盖hideAfterTime，为0时立马关闭弹窗 | Function `(time) => void` |
-| updatePopup | 使用更新位置                                  | Function
+| updatePopup | 使用更新位置                                  | Function |
diff --git a/.docs/style/components.scss b/.docs/style/components.scss
@@ -4,10 +4,11 @@
  @use "../../packages/components/checkbox/style/index.scss" as *;
  @use "../../packages/components/dialog/style/index.scss" as *;
  @use "../../packages/components/image/style/index.scss" as *;
+ @use "../../packages/components/input/style/index.scss" as *;
+ @use "../../packages/components/img-captcha/style/index.scss" as *;
  @use "../../packages/components/message/style/index.scss" as *;
+ @use "../../packages/components/popover/style/index.scss" as *;
  @use "../../packages/components/prompt/style/index.scss" as *;
- @use "../../packages/components/img-captcha/style/index.scss" as *;
- @use "../../packages/components/input/style/index.scss" as *;
  @use "../../packages/components/tag/style/index.scss" as *;
  @use "../../packages/components/tooltip/style/index.scss" as *;
  @use "../../packages/components/_internal/wave/style/index.scss" as *;
diff --git a/.docs/style/index.scss b/.docs/style/index.scss
@@ -6,3 +6,4 @@
 
 // 引入页面组件的样式
 @import "./page.scss";
+
diff --git a/.docs/style/page.scss b/.docs/style/page.scss
@@ -1,5 +1,12 @@
 @use "../.dumi/var.scss" as *;
 
+.layout-init-box {
+  p {
+    margin: 0;
+  }
+}
+
+
 .site-t2vb78 .icon-item {
   :hover {
     background-color: #2b2b2c;

diff --git a/packages/camelia/version.ts b/packages/camelia/version.ts
@@ -6,4 +6,4 @@
  * "当你在使用 pnpm 处理多包依赖时，如果本地包的版本与远程版本完全匹配，
  * 则 pnpm 会默认使用本地包覆盖远程包，无论远程包的版本是更新的还是旧的。"
  */
-export const version = "1.1.3";
+export const version = "1.1.4";
diff --git a/packages/components/_styles/common/transition.scss b/packages/components/_styles/common/transition.scss
@@ -1,26 +1,102 @@
 @use "../core/config" as *;
+@use "../core/function" as *;
 
 // https://reactcommunity.org/react-transition-group/css-transition
+@mixin zoomBigOutFn($duration) {
+  transform: scale(0);
+  opacity: 0;
+  animation-duration: $duration;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  animation-timing-function: getCssVar("motion-ease-out-circ");
+  transform-origin: 50% 50%;
+}
+@mixin zoomBigInOutFn($duration) {
+  animation-duration: $duration;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  animation-timing-function: getCssVar("motion-ease-in-out-circ");
+  transform-origin: 50% 50%;
+}
 
 /*
-* 中间放大 -- 用于tooltip
+* 中间快速放大 -- 用于tooltip
 */
-.#{$namespace}-zoom-in-top-exit-active {
-  animation-name: #{$namespace}-zoom-in-top-out;
-  animation-duration: 0.2s;
-  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  transform-origin: center center;
-  &[data-popper-placement^="top"] {
-    transform-origin: center center;
+.#{$namespace}-zoom-big-fast-enter {
+  @include zoomBigOutFn(0.1s);
+}
+.#{$namespace}-zoom-big-fast-exit {
+  @include zoomBigInOutFn(0.1s);
+}
+.#{$namespace}-zoom-big-fast-enter-active {
+  animation-name: #{$namespace}-zoom-big-in;
+  animation-play-state: running;
+}
+.#{$namespace}-zoom-big-fast-exit-active {
+  animation-name: #{$namespace}-zoom-big-out;
+  animation-play-state: running;
+}
+
+/*
+* 中间放大 -- 用于Popover
+*/
+.#{$namespace}-zoom-big-enter {
+  @include zoomBigOutFn(0.2s);
+}
+.#{$namespace}-zoom-big-exit {
+  @include zoomBigInOutFn(0.21s);
+}
+.#{$namespace}-zoom-big-enter-active {
+  animation-name: #{$namespace}-zoom-big-in;
+  animation-play-state: running;
+}
+.#{$namespace}-zoom-big-exit-active {
+  animation-name: #{$namespace}-zoom-big-out;
+  animation-play-state: running;
+}
+
+@keyframes #{$namespace}-zoom-big-in {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes #{$namespace}-zoom-big-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
   }
 }
+
+/*
+* 放大顶部
+*/
 .#{$namespace}-zoom-in-top-enter-active {
   animation-name: #{$namespace}-zoom-in-top-in;
   animation-duration: 0.2s;
   animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-  transform-origin: center center;
+  transform-origin: center top;
   &[data-popper-placement^="top"] {
-    transform-origin: center center;
+    transform-origin: center bottom;
+  }
+}
+.#{$namespace}-zoom-in-top-exit-active {
+  animation-name: #{$namespace}-zoom-in-top-out;
+  animation-duration: 0.2s;
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  transform-origin: center top;
+  &[data-popper-placement^="top"] {
+    transform-origin: center bottom;
   }
 }
 @keyframes #{$namespace}-zoom-in-top-in {
@@ -78,7 +154,9 @@
   transform: scale(1);
 }
 
-/** 折叠面板 */
+/*
+ * 折叠面板
+ */
 .#{$namespace}-collapse-transition-exit-active,
 .#{$namespace}-collapse-transition-enter-active {
   transition:

diff --git a/packages/components/_styles/root-common.scss b/packages/components/_styles/root-common.scss
@@ -25,6 +25,10 @@
 
   // 全局组件的高度，比如input类型的
   @include set-component-css-var("component-size", $common-component-size);
+
+  // Animation (cubic Bezier curve)--缓和
+  --#{$namespace}-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+  --#{$namespace}-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
 }
 
 // for light