Merge pull request #196 from input-output-hk/fix/ddw-844-add-select-disabled-state

[DDW-844] Add select disabled state

Author: Marcin Mazurek

CHANGELOG.md

@@ -4,6 +4,8 @@ The history of all changes to react-polymorph.
 
 # vNext
 
+- Add disabled state to Select component ([PR 196](https://github.com/input-output-hk/react-polymorph/pull/196))
+
 # 1.0.2
 
 - Support data-\* attributes on input field component ([PR 2841](https://github.com/input-output-hk/daedalus/pull/2841))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "1.0.2",
+  "version": "1.0.1-next.4",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

source/components/Select.js

@@ -18,6 +18,7 @@ type Props = {
   autoFocus: boolean,
   className?: string,
   context: ThemeContextProp,
+  disabled?: boolean,
   error?: string | Element<any>,
   hasSearch?: boolean,
   hideSearchClearButton?: boolean,

source/skins/simple/InputSkin.js

@@ -29,6 +29,7 @@ export const InputSkin = (props: Props) => {
           ? props.theme[props.themeId].errored
           : null,
       ])}
+      disabled={props.disabled}
     />
   );
 

source/skins/simple/SelectSkin.js

@@ -5,7 +5,6 @@ import type { Element, ElementRef } from 'react';
 // external libraries
 import classnames from 'classnames';
 
-
 // components
 import { Options } from '../../components/Options';
 import { Input } from '../../components/Input';
@@ -16,6 +15,7 @@ import { InputSkin } from './InputSkin';
 
 type Props = {
   className: string,
+  disabled?: boolean,
   error: string | Element<any>,
   getSelectedOption: Function,
   handleChange: Function,
@@ -34,7 +34,7 @@ type Props = {
   onSearch?: Function,
   options: Array<{
     isDisabled: boolean,
-    value: any
+    value: any,
   }>,
   optionRenderer: Function,
   optionsRef: ElementRef<any>,
@@ -59,12 +59,13 @@ export const SelectSkin = (props: Props) => {
   return (
     <div
       ref={props.rootRef}
-      className={classnames([
+      className={classnames(
         props.className,
         theme[themeId].select,
-        props.isOpen ? theme[themeId].isOpen : null,
-        props.isOpeningUpward ? theme[themeId].openUpward : null
-      ])}
+        props.isOpen && theme[themeId].isOpen,
+        props.isOpeningUpward && theme[themeId].openUpward,
+        props.disabled && theme[themeId].disabled
+      )}
     >
       <div className={theme[themeId].selectInput}>
         <Input
@@ -78,6 +79,7 @@ export const SelectSkin = (props: Props) => {
           error={props.error}
           selectionRenderer={props.selectionRenderer}
           readOnly
+          disabled={props.disabled}
           selectedOption={selectedOption}
         />
       </div>

source/themes/simple/SimpleInput.scss

@@ -82,9 +82,12 @@ $input-placeholder-font-family: var(--rp-input-placeholder-font-family, $theme-f
 // BEGIN CUSTOM VALUE RENDERER ---------- //
 
 .customValueWrapper {
+  input:not(.disabled) {
+    background-color: transparent !important;
+  }
+
   input {
     color: transparent !important;
-    background-color: transparent !important;
     position: absolute;
     z-index: 2;
   }

source/themes/simple/SimpleSelect.scss

@@ -5,16 +5,20 @@
 
 // select-input
 $select-input-bg-color: var(--rp-select-input-bg-color, #fafbfc) !default;
+$select-input-bg-color-disabled: var(--rp-select-input-bg-color-disabled, rgba(45, 45, 45, 0.05)) !default;
 $select-input-border: var(--rp-select-input-border, 1px solid var(--rp-select-input-border-color, #c6cdd6)) !default;
 $select-input-border-color-focus: var(--rp-select-input-border-color-focus, #5e6066) !default;
+$select-input-border-color-disabled: var(--rp-select-input-border-color-disabled, transparent) !default;
 $select-input-cursor: var(--rp-select-input-cursor, default) !default;
 $select-input-padding: var(--rp-select-input-padding, 14px 20px) !default;
 $select-input-placeholder-color: var(--rp-select-input-placeholder-color, rgba(#5e6066, 0.5)) !default;
 $select-input-placeholder-font-family: var(--rp-select-input-placeholder-font-family, $theme-font-light, sans-serif) !default;
 $select-input-text-color: var(--rp-select-input-text-color, #5e6066) !default;
+$select-input-text-color-disabled: var(--rp-select-input-text-color-disabled, rgba(45, 45, 45, 0.5)) !default;
 
 // arrow default
 $select-arrow-bg-color: var(--rp-select-arrow-bg-color, #c6cdd6) !default;
+$select-arrow-bg-color-disabled: var(--rp-select-arrow-bg-color-disabled, #c6cdd6) !default;
 $select-arrow-bottom: var(--rp-select-arrow-bottom, 20px) !default;
 $select-arrow-height: var(--rp-select-arrow-height, 7px) !default;
 $select-arrow-left: var(--rp-select-arrow-left, calc(100% - 32px)) !default;
@@ -99,6 +103,20 @@ $select-arrow-url-open: var(--rp-select-arrow-url-open, url("#{$theme-assets-pat
     }
   }
 }
+
+// ==== STATE: disabled ====
+.disabled {
+  pointer-events: none;
+
+  .selectInput input {
+    background-color: $select-input-bg-color-disabled;
+    border-color: $select-input-border-color-disabled;
+  }
+
+  .SimpleInput_customValueBlock {
+    color: $select-input-text-color-disabled;
+  }
+}
 // END SPECIAL STATES ---------- //
 
 // right-to-left languages support

stories/Select.stories.js

@@ -182,6 +182,32 @@ storiesOf('Select', module)
     ))
   )
 
+  .add('disabled (without value)',
+    withState({ value: '' }, store => (
+      <Select
+        disabled={true}
+        onChange={value => store.set({ value })}
+        label="Countries"
+        options={COUNTRIES_WITH_DISABLED_OPTIONS}
+        placeholder="Select your country …"
+        hasSearch={boolean('hasSearch')}
+      />
+    ))
+  )
+  .add('disabled (with value)',
+    withState({ value: '' }, store => (
+      <Select
+        disabled={true}
+        onChange={value => store.set({ value })}
+        value="EN-en"
+        label="Countries"
+        options={COUNTRIES_WITH_DISABLED_OPTIONS}
+        placeholder="Select your country …"
+        hasSearch={boolean('hasSearch')}
+      />
+    ))
+  )
+
   .add('with disabled options',
     withState({ value: '' }, store => (
       <Select