# react-lite-layered

> Dropdown menu from Talk by teambition

Latest version **0.2.3** (published 2016-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-lite-layered
pnpm add react-lite-layered
yarn add react-lite-layered
bun add react-lite-layered
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2016-02-01 |
| First published | 2015-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Teambition jiyinyiyong |
| Maintainers | bjmin, boshen, irinakk, jiyinyiyong, sunebear, vagusxl |
| Keywords | react-component, dropdown, modal, dialog, popover |

## Links

- npm: https://www.npmjs.com/package/react-lite-layered
- Repository: https://github.com/teambition/react-lite-layered
- Issues: https://github.com/teambition/react-lite-layered/issues
- npm.io page: https://npm.io/package/react-lite-layered

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^0.14.7
- [bowser](https://npm.io/package/bowser.md) ^0.7.2
- [keycode](https://npm.io/package/keycode.md) ^2.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.7
- [classnames](https://npm.io/package/classnames.md) ^2.2.3
- [volubile-ui](https://npm.io/package/volubile-ui.md) ^0.1.2
- [react-addons-transition-group](https://npm.io/package/react-addons-transition-group.md) ^0.14.7

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.2.3 (latest) — 2016-02-01
- 0.2.2 — 2016-02-01
- 0.2.1 — 2016-02-01
- 0.1.2 — 2016-02-01
- 0.1.1 — 2016-01-29
- 0.1.0 — 2016-01-29
- 0.1.0-beta3 — 2015-12-16
- 0.1.0-beta2 — 2015-12-15
- 0.1.0-beta — 2015-12-15
- 0.0.10 — 2015-08-07
- 0.0.9 — 2015-08-06
- 0.0.8 — 2015-08-05
- 0.0.7 — 2015-07-22
- 0.0.6 — 2015-07-20
- 0.0.5 — 2015-07-13
- … 3 more at https://npm.io/package/react-lite-layered/versions

## README

React Lite Dialog, Modals, Popover, Overlay
----

Dialog, Modals, Popover, Overlay components from Talk by Teambition.

Demo http://ui.talk.ai/react-lite-layered/

Inspired by http://stackoverflow.com/a/26789089/883571

> Notice, `0.1.x` is using React `0.14.x`, while `0.0.x` was using React `0.13`.

### Properties

This module contains 6 layered components. There are some **common properties**:

* `show`(`bool.isRequired`) controls visibility
* `name`(`string`, defaults to `default`), CSS hook `"is-for-#{name}"`

##### Modal

```coffee
T = React.PropTypes

propTypes:
  # this component accepts children
  name:             T.string
  title:            T.string
  onCloseClick:     T.func.isRequired
  showCornerClose:  T.bool
  show:             T.bool.isRequired
```

##### Popover

```coffee
propTypes:
  # this component accepts children
  title:              T.string
  name:               T.string
  onPopoverClose:     T.func
  positionAlgorithm:  T.func # could be customized
  baseArea:           T.object.isRequired # top, right, down, left
  showClose:          T.bool.isRequired
  show:               T.bool.isRequired
```

* `baseArea`(`object.isRequired`) positions get from `Element.getBoundingClientRect`

* `positionAlgorithm`(`func`, optional) if given, takes in `baseArea` and returns CSS styles


##### Overlay

```coffee
propTypes:
  # this component accepts children
  show: T.bool.isRequired
  name: T.string
```

> Notice: click content to close overlay, not the black area.

##### Reader Modal

```coffee
T = React.PropTypes

propTypes:
  # this component accepts children
  name:             T.string
  title:            T.string
  onCloseClick:     T.func.isRequired
  showCornerClose:  T.bool
  show:             T.bool.isRequired
```
> Child structure
```
div
  .header (fixed at top)
  .content (scrollable)
  .footer (fixed at bottom)
```

##### File Modal

```coffee
T = React.PropTypes

propTypes:
  # this component accepts children
  name:             T.string
  title:            T.string
  onCloseClick:     T.func.isRequired
  showCornerClose:  T.bool
  show:             T.bool.isRequired
```

##### Transition

Transition component with timeout.
Read more at: https://github.com/facebook/react/issues/1326

### Supposition

These modules contains bussiness logics of Teambition.
I will suggest copy code and make create you own.

And the `layered` mixin is tricky. I hope it improved in the future.

### Usage

```bash
npm i --save react-lite-layered
```

Read [src/demo/main.jsx](main)(compiles with Babel) for details:

[main]: https://github.com/teambition/react-lite-layered/blob/master/src/demo/main.jsx

```jsx
import {default as React} from 'react';

import {Popover, Modal, Overlay} from 'react-lite-layered';

import './modal.css';
import './popover.css';
import './overlay.css';
import './fade.css';
import './demo.css';

var App = React.createClass({
  displayName: 'page-app',

  getInitialState: function () {
    return {
      showModal: false,
      showPopover: false,
      showOverlay: false
    };
  },

  componentDidMount: function() {
    this._areaEl = this.refs.area
  },

  getTriggerArea: function() {
    if (this._areaEl) {
      return this._areaEl.getBoundingClientRect()
    } else {
      return {}
    }
  },

  onModalShow: function() {
    this.setState({showModal: true})
  },

  onModalHide: function() {
    this.setState({showModal: false})
  },

  onPopoverToggle: function(event){
    event.stopPropagation()
    this.setState({showPopover: !this.state.showPopover})
  },

  onPopoverClose: function() {
    this.setState({showPopover: false})
  },

  onOverlayToggle: function() {
    this.setState({showOverlay: !this.state.showOverlay})
  },

  onOverlayClose: function() {
    this.setState({showOverlay: false})
  },

  renderModal: function() {
    return <Modal
      name="page-app" title="demo of Modal"
      onCloseClick={this.onModalHide} showClose={true} show={this.state.showModal}>
      <div>{"Content of Modal, style this for yor self."}</div>
    </Modal>
  },

  renderPopover: function() {
    return <Popover
      onPopoverClose={this.onPopoverClose}
      baseArea={this.getTriggerArea()}
      showClose={true}
      title="title is optional"
      show={this.state.showPopover}>
      <div>Some content of popover</div>
    </Popover>
  },

  renderOverlay: function() {
    return <Overlay name="page-app" show={this.state.showOverlay}>
      <div className="content" onClick={this.onOverlayClose}>{"Content in Overlay"}</div>
    </Overlay>
  },

  render: function() {
    return <div className="page-app">
        <button onClick={this.onModalShow}>Show Modal</button>
        <button ref="area" onClick={this.onPopoverToggle}>Show Popover</button>
        <button onClick={this.onOverlayToggle}>Show Overlay</button>
        {this.renderModal()}
        {this.renderPopover()}
        {this.renderOverlay()}
    </div>
  }
});

var PageApp = React.createFactory(App);

var demo = document.querySelector('.demo');

React.render(PageApp(), demo);
```

### Develop

```text
npm i
```

You need a static file server for the HTML files. Personally I suggest using Nginx.

Develop:

```bash
gulp html # regenerate index.html
webpack-dev-server --hot # enable live-reloading
```

or simply
```bash
npm run dev
```

Build (Pack and optimize js, reivision js and add entry in `index.html`):

```bash
gulp build
```

### License

MIT

---
_Source: https://npm.io/package/react-lite-layered · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._