Feat/overlay

README.md

@@ -8,7 +8,7 @@ React standard library — must-have toolbox for any React project.
 
   - React [router](https://mailonline.github.io/libreact/en/routing.html), [sensors](https://mailonline.github.io/libreact/en/Sensors.html), [FaCC](https://mailonline.github.io/libreact/en/Introduction.html#facc)s, [render props](https://mailonline.github.io/libreact/en/Introduction.html#render-props), [HOC](https://mailonline.github.io/libreact/en/Introduction.html#hoc)s, [context](https://mailonline.github.io/libreact/en/Context.html) providers, [dummies](https://mailonline.github.io/libreact/en/Dummies.html), and [other goodies](https://mailonline.github.io/libreact/en/).
   - *Isomorphic* - all components work in browser and on server (and some in `react-native`).
-  - See [demos](https://mailonline.github.io/libreact/demos/), [docs](https://mailonline.github.io/libreact/en/), and NPM [package](https://www.npmjs.com/package/libreact/).
+  - See [__demos__](https://mailonline.github.io/libreact/demos/), [__docs__](https://mailonline.github.io/libreact/en/), and NPM [__package__](https://www.npmjs.com/package/libreact/).
 
 
 ## Installation
@@ -45,8 +45,10 @@ const MyComponent = mock();
         - [`<List>`](./docs/en/List.md), [`withList()`](./docs/en/List.md#withlist-hoc), and [`@withList`](./docs/en/List.md#withlist-decorator)
         - [`<Map>`](./docs/en/Map.md), [`withMap()`](./docs/en/Map.md#withmap-hoc), and [`@withMap`](./docs/en/Map.md#withmap-decorator)
   - [Sensors](./docs/en/Sensors.md)
+     - [`<ActiveSensor>`](./docs/en/ActiveSensor.md), [`withActive()`](./docs/en/ActiveSensor.md#withactive-hoc), and [`@withActive`](./docs/en/ActiveSensor.md#withactive-decorator)
      - [`<BatterySensor>`](./docs/en/BatterySensor.md), [`withBattery()`](./docs/en/BatterySensor.md#withbattery), and [`@withBattery`](./docs/en/BatterySensor.md#withbattery-1)
      - [`<ExitSensor>`](./docs/en/ExitSensor.md)
+     - [`<FocusSensor>`](./docs/en/FocusSensor.md), [`withFocus()`](./docs/en/FocusSensor.md#withfocus-hoc), and [`@withFocus`](./docs/en/FocusSensor.md#withfocus-decorator)
      - [`<GeoLocationSensor>`](./docs/en/GeoLocationSensor.md), [`withGeoLocation()`](./docs/en/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/en/GeoLocationSensor.md#withgeolocation-decorator)
      - [`<HoverSensor>`](./docs/en/HoverSensor.md), [`withHover()`](./docs/en/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/en/HoverSensor.md#withhover-decorator)
      - [`<MediaDeviceSensor>`](./docs/en/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/en/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/en/MediaDeviceSensor.md#withmediadevices-1)
@@ -64,11 +66,9 @@ const MyComponent = mock();
         - [`<ViewportScrollSensor>`](./docs/en/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/en/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/en/WindowScrollSensor.md), [`withWindowScroll()`](./docs/en/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/en/WindowScrollSensor.md#withwindowscroll-decorator)
      - [`<WindowSizeSensor>`](./docs/en/WindowSizeSensor.md), [`withWindowSize()`](./docs/en/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/en/WindowSizeSensor.md#withwindowsize-decorator)
-     - `ActiveSensor`, `withActive()`, and `@withActive`
-     - `FocusSensor`, `withFocus()`, and `@withFocus`
   - [Context](./docs/en/Context.md)
      - [`<Provider>`](./docs/en/Provider.md#provider), [`<Consumer>`](./docs/en/Provider.md#consumer), [`withContext()`](./docs/en/Provider.md#withcontext-hoc), and [`@withContext`](./docs/en/Provider.md#withcontext-decorator)
-     - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme), and `@withTheme`
+     - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme-hoc), and [`@withTheme`](./docs/en/theme.md#withtheme-decorator)
      - `<CssVars>`
      - [`<Router>`](./docs/en/routing.md#router), [`<Route>`](./docs/en/routing.md#route), [`withRoute()`](./docs/en/routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./docs/en/translate.md#translations), [`<Translate>`](./docs/en/translate.md#translate-or-t), [`<T>`](./docs/en/translate.md#translate-or-t), [`withT()`](./docs/en/translate.md#witht-hoc), and [`@withT`](./docs/en/translate.md#witht-decorator)
@@ -77,14 +77,14 @@ const MyComponent = mock();
      - [`<LocalStorage>`](./docs/en/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md), `<Prompt>`, `<Confirm>`
      - [`go()`](./docs/en/routing.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/en/Sms.md), [`<Mailto>`](./docs/en/Mailto.md), and `<Tel>`
-     - [`<FullScreen>`](./docs/en/FullScreen.md)
   - [Boundaries](./docs/en/Boundaries.md)
      - [`<BrowserOnly>`](./docs/en/BrowserOnly.md), [`<ServerOnly>`](./docs/en/ServerOnly.md), and [`<ElectronOnly>`](./docs/en/ElectronOnly.md)
-     - [`<ErrorBoundary>`](./docs/en/ErrorBoundary.md) and `withErrorBoundary()`
+     - [`<ErrorBoundary>`](./docs/en/ErrorBoundary.md) and [`withErrorBoundary()`](./docs/en/ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
   - [UI](./docs/en/UI.md)
+     - [`<Portal>`](./docs/en/Portal.md) and [`<Overlay>`](./docs/en/Overlay.md)
+     - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
-     - `<Overlay>`
   - [CSS resets](./docs/en/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/en/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/en/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/en/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/en/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/en/reset/CssResetMinimalistic3.md)

docs/en/ActiveSensor.md

@@ -0,0 +1,67 @@
+# `<ActiveSensor>`
+
+Render prop that tracks elements active status. Attaches to the root element, or provides a binding, if `bond` prop specified.
+
+## Example
+
+Use it as FaCC, attach to root element
+
+```jsx
+import {ActiveSensor} from 'libreact/lib/ActiveSensor';
+
+<ActiveSensor>{({isActive}) =>
+  <div>{isActive ? 'active' : 'not active'}</div>
+}</ActiveSensor>
+```
+
+Use `bond` to bind to any element
+
+```jsx
+import {ActiveSensor} from 'libreact/lib/ActiveSensor';
+
+<ActiveSensor bond>{({bond, isActive}) =>
+  <div>
+    <div {...bond}>{isActive ? 'active' : 'not active'}</div>
+  </div>
+}</ActiveSensor>
+```
+
+
+## Props
+
+Prop signature
+
+```ts
+interface IActiveSensorProps {
+  bond?: boolean | string;
+}
+```
+
+, where
+
+  - `bond` - optional, string, specifies the bond name. If boolean and set to `true`, bond with name `"bond"` is created.
+
+
+## `withActive()` HOC
+
+HOC that merges `active` prop into enhanced component's props. With HOC interface you always have to use bond.
+
+```jsx
+import {withActive} from 'libreact/lib/ActiveSensor';
+
+const MyCompWithHover = withActive(MyComp);
+```
+
+
+## `@withActive` decorator
+
+React stateful component decorator that adds `active` prop.
+
+```js
+import {withActive} from 'libreact/lib/ActiveSensor';
+
+@withActive
+class MyComp extends Component {
+
+}
+```

docs/en/ErrorBoundary.md

@@ -37,3 +37,22 @@ interface IErrorBoundaryState {
 
   - `renderError` — renderer called if error happened in error boundary's children.
   - `onError` — event called every time error detected.
+
+
+## `withErrorBoundary` HOC
+
+Wraps your component into an error boundary.
+
+```jsx
+import {withErrorBoundary} from 'libreact/lib/ErrorBoundary';
+
+const SafeComponent = withErrorBoundary(UnsafeComponent, {
+  renderError: () => <div>Error happened!</div>
+});
+```
+
+Signature
+
+```ts
+withErrorBoundary(Comp, boundaryProps: IErrorBoundaryProps)
+```

docs/en/FocusSensor.md

@@ -0,0 +1,67 @@
+# `<FocusSensor>`
+
+Render prop that tracks elements focus status. Attaches to the root element, or provides a binding, if `bond` prop specified.
+
+## Example
+
+Use it as FaCC, attach to root element
+
+```jsx
+import {FocusSensor} from 'libreact/lib/FocusSensor';
+
+<FocusSensor>{({isFocused}) =>
+  <div>{isFocused ? 'focused' : 'not focused'}</div>
+}</FocusSensor>
+```
+
+Use `bond` to bind to any element
+
+```jsx
+import {FocusSensor} from 'libreact/lib/FocusSensor';
+
+<FocusSensor bond>{({bond, isFocused}) =>
+  <div>
+    <div {...bond}>{isFocused ? 'focused' : 'not focused'}</div>
+  </div>
+}</FocusSensor>
+```
+
+
+## Props
+
+Prop signature
+
+```ts
+interface IFocusSensorProps {
+  bond?: boolean | string;
+}
+```
+
+, where
+
+  - `bond` - optional, string, specifies the bond name. If boolean and set to `true`, bond with name `"bond"` is created.
+
+
+## `withFocus()` HOC
+
+HOC that merges `focus` prop into enhanced component's props. With HOC interface you always have to use bond.
+
+```jsx
+import {withFocus} from 'libreact/lib/FocusSensor';
+
+const MyCompWithHover = withFocus(MyComp);
+```
+
+
+## `@withFocus` decorator
+
+React stateful component decorator that adds `focus` prop.
+
+```js
+import {withFocus} from 'libreact/lib/FocusSensor';
+
+@withFocus
+class MyComp extends Component {
+
+}
+```

docs/en/HoverSensor.md

@@ -10,7 +10,7 @@ Use it as FaCC, attach to root element
 import {HoverSensor} from 'libreact/lib/HoverSensor';
 
 <HoverSensor>{({isHover}) =>
-  <div>{isHover ? 'hovered' : 'no hovered'}</div>
+  <div>{isHover ? 'hovered' : 'not hovered'}</div>
 }</HoverSensor>
 ```
 
@@ -21,7 +21,7 @@ import {HoverSensor} from 'libreact/lib/HoverSensor';
 
 <HoverSensor bond>{({bond, isHover}) =>
   <div>
-    <div {...bond}>{isHover ? 'hovered' : 'no hovered'}</div>
+    <div {...bond}>{isHover ? 'hovered' : 'not hovered'}</div>
   </div>
 }</HoverSensor>
 ```

docs/en/Inversion.md

@@ -15,8 +15,8 @@ This effectively allows you to have
 
 in JSX tree without having to write stateful React components.
 
-  - [`invert()`](./invert.md) and [`<Inverted>`](./invert.md#inverted) - inverts DOM element `ref`.
-  - [`<State>`](./State.md) - inverts `.state` and `.setState()` method.
+  - [`invert()`](./invert.md) and [`<Inverted>`](./invert.md#inverted) &mdash; inverts DOM element `ref`.
+  - [`<State>`](./State.md) &mdash; inverts `.state` and `.setState()` method.
      - [`<Toggle>`](./Toggle.md), [`<Flipflop>`](./Flipflop.md), [`<Value>`](./Value.md), [`<Counter>`](./Counter.md), [`<List>`](./List.md), and [`<Map>`](./Map.md)
 
 

docs/en/Map.md

@@ -7,7 +7,7 @@ Gives you a map as a state.
 ```jsx
 import {Map} from 'libreact/lib/Map';
 
-<Map init={{c: 'd'}}>{({value, set, push, filter, sort}) =>
+<Map init={{c: 'd'}}>{({get, set, remove}) =>
   <div>
     <div>a: {get('a')}</div>
     <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(get())}</pre>

docs/en/Overlay.md

@@ -0,0 +1,20 @@
+# `<Overlay>`
+
+Creates overlay over whole page.
+
+
+## Usage
+
+```jsx
+import {Overlay} from 'libreact/lib/Overlay';
+
+<Overlay>
+  This renderer over whole page.
+</Overlay>
+```
+
+
+## Props
+
+- `color` &mdash; optional, string, overlay color, defaults to `rgba(0, 0, 0, 0.5)`.
+- `time` &mdash; optional, number, entrance opacity animation length in milliseconds, defaults to `300`.

docs/en/Portal.md

@@ -0,0 +1,21 @@
+# `<Portal>`
+
+Renders its children in React portal using [`ReactDOM.createPortal()`](https://reactjs.org/docs/portals.html).
+If target element is not provided, creates a new `<div>` element and appends it to `document.body`.
+
+
+## Usage
+
+```jsx
+import {Portal} from 'libreact/lib/Portal';
+
+<Portal>
+  This is rendered in document.body
+</Portal>
+```
+
+
+## Props
+
+  - `el` - DOM element, optional, where to render children.
+  - `onElement` - callback, optional, called with automatically created DOM element if `el` not provided.

docs/en/README.md

@@ -14,8 +14,10 @@
         - [`<List>`](./List.md), [`withList()`](./List.md#withlist-hoc), and [`@withList`](./List.md#withlist-decorator)
         - [`<Map>`](./Map.md), [`withMap()`](./Map.md#withmap-hoc), and [`@withMap`](./Map.md#withmap-decorator)
   - [Sensors](./Sensors.md)
+     - [`<ActiveSensor>`](./ActiveSensor.md), [`withActive()`](./ActiveSensor.md#withactive-hoc), and [`@withActive`](./ActiveSensor.md#withactive-decorator)
      - [`<BatterySensor>`](./BatterySensor.md), [`withBattery()`](./BatterySensor.md#withbattery), and [`@withBattery`](./BatterySensor.md#withbattery-1)
      - [`<ExitSensor>`](./ExitSensor.md)
+     - [`<FocusSensor>`](./FocusSensor.md), [`withFocus()`](./FocusSensor.md#withfocus-hoc), and [`@withFocus`](./FocusSensor.md#withfocus-decorator)
      - [`<GeoLocationSensor>`](./GeoLocationSensor.md), [`withGeoLocation()`](./GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./GeoLocationSensor.md#withgeolocation-decorator)
      - [`<HoverSensor>`](./HoverSensor.md), [`withHover()`](./HoverSensor.md#withhover-hoc), and [`@withHover`](./HoverSensor.md#withhover-decorator)
      - [`<MediaDeviceSensor>`](./MediaDeviceSensor.md), [`withMediaDevices()`](./MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./MediaDeviceSensor.md#withmediadevices-1)
@@ -33,11 +35,9 @@
         - [`<ViewportScrollSensor>`](./ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./WindowScrollSensor.md), [`withWindowScroll()`](./WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./WindowScrollSensor.md#withwindowscroll-decorator)
      - [`<WindowSizeSensor>`](./WindowSizeSensor.md), [`withWindowSize()`](./WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./WindowSizeSensor.md#withwindowsize-decorator)
-     - `ActiveSensor`, `withActive()`, and `@withActive`
-     - `FocusSensor`, `withFocus()`, and `@withFocus`
   - [Context](./Context.md)
      - [`<Provider>`](./Provider.md#provider), [`<Consumer>`](./Provider.md#consumer), [`withContext()`](./Provider.md#withcontext-hoc), and [`@withContext`](./Provider.md#withcontext-decorator)
-     - [`<Theme>`](./theme.md#theme), [`<Themed>`](./theme.md#themed), [`withTheme()`](./theme.md#withtheme), and `@withTheme`
+     - [`<Theme>`](./theme.md#theme), [`<Themed>`](./theme.md#themed), [`withTheme()`](./theme.md#withtheme-hoc), and [`@withTheme`](./theme.md#withtheme-decorator)
      - `<CssVars>`
      - [`<Router>`](./routing.md#router), [`<Route>`](./routing.md#route), [`withRoute()`](./routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./translate.md#translations), [`<Translate>`](./translate.md#translate-or-t), [`<T>`](./translate.md#translate-or-t), [`withT()`](./translate.md#witht-hoc), and [`@withT`](./translate.md#witht-decorator)
@@ -46,12 +46,13 @@
      - [`<LocalStorage>`](./LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - [`<Speak>`](./Speak.md), [`<Vibrate>`](./Vibrate.md), [`<Alert>`](./Alert.md), `<Prompt>`, `<Confirm>`
      - [`go()`](./routing.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./Sms.md), [`<Mailto>`](./Mailto.md), and `<Tel>`
-     - [`<FullScreen>`](./FullScreen.md)
   - [Boundaries](./Boundaries.md)
      - [`<BrowserOnly>`](./BrowserOnly.md), [`<ServerOnly>`](./ServerOnly.md), and [`<ElectronOnly>`](./ElectronOnly.md)
-     - [`<ErrorBoundary>`](./ErrorBoundary.md) and `withErrorBoundary()`
+     - [`<ErrorBoundary>`](./ErrorBoundary.md) and [`withErrorBoundary()`](./ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
   - [UI](./UI.md)
+     - [`<Portal>`](./Portal.md) and [`<Overlay>`](./Overlay.md)
+     - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
      - `<Overlay>`
   - [CSS resets](./CSS-resets.md)
@@ -66,6 +67,6 @@
   - Other
      - [`<Resolve>`](./Resolve.md), `<Fetch>`
      - [`getDisplayName()`](./getDisplayName.md)
-     - `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
+     - [`<Portal>`](./Portal.md)
      - `<Locales>`
      - `<Draggable>`, `<Droppable>`, `<Parallax>`, `<Pin>`

docs/en/SUMMARY.md

@@ -23,8 +23,10 @@
     * [List](List.md)
     * [Map](Map.md)
 * [Sensors](Sensors.md)
+  * [ActiveSensor](ActiveSensor.md)
   * [BatterySensor](BatterySensor.md)
   * [ExitSensor](ExitSensor.md)
+  * [FocusSensor](FocusSensor.md)
   * [GeoLocationSensor](GeoLocationSensor.md)
   * [HoverSensor](HoverSensor.md)
   * [MediaDeviceSensor](MediaDeviceSensor.md)
@@ -55,12 +57,14 @@
   * [Alert](Alert.md)
   * [Sms](Sms.md)
   * [Mailto](Mailto.md)
-  * [FullScreen](FullScreen.md)
 * [Boundaries](Boundaries.md)
   * [BrowserOnly](BrowserOnly.md)
   * [ServerOnly](ServerOnly.md)
   * [ElectronOnly](ElectronOnly.md)
 * [UI](UI.md)
+  * [Portal](Portal.md)
+  * [Overlay](Overlay.md)
+  * [FullScreen](FullScreen.md)
   * [Slider](Slider.md)
 * [CSS resets](CSS-resets.md)
   * [CssResetEricMeyer](./reset/CssResetEricMeyer.md)

docs/en/loadable.md

@@ -1,12 +1,15 @@
 # `loadable()`
 
-Create a [mock](./mock.md) component whose implementation is loaded using a promise when `.load()` method is called.
+Creates a [mock()](./mock.md) component whose implementation is loaded using `.load()` method is called,
+instead of explicitly setting it by `.implement()`.
 
 ## Example
 
 Create a loadable React component and immediately load it.
 
 ```js
+import {loadable} from 'libreact/lib/loadable';
+
 const loader = () => import('./path/to/image.svg')
   .then((module) => module.MySVGComponent);
 

docs/en/mock.md

@@ -33,7 +33,7 @@ const MySvg = mock({
 mock: (params?: IMockParams) => IMockComponent;
 
 interface IMockParams {
-  loading?: React.ReactElement;
+  loading?: React.ReactElement | React.ComponentClass | React.StatelessComponent;
 }
 
 interface IMockComponent extends React.ComponentClass {