Skip to content

Commit

Permalink
Add inputHeight prop
Browse files Browse the repository at this point in the history
  • Loading branch information
Maja Wichrowska committed Dec 6, 2017
1 parent be5e24f commit 724ec38
Show file tree
Hide file tree
Showing 15 changed files with 51 additions and 44 deletions.
1 change: 1 addition & 0 deletions examples/DateRangePickerWrapper.jsx
View file
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
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
14 changes: 7 additions & 7 deletions src/components/DateInput.jsx
View file
Expand Up @@ -13,6 +13,7 @@ import {
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 +34,7 @@ const propTypes = forbidExtraProps({
openDirection: openDirectionShape,
showCaret: PropTypes.bool,
verticalSpacing: nonNegativeInteger,
inputHeight: nonNegativeInteger,

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

onChange() {},
onFocus() {},
Expand Down Expand Up @@ -169,21 +172,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 });

return (
<div
{...css(
Expand All @@ -200,6 +197,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
12 changes: 5 additions & 7 deletions src/components/DateRangePicker.jsx
View file
Expand Up @@ -35,6 +35,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 +64,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 +331,7 @@ class DateRangePicker extends React.Component {
verticalHeight,
transitionDuration,
verticalSpacing,
theme: { reactDates },
inputHeight,
} = this.props;
const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;

Expand All @@ -344,12 +346,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 +454,7 @@ class DateRangePicker extends React.Component {
noBorder,
block,
verticalSpacing,
inputHeight,
styles,
} = this.props;

Expand Down Expand Up @@ -513,6 +510,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
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
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
12 changes: 5 additions & 7 deletions src/components/SingleDatePicker.jsx
View file
Expand Up @@ -33,6 +33,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 +61,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 +368,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 +474,7 @@ class SingleDatePicker extends React.Component {
noBorder,
block,
verticalSpacing,
inputHeight,
styles,
} = this.props;

Expand Down Expand Up @@ -526,6 +523,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
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
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
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
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

This file was deleted.

11 changes: 10 additions & 1 deletion stories/DateRangePicker_input.js
View file
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
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

This file was deleted.

0 comments on commit 724ec38

Please sign in to comment.