Merge pull request #2555 from mikaoelitiana/fix-2512-next

Add disabled option in SelectInput
marmelab · Nov 22, 2018 · 1da1d92 · 1da1d92
2 parents 4bae849 + 0b0aef0
commit 1da1d92
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 1 deletion.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -1031,6 +1031,28 @@ You can make the `SelectInput` component resettable using the `resettable` prop.
 
 ![resettable SelectInput](./img/resettable-select-input.png)
 
+You can set disabled values by setting the `disabled` property of one item: 
+
+```jsx
+const choices = [
+    { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' },
+    { _id: 456, full_name: 'Jane Austen', sex: 'F' },
+    { _id: 1, full_name: 'System Administrator', sex: 'F', disabled: true },
+];
+<SelectInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
+```
+
+You can use a custom field name by setting `disableValue` prop: 
+
+```jsx
+const choices = [
+    { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' },
+    { _id: 456, full_name: 'Jane Austen', sex: 'F' },
+    { _id: 987, full_name: 'Jack Harden', sex: 'M', not_available: true },
+];
+<SelectInput source="contact_id" choices={choices} optionText="full_name" optionValue="_id" disableValue="not_available" />
+```
+
 ## `<SelectArrayInput>`
 
 To let users choose several values in a list using a dropdown, use `<SelectArrayInput>`. It renders using [Material ui's `<Select>`](http://www.material-ui.com/#/components/select). Set the `choices` attribute to determine the options (with `id`, `name` tuples):

diff --git a/examples/demo/src/commands/CommandEdit.js b/examples/demo/src/commands/CommandEdit.js
@@ -58,6 +58,7 @@ const CommandEdit = ({ classes, ...props }) => (
                                     { id: 'delivered', name: 'delivered' },
                                     { id: 'ordered', name: 'ordered' },
                                     { id: 'cancelled', name: 'cancelled' },
+                                    { id: 'unknown', name: 'unknown', disabled: true },
                                 ]}
                             />
                             <BooleanInput source="returned" />

diff --git a/packages/ra-ui-materialui/src/input/SelectInput.js b/packages/ra-ui-materialui/src/input/SelectInput.js
@@ -30,6 +30,7 @@ const sanitizeRestProps = ({
     options,
     optionValue,
     optionText,
+    disableValue,
     perPage,
     record,
     reference,
@@ -108,6 +109,23 @@ const styles = theme => ({
  * <SelectInput source="gender" choices={choices} translateChoice={false}/>
  *
  * The object passed as `options` props is passed to the material-ui <Select> component
+ * 
+ * You can disable some choices by providing a `disableValue` field which name is `disabled` by default 
+ * @example
+ * const choices = [
+ *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
+ *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
+ *    { id: 976, first_name: 'William', last_name: 'Rinkerd', disabled: true },
+ * ];
+ * 
+ * @example
+ * const choices = [
+ *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
+ *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
+ *    { id: 976, first_name: 'William', last_name: 'Rinkerd', not_available: true },
+ * ];
+ * <SelectInput source="gender" choices={choices} disableValue="not_available" />
+ * 
  */
 export class SelectInput extends Component {
     /*
@@ -158,11 +176,12 @@ export class SelectInput extends Component {
     };
 
     renderMenuItem = choice => {
-        const { optionValue } = this.props;
+        const { optionValue, disableValue } = this.props;
         return (
             <MenuItem
                 key={get(choice, optionValue)}
                 value={get(choice, optionValue)}
+                disabled={get(choice, disableValue)}
             >
                 {this.renderMenuItemOption(choice)}
             </MenuItem>
@@ -235,6 +254,7 @@ SelectInput.propTypes = {
         PropTypes.element,
     ]).isRequired,
     optionValue: PropTypes.string.isRequired,
+    disableValue: PropTypes.string,
     resource: PropTypes.string,
     source: PropTypes.string,
     translate: PropTypes.func.isRequired,
@@ -249,6 +269,7 @@ SelectInput.defaultProps = {
     optionText: 'name',
     optionValue: 'id',
     translateChoice: true,
+    disableValue: 'disabled'
 };
 
 export default compose(

diff --git a/packages/ra-ui-materialui/src/input/SelectInput.spec.js b/packages/ra-ui-materialui/src/input/SelectInput.spec.js
@@ -53,6 +53,24 @@ describe('<SelectInput />', () => {
         assert.equal(MenuItemElement2.childAt(0).text(), 'Female');
     });
 
+    it('should render disable choices marked so', () => {
+        const wrapper = shallow(
+            <SelectInput
+                {...defaultProps}
+                choices={[
+                    { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' },
+                    { _id: 456, full_name: 'Jane Austen', sex: 'F' },
+                    { _id: 1, full_name: 'System Administrator', sex: 'F', disabled: true }
+                ]}
+            />
+        );
+        const MenuItemElements = wrapper.find('WithStyles(MenuItem)');
+        const MenuItemElement = MenuItemElements.at(1);
+        assert.equal(!!MenuItemElement.prop('disabled'), false);
+        const MenuItemElement2 = MenuItemElements.at(2);
+        assert.equal(MenuItemElement2.prop('disabled'), true);
+    });
+
     it('should add an empty menu when allowEmpty is true', () => {
         const wrapper = shallow(
             <SelectInput