feat(ui): add calendar

duck-finance · Apr 12, 2020 · 7172875 · 7172875
1 parent 81ed47c
commit 7172875
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "1.x",
     "@material-ui/core": "^4.9.10",
+    "@material-ui/pickers": "^3.2.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -13,6 +15,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/styled-components": "^5.0.1",
     "apexcharts": "^3.18.0",
+    "date-fns": "^2.12.0",
     "gh-pages": "^2.2.0",
     "react": "^16.13.1",
     "react-apexcharts": "^1.3.7",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,10 +2,14 @@ import React, { useState, Fragment } from "react";
 import { Form, FormState } from "./components/Form/Form";
 import { Chart } from "./components/Chart/Chart";
 import { Typography } from "@material-ui/core";
+import styled from "styled-components";
+
+const AlignContainer = styled.div`
+  margin-top: 40px;
+`;
 
 function App() {
   const [formState, handleChange] = useState<FormState>({
-    date: "",
     salary: "",
   });
 
@@ -14,8 +18,12 @@ function App() {
       <Typography variant="h1" align="center">
         Справедливая зарплата
       </Typography>
-      <Form formState={formState} onChange={handleChange} />
-      <Chart formState={formState} />
+      <AlignContainer>
+        <Form formState={formState} onChange={handleChange} />
+      </AlignContainer>
+      <AlignContainer>
+        <Chart formState={formState} />
+      </AlignContainer>
     </Fragment>
   );
 }

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -1,9 +1,11 @@
 import React from "react";
 import styled from "styled-components";
+import { TextField, InputAdornment } from "@material-ui/core";
+import { KeyboardDatePicker } from "@material-ui/pickers";
 
 export type FormState = {
   salary: string;
-  date: string;
+  date?: Date | null;
 };
 
 type Props = {
@@ -14,7 +16,16 @@ type Props = {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  width: 240px;
+  align-items: center;
+  width: 100%;
+`;
+
+const InputContainer = styled.div`
+  width: 300px;
+`;
+
+const InputAlign = styled.div`
+  margin-bottom: 20px;
 `;
 
 export function Form({ formState, onChange }: Props) {
@@ -24,27 +35,38 @@ export function Form({ formState, onChange }: Props) {
     onChange({ ...formState, salary: value });
   }
 
-  function handleChangeDate({
-    target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) {
-    onChange({ ...formState, date: value });
+  function handleDateChange(date: Date | null) {
+    onChange({ ...formState, date });
   }
 
   return (
     <Container>
-      <p>Я получаю</p>
-      <input
-        placeholder="20 000 руб."
-        onChange={handleChangeSalary}
-        value={formState.salary}
-      />
-      <p>Последний раз менялась</p>
-      <input
-        type="date"
-        placeholder="Когда последний раз повышалась?"
-        value={formState.date}
-        onChange={handleChangeDate}
-      />
+      <InputContainer>
+        <InputAlign>
+          <TextField
+            label="Моя зарплата"
+            variant="filled"
+            placeholder="20000"
+            InputProps={{
+              endAdornment: <InputAdornment position="end">₽</InputAdornment>,
+            }}
+            onChange={handleChangeSalary}
+            value={formState.salary}
+            fullWidth
+          />
+        </InputAlign>
+        <KeyboardDatePicker
+          label="Последний раз менялась"
+          variant="inline"
+          inputVariant="filled"
+          placeholder="31/01/2020"
+          format="dd/MM/yyyy"
+          value={formState.date}
+          onChange={handleDateChange}
+          fullWidth
+          invalidDateMessage="Упс, неправильная дата"
+        />
+      </InputContainer>
     </Container>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,13 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import DateFnsUtils from "@date-io/date-fns";
+import { MuiPickersUtilsProvider } from "@material-ui/pickers";
+import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <App />
+    </MuiPickersUtilsProvider>
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/yarn.lock b/yarn.lock
@@ -905,7 +905,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@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":
+"@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":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -963,6 +963,18 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@date-io/[email protected]", "@date-io/core@^1.3.13":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
+  integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
+
+"@date-io/[email protected]":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
+  integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
+  dependencies:
+    "@date-io/core" "^1.3.13"
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -1198,6 +1210,18 @@
     react-is "^16.8.0"
     react-transition-group "^4.3.0"
 
+"@material-ui/pickers@^3.2.10":
+  version "3.2.10"
+  resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.2.10.tgz#19df024895876eb0ec7cd239bbaea595f703f0ae"
+  integrity sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==
+  dependencies:
+    "@babel/runtime" "^7.6.0"
+    "@date-io/core" "1.x"
+    "@types/styled-jsx" "^2.2.8"
+    clsx "^1.0.2"
+    react-transition-group "^4.0.0"
+    rifm "^0.7.0"
+
 "@material-ui/styles@^4.9.10":
   version "4.9.10"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.10.tgz#182ccdd0bc8525a459486499bbaebcd92b0db3ab"
@@ -1577,6 +1601,13 @@
     "@types/react-native" "*"
     csstype "^2.2.0"
 
+"@types/styled-jsx@^2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.8.tgz#b50d13d8a3c34036282d65194554cf186bab7234"
+  integrity sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/testing-library__dom@*":
   version "7.0.1"
   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:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.12.0.tgz#01754c8a2f3368fc1119cf4625c3dad8c1845ee6"
+  integrity sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8862,7 +8898,7 @@ [email protected]:
   optionalDependencies:
     fsevents "2.1.2"
 
-react-transition-group@^4.3.0:
+react-transition-group@^4.0.0, react-transition-group@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
   integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
@@ -9251,6 +9287,13 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rifm@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
+  integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 [email protected]:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"