...
 
Commits (2)
import React, { Fragment, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import moment from 'moment';
import 'moment-business-days';
import { SchoolStart, VacationStart } from '../../utils/Config';
import Percentage from './Percentage';
import Summary from './Summary';
import Switch from '../Switch';
import styled from 'styled-components';
import Text from '../Typography/Text';
import useInterval from '@use-it/interval';
const SwitchContainer = styled.div`
justify-content: center;
display: flex;
`;
const Countdown = () => {
const [timeLeft, setTimeLeft] = useState({
......@@ -13,10 +22,9 @@ const Countdown = () => {
seconds: 0,
percentage: 0
});
const [skipDaysOff, setSkipDaysOff] = useState(false);
setInterval(() => {
useInterval(() => {
const now = moment();
const unix = now.unix();
const diff = now.add(1, 'days').startOf('day').unix() - unix;
......@@ -24,7 +32,7 @@ const Countdown = () => {
const vacationStart = moment(VacationStart, 'DD-MM-YYYY');
const schoolStart = moment(SchoolStart, 'DD-MM-YYYY');
const totalDays = skipDaysOff ? vacationStart.businessDiff(schoolStart) : vacationStart.diff(schoolStart, 'days');
const totalDays = vacationStart.diff(schoolStart, 'days');
const daysLeft = skipDaysOff ? vacationStart.businessDiff(now) : vacationStart.diff(now, 'days');
const percentage = 100 - (daysLeft / totalDays * 100);
......@@ -39,10 +47,17 @@ const Countdown = () => {
});
}, 1000);
const handleSkipDaysOffChange = e => setSkipDaysOff(e.target.checked);
return (
<Fragment>
<Percentage percentage={timeLeft.percentage} />
<Summary seconds={timeLeft.seconds} days={timeLeft.days} minutes={timeLeft.minutes} hours={timeLeft.hours} />
<SwitchContainer>
<Switch checked={skipDaysOff} onChange={handleSkipDaysOffChange}>
<Text font-size={0.1} textTransform={'uppercase'} letterSpacing={0.15}>Pomiń dni wolne</Text>
</Switch>
</SwitchContainer>
</Fragment>
);
};
......
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { currentTheme } from '../../utils/Theme';
import { darken } from 'polished';
const Label = styled.label`
align-items: center;
display: flex;
justify-content: center;
`;
const Input = styled.input`
opacity: 0;
`;
const darkerBgColor = darken(0.1, currentTheme.backgroundColor);
const Slide = styled.div`
background-color: ${darkerBgColor};
border: 2px solid ${darkerBgColor};
border-radius: 45px;
display: inline-block;
height: 40px;
margin: 0 0.5em;
padding: 0 1px;
width: 75px;
${Input}:checked ~ & {
background-color: ${currentTheme.textColor};
border-color: ${currentTheme.textColor};
}
`;
const Thumb = styled.div`
background-color: ${currentTheme.textColor};
border-radius: 50%;
display: block;
height: 40px;
transition: .2s margin-left linear;
width: 40px;
${Input}:checked ~ ${Slide} > & {
background-color: ${darkerBgColor};
margin-left: calc(50% - 3px);
}
`;
const Switch = ({ children, className, ...props }) => {
return (
<Label className={className}>
<Input type="checkbox" {...props}/>
{children}
<Slide>
<Thumb/>
</Slide>
</Label>
);
};
Switch.propTypes = {
children: PropTypes.node,
className: PropTypes.string
};
export default Switch;
export { default } from './Switch';
......@@ -1550,6 +1550,11 @@
semver "^6.3.0"
tsutils "^3.17.1"
"@use-it/[email protected]^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@use-it/interval/-/interval-0.1.3.tgz#5d1096b2295d7a5dda8e8022f3abb5f9d9ef27f8"
integrity sha512-chshdtDZTFoWA9aszBz1Cc04Ca9NBD2JTi/GMjdJ+HGm4q7Vy1v71+2mm22r7Kfb2nYW+lTRsPcEHdB/VFVHsQ==
"@webassemblyjs/[email protected]":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
......@@ -8013,6 +8018,13 @@ [email protected]:
dependencies:
ts-pnp "^1.1.6"
[email protected]^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.1.tgz#657b6faf4c2308f3e0b1951196803a5e5d67b122"
integrity sha512-GVbvskpBiDV5TknurGL6OyFfLHsCknxbU8w5iMppT8rW0tLEoQHrIRfrPNPqGXNj3HGhkjRvhmg59Fy7HSnCAw==
dependencies:
"@babel/runtime" "^7.8.7"
[email protected]^1.0.25:
version "1.0.25"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
......