This repository has been archived by the owner on Sep 20, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.tsx
99 lines (93 loc) · 3.84 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import * as React from 'react';
import { render as ReactDomRender } from 'react-dom';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { NumberInput, NumberInputChangeHandler, NumberInputError, EventValue, NumberInputErrorHandler, NumberInputValidHandler, NumberInputReqestValueHandller } from 'material-ui-number-input';
const { div, link, input } = React.DOM;
interface DemoState {
value?: string;
errorText?: string;
}
export default class Demo extends React.Component<void, DemoState> {
private onKeyDown: React.KeyboardEventHandler;
private onChange: NumberInputChangeHandler;
private onError: NumberInputErrorHandler;
private onValid: NumberInputValidHandler;
private onRequestValue: NumberInputReqestValueHandller;
public constructor(props: void) {
super(props);
this.state = { value: '30' };
this.onKeyDown = (event: React.KeyboardEvent): void => {
console.log(`onKeyDown ${event.key}`);
}
this.onChange = (event: React.FormEvent, value: string): void => {
const e: EventValue = event;
console.log(`onChange ${e.target.value}, ${value}`);
this.setState({ value: value });
};
this.onError = (error: NumberInputError): void => {
let errorText: string;
switch(error) {
case 'required':
errorText = 'This field is required';
break;
case 'invalidSymbol':
errorText = 'You are tring to enter none number symbol';
break;
case 'incompleteNumber':
errorText = 'Number is incomplete';
break;
case 'singleMinus':
errorText = 'Minus can be use only for negativity';
break;
case 'singleFloatingPoint':
errorText = 'There is already a floating point';
break;
case 'singleZero':
errorText = 'Floating point is expected';
break;
case 'min':
errorText = 'You are tring to enter number less than 11';
break;
case 'max':
errorText = 'You are tring to enter number greater than 150';
break;
}
this.setState({ errorText: errorText });
}
this.onValid = (value: number): void => {
console.debug(`${value} is a valid number!`);
}
this.onRequestValue = (value: string): void => {
console.log(`request ${JSON.stringify(value)}`);
this.setState({ value: value })
}
}
public render(): JSX.Element {
const { state, onChange, onError, onValid, onKeyDown, onRequestValue } = this;
const { value, errorText } = state;
return (
<MuiThemeProvider>
<div>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500" rel="stylesheet" type="text/css"/>
<NumberInput
id="num"
required
min={11}
max={1500}
strategy="warn"
errorText={errorText}
onError={onError}
onValid={onValid}
onRequestValue={onRequestValue}
onChange={onChange}
onKeyDown={onKeyDown} />
</div>
</MuiThemeProvider>
);
}
}
injectTapEventPlugin();
let bootstrapNode = document.createElement('div');
ReactDomRender(<Demo />, bootstrapNode);
document.body.appendChild(bootstrapNode);