Skip to content
This repository was archived by the owner on Apr 14, 2020. It is now read-only.

Commit b283d09

Browse files
itsdougesitsdouges
committed
feat(visibility-manager): renames baba manager to visibility manager
1 parent 7ca4347 commit b283d09

9 files changed

Lines changed: 102 additions & 99 deletions

File tree

‎packages/yubaba/src/Baba/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { getElementBoundingBox } from '../lib/dom';
1919
import defer from '../lib/defer';
2020
import noop from '../lib/noop';
2121
import * as babaStore from '../lib/babaStore';
22-
import { InjectedProps, withBabaManagerContext } from '../BabaManager';
22+
import { InjectedProps, withVisibilityManagerContext } from '../VisibilityManager';
2323

2424
export type AnimationFunc = () => Promise<void>;
2525

@@ -170,7 +170,7 @@ You're switching between controlled and uncontrolled, don't do this. Either alwa
170170
shown: true,
171171
});
172172

173-
// If a BabaManager is a parent up the tree context will be available.
173+
// If a VisibilityManager is a parent up the tree context will be available.
174174
// Notify them that we're finished getting ready.
175175
if (context) {
176176
context.onFinish({ name });
@@ -399,7 +399,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
399399
: Promise.resolve()
400400
);
401401

402-
// If a BabaManager is a parent somewhere, notify them that we're starting animating.
402+
// If a VisibilityManager is a parent somewhere, notify them that we're starting animating.
403403
if (context) {
404404
context.onStart({ name });
405405
}
@@ -430,7 +430,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
430430
shown: true,
431431
});
432432

433-
// If a BabaManager is a parent somewhere, notify them that we're finished animating.
433+
// If a VisibilityManager is a parent somewhere, notify them that we're finished animating.
434434
if (context) {
435435
context.onFinish({ name });
436436
}
@@ -496,4 +496,4 @@ If it's an image, try and have the image loaded before mounting, or set a static
496496
}
497497
}
498498

499-
export const WrappedBaba = withBabaManagerContext(Baba);
499+
export const WrappedBaba = withVisibilityManagerContext(Baba);

‎packages/yubaba/src/BabaManager/__docs__/docs.mdx‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎packages/yubaba/src/VisibilityManager/__docs__/docs.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
name: VisibilityManager
3+
route: /visibility-manager
4+
menu: Utility helpers
5+
---
6+
7+
import { Playground, PropsTable } from 'docz';
8+
import VisibilityManager from '../index';
9+
10+
# VisibilityManager
11+
12+
Used to hide contents before an animation is complete after being triggered from a child [Baba](/baba) component.
13+
If there is more than one child [Baba](/baba) you can use an optional name prop which should match the appropriate [Baba](/baba) component.
14+
15+
If it is the initial mount it will be shown **after** its child animation has finished unless you set `isInitiallyVisible`.
16+
17+
> **Tip -** See [Delay showing content until all animations have finished](/advanced-usage#delay-showing-content-until-all-animations-have-finished) for more information on how to use this component.
18+
19+
## Usage
20+
21+
```js
22+
import Baba, { VisibilityManager } from 'yubaba';
23+
24+
const ItemDetails = ({ description }) => (
25+
<VisibilityManager>
26+
{({ style }) => (
27+
<React.Fragment>
28+
<Baba name={`item-${index}`}>{props => <div {...props} />}</Baba>
29+
30+
<div style={style}>{description}</div>
31+
</React.Fragment>
32+
)}
33+
</VisibilityManager>
34+
);
35+
```
36+
37+
> **Tip -** We used `visibility` over `opacity` because it allows us to have fine grained control for hiding elements.
38+
> You can hide the container around an animating element and the animating element will still be visible for example.
39+
40+
## Props
41+
42+
<PropsTable of={VisibilityManager} />

packages/yubaba/src/BabaManager/index.tsx renamed to packages/yubaba/src/VisibilityManager/index.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { InlineStyles } from '../Collector';
33
import { ExtractProps, Omit } from '../lib/types';
44

5-
export interface BabaManangerProps extends InjectedProps {
5+
export interface VisibilityManagerProps extends InjectedProps {
66
/**
77
* Children as function which passes down style,
88
* add this to the elements you want to hide until all child animations have finished.
@@ -30,19 +30,19 @@ export interface InjectedProps {
3030
/**
3131
* Internal context, ignore this.
3232
*/
33-
context?: BabaManagerContext;
33+
context?: VisibilityManagerContext;
3434
}
3535

3636
export type Handler = (opts: { name: string }) => void;
3737

38-
export interface BabaManagerContext {
38+
export interface VisibilityManagerContext {
3939
onFinish: Handler;
4040
onStart: Handler;
4141
}
4242

43-
export const BabaContext = React.createContext<BabaManagerContext | undefined>(undefined);
43+
export const BabaContext = React.createContext<VisibilityManagerContext | undefined>(undefined);
4444

45-
export default class BabaManager extends React.Component<BabaManangerProps, State> {
45+
export default class VisibilityManager extends React.Component<VisibilityManagerProps, State> {
4646
state: State = {
4747
style: {
4848
visibility: this.props.isInitiallyVisible ? 'visible' : 'hidden',
@@ -99,19 +99,21 @@ export default class BabaManager extends React.Component<BabaManangerProps, Stat
9999
}
100100
}
101101

102-
export const withBabaManagerContext = <
102+
export const withVisibilityManagerContext = <
103103
TComponent extends React.ComponentType<InjectedProps & ExtractProps<TComponent>>
104104
>(
105105
WrappedComponent: TComponent
106106
) => {
107-
type WithBabaManagerContextProps = JSX.LibraryManagedAttributes<
107+
type WithVisibilityManagerContextProps = JSX.LibraryManagedAttributes<
108108
TComponent,
109109
ExtractProps<TComponent>
110110
>;
111111

112112
// eslint-disable-next-line react/no-multi-comp
113-
return class extends React.Component<Omit<WithBabaManagerContextProps, keyof InjectedProps>> {
114-
static displayName = `babaManagerContext(${WrappedComponent.displayName})`;
113+
return class extends React.Component<
114+
Omit<WithVisibilityManagerContextProps, keyof InjectedProps>
115+
> {
116+
static displayName = `VisibilityManagerContext(${WrappedComponent.displayName})`;
115117

116118
render() {
117119
// WrappedComponent isn't considered to be a proper element for JSX, need to understand why.
@@ -132,4 +134,4 @@ export const withBabaManagerContext = <
132134
};
133135
};
134136

135-
export const WrappedBabaManager = withBabaManagerContext(BabaManager);
137+
export const WrappedVisibilityManager = withVisibilityManagerContext(VisibilityManager);

packages/yubaba/src/BabaManager/stories.tsx renamed to packages/yubaba/src/VisibilityManager/stories.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import styled from 'styled-components';
33
import { storiesOf } from '@storybook/react';
44
import BodyClassName from 'react-body-classname';
5-
import Baba, { BabaManager, Noop } from '../../src';
5+
import Baba, { VisibilityManager, Noop } from '../../src';
66
import { Toggler } from 'yubaba-common';
77

88
const StyledBody = styled(BodyClassName)`
@@ -43,7 +43,7 @@ const TextContainer = styled.div`
4343
text-align: center;
4444
`;
4545

46-
storiesOf('yubaba/BabaManager', module)
46+
storiesOf('yubaba/VisibilityManager', module)
4747
.add('NoManager', () => (
4848
<Toggler>
4949
{({ shown, toggle }) => (
@@ -67,7 +67,7 @@ storiesOf('yubaba/BabaManager', module)
6767
This text was displayed immediately, which might not be what we want!
6868
<br />
6969
<br />
70-
Thanks to BabaManager we can hide elements until all animations have finished.
70+
Thanks to VisibilityManager we can hide elements until all animations have finished.
7171
</TextContainer>
7272

7373
<Baba name="manager-example-1" key="2">
@@ -103,12 +103,12 @@ storiesOf('yubaba/BabaManager', module)
103103
</Baba>
104104
</Container>
105105
) : (
106-
<BabaManager>
106+
<VisibilityManager>
107107
{props => (
108108
<Container {...props} color="#b2cefe">
109109
<TextContainer>
110110
This text and container were hidden until the animation completed thanks to
111-
BabaManager.
111+
VisibilityManager.
112112
</TextContainer>
113113

114114
<Baba name="manager-example-2" key="2">
@@ -122,7 +122,7 @@ storiesOf('yubaba/BabaManager', module)
122122
</Baba>
123123
</Container>
124124
)}
125-
</BabaManager>
125+
</VisibilityManager>
126126
)}
127127
</div>
128128
)}

packages/yubaba/src/BabaManager/test.tsx renamed to packages/yubaba/src/VisibilityManager/test.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
import * as React from 'react';
22
import { mount } from 'enzyme';
33
import { WrappedBaba as Baba } from '../Baba';
4-
import { WrappedBabaManager as BabaManager } from '../BabaManager';
4+
import { WrappedVisibilityManager as VisibilityManager } from '../VisibilityManager';
55
import * as utils from '../__tests__/utils';
66
import defer from '../lib/defer';
77

8-
describe('<BabaManager />', () => {
8+
describe('<VisibilityManager />', () => {
99
it('should be visible after start animation has been mounted', () => {
1010
const Animation = utils.createTestAnimation();
1111

1212
const wrapper = mount(
13-
<BabaManager>
13+
<VisibilityManager>
1414
{props => (
1515
<span {...props}>
1616
<Baba name="fff">
1717
<Animation>{({ ref, style }) => <div ref={ref} style={style} />}</Animation>
1818
</Baba>
1919
</span>
2020
)}
21-
</BabaManager>
21+
</VisibilityManager>
2222
);
2323
wrapper.update();
2424

2525
expect(wrapper.find('span').prop('style')).toEqual({ visibility: 'visible' });
2626
});
2727

2828
it('should be hidden on initial mount', () => {
29-
const wrapper = mount(<BabaManager>{props => <span {...props} />}</BabaManager>);
29+
const wrapper = mount(<VisibilityManager>{props => <span {...props} />}</VisibilityManager>);
3030
wrapper.update();
3131

3232
expect(wrapper.find('span').prop('style')).toEqual({ visibility: 'hidden' });
3333
});
3434

3535
it('should be visible on initial mount', () => {
3636
const wrapper = mount(
37-
<BabaManager isInitiallyVisible>{props => <span {...props} />}</BabaManager>
37+
<VisibilityManager isInitiallyVisible>{props => <span {...props} />}</VisibilityManager>
3838
);
3939
wrapper.update();
4040

@@ -46,15 +46,15 @@ describe('<BabaManager />', () => {
4646
const wrapper = mount(
4747
<utils.BabaUnderTest
4848
from={shown => (
49-
<BabaManager isInitiallyVisible>
49+
<VisibilityManager isInitiallyVisible>
5050
{props => (
5151
<span {...props}>
5252
<Baba name="aaa" key={`${shown}`}>
5353
<Animation>{({ ref, style }) => <div ref={ref} style={style} />}</Animation>
5454
</Baba>
5555
</span>
5656
)}
57-
</BabaManager>
57+
</VisibilityManager>
5858
)}
5959
to={null}
6060
start={false}
@@ -79,13 +79,13 @@ describe('<BabaManager />', () => {
7979
</Baba>
8080
}
8181
to={
82-
<BabaManager>
82+
<VisibilityManager>
8383
{props => (
8484
<span {...props}>
8585
<Baba name="aaa">{({ ref, style }) => <div ref={ref} style={style} />}</Baba>
8686
</span>
8787
)}
88-
</BabaManager>
88+
</VisibilityManager>
8989
}
9090
start={false}
9191
/>
@@ -110,15 +110,15 @@ describe('<BabaManager />', () => {
110110
</Baba>
111111
}
112112
to={
113-
<BabaManager>
113+
<VisibilityManager>
114114
{props => (
115115
<span {...props}>
116116
<Baba name="eee" onFinish={deferred.resolve}>
117117
{({ ref, style }) => <div ref={ref} style={style} />}
118118
</Baba>
119119
</span>
120120
)}
121-
</BabaManager>
121+
</VisibilityManager>
122122
}
123123
start={false}
124124
/>
@@ -143,21 +143,21 @@ describe('<BabaManager />', () => {
143143
</Baba>
144144
}
145145
to={
146-
<BabaManager>
146+
<VisibilityManager>
147147
{topProps => (
148148
<div>
149149
<div id="parent1" {...topProps} />
150150

151-
<BabaManager>
151+
<VisibilityManager>
152152
{innerProps => (
153153
<div id="parent2" {...innerProps}>
154154
<Baba name="eee">{({ ref, style }) => <div ref={ref} style={style} />}</Baba>
155155
</div>
156156
)}
157-
</BabaManager>
157+
</VisibilityManager>
158158
</div>
159159
)}
160-
</BabaManager>
160+
</VisibilityManager>
161161
}
162162
start={false}
163163
/>
@@ -183,23 +183,23 @@ describe('<BabaManager />', () => {
183183
</Baba>
184184
}
185185
to={
186-
<BabaManager>
186+
<VisibilityManager>
187187
{topProps => (
188188
<div>
189189
<div id="parent1" {...topProps} />
190190

191-
<BabaManager>
191+
<VisibilityManager>
192192
{innerProps => (
193193
<div id="parent2" {...innerProps}>
194194
<Baba name="eee" onFinish={deferred.resolve}>
195195
{({ ref, style }) => <div ref={ref} style={style} />}
196196
</Baba>
197197
</div>
198198
)}
199-
</BabaManager>
199+
</VisibilityManager>
200200
</div>
201201
)}
202-
</BabaManager>
202+
</VisibilityManager>
203203
}
204204
start={false}
205205
/>

0 commit comments

Comments
 (0)