From 5add468b0f53ddc5285b83d814a3c79490625e0e Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Tue, 26 Mar 2019 13:01:15 -0600 Subject: [PATCH 01/11] Fix #4 - Fix previous month date selection --- src/components/Calendar.js | 6 +----- src/utils.js | 7 ++++++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Calendar.js b/src/components/Calendar.js index 6e2ca898d..e4e438f20 100644 --- a/src/components/Calendar.js +++ b/src/components/Calendar.js @@ -302,11 +302,7 @@ class Calendar extends PureComponent { })); const months = new Array(this.props.months).fill().map((_, i) => { - let month = i; - if (this.props.startOnPreviousMonth) { - month = i - this.props.months + 1; - } - return addMonths(this.state.focusedDate, month); + return addMonths(this.state.focusedDate, i); }); return ( diff --git a/src/utils.js b/src/utils.js index 6a8bffd20..78c99d249 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,6 +6,7 @@ import { endOfMonth, startOfWeek, endOfWeek, + subMonths, } from 'date-fns'; export function calcFocusDate(currentFocusedDate, props) { @@ -26,7 +27,11 @@ export function calcFocusDate(currentFocusedDate, props) { } targetInterval.start = startOfMonth(targetInterval.start || new Date()); targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start); - const targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); + let targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); + + if (props.startOnPreviousMonth) { + targetDate = subMonths(targetDate, 1); + } // initial focus if (!currentFocusedDate) return shownDate || targetDate; From 43fb373e045913c68924b3147889bafafba31c21 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Wed, 27 Mar 2019 09:50:27 -0600 Subject: [PATCH 02/11] Start on previous month if shown more than 1 month --- src/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index 78c99d249..05e2cc9be 100644 --- a/src/utils.js +++ b/src/utils.js @@ -29,7 +29,7 @@ export function calcFocusDate(currentFocusedDate, props) { targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start); let targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); - if (props.startOnPreviousMonth) { + if (props.startOnPreviousMonth && props.months > 1) { targetDate = subMonths(targetDate, 1); } From 10257be0b3b89f3cd6e65848be474c3449a68887 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Wed, 27 Mar 2019 16:39:58 -0600 Subject: [PATCH 03/11] Create documentation sidebar navigation --- demo/src/components/Alfredo.js | 58 ++++++++++++++++++++++++++++++++++ demo/src/components/Sidebar.js | 55 ++++++++++++++++++++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 demo/src/components/Alfredo.js create mode 100644 demo/src/components/Sidebar.js diff --git a/demo/src/components/Alfredo.js b/demo/src/components/Alfredo.js new file mode 100644 index 000000000..97d204a41 --- /dev/null +++ b/demo/src/components/Alfredo.js @@ -0,0 +1,58 @@ +import React from 'react'; + +const Alfredo = props => ( + + + + + + + + + + + + + + +); + +export default Alfredo; diff --git a/demo/src/components/Sidebar.js b/demo/src/components/Sidebar.js new file mode 100644 index 000000000..3449745c3 --- /dev/null +++ b/demo/src/components/Sidebar.js @@ -0,0 +1,55 @@ +import React from 'react'; +import styled from 'styled-components'; +import Alfredo from './Alfredo'; + +const Aside = styled.aside` + background: #fff; + grid-area: sidebar; + width: 20vw; + height: 100vh; + position: sticky; + flex-basis: 20% 1 1; + left: 0; + top: 0; + box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1); +`; + +const List = styled.ul` + padding: 0; +`; + +const ListItem = styled.li` + width: 100%; + list-style: none; + padding: 8px 24px; + font-size: 18px; +`; + +const ListLink = styled.a` + text-decoration: none; + color: #333; + font-weight: 400; +`; + +function Sidebar() { + return ( + + ); +} + +export default Sidebar; From 4712e7b7bbf610d576e7495cd97499d980c407d4 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 10:00:17 -0600 Subject: [PATCH 04/11] Add `raw-loader` for markdown files --- package.json | 2 ++ webpack.config.js | 4 +++ yarn.lock | 90 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 95 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7c433771d..b2fefb4f0 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "jest": "^22.1.4", "jest-dom": "^3.1.3", "jest-styled-components": "^6.3.1", + "markdown-to-jsx": "^6.9.3", "normalize.css": "^7.0.0", "postcss": "^7.0.1", "postcss-cli": "^6.0.0", @@ -74,6 +75,7 @@ "postcss-loader": "^2.0.10", "precss": "^2.0.0", "prettier": "^1.9.2", + "raw-loader": "^2.0.0", "react": "16.4.2", "react-dom": "16.4.2", "react-hot-loader": "^3.1.3", diff --git a/webpack.config.js b/webpack.config.js index 02571ffb3..2e5027caa 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,6 +32,10 @@ module.exports = { test: /\.s?css$/, use: ['style-loader', 'css-loader', 'postcss-loader'], }, + { + test: /\.md$/, + use: ['raw-loader'], + }, ], }, plugins: [new HtmlWebpackPlugin({ template: path.resolve('demo/src/index.html') })], diff --git a/yarn.lock b/yarn.lock index e806ec3f0..9cb348b25 100644 --- a/yarn.lock +++ b/yarn.lock @@ -201,10 +201,20 @@ acorn@^5.0.0, acorn@^5.1.2, acorn@^5.2.1: version "5.3.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822" +ajv-errors@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d" + integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ== + ajv-keywords@^2.0.0, ajv-keywords@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762" +ajv-keywords@^3.1.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d" + integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw== + ajv@^4.9.1: version "4.11.8" resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536" @@ -221,6 +231,16 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0: fast-json-stable-stringify "^2.0.0" json-schema-traverse "^0.3.0" +ajv@^6.1.0: + version "6.10.0" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1" + integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg== + dependencies: + fast-deep-equal "^2.0.1" + fast-json-stable-stringify "^2.0.0" + json-schema-traverse "^0.4.1" + uri-js "^4.2.2" + align-text@^0.1.1, align-text@^0.1.3: version "0.1.4" resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117" @@ -2979,6 +2999,11 @@ fast-deep-equal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff" +fast-deep-equal@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" + integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk= + fast-diff@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154" @@ -4551,7 +4576,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-tokens@^4.0.0: +"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -4638,6 +4663,11 @@ json-schema-traverse@^0.3.0: version "0.3.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340" +json-schema-traverse@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" + integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg== + json-schema@0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" @@ -4849,6 +4879,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: dependencies: js-tokens "^3.0.0" +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + loud-rejection@^1.0.0: version "1.6.0" resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f" @@ -4897,6 +4934,14 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +markdown-to-jsx@^6.9.3: + version "6.9.3" + resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.9.3.tgz#31719e3c54517ba9805db81d53701b89f5d2ed7e" + integrity sha512-iXteiv317VZd1vk/PBH5MWMD4r0XWekoWCHRVVadBcnCtxavhtfV1UaEaQgq9KyckTv31L60ASh5ZVVrOh37Qg== + dependencies: + prop-types "^15.6.2" + unquote "^1.1.0" + math-expression-evaluator@^1.2.14: version "1.2.17" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac" @@ -6334,6 +6379,15 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.6.2: + version "15.7.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + proxy-addr@~2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec" @@ -6456,6 +6510,14 @@ raw-body@2.3.2: iconv-lite "0.4.19" unpipe "1.0.0" +raw-loader@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-2.0.0.tgz#e2813d9e1e3f80d1bbade5ad082e809679e20c26" + integrity sha512-kZnO5MoIyrojfrPWqrhFNLZemIAX8edMOCp++yC5RKxzFB3m92DqKNhKlU6+FvpOhWtvyh3jOaD7J6/9tpdIKg== + dependencies: + loader-utils "^1.1.0" + schema-utils "^1.0.0" + rc@^1.1.7: version "1.2.2" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077" @@ -6503,6 +6565,11 @@ react-is@^16.6.0, react-is@^16.8.4: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2" integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA== +react-is@^16.8.1: + version "16.8.5" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8" + integrity sha512-sudt2uq5P/2TznPV4Wtdi+Lnq3yaYW8LfvPKLM9BKD8jJNBkxMVyB0C9/GmVhLw7Jbdmndk/73n7XQGeN9A3QQ== + react-list@^0.8.8: version "0.8.8" resolved "https://registry.yarnpkg.com/react-list/-/react-list-0.8.8.tgz#de2cb768dd210fb3e4835b9277f158e9cd403078" @@ -6986,6 +7053,15 @@ schema-utils@^0.3.0: dependencies: ajv "^5.0.0" +schema-utils@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" + integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g== + dependencies: + ajv "^6.1.0" + ajv-errors "^1.0.0" + ajv-keywords "^3.1.0" + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -7773,6 +7849,11 @@ unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" +unquote@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544" + integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ= + unset-value@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559" @@ -7788,6 +7869,13 @@ upper-case@^1.1.1: version "1.1.3" resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598" +uri-js@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0" + integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ== + dependencies: + punycode "^2.1.0" + urix@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72" From d45dc651cb02c0a5107f5dbdacf03cfa2db24887 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 10:28:27 -0600 Subject: [PATCH 05/11] Create a new documentation based on the README --- demo/src/Docs.js | 36 +++++ demo/src/main.dev.js | 8 +- demo/src/main.js | 4 +- demo/src/pages/pickers/DemoCalendar.js | 31 ++++ demo/src/pages/pickers/DemoDateRange.js | 41 +++++ demo/src/pages/pickers/DemoDateRangePicker.js | 41 +++++ demo/src/pages/pickers/DemoDefinedRanges.js | 60 +++++++ demo/src/pages/pickers/index.js | 27 ++++ demo/src/pages/pickers/pickers.md | 146 ++++++++++++++++++ demo/src/styles/global.js | 83 ++++++++++ 10 files changed, 471 insertions(+), 6 deletions(-) create mode 100644 demo/src/Docs.js create mode 100644 demo/src/pages/pickers/DemoCalendar.js create mode 100644 demo/src/pages/pickers/DemoDateRange.js create mode 100644 demo/src/pages/pickers/DemoDateRangePicker.js create mode 100644 demo/src/pages/pickers/DemoDefinedRanges.js create mode 100644 demo/src/pages/pickers/index.js create mode 100644 demo/src/pages/pickers/pickers.md create mode 100644 demo/src/styles/global.js diff --git a/demo/src/Docs.js b/demo/src/Docs.js new file mode 100644 index 000000000..7df35de8e --- /dev/null +++ b/demo/src/Docs.js @@ -0,0 +1,36 @@ +import React from 'react'; +import styled from 'styled-components'; +import PickerDocs from './pages/pickers'; +import Sidebar from './components/Sidebar'; +import GlobalStyle from './styles/global'; + +const Wrapper = styled.div` + display: grid; + grid-template: 'sidebar content'; + grid-gap: 2rem; + padding-right: 2rem; +`; + +const Content = styled.div` + grid-area: content; + + > div { + width: 98%; + } +`; + +function Docs() { + return ( + + + + + + + + + + ); +} + +export default Docs; diff --git a/demo/src/main.dev.js b/demo/src/main.dev.js index 1d3255e2f..17c193310 100644 --- a/demo/src/main.dev.js +++ b/demo/src/main.dev.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { AppContainer } from 'react-hot-loader'; -import Main from './components/Main'; +import Docs from './Docs'; const render = Component => { ReactDOM.render( @@ -12,11 +12,11 @@ const render = Component => { ); }; -render(Main); +render(Docs); // Webpack Hot Module Replacement API if (module.hot) { - module.hot.accept('./components/Main', () => { - render(Main); + module.hot.accept('./Docs', () => { + render(Docs); }); } diff --git a/demo/src/main.js b/demo/src/main.js index d1217e3e9..5a0f64b16 100644 --- a/demo/src/main.js +++ b/demo/src/main.js @@ -1,5 +1,5 @@ import React from 'react'; import ReactDom from 'react-dom'; -import Main from './components/Main'; +import Docs from './Docs'; -ReactDom.render(
, document.getElementById('root')); +ReactDom.render(, document.getElementById('root')); diff --git a/demo/src/pages/pickers/DemoCalendar.js b/demo/src/pages/pickers/DemoCalendar.js new file mode 100644 index 000000000..bfcd13604 --- /dev/null +++ b/demo/src/pages/pickers/DemoCalendar.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Calendar } from '../../../../src'; + +class DemoCalendar extends React.Component { + constructor() { + super(); + this.state = { + date: null, + }; + } + + handleRangeChange(date) { + this.setState({ + date, + }); + } + + render() { + return ( + + ); + } +} + +export const MonthsDateDate = () => ; + +export default DemoCalendar; diff --git a/demo/src/pages/pickers/DemoDateRange.js b/demo/src/pages/pickers/DemoDateRange.js new file mode 100644 index 000000000..5414e6b39 --- /dev/null +++ b/demo/src/pages/pickers/DemoDateRange.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { DateRange } from '../../../../src'; + +class DemoDateRange extends React.Component { + constructor() { + super(); + this.state = { + range: { + selection: { + startDate: new Date(), + endDate: null, + key: 'selection', + }, + }, + }; + } + + handleRangeChange(payload) { + this.setState({ + range: { + ...this.state.range, + ...payload, + }, + }); + } + + render() { + console.log(this.props); + return ( + + ); + } +} + +export const MonthsDateDate = () => ; + +export default DemoDateRange; diff --git a/demo/src/pages/pickers/DemoDateRangePicker.js b/demo/src/pages/pickers/DemoDateRangePicker.js new file mode 100644 index 000000000..d3c1220a4 --- /dev/null +++ b/demo/src/pages/pickers/DemoDateRangePicker.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { DateRangePicker } from '../../../../src'; + +class DemoDateRangePicker extends React.Component { + constructor() { + super(); + this.state = { + range: { + selection: { + startDate: new Date(), + endDate: null, + key: 'selection', + }, + }, + }; + } + + handleRangeChange(payload) { + this.setState({ + range: { + ...this.state.range, + ...payload, + }, + }); + } + + render() { + console.log(this.props); + return ( + + ); + } +} + +export const MonthsDateDate = () => ; + +export default DemoDateRangePicker; diff --git a/demo/src/pages/pickers/DemoDefinedRanges.js b/demo/src/pages/pickers/DemoDefinedRanges.js new file mode 100644 index 000000000..2649d4fd0 --- /dev/null +++ b/demo/src/pages/pickers/DemoDefinedRanges.js @@ -0,0 +1,60 @@ +import React from 'react'; +import DefinedRange from '../../../../src/components/DefinedRange'; + +class DemoDefinedRanges extends React.Component { + constructor() { + super(); + this.state = { + range: { + selection: { + startDate: new Date(), + endDate: new Date(), + key: 'selection', + }, + }, + }; + } + + handleRangeChange(payload) { + this.setState({ + range: { + ...this.state.range, + ...payload, + }, + }); + } + + render() { + return ( + + ); + } +} + +const staticRanges = [ + { + label: 'My custom range', + hasCustomRendering: true, + range: () => ({ + startDate: new Date(), + endDate: new Date(), + }), + isSelected() { + return true; + }, + }, +]; + +function renderStaticRangeLabel(range) { + return {range.label}; +} + +export const CustomDefinedRange = () => ( + +); + +export default DemoDefinedRanges; diff --git a/demo/src/pages/pickers/index.js b/demo/src/pages/pickers/index.js new file mode 100644 index 000000000..226a2d7d0 --- /dev/null +++ b/demo/src/pages/pickers/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import Markdown from 'markdown-to-jsx'; +import markdownDoc from './pickers.md'; +import DemoDateRange, { MonthsDateDate } from './DemoDateRange'; +import DemoDefinedRanges, { CustomDefinedRange } from './DemoDefinedRanges'; +import DemoDateRangePicker from './DemoDateRangePicker'; +import DemoCalendar from './DemoCalendar'; + +function Picker() { + return ( + + {markdownDoc} + + ); +} + +export default Picker; diff --git a/demo/src/pages/pickers/pickers.md b/demo/src/pages/pickers/pickers.md new file mode 100644 index 000000000..48c66f685 --- /dev/null +++ b/demo/src/pages/pickers/pickers.md @@ -0,0 +1,146 @@ +# Pickers + +The date pickers are built on top of the `react-date-range` library. + +## Calendar + +### Demo + +
+ +
+ +| Property | type | Default Value | Desctiption | +| ----------------------- | ------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| locale | Object | enUS from locale | you can view full list from [here](https://github.com/kevindantas/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages). | +| className | String | | wrapper classname | +| months | Number | 1 | rendered month count | +| showSelectionPreview | Boolean | true | show preview on focused/hovered dates | +| showMonthAndYearPickers | Boolean | true | show select tags for month and year on calendar top, if false it will just display the month and year | +| shownDate | Date | | initial focus date | +| minDate | Date | | defines minimum date. Disabled earlier dates | +| maxDate | Date | | defines maximum date. Disabled later dates | +| direction | String | 'horizontal' | direction of calendar months. can be `vertical` or `horizontal` | +| disabledDates | Date[] | [] | dates that are disabled | +| scroll | Object | { enabled: false } | infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section | +| showMonthArrow | Boolean | true | show/hide month arrow button | +| navigatorRenderer | Func | | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object) | +| onChange | Func | | callback function for date changes. fn(date: Date) | +| color(Calenday only) | String | `#3d91ff` | defines color for selected date in Calendar | +| date(Calendar only) | Date | | date value for Calendar | + +## Date Range + +This component allows the `Calendar` to select a range of dates, so the props supported by the `Calendar` are supported by the `DateRange` as well. + +### Simple Date Range + +
+ +
+ +### Date Range with 2 months + +
+ +
+ +### API + +| Property | type | Default Value | Desctiption | +| ------------------------- | ----------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ranges | \*Object[] | [] | Defines ranges. array of range object | +| onChange | \*Func | | callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties. | +| narrow | Boolean | false | Adjust layout for mobile | +| showDateDisplay | Boolean | false | show/hide selection display row. Uses `dateDisplayFormat` for formatter | +| onShownDateChange | Function | | Callback function that is called when the shown date changes | +| initialFocusedRange | Object | | Initial value for focused range. See `focusedRange` for usage. | +| rangeColors | `['#3d91ff', '#3ecf8e', '#fed14c']` | | defines color for selection preview. | +| focusedRange | Object | | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate). | +| onRangeFocusChange | Object | | Callback function for focus changes | +| preview | Object | | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }` | +| showPreview | bool | true | visibility of preview | +| dragSelectionEnabled | bool | true | whether dates can be selected via drag n drop | +| onPreviewChange | Object | | Callback function for preview changes | +| dateDisplayFormat | String | `MMM D, YYYY` | selected range preview formatter. Check out [date-fns's format option] | +| moveRangeOnFirstSelection | Boolean | false | move range on startDate selection. Otherwise endDate will replace with startDate. | + +## Defined Ranges + +### Default DefinedRange + +
+ +
+ +### Custom DefinedRange + +
+ +
+ +| Property | type | Default Value | Desctiption | +| ---------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| renderStaticRangeLabel | `Function(staticRange)` | null | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered. | +| ranges | `RangeShape` | null | Ranges selected | +| staticRanges | `Array` | [default preDefined ranges](https://github.com/kevindantas/react-date-range/blob/master/src/defaultRanges.js) | Pre defined ranges | +| rangeColors | `Array` | `['#3d91ff', '#3ecf8e', '#fed14c']` | Range colors | +| inputRanges | `Array` | [default input ranges](https://github.com/kevindantas/react-date-range/blob/master/src/defaultRanges.js) | Inputs used to select a range | +| headerContent | `any` | - | Header | +| footerContent | `any` | - | Footer | +| onPreviewChange | `Function()` | - | Callback when change the preview | +| onChange | `Function(changeRange)` | - | Callback function when change a selection | + +## Date Range Picker + +The DateRangePicker component is the combination of both `DateRange` and `DefinedRanges` components. + +### Demo + +
+ +
+ +All props from `DateRange` and `DefinedRange` are supported for this component. + +#### Shapes + +```js +RangeShape { + startDate: PropTypes.object, + endDate: PropTypes.object, + color: PropTypes.string, + key: PropTypes.string, + autoFocus: PropTypes.bool, + disabled: PropTypes.bool, + showDateDisplay: PropTypes.bool, +} + +InputShape { + label: String, + range: Function(value) => ({ startDate: Date, endDate: Date }) + getCurrentValue: Function(range) => int, +} + +StaticRange { + label: string, + range: Function() => ({ startDate: defineds.startOfToday, endDate: defineds.endOfToday, }), +}, +``` + +### Infinite Scrolled Mode + +To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly. +If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/withs with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop. + +```js +// shape of scroll prop +scroll: { + enabled: PropTypes.bool, + monthHeight: PropTypes.number, + longMonthHeight: PropTypes.number, // some months has 1 more row than others + monthWidth: PropTypes.number, // just used when direction="horizontal" + calendarWidth: PropTypes.number, // defaults monthWidth * months + calendarHeight: PropTypes.number, // defaults monthHeight * months +}, +``` diff --git a/demo/src/styles/global.js b/demo/src/styles/global.js new file mode 100644 index 000000000..b6f62c5ae --- /dev/null +++ b/demo/src/styles/global.js @@ -0,0 +1,83 @@ +import { createGlobalStyle } from 'styled-components'; + +export default createGlobalStyle` + * { + box-sizing: border-box; + } + + body, + html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + background-color: rgb(249, 250, 253); + box-sizing: border-box; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 300; + } + + pre, code { + font-family: 'Fira Code', monospace; + } + + pre { + background: #233; + color: #fff; + padding: 2rem 1rem; + border-radius: 7px; + box-shadow: 1px 5px 10px rgba(0,0,0,.4); + } + + body * { + box-sizing: inherit; + } + + .cf:before, + .cf:after { + content: " "; + display: table; + } + + .cf:after { + clear: both; + } + + table { + border-collapse: collapse; + + thead { + background: #f3f3f3; + + tr { + border-bottom-width: 2px; + } + } + + tr { + border-bottom: 1px solid #ccc; + } + + td, th { + padding: 1rem + text-align: left; + } + } + + .demo { + background: #fafafa; + text-align: center; + padding: 2rem; + border-radius: 7px; + box-shadow: 1px 20px 20px rgba(41, 60, 74, 0.18); + margin-bottom: 3rem; + > div { + margin: auto; + } + } + + h2 { + margin-top: 8rem; + } +`; From b9672b1cde45c155d77f5fe4aacda45267123174 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 10:28:41 -0600 Subject: [PATCH 06/11] Add Fira font family --- demo/src/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/src/index.html b/demo/src/index.html index 4a5624c72..46376a85d 100644 --- a/demo/src/index.html +++ b/demo/src/index.html @@ -6,6 +6,7 @@ React Date Range Demo +
From f3d00574ddbba72a1bcd000805eda8e792b6bea1 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 10:29:15 -0600 Subject: [PATCH 07/11] Disable drag for displayMode=date --- src/components/Calendar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Calendar.js b/src/components/Calendar.js index c65d7fca1..ce1c24bad 100644 --- a/src/components/Calendar.js +++ b/src/components/Calendar.js @@ -216,7 +216,8 @@ class Calendar extends PureComponent { ); } onDragSelectionStart(date) { - const { onChange, dragSelectionEnabled } = this.props; + const { displayMode, onChange, dragSelectionEnabled } = this.props; + if (displayMode === 'date') return; if (dragSelectionEnabled) { this.setState({ @@ -401,7 +402,6 @@ class Calendar extends PureComponent { Calendar.defaultProps = { startOnPreviousMonth: true, disabledDates: [], - classNames: {}, locale: defaultLocale, ranges: [], focusedRange: [0, 0], @@ -415,7 +415,7 @@ Calendar.defaultProps = { scroll: { enabled: false, }, - direction: 'vertical', + direction: 'horizontal', maxDate: addYears(new Date(), 20), minDate: addYears(new Date(), -100), rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], From 63602da7d096c6643a08cb13130756ce42e84dc6 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 10:30:59 -0600 Subject: [PATCH 08/11] Add Calendar link and reorder the links --- demo/src/components/Sidebar.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/demo/src/components/Sidebar.js b/demo/src/components/Sidebar.js index 3449745c3..088d10832 100644 --- a/demo/src/components/Sidebar.js +++ b/demo/src/components/Sidebar.js @@ -5,7 +5,7 @@ import Alfredo from './Alfredo'; const Aside = styled.aside` background: #fff; grid-area: sidebar; - width: 20vw; + width: 15vw; height: 100vh; position: sticky; flex-basis: 20% 1 1; @@ -29,24 +29,35 @@ const ListLink = styled.a` text-decoration: none; color: #333; font-weight: 400; + display: block; +`; + +const Logo = styled(Alfredo)` + width: 50%; + height: 140px; + margin: 1rem; `; function Sidebar() { return ( ); From eaa5bbd421ed8e479da35fe000d0afbf5016ae22 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 10:32:30 -0600 Subject: [PATCH 09/11] Fix DayCell borders on displayMode=date --- src/components/DayCell.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DayCell.js b/src/components/DayCell.js index a86c30272..a6287e5e2 100644 --- a/src/components/DayCell.js +++ b/src/components/DayCell.js @@ -112,11 +112,11 @@ class DayCell extends Component { ); } renderSelectionPlaceholders() { - const { styles, ranges, day } = this.props; + const { ranges, day } = this.props; if (this.props.displayMode === 'date') { let isSelected = isSameDay(this.props.day, this.props.date); return isSelected ? ( - + ) : null; } From 7bbadd40cf01f68156361045ab4073073268c726 Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 11:14:51 -0600 Subject: [PATCH 10/11] Fix typo --- demo/src/pages/pickers/pickers.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/src/pages/pickers/pickers.md b/demo/src/pages/pickers/pickers.md index 48c66f685..3a10a22a3 100644 --- a/demo/src/pages/pickers/pickers.md +++ b/demo/src/pages/pickers/pickers.md @@ -10,7 +10,7 @@ The date pickers are built on top of the `react-date-range` library. -| Property | type | Default Value | Desctiption | +| Property | type | Default Value | Description | | ----------------------- | ------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | locale | Object | enUS from locale | you can view full list from [here](https://github.com/kevindantas/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages). | | className | String | | wrapper classname | @@ -47,7 +47,7 @@ This component allows the `Calendar` to select a range of dates, so the props su ### API -| Property | type | Default Value | Desctiption | +| Property | type | Default Value | Description | | ------------------------- | ----------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ranges | \*Object[] | [] | Defines ranges. array of range object | | onChange | \*Func | | callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties. | @@ -79,7 +79,7 @@ This component allows the `Calendar` to select a range of dates, so the props su -| Property | type | Default Value | Desctiption | +| Property | type | Default Value | Description | | ---------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | renderStaticRangeLabel | `Function(staticRange)` | null | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered. | | ranges | `RangeShape` | null | Ranges selected | From 4cd3b2d58a8c504291e8de204f0deb50cc36fe7c Mon Sep 17 00:00:00 2001 From: Kevin Dantas Date: Thu, 28 Mar 2019 11:29:18 -0600 Subject: [PATCH 11/11] Layout improves Feat. Michel --- demo/src/Docs.js | 1 + demo/src/styles/global.js | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/demo/src/Docs.js b/demo/src/Docs.js index 7df35de8e..798fcf2cd 100644 --- a/demo/src/Docs.js +++ b/demo/src/Docs.js @@ -15,6 +15,7 @@ const Content = styled.div` grid-area: content; > div { + display: grid; width: 98%; } `; diff --git a/demo/src/styles/global.js b/demo/src/styles/global.js index b6f62c5ae..edd085c25 100644 --- a/demo/src/styles/global.js +++ b/demo/src/styles/global.js @@ -1,5 +1,7 @@ import { createGlobalStyle } from 'styled-components'; +const tableHeadColor = '#3e484f'; + export default createGlobalStyle` * { box-sizing: border-box; @@ -16,6 +18,7 @@ export default createGlobalStyle` font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 300; + color: #455A64; } pre, code { @@ -48,10 +51,12 @@ export default createGlobalStyle` border-collapse: collapse; thead { - background: #f3f3f3; + text-transform: capitalize; tr { border-bottom-width: 2px; + border-color: ${tableHeadColor}; + color: ${tableHeadColor}; } } @@ -60,7 +65,7 @@ export default createGlobalStyle` } td, th { - padding: 1rem + padding: 1rem; text-align: left; } } @@ -68,16 +73,19 @@ export default createGlobalStyle` .demo { background: #fafafa; text-align: center; - padding: 2rem; + padding: 0; border-radius: 7px; box-shadow: 1px 20px 20px rgba(41, 60, 74, 0.18); margin-bottom: 3rem; + display: block; + margin: 48px auto; + box-sizing: border-box; > div { margin: auto; } } h2 { - margin-top: 8rem; + margin-top: 7rem; } `;