Skip to content

Commit 7172875

Browse files
LuchansoLuchanso
committed
feat(ui): add calendar
1 parent 81ed47c commit 7172875

File tree

5 files changed

+110
-30
lines changed

5 files changed

+110
-30
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@date-io/date-fns": "1.x",
67
"@material-ui/core": "^4.9.10",
8+
"@material-ui/pickers": "^3.2.10",
79
"@testing-library/jest-dom": "^4.2.4",
810
"@testing-library/react": "^9.3.2",
911
"@testing-library/user-event": "^7.1.2",
@@ -13,6 +15,7 @@
1315
"@types/react-dom": "^16.9.0",
1416
"@types/styled-components": "^5.0.1",
1517
"apexcharts": "^3.18.0",
18+
"date-fns": "^2.12.0",
1619
"gh-pages": "^2.2.0",
1720
"react": "^16.13.1",
1821
"react-apexcharts": "^1.3.7",

‎src/App.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ import React, { useState, Fragment } from "react";
22
import { Form, FormState } from "./components/Form/Form";
33
import { Chart } from "./components/Chart/Chart";
44
import { Typography } from "@material-ui/core";
5+
import styled from "styled-components";
6+
7+
const AlignContainer = styled.div`
8+
margin-top: 40px;
9+
`;
510

611
function App() {
712
const [formState, handleChange] = useState<FormState>({
8-
date: "",
913
salary: "",
1014
});
1115

@@ -14,8 +18,12 @@ function App() {
1418
<Typography variant="h1" align="center">
1519
Справедливая зарплата
1620
</Typography>
17-
<Form formState={formState} onChange={handleChange} />
18-
<Chart formState={formState} />
21+
<AlignContainer>
22+
<Form formState={formState} onChange={handleChange} />
23+
</AlignContainer>
24+
<AlignContainer>
25+
<Chart formState={formState} />
26+
</AlignContainer>
1927
</Fragment>
2028
);
2129
}

‎src/components/Form/Form.tsx

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { TextField, InputAdornment } from "@material-ui/core";
4+
import { KeyboardDatePicker } from "@material-ui/pickers";
35

46
export type FormState = {
57
salary: string;
6-
date: string;
8+
date?: Date | null;
79
};
810

911
type Props = {
@@ -14,7 +16,16 @@ type Props = {
1416
const Container = styled.div`
1517
display: flex;
1618
flex-direction: column;
17-
width: 240px;
19+
align-items: center;
20+
width: 100%;
21+
`;
22+
23+
const InputContainer = styled.div`
24+
width: 300px;
25+
`;
26+
27+
const InputAlign = styled.div`
28+
margin-bottom: 20px;
1829
`;
1930

2031
export function Form({ formState, onChange }: Props) {
@@ -24,27 +35,38 @@ export function Form({ formState, onChange }: Props) {
2435
onChange({ ...formState, salary: value });
2536
}
2637

27-
function handleChangeDate({
28-
target: { value },
29-
}: React.ChangeEvent<HTMLInputElement>) {
30-
onChange({ ...formState, date: value });
38+
function handleDateChange(date: Date | null) {
39+
onChange({ ...formState, date });
3140
}
3241

3342
return (
3443
<Container>
35-
<p>Я получаю</p>
36-
<input
37-
placeholder="20 000 руб."
38-
onChange={handleChangeSalary}
39-
value={formState.salary}
40-
/>
41-
<p>Последний раз менялась</p>
42-
<input
43-
type="date"
44-
placeholder="Когда последний раз повышалась?"
45-
value={formState.date}
46-
onChange={handleChangeDate}
47-
/>
44+
<InputContainer>
45+
<InputAlign>
46+
<TextField
47+
label="Моя зарплата"
48+
variant="filled"
49+
placeholder="20000"
50+
InputProps={{
51+
endAdornment: <InputAdornment position="end">₽</InputAdornment>,
52+
}}
53+
onChange={handleChangeSalary}
54+
value={formState.salary}
55+
fullWidth
56+
/>
57+
</InputAlign>
58+
<KeyboardDatePicker
59+
label="Последний раз менялась"
60+
variant="inline"
61+
inputVariant="filled"
62+
placeholder="31/01/2020"
63+
format="dd/MM/yyyy"
64+
value={formState.date}
65+
onChange={handleDateChange}
66+
fullWidth
67+
invalidDateMessage="Упс, неправильная дата"
68+
/>
69+
</InputContainer>
4870
</Container>
4971
);
5072
}

‎src/index.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import App from './App';
4-
import * as serviceWorker from './serviceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "./App";
4+
import DateFnsUtils from "@date-io/date-fns";
5+
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
6+
import * as serviceWorker from "./serviceWorker";
57

68
ReactDOM.render(
79
<React.StrictMode>
8-
<App />
10+
<MuiPickersUtilsProvider utils={DateFnsUtils}>
11+
<App />
12+
</MuiPickersUtilsProvider>
913
</React.StrictMode>,
10-
document.getElementById('root')
14+
document.getElementById("root")
1115
);
1216

1317
// If you want your app to work offline and load faster, you can change

‎yarn.lock

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -905,7 +905,7 @@
905905
dependencies:
906906
regenerator-runtime "^0.13.4"
907907

908-
"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.3":
908+
"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.3":
909909
version "7.9.2"
910910
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
911911
integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -963,6 +963,18 @@
963963
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
964964
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
965965

966+
"@date-io/[email protected]", "@date-io/core@^1.3.13":
967+
version "1.3.13"
968+
resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
969+
integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
970+
971+
"@date-io/[email protected]":
972+
version "1.3.13"
973+
resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
974+
integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
975+
dependencies:
976+
"@date-io/core" "^1.3.13"
977+
966978
"@emotion/hash@^0.8.0":
967979
version "0.8.0"
968980
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -1198,6 +1210,18 @@
11981210
react-is "^16.8.0"
11991211
react-transition-group "^4.3.0"
12001212

1213+
"@material-ui/pickers@^3.2.10":
1214+
version "3.2.10"
1215+
resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.2.10.tgz#19df024895876eb0ec7cd239bbaea595f703f0ae"
1216+
integrity sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==
1217+
dependencies:
1218+
"@babel/runtime" "^7.6.0"
1219+
"@date-io/core" "1.x"
1220+
"@types/styled-jsx" "^2.2.8"
1221+
clsx "^1.0.2"
1222+
react-transition-group "^4.0.0"
1223+
rifm "^0.7.0"
1224+
12011225
"@material-ui/styles@^4.9.10":
12021226
version "4.9.10"
12031227
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.10.tgz#182ccdd0bc8525a459486499bbaebcd92b0db3ab"
@@ -1577,6 +1601,13 @@
15771601
"@types/react-native" "*"
15781602
csstype "^2.2.0"
15791603

1604+
"@types/styled-jsx@^2.2.8":
1605+
version "2.2.8"
1606+
resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.8.tgz#b50d13d8a3c34036282d65194554cf186bab7234"
1607+
integrity sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==
1608+
dependencies:
1609+
"@types/react" "*"
1610+
15801611
"@types/testing-library__dom@*":
15811612
version "7.0.1"
15821613
resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.1.tgz#426bef0aa306a603fe071859d4b485941b28aca6"
@@ -3565,6 +3596,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
35653596
whatwg-mimetype "^2.2.0"
35663597
whatwg-url "^7.0.0"
35673598

3599+
date-fns@^2.12.0:
3600+
version "2.12.0"
3601+
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.12.0.tgz#01754c8a2f3368fc1119cf4625c3dad8c1845ee6"
3602+
integrity sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw==
3603+
35683604
[email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
35693605
version "2.6.9"
35703606
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8862,7 +8898,7 @@ [email protected]:
88628898
optionalDependencies:
88638899
fsevents "2.1.2"
88648900

8865-
react-transition-group@^4.3.0:
8901+
react-transition-group@^4.0.0, react-transition-group@^4.3.0:
88668902
version "4.3.0"
88678903
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
88688904
integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
@@ -9251,6 +9287,13 @@ rgba-regex@^1.0.0:
92519287
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
92529288
integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
92539289

9290+
rifm@^0.7.0:
9291+
version "0.7.0"
9292+
resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
9293+
integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
9294+
dependencies:
9295+
"@babel/runtime" "^7.3.1"
9296+
92549297
[email protected]:
92559298
version "2.6.3"
92569299
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"

0 commit comments

Comments
 (0)