Skip to content

Commit

Permalink
2.0.0: showMe->show, hideMe->hide
Browse files Browse the repository at this point in the history
  • Loading branch information
@lexfrl
lexfrl committed Dec 6, 2016
1 parent c23fdf1 commit 8e7a7f8
Show file tree
Hide file tree
Showing 10 changed files with 65 additions and 65 deletions.
22 changes: 11 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ class Demo extends Component {
</FixedLayer>
}</Layer>

<LayerContext id="lightbox2">{({ showMe, hideMe }) => (
<button onMouseLeave={ hideMe } onMouseMove={ ({ pageX, pageY }) => {
showMe(
<LayerContext id="lightbox2">{({ show, hide }) => (
<button onMouseLeave={ hide } onMouseMove={ ({ pageX, pageY }) => {
show(
<div style={{
left: pageX, top: pageY + 20, position: "absolute",
padding: '10px',
Expand Down Expand Up @@ -78,13 +78,13 @@ This is mount point for `Layers`.

`use: array` - array with context variables. Useful if you want to re-render the Layer if parent variables (closure) are changed

`children: callback({ isActive, showMe: callback(args), showOnlyMe, hideMe, hideAll }, ...args): ReactElement` - will be rendered into
`children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }, ...args): ReactElement` - will be rendered into

#### `<LayerContext />`

`id: string` - a Layer identificator which LayerContext corresponds to

`children: callback({ isActive, showMe: callback(args), showOnlyMe, hideMe, hideAll }): ReactElement` - will be mounted (rendered) directly to its parent
`children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }): ReactElement` - will be mounted (rendered) directly to its parent

### Store layers in your redux store

Expand Down Expand Up @@ -123,22 +123,22 @@ return (
<Cell {...props}>
// the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
<Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
hideMe, // alias for `hide(modalId)`
hide, // alias for `hide(modalId)`
index } // useful to know to set zIndex, for example
, e) => // access to the arguments (click event data in this example)
<Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
<Modal onClick={ hide } zIndex={(index + 1) * 1000}>
<ConfirmationDialog
title={ 'Delete' }
message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
confirmButton={ <Button type="primary">DELETE</Button> }
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
close={ hideMe } />
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hide) } // hide after confirmation
close={ hide } />
</Modal> }
</Layer>

// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
<LayerContext id={ modalId }> {({show}) => // show is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => show(e) }> // additional arguments can be passed (like event)
<Icon type="trash" />
</div> }
</LayerContext>
Expand Down
50 changes: 25 additions & 25 deletions demo/src/Demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,16 @@ class Demo extends Component {
{ JSON.stringify(this.state, null, '\t') }

#### LAYER STATE TOGGLE
<LayerContext id="layer_state_infobox">{({ showMe, hideMe, isActive }) => (
<button onClick={ () => isActive ? hideMe() : showMe() }>{ isActive ? 'HIDE LAYER STATE' : 'SHOW LAYER STATE' }</button> )}
<LayerContext id="layer_state_infobox">{({ show, hide, isActive }) => (
<button onClick={ () => isActive ? hide() : show() }>{ isActive ? 'HIDE LAYER STATE' : 'SHOW LAYER STATE' }</button> )}
</LayerContext>


#### LIGHTBOX target-oriented
<LayerContext id="lightbox">{({ showMe, hideMe }) => (
<button onMouseLeave={ hideMe } onMouseEnter={ ({ nativeEvent: { relatedTarget } }) => {
<LayerContext id="lightbox">{({ show, hide }) => (
<button onMouseLeave={ hide } onMouseEnter={ ({ nativeEvent: { relatedTarget } }) => {
const { left, top, width } = relatedTarget.getClientRects()[0];
showMe(
show(
<div style={{
left: left + width + 20, top, position: "absolute",
padding: '10px',
Expand All @@ -75,9 +75,9 @@ class Demo extends Component {


#### LIGHTBOX pointer-oriented v2
<LayerContext id="lightbox">{({ showMe, hideMe }) => (
<button onMouseLeave={ hideMe } onMouseMove={ ({ pageX, pageY }) => {
showMe(
<LayerContext id="lightbox">{({ show, hide }) => (
<button onMouseLeave={ hide } onMouseMove={ ({ pageX, pageY }) => {
show(
<div style={{
left: pageX + 20, top: pageY, position: "absolute",
padding: '10px',
Expand All @@ -89,13 +89,13 @@ class Demo extends Component {
</LayerContext>

#### MOVABLE WINDOWS
<LayerContext id="movable_window">{({ showMe }) => (
<button onClick={ () => showMe() }>OPEN MOVABLE WINDOW</button> )}
<LayerContext id="movable_window">{({ show }) => (
<button onClick={ () => show() }>OPEN MOVABLE WINDOW</button> )}
</LayerContext>

#### SIMPLE MODALS
<LayerContext id="simple_window">{({ showMe }) => (
<button onClick={ () => showMe() }>OPEN SIMPLE MODAL</button> )}
<LayerContext id="simple_window">{({ show }) => (
<button onClick={ () => show() }>OPEN SIMPLE MODAL</button> )}
</LayerContext>

</Markdown>
Expand All @@ -116,10 +116,10 @@ class Demo extends Component {
renderSimpleWindow() {
return (
<Layer
id="simple_window">{({index, hideMe, showMe}) => (
id="simple_window">{({index, hide, show}) => (
<FixedLayer
style={ { background: 'rgba(0,0,0,0.3)' } }
onClick={ hideMe }
onClick={ hide }
zIndex={ index * 100 }>
<Window style={{margin: 'auto'}}>
<div style={styles.header}>
Expand All @@ -137,7 +137,7 @@ class Demo extends Component {
return (
<Layer
use={[this.state.counter]} // data from the context
id="movable_window">{({index, hideMe, showMe}, {
id="movable_window">{({index, hide, show}, {
...rest,
pinned = false,
mouseDown = false,
Expand All @@ -146,8 +146,8 @@ class Demo extends Component {
windowLeft = 670,
windowTop = 100} = {}) => (
<FixedLayer
onMouseDown={() => showMe({...rest, mouseDown: true})}
onMouseUp={() => showMe({...rest, mouseDown: false})}
onMouseDown={() => show({...rest, mouseDown: true})}
onMouseUp={() => show({...rest, mouseDown: false})}
onMouseMove={({ screenX, screenY}) => {
const newArgs = {
mouseLastPositionX: screenX, mouseLastPositionY: screenY
Expand All @@ -156,18 +156,18 @@ class Demo extends Component {
newArgs.windowLeft = windowLeft + (screenX - mouseLastPositionX);
newArgs.windowTop = windowTop + (screenY - mouseLastPositionY);
}
showMe({...rest, ...newArgs})
show({...rest, ...newArgs})
}}
onClick={ hideMe }
onClick={ hide }
zIndex={ index * 100 }>
<Window style={{ top: windowTop, left: windowLeft }}>
<div
style={styles.header}
onMouseEnter={() => mouseDown || showMe({...rest, pinned: true})}
onMouseLeave={() => mouseDown || showMe({...rest, pinned: false})}>
onMouseEnter={() => mouseDown || show({...rest, pinned: true})}
onMouseLeave={() => mouseDown || show({...rest, pinned: false})}>
PIN TO MOVE
<div
onClick={hideMe}
onClick={hide}
style={{
cursor:'pointer',
float: 'right',
Expand All @@ -180,9 +180,9 @@ class Demo extends Component {
<Markdown>
##### Layer inside Layer (inside Layer inside Layer inside Layer inside Layer inside Layer inside Layer ... inside Layer)

<LayerContext id="lightbox">{({ showMe, hideMe }) => (
<button onMouseLeave={ hideMe } onMouseMove={ ({ pageX, pageY }) => {
showMe(<div style={{
<LayerContext id="lightbox">{({ show, hide }) => (
<button onMouseLeave={ hide } onMouseMove={ ({ pageX, pageY }) => {
show(<div style={{
left: pageX + 20, top: pageY, position: "absolute",
padding: '10px',
background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: '5px',
Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/dracula.css"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="static/css/main.1f1a83d3.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="static/js/main.8ffdb4b1.js"></script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/dracula.css"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="static/css/main.1f1a83d3.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="static/js/main.380f214e.js"></script></body></html>
14 changes: 7 additions & 7 deletions docs/static/js/main.8ffdb4b1.js → docs/static/js/main.380f214e.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/static/js/main.380f214e.js.map
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/static/js/main.8ffdb4b1.js.map
View file

This file was deleted.

22 changes: 11 additions & 11 deletions lib/components.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 8e7a7f8

Please sign in to comment.