From 0d3b7623e36066dafe3dc69977a2524b7360781b Mon Sep 17 00:00:00 2001 From: madou Date: Thu, 30 May 2019 22:11:44 +1000 Subject: [PATCH] fix(reshaping-container): fixes children to move with container --- .../src/__docs__/3-advanced-usage/docs.mdx | 2 +- .../ReshapingContainer/__docz__/docs.mdx | 46 --------- .../NotificationPill/images/avatar.jpg | Bin 0 -> 29914 bytes .../__docz__/NotificationPill/index.tsx | 32 +++++++ .../__docz__/NotificationPill/styled.tsx | 46 +++++++++ .../__docz__/TripeHoverMenu/index.tsx} | 90 +++++++----------- .../__docz__/TripeHoverMenu}/styled.tsx | 8 +- .../__docz__/docs.mdx | 68 ++++++++++--- .../RevealReshapingContainer/index.tsx | 33 ++++--- .../RevealReshapingContainer/stories.tsx | 1 - 10 files changed, 186 insertions(+), 140 deletions(-) delete mode 100644 packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx create mode 100644 packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/images/avatar.jpg create mode 100644 packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx create mode 100644 packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx rename packages/core/src/motions/{ReshapingContainer/__docz__/TripeHoverMenu.tsx => RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx} (54%) rename packages/core/src/motions/{ReshapingContainer/__docz__ => RevealReshapingContainer/__docz__/TripeHoverMenu}/styled.tsx (90%) diff --git a/packages/core/src/__docs__/3-advanced-usage/docs.mdx b/packages/core/src/__docs__/3-advanced-usage/docs.mdx index f552bac..09558f1 100644 --- a/packages/core/src/__docs__/3-advanced-usage/docs.mdx +++ b/packages/core/src/__docs__/3-advanced-usage/docs.mdx @@ -29,7 +29,7 @@ import * as Styled from './styled'; import { WrappedMotion as Motion } from '../../Motion'; import { WrappedVisibilityManager as VisibilityManager } from '../../VisibilityManager'; import CircleExpand from '../../motions/CircleExpand'; -import TripeHoverMenu from '../../motions/ReshapingContainer/__docz__/TripeHoverMenu'; +import TripeHoverMenu from '../../motions/RevealReshapingContainer/__docz__/TripeHoverMenu'; import FocalRevealMove from '../../motions/FocalRevealMove'; import FocalConcealMove from '../../motions/FocalConcealMove'; import FocalTarget from '../../FocalTarget'; diff --git a/packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx b/packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx deleted file mode 100644 index 4b3763a..0000000 --- a/packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -name: ReshapingContainer -route: /reshaping-container -menu: Composite experiences ---- - -import { Playground, Props } from 'docz'; -import ReshapingContainer from '../index'; -import TripeHoverMenu from './TripeHoverMenu'; - -# ReshapingContainer - -A composite experience that is made up of the [Move](/move) motion and some extra markup for the floating background. -It has been made to be able to efficiently have the parent container resize around its children after state changes. - -This is useful for anything where you want the background to nicely reshape itself around its children, -for example a hover menu! - -> **Tip -** When we say _efficiently_ we mean it 🙌! _Only_ `transform` is utilised. - -## Usage - - - - - -```js -import { ReshapingContainer } from '@element-motion/core'; - -({ children }) => ( - - {motion => {children}} - -); -``` - -## Props - - diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/images/avatar.jpg b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/images/avatar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..eb17bd6fba0e523a388342dab812dbc2d83dbd4d GIT binary patch literal 29914 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 E+0xu`!~g&Q literal 0 HcmV?d00001 diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx new file mode 100644 index 0000000..bd34b5b --- /dev/null +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import * as Common from '@element-motion/dev'; +import * as Styled from './styled'; +import ReshapingContainer from '../../../RevealReshapingContainer'; + +const avatar = require('./images/avatar.jpg'); + +const NotificationPill = () => ( + + val + 1}> + {toggler => ( + + {motion => ( + toggler.set(toggler.shown + 1)}> + + {Styled.messages(toggler.shown)} + + )} + + )} + + +); + +export default NotificationPill; diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx new file mode 100644 index 0000000..cf280ce --- /dev/null +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx @@ -0,0 +1,46 @@ +import styled from 'styled-components'; + +const avatarSize = '18px'; + +export const MessageNotification = styled.div` + display: flex; + align-items: center; + font-size: 14px; + font-weight: 600; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; +`; + +export const AlignCenter = styled.div` + text-align: center; +`; + +export const NotificationText = styled.span` + width: calc(100% - ${avatarSize}); + padding-right: 12px; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const Avatar = styled.img` + border-radius: 50%; + height: ${avatarSize}; + width: ${avatarSize}; + flex-shrink: 0; + margin-right: 6px; + object-fit: cover; + background-color: #ccc; +`; + +export const messages = (index: number = 0) => { + const msgs = [ + 'seriously help me i cant get past genchrio', + 'sekiro is so hard meh', + 'hello???', + 'how do i cheese it????', + ]; + return msgs[index % msgs.length]; +}; diff --git a/packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx similarity index 54% rename from packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx rename to packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx index c157fd1..8e6d2db 100644 --- a/packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; import * as Common from '@element-motion/dev'; // eslint-disable-line import/no-extraneous-dependencies import { Transition } from 'react-transition-group'; // eslint-disable-line import/no-extraneous-dependencies -import ReshapingContainer from '../index'; +import RevealReshapingContainer from '../../index'; import * as Styled from './styled'; const menuPosition = [200, 100, 20]; -const innerTimeout = { enter: 200, exit: 300 }; const TripeHoverMenu = () => ( ( right: menuPosition[toggler.shown.shown], }} > - ( > {motion => ( - - {tstate => ( - - - Pricing - Find out how much tripe you can buy for $100 - - - Billing - Need an invoice? Look in here - - - Connect - Find other tripe enthusiasts? Check here first - - - )} - + {toggler.shown.shown === '0' && ( + + + Pricing + Find out how much tripe you can buy for $100 + + + Billing + Need an invoice? Look in here + + + Connect + Find other tripe enthusiasts? Check here first + + + )} - - {tstate => ( - - - Recipes - Find the best way to cook it - - - )} - + {toggler.shown.shown === '1' && ( + + + Recipes + Find the best way to cook it + + + )} - - {tstate => ( - - About Tripe - Customers - Jobs - - )} - + {toggler.shown.shown === '2' && ( + + About Tripe + Customers + Jobs + + )} )} - + )} diff --git a/packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx similarity index 90% rename from packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx rename to packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx index 32cb644..387c507 100644 --- a/packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx @@ -12,13 +12,7 @@ const opac = { exiting: 0, }; -const pos = { - exiting: 'absolute', -}; - -export const InnerMenu = styled.div<{ state: string }>` - opacity: ${props => opac[props.state]}; - position: ${props => pos[props.state]}; +export const InnerMenu = styled.div` top: 0; `; diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx b/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx index 0e7af07..d2a65cc 100644 --- a/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx @@ -1,27 +1,67 @@ --- -name: RevealReshapingContainer -route: /reveal-reshaping-container +name: ReshapingContainer +route: /reshaping-container menu: Composite experiences --- import { Playground, Props } from 'docz'; import * as Common from '@element-motion/dev'; -import RevealReshapingContainer from '../index'; +import TripeMenu from './TripeHoverMenu'; +import NotificationPill from './NotificationPill'; +import ReshapingContainer from '../index'; import * as Styled from './styled'; -# RevealReshapingContainer +# ReshapingContainer -A composite experience that is made up of [Reveal](/reveal) and [ReshapingContainer](/reshaping-container). -It will do everything the reshaping container does plus keeping the children within the container when resizing. - -This is useful for any experience that does not change its position, -only dimensions. -For example a modal dialog! +A composite experience that is made up of [Move](/move) and [Reveal](/reveal). ## Usage + + + + ```js -import { RevealReshapingContainer } from '@element-motion/core'; +import { ReshapingContainer } from '@element-motion/core'; + +({ message, avatar }) => ( + + {motion => ( + + + {message} + + )} + +); +``` + + + + + +```js +import { ReshapingContainer } from '@element-motion/core'; + +({ children }) => ( + + {motion => {children}} + +); ``` @@ -30,7 +70,7 @@ import { RevealReshapingContainer } from '@element-motion/core'; - )} - + )} @@ -76,7 +116,7 @@ import { RevealReshapingContainer } from '@element-motion/core'; ## Props - + ## Caveats diff --git a/packages/core/src/motions/RevealReshapingContainer/index.tsx b/packages/core/src/motions/RevealReshapingContainer/index.tsx index 0a3b5f2..8130ab2 100644 --- a/packages/core/src/motions/RevealReshapingContainer/index.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/index.tsx @@ -3,6 +3,7 @@ import { WrappedMotion as Motion } from '../../Motion'; import { CollectorChildrenAsFunction } from '../../Collector'; import ReshapingContainer, { ReshapingContainerProps } from '../ReshapingContainer'; import Reveal from '../Reveal'; +import Move from '../Move'; interface RevealReshapingContainerProps extends ReshapingContainerProps { /** @@ -69,21 +70,23 @@ export default class RevealReshapingContainer extends React.PureComponent< {reshaping => ( - - {motion => - children({ - ...motion, - style: { - ...motion.style, - ...reshaping.style, - }, - }) - } - + + + {motion => + children({ + ...motion, + style: { + ...motion.style, + ...reshaping.style, + }, + }) + } + + )} diff --git a/packages/core/src/motions/RevealReshapingContainer/stories.tsx b/packages/core/src/motions/RevealReshapingContainer/stories.tsx index 645848c..2929b89 100644 --- a/packages/core/src/motions/RevealReshapingContainer/stories.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/stories.tsx @@ -24,7 +24,6 @@ storiesOf('@element-motion/core/RevealReshapingContainer', module) {toggler => (