Skip to content

Commit

Permalink
Add DateRangePicker (prev. experimental DateRange) (#623)
Browse files Browse the repository at this point in the history
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
adekbadek authored and bpierre committed Nov 18, 2019
1 parent 8c07b16 commit 092314b
Show file tree
Hide file tree
Showing 18 changed files with 1,022 additions and 729 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,6 @@ node_modules/
npm-debug.log
yarn.lock
/stats.html

# testing
coverage
39 changes: 0 additions & 39 deletions devbox/apps/DateRange.js

This file was deleted.

30 changes: 30 additions & 0 deletions devbox/apps/DateRangePicker.js
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;
`
2 changes: 1 addition & 1 deletion devbox/apps/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export { default as Card } from './Card'
export { default as Checkbox } from './Checkbox'
export { default as ContextMenu } from './ContextMenu'
export { default as DataView } from './DataView'
export { default as DateRange } from './DateRange'
export { default as DateRangePicker } from './DateRangePicker'
export { default as DiscButton } from './DiscButton'
export { default as Distribution } from './Distribution'
export { default as DropDown } from './DropDown'
Expand Down
19 changes: 19 additions & 0 deletions gallery/src/pages/PageDateRangePicker.js
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
2 changes: 2 additions & 0 deletions gallery/src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import PageField from './pages/PageField'
import PageSlider from './pages/PageSlider'
import PageTabs from './pages/PageTabs'
import PageAutoComplete from './pages/PageAutoComplete'
import PageDateRangePicker from './pages/PageDateRangePicker'
import PageSwitch from './pages/PageSwitch'

// Other components
Expand Down Expand Up @@ -101,6 +102,7 @@ export const PAGE_GROUPS = [
[PageTextCopy, 'TextCopy'],
[PageTextInput, 'TextInput'],
[PageAutoComplete, 'AutoComplete'],
[PageDateRangePicker, 'DateRangePicker'],
[PageSwitch, 'Switch'],
],
},
Expand Down
Loading

0 comments on commit 092314b

Please sign in to comment.