react-lite-layered
v0.2.3
Published
Dropdown menu from Talk by teambition
Downloads
23
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 React0.14.x
, while0.0.x
was using React0.13
.
Properties
This module contains 6 layered components. There are some common properties:
show
(bool.isRequired
) controls visibilityname
(string
, defaults todefault
), CSS hook"is-for-#{name}"
Modal
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
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 fromElement.getBoundingClientRect
positionAlgorithm
(func
, optional) if given, takes inbaseArea
and returns CSS styles
Overlay
propTypes:
# this component accepts children
show: T.bool.isRequired
name: T.string
Notice: click content to close overlay, not the black area.
Reader Modal
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
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
npm i --save react-lite-layered
Read src/demo/main.jsx(compiles with Babel) for details:
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
npm i
You need a static file server for the HTML files. Personally I suggest using Nginx.
Develop:
gulp html # regenerate index.html
webpack-dev-server --hot # enable live-reloading
or simply
npm run dev
Build (Pack and optimize js, reivision js and add entry in index.html
):
gulp build
License
MIT