diff --git a/README.md b/README.md index fec2498..6e19c60 100644 --- a/README.md +++ b/README.md @@ -26,9 +26,9 @@ class Demo extends Component { } - {({ showMe, hideMe }) => ( - } - 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 } /> } // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree - {({showMe}) => // showMe is alias for `show(modalId)` -
showMe(e) }> // additional arguments can be passed (like event) + {({show}) => // show is alias for `show(modalId)` +
show(e) }> // additional arguments can be passed (like event)
}
diff --git a/demo/src/Demo.js b/demo/src/Demo.js index 3adfa25..a083a03 100644 --- a/demo/src/Demo.js +++ b/demo/src/Demo.js @@ -51,16 +51,16 @@ class Demo extends Component { { JSON.stringify(this.state, null, '\t') } #### LAYER STATE TOGGLE - {({ showMe, hideMe, isActive }) => ( - )} + {({ show, hide, isActive }) => ( + )} #### LIGHTBOX target-oriented - {({ showMe, hideMe }) => ( - )} + {({ show }) => ( + )} #### SIMPLE MODALS - {({ showMe }) => ( - )} + {({ show }) => ( + )} @@ -116,10 +116,10 @@ class Demo extends Component { renderSimpleWindow() { return ( {({index, hideMe, showMe}) => ( + id="simple_window">{({index, hide, show}) => (
@@ -137,7 +137,7 @@ class Demo extends Component { return ( {({index, hideMe, showMe}, { + id="movable_window">{({index, hide, show}, { ...rest, pinned = false, mouseDown = false, @@ -146,8 +146,8 @@ class Demo extends Component { windowLeft = 670, windowTop = 100} = {}) => ( 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 @@ -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 }>
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
##### Layer inside Layer (inside Layer inside Layer inside Layer inside Layer inside Layer inside Layer ... inside Layer) - {({ showMe, hideMe }) => ( -