Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Commit

Permalink
feat(select): add input max height prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@varl
ismay authored and varl committed Nov 25, 2019
1 parent 90a5881 commit 75555b3
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 2 deletions.
4 changes: 4 additions & 0 deletions src/MultiSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const MultiSelect = ({
selected,
tabIndex,
maxHeight,
inputMaxHeight,
onChange,
onFocus,
onBlur,
Expand Down Expand Up @@ -68,6 +69,7 @@ const MultiSelect = ({
clearText={clearText}
placeholder={placeholder}
prefix={prefix}
inputMaxHeight={inputMaxHeight}
/>
}
menu={menu}
Expand Down Expand Up @@ -132,6 +134,7 @@ MultiSelect.defaultProps = {
* @prop {boolean} [filterable]
* @prop {string} [loadingText]
* @prop {string} [maxHeight]
* @prop {string} [inputMaxHeight]
* @prop {string} [noMatchText] - Only required if filterable is true
* @prop {string} [placeholder]
* @prop {string} [prefix]
Expand All @@ -158,6 +161,7 @@ MultiSelect.propTypes = {
filterable: propTypes.bool,
loadingText: propTypes.string,
maxHeight: propTypes.string,
inputMaxHeight: propTypes.string,
noMatchText: propTypes.requiredIf(
props => props.filterable,
propTypes.string
Expand Down
19 changes: 18 additions & 1 deletion src/MultiSelect/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Input = ({
options,
className,
disabled,
inputMaxHeight,
}) => {
const hasSelection = selected.length > 0
const onClear = e => {
Expand All @@ -34,7 +35,7 @@ const Input = ({
<InputPlaceholder placeholder={placeholder} />
)}
{hasSelection && (
<div>
<div className="root-input">
{/* the wrapper div above is necessary to enforce wrapping on overflow */}
<SelectionList
selected={selected}
Expand All @@ -59,15 +60,30 @@ const Input = ({
line-height: 16px;
}
.root-input {
overflow-y: auto;
flex: 1;
}
.root-right {
margin-left: auto;
margin-right: 10px;
}
`}</style>

<style jsx>{`
.root-input {
max-height: ${inputMaxHeight};
}
`}</style>
</div>
)
}

Input.defaultProps = {
inputMaxHeight: '100px',
}

Input.propTypes = {
className: propTypes.string,
selected: multiSelectedPropType,
Expand All @@ -78,6 +94,7 @@ Input.propTypes = {
prefix: propTypes.string,
placeholder: propTypes.string,
disabled: propTypes.bool,
inputMaxHeight: propTypes.string,
}

export { Input }
4 changes: 4 additions & 0 deletions src/MultiSelectField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ class MultiSelectField extends React.Component {
helpText,
validationText,
maxHeight,
inputMaxHeight,
children,
clearable,
clearText,
Expand All @@ -64,6 +65,7 @@ class MultiSelectField extends React.Component {
selected={selected}
tabIndex={tabIndex}
maxHeight={maxHeight}
inputMaxHeight={inputMaxHeight}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
Expand Down Expand Up @@ -132,6 +134,7 @@ MultiSelectField.defaultProps = {
* @prop {boolean} [filterable]
* @prop {string} [loadingText]
* @prop {string} [maxHeight]
* @prop {string} [inputMaxHeight]
* @prop {string} [noMatchText] - Only required if filterable is true
* @prop {string} [placeholder]
* @prop {string} [prefix]
Expand Down Expand Up @@ -162,6 +165,7 @@ MultiSelectField.propTypes = {
filterable: propTypes.bool,
loadingText: propTypes.string,
maxHeight: propTypes.string,
inputMaxHeight: propTypes.string,
noMatchText: propTypes.requiredIf(
props => props.filterable,
propTypes.string
Expand Down
4 changes: 4 additions & 0 deletions src/SingleSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const SingleSelect = ({
selected,
tabIndex,
maxHeight,
inputMaxHeight,
onChange,
onFocus,
onBlur,
Expand Down Expand Up @@ -68,6 +69,7 @@ const SingleSelect = ({
clearText={clearText}
placeholder={placeholder}
prefix={prefix}
inputMaxHeight={inputMaxHeight}
/>
}
menu={menu}
Expand Down Expand Up @@ -132,6 +134,7 @@ SingleSelect.defaultProps = {
* @prop {boolean} [filterable]
* @prop {string} [loadingText]
* @prop {string} [maxHeight]
* @prop {string} [inputMaxHeight]
* @prop {string} [noMatchText] - Only required if filterable is true
* @prop {string} [placeholder]
* @prop {string} [prefix]
Expand All @@ -158,6 +161,7 @@ SingleSelect.propTypes = {
filterable: propTypes.bool,
loadingText: propTypes.string,
maxHeight: propTypes.string,
inputMaxHeight: propTypes.string,
noMatchText: propTypes.requiredIf(
props => props.filterable,
propTypes.string
Expand Down
19 changes: 18 additions & 1 deletion src/SingleSelect/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Input = ({
options,
className,
disabled,
inputMaxHeight,
}) => {
const hasSelection = 'label' in selected && 'value' in selected
const onClear = e => {
Expand All @@ -34,7 +35,7 @@ const Input = ({
<InputPlaceholder placeholder={placeholder} />
)}
{hasSelection && (
<div>
<div className="root-input">
{/* the wrapper div above is necessary to enforce wrapping on overflow */}
<Selection selected={selected} options={options} />
</div>
Expand All @@ -54,15 +55,30 @@ const Input = ({
line-height: 16px;
}
.root-input {
overflow-y: auto;
flex: 1;
}
.root-right {
margin-left: auto;
margin-right: 10px;
}
`}</style>

<style jsx>{`
.root-input {
max-height: ${inputMaxHeight};
}
`}</style>
</div>
)
}

Input.defaultProps = {
inputMaxHeight: '100px',
}

Input.propTypes = {
className: propTypes.string,
selected: singleSelectedPropType,
Expand All @@ -73,6 +89,7 @@ Input.propTypes = {
prefix: propTypes.string,
placeholder: propTypes.string,
disabled: propTypes.bool,
inputMaxHeight: propTypes.string,
}

export { Input }
4 changes: 4 additions & 0 deletions src/SingleSelectField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ class SingleSelectField extends React.Component {
helpText,
validationText,
maxHeight,
inputMaxHeight,
children,
clearable,
clearText,
Expand All @@ -64,6 +65,7 @@ class SingleSelectField extends React.Component {
selected={selected}
tabIndex={tabIndex}
maxHeight={maxHeight}
inputMaxHeight={inputMaxHeight}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
Expand Down Expand Up @@ -132,6 +134,7 @@ SingleSelectField.defaultProps = {
* @prop {boolean} [filterable]
* @prop {string} [loadingText]
* @prop {string} [maxHeight]
* @prop {string} [inputMaxHeight]
* @prop {string} [noMatchText] - Only required if filterable is true
* @prop {string} [placeholder]
* @prop {string} [prefix]
Expand Down Expand Up @@ -162,6 +165,7 @@ SingleSelectField.propTypes = {
filterable: propTypes.bool,
loadingText: propTypes.string,
maxHeight: propTypes.string,
inputMaxHeight: propTypes.string,
noMatchText: propTypes.requiredIf(
props => props.filterable,
propTypes.string
Expand Down
5 changes: 5 additions & 0 deletions stories/MultiSelect.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,3 +264,8 @@ storiesOf('MultiSelect', module)
{options}
</MultiSelect>
))
.add('Input max height', () => (
<MultiSelect {...defaultProps} inputMaxHeight="25px">
{options}
</MultiSelect>
))
10 changes: 10 additions & 0 deletions stories/SingleSelect.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,3 +240,13 @@ storiesOf('SingleSelect', module)
{options}
</SingleSelect>
))
.add('Input max height', () => (
<SingleSelect
{...defaultProps}
selected={{ value: '1', label: longLabel }}
inputMaxHeight="50px"
>
<SingleSelectOption key="1" value="1" label={longLabel} />
<SingleSelectOption key="2" value="2" label="two" />
</SingleSelect>
))

0 comments on commit 75555b3

Please sign in to comment.