@woosmap/ui 4.36.2 → 4.36.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.36.2",
+  "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,20 +240,16 @@ export default class LanguageSelect extends Component {
         return languageOptions;
     };
 
-    onChange = (newValue, actionMeta) => {
-        const { minimumLength, isMulti } = this.props;
-        const newLanguages = newValue;
-        switch (actionMeta.action) {
-            case 'remove-value':
-            case 'pop-value':
-                if (newValue.length < minimumLength && isMulti) {
-                    return;
-                }
-                break;
-            default:
-                break;
+    onChange = (newLanguages, actionMeta) => {
+        const { minimumLength, isMulti, onChange } = this.props;
+        if (
+            (actionMeta.action === 'remove-value' || actionMeta.action === 'pop-value') &&
+            newLanguages.length < minimumLength &&
+            isMulti
+        ) {
+            return;
         }
-
+        if (onChange !== null) onChange(newLanguages);
         this.setState({ languages: newLanguages });
     };
 
@@ -265,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 }}
@@ -324,7 +320,7 @@ LanguageSelect.propTypes = {
     isMulti: PropTypes.bool,
     placeholder: PropTypes.string,
     value: PropTypes.string,
-    defaultValue: PropTypes.array,
+    defaultValue: PropTypes.arrayOf(PropTypes.oneOf(languageOptions.map((x) => x.value))),
     minimumLength: PropTypes.number,
     onChange: PropTypes.func,
     className: PropTypes.string,

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

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
@@ -32,6 +36,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
@@ -82,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
@@ -98,6 +106,11 @@ select
 			cursor pointer
 		svg
 			fill $light !important
+	&--disabled
+		.select
+			&__label
+				cursor default !important
+				opacity .4
 	&--small
 		.select
 		.asyncselect

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