Skip to content

Commit f2b75e4

Browse files
arfedulovarfedulov
authored
feat: hideMobileKeyboard prop (#143)
* update package version, remove unused pependency * upgrade dependencies * add hideMobileKeyboard prop * update readme
1 parent 8646658 commit f2b75e4

15 files changed

+613
-640
lines changed

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ You can also set locale for *Input component locally using ``localization`` prop
184184
| ``localization`` | {string} Sets Moment date locale locally for this component. |
185185
| ``icon`` | {string\|false} icon to display inside Input. |
186186
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
187+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |
187188

188189
### TimeInput
189190

@@ -208,6 +209,7 @@ You can also set locale for *Input component locally using ``localization`` prop
208209
| ``localization`` | {string} Sets Moment date locale locally for this component. |
209210
| ``icon`` | {string\|false} icon to display inside Input. |
210211
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
212+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |
211213

212214
### DateTimeInput
213215

@@ -242,6 +244,7 @@ You can also set locale for *Input component locally using ``localization`` prop
242244
| ``localization`` | {string} Sets Moment date locale locally for this component. |
243245
| ``icon`` | {string\|false} icon to display inside Input. |
244246
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
247+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |
245248

246249
### DatesRangeInput
247250

@@ -271,6 +274,7 @@ You can also set locale for *Input component locally using ``localization`` prop
271274
| ``icon`` | {string\|false} icon to display inside Input. |
272275
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
273276
| ``allowSameEndDate`` | {boolean} Allow end date to be the same as start date. |
277+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |
274278

275279
### YearInput
276280

@@ -294,6 +298,7 @@ You can also set locale for *Input component locally using ``localization`` prop
294298
| ``localization`` | {string} Sets Moment date locale locally for this component. |
295299
| ``icon`` | {string\|false} icon to display inside Input. |
296300
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
301+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |
297302

298303
### MonthInput
299304

@@ -320,6 +325,7 @@ You can also set locale for *Input component locally using ``localization`` prop
320325
| ``localization`` | {string} Sets Moment date locale locally for this component. |
321326
| ``icon`` | {string\|false} icon to display inside Input. |
322327
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
328+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |
323329

324330
### MonthRangeInput
325331

@@ -345,3 +351,4 @@ You can also set locale for *Input component locally using ``localization`` prop
345351
| ``localization`` | {string} Sets Moment date locale locally for this component. |
346352
| ``icon`` | {string\|false} icon to display inside Input. |
347353
| ``iconPosition`` | {'left'\|'right'} icon position inside Input. Default: 'right'. |
354+
| ``hideMobileKeyboard`` | {bool} Try to prevent mobile keyboard appearing. |

‎example/calendar.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ class DateTimeForm extends React.Component<any, any> {
103103
clearable={clearable}
104104
animation='scale'
105105
duration={200}
106+
hideMobileKeyboard
106107
value={this.state.date}
107108
iconPosition='left'
108109
preserveViewMode={false}
@@ -119,6 +120,7 @@ class DateTimeForm extends React.Component<any, any> {
119120
animation='fly left'
120121
duration={300}
121122
closable
123+
hideMobileKeyboard
122124
clearable={clearable}
123125
value={this.state.dateStartYear}
124126
iconPosition='left'
@@ -136,6 +138,7 @@ class DateTimeForm extends React.Component<any, any> {
136138
duration={300}
137139
closable
138140
autoComplete='off'
141+
hideMobileKeyboard
139142
clearable={clearable}
140143
value={this.state.time}
141144
iconPosition='left'
@@ -149,6 +152,7 @@ class DateTimeForm extends React.Component<any, any> {
149152
name='dateTime'
150153
closable
151154
clearable={clearable}
155+
hideMobileKeyboard
152156
value={this.state.dateTime}
153157
iconPosition='left'
154158
preserveViewMode={false}
@@ -163,6 +167,7 @@ class DateTimeForm extends React.Component<any, any> {
163167
className='example-calendar-input'
164168
name='datesRange'
165169
closable
170+
hideMobileKeyboard
166171
clearable={clearable}
167172
value={this.state.datesRange}
168173
iconPosition='left'
@@ -177,6 +182,7 @@ class DateTimeForm extends React.Component<any, any> {
177182
popupPosition='bottom right'
178183
clearable={clearable}
179184
closable
185+
hideMobileKeyboard
180186
value={this.state.year}
181187
iconPosition='left'
182188
autoComplete='off'
@@ -190,6 +196,7 @@ class DateTimeForm extends React.Component<any, any> {
190196
popupPosition='bottom right'
191197
clearable={clearable}
192198
closable
199+
hideMobileKeyboard
193200
value={this.state.month}
194201
iconPosition='left'
195202
autoComplete='off'
@@ -203,6 +210,7 @@ class DateTimeForm extends React.Component<any, any> {
203210
popupPosition='bottom right'
204211
clearable={clearable}
205212
closable
213+
hideMobileKeyboard
206214
iconPosition='left'
207215
autoComplete='off'
208216
value={this.state.monthRange}

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "semantic-ui-calendar-react",
3-
"version": "0.14.4",
3+
"version": "0.14.5",
44
"description": "date/time picker built from semantic-ui elements",
55
"main": "dist/commonjs/index.js",
66
"scripts": {
@@ -72,7 +72,6 @@
7272
"react": "^16.6.0",
7373
"react-dom": "^16.6.0",
7474
"rimraf": "^2.6.2",
75-
"semantic-ui-css": "^2.4.1",
7675
"semantic-ui-react": "^0.86.0",
7776
"sinon": "^7.2.2",
7877
"ts-loader": "^5.3.1",

‎src/inputs/BaseInput.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ export interface BaseInputProps {
6464
animation?: SemanticTRANSITIONS;
6565
/** Moment date localization. */
6666
localization?: string;
67+
/** Try to prevent mobile keyboard appearing. */
68+
hideMobileKeyboard?: boolean;
6769
}
6870

6971
export interface MarkedValuesProps {

‎src/inputs/DateInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
179179
localization: PropTypes.string,
180180
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
181181
iconPosition: PropTypes.oneOf(['left', 'right']),
182+
hideMobileKeyboard: PropTypes.bool,
182183
};
183184

184185
constructor(props: DateInputProps) {

‎src/inputs/DateTimeInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
197197
localization: PropTypes.string,
198198
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
199199
iconPosition: PropTypes.oneOf(['left', 'right']),
200+
hideMobileKeyboard: PropTypes.bool,
200201
};
201202

202203
constructor(props: DateTimeInputProps) {

‎src/inputs/DatesRangeInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
101101
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
102102
iconPosition: PropTypes.oneOf(['left', 'right']),
103103
allowSameEndDate: PropTypes.bool,
104+
hideMobileKeyboard: PropTypes.bool,
104105
};
105106

106107
constructor(props) {

‎src/inputs/MonthInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ class MonthInput extends BaseInput<MonthInputProps, BaseInputState> {
9494
localization: PropTypes.string,
9595
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
9696
iconPosition: PropTypes.oneOf(['left', 'right']),
97+
hideMobileKeyboard: PropTypes.bool,
9798
};
9899

99100
constructor(props) {

‎src/inputs/MonthRangeInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ class MonthRangeInput extends BaseInput<MonthRangeInputProps, BaseInputState> {
7676
localization: PropTypes.string,
7777
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
7878
iconPosition: PropTypes.oneOf(['left', 'right']),
79+
hideMobileKeyboard: PropTypes.bool,
7980
};
8081

8182
constructor(props) {

‎src/inputs/TimeInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ class TimeInput extends BaseInput<TimeInputProps, TimeInputState> {
9292
localization: PropTypes.string,
9393
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
9494
iconPosition: PropTypes.oneOf(['left', 'right']),
95+
hideMobileKeyboard: PropTypes.bool,
9596
};
9697

9798
constructor(props) {

‎src/inputs/YearInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ class YearInput extends BaseInput<YearInputProps, BaseInputState> {
9090
localization: PropTypes.string,
9191
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
9292
iconPosition: PropTypes.oneOf(['left', 'right']),
93+
hideMobileKeyboard: PropTypes.bool,
9394
};
9495

9596
constructor(props) {

‎src/lib/checkMobile.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/** Return true if run on mobile browser. */
2+
const checkMobile = () => {
3+
if (navigator.userAgent.match(/Android/i)
4+
|| navigator.userAgent.match(/webOS/i)
5+
|| navigator.userAgent.match(/iPhone/i)
6+
|| navigator.userAgent.match(/iPad/i)
7+
|| navigator.userAgent.match(/iPod/i)
8+
|| navigator.userAgent.match(/BlackBerry/i)
9+
|| navigator.userAgent.match(/Windows Phone/i)
10+
) {
11+
return true;
12+
}
13+
14+
return false;
15+
};
16+
17+
export default checkMobile;

‎src/lib/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as tick } from './tick';
22
export { default as findHTMLElement } from './findHTMLElement';
3+
export { default as checkMobile } from './checkMobile';

‎src/views/InputView.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
Transition,
1313
} from 'semantic-ui-react';
1414
import checkIE from '../lib/checkIE';
15+
import checkMobile from '../lib/checkMobile';
1516

1617
const popupStyle = {
1718
padding: '0',
@@ -120,6 +121,8 @@ interface InputViewProps {
120121
pickerStyle?: object;
121122
/** Do not display popup if true. */
122123
readOnly?: boolean;
124+
/** Try to prevent mobile keyboard appearing. */
125+
hideMobileKeyboard?: boolean;
123126
}
124127

125128
class InputView extends React.Component<InputViewProps, any> {
@@ -162,6 +165,7 @@ class InputView extends React.Component<InputViewProps, any> {
162165
iconPosition,
163166
icon,
164167
readOnly,
168+
hideMobileKeyboard,
165169
...rest
166170
} = this.props;
167171

@@ -195,7 +199,8 @@ class InputView extends React.Component<InputViewProps, any> {
195199
const inputElement = (
196200
<FormInputWithRef
197201
{...rest}
198-
readOnly={readOnly}
202+
// trying to use this hack https://stackoverflow.com/a/7610923 for hiding mobile keyboard
203+
readOnly={(checkMobile() && hideMobileKeyboard) || readOnly}
199204
icon={icon}
200205
iconPosition={icon && iconPosition !== 'right' ? iconPosition : undefined}
201206
innerRef={(e) => { this.inputNode = e; onMount(e); }}

0 commit comments

Comments
 (0)