Skip to content

Commit c54762a

Browse files
reganlawtonreganlawton
authored
Merge pull request #49 from LukaszGrela/feature/hide-submit-btn
Hide submit property
2 parents a8c1ac7 + b48b299 commit c54762a

File tree

3 files changed

+70
-25
lines changed

3 files changed

+70
-25
lines changed

‎examples/index.js‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default class MainComponent extends React.Component {
1818
value8: '',
1919
value9: '',
2020
value10: '',
21+
value11: '',
2122
customMapping: [
2223
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
2324
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@', '*sh'],
@@ -85,6 +86,9 @@ export default class MainComponent extends React.Component {
8586
this.setState({ value10: val });
8687
}
8788

89+
handleValue11Change = (val) => {
90+
this.setState(_ => ({ value11: val }));
91+
};
8892
handleFocusButtonClicked() {
8993
this.input7ref.focus();
9094
}
@@ -101,7 +105,9 @@ export default class MainComponent extends React.Component {
101105
<p>Standard</p>
102106
<KeyboardedInput
103107
value={this.state.value}
104-
onChange={(value) => { this.handleValueChange(value); }}
108+
onChange={value => {
109+
this.handleValueChange(value);
110+
}}
105111
opacity={0.8}
106112
placeholder={'testme'}
107113
required
@@ -111,17 +117,32 @@ export default class MainComponent extends React.Component {
111117

112118
<p>Disable Dragging</p>
113119
<KeyboardedInput
114-
value={this.state.value1}
115-
onChange={(value) => { this.handleValue1Change(value); }}
120+
value={this.state.value11}
121+
onChange={value => {
122+
this.handleValue11Change(value);
123+
}}
116124
enabled
117125
isDraggable={false}
118126
/>
119127
<br />
120128

129+
<p>Disable Submit</p>
130+
<KeyboardedInput
131+
value={this.state.value1}
132+
onChange={value => {
133+
this.handleValue1Change(value);
134+
}}
135+
enabled
136+
showSubmit={false}
137+
/>
138+
<br />
139+
121140
<p>Disable Uppercase</p>
122141
<KeyboardedInput
123142
value={this.state.value2}
124-
onChange={(value) => { this.handleValue2Change(value); }}
143+
onChange={value => {
144+
this.handleValue2Change(value);
145+
}}
125146
enabled
126147
isFirstLetterUppercase={false}
127148
/>
@@ -130,7 +151,9 @@ export default class MainComponent extends React.Component {
130151
<p>Custom Mapping</p>
131152
<KeyboardedInput
132153
value={this.state.value3}
133-
onChange={(value) => { this.handleValue3Change(value); }}
154+
onChange={value => {
155+
this.handleValue3Change(value);
156+
}}
134157
defaultKeyboard={this.state.customMapping}
135158
enabled
136159
/>
@@ -140,7 +163,9 @@ export default class MainComponent extends React.Component {
140163
<KeyboardedInput
141164
value={this.state.value4}
142165
dataset={{ type: 'email' }}
143-
onChange={(value) => { this.handleValue4Change(value); }}
166+
onChange={value => {
167+
this.handleValue4Change(value);
168+
}}
144169
enabled
145170
keyboardClassName="testme"
146171
/>
@@ -149,7 +174,9 @@ export default class MainComponent extends React.Component {
149174
<p>Uppercase After Space (name entry)</p>
150175
<KeyboardedInput
151176
value={this.state.value5}
152-
onChange={(value) => { this.handleValue5Change(value); }}
177+
onChange={value => {
178+
this.handleValue5Change(value);
179+
}}
153180
enabled
154181
uppercaseAfterSpace
155182
/>
@@ -159,7 +186,9 @@ export default class MainComponent extends React.Component {
159186
<span>Can create inline inputs </span>
160187
<KeyboardedInput
161188
value={this.state.value6}
162-
onChange={(value) => { this.handleValue6Change(value); }}
189+
onChange={value => {
190+
this.handleValue6Change(value);
191+
}}
163192
enabled
164193
uppercaseAfterSpace
165194
containerClassName={'custom-class'}
@@ -169,9 +198,13 @@ export default class MainComponent extends React.Component {
169198

170199
<p>Programmatically Focus Input</p>
171200
<KeyboardedInput
172-
ref={(ref) => { this.input7ref = ref; }}
201+
ref={ref => {
202+
this.input7ref = ref;
203+
}}
173204
value={this.state.value7}
174-
onChange={(value) => { this.handleValue7Change(value); }}
205+
onChange={value => {
206+
this.handleValue7Change(value);
207+
}}
175208
enabled
176209
/>
177210
<button onClick={this.handleFocusButtonClicked}>Click To Focus</button>
@@ -180,7 +213,9 @@ export default class MainComponent extends React.Component {
180213
<p>Hidden numeric row, hidden shift, hidden symbols, hidden spacebar</p>
181214
<KeyboardedInput
182215
value={this.state.value8}
183-
onChange={(value) => { this.handleValue8Change(value); }}
216+
onChange={value => {
217+
this.handleValue8Change(value);
218+
}}
184219
enabled
185220
showNumericRow={false}
186221
showShift={false}
@@ -192,27 +227,31 @@ export default class MainComponent extends React.Component {
192227
<p>Callback (onBlur)</p>
193228
<KeyboardedInput
194229
value={this.state.value9}
195-
onChange={(value) => { this.handleValue9Change(value); }}
196-
onBlur={(value) => { alert(`Triggered Blur: ${value}`); }}
230+
onChange={value => {
231+
this.handleValue9Change(value);
232+
}}
233+
onBlur={value => {
234+
alert(`Triggered Blur: ${value}`);
235+
}}
197236
enabled
198237
/>
199238
<br />
200239

201240
<p>Callback (onFocus)</p>
202241
<KeyboardedInput
203242
value={this.state.value10}
204-
onChange={(value) => { this.handleValue10Change(value); }}
205-
onFocus={(value) => { this.handleOnFocus(value); }}
243+
onChange={value => {
244+
this.handleValue10Change(value);
245+
}}
246+
onFocus={value => {
247+
this.handleOnFocus(value);
248+
}}
206249
enabled
207250
/>
208251
<br />
209-
210252
</div>
211253
);
212254
}
213255
}
214256

215-
ReactDom.render(
216-
<MainComponent />,
217-
document.getElementById('app'),
218-
);
257+
ReactDom.render(<MainComponent />, document.getElementById('app'));

‎src/Keyboard.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default class Keyboard extends PureComponent {
3232
showShift: PropTypes.bool,
3333
showSymbols: PropTypes.bool,
3434
showSpacebar: PropTypes.bool,
35+
showSubmit: PropTypes.bool,
3536
};
3637

3738
static defaultProps = {
@@ -45,6 +46,7 @@ export default class Keyboard extends PureComponent {
4546
showShift: true,
4647
showSymbols: true,
4748
showSpacebar: true,
49+
showSubmit: true,
4850
};
4951

5052
constructor(props) {
@@ -330,11 +332,13 @@ export default class Keyboard extends PureComponent {
330332
onClick={this.handleLetterButtonClick}
331333
/>
332334
: null}
333-
<KeyboardButton
334-
value={String.fromCharCode('8615')}
335-
classes="keyboard-submit-button"
336-
onClick={this.props.hideKeyboard}
337-
/>
335+
{this.props.showSubmit ?
336+
<KeyboardButton
337+
value={String.fromCharCode('8615')}
338+
classes="keyboard-submit-button"
339+
onClick={this.props.hideKeyboard}
340+
/>
341+
: null}
338342
</div>
339343
</div>
340344
</Draggable>

‎src/KeyboardedInput.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ class KeyboardedInput extends React.Component {
3333
showShift: PropTypes.bool,
3434
showSymbols: PropTypes.bool,
3535
showSpacebar: PropTypes.bool,
36+
showSubmit: PropTypes.bool,
3637
};
3738

3839
constructor(props) {
@@ -155,6 +156,7 @@ class KeyboardedInput extends React.Component {
155156
showShift={this.props.showShift}
156157
showSymbols={this.props.showSymbols}
157158
showSpacebar={this.props.showSpacebar}
159+
showSubmit={this.props.showSubmit}
158160
/>
159161
}
160162
</div>

0 commit comments

Comments
 (0)