Skip to content

Commit

Permalink
Make cell alignment work across columns instead of individual cells
Browse files Browse the repository at this point in the history 
Add jsdocs

Inherit the alignment property of the first cell in the column when adding new rows

Update e2e tests

Use consistent letter casing
  • Loading branch information
@talldan
talldan committed Jul 31, 2019
1 parent 899c64c commit 37a4e06
Show file tree
Hide file tree
Showing 6 changed files with 455 additions and 234 deletions.
12 changes: 10 additions & 2 deletions packages/block-editor/src/components/alignment-toolbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,15 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
},
];

export function AlignmentToolbar( { value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS, isCollapsed = true } ) {
export function AlignmentToolbar( props ) {
const {
value,
onChange,
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
label = __( 'Change text alignment' ),
isCollapsed = true,
} = props;

function applyOrUnset( align ) {
return () => onChange( value === align ? undefined : align );
}
Expand All @@ -38,7 +46,7 @@ export function AlignmentToolbar( { value, onChange, alignmentControls = DEFAULT
<Toolbar
isCollapsed={ isCollapsed }
icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
label={ __( 'Change text alignment' ) }
label={ label }
controls={ alignmentControls.map( ( control ) => {
const { align } = control;
const isActive = ( value === align );
Expand Down
132 changes: 77 additions & 55 deletions packages/block-library/src/table/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ import {
*/
import {
createTable,
updateCellContent,
updateCellAttribute,
updateSelectedCell,
getCellAttribute,
insertRow,
deleteRow,
insertColumn,
deleteColumn,
toggleSection,
isEmptyTableSection,
isCellSelected,
} from './state';
import icon from './icon';

Expand Down Expand Up @@ -108,6 +108,8 @@ export class TableEdit extends Component {
this.onDeleteColumn = this.onDeleteColumn.bind( this );
this.onToggleHeaderSection = this.onToggleHeaderSection.bind( this );
this.onToggleFooterSection = this.onToggleFooterSection.bind( this );
this.onChangeColumnAlignment = this.onChangeColumnAlignment.bind( this );
this.getCellAlignment = this.getCellAlignment.bind( this );

this.state = {
initialRowCount: 2,
Expand Down Expand Up @@ -177,35 +179,47 @@ export class TableEdit extends Component {
}

const { attributes, setAttributes } = this.props;
const { section, rowIndex, columnIndex } = selectedCell;

setAttributes( updateCellContent( attributes, {
section,
rowIndex,
columnIndex,
content,
} ) );
setAttributes( updateSelectedCell(
attributes,
selectedCell,
( cellAttributes ) => ( { ...cellAttributes, content } ),
) );
}

onChangeCellAlignment( value ) {
/**
* Align text within the a column.
*
* @param {string} align The new alignment to apply to the column.
*/
onChangeColumnAlignment( align ) {
const { selectedCell } = this.state;

if ( ! selectedCell ) {
return;
}

// Convert the cell selection to a column selection so that alignment
// is applied to the entire column.
const columnSelection = {
type: 'column',
columnIndex: selectedCell.columnIndex,
};

const { attributes, setAttributes } = this.props;
const { section, rowIndex, columnIndex } = selectedCell;

setAttributes( updateCellAttribute( attributes, {
section,
rowIndex,
columnIndex,
attributeName: 'align',
value,
} ) );
const newAttributes = updateSelectedCell(
attributes,
columnSelection,
( cellAttributes ) => ( { ...cellAttributes, align } ),
);
setAttributes( newAttributes );
}

/**
* Get the alignment of the currently selected cell.
*
* @return {string} The new alignment to apply to the column.
*/
getCellAlignment() {
const { selectedCell } = this.state;

Expand All @@ -218,6 +232,22 @@ export class TableEdit extends Component {
return getCellAttribute( attributes, { ...selectedCell, attributeName: 'align' } );
}

/**
* Add or remove a `head` table section.
*/
onToggleHeaderSection() {
const { attributes, setAttributes } = this.props;
setAttributes( toggleSection( attributes, 'head' ) );
}

/**
* Add or remove a `foot` table section.
*/
onToggleFooterSection() {
const { attributes, setAttributes } = this.props;
setAttributes( toggleSection( attributes, 'foot' ) );
}

/**
* Inserts a row at the currently selected row index, plus `delta`.
*
Expand All @@ -231,11 +261,11 @@ export class TableEdit extends Component {
}

const { attributes, setAttributes } = this.props;
const { section, rowIndex } = selectedCell;
const { sectionName, rowIndex } = selectedCell;

this.setState( { selectedCell: null } );
setAttributes( insertRow( attributes, {
section,
sectionName,
rowIndex: rowIndex + delta,
} ) );
}
Expand All @@ -254,16 +284,6 @@ export class TableEdit extends Component {
this.onInsertRow( 1 );
}

onToggleHeaderSection() {
const { attributes, setAttributes } = this.props;
setAttributes( toggleSection( attributes, 'head' ) );
}

onToggleFooterSection() {
const { attributes, setAttributes } = this.props;
setAttributes( toggleSection( attributes, 'foot' ) );
}

/**
* Deletes the currently selected row.
*/
Expand All @@ -275,10 +295,10 @@ export class TableEdit extends Component {
}

const { attributes, setAttributes } = this.props;
const { section, rowIndex } = selectedCell;
const { sectionName, rowIndex } = selectedCell;

this.setState( { selectedCell: null } );
setAttributes( deleteRow( attributes, { section, rowIndex } ) );
setAttributes( deleteRow( attributes, { sectionName, rowIndex } ) );
}

/**
Expand Down Expand Up @@ -327,23 +347,28 @@ export class TableEdit extends Component {
}

const { attributes, setAttributes } = this.props;
const { section, columnIndex } = selectedCell;
const { sectionName, columnIndex } = selectedCell;

this.setState( { selectedCell: null } );
setAttributes( deleteColumn( attributes, { section, columnIndex } ) );
setAttributes( deleteColumn( attributes, { sectionName, columnIndex } ) );
}

/**
* Creates an onFocus handler for a specified cell.
*
* @param {Object} selectedCell Object with `section`, `rowIndex`, and
* @param {Object} cellLocation Object with `section`, `rowIndex`, and
* `columnIndex` properties.
*
* @return {Function} Function to call on focus.
*/
createOnFocus( selectedCell ) {
createOnFocus( cellLocation ) {
return () => {
this.setState( { selectedCell } );
this.setState( {
selectedCell: {
...cellLocation,
type: 'cell',
},
} );
};
}

Expand Down Expand Up @@ -403,32 +428,28 @@ export class TableEdit extends Component {
*
* @return {Object} React element for the section.
*/
renderSection( { type, rows } ) {
renderSection( { name, rows } ) {
if ( isEmptyTableSection( rows ) ) {
return null;
}

const Tag = `t${ type }`;
const Tag = `t${ name }`;
const { selectedCell } = this.state;

return (
<Tag>
{ rows.map( ( { cells }, rowIndex ) => (
<tr key={ rowIndex }>
{ cells.map( ( { content, tag: CellTag, scope, align }, columnIndex ) => {
const isSelected = selectedCell && (
type === selectedCell.section &&
rowIndex === selectedCell.rowIndex &&
columnIndex === selectedCell.columnIndex
);

const cell = {
section: type,
const cellLocation = {
sectionName: name,
rowIndex,
columnIndex,
};

const cellClasses = classnames( {
const isSelected = isCellSelected( cellLocation, selectedCell );

const cellClasses = classnames( {
'is-selected': isSelected,
[ `has-text-align-${ align }` ]: align,
} );
Expand All @@ -443,7 +464,7 @@ export class TableEdit extends Component {
className="wp-block-table__cell-content"
value={ content }
onChange={ this.onChange }
unstableOnFocus={ this.createOnFocus( cell ) }
unstableOnFocus={ this.createOnFocus( cellLocation ) }
/>
</CellTag>
);
Expand Down Expand Up @@ -523,10 +544,11 @@ export class TableEdit extends Component {
/>
</Toolbar>
<AlignmentToolbar
label={ __( 'Change column alignment' ) }
alignmentControls={ ALIGNMENT_CONTROLS }
value={ this.getCellAlignment() }
onChange={ ( nextAlign ) => this.onChangeCellAlignment( nextAlign ) }
isCollapsed
onChange={ ( nextAlign ) => this.onChangeColumnAlignment( nextAlign ) }
onHover={ this.onHoverAlignment }
/>
</BlockControls>
<InspectorControls>
Expand Down Expand Up @@ -563,9 +585,9 @@ export class TableEdit extends Component {
</InspectorControls>
<figure className={ className }>
<table className={ tableClasses }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
<Section name="head" rows={ head } />
<Section name="body" rows={ body } />
<Section name="foot" rows={ foot } />
</table>
</figure>
</>
Expand Down
Loading

0 comments on commit 37a4e06

Please sign in to comment.