Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Input Icon--calendar position #627

Merged
merged 11 commits into from
Aug 15, 2017
Merged

Custom Input Icon--calendar position #627

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0a2d7eb
Add props to display calendar icon on right side
mariepw Jul 17, 2017
3430bdf
Fix #625 - improve code
mariepw Jul 18, 2017
3a13698
Fix #625 - Fix linting
mariepw Jul 18, 2017
dc12667
Fix requested changes. Fixes #625
mariepw Jul 19, 2017
8376028
Fix padding spaces in curly braces
mariepw Jul 19, 2017
8a62d98
Fix build failed
mariepw Jul 19, 2017
05a0d96
Fix warning in console 'Invalid argument supplied to oneOf, expected …
mariepw Jul 19, 2017
f8c583c
Fix #625 - Extract code into reusable variables - create shape for ic…
mariepw Jul 20, 2017
10def22
Merge branch 'master' into CustomPositionIcon
mariepw Aug 3, 2017
e572cb4
Fix #625 - Use constant value and remove render method which was too …
mariepw Aug 10, 2017
2195730
Fix #625 - Rename AFTER_POSITION to ICON_AFTER_POSITION to be consist…
mariepw Aug 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/DateRangePicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const defaultProps = {
screenReaderInputMessage: '',
showClearDates: false,
showDefaultInputIcon: false,
showInputIconRight: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's avoid using terms like "Right" - in an RTL world, "after" is more appropriate.

customInputIcon: null,
customArrowIcon: null,
customCloseIcon: null,
Expand Down Expand Up @@ -395,6 +396,7 @@ export default class DateRangePicker extends React.Component {
screenReaderInputMessage,
showClearDates,
showDefaultInputIcon,
showInputIconRight,
customInputIcon,
customArrowIcon,
customCloseIcon,
Expand Down Expand Up @@ -434,6 +436,7 @@ export default class DateRangePicker extends React.Component {
showClearDates={showClearDates}
showCaret={!withPortal && !withFullScreenPortal}
showDefaultInputIcon={showDefaultInputIcon}
showInputIconRight={showInputIconRight}
customInputIcon={customInputIcon}
customArrowIcon={customArrowIcon}
customCloseIcon={customCloseIcon}
Expand Down
34 changes: 24 additions & 10 deletions src/components/DateRangePickerInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const propTypes = forbidExtraProps({
readOnly: PropTypes.bool,
showCaret: PropTypes.bool,
showDefaultInputIcon: PropTypes.bool,
showInputIconRight: PropTypes.bool,
customInputIcon: PropTypes.node,
customArrowIcon: PropTypes.node,
customCloseIcon: PropTypes.node,
Expand Down Expand Up @@ -87,6 +88,7 @@ const defaultProps = {
readOnly: false,
showCaret: false,
showDefaultInputIcon: false,
showInputIconRight: false,
customInputIcon: null,
customArrowIcon: null,
customCloseIcon: null,
Expand All @@ -109,6 +111,7 @@ export default class DateRangePickerInput extends React.Component {

this.onClearDatesMouseEnter = this.onClearDatesMouseEnter.bind(this);
this.onClearDatesMouseLeave = this.onClearDatesMouseLeave.bind(this);
this.renderInputIcon = this.renderInputIcon.bind(this);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't need to be bound.

}

onClearDatesMouseEnter() {
Expand All @@ -123,6 +126,18 @@ export default class DateRangePickerInput extends React.Component {
});
}

renderInputIcon(inputIcon) {
return (<button
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the ( should end the line, and the ) should begin the line - iow:

return (
  <button
    type="button"
    className="DateRangePickerInput__calendar-icon"
    disabled={this.props.disabled}
    aria-label={this.props.phrases.focusStartDate}
    onClick={this.props.onArrowDown}
  >
    {inputIcon}
  </button>
);

Also, please destructure all props at the top of the function.

type="button"
className="DateRangePickerInput__calendar-icon"
disabled={this.props.disabled}
aria-label={this.props.phrases.focusStartDate}
onClick={this.props.onArrowDown}
>
{inputIcon}
</button>);
}

render() {
const { isClearDatesHovered } = this.state;
const {
Expand Down Expand Up @@ -152,6 +167,7 @@ export default class DateRangePickerInput extends React.Component {
readOnly,
showCaret,
showDefaultInputIcon,
showInputIconRight,
customInputIcon,
customArrowIcon,
customCloseIcon,
Expand All @@ -172,16 +188,9 @@ export default class DateRangePickerInput extends React.Component {
'DateRangePickerInput--rtl': isRTL,
})}
>
{(showDefaultInputIcon || customInputIcon !== null) && (
<button
type="button"
className="DateRangePickerInput__calendar-icon"
disabled={disabled}
aria-label={phrases.focusStartDate}
onClick={onArrowDown}
>
{inputIcon}
</button>

{(!showInputIconRight && (showDefaultInputIcon || customInputIcon !== null)) && (
this.renderInputIcon(inputIcon)
)}

<DateInput
Expand Down Expand Up @@ -249,6 +258,11 @@ export default class DateRangePickerInput extends React.Component {
</div>
</button>
)}

{(showInputIconRight && (showDefaultInputIcon || customInputIcon !== null)) && (
this.renderInputIcon(inputIcon)
)}

</div>
);
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/DateRangePickerInputController.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const propTypes = forbidExtraProps({
showClearDates: PropTypes.bool,
showCaret: PropTypes.bool,
showDefaultInputIcon: PropTypes.bool,
showInputIconRight: PropTypes.bool,
disabled: PropTypes.bool,
required: PropTypes.bool,
readOnly: PropTypes.bool,
Expand Down Expand Up @@ -79,6 +80,7 @@ const defaultProps = {
showClearDates: false,
showCaret: false,
showDefaultInputIcon: false,
showInputIconRight: false,
disabled: false,
required: false,
readOnly: false,
Expand Down Expand Up @@ -227,6 +229,7 @@ export default class DateRangePickerInputController extends React.Component {
showClearDates,
showCaret,
showDefaultInputIcon,
showInputIconRight,
customInputIcon,
customArrowIcon,
customCloseIcon,
Expand Down Expand Up @@ -263,6 +266,7 @@ export default class DateRangePickerInputController extends React.Component {
readOnly={readOnly}
showCaret={showCaret}
showDefaultInputIcon={showDefaultInputIcon}
showInputIconRight={showInputIconRight}
customInputIcon={customInputIcon}
customArrowIcon={customArrowIcon}
customCloseIcon={customCloseIcon}
Expand Down
3 changes: 3 additions & 0 deletions src/components/SingleDatePicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const defaultProps = {
screenReaderInputMessage: '',
showClearDate: false,
showDefaultInputIcon: false,
showInputIconRight: false,
customInputIcon: null,
customCloseIcon: null,

Expand Down Expand Up @@ -391,6 +392,7 @@ export default class SingleDatePicker extends React.Component {
readOnly,
showClearDate,
showDefaultInputIcon,
showInputIconRight,
customInputIcon,
date,
phrases,
Expand Down Expand Up @@ -422,6 +424,7 @@ export default class SingleDatePicker extends React.Component {
onClearDate={this.clearDate}
showClearDate={showClearDate}
showDefaultInputIcon={showDefaultInputIcon}
showInputIconRight={showInputIconRight}
customInputIcon={customInputIcon}
displayValue={displayValue}
inputValue={inputValue}
Expand Down
32 changes: 22 additions & 10 deletions src/components/SingleDatePickerInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const propTypes = forbidExtraProps({
showClearDate: PropTypes.bool,
customCloseIcon: PropTypes.node,
showDefaultInputIcon: PropTypes.bool,
showInputIconRight: PropTypes.bool,
customInputIcon: PropTypes.node,
isRTL: PropTypes.bool,
onChange: PropTypes.func,
Expand All @@ -51,6 +52,7 @@ const defaultProps = {
showCaret: false,
showClearDate: false,
showDefaultInputIcon: false,
showInputIconRight: false,
customCloseIcon: null,
customInputIcon: null,
isRTL: false,
Expand All @@ -75,6 +77,7 @@ export default class SingleDatePickerInput extends React.Component {

this.onClearDateMouseEnter = this.onClearDateMouseEnter.bind(this);
this.onClearDateMouseLeave = this.onClearDateMouseLeave.bind(this);
this.renderInputIcon = this.renderInputIcon.bind(this);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

doesn't need to be bound

}

onClearDateMouseEnter() {
Expand All @@ -89,6 +92,18 @@ export default class SingleDatePickerInput extends React.Component {
});
}

renderInputIcon(inputIcon) {
return (<button
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indentation and prop destructuring here also

type="button"
className="SingleDatePickerInput__calendar-icon"
disabled={this.props.disabled}
aria-label={this.props.phrases.focusStartDate}
onClick={this.props.onFocus}
>
{inputIcon}
</button>);
}

render() {
const { isClearDateHovered } = this.state;
const {
Expand All @@ -104,6 +119,7 @@ export default class SingleDatePickerInput extends React.Component {
showCaret,
showClearDate,
showDefaultInputIcon,
showInputIconRight,
phrases,
onClearDate,
onChange,
Expand All @@ -127,16 +143,8 @@ export default class SingleDatePickerInput extends React.Component {
'SingleDatePickerInput--rtl': isRTL,
})}
>
{(showDefaultInputIcon || customInputIcon !== null) && (
<button
type="button"
className="SingleDatePickerInput__calendar-icon"
disabled={disabled}
aria-label={phrases.focusStartDate}
onClick={onFocus}
>
{inputIcon}
</button>
{(!showInputIconRight && (showDefaultInputIcon || customInputIcon !== null)) && (
this.renderInputIcon(inputIcon)
)}
<DateInput
id={id}
Expand Down Expand Up @@ -174,6 +182,10 @@ export default class SingleDatePickerInput extends React.Component {
</div>
</button>
)}
{(showInputIconRight && (showDefaultInputIcon || customInputIcon !== null)) && (
this.renderInputIcon(inputIcon)
)}

</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/shapes/DateRangePickerShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default {
screenReaderInputMessage: PropTypes.string,
showClearDates: PropTypes.bool,
showDefaultInputIcon: PropTypes.bool,
showInputIconRight: PropTypes.bool,
customInputIcon: PropTypes.node,
customArrowIcon: PropTypes.node,
customCloseIcon: PropTypes.node,
Expand Down
1 change: 1 addition & 0 deletions src/shapes/SingleDatePickerShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default {
showClearDate: PropTypes.bool,
customCloseIcon: PropTypes.node,
showDefaultInputIcon: PropTypes.bool,
showInputIconRight: PropTypes.bool,
customInputIcon: PropTypes.node,

// calendar presentation and interaction related props
Expand Down