Skip to content

Commit 83462ce

Browse files
slavakiselslavakisel
committed
Update examples page
1 parent 0b3980e commit 83462ce

File tree

8 files changed

+43195
-17100
lines changed

8 files changed

+43195
-17100
lines changed

‎docs/bundle.js‎

Lines changed: 42941 additions & 17072 deletions
Large diffs are not rendered by default.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<!--[if lt IE 9]>
1212
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1313
<![endif]-->
14-
<link href="style.css?89f79d889b7fb49856cb" rel="stylesheet"></head>
14+
<link href="style.css?9bd47089ea0efed6101b" rel="stylesheet"></head>
1515
<body>
1616
<div class="wrapper">
1717
<header>
@@ -33,5 +33,5 @@ <h2>React Month Picker Input</h2>
3333
</footer>
3434
</div>
3535
<script src="theme/js/scale.fix.js"></script>
36-
<script type="text/javascript" src="bundle.js?89f79d889b7fb49856cb"></script></body>
36+
<script type="text/javascript" src="bundle.js?9bd47089ea0efed6101b"></script></body>
3737
</html>

‎docs/index.tsx‎

Lines changed: 103 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,129 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import jsxToString from 'jsx-to-string';
34

45
import MonthPickerInput from 'react-month-picker-input';
6+
import { MonthFormat } from 'react-month-picker-input';
57

68
ReactDOM.render(
79
(
810
<div>
9-
<label htmlFor="ex-0">
10-
Without default value
11+
<div className="example">
12+
<h2>Without props</h2>
13+
14+
<pre>{ jsxToString(<MonthPickerInput />) }</pre>
15+
1116
<MonthPickerInput inputProps={{id: "ex-0", name: "ex-0"}} />
12-
</label>
17+
</div>
18+
19+
<div className="example">
20+
<h2>With only default year</h2>
21+
22+
<pre>
23+
{
24+
jsxToString(
25+
<MonthPickerInput
26+
year={new Date().getFullYear()} />
27+
)
28+
}
29+
</pre>
1330

14-
<label htmlFor="ex-1">
15-
With only default year
1631
<MonthPickerInput
1732
year={new Date().getFullYear()}
1833
inputProps={{id: "ex-1", name: "ex-1"}} />
19-
</label>
34+
</div>
35+
36+
<div className="example">
37+
<h2>With default year and month</h2>
38+
39+
<pre>
40+
{
41+
jsxToString(
42+
<MonthPickerInput
43+
year={new Date().getFullYear()}
44+
month={new Date().getMonth()} />
45+
)
46+
}
47+
</pre>
2048

21-
<label htmlFor="ex-2">
22-
With default year and month
2349
<MonthPickerInput
2450
year={new Date().getFullYear()}
2551
month={new Date().getMonth()}
2652
inputProps={{id: "ex-2", name: "ex-2"}} />
27-
</label>
53+
</div>
2854

29-
<label htmlFor="ex-3">
30-
Japanese format
31-
<MonthPickerInput
32-
year={new Date().getFullYear()}
33-
month={new Date().getMonth()}
34-
lang="ja"
35-
inputProps={{id: "ex-3", name: "ex-3"}} />
36-
</label>
3755

38-
<label htmlFor="ex-4">
39-
Close on month select
56+
<div className="example">
57+
<h2>Close on month select</h2>
58+
59+
<pre>
60+
{ jsxToString(<MonthPickerInput closeOnSelect={true} />) }
61+
</pre>
62+
4063
<MonthPickerInput
4164
closeOnSelect={true}
4265
inputProps={{id: "ex-3", name: "ex-3"}} />
43-
</label>
66+
</div>
67+
68+
<div className="example">
69+
<h2>Custom translations</h2>
70+
71+
<pre>
72+
{
73+
jsxToString(
74+
<MonthPickerInput
75+
lang='hu'
76+
i18n={{
77+
monthFormat: MonthFormat.LONG,
78+
dateFormat: {
79+
hu: 'MM/YY'
80+
},
81+
monthNames: {
82+
hu: [
83+
'Január',
84+
'Február',
85+
'Március',
86+
'Aprilis',
87+
'Május',
88+
'Junius',
89+
'Julius',
90+
'Augusztus',
91+
'Szeptember',
92+
'Október',
93+
'November',
94+
'December'
95+
]
96+
}
97+
}} />
98+
)
99+
}</pre>
100+
101+
<MonthPickerInput
102+
lang="hu"
103+
i18n={{
104+
monthFormat: MonthFormat.LONG,
105+
dateFormat: {
106+
hu: 'MM/YY'
107+
},
108+
monthNames: {
109+
hu: [
110+
'Január',
111+
'Február',
112+
'Március',
113+
'Aprilis',
114+
'Május',
115+
'Junius',
116+
'Julius',
117+
'Augusztus',
118+
'Szeptember',
119+
'Október',
120+
'November',
121+
'December'
122+
]
123+
}
124+
}}
125+
inputProps={{id: "ex-4", name: "ex-4"}} />
126+
</div>
44127
</div>
45128
),
46129
document.getElementById('examples')

‎docs/theme/css/minimal.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,7 @@ footer { width: 270px; float: left; position: fixed; bottom: 50px; -webkit-font-
212212
header ul { width: 99%; }
213213
header li, header ul li + li + li { width: 33%; } }
214214
@media print { body { padding: 0.4in; font-size: 12pt; color: #444; } }
215+
216+
.example {
217+
margin-bottom: 30px;
218+
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"extract-text-webpack-plugin": "^3.0.0",
2727
"gulp-concat": "^2.6.1",
2828
"html-webpack-plugin": "^2.30.1",
29+
"jsx-to-string": "^1.4.0",
2930
"mocha": "^3.5.3",
3031
"path": "^0.12.7",
3132
"standard-version": "^4.2.0",

‎src/MonthPickerInput.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,4 +148,6 @@ class MonthPickerInput extends Component<IProps, IState> {
148148
};
149149
};
150150

151+
export { DateFormat, MonthFormat } from './i18n';
152+
151153
export default MonthPickerInput;

‎src/i18n.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
enum DateFormat {
1+
export enum DateFormat {
22
'MM/YY',
33
'YY/MM'
44
};

0 commit comments

Comments
 (0)