@woosmap/ui 4.31.2 → 4.31.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.31.2",
+  "version": "4.31.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Select/LanguageSelect.js

@@ -222,9 +222,10 @@ export default class LanguageSelect extends Component {
     constructor(props) {
         super(props);
         const { defaultValue } = props;
-        const defaultLanguage = defaultValue && languageOptions.find((item) => item.value === defaultValue);
+        const defaultLanguage =
+            defaultValue && defaultValue.map((language) => languageOptions.find((item) => item.value === language));
         this.state = {
-            languages: [defaultLanguage],
+            languages: defaultLanguage,
         };
     }
 
@@ -239,19 +240,16 @@ export default class LanguageSelect extends Component {
     };
 
     onChange = (newValue, actionMeta) => {
-        const { minimumLength, isMulti } = this.props;
+        const { minimumLength, isMulti, onChange } = this.props;
         const newLanguages = newValue;
-        switch (actionMeta.action) {
-            case 'remove-value':
-            case 'pop-value':
-                if (newValue.length < minimumLength && isMulti) {
-                    return;
-                }
-                break;
-            default:
-                break;
+        if (
+            (actionMeta.action === 'remove-value' || actionMeta.action === 'pop-value') &&
+            newValue.length < minimumLength &&
+            isMulti
+        ) {
+            return;
         }
-
+        if (onChange !== null) onChange(newValue);
         this.setState({ languages: newLanguages });
     };
 
@@ -263,7 +261,7 @@ export default class LanguageSelect extends Component {
         return (
             <Select
                 isMulti={isMulti}
-                className="select__item"
+                className="select__item select__item--language"
                 classNamePrefix="select"
                 options={this.getOptions()}
                 components={{ MultiValueLabel, MultiValueRemove, Option }}
@@ -322,7 +320,7 @@ LanguageSelect.propTypes = {
     isMulti: PropTypes.bool,
     placeholder: PropTypes.string,
     value: PropTypes.string,
-    defaultValue: PropTypes.string,
+    defaultValue: PropTypes.arrayOf(PropTypes.oneOf(languageOptions.map((x) => x.value))),
     minimumLength: PropTypes.number,
     onChange: PropTypes.func,
     className: PropTypes.string,

package/src/components/Select/Select.stories.js

@@ -93,6 +93,6 @@ export const LanguageSelectChange = TemplateLanguageSelect.bind({});
 LanguageSelectChange.args = {
     isMulti: true,
     closeMenuOnSelect: false,
-    defaultValue: 'en',
+    defaultValue: ['en', 'fr'],
     minimumLength: 1,
 };

package/src/styles/console/select.styl

@@ -32,6 +32,9 @@ select
 					fill $secondary
 	&__value-container
 		padding-left 1rem !important
+		.select__item--language &
+			overflow-y auto !important
+			max-height 7rem
 	&__single-value
 		color $secondary !important
 	&__indicator

package/src/styles/website/select.styl

@@ -33,6 +33,9 @@
 					fill $secondary
 	&__value-container
 		padding-left 1rem !important
+		.select__item--language &
+			overflow-y auto !important
+			max-height 7rem
 	&__single-value
 		color $secondary !important
 	&__indicator
@@ -84,6 +87,8 @@
 		&__label
 			padding-right .2rem !important
 			color $light !important
+			&:only-child
+				margin-right .3rem !important
 		&__remove
 			cursor pointer
 		svg