mirror of
https://github.com/react95-io/React95.git
synced 2026-04-26 03:00:18 -04:00
started working on website
This commit is contained in:
Artur Bien
@@ -6,6 +6,7 @@ import styled from "styled-components";
|
||||
const StyledTabs = styled.nav`
|
||||
position: relative;
|
||||
left: 8px;
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
const Tabs = ({
|
||||
|
||||
110
website/package-lock.json
generated
110
website/package-lock.json
generated
@@ -751,6 +751,27 @@
|
||||
"regexpu-core": "^4.5.4"
|
||||
}
|
||||
},
|
||||
"@babel/polyfill": {
|
||||
"version": "7.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.4.3.tgz",
|
||||
"integrity": "sha512-rkv8WIvJshA5Ev8iNMGgz5WZkRtgtiPexiT7w5qevGTuT7ZBfM3de9ox1y9JR5/OXb/sWGBbWlHNa7vQKqku3Q==",
|
||||
"requires": {
|
||||
"core-js": "^2.6.5",
|
||||
"regenerator-runtime": "^0.13.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.6.5",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
|
||||
"integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
|
||||
"integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/preset-env": {
|
||||
"version": "7.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.4.3.tgz",
|
||||
@@ -908,6 +929,15 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
|
||||
"integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
|
||||
},
|
||||
"@fullpage/react-fullpage": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/@fullpage/react-fullpage/-/react-fullpage-0.1.13.tgz",
|
||||
"integrity": "sha512-kpN98n/qTpYrR8dx/jP9pU6ry9qO99e1iU1cNSmzPAdr1PyGOfg5X2lYtbX71WlPBX66G1oFN6PMJxkelGqxyw==",
|
||||
"requires": {
|
||||
"@babel/polyfill": "^7.2.5",
|
||||
"fullpage.js": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
|
||||
@@ -2908,7 +2938,8 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -2926,11 +2957,13 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -2943,15 +2976,18 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -3054,7 +3090,8 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -3064,6 +3101,7 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -3076,17 +3114,20 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -3103,6 +3144,7 @@
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -3175,7 +3217,8 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -3185,6 +3228,7 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -3260,7 +3304,8 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -3290,6 +3335,7 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -3307,6 +3353,7 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -3345,11 +3392,13 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -3453,11 +3502,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
|
||||
@@ -6906,6 +6950,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"fullpage.js": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/fullpage.js/-/fullpage.js-3.0.4.tgz",
|
||||
"integrity": "sha512-GWpud0Gvr8i4k3QySoajFevO18UBKMJ9znU3o4uaXZkKYqLtS8d1BSQoAARmYwYgBLOw3YrKAG+4LoaIokO1UA=="
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
@@ -10398,29 +10447,6 @@
|
||||
"ts-pnp": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"polished": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/polished/-/polished-3.2.0.tgz",
|
||||
"integrity": "sha512-uXIr2Nu5SU5khDa4JwWh8q5czi4GoJf+U1za5LN59Tk0mL/W3egZrPL0H0ADXeompCp0QhmiK9zs06gw0J5m4Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
|
||||
"integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.2"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
|
||||
"integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.20",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
|
||||
@@ -12953,6 +12979,8 @@
|
||||
},
|
||||
"react": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
|
||||
"integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
@@ -13096,6 +13124,8 @@
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
|
||||
"integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
@@ -13161,6 +13191,8 @@
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.8.tgz",
|
||||
"integrity": "sha512-mDC8fYWCyuB9VROti8OCPdHE79UEchVVZmuS/yaIs47VkvZpgZqUvzghYBswZRchqnW0aARNY8xXrzoFRhhK7A==",
|
||||
"requires": {
|
||||
"@babel/core": "7.2.2",
|
||||
"@svgr/webpack": "4.1.0",
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fullpage/react-fullpage": "^0.1.13",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^5.0.0",
|
||||
|
||||
@@ -1,13 +1,108 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route } from "react-router-dom";
|
||||
import ReactFullpage from "@fullpage/react-fullpage";
|
||||
|
||||
import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
|
||||
|
||||
import { reset, themes, Button } from "./lib";
|
||||
import { BrowserRouter as Router, Route } from "react-router-dom";
|
||||
import { reset, themes, Button, Anchor } from "./lib";
|
||||
|
||||
import Me from "./assets/images/me.jpg";
|
||||
import CD from "./assets/images/cd.png";
|
||||
import Logo from "./assets/images/logo.png";
|
||||
import Plastic from "./assets/images/plastic.jpg";
|
||||
import LogoIcon from "./assets/images/icons/logo.png";
|
||||
|
||||
import Settings from "./components/Settings";
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
${reset}
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const Main = styled.main`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: teal;
|
||||
`;
|
||||
const Section = styled.section`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
`;
|
||||
const Hero = styled(Section)`
|
||||
background-image: url(https://cdn.instructables.com/FRM/4UUR/GJQE90QG/FRM4UURGJQE90QG.LARGE.jpg);
|
||||
background-size: cover;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(${Plastic});
|
||||
background-size: cover;
|
||||
opacity: 0.6;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
/* &:before {
|
||||
content: "";
|
||||
width: 45%;
|
||||
padding-top: 45%;
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
top: 25%;
|
||||
transform(-50%, -50%);
|
||||
background-image: url(${CD});
|
||||
background-size: cover;
|
||||
} */
|
||||
`;
|
||||
const HeroImage = styled.img`
|
||||
width: 60%;
|
||||
max-width: 280px;
|
||||
`;
|
||||
|
||||
const Centered = styled.div`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
`;
|
||||
const TopBar = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #050608;
|
||||
`;
|
||||
const Code = styled.code`
|
||||
font-size: 1.4em;
|
||||
`;
|
||||
const MeImage = styled.img`
|
||||
width: calc(100% - 3rem);
|
||||
max-width: 380px;
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
|
||||
margin: 3rem 0;
|
||||
|
||||
transition: 0.2s all ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
`;
|
||||
const StyledButton = styled(Button)`
|
||||
padding: 0 0.5em;
|
||||
font-weight: bold;
|
||||
font-size: 1.4em;
|
||||
img {
|
||||
height: 28px;
|
||||
margin-right: 0.25em;
|
||||
margin-left: -0.125em;
|
||||
}
|
||||
`;
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
@@ -15,15 +110,54 @@ class App extends Component {
|
||||
<>
|
||||
<GlobalStyle />
|
||||
|
||||
<main>
|
||||
<Router>
|
||||
<Route
|
||||
exact
|
||||
path="/"
|
||||
component={() => <Button>asdasdasd</Button>}
|
||||
/>
|
||||
</Router>
|
||||
</main>
|
||||
<Main>
|
||||
<ReactFullpage
|
||||
render={({ state, fullpageApi }) => {
|
||||
return (
|
||||
<ReactFullpage.Wrapper>
|
||||
<Hero className="section">
|
||||
<TopBar />
|
||||
<Centered>
|
||||
<HeroImage src={Logo} alt="React95 logo" />
|
||||
<br />
|
||||
</Centered>
|
||||
</Hero>
|
||||
<Section className="section">
|
||||
<Code>npm install react95</Code>
|
||||
<br />
|
||||
<MeImage src={Me} alt="childhood photo of Artur Bien" />
|
||||
<br />
|
||||
<StyledButton
|
||||
size="lg"
|
||||
onClick={() => fullpageApi.moveSectionDown()}
|
||||
>
|
||||
<img src={LogoIcon} />
|
||||
Start
|
||||
</StyledButton>
|
||||
</Section>
|
||||
<Section className="section">
|
||||
<Settings />
|
||||
</Section>
|
||||
<Section
|
||||
className="section"
|
||||
style={{ background: "white" }}
|
||||
>
|
||||
<Anchor
|
||||
style={{ fontSize: "3rem", marginBottom: "3rem" }}
|
||||
href="#"
|
||||
>
|
||||
Storybook
|
||||
</Anchor>
|
||||
<br />
|
||||
<Anchor style={{ fontSize: "3rem" }} href="#">
|
||||
Github
|
||||
</Anchor>
|
||||
</Section>
|
||||
</ReactFullpage.Wrapper>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Main>
|
||||
</>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
BIN
website/src/assets/images/cd.png
Normal file
BIN
website/src/assets/images/cd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
website/src/assets/images/icons/logo.png
Normal file
BIN
website/src/assets/images/icons/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
website/src/assets/images/me.jpg
Normal file
BIN
website/src/assets/images/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
website/src/assets/images/skate.jpg
Normal file
BIN
website/src/assets/images/skate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
74
website/src/components/Settings.js
Normal file
74
website/src/components/Settings.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import React, { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
Window,
|
||||
WindowContent,
|
||||
WindowHeader,
|
||||
Tabs,
|
||||
Tab,
|
||||
TabBody,
|
||||
Button,
|
||||
Checkbox,
|
||||
Fieldset,
|
||||
NumberField,
|
||||
DatePicker,
|
||||
Radio,
|
||||
Select
|
||||
} from "../lib";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
`;
|
||||
const StyledWindow = styled(Window)`
|
||||
box-sizing: content-box;
|
||||
width: calc(100% - 3rem);
|
||||
text-align: left;
|
||||
`;
|
||||
const P = styled.p`
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
`;
|
||||
export default function Settings() {
|
||||
const [tab, setTab] = useState(0);
|
||||
return (
|
||||
<Wrapper>
|
||||
{/* <DatePicker /> */}
|
||||
<StyledWindow>
|
||||
<WindowHeader>⚛ React95.exe</WindowHeader>
|
||||
<WindowContent>
|
||||
<Tabs value={tab} onChange={setTab}>
|
||||
<Tab value={0}>Appearance</Tab>
|
||||
<Tab value={1}>Fonts</Tab>
|
||||
<Tab value={2}>Other</Tab>
|
||||
</Tabs>
|
||||
<div style={{ height: 300 }}>
|
||||
{tab === 0 && (
|
||||
<TabBody>
|
||||
<P>
|
||||
You can choose from variety of different color schemes! 🔥
|
||||
</P>
|
||||
<Fieldset label="Themes:">
|
||||
<Radio value="1" label="🕹 Default" checked />
|
||||
<Radio value="1" label="🍇 Grape" />
|
||||
<Radio value="1" label="💊 Custom" disabled />
|
||||
</Fieldset>
|
||||
<Checkbox
|
||||
name="shipping"
|
||||
value={true}
|
||||
label="Enable vintage font"
|
||||
onChange={() => null}
|
||||
checked={true}
|
||||
/>
|
||||
</TabBody>
|
||||
)}
|
||||
{tab === 1 && <TabBody>Accesories stuff here</TabBody>}
|
||||
{tab === 2 && <TabBody>Clothing stuff here</TabBody>}
|
||||
</div>
|
||||
</WindowContent>
|
||||
</StyledWindow>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ var styled = require('styled-components');
|
||||
var styled__default = _interopDefault(styled);
|
||||
|
||||
var themes = {};
|
||||
themes.default = {
|
||||
themes["default"] = {
|
||||
canvas: "#ffffff",
|
||||
material: "#ced0cf",
|
||||
materialDark: "#9a9e9c",
|
||||
@@ -1350,7 +1350,7 @@ var DateItemContent = styled__default.span.withConfig({
|
||||
});
|
||||
|
||||
function daysInMonth(year, month) {
|
||||
return new Date(year, month, 0).getDate();
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
function dayIndex(year, month, day) {
|
||||
@@ -1362,23 +1362,22 @@ var DatePicker =
|
||||
function (_Component) {
|
||||
_inherits(DatePicker, _Component);
|
||||
|
||||
function DatePicker() {
|
||||
var _getPrototypeOf2;
|
||||
|
||||
function DatePicker(props) {
|
||||
var _this;
|
||||
|
||||
_classCallCheck(this, DatePicker);
|
||||
|
||||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
_this = _possibleConstructorReturn(this, _getPrototypeOf(DatePicker).call(this, props));
|
||||
|
||||
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DatePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
||||
|
||||
_defineProperty(_assertThisInitialized(_this), "state", {
|
||||
day: 10,
|
||||
month: 2,
|
||||
year: 2019
|
||||
_defineProperty(_assertThisInitialized(_this), "convertDateToState", function (date) {
|
||||
var day = date.getDate();
|
||||
var month = date.getMonth();
|
||||
var year = date.getFullYear();
|
||||
return {
|
||||
day: day,
|
||||
month: month,
|
||||
year: year
|
||||
};
|
||||
});
|
||||
|
||||
_defineProperty(_assertThisInitialized(_this), "handleMonthSelect", function (month) {
|
||||
@@ -1399,16 +1398,19 @@ function (_Component) {
|
||||
});
|
||||
});
|
||||
|
||||
_defineProperty(_assertThisInitialized(_this), "handleChange", function () {
|
||||
_defineProperty(_assertThisInitialized(_this), "handleAccept", function () {
|
||||
var _this$state = _this.state,
|
||||
year = _this$state.year,
|
||||
month = _this$state.month,
|
||||
day = _this$state.day;
|
||||
var date = new Date(year, month, day);
|
||||
|
||||
_this.props.onChange(date);
|
||||
_this.props.onAccept(date);
|
||||
});
|
||||
|
||||
var initialDate = _this.convertDateToState(props.date || new Date());
|
||||
|
||||
_this.state = initialDate;
|
||||
return _this;
|
||||
}
|
||||
|
||||
@@ -1424,48 +1426,47 @@ function (_Component) {
|
||||
var _this$props = this.props,
|
||||
shadow = _this$props.shadow,
|
||||
className = _this$props.className,
|
||||
onAccept = _this$props.onAccept,
|
||||
onCancel = _this$props.onCancel;
|
||||
var baseClass = "DatePicker";
|
||||
var months = [{
|
||||
value: 1,
|
||||
value: 0,
|
||||
label: "January"
|
||||
}, {
|
||||
value: 2,
|
||||
value: 1,
|
||||
label: "February"
|
||||
}, {
|
||||
value: 3,
|
||||
value: 2,
|
||||
label: "March"
|
||||
}, {
|
||||
value: 4,
|
||||
value: 3,
|
||||
label: "April"
|
||||
}, {
|
||||
value: 5,
|
||||
value: 4,
|
||||
label: "May"
|
||||
}, {
|
||||
value: 6,
|
||||
value: 5,
|
||||
label: "June"
|
||||
}, {
|
||||
value: 7,
|
||||
value: 6,
|
||||
label: "July"
|
||||
}, {
|
||||
value: 8,
|
||||
value: 7,
|
||||
label: "August"
|
||||
}, {
|
||||
value: 9,
|
||||
value: 8,
|
||||
label: "September"
|
||||
}, {
|
||||
value: 10,
|
||||
value: 9,
|
||||
label: "October"
|
||||
}, {
|
||||
value: 11,
|
||||
value: 10,
|
||||
label: "November"
|
||||
}, {
|
||||
value: 12,
|
||||
value: 11,
|
||||
label: "December"
|
||||
}]; // console.log("days in month: ", daysInMonth(year, month));
|
||||
// console.log("day index", dayIndex(year, month, day));
|
||||
// console.log("first day index", dayIndex(year, month, 1));
|
||||
|
||||
console.log("first day index", dayIndex(year, month - 1, 1));
|
||||
var dayPickerItems = Array.apply(null, {
|
||||
length: 35
|
||||
});
|
||||
@@ -1502,17 +1503,15 @@ function (_Component) {
|
||||
}
|
||||
}, React__default.createElement(Select, {
|
||||
items: months,
|
||||
selectedIndex: month - 1,
|
||||
selectedIndex: month,
|
||||
onChange: this.handleMonthSelect,
|
||||
width: 128,
|
||||
height: 200,
|
||||
className: "".concat(baseClass, "-toolbar__input")
|
||||
height: 200
|
||||
}), React__default.createElement(NumberField, {
|
||||
value: year,
|
||||
disableKeyboardInput: true,
|
||||
onChange: this.handleYearSelect,
|
||||
width: 100,
|
||||
className: "".concat(baseClass, "-toolbar__input")
|
||||
width: 100
|
||||
})), React__default.createElement(Calendar, null, React__default.createElement(WeekDays, null, React__default.createElement(DateItem, null, "S"), React__default.createElement(DateItem, null, "M"), React__default.createElement(DateItem, null, "T"), React__default.createElement(DateItem, null, "W"), React__default.createElement(DateItem, null, "T"), React__default.createElement(DateItem, null, "F"), React__default.createElement(DateItem, null, "S")), React__default.createElement(Dates, null, dayPickerItems)), React__default.createElement(Toolbar, {
|
||||
noPadding: true,
|
||||
style: {
|
||||
@@ -1524,7 +1523,7 @@ function (_Component) {
|
||||
disabled: true
|
||||
}, "Cancel"), React__default.createElement(Button, {
|
||||
fullWidth: true,
|
||||
onClick: this.handleChange
|
||||
onClick: onAccept ? this.handleAccept : undefined
|
||||
}, "OK"))));
|
||||
}
|
||||
}]);
|
||||
@@ -1535,8 +1534,9 @@ function (_Component) {
|
||||
_defineProperty(DatePicker, "propTypes", {
|
||||
className: propTypes.string,
|
||||
shadow: propTypes.bool,
|
||||
onChange: propTypes.func.isRequired,
|
||||
onCancel: propTypes.func.isRequired
|
||||
onAccept: propTypes.func.isRequired,
|
||||
onCancel: propTypes.func.isRequired,
|
||||
date: propTypes.instanceOf(Date)
|
||||
});
|
||||
|
||||
_defineProperty(DatePicker, "defaultProps", {
|
||||
@@ -1940,7 +1940,7 @@ Tab.propTypes = {
|
||||
var StyledTabs = styled__default.nav.withConfig({
|
||||
displayName: "Tabs__StyledTabs",
|
||||
componentId: "sc-11btqu5-0"
|
||||
})(["position:relative;left:8px;"]);
|
||||
})(["position:relative;left:8px;text-align:left;"]);
|
||||
|
||||
var Tabs = function Tabs(_ref) {
|
||||
var value = _ref.value,
|
||||
|
||||
Reference in New Issue
Block a user