Skip to content

Commit 8850d4c

Browse files
streamichstreamich
committed
docs: improve docs, add Context reference
1 parent 89c1503 commit 8850d4c

File tree

4 files changed

+229
-69
lines changed

4 files changed

+229
-69
lines changed

‎README.md‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ const MyComponent = mock();
4141
- [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
4242
- [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
4343
- [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
44+
- [Context](./docs/Context.md)
45+
- [`<Provider>`](./docs/Provider.md#provider), [`<Consumer>`](./docs/Provider.md#consumer), [`withContext()`](./docs/Provider.md#withcontext), and `@withContext`
46+
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
47+
- `<CssVars>`
48+
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
49+
- [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate-or-t), [`<T>`](./docs/translate.md#translate-or-t), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
4450
- [Sensors](./docs/Sensors.md)
4551
- [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
4652
- [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
@@ -59,20 +65,17 @@ const MyComponent = mock();
5965
- [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
6066
- [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
6167
- [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
68+
- `HoverSensor`, `withHover()`, and `@withHover`
69+
- `ActiveSensor`, `withActive()`, and `@withActive`
70+
- `FocusSensor`, `withFocus()`, and `@withFocus`
6271
- Generators
6372
- [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
6473
- [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
6574
- [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
6675
- [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), [`<Mailto>`](./docs/Mailto.md), and `<Tel>`
67-
- [`<FullScreen>`](./docs/FullScreen.md), `<Overlay>`
68-
- Promises
69-
- [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
70-
- Context
71-
- [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
72-
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
73-
- `<CssVars>`
74-
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
75-
- [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate), [`<T>`](./docs/translate.md#translate), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
76+
- [`<FullScreen>`](./docs/FullScreen.md)
77+
- UI
78+
- `<Overlay>`
7679
- [CSS resets](./docs/CSS-resets.md)
7780
- [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
7881
- [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
@@ -83,6 +86,7 @@ const MyComponent = mock();
8386
- [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
8487
- [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
8588
- Other
89+
- [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
8690
- [`getDisplayName()`](./docs/getDisplayName.md)
8791
- `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
8892
- `<Locales>`

‎docs/Provider.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Context
2+
3+
Provides a generic way to safely use React's context. Re-renders *consumer*
4+
components when *provider* changes value.
5+
6+
## Example
7+
8+
```jsx
9+
import {Provider, Context} from 'libreact/lib/context';
10+
11+
<Provider name="theme" value={{color: 'red'}}>
12+
<Consumer name="theme">{(theme) => {
13+
return <div>Color is: {theme.color}</div>;
14+
}}</Consumer>
15+
</Provider>
16+
```
17+
18+
## `<Provider>`
19+
20+
Uses React's context functionality to provide data to child nodes.
21+
22+
### Props
23+
24+
- `name` - context channel name
25+
- `value` - value to be broadcasted in this channel.
26+
27+
## `<Consumer>`
28+
29+
Retrieves context value from specified channel.
30+
31+
### Props
32+
33+
- `name` - provider channel to subscribe to.
34+
35+
36+
## `withContext()`
37+
38+
HOC that ensures your component will receive context value it subscribed to.
39+
40+
```ts
41+
withContext: (Comp: React.Component, name?: string) => React.Component;
42+
```
43+
44+
, where
45+
46+
- `Comp` - your React component.
47+
- `name` - context channel to subscribe to.
48+
49+
Returns a *connected* component that will have a prop named `name` with value
50+
fetched from context. This component has a special prop `contextName` that
51+
your can use to overwrite the default context channel name.
52+
53+
### Example
54+
55+
```jsx
56+
const ColorIs = ({theme}) => <div>Color is: {theme.color}</div>;
57+
const ColorIsConnected = withContext(ColorIs, 'theme');
58+
59+
<Provider name="theme" value={{color: 'tomato'}}>
60+
<ColorIsConnected />
61+
</Provider>
62+
```

‎docs/context.md‎

Lines changed: 8 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,10 @@
11
# Context
22

3-
Provides a generic way to safely use React's context. Re-renders *consumer*
4-
components when *provider* changes value.
5-
6-
## Example
7-
8-
```jsx
9-
import {Provider, Context} from 'libreact/lib/context';
10-
11-
<Provider name="theme" value={{color: 'red'}}>
12-
<Consumer name="theme">{(theme) => {
13-
return <div>Color is: {theme.color}</div>;
14-
}}</Consumer>
15-
</Provider>
16-
```
17-
18-
## `<Provider>`
19-
20-
Uses React's context functionality to provide data to child nodes.
21-
22-
### Props
23-
24-
- `name` - context channel name
25-
- `value` - value to be broadcasted in this channel.
26-
27-
## `<Consumer>`
28-
29-
Retrieves context value from specified channel.
30-
31-
### Props
32-
33-
- `name` - provider channel to subscribe to.
34-
35-
36-
## `withContext()`
37-
38-
HOC that ensures your component will receive context value it subscribed to.
39-
40-
```ts
41-
withContext: (Comp: React.Component, name?: string) => React.Component;
42-
```
43-
44-
, where
45-
46-
- `Comp` - your React component.
47-
- `name` - context channel to subscribe to.
48-
49-
Returns a *connected* component that will have a prop named `name` with value
50-
fetched from context. This component has a special prop `contextName` that
51-
your can use to overwrite the default context channel name.
52-
53-
### Example
54-
55-
```jsx
56-
const ColorIs = ({theme}) => <div>Color is: {theme.color}</div>;
57-
const ColorIsConnected = withContext(ColorIs, 'theme');
58-
59-
<Provider name="theme" value={{color: 'tomato'}}>
60-
<ColorIsConnected />
61-
</Provider>
62-
```
3+
`libreact` provides a range of component's that use React's context API and components that allow you
4+
to easily use React's context.
5+
6+
- [`<Provider>`](./Provider.md) and [`<Consumer>`](./Provider.md#consumer) &mdash; utilities to work with React's context.
7+
- [`<Theme>`](./theme.md#theme) and [`<Themed>`](./theme.md#themed) &mdash; theme provider and consumer.
8+
- `<CssVars>` &mdash; provides ability to use CSS variables today.
9+
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), and `<Go>` &mdash; best router for React.
10+
- [`<Translations>`](./docs/translate.md#translations) and [`<Translate>`](./docs/translate.md#translate-or-t) &mdash; translation provider and consumer.

‎src/Overlay/index.ts‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
3+
interface ICompOverlayBgProps {
4+
opacity?: number,
5+
bg?: string,
6+
}
7+
8+
export class CompOverlayBg extends Comp<ICompOverlayBgProps, {}, any> {
9+
10+
tpl(h, p, s, m, T, css) {
11+
return h('div', {
12+
style: {
13+
position: 'fixed',
14+
width: '100%',
15+
height: '100%',
16+
top: 0,
17+
left: 0,
18+
zIndex: 1e4,
19+
}
20+
},
21+
h('div', {
22+
style: {
23+
position: 'fixed',
24+
width: '100%',
25+
height: '100%',
26+
top: 0,
27+
left: 0,
28+
backgroundColor: p.bg || '#000',
29+
opacity: p.opacity || 0.8,
30+
// boxShadow: 'inset 0 0 200px #000',
31+
},
32+
}, '.'),
33+
h('div', {
34+
style: {
35+
position: 'fixed',
36+
width: '100%',
37+
height: '100%',
38+
top: 0,
39+
left: 0,
40+
display: 'flex',
41+
justifyContent: 'space-around',
42+
alignItems: 'center',
43+
}
44+
},
45+
p.children
46+
)
47+
);
48+
}
49+
}
50+
51+
52+
interface ICompOverlayProps {
53+
title?: string,
54+
component: any,
55+
opacity?: number,
56+
padding?: number|string,
57+
onClose?: () => void,
58+
onBgClick?: () => void,
59+
}
60+
export class CompOverlay extends Comp<ICompOverlayProps, {}, any> {
61+
62+
onmount() {
63+
document.body.addEventListener('keydown', this.onDocKeydown);
64+
65+
// Make window non-scrollable.
66+
// let st = document.body.style;
67+
// st.overflow = 'hidden';
68+
// st.position = 'absolute';
69+
}
70+
71+
onunmount() {
72+
document.body.removeEventListener('keydown', this.onDocKeydown);
73+
74+
// Make window scroll again.
75+
// let st = document.body.style;
76+
// st.overflow = 'hidden';
77+
// st.position = 'static';
78+
}
79+
80+
onDocKeydown = e => {
81+
if(e.key === 'Escape') {
82+
let {onClose} = this.props;
83+
if(onClose) onClose();
84+
}
85+
};
86+
87+
tpl(h, p, s, m, T, css) {
88+
var padding = typeof p.padding === 'undefined' ? 40 : p.padding;
89+
90+
return h(CompOverlayBg, p,
91+
h('div', {
92+
style: {
93+
position: 'relative',
94+
// flex: '1 1 auto',
95+
backgroundColor: '#fff',
96+
borderRadius: css.theme.bdRad,
97+
boxShadow: '0 0 200px rgba(0,0,0,0.5), 0 3px 5px rgba(0,0,0,0.6)',
98+
overflow: 'auto',
99+
maxWidth: '100%',
100+
maxHeight: '100%',
101+
},
102+
// onScroll: e => {
103+
// e.preventDefault();
104+
// }
105+
},
106+
h('div', {
107+
style: {
108+
padding,
109+
},
110+
},
111+
p.component
112+
),
113+
h('div', {
114+
className: 'unselectable',
115+
style: {
116+
width: '85%',
117+
position: 'absolute',
118+
fontSize: css.scale(0.9) + 'px',
119+
fontWeight: 300,
120+
top: 20,
121+
left: 20,
122+
color: css.theme.color.grey,
123+
}
124+
}, p.title),
125+
h('div', {style: {position:'absolute', top:8, right:8}},
126+
h(CompBtnClose, {onClick: p.onClose, style: {background:'none'}}),
127+
)
128+
// h('a', {
129+
// style: {
130+
// cursor: 'pointer',
131+
// display: 'block',
132+
// position: 'absolute',
133+
// top: 0,
134+
// right: 0,
135+
// width: 16,
136+
// height: 16,
137+
// padding: 18,
138+
// },
139+
// onClick: p.onClose,
140+
// },
141+
// h(CompIcon16Close)
142+
// )
143+
)
144+
);
145+
}
146+
}

0 commit comments

Comments
 (0)