feat(Select): add demo, ts demo, cypress test. add disabled to typeah…

…ead form sub-elements
patternfly · Aug 9, 2019 · fcfb875 · fcfb875
1 parent cd20989
commit fcfb875
Show file tree

Hide file tree

Showing 8 changed files with 640 additions and 116 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.md b/packages/patternfly-4/react-core/src/components/Select/Select.md
@@ -88,6 +88,88 @@ class SingleSelectInput extends React.Component {
 }
 ```
 
+## Disabled single select input
+
+```js
+import React from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+class DisabledSingleSelectInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.options = [
+      { value: 'Choose...', disabled: false, isPlaceholder: true },
+      { value: 'Mr', disabled: false },
+      { value: 'Miss', disabled: false },
+      { value: 'Mrs', disabled: false },
+      { value: 'Ms', disabled: false },
+      { value: 'Dr', disabled: false },
+      { value: 'Other', disabled: false }
+    ];
+
+    this.state = {
+      isExpanded: false,
+      selected: null
+    };
+
+    this.onToggle = isExpanded => {
+      this.setState({
+        isExpanded
+      });
+    };
+
+    this.onSelect = (event, selection, isPlaceholder) => {
+      if (isPlaceholder) this.clearSelection();
+      else {
+        this.setState({
+          selected: selection,
+          isExpanded: false
+        });
+        console.log('selected:', selection);
+      }
+    };
+
+    this.clearSelection = () => {
+      this.setState({
+        selected: null,
+        isExpanded: false
+      });
+    };
+  }
+
+  render() {
+    const { isExpanded, selected } = this.state;
+    const titleId = 'title-id';
+    return (
+      <div>
+        <span id={titleId} hidden>
+          Title
+        </span>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={this.onToggle}
+          onSelect={this.onSelect}
+          selections={selected}
+          isExpanded={isExpanded}
+          ariaLabelledBy={titleId}
+          isDisabled
+        >
+          {this.options.map((option, index) => (
+            <SelectOption
+              isDisabled={option.disabled}
+              key={index}
+              value={option.value}
+              isPlaceholder={option.isPlaceholder}
+            />
+          ))}
+        </Select>
+      </div>
+    );
+  }
+}
+```
+
 ## Checkbox select input
 
 ```js
@@ -325,6 +407,84 @@ class TypeaheadSelectInput extends React.Component {
 }
 ```
 
+## Disabled typeahead select input
+
+```js
+import React from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+class TypeaheadSelectInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.options = [
+      { value: 'Alabama', disabled: false },
+      { value: 'Florida', disabled: false },
+      { value: 'New Jersey', disabled: false },
+      { value: 'New Mexico', disabled: false },
+      { value: 'New York', disabled: false },
+      { value: 'North Carolina', disabled: false }
+    ];
+
+    this.state = {
+      isExpanded: false,
+      selected: null
+    };
+
+    this.onToggle = isExpanded => {
+      this.setState({
+        isExpanded
+      });
+    };
+
+    this.onSelect = (event, selection, isPlaceholder) => {
+      if (isPlaceholder) this.clearSelection();
+      else {
+        this.setState({
+          selected: selection,
+          isExpanded: false
+        });
+        console.log('selected:', selection);
+      }
+    };
+
+    this.clearSelection = () => {
+      this.setState({
+        selected: null,
+        isExpanded: false
+      });
+    };
+  }
+
+  render() {
+    const { isExpanded, selected } = this.state;
+    const titleId = 'typeahead-select-id';
+    return (
+      <div>
+        <span id={titleId} hidden>
+          Select a state
+        </span>
+        <Select
+          variant={SelectVariant.typeahead}
+          aria-label="Select a state"
+          onToggle={this.onToggle}
+          onSelect={this.onSelect}
+          onClear={this.clearSelection}
+          selections={selected}
+          isExpanded={isExpanded}
+          ariaLabelledBy={titleId}
+          placeholderText="Select a state"
+          isDisabled
+        >
+          {this.options.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </div>
+    );
+  }
+}
+```
+
 ## Typeahead select input - custom filtering
 
 ```js

diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.test.tsx b/packages/patternfly-4/react-core/src/components/Select/Select.test.tsx
@@ -52,6 +52,15 @@ describe('select', () => {
       expect(view).toMatchSnapshot();
     });
 
+    test('renders disabled successfully', () => {
+      const view = mount(
+        <Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isDisabled>
+          {selectOptions}
+        </Select>
+      );
+      expect(view).toMatchSnapshot();
+    });
+
     test('renders expanded successfully', () => {
       const view = mount(
         <Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>

diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.tsx b/packages/patternfly-4/react-core/src/components/Select/Select.tsx
@@ -371,6 +371,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     onChange={this.onChange}
                     onFocus={this.handleFocus}
                     autoComplete="off"
+                    disabled={isDisabled}
                   />
                 </div>
                 {selections && (
@@ -382,6 +383,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     }}
                     aria-label={ariaLabelClear}
                     type="button"
+                    disabled={isDisabled}
                   >
                     <TimesCircleIcon aria-hidden />
                   </button>
@@ -403,6 +405,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     onChange={this.onChange}
                     onFocus={this.handleFocus}
                     autoComplete="off"
+                    disabled={isDisabled}
                   />
                 </div>
                 {selections && (Array.isArray(selections) && selections.length > 0) && (
@@ -414,6 +417,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     }}
                     aria-label={ariaLabelClear}
                     type="button"
+                    disabled={isDisabled}
                   >
                     <TimesCircleIcon aria-hidden />
                   </button>

diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectToggle.tsx b/packages/patternfly-4/react-core/src/components/Select/SelectToggle.tsx
@@ -227,7 +227,9 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               className
             )}
             onClick={_event => {
-              onToggle(true);
+              if(!isDisabled) {
+                onToggle(true);
+              }
             }}
             onKeyDown={this.onKeyDown}
           >