Componnet: Add isDisabled support for DropdownMenu controls

WordPress · Aug 23, 2018 · 19b7cb3 · 19b7cb3
1 parent 7b59b4b
commit 19b7cb3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 36 deletions.
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -107,14 +107,8 @@ export default class TableEdit extends Component {
 	 * @param {Array} content A RichText content value.
 	 */
 	onChange( content ) {
-		const { selectedCell } = this.state;
-
-		if ( ! selectedCell ) {
-			return;
-		}
-
 		const { attributes, setAttributes } = this.props;
-		const { section, rowIndex, columnIndex } = selectedCell;
+		const { section, rowIndex, columnIndex } = this.state.selectedCell;
 
 		setAttributes( updateCellContent( attributes, {
 			section,
@@ -130,14 +124,8 @@ export default class TableEdit extends Component {
 	 * @param {number} delta Offset for selected row index at which to insert.
 	 */
 	onInsertRow( delta ) {
-		const { selectedCell } = this.state;
-
-		if ( ! selectedCell ) {
-			return;
-		}
-
 		const { attributes, setAttributes } = this.props;
-		const { section, rowIndex } = selectedCell;
+		const { section, rowIndex } = this.state.selectedCell;
 
 		this.setState( { selectedCell: null } );
 		setAttributes( insertRow( attributes, {
@@ -164,14 +152,8 @@ export default class TableEdit extends Component {
 	 * Deletes the currently selected row.
 	 */
 	onDeleteRow() {
-		const { selectedCell } = this.state;
-
-		if ( ! selectedCell ) {
-			return;
-		}
-
 		const { attributes, setAttributes } = this.props;
-		const { section, rowIndex } = selectedCell;
+		const { section, rowIndex } = this.state.selectedCell;
 
 		this.setState( { selectedCell: null } );
 		setAttributes( deleteRow( attributes, { section, rowIndex } ) );
@@ -183,14 +165,8 @@ export default class TableEdit extends Component {
 	 * @param {number} delta Offset for selected column index at which to insert.
 	 */
 	onInsertColumn( delta = 0 ) {
-		const { selectedCell } = this.state;
-
-		if ( ! selectedCell ) {
-			return;
-		}
-
 		const { attributes, setAttributes } = this.props;
-		const { section, columnIndex } = selectedCell;
+		const { section, columnIndex } = this.state.selectedCell;
 
 		this.setState( { selectedCell: null } );
 		setAttributes( insertColumn( attributes, {
@@ -217,14 +193,8 @@ export default class TableEdit extends Component {
 	 * Deletes the currently selected column.
 	 */
 	onDeleteColumn() {
-		const { selectedCell } = this.state;
-
-		if ( ! selectedCell ) {
-			return;
-		}
-
 		const { attributes, setAttributes } = this.props;
-		const { section, columnIndex } = selectedCell;
+		const { section, columnIndex } = this.state.selectedCell;
 
 		this.setState( { selectedCell: null } );
 		setAttributes( deleteColumn( attributes, { section, columnIndex } ) );

diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md
@@ -64,7 +64,7 @@ A human-readable label to present as accessibility text on the focused collapsed
 
 An array of objects describing the options to be shown in the expanded menu.
 
-Each object should include an `icon` [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug string, a human-readable `title` string, and an `onClick` function callback to invoke when the option is selected.
+Each object should include an `icon` [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug string, a human-readable `title` string, `isDisabled` boolean flag and an `onClick` function callback to invoke when the option is selected.
 
 - Type: `Array`
 - Required: Yes

diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -68,6 +68,9 @@ function DropdownMenu( {
 							<IconButton
 								key={ index }
 								onClick={ ( event ) => {
+									if ( control.isDisabled ) {
+										return;
+									}
 									event.stopPropagation();
 									onClose();
 									if ( control.onClick ) {
@@ -77,6 +80,7 @@ function DropdownMenu( {
 								className="components-dropdown-menu__menu-item"
 								icon={ control.icon }
 								role="menuitem"
+								disabled={ control.isDisabled }
 							>
 								{ control.title }
 							</IconButton>