Skip to content

Commit 8e7a7f8

Browse files
lexfrllexfrl
committed
2.0.0: showMe->show, hideMe->hide
1 parent c23fdf1 commit 8e7a7f8

File tree

10 files changed

+65
-65
lines changed

10 files changed

+65
-65
lines changed

‎README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ class Demo extends Component {
2626
</FixedLayer>
2727
}</Layer>
2828

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

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

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

8383
#### `<LayerContext />`
8484

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

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

8989
### Store layers in your redux store
9090

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

139139
// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
140-
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
141-
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
140+
<LayerContext id={ modalId }> {({show}) => // show is alias for `show(modalId)`
141+
<div style={styles.iconOverlay} onClick={ (e) => show(e) }> // additional arguments can be passed (like event)
142142
<Icon type="trash" />
143143
</div> }
144144
</LayerContext>

‎demo/src/Demo.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,16 @@ class Demo extends Component {
5151
{ JSON.stringify(this.state, null, '\t') }
5252

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

5858

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

7676

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

9191
#### MOVABLE WINDOWS
92-
<LayerContext id="movable_window">{({ showMe }) => (
93-
<button onClick={ () => showMe() }>OPEN MOVABLE WINDOW</button> )}
92+
<LayerContext id="movable_window">{({ show }) => (
93+
<button onClick={ () => show() }>OPEN MOVABLE WINDOW</button> )}
9494
</LayerContext>
9595

9696
#### SIMPLE MODALS
97-
<LayerContext id="simple_window">{({ showMe }) => (
98-
<button onClick={ () => showMe() }>OPEN SIMPLE MODAL</button> )}
97+
<LayerContext id="simple_window">{({ show }) => (
98+
<button onClick={ () => show() }>OPEN SIMPLE MODAL</button> )}
9999
</LayerContext>
100100

101101
</Markdown>
@@ -116,10 +116,10 @@ class Demo extends Component {
116116
renderSimpleWindow() {
117117
return (
118118
<Layer
119-
id="simple_window">{({index, hideMe, showMe}) => (
119+
id="simple_window">{({index, hide, show}) => (
120120
<FixedLayer
121121
style={ { background: 'rgba(0,0,0,0.3)' } }
122-
onClick={ hideMe }
122+
onClick={ hide }
123123
zIndex={ index * 100 }>
124124
<Window style={{margin: 'auto'}}>
125125
<div style={styles.header}>
@@ -137,7 +137,7 @@ class Demo extends Component {
137137
return (
138138
<Layer
139139
use={[this.state.counter]} // data from the context
140-
id="movable_window">{({index, hideMe, showMe}, {
140+
id="movable_window">{({index, hide, show}, {
141141
...rest,
142142
pinned = false,
143143
mouseDown = false,
@@ -146,8 +146,8 @@ class Demo extends Component {
146146
windowLeft = 670,
147147
windowTop = 100} = {}) => (
148148
<FixedLayer
149-
onMouseDown={() => showMe({...rest, mouseDown: true})}
150-
onMouseUp={() => showMe({...rest, mouseDown: false})}
149+
onMouseDown={() => show({...rest, mouseDown: true})}
150+
onMouseUp={() => show({...rest, mouseDown: false})}
151151
onMouseMove={({ screenX, screenY}) => {
152152
const newArgs = {
153153
mouseLastPositionX: screenX, mouseLastPositionY: screenY
@@ -156,18 +156,18 @@ class Demo extends Component {
156156
newArgs.windowLeft = windowLeft + (screenX - mouseLastPositionX);
157157
newArgs.windowTop = windowTop + (screenY - mouseLastPositionY);
158158
}
159-
showMe({...rest, ...newArgs})
159+
show({...rest, ...newArgs})
160160
}}
161-
onClick={ hideMe }
161+
onClick={ hide }
162162
zIndex={ index * 100 }>
163163
<Window style={{ top: windowTop, left: windowLeft }}>
164164
<div
165165
style={styles.header}
166-
onMouseEnter={() => mouseDown || showMe({...rest, pinned: true})}
167-
onMouseLeave={() => mouseDown || showMe({...rest, pinned: false})}>
166+
onMouseEnter={() => mouseDown || show({...rest, pinned: true})}
167+
onMouseLeave={() => mouseDown || show({...rest, pinned: false})}>
168168
PIN TO MOVE
169169
<div
170-
onClick={hideMe}
170+
onClick={hide}
171171
style={{
172172
cursor:'pointer',
173173
float: 'right',
@@ -180,9 +180,9 @@ class Demo extends Component {
180180
<Markdown>
181181
##### Layer inside Layer (inside Layer inside Layer inside Layer inside Layer inside Layer inside Layer ... inside Layer)
182182

183-
<LayerContext id="lightbox">{({ showMe, hideMe }) => (
184-
<button onMouseLeave={ hideMe } onMouseMove={ ({ pageX, pageY }) => {
185-
showMe(<div style={{
183+
<LayerContext id="lightbox">{({ show, hide }) => (
184+
<button onMouseLeave={ hide } onMouseMove={ ({ pageX, pageY }) => {
185+
show(<div style={{
186186
left: pageX + 20, top: pageY, position: "absolute",
187187
padding: '10px',
188188
background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: '5px',

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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>
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.380f214e.js"></script></body></html>

‎docs/static/js/main.8ffdb4b1.js renamed to ‎docs/static/js/main.380f214e.js

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.380f214e.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.8ffdb4b1.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎lib/components.js

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)