From 6c4491249388a980204ff4a85e7785361c7a9388 Mon Sep 17 00:00:00 2001
From: Egor Stambakio <31243790+estambakio-sc@users.noreply.github.com>
Date: Fri, 4 Oct 2019 15:58:43 +0300
Subject: [PATCH] Add style for disabled state (#13)

---
 .github/ISSUE_TEMPLATE.md                       |  5 +++++
 .../components/Async/Async.DOCUMENTATION.md     | 17 +++++++++++++++++
 .../AsyncCreatable.DOCUMENTATION.md             | 17 +++++++++++++++++
 .../Creatable/Creatable.DOCUMENTATION.md        | 15 +++++++++++++++
 .../components/Select/Select.DOCUMENTATION.md   | 16 ++++++++++++++++
 src/client/components/Select/SelectCustom.less  |  4 ++++
 6 files changed, 74 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE.md

diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000..1b886ec
--- /dev/null
+++ 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
index 9352c83..e96e1b8 100644
--- 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
index 8590a11..836b57f 100644
--- 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
index 36cc106..eb93b7f 100644
--- 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
index d3b6c7c..d351541 100644
--- 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
index 8473078..e75d47f 100644
--- 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 {