Skip to content

Commit 6154361

Browse files
emersonlaurentinoarthurdenner
emersonlaurentino
authored and
arthurdenner
committed
feat(datepicker): Adding new prop pointing that controls where to render the calendar (#5)
Closes #1 * feat(calendar): add prop pointing * feat(datepicker): add prop pointing * feat(stories): add pointing examples * chore(contribuitors): add me to contributors * fix(datepicker): remove console * feat(calendar): support pointing bottom and top * fix(pointing): remove props
1 parent 755bf87 commit 6154361

File tree

6 files changed

+202
-45
lines changed

6 files changed

+202
-45
lines changed

‎.all-contributorsrc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@
2121
"example",
2222
"ideas"
2323
]
24+
},
25+
{
26+
"login": "emersonlaurentino",
27+
"name": "Emerson Laurentino",
28+
"avatar_url": "https://avatars2.githubusercontent.com/u/10627086?v=4",
29+
"profile": "https://twitter.com/elaurent_",
30+
"contributions": [
31+
"code",
32+
"ideas",
33+
"doc",
34+
"example"
35+
]
2436
}
2537
]
2638
}

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Datepickers built with [Semantic UI for React][semantic-ui-react] and [Dayzed][d
44

55
[![version][version-badge]][package]
66
[![MIT License][license-badge]][license]
7-
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
7+
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
88

99
## Overview
1010

@@ -131,8 +131,8 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
131131

132132
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
133133
<!-- prettier-ignore -->
134-
| [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Code") [🎨](#design-arthurdenner "Design") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Documentation") [💡](#example-arthurdenner "Examples") [🤔](#ideas-arthurdenner "Ideas, Planning, & Feedback") |
135-
| :---: |
134+
| [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Code") [🎨](#design-arthurdenner "Design") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Documentation") [💡](#example-arthurdenner "Examples") [🤔](#ideas-arthurdenner "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Code") [🤔](#ideas-emersonlaurentino "Ideas, Planning, & Feedback") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Documentation") [💡](#example-emersonlaurentino "Examples") |
135+
| :---: | :---: |
136136

137137
<!-- ALL-CONTRIBUTORS-LIST:END -->
138138

‎src/components/calendar/calendar.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,24 @@
2727
border: 1px solid rgba(0, 0, 0, 0.1);
2828
border-radius: 0.28571429rem;
2929
}
30+
31+
.clndr-left {
32+
left: 0;
33+
}
34+
35+
.clndr-right {
36+
right: 0;
37+
}
38+
39+
.clndr-top {
40+
bottom: 100%;
41+
}
42+
43+
.clndr-bottom {
44+
top: 100%;
45+
}
46+
47+
.clndr-calendars-segment.clndr-top {
48+
box-shadow: 0 -1px 2px 0 rgba(34, 36, 38, 0.15) !important;
49+
margin-bottom: 0.25rem !important;
50+
}

‎src/components/calendar/calendar.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Fragment } from 'react';
22
import PropTypes from 'prop-types';
3+
import cn from 'classnames';
34
import { Segment } from 'semantic-ui-react';
45
import Button from '../button';
56
import TodayButton from '../today-button';
@@ -12,6 +13,13 @@ const styles = {
1213
rightBtn: { textAlign: 'end' },
1314
};
1415

16+
const pointings = {
17+
'top left': 'clndr-top clndr-left',
18+
'top right': 'clndr-top clndr-right',
19+
left: 'clndr-left',
20+
right: 'clndr-right',
21+
};
22+
1523
const Calendar = ({
1624
calendars,
1725
getBackProps,
@@ -27,8 +35,9 @@ const Calendar = ({
2735
showToday,
2836
todayButton,
2937
weekdays,
38+
pointing,
3039
}) => (
31-
<Segment className="clndr-calendars-segment">
40+
<Segment className={cn('clndr-calendars-segment', pointings[pointing])}>
3241
<div
3342
className="clndr-calendars-wrapper"
3443
style={{ '--n': calendars.length }}
@@ -129,6 +138,7 @@ Calendar.propTypes = {
129138
months: PropTypes.array.isRequired,
130139
nextMonth: PropTypes.string.isRequired,
131140
nextYear: PropTypes.string.isRequired,
141+
pointing: PropTypes.oneOf(['left', 'right', 'top left', 'top right']),
132142
previousMonth: PropTypes.string.isRequired,
133143
previousYear: PropTypes.string.isRequired,
134144
showToday: PropTypes.bool,
@@ -137,6 +147,7 @@ Calendar.propTypes = {
137147
};
138148

139149
Calendar.defaultProps = {
150+
pointing: 'left',
140151
maxDate: null,
141152
minDate: null,
142153
showToday: true,

‎src/components/datepicker.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import RangeDatePicker from '../pickers/range';
88
import Calendar from './calendar';
99
import Input from './input';
1010

11-
const style = { display: 'inline-block' };
11+
const style = { display: 'inline-block', position: 'relative' };
1212
const semanticInputProps = [
1313
'disabled',
1414
'error',
@@ -39,9 +39,11 @@ class SemanticDatepicker extends React.Component {
3939
PropTypes.instanceOf(Date),
4040
]),
4141
type: PropTypes.oneOf(['basic', 'range']),
42+
pointing: PropTypes.oneOf(['left', 'right', 'top left', 'top right']),
4243
};
4344

4445
static defaultProps = {
46+
pointing: 'left',
4547
clearable: true,
4648
keepOpenOnClear: false,
4749
keepOpenOnSelect: false,
@@ -212,7 +214,7 @@ class SemanticDatepicker extends React.Component {
212214

213215
render() {
214216
const { isVisible, selectedDate, selectedDateFormatted } = this.state;
215-
const { clearable, locale } = this.props;
217+
const { clearable, locale, pointing } = this.props;
216218

217219
return (
218220
<div
@@ -242,6 +244,7 @@ class SemanticDatepicker extends React.Component {
242244
{...this.dayzedProps}
243245
{...props}
244246
{...locale}
247+
pointing={pointing}
245248
weekdays={this.weekdays}
246249
/>
247250
)}

‎stories/index.js

Lines changed: 149 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,171 @@ import 'semantic-ui-css/semantic.min.css';
55
import SemanticDatepicker from '../src';
66
import localePtBr from '../src/locales/pt-BR';
77

8+
const Content = ({ children, style }) => (
9+
<div
10+
style={Object.assign(
11+
{},
12+
{ display: 'flex', flex: 1, justifyContent: 'center' },
13+
style
14+
)}
15+
>
16+
{children}
17+
</div>
18+
);
19+
820
storiesOf('Examples', module)
9-
.add('Basic', () => <SemanticDatepicker onDateChange={console.log} />)
21+
.add('Basic', () => (
22+
<Content>
23+
<SemanticDatepicker onDateChange={console.log} />
24+
</Content>
25+
))
1026
.add('Basic with firstDayOfWeek', () => (
11-
<SemanticDatepicker firstDayOfWeek={3} onDateChange={console.log} />
27+
<Content>
28+
<SemanticDatepicker firstDayOfWeek={3} onDateChange={console.log} />
29+
</Content>
1230
))
1331
.add('Basic with outside days', () => (
14-
<SemanticDatepicker showOutsideDays onDateChange={console.log} />
32+
<Content>
33+
<SemanticDatepicker showOutsideDays onDateChange={console.log} />
34+
</Content>
1535
))
1636
.add('Basic with format prop', () => (
17-
<SemanticDatepicker format="DD/MM/YYYY" onDateChange={console.log} />
37+
<Content>
38+
<SemanticDatepicker format="DD/MM/YYYY" onDateChange={console.log} />
39+
</Content>
1840
))
1941
.add('Range', () => (
20-
<SemanticDatepicker type="range" onDateChange={console.log} />
42+
<Content>
43+
<SemanticDatepicker type="range" onDateChange={console.log} />
44+
</Content>
45+
))
46+
.add('Range with right pointing', () => (
47+
<Content>
48+
<SemanticDatepicker
49+
type="range"
50+
pointing="right"
51+
onDateChange={console.log}
52+
/>
53+
</Content>
2154
))
2255
.add('Range with firstDayOfWeek', () => (
23-
<SemanticDatepicker
24-
type="range"
25-
firstDayOfWeek={6}
26-
onDateChange={console.log}
27-
/>
56+
<Content>
57+
<SemanticDatepicker
58+
type="range"
59+
firstDayOfWeek={6}
60+
onDateChange={console.log}
61+
/>
62+
</Content>
2863
))
2964
.add('Range with outside days', () => (
30-
<SemanticDatepicker
31-
type="range"
32-
showOutsideDays
33-
onDateChange={console.log}
34-
/>
65+
<Content>
66+
<SemanticDatepicker
67+
type="range"
68+
showOutsideDays
69+
onDateChange={console.log}
70+
/>
71+
</Content>
3572
))
3673
.add('Range with format prop', () => (
37-
<SemanticDatepicker
38-
type="range"
39-
format="DD/MM/YYYY"
40-
onDateChange={console.log}
41-
/>
74+
<Content>
75+
<SemanticDatepicker
76+
type="range"
77+
format="DD/MM/YYYY"
78+
onDateChange={console.log}
79+
/>
80+
</Content>
4281
))
4382
.add('Basic with brazilian portuguese locale', () => (
44-
<SemanticDatepicker
45-
onDateChange={console.log}
46-
format="DD/MM/YYYY"
47-
locale={localePtBr}
48-
/>
83+
<Content>
84+
<SemanticDatepicker
85+
onDateChange={console.log}
86+
format="DD/MM/YYYY"
87+
locale={localePtBr}
88+
/>
89+
</Content>
4990
))
5091
.add('Basic as form component', () => (
51-
<Form>
52-
<Form.Group width="equals">
53-
<SemanticDatepicker
54-
label="Birth date"
55-
id="birthDate"
56-
onDateChange={console.log}
57-
/>
58-
<SemanticDatepicker
59-
label="Start date"
60-
id="startDate"
61-
onDateChange={console.log}
62-
/>
63-
</Form.Group>
64-
</Form>
92+
<Content>
93+
<Form>
94+
<Form.Group width="equals">
95+
<SemanticDatepicker
96+
label="Birth date"
97+
id="birthDate"
98+
onDateChange={console.log}
99+
/>
100+
<SemanticDatepicker
101+
label="Start date"
102+
id="startDate"
103+
onDateChange={console.log}
104+
/>
105+
</Form.Group>
106+
</Form>
107+
</Content>
108+
))
109+
.add('Basic with left pointing', () => (
110+
<Content>
111+
<SemanticDatepicker pointing="left" onDateChange={console.log} />
112+
</Content>
113+
))
114+
.add('Basic with right pointing', () => (
115+
<Content>
116+
<SemanticDatepicker pointing="right" onDateChange={console.log} />
117+
</Content>
118+
))
119+
.add('Basic with top pointing', () => (
120+
<Content
121+
style={{
122+
alignItems: 'flex-end',
123+
position: 'absolute',
124+
left: 0,
125+
right: 0,
126+
bottom: 0,
127+
top: 0,
128+
}}
129+
>
130+
<SemanticDatepicker pointing="top" onDateChange={console.log} />
131+
</Content>
132+
))
133+
.add('Basic with top left pointing', () => (
134+
<Content
135+
style={{
136+
alignItems: 'flex-end',
137+
position: 'absolute',
138+
left: 0,
139+
right: 0,
140+
bottom: 0,
141+
top: 0,
142+
}}
143+
>
144+
<SemanticDatepicker pointing="top left" onDateChange={console.log} />
145+
</Content>
146+
))
147+
.add('Basic with top right pointing', () => (
148+
<Content
149+
style={{
150+
alignItems: 'flex-end',
151+
position: 'absolute',
152+
left: 0,
153+
right: 0,
154+
bottom: 0,
155+
top: 0,
156+
}}
157+
>
158+
<SemanticDatepicker pointing="top right" onDateChange={console.log} />
159+
</Content>
160+
))
161+
.add('Basic with bottom pointing', () => (
162+
<Content>
163+
<SemanticDatepicker pointing="bottom" onDateChange={console.log} />
164+
</Content>
165+
))
166+
.add('Basic with bottom left pointing', () => (
167+
<Content>
168+
<SemanticDatepicker pointing="bottom left" onDateChange={console.log} />
169+
</Content>
170+
))
171+
.add('Basic with bottom right pointing', () => (
172+
<Content>
173+
<SemanticDatepicker pointing="bottom right" onDateChange={console.log} />
174+
</Content>
65175
));

0 commit comments

Comments
 (0)