Merge branch 'feat-transition' into develop

Pivot-Studio · Aug 6, 2023 · 938475d · 938475d
2 parents c4b79f8 + 4bcc9a8
commit 938475d
Show file tree

Hide file tree

Showing 17 changed files with 583 additions and 15 deletions.
diff --git a/packages/demo/src/components/Button/index.mdx b/packages/demo/src/components/Button/index.mdx
@@ -31,13 +31,15 @@ import Props from './props.mdx';
 
 <div className="title">自定义颜色</div>
 
-<Button
-  style={{
-    '--button-background-color': 'rgb(233, 233, 15)'
-  }}
->
-  button
-</Button>
+<CodeBlock line={'5-7'}>
+  <Button
+    style={{
+      '--button-background-color': 'rgb(233, 233, 15)',
+    }}
+  >
+    button
+  </Button>
+</CodeBlock>
 
 <div className="title">自定义点击事件</div>
 <CodeBlock line={'5-7'}>

diff --git a/packages/demo/src/components/Popover/demo/Trigger.tsx b/packages/demo/src/components/Popover/demo/Trigger.tsx
@@ -1,11 +1,13 @@
 import { Popover } from 'pivot-design';
 import React from 'react';
 import './index.scss';
+import { prefix } from '../../constant';
+
 
 const App: React.FC = () => {
   return (
     <>
-      <div className="center">
+      <div className={`${prefix}-center`}>
         <Popover placement="top" triggerType="hover" content={<div>prompt text</div>}>
           <div className="tl">hover</div>
         </Popover>

diff --git a/packages/demo/src/components/Transition/demo/Base.tsx b/packages/demo/src/components/Transition/demo/Base.tsx
@@ -0,0 +1,82 @@
+import { Transition } from 'pivot-design';
+import React, { useState } from 'react';
+
+import './index.scss';
+
+const App: React.FC = () => {
+  const [inProp, setInProp] = useState(true); // 用来控制子组件的挂载、卸载
+
+  const onEnter = () => {
+    console.log('onEnter');
+  };
+  const onEntering = () => {
+    console.log('onEntering');
+  };
+  const onExit = () => {
+    console.log('onExit');
+  };
+  const onExited = () => {
+    console.log('onExited');
+  };
+  const onEntered = () => {
+    console.log('onEntered');
+  };
+  const onExiting = () => {
+    console.log('onExiting');
+  };
+
+  const duration = 1000;
+  const defaultStyle = {
+    transition: `opacity ${duration}ms`,
+    opacity: 0,
+  };
+
+  const transitionStyles = {
+    entering: { opacity: 1 },
+    entered: { opacity: 1 },
+    exiting: { opacity: 0 },
+    exited: { opacity: 0 },
+  };
+
+  return (
+    <div style={{ color: 'black' }}>
+      <Transition
+        in={inProp}
+        timeout={{ enter: 1000, exit: 1000, appear: 1000 }}
+        appear={true}
+        onEnter={onEnter}
+        onEntering={onEntering}
+        onExit={onExit}
+        onEntered={onEntered}
+        onExited={onExited}
+        onExiting={onExiting}
+        enterAnimation={true}
+        exitAnimation={true}
+        unmountOnExit={false}
+        mountOnEnter={false}
+      >
+        {(state: any) => {
+          return (
+            <div
+              style={{
+                ...defaultStyle,
+                ...transitionStyles[state],
+              }}
+              className="show-box"
+            >
+              <p>若影若现的标题</p>
+            </div>
+          );
+        }}
+      </Transition>
+      <button
+        onClick={() => {
+          setInProp((inProp) => !inProp);
+        }}
+      >
+        {inProp ? '隐藏' : '展示'}
+      </button>
+    </div>
+  );
+};
+export default App;
diff --git a/packages/demo/src/components/Transition/demo/Unmount.tsx b/packages/demo/src/components/Transition/demo/Unmount.tsx
@@ -0,0 +1,81 @@
+import { Transition } from 'pivot-design';
+import React, { useState } from 'react';
+
+import './index.scss';
+
+const App: React.FC = () => {
+  const [inProp, setInProp] = useState(false); // 用来控制子组件的挂载、卸载
+
+  const onEnter = () => {
+    console.log('onEnter');
+  };
+  const onEntering = () => {
+    console.log('onEntering');
+  };
+  const onExit = () => {
+    console.log('onExit');
+  };
+  const onExited = () => {
+    console.log('onExited');
+  };
+  const onEntered = () => {
+    console.log('onEntered');
+  };
+  const onExiting = () => {
+    console.log('onExiting');
+  };
+  const duration = 1000;
+  const defaultStyle = {
+    transition: `opacity ${duration}ms`,
+    opacity: 0,
+  };
+
+  const transitionStyles = {
+    entering: { opacity: 1 },
+    entered: { opacity: 1 },
+    exiting: { opacity: 0 },
+    exited: { opacity: 0 },
+  };
+
+  return (
+    <div style={{ color: 'black' }}>
+      <Transition
+        in={inProp}
+        timeout={1500}
+        appear={true}
+        enterAnimation={true}
+        exitAnimation={true}
+        unmountOnExit={true}
+        mountOnEnter={true}
+        onEnter={onEnter}
+        onEntering={onEntering}
+        onExit={onExit}
+        onEntered={onEntered}
+        onExited={onExited}
+        onExiting={onExiting}
+      >
+        {(state: any) => {
+          return (
+            <div
+              style={{
+                ...defaultStyle,
+                ...transitionStyles[state],
+              }}
+              className="show-box"
+            >
+              <p>若影若现的标题</p>
+            </div>
+          );
+        }}
+      </Transition>
+      <button
+        onClick={() => {
+          setInProp((inProp) => !inProp);
+        }}
+      >
+        {inProp ? '隐藏' : '展示'}
+      </button>
+    </div>
+  );
+};
+export default App;
diff --git a/packages/demo/src/components/Transition/demo/index.scss b/packages/demo/src/components/Transition/demo/index.scss
@@ -0,0 +1,13 @@
+@import '../../common.scss';
+
+button {
+  margin: 20px;
+  padding: 3px 15px;
+  background-color: #fff;
+  border: 1px solid black;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.show-box {
+  height: 20px;
+}
diff --git a/packages/demo/src/components/Transition/index.mdx b/packages/demo/src/components/Transition/index.mdx
@@ -0,0 +1,11 @@
+# Popover
+
+<div className="title">默认挂载的元素</div>
+<CodeBlock line={'5-7'}>
+  <Base />
+</CodeBlock>
+
+<div className="title">消失时自动卸载</div>
+<CodeBlock line={'5-7'}>
+  <Unmount />
+</CodeBlock>
diff --git a/packages/demo/src/components/_CodeBlock/index.scss b/packages/demo/src/components/_CodeBlock/index.scss
@@ -20,6 +20,7 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
+    background-color: #ffffff;
     > :not(.PIVOT-draggable-item) {
       margin: 0 24px;
     }

diff --git a/packages/demo/src/pages/component/index.tsx b/packages/demo/src/pages/component/index.tsx
@@ -1,19 +1,21 @@
 import { useState } from 'react';
-import { Button, Icon, Input, Skeleton, Card, Popover } from 'pivot-design';
+import { Button, Icon, Input, Skeleton, Card, Popover, Transition } from 'pivot-design';
 // import router from '@/routers';
 import ButtonMdx from '../../components/Button/index.mdx';
 import IconMdx from '../../components/Icon/index.mdx';
 import InputMdx from '../../components/Input/index.mdx';
 import CardMdx from '../../components/Card/index.mdx';
 import SkeletonMdx from '../../components/Skeleton/index.mdx';
 import PopoverMdx from '../../components/Popover/index.mdx';
+import TransitionMdx from '../../components/Transition/index.mdx';
+
 import './index.scss';
 
 import DraggableMdx from '../../components/Draggable/index.mdx';
 import CodeBlock from '@/components/_CodeBlock/codeBlock';
 
 function Index() {
-  const [select, setSelect] = useState('Draggable');
+  const [select, setSelect] = useState('Transition');
   const demoSelect = () => {
     return (
       <div className="demo-container">
@@ -38,6 +40,9 @@ function Index() {
         <div className={`demo-item ${select === 'Popover' ? 'active' : ''}`} onClick={() => setSelect('Popover')}>
           Popover 气泡
         </div>
+        <div className={`demo-item ${select === 'Transition' ? 'active' : ''}`} onClick={() => setSelect('Transition')}>
+          元素动画
+        </div>
       </div>
     );
   };
@@ -58,6 +63,7 @@ function Index() {
             }}
           />
         ) : null}
+        {select === 'Transition' ? <TransitionMdx components={{ Transition, CodeBlock }} /> : null}
         {select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
       </div>
       <div className="demo-component-catalogue" style={{ width: '200px' }}>

diff --git a/packages/demo/src/pages/home/home.tsx b/packages/demo/src/pages/home/home.tsx
@@ -155,13 +155,13 @@ const Home: React.FC = () => {
 
       <div className="big-title">
         {'Pivot'.split('').map((letter, index) => (
-          <span id={`title_letter_${index}`} className={`title_letter_${index}`}>
+          <span key={`title_letter_${index}`} id={`title_letter_${index}`} className={`title_letter_${index}`}>
             {letter}
           </span>
         ))}
         <span id="title_5">&nbsp;</span>
         {'Design'.split('').map((letter, index) => (
-          <span id={`title_letter_${index + 6}`} className={`title_letter_${index + 6}`}>
+          <span key={`title_letter_${index}`} id={`title_letter_${index + 6}`} className={`title_letter_${index + 6}`}>
             {letter}
           </span>
         ))}

diff --git a/packages/demo/src/pages/home/index.tsx b/packages/demo/src/pages/home/index.tsx
@@ -36,7 +36,7 @@ const Home: React.FC = () => {
         <div className="navigation-wrapper">
           <div onClick={toggleTheme}>切换主题</div>
           {navigatorList.map((nav) => (
-            <Link to={nav.path} className="navigator">
+            <Link to={nav.path} className="navigator" key={nav.text}>
               {nav.text}
             </Link>
           ))}

diff --git a/packages/design/components/Card/index.scss b/packages/design/components/Card/index.scss
@@ -68,7 +68,7 @@ $cardmax: calc(var(--card-maxLength, 100%) * 20px);
         font-size: 11px;
         line-height: 17px;
         text-align: left;
-        color: #cbcbcb;
+        color: #333333;
         vertical-align: center;
       }
     }
@@ -102,6 +102,7 @@ $cardmax: calc(var(--card-maxLength, 100%) * 20px);
         max-height: $cardmin;
         text-align: justify;
         position: relative;
+        color: #222222;
         &::before {
           content: '';
           float: right;

diff --git a/packages/design/components/Popover/index.scss b/packages/design/components/Popover/index.scss
@@ -1,6 +1,7 @@
 @import '../constants.scss';
 .#{$prefix}-trigger {
   cursor: pointer;
+  color: #000000;
 }
 
 .#{$prefix}-popover {

diff --git a/packages/design/components/Transition/index.scss b/packages/design/components/Transition/index.scss
@@ -0,0 +1,30 @@
+@import '../constants.scss';
+.#{$prefix}-trigger {
+  cursor: pointer;
+  color: #000000;
+}
+
+.#{$prefix}-popover {
+  position: absolute;
+  max-width: 200px;
+  z-index: 2;
+  color: white;
+  background-color: rgba($color: #000000, $alpha: 0.9);
+  padding: 9px 10px;
+  border-radius: 6px;
+  transition: opacity 0.3s;
+  font-size: 14px;
+
+  ::before {
+    content: '';
+    position: absolute;
+    left: var(--arrowX);
+    top: var(--arrowY);
+    display: var(--arrowShow);
+    width: 10px;
+    height: 10px;
+    transform: rotate(45deg);
+    z-index: -1;
+    background-color: black;
+  }
+}