-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add DateRangePicker (prev. experimental DateRange) (#623)
This implements a new design and functionality for the DateRangePicker component: - Ranges can now be selected more easily, both in one of the calendars as well as across both calendars. - Code was cleaned up and components changed to functional (instead of class-based). - Rename DateRange to DateRangePicker and move it to regular exports (not experimental _DateRange anymore)
- Loading branch information
Showing
18 changed files
with
1,022 additions
and
729 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,3 +4,6 @@ node_modules/ | |
npm-debug.log | ||
yarn.lock | ||
/stats.html | ||
|
||
# testing | ||
coverage |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React, { useState } from 'react' | ||
import styled from 'styled-components' | ||
import { DateRangePicker, unselectable } from '@aragon/ui' | ||
|
||
export default function() { | ||
const [selectedDateRange, setSelectedDateRange] = useState({ | ||
start: null, | ||
end: null, | ||
}) | ||
return ( | ||
<Wrapper> | ||
<DateRangePicker | ||
startDate={selectedDateRange.start} | ||
endDate={selectedDateRange.end} | ||
onChange={setSelectedDateRange} | ||
/> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
const Wrapper = styled.div` | ||
${unselectable}; | ||
padding: 20px; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
bottom: 0; | ||
background: #f5f7fa; | ||
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React from 'react' | ||
import { DateRangePicker } from '@aragon/ui' | ||
|
||
import Page from 'comps/Page/Page' | ||
import Container from '../components/Page/DemoContainer' | ||
import readme from 'ui-src/components/DateRangePicker/README.md' | ||
|
||
// eslint-disable-next-line react/prop-types | ||
const PageDateRangePicker = ({ title }) => ( | ||
<Page title={title} readme={readme}> | ||
<Page.Demo opaque> | ||
<Container> | ||
<DateRangePicker /> | ||
</Container> | ||
</Page.Demo> | ||
</Page> | ||
) | ||
|
||
export default PageDateRangePicker |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.