Add style for disabled state (#13)

OpusCapita · Oct 4, 2019 · 6c44912 · 6c44912
1 parent 5d6d36e
commit 6c44912
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 0 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,5 @@
+Meta-Info | Value
+-- | --
+ExtProjectId | ???
+Original Estimation | ???h
+Remaining Estimation | ???h
diff --git a/src/client/components/Async/Async.DOCUMENTATION.md b/src/client/components/Async/Async.DOCUMENTATION.md
@@ -24,6 +24,23 @@ See documentation of [react-select](https://github.com/JedWatson/react-select)
       }
     />
   </div>
+  <div style={{ marginBottom: '20px' }}>
+    <Async
+      innerRef={ref => console.log(ref)}
+      loadOptions={
+        (inputValue, callback) => {
+          setTimeout(() => {
+            callback([
+              { value: 'one', label: 'One' },
+              { value: 'two', label: 'Two' }
+            ].filter(item=>item.value === inputValue || item.label === inputValue));
+          }, 1000);
+        }
+      }
+      isDisabled={true}
+      placeholder='Select isDisabled=true'
+    />
+  </div>
   <Async
     loadOptions={
       (inputValue, callback) => {

diff --git a/src/client/components/AsyncCreatable/AsyncCreatable.DOCUMENTATION.md b/src/client/components/AsyncCreatable/AsyncCreatable.DOCUMENTATION.md
@@ -23,6 +23,23 @@ See documentation of [react-select](https://github.com/JedWatson/react-select)
       }
     />
   </div>
+  <div style={{ marginBottom: '20px' }}>
+    <AsyncCreatable
+      innerRef={ref => console.log(ref)}
+      loadOptions={
+        (inputValue, callback) => {
+          setTimeout(() => {
+            callback([
+              { value: 'one', label: 'One' },
+              { value: 'two', label: 'Two' }
+            ].filter(item=>item.value === inputValue || item.label === inputValue));
+          }, 1000);
+        }
+      }
+      isDisabled={true}
+      placeholder='Select isDisabled=true'
+    />
+  </div>
   <AsyncCreatable
     loadOptions={
       (inputValue, callback) => {

diff --git a/src/client/components/Creatable/Creatable.DOCUMENTATION.md b/src/client/components/Creatable/Creatable.DOCUMENTATION.md
@@ -21,6 +21,21 @@ See documentation of [react-select](https://github.com/JedWatson/react-select)
 				]}
 			isMulti
 		/>
+  </div>
+	<div style={{ marginBottom: '20px' }}>
+    <Creatable
+      innerRef={ref => console.log(ref)}
+			options={[
+					{ label: 'Chocolate', value: 'chocolate' },
+					{ label: 'Vanilla', value: 'vanilla' },
+					{ label: 'Strawberry', value: 'strawberry' },
+					{ label: 'Caramel', value: 'caramel' },
+					{ label: 'Cookies and Cream', value: 'cookiescream' },
+					{ label: 'Peppermint', value: 'peppermint' }
+				]}
+			isDisabled={true}
+      placeholder='Select isDisabled=true'
+		/>
   </div>
 	<Creatable
 		options={[

diff --git a/src/client/components/Select/Select.DOCUMENTATION.md b/src/client/components/Select/Select.DOCUMENTATION.md
@@ -23,6 +23,22 @@ See documentation of [react-select](https://github.com/JedWatson/react-select)
       value={_scope.state.value}
     />
   </div>
+  <div style={{ marginBottom: '20px' }}>
+    <Select
+      options={[
+        { label: 'Chocolate', value: 'chocolate' },
+        { label: 'Vanilla', value: 'vanilla' },
+        { label: 'Strawberry', value: 'strawberry' },
+        { label: 'Caramel', value: 'caramel' },
+        { label: 'Cookies and Cream', value: 'cookiescream' },
+        { label: 'Peppermint', value: 'peppermint' }
+      ]}
+      isDisabled={true}
+      placeholder='Select isDisabled=true'
+      onChange={_scope.handleChange}
+      value={_scope.state.value}
+    />
+  </div>
   <Select
     options={[
       { label: 'Chocolate', value: 'chocolate' },

diff --git a/src/client/components/Select/SelectCustom.less b/src/client/components/Select/SelectCustom.less
@@ -44,6 +44,10 @@
           }
         }
       }
+
+      &--is-disabled {
+        background-color: #eeeeee;
+      }
     }
 
     &__multi-value {