Skip to content

Commit 829ebc1

Browse files
DenkSchuldtGH Pages Bot
DenkSchuldt
and
GH Pages Bot
authored
Fixing draggable on mobile (#9)
Co-authored-by: GH Pages Bot <hello@ghbot.com>
1 parent e39f884 commit 829ebc1

File tree

5 files changed

+140
-135
lines changed

5 files changed

+140
-135
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
66
The date format used is DD/MM/YYYY.
77

88

9+
## [1.0.4] - 30/05/2021
10+
### Fixed
11+
* Fixing draggable on mobile
12+
913
## [1.0.3] - 04/04/2021
1014
### Fixed
1115
* Removing overriding styles from body

‎examples/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"homepage": "https://denkschuldt.github.io/react-dialog",
1717
"dependencies": {
18-
"@denkschuldt/react-dialog": "^1.0.3",
18+
"@denkschuldt/react-dialog": "^1.0.4",
1919
"@testing-library/jest-dom": "^5.11.4",
2020
"@testing-library/react": "^11.1.0",
2121
"@testing-library/user-event": "^12.1.10",

‎examples/src/App.js

+132-132
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,138 @@ function App() {
6969
</i>
7070
</code>
7171
</article>
72+
<article>
73+
<h1>Props</h1>
74+
<div className='app-body-table'>
75+
<table>
76+
<thead>
77+
<tr>
78+
<th>Name</th>
79+
<th>Type</th>
80+
<th>Required</th>
81+
<th>Description</th>
82+
<th>Default</th>
83+
</tr>
84+
</thead>
85+
<tbody>
86+
<tr>
87+
<td>width</td>
88+
<td>Number</td>
89+
<td></td>
90+
<td>Dialog width</td>
91+
<td></td>
92+
</tr>
93+
<tr>
94+
<td>height</td>
95+
<td>Number</td>
96+
<td></td>
97+
<td>Dialog height</td>
98+
<td></td>
99+
</tr>
100+
<tr>
101+
<td>title</td>
102+
<td>String</td>
103+
<td></td>
104+
<td>Dialog title</td>
105+
<td></td>
106+
</tr>
107+
<tr>
108+
<td>draggable</td>
109+
<td>Boolean</td>
110+
<td></td>
111+
<td>Allows dialog drag</td>
112+
<td>true</td>
113+
</tr>
114+
<tr>
115+
<td>className</td>
116+
<td>String</td>
117+
<td></td>
118+
<td>Component class to override styles</td>
119+
<td></td>
120+
</tr>
121+
<tr>
122+
<td>slideIn</td>
123+
<td>String</td>
124+
<td></td>
125+
<td>Initial animation: top, bottom, left, right</td>
126+
<td></td>
127+
</tr>
128+
<tr>
129+
<td>cancelableOutside</td>
130+
<td>Boolean</td>
131+
<td></td>
132+
<td>Whether the dialogs closes by clicking outside or not</td>
133+
<td>false</td>
134+
</tr>
135+
<tr>
136+
<td>closeOnEscPress</td>
137+
<td>Boolean</td>
138+
<td></td>
139+
<td>Whether the dialogs closes by pressing escape</td>
140+
<td>false</td>
141+
</tr>
142+
<tr>
143+
<td>hideCloseButton</td>
144+
<td>Boolean</td>
145+
<td></td>
146+
<td>Hides the close button</td>
147+
<td>false</td>
148+
</tr>
149+
<tr>
150+
<td>onCloseClick</td>
151+
<td>function</td>
152+
<td style={{ textAlign: 'center' }}>
153+
<p>&#9989;</p>
154+
</td>
155+
<td>Close button click function</td>
156+
<td></td>
157+
</tr>
158+
<tr>
159+
<td>cancelText</td>
160+
<td>String</td>
161+
<td></td>
162+
<td>Negative button text</td>
163+
<td>'CANCEL'</td>
164+
</tr>
165+
<tr>
166+
<td>onCancelClick</td>
167+
<td>function</td>
168+
<td></td>
169+
<td>Negative button click function</td>
170+
<td></td>
171+
</tr>
172+
<tr>
173+
<td>cancelDisabled</td>
174+
<td>Boolean</td>
175+
<td></td>
176+
<td>Negative button disabled prop</td>
177+
<td>false</td>
178+
</tr>
179+
<tr>
180+
<td>confirmText</td>
181+
<td>String</td>
182+
<td></td>
183+
<td>Positive button text</td>
184+
<td>'OK'</td>
185+
</tr>
186+
<tr>
187+
<td>onConfirmClick</td>
188+
<td>function</td>
189+
<td></td>
190+
<td>Positive button click function</td>
191+
<td></td>
192+
</tr>
193+
<tr>
194+
<td>confirmDisabled</td>
195+
<td>Boolean</td>
196+
<td></td>
197+
<td>Positive button disabled prop</td>
198+
<td>false</td>
199+
</tr>
200+
</tbody>
201+
</table>
202+
</div>
203+
</article>
72204
<article>
73205
<h1>Usage</h1>
74206
<h2>
@@ -331,138 +463,6 @@ function App() {
331463
<i className="fas fa-external-link-square-alt"></i>
332464
</a>
333465
</article>
334-
<article>
335-
<h1>Props</h1>
336-
<div className='app-body-table'>
337-
<table>
338-
<thead>
339-
<tr>
340-
<th>Name</th>
341-
<th>Type</th>
342-
<th>Required</th>
343-
<th>Description</th>
344-
<th>Default</th>
345-
</tr>
346-
</thead>
347-
<tbody>
348-
<tr>
349-
<td>width</td>
350-
<td>Number</td>
351-
<td></td>
352-
<td>Dialog width</td>
353-
<td></td>
354-
</tr>
355-
<tr>
356-
<td>height</td>
357-
<td>Number</td>
358-
<td></td>
359-
<td>Dialog height</td>
360-
<td></td>
361-
</tr>
362-
<tr>
363-
<td>title</td>
364-
<td>String</td>
365-
<td></td>
366-
<td>Dialog title</td>
367-
<td></td>
368-
</tr>
369-
<tr>
370-
<td>draggable</td>
371-
<td>Boolean</td>
372-
<td></td>
373-
<td>Allows dialog drag</td>
374-
<td>true</td>
375-
</tr>
376-
<tr>
377-
<td>className</td>
378-
<td>String</td>
379-
<td></td>
380-
<td>Component class to override styles</td>
381-
<td></td>
382-
</tr>
383-
<tr>
384-
<td>slideIn</td>
385-
<td>String</td>
386-
<td></td>
387-
<td>Initial animation: top, bottom, left, right</td>
388-
<td></td>
389-
</tr>
390-
<tr>
391-
<td>cancelableOutside</td>
392-
<td>Boolean</td>
393-
<td></td>
394-
<td>Whether the dialogs closes by clicking outside or not</td>
395-
<td>false</td>
396-
</tr>
397-
<tr>
398-
<td>closeOnEscPress</td>
399-
<td>Boolean</td>
400-
<td></td>
401-
<td>Whether the dialogs closes by pressing escape</td>
402-
<td>false</td>
403-
</tr>
404-
<tr>
405-
<td>hideCloseButton</td>
406-
<td>Boolean</td>
407-
<td></td>
408-
<td>Hides the close button</td>
409-
<td>false</td>
410-
</tr>
411-
<tr>
412-
<td>onCloseClick</td>
413-
<td>function</td>
414-
<td style={{ textAlign: 'center' }}>
415-
<p>&#9989;</p>
416-
</td>
417-
<td>Close button click function</td>
418-
<td></td>
419-
</tr>
420-
<tr>
421-
<td>cancelText</td>
422-
<td>String</td>
423-
<td></td>
424-
<td>Negative button text</td>
425-
<td>'CANCEL'</td>
426-
</tr>
427-
<tr>
428-
<td>onCancelClick</td>
429-
<td>function</td>
430-
<td></td>
431-
<td>Negative button click function</td>
432-
<td></td>
433-
</tr>
434-
<tr>
435-
<td>cancelDisabled</td>
436-
<td>Boolean</td>
437-
<td></td>
438-
<td>Negative button disabled prop</td>
439-
<td>false</td>
440-
</tr>
441-
<tr>
442-
<td>confirmText</td>
443-
<td>String</td>
444-
<td></td>
445-
<td>Positive button text</td>
446-
<td>'OK'</td>
447-
</tr>
448-
<tr>
449-
<td>onConfirmClick</td>
450-
<td>function</td>
451-
<td></td>
452-
<td>Positive button click function</td>
453-
<td></td>
454-
</tr>
455-
<tr>
456-
<td>confirmDisabled</td>
457-
<td>Boolean</td>
458-
<td></td>
459-
<td>Positive button disabled prop</td>
460-
<td>false</td>
461-
</tr>
462-
</tbody>
463-
</table>
464-
</div>
465-
</article>
466466
<article>
467467
<h1>License</h1>
468468
<h2>MIT</h2>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@denkschuldt/react-dialog",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"private": false,
55
"description": "A simple to use and customizable react dialog implementation.",
66
"main": "dist/index.js",

‎src/components/Dialog.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ const Dialog = (props) => {
5252
onClick={cancelableOutside ? handleCloseClick : undefined}>
5353
<div style={{ margin: 'auto' }}>
5454
<Draggable
55-
disabled={!draggable}>
55+
disabled={!draggable}
56+
cancel='.dnk-dialog-close, .dnk-dialog-body'>
5657
<div
5758
style={
5859
['top', 'bottom', 'left', 'right'].includes(slideIn) ?

0 commit comments

Comments
 (0)