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

Jump to bottom

Add inputHeight prop #886

Closed
wants to merge 1 commit into from
Closed

Add inputHeight prop #886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/DateRangePickerWrapper.jsx
View file
Open in desktop
Expand Up @@ -47,6 +47,7 @@ const defaultProps = {
customInputIcon: null,
customArrowIcon: null,
customCloseIcon: null,
inputHeight: undefined,

// calendar presentation and interaction related props
renderMonth: null,
Expand Down
1 change: 1 addition & 0 deletions examples/SingleDatePickerWrapper.jsx
View file
Open in desktop
Expand Up @@ -38,6 +38,7 @@ const defaultProps = {
showClearDate: false,
showDefaultInputIcon: false,
customInputIcon: null,
inputHeight: undefined,

// calendar presentation and interaction related props
renderMonth: null,
Expand Down
15 changes: 7 additions & 8 deletions src/components/DateInput.jsx
View file
Open in desktop
Expand Up @@ -5,14 +5,14 @@ import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
import throttle from 'lodash/throttle';
import isTouchDevice from 'is-touch-device';

import getInputHeight from '../utils/getInputHeight';
import openDirectionShape from '../shapes/OpenDirectionShape';
import {
OPEN_DOWN,
OPEN_UP,
FANG_HEIGHT_PX,
FANG_WIDTH_PX,
DEFAULT_VERTICAL_SPACING,
DEFAULT_INPUT_HEIGHT,
} from '../constants';

const FANG_PATH_TOP = `M0,${FANG_HEIGHT_PX} ${FANG_WIDTH_PX},${FANG_HEIGHT_PX} ${FANG_WIDTH_PX / 2},0z`;
Expand All @@ -33,6 +33,7 @@ const propTypes = forbidExtraProps({
openDirection: openDirectionShape,
showCaret: PropTypes.bool,
verticalSpacing: nonNegativeInteger,
inputHeight: nonNegativeInteger,

onChange: PropTypes.func,
onFocus: PropTypes.func,
Expand All @@ -57,6 +58,7 @@ const defaultProps = {
openDirection: OPEN_DOWN,
showCaret: false,
verticalSpacing: DEFAULT_VERTICAL_SPACING,
inputHeight: DEFAULT_INPUT_HEIGHT,

onChange() {},
onFocus() {},
Expand Down Expand Up @@ -169,21 +171,15 @@ class DateInput extends React.Component {
readOnly,
openDirection,
verticalSpacing,
inputHeight,
styles,
theme: { reactDates },
} = this.props;

const value = displayValue || dateString || '';
const screenReaderMessageId = `DateInput__screen-reader-message-${id}`;

const withFang = showCaret && focused;

const {
font: { input: { lineHeight } },
spacing: { inputPadding, displayTextPaddingVertical },
} = reactDates;
const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });
Copy link
Member

Choose a reason for hiding this comment

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

i'm confused; how can all this logic be replaced by just passing down a prop? I'm fine with it being overrideable, but wouldn't the default need this same logic?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Not really because once you set the height to a fixed value, this padding doesn't affect it anymore. Although I guess that the displayTextPadding might still increase the whole thing... it's not really being used anymore, so this might be an opportunity just to axe it (it's kind of a weird pattern that doesn't make terribly much sense now that we have a real input).

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Nope, I'm definitely wrong. Let me reinvestigate!


return (
<div
{...css(
Expand All @@ -200,6 +196,9 @@ class DateInput extends React.Component {
readOnly && styles.DateInput_input__readOnly,
focused && styles.DateInput_input__focused,
disabled && styles.DateInput_input__disabled,
{
height: inputHeight,
},
)}
aria-label={placeholder}
type="text"
Expand Down
13 changes: 5 additions & 8 deletions src/components/DateRangePicker.jsx
View file
Open in desktop
Expand Up @@ -11,7 +11,6 @@ import { DateRangePickerPhrases } from '../defaultPhrases';

import OutsideClickHandler from './OutsideClickHandler';
import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
import getInputHeight from '../utils/getInputHeight';

import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';

Expand All @@ -35,6 +34,7 @@ import {
ICON_BEFORE_POSITION,
FANG_HEIGHT_PX,
DEFAULT_VERTICAL_SPACING,
DEFAULT_INPUT_HEIGHT,
} from '../constants';

const propTypes = forbidExtraProps({
Expand Down Expand Up @@ -63,6 +63,7 @@ const defaultProps = {
customCloseIcon: null,
noBorder: false,
block: false,
inputHeight: DEFAULT_INPUT_HEIGHT,

// calendar presentation and interaction related props
renderMonth: null,
Expand Down Expand Up @@ -329,7 +330,7 @@ class DateRangePicker extends React.Component {
verticalHeight,
transitionDuration,
verticalSpacing,
theme: { reactDates },
inputHeight,
} = this.props;
const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;

Expand All @@ -344,12 +345,6 @@ class DateRangePicker extends React.Component {
<CloseButton {...css(styles.DateRangePicker_closeButton_svg)} />
);

const {
font: { input: { lineHeight } },
spacing: { inputPadding, displayTextPaddingVertical },
} = reactDates;
const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });

return (
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
ref={this.setDayPickerContainerRef}
Expand Down Expand Up @@ -458,6 +453,7 @@ class DateRangePicker extends React.Component {
noBorder,
block,
verticalSpacing,
inputHeight,
styles,
} = this.props;

Expand Down Expand Up @@ -513,6 +509,7 @@ class DateRangePicker extends React.Component {
noBorder={noBorder}
block={block}
verticalSpacing={verticalSpacing}
inputHeight={inputHeight}
/>

{this.maybeRenderDayPickerWithPortal()}
Expand Down
5 changes: 5 additions & 0 deletions src/components/DateRangePickerInput.jsx
View file
Open in desktop
Expand Up @@ -61,6 +61,7 @@ const propTypes = forbidExtraProps({
noBorder: PropTypes.bool,
block: PropTypes.bool,
verticalSpacing: nonNegativeInteger,
inputHeight: nonNegativeInteger,

// accessibility
isFocused: PropTypes.bool, // describes actual DOM focus
Expand Down Expand Up @@ -106,6 +107,7 @@ const defaultProps = {
noBorder: false,
block: false,
verticalSpacing: undefined,
inputHeight: undefined,

// accessibility
isFocused: false,
Expand Down Expand Up @@ -152,6 +154,7 @@ function DateRangePickerInput({
noBorder,
block,
verticalSpacing,
inputHeight,
styles,
}) {
const calendarIcon = customInputIcon || (
Expand Down Expand Up @@ -208,6 +211,7 @@ function DateRangePickerInput({
onKeyDownArrowDown={onKeyDownArrowDown}
onKeyDownQuestionMark={onKeyDownQuestionMark}
verticalSpacing={verticalSpacing}
inputHeight={inputHeight}
/>

<div
Expand Down Expand Up @@ -236,6 +240,7 @@ function DateRangePickerInput({
onKeyDownArrowDown={onKeyDownArrowDown}
onKeyDownQuestionMark={onKeyDownQuestionMark}
verticalSpacing={verticalSpacing}
inputHeight={inputHeight}
/>

{showClearDates && (
Expand Down
4 changes: 4 additions & 0 deletions src/components/DateRangePickerInputController.jsx
View file
Open in desktop
Expand Up @@ -44,6 +44,7 @@ const propTypes = forbidExtraProps({
noBorder: PropTypes.bool,
block: PropTypes.bool,
verticalSpacing: nonNegativeInteger,
inputHeight: nonNegativeInteger,

keepOpenOnDateSelect: PropTypes.bool,
reopenPickerOnClearDates: PropTypes.bool,
Expand Down Expand Up @@ -94,6 +95,7 @@ const defaultProps = {
noBorder: false,
block: false,
verticalSpacing: undefined,
inputHeight: undefined,

keepOpenOnDateSelect: false,
reopenPickerOnClearDates: false,
Expand Down Expand Up @@ -270,6 +272,7 @@ export default class DateRangePickerInputController extends React.Component {
noBorder,
block,
verticalSpacing,
inputHeight,
} = this.props;

const startDateString = this.getDateString(startDate);
Expand Down Expand Up @@ -312,6 +315,7 @@ export default class DateRangePickerInputController extends React.Component {
noBorder={noBorder}
block={block}
verticalSpacing={verticalSpacing}
inputHeight={inputHeight}
/>
);
}
Expand Down
13 changes: 5 additions & 8 deletions src/components/SingleDatePicker.jsx
View file
Open in desktop
Expand Up @@ -13,7 +13,6 @@ import OutsideClickHandler from './OutsideClickHandler';
import toMomentObject from '../utils/toMomentObject';
import toLocalizedDateString from '../utils/toLocalizedDateString';
import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
import getInputHeight from '../utils/getInputHeight';

import SingleDatePickerInput from './SingleDatePickerInput';
import DayPickerSingleDateController from './DayPickerSingleDateController';
Expand All @@ -33,6 +32,7 @@ import {
ICON_BEFORE_POSITION,
FANG_HEIGHT_PX,
DEFAULT_VERTICAL_SPACING,
DEFAULT_INPUT_HEIGHT,
} from '../constants';

const propTypes = forbidExtraProps({
Expand Down Expand Up @@ -60,6 +60,7 @@ const defaultProps = {
noBorder: false,
block: false,
verticalSpacing: DEFAULT_VERTICAL_SPACING,
inputHeight: DEFAULT_INPUT_HEIGHT,

// calendar presentation and interaction related props
orientation: HORIZONTAL_ORIENTATION,
Expand Down Expand Up @@ -366,19 +367,13 @@ class SingleDatePicker extends React.Component {
verticalHeight,
transitionDuration,
verticalSpacing,
theme: { reactDates },
inputHeight,
} = this.props;
const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;

const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onClearFocus : undefined;
const closeIcon = customCloseIcon || (<CloseButton />);

const {
font: { input: { lineHeight } },
spacing: { inputPadding, displayTextPaddingVertical },
} = reactDates;
const inputHeight = getInputHeight({ lineHeight, inputPadding, displayTextPaddingVertical });

return (
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
ref={this.setDayPickerContainerRef}
Expand Down Expand Up @@ -478,6 +473,7 @@ class SingleDatePicker extends React.Component {
noBorder,
block,
verticalSpacing,
inputHeight,
styles,
} = this.props;

Expand Down Expand Up @@ -526,6 +522,7 @@ class SingleDatePicker extends React.Component {
noBorder={noBorder}
block={block}
verticalSpacing={verticalSpacing}
inputHeight={inputHeight}
/>

{this.maybeRenderDayPickerWithPortal()}
Expand Down
4 changes: 4 additions & 0 deletions src/components/SingleDatePickerInput.jsx
View file
Open in desktop
Expand Up @@ -37,6 +37,7 @@ const propTypes = forbidExtraProps({
noBorder: PropTypes.bool,
block: PropTypes.bool,
verticalSpacing: nonNegativeInteger,
inputHeight: nonNegativeInteger,

onChange: PropTypes.func,
onClearDate: PropTypes.func,
Expand Down Expand Up @@ -70,6 +71,7 @@ const defaultProps = {
noBorder: false,
block: false,
verticalSpacing: undefined,
inputHeight: undefined,

onChange() {},
onClearDate() {},
Expand Down Expand Up @@ -112,6 +114,7 @@ function SingleDatePickerInput({
noBorder,
block,
verticalSpacing,
inputHeight,
styles,
}) {
const calendarIcon = customInputIcon || (
Expand Down Expand Up @@ -166,6 +169,7 @@ function SingleDatePickerInput({
onKeyDownQuestionMark={onKeyDownQuestionMark}
openDirection={openDirection}
verticalSpacing={verticalSpacing}
inputHeight={inputHeight}
/>

{showClearDate && (
Expand Down
1 change: 1 addition & 0 deletions src/constants.js
View file
Open in desktop
Expand Up @@ -25,3 +25,4 @@ export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
export const FANG_WIDTH_PX = 20;
export const FANG_HEIGHT_PX = 10;
export const DEFAULT_VERTICAL_SPACING = 22;
export const DEFAULT_INPUT_HEIGHT = 48;
1 change: 1 addition & 0 deletions src/shapes/DateRangePickerShape.js
View file
Open in desktop
Expand Up @@ -40,6 +40,7 @@ export default {
customCloseIcon: PropTypes.node,
noBorder: PropTypes.bool,
block: PropTypes.bool,
inputHeight: nonNegativeInteger,

// calendar presentation and interaction related props
renderMonth: PropTypes.func,
Expand Down
1 change: 1 addition & 0 deletions src/shapes/SingleDatePickerShape.js
View file
Open in desktop
Expand Up @@ -34,6 +34,7 @@ export default {
noBorder: PropTypes.bool,
block: PropTypes.bool,
verticalSpacing: nonNegativeInteger,
inputHeight: nonNegativeInteger,

// calendar presentation and interaction related props
renderMonth: PropTypes.func,
Expand Down
9 changes: 0 additions & 9 deletions src/utils/getInputHeight.js
View file
Open in desktop

This file was deleted.

11 changes: 10 additions & 1 deletion stories/DateRangePicker_input.js
View file
Open in desktop
Expand Up @@ -38,7 +38,9 @@ const TestCustomCloseIcon = () => (
color: '#484848',
padding: '3px',
}}
>'X'</span>
>
X
</span>
);

storiesOf('DRP - Input Props', module)
Expand Down Expand Up @@ -134,4 +136,11 @@ storiesOf('DRP - Input Props', module)
showClearDates
block
/>
))
.addWithInfo('custom input height', () => (
<DateRangePickerWrapper
initialStartDate={moment().add(3, 'days')}
initialEndDate={moment().add(10, 'days')}
inputHeight={36}
/>
));
6 changes: 6 additions & 0 deletions stories/SingleDatePicker_input.js
View file
Open in desktop
Expand Up @@ -84,4 +84,10 @@ storiesOf('SDP - Input Props', module)
showClearDate
block
/>
))
.addWithInfo('custom input height', () => (
<SingleDatePickerWrapper
initialDate={moment().add(3, 'days')}
inputHeight={36}
/>
));
13 changes: 0 additions & 13 deletions test/utils/getInputHeight_spec.js
View file
Open in desktop

This file was deleted.