tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Convert react grid-field from flexbox to table-based

This commit is contained in:
scott1702 2016-03-31 16:49:12 +13:00 committed by Ingo Schommer
parent 4f148c2778
commit 6aa22c38ed
5 changed files with 25 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
admin/javascript/src/components/grid-field/cell.js
View File

@ -5,26 +5,10 @@ class GridFieldCellComponent extends SilverStripeComponent {
render() {
return (
<div className={this.getCellClassNames()}>{this.props.children}</div>
<div className='grid-field-cell-component'>{this.props.children}</div>
);
}
getCellClassNames() {
var cellClassNames = 'grid-field-cell-component ';
if (typeof this.props.width !== 'number') {
cellClassNames += 'cell-width-5';
} else if (this.props.width > 10) {
cellClassNames += 'cell-width-10';
} else if (this.props.width < 1) {
cellClassNames += 'cell-width-1';
} else {
cellClassNames += `cell-width-${this.props.width}`;
}
return cellClassNames;
}
}
GridFieldCellComponent.PropTypes = {

18
admin/javascript/src/components/grid-field/header-cell.js
View File

@ -5,26 +5,10 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
render() {
return (
<div className={this.getHeaderCellClassNames()}>{this.props.children}</div>
<div className='grid-field-header-cell-component'>{this.props.children}</div>
);
}
getHeaderCellClassNames() {
var headerCellClassNames = 'grid-field-header-cell-component ';
if (typeof this.props.width !== 'number') {
headerCellClassNames += 'cell-width-5';
} else if (this.props.width > 10) {
headerCellClassNames += 'cell-width-10';
} else if (this.props.width < 1) {
headerCellClassNames += 'cell-width-1';
} else {
headerCellClassNames += `cell-width-${this.props.width}`;
}
return headerCellClassNames;
}
}
GridFieldHeaderCellComponent.PropTypes = {

18
admin/javascript/src/components/grid-field/index.js
View File

@ -42,34 +42,30 @@ class GridField extends SilverStripeComponent {
const columns = this.props.data.columns;
// TODO Replace with display: table based system
const cellWidth = 5;
const actionCellWidth = 2 * 36 + 12;
// Placeholder to align the headers correctly with the content
const actionPlaceholder = <span key={'actionPlaceholder'} style={{width: actionCellWidth}} />;
const headerCells = columns.map((column, i) => <GridFieldHeaderCell key={i} width={cellWidth}>{column.name}</GridFieldHeaderCell>);
const actionPlaceholder = <GridFieldCell key={'actionPlaceholder'} />;
const headerCells = columns.map((column, i) => <GridFieldHeaderCell key={i} >{column.name}</GridFieldHeaderCell>);
const header = <GridFieldHeader>{headerCells.concat(actionPlaceholder)}</GridFieldHeader>;
const rows = records.map((record, i) => {
var cells = columns.map((column, i) => {
// Get value by dot notation
var val = column.field.split('.').reduce((a, b) => a[b], record)
return <GridFieldCell key={i} width={column.width}>{val}</GridFieldCell>
return <GridFieldCell key={i}>{val}</GridFieldCell>
});
var rowActions = [
var rowActions = <GridFieldCell key={i + '-actions'}>
<GridFieldAction
icon={'cog'}
handleClick={this.editRecord.bind(this, record.ID)}
key={"action-" + i + "-edit"}
/>,
/>
<GridFieldAction
icon={'cancel'}
handleClick={this.deleteRecord.bind(this, record.ID)}
key={"action-" + i + "-delete"}
/>
];
</GridFieldCell>;
return <GridFieldRow key={i}>{cells.concat(rowActions)}</GridFieldRow>;
});
@ -93,7 +89,7 @@ class GridField extends SilverStripeComponent {
);
}
editRecord(event) {
editRecord(id, event) {
event.preventDefault();
// TODO
}

49
admin/javascript/src/components/grid-field/styles.scss
View File

@ -2,9 +2,9 @@
background: none;
border: 0;
color: $gray-dark;
float: left;
padding: 0 8px;
height: 52px;
height: 20px;
vertical-align: top;
&:hover {
color: darken($gray-dark, 10%);
@ -13,20 +13,10 @@
&::before {
font-size: 20px;
}
&:last-of-type {
margin-right: 12px;
}
}
.grid-field-cell-component {
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
display: table-cell;
padding: $grid-y*2 $grid-x*2;
line-height: 20px;
@ -38,23 +28,19 @@
padding-right: $grid-x*2.5;
}
@for $i from 1 through 10 {
&.cell-width-#{$i} {
flex-grow: $i;
}
&[data-reactid$=actionPlaceholder] {
width: 1px;
}
&[data-reactid$=-actions] {
white-space: nowrap;
}
}
.grid-field-header-cell-component {
text-transform: uppercase;
font-size: $font-size-root - 1;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
display: table-cell;
padding: $grid-y*2 $grid-x*2;
line-height: 20px;
@ -65,19 +51,11 @@
&:last-child {
padding-right: $grid-x*2.5;
}
@for $i from 1 through 10 {
&.cell-width-#{$i} {
flex-grow: $i;
}
}
}
.grid-field-table-component {
li.grid-field-row-component {
display: flex;
flex-flow: row nowrap;
width: 100%;
display: table-row;
border: 0;
box-shadow: inset 0 -1px 0 0 $gray-lighter;
margin: 0;
@ -91,7 +69,6 @@
}
.grid-field-table-component {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
display: table;
width: 100%;
}

20
javascript/dist/InlineFormAction.js vendored
View File

@ -13,30 +13,16 @@
})(this, function () {
'use strict';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
Behaviour.register({
'div.inlineformaction input#$ID': {
onclick: function onclick() {
var url = jQuery('base').attr('href') + 'admin-custom/' + this.name.substring(7) + '?ID=' + document.getElementById('Form_EditForm_ID').value + '&ajax=1';
jQuery.ajax(_defineProperty({
jQuery.ajax({
'url': url,
success: Ajax.Evaluator,
success: Ajax.Evaluator
}, 'success', Ajax.Evaluator));
});
return false;
}