@woosmap/ui 4.36.3 → 4.36.4

package/package.json

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

package/src/components/Input/Input.stories.js

@@ -12,7 +12,7 @@ const Template = (args) => {
     const { placeholder, label, hideLabel, checked } = args;
     return (
         <div className="mbib--large">
-            <Input placeholder={placeholder} hideLabel={hideLabel} icon="search" isFilter isNoBorder />
+            <Input placeholder={placeholder} disabled hideLabel={hideLabel} icon="search" />
             <Input placeholder={placeholder} hideLabel={hideLabel} icon="search" size="large" isFilter isNoBorder />
             <Input placeholder={placeholder} hideLabel={hideLabel} icon="search" size="small" isFilter isNoBorder />
             <Input placeholder={placeholder} label={label} hideLabel={hideLabel} size="large" />

package/src/components/Select/LanguageSelect.js

@@ -240,17 +240,16 @@ export default class LanguageSelect extends Component {
         return languageOptions;
     };
 
-    onChange = (newValue, actionMeta) => {
+    onChange = (newLanguages, actionMeta) => {
         const { minimumLength, isMulti, onChange } = this.props;
-        const newLanguages = newValue;
         if (
             (actionMeta.action === 'remove-value' || actionMeta.action === 'pop-value') &&
-            newValue.length < minimumLength &&
+            newLanguages.length < minimumLength &&
             isMulti
         ) {
             return;
         }
-        if (onChange !== null) onChange(newValue);
+        if (onChange !== null) onChange(newLanguages);
         this.setState({ languages: newLanguages });
     };
 

package/src/components/Select/Select.js

@@ -33,14 +33,20 @@ export default class Select extends Component {
     };
 
     render() {
-        const { size, className, error, label, hideLabel, icon, ...rest } = this.props;
+        const { size, className, error, label, hideLabel, icon, disabled, ...rest } = this.props;
         const errorComponent = error ? <span className="select__error">{error}</span> : null;
-        const classesContainer = cl('select', { 'select--iconed': icon }, `select--${size}`, className);
+        const classesContainer = cl(
+            'select',
+            { 'select--iconed': icon },
+            `select--${size}`,
+            disabled && 'select--disabled',
+            className
+        );
         return (
             <div className={classesContainer}>
                 <div className="select__line">
                     {hideLabel ? (
-                        this.renderInput({ error, size, ...rest })
+                        this.renderInput({ error, size, isDisabled: disabled, ...rest })
                     ) : (
                         <>
                             {label && (
@@ -48,7 +54,7 @@ export default class Select extends Component {
                                     {label}
                                 </label>
                             )}
-                            {this.renderInput({ error, size, ...rest })}
+                            {this.renderInput({ error, size, isDisabled: disabled, ...rest })}
                         </>
                     )}
                     {icon}
@@ -68,6 +74,7 @@ Select.defaultProps = {
     error: null,
     isCreatable: false,
     color: undefined,
+    disabled: false,
 };
 Select.propTypes = {
     className: PropTypes.string,
@@ -77,5 +84,6 @@ Select.propTypes = {
     hideLabel: PropTypes.bool,
     icon: PropTypes.string,
     isCreatable: PropTypes.bool,
+    disabled: PropTypes.bool,
     color: PropTypes.oneOf(['bleu', 'mauve', 'green', 'grey', 'orange', 'red', 'white', undefined, '']),
 };

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

@@ -33,7 +33,7 @@ const Template = (args) => (
             <Select {...args} error="There is an error" />
         </div>
         <div style={{ marginBottom: '3rem' }}>
-            <Select {...args} size="small" />
+            <Select {...args} label="Disabled" disabled size="small" />
         </div>
     </div>
 );

package/src/styles/console/input.styl

@@ -108,12 +108,6 @@ input
 		position relative
 		.input__label
 			cursor pointer
-	&--disabled
-		.input
-			&__item
-			&__label
-				cursor default !important
-				opacity .4
 	&__line
 		.input--checkbox &
 		.input--radio &
@@ -201,6 +195,22 @@ input
 			line-height revert
 		&[type=number]
 			-moz-appearance textfield
+	&--disabled
+		&:not([type=button]):not([type=checkbox]):not([type=radio])
+			.icon
+				opacity .4
+			.input
+				&__item
+				&__label
+					cursor default !important
+					opacity .4
+			&:focus
+			&:hover
+				.icon
+					stroke $inputBorderColor !important
+				.input
+					&__item
+						border-color $inputBorderColor !important
 input::-webkit-outer-spin-button
 input::-webkit-inner-spin-button
 	-webkit-appearance none

package/src/styles/console/select.styl

@@ -21,6 +21,10 @@ select
 		border-radius .6rem !important
 		&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
 			border-color $inputBorderColor !important
+			.select--is-disabled &
+				border-color $inputBorderColor !important
+				background-color #ffffff !important
+				opacity .4
 			.error > &
 				border-color $error !important
 		&--is-focused
@@ -85,7 +89,8 @@ select
 		.select__item--red &
 				background-color $labelRed !important
 		&--is-disabled
-			opacity .6
+			cursor default !important
+			opacity .4
 		&__label
 		&__remove
 			border-radius .4rem !important
@@ -101,6 +106,11 @@ select
 			cursor pointer
 		svg
 			fill $light !important
+	&--disabled
+		.select
+			&__label
+				cursor default !important
+				opacity .4
 	&--small
 		.select
 		.asyncselect