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 = ReactPropTypes propTypes: # this component accepts children name: Tstring title: Tstring onCloseClick: TfuncisRequired showCornerClose: Tbool show: TboolisRequired
Popover
propTypes: # this component accepts children title: Tstring name: Tstring onPopoverClose: Tfunc positionAlgorithm: Tfunc # could be customized baseArea: TobjectisRequired # top, right, down, left showClose: TboolisRequired show: TboolisRequired
-
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: TboolisRequired name: Tstring
Notice: click content to close overlay, not the black area.
Reader Modal
T = ReactPropTypes propTypes: # this component accepts children name: Tstring title: Tstring onCloseClick: TfuncisRequired showCornerClose: Tbool show: TboolisRequired
Child structure
div
.header (fixed at top)
.content (scrollable)
.footer (fixed at bottom)
File Modal
T = ReactPropTypes propTypes: # this component accepts children name: Tstring title: Tstring onCloseClick: TfuncisRequired showCornerClose: Tbool show: TboolisRequired
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; var PageApp = React; var demo = document; React;
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