input: add disabled state

scality · Feb 28, 2022 · 9a4d787 · 9a4d787
1 parent 4079515
commit 9a4d787
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 15 deletions.
diff --git a/src/lib/components/input/Input.component.js b/src/lib/components/input/Input.component.js
@@ -1,15 +1,15 @@
 //@flow
-import React, { useRef } from "react";
-import { DebounceInput } from "react-debounce-input";
-import Checkbox from "../checkbox/Checkbox.component";
-import Select from "../select/Select.component";
-import TextArea from "../textarea/TextArea.component";
+import React, { useRef } from 'react';
+import { DebounceInput } from 'react-debounce-input';
+import Checkbox from '../checkbox/Checkbox.component';
+import Select from '../select/Select.component';
+import TextArea from '../textarea/TextArea.component';
 import {
   InputContainer,
   LabelStyle,
   InputErrorMessage,
   InputWrapper,
-} from "./Input.component.style";
+} from './Input.component.style';
 
 export type Item = {
   label: string,
@@ -18,7 +18,7 @@ export type Item = {
 
 type Items = Array<Item>;
 
-type Props = {
+export type InputProps = {
   value: any,
   type?: string,
   label?: string,
@@ -28,6 +28,7 @@ type Props = {
   checked?: boolean,
   onChange: (e: SyntheticEvent<HTMLInputElement>) => void,
   options?: Items,
+  disabled?: boolean,
   min?: string,
   max?: string,
 };
@@ -52,12 +53,12 @@ const InputRenderer = ({
      */
     const valuePropDescriptor = Object.getOwnPropertyDescriptor(
       window.HTMLInputElement.prototype,
-      "value",
+      'value',
     );
     if (valuePropDescriptor && inputEl.current) {
       const nativeInputValueSetter = valuePropDescriptor.set;
       if (nativeInputValueSetter) {
-        if (e.target.dataset.core === "up")
+        if (e.target.dataset.core === 'up')
           nativeInputValueSetter.call(
             inputEl.current,
             max
@@ -76,7 +77,7 @@ const InputRenderer = ({
               : parseInt(value) - 1,
           );
       }
-      const event = new Event("input", { bubbles: true });
+      const event = new Event('input', { bubbles: true });
       inputEl.current.dispatchEvent(event);
     }
   };
@@ -146,16 +147,21 @@ const InputRenderer = ({
   else return input.text;
 };
 
-const Input = ({ label, id, error, type, ...rest }: Props) => {
+const Input = ({ label, id, error, type, disabled, ...rest }: InputProps) => {
   return (
-    <InputContainer className="sc-input" error={error} type={type}>
+    <InputContainer
+      className="sc-input"
+      disabled={disabled}
+      error={error}
+      type={type}
+    >
       {label && (
         <LabelStyle htmlFor={id} className="sc-input-label">
           {label}
         </LabelStyle>
       )}
       <InputWrapper className="sc-input-wrapper">
-        <InputRenderer id={id} type={type} {...rest} />
+        <InputRenderer id={id} type={type} disabled={disabled} {...rest} />
         {error && (
           <InputErrorMessage className="sc-input-error">
             {error}

diff --git a/src/lib/components/input/Input.component.style.js b/src/lib/components/input/Input.component.style.js
@@ -4,11 +4,21 @@ import { getTheme, getThemePropSelector } from "../../utils";
 
 export const InputContainer = styled.div`
   display: inline-flex;
+  ${(props) => {
+    if (props.disabled) {
+      return css`
+        opacity: 0.3;
+        input, textarea, select, i {
+          cursor: not-allowed;
+        }
+      `;
+    }
+  }}
   .sc-checkbox {
     margin: ${defaultTheme.padding.smaller} 0;
   }
 
-  .sc-select {
+  &.sc-select {
     width: 200px;
   }
 

diff --git a/src/lib/components/searchinput/SearchInput.component.js b/src/lib/components/searchinput/SearchInput.component.js
@@ -11,11 +11,23 @@ export type Props = {
   onChange: (e: SyntheticEvent<HTMLInputElement>) => void,
   onReset?: () => void,
   disableToggle: boolean,
+  disabled?: boolean,
 };
 
 const SearchInputContainer = styled.div`
   position: relative;
 
+  ${(props) => {
+    if (props.disabled) {
+      return css`
+        i {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+      `;
+    }
+  }}
+
   .sc-input {
     display: block;
     input[type='text'] {
@@ -67,6 +79,7 @@ function SearchInput({
   value,
   onChange,
   onReset,
+  disabled,
   ...rest
 }: Props) {
   const [docked, setDocked] = useState(!disableToggle);
@@ -90,7 +103,12 @@ function SearchInput({
   };
 
   return (
-    <SearchInputContainer className="sc-searchinput" docked={docked} {...rest}>
+    <SearchInputContainer
+      className="sc-searchinput"
+      disabled={disabled}
+      docked={docked}
+      {...rest}
+    >
       <Input
         minLength={1}
         debounceTimeout={300}
@@ -99,6 +117,7 @@ function SearchInput({
         placeholder={placeholder}
         value={value}
         onChange={onChange}
+        disabled={disabled}
         inputRef={myInputRef}
       />
       <SearchIcon onClick={toggle} disabled={!docked}>

diff --git a/stories/input.stories.js b/stories/input.stories.js
@@ -29,6 +29,14 @@ const ExampleInput = () => {
         onChange={action('onChange')}
         data-cy="default_input"
       />
+      <Title>Input disabled</Title>
+      <Input
+        id="id1"
+        value="value"
+        disabled={true}
+        onChange={action('onChange')}
+        data-cy="default_input"
+      />
       <Title>Input with label</Title>
       <Input
         id="id2"

diff --git a/stories/searchinput.stories.js b/stories/searchinput.stories.js
@@ -22,6 +22,17 @@ export const Default = () => {
           disableToggle={false}
         />
       </div>
+      <Title>Disabled</Title>
+      <div style={{ width: '250px' }}>
+        <SearchInput
+          value=""
+          disabled={true}
+          placeholder="Search server..."
+          onChange={action('on input change')}
+          onReset={action('on input reset')}
+          disableToggle={true}
+        />
+      </div>
       <Title>Search Input filled</Title>
       <div style={{ width: '250px' }}>
         <SearchInput