feat(select): add inputWidth property to control width

dhis2 · Nov 25, 2019 · 9eefe22 · 9eefe22
1 parent 85187b9
commit 9eefe22
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 2 deletions.
diff --git a/src/MultiSelect.js b/src/MultiSelect.js
@@ -25,6 +25,7 @@ const MultiSelect = ({
     tabIndex,
     maxHeight,
     inputMaxHeight,
+    inputWidth,
     onChange,
     onFocus,
     onBlur,
@@ -98,7 +99,7 @@ const MultiSelect = ({
 
                 .root-input {
                     margin-right: ${spacers.dp4};
-                    flex: 1;
+                    flex: ${inputWidth ? `0 0 ${inputWidth}` : '1'};
                 }
             `}</style>
         </div>
@@ -135,6 +136,7 @@ MultiSelect.defaultProps = {
  * @prop {string} [loadingText]
  * @prop {string} [maxHeight]
  * @prop {string} [inputMaxHeight]
+ * @prop {string} [inputWidth]
  * @prop {string} [noMatchText] - Only required if filterable is true
  * @prop {string} [placeholder]
  * @prop {string} [prefix]
@@ -162,6 +164,7 @@ MultiSelect.propTypes = {
     loadingText: propTypes.string,
     maxHeight: propTypes.string,
     inputMaxHeight: propTypes.string,
+    inputWidth: propTypes.string,
     noMatchText: propTypes.requiredIf(
         props => props.filterable,
         propTypes.string

diff --git a/src/MultiSelectField.js b/src/MultiSelectField.js
@@ -39,6 +39,7 @@ class MultiSelectField extends React.Component {
             validationText,
             maxHeight,
             inputMaxHeight,
+            inputWidth,
             children,
             clearable,
             clearText,
@@ -66,6 +67,7 @@ class MultiSelectField extends React.Component {
                     tabIndex={tabIndex}
                     maxHeight={maxHeight}
                     inputMaxHeight={inputMaxHeight}
+                    inputWidth={inputWidth}
                     onChange={onChange}
                     onFocus={onFocus}
                     onBlur={onBlur}
@@ -135,6 +137,7 @@ MultiSelectField.defaultProps = {
  * @prop {string} [loadingText]
  * @prop {string} [maxHeight]
  * @prop {string} [inputMaxHeight]
+ * @prop {string} [inputWidth]
  * @prop {string} [noMatchText] - Only required if filterable is true
  * @prop {string} [placeholder]
  * @prop {string} [prefix]
@@ -166,6 +169,7 @@ MultiSelectField.propTypes = {
     loadingText: propTypes.string,
     maxHeight: propTypes.string,
     inputMaxHeight: propTypes.string,
+    inputWidth: propTypes.string,
     noMatchText: propTypes.requiredIf(
         props => props.filterable,
         propTypes.string

diff --git a/src/SingleSelect.js b/src/SingleSelect.js
@@ -25,6 +25,7 @@ const SingleSelect = ({
     tabIndex,
     maxHeight,
     inputMaxHeight,
+    inputWidth,
     onChange,
     onFocus,
     onBlur,
@@ -98,7 +99,7 @@ const SingleSelect = ({
 
                 .root-input {
                     margin-right: ${spacers.dp4};
-                    flex: 1;
+                    flex: ${inputWidth ? `0 0 ${inputWidth}` : '1'};
                 }
             `}</style>
         </div>
@@ -135,6 +136,7 @@ SingleSelect.defaultProps = {
  * @prop {string} [loadingText]
  * @prop {string} [maxHeight]
  * @prop {string} [inputMaxHeight]
+ * @prop {string} [inputWidth]
  * @prop {string} [noMatchText] - Only required if filterable is true
  * @prop {string} [placeholder]
  * @prop {string} [prefix]
@@ -162,6 +164,7 @@ SingleSelect.propTypes = {
     loadingText: propTypes.string,
     maxHeight: propTypes.string,
     inputMaxHeight: propTypes.string,
+    inputWidth: propTypes.string,
     noMatchText: propTypes.requiredIf(
         props => props.filterable,
         propTypes.string

diff --git a/src/SingleSelectField.js b/src/SingleSelectField.js
@@ -39,6 +39,7 @@ class SingleSelectField extends React.Component {
             validationText,
             maxHeight,
             inputMaxHeight,
+            inputWidth,
             children,
             clearable,
             clearText,
@@ -66,6 +67,7 @@ class SingleSelectField extends React.Component {
                     tabIndex={tabIndex}
                     maxHeight={maxHeight}
                     inputMaxHeight={inputMaxHeight}
+                    inputWidth={inputWidth}
                     onChange={onChange}
                     onFocus={onFocus}
                     onBlur={onBlur}
@@ -135,6 +137,7 @@ SingleSelectField.defaultProps = {
  * @prop {string} [loadingText]
  * @prop {string} [maxHeight]
  * @prop {string} [inputMaxHeight]
+ * @prop {string} [inputWidth]
  * @prop {string} [noMatchText] - Only required if filterable is true
  * @prop {string} [placeholder]
  * @prop {string} [prefix]
@@ -166,6 +169,7 @@ SingleSelectField.propTypes = {
     loadingText: propTypes.string,
     maxHeight: propTypes.string,
     inputMaxHeight: propTypes.string,
+    inputWidth: propTypes.string,
     noMatchText: propTypes.requiredIf(
         props => props.filterable,
         propTypes.string

diff --git a/stories/MultiSelect.stories.js b/stories/MultiSelect.stories.js
@@ -268,3 +268,21 @@ storiesOf('MultiSelect', module)
             {options}
         </MultiSelect>
     ))
+    .add('Input width', () => (
+        <MultiSelect
+            {...defaultProps}
+            selected={[
+                { value: '1', label: 'one' },
+                { value: '2', label: 'two' },
+                { value: '3', label: 'three' },
+                { value: '4', label: 'four' },
+                { value: '5', label: 'five' },
+                { value: '6', label: 'six' },
+                { value: '7', label: 'seven' },
+                { value: '8', label: 'eight' },
+            ]}
+            inputWidth="200px"
+        >
+            {options}
+        </MultiSelect>
+    ))
diff --git a/stories/MultiSelectField.stories.js b/stories/MultiSelectField.stories.js
@@ -66,3 +66,14 @@ storiesOf('MultiSelectField', module)
             {options}
         </MultiSelectField>
     ))
+    .add('Set width', () => (
+        <MultiSelectField
+            {...defaultProps}
+            helpText="A helpful text."
+            validationText="Hm, not quite, I warn thee! Consider yourself warned!"
+            inputWidth="200px"
+            warning
+        >
+            {options}
+        </MultiSelectField>
+    ))
diff --git a/stories/SingleSelect.stories.js b/stories/SingleSelect.stories.js
@@ -249,3 +249,13 @@ storiesOf('SingleSelect', module)
             <SingleSelectOption key="2" value="2" label="two" />
         </SingleSelect>
     ))
+    .add('Input width', () => (
+        <SingleSelect
+            {...defaultProps}
+            selected={{ value: '1', label: longLabel }}
+            inputWidth="200px"
+        >
+            <SingleSelectOption key="1" value="1" label={longLabel} />
+            <SingleSelectOption key="2" value="2" label="two" />
+        </SingleSelect>
+    ))
diff --git a/stories/SingleSelectField.stories.js b/stories/SingleSelectField.stories.js
@@ -66,3 +66,14 @@ storiesOf('SingleSelectField', module)
             {options}
         </SingleSelectField>
     ))
+    .add('Set width', () => (
+        <SingleSelectField
+            {...defaultProps}
+            helpText="A helpful text."
+            validationText="NO! TOTALLY WRONG! SO EPICALLY WRONG! WHY ARE YOU SO WRONG ALL THE TIME?"
+            error
+            inputWidth="200px"
+        >
+            {options}
+        </SingleSelectField>
+    ))