mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Consolidated grid-field component
Every top-level folder in /components should be a standalone component. This isn't the case for the grid-field-* ones, so they belong into the same folder. See https://github.com/Automattic/wp-calypso/blob/master/docs/components.md merge styles
This commit is contained in:
Ingo Schommer
parent
e550363c67
commit
c70590e50c
@ -7,7 +7,7 @@ import SilverStripeComponent from '../../SilverStripeComponent';
|
||||
import FormComponent from '../form';
|
||||
import TextField from '../text-field';
|
||||
import HiddenField from '../hidden-field';
|
||||
import GridField from '../../sections/grid-field';
|
||||
import GridField from '../../components/grid-field';
|
||||
|
||||
// Using this to map field types to components until we implement dependency injection.
|
||||
var fakeInjector = {
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
# GridFieldAction
|
||||
|
||||
This component renders a button within a grid-field to handle actions.
|
||||
|
||||
## Props
|
||||
|
||||
### handleClick (function - required)
|
||||
|
||||
The handler for when a button is clicked
|
||||
|
||||
#### Arguments
|
||||
|
||||
* event - the click event
|
||||
@ -1,20 +0,0 @@
|
||||
.grid-field-action-component {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: $gray-dark;
|
||||
float: left;
|
||||
padding: 0 8px;
|
||||
height: 52px;
|
||||
|
||||
&:hover {
|
||||
color: darken($gray-dark, 10%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
jest.dontMock('../index');
|
||||
|
||||
describe('GridFieldActionComponent', () => {
|
||||
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
# GridFieldCell
|
||||
|
||||
This component represents a data cell in a GridFieldRow.
|
||||
|
||||
## Props
|
||||
|
||||
### width (number)
|
||||
|
||||
Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
|
||||
@ -1,25 +0,0 @@
|
||||
.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;
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
line-height: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $grid-x*2.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $grid-x*2.5;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.cell-width-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
jest.dontMock('../index');
|
||||
|
||||
describe('GridFieldCellComponent', () => {
|
||||
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
# GridFieldHeaderCell
|
||||
|
||||
This component is a cell in a GridFirldHeader component.
|
||||
|
||||
## Props
|
||||
|
||||
### width (number)
|
||||
|
||||
Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
|
||||
@ -1,27 +0,0 @@
|
||||
.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;
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
line-height: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $grid-x*2.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $grid-x*2.5;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.cell-width-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
jest.dontMock('../index');
|
||||
|
||||
describe('GridFieldHeaderCellComponent', () => {
|
||||
|
||||
});
|
||||
@ -1,5 +0,0 @@
|
||||
# GridFieldHeader
|
||||
|
||||
This component is used to display a tabel header row on a GridFieldComponent.
|
||||
|
||||
## Props
|
||||
@ -1,3 +0,0 @@
|
||||
.grid-field-header-component {
|
||||
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
jest.dontMock('../index');
|
||||
|
||||
describe('GridFieldHeaderComponent', () => {
|
||||
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
# GridFieldRow
|
||||
|
||||
Represents a row in a GridField.
|
||||
|
||||
## Props
|
||||
|
||||
### cells (array)
|
||||
|
||||
The table data to display in the row.
|
||||
@ -1,16 +0,0 @@
|
||||
.grid-field-table-component {
|
||||
li.grid-field-row-component {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
box-shadow: inset 0 -1px 0 0 $gray-lighter;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Header row
|
||||
&:first-child {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
jest.dontMock('../index');
|
||||
|
||||
describe('GridFieldRowComponent', () => {
|
||||
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
# GridFieldTableComponent
|
||||
|
||||
This component is used to display structured data in an extendible table layout.
|
||||
|
||||
## Props
|
||||
|
||||
### Headings (array)
|
||||
|
||||
The column headings.
|
||||
|
||||
### Rows (array)
|
||||
|
||||
The table rows.
|
||||
@ -1,5 +0,0 @@
|
||||
.grid-field-table-component {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
48
admin/javascript/src/components/grid-field/README.md
Normal file
48
admin/javascript/src/components/grid-field/README.md
Normal file
@ -0,0 +1,48 @@
|
||||
# GridField
|
||||
|
||||
General purpose component for tabular data.
|
||||
|
||||
## GridFieldTableComponent
|
||||
|
||||
This component is used to display structured data in an extendible table layout.
|
||||
|
||||
**Required Props**
|
||||
|
||||
* **Headings** - (array) The column headings.
|
||||
* **Rows** - (array) The table rows.
|
||||
|
||||
## GridFieldAction
|
||||
|
||||
This component renders a button within a grid-field to handle actions.
|
||||
|
||||
**Required Props**
|
||||
|
||||
* **handleClick** - Function for when a button is clicked
|
||||
|
||||
## GridFieldCell
|
||||
|
||||
This component represents a data cell in a GridFieldRow.
|
||||
|
||||
**Optional Props**
|
||||
|
||||
* **width** - Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
|
||||
|
||||
## GridFieldHeader
|
||||
|
||||
This component is used to display a table header row on a GridFieldComponent.
|
||||
|
||||
## GridFieldHeaderCell
|
||||
|
||||
This component is a cell in a GridFieldHeader component.
|
||||
|
||||
**Optional Props**
|
||||
|
||||
* **width** - Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
|
||||
|
||||
# GridFieldRow
|
||||
|
||||
Represents a row in a GridField.
|
||||
|
||||
**Optional Props**
|
||||
|
||||
* **cells** - (array) The table data to display in the row.
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import SilverStripeComponent from '../../SilverStripeComponent';
|
||||
import GridFieldRowComponent from '../grid-field-row';
|
||||
import GridFieldRowComponent from './row';
|
||||
|
||||
class GridFieldHeaderComponent extends SilverStripeComponent {
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React from 'react';
|
||||
import SilverStripeComponent from '../../SilverStripeComponent';
|
||||
import GridFieldTable from '../../components/grid-field-table';
|
||||
import GridFieldHeader from '../../components/grid-field-header';
|
||||
import GridFieldHeaderCell from '../../components/grid-field-header-cell';
|
||||
import GridFieldRow from '../../components/grid-field-row';
|
||||
import GridFieldCell from '../../components/grid-field-cell';
|
||||
import GridFieldAction from '../../components/grid-field-action';
|
||||
import GridFieldTable from './table';
|
||||
import GridFieldHeader from './header';
|
||||
import GridFieldHeaderCell from './header-cell';
|
||||
import GridFieldRow from './row';
|
||||
import GridFieldCell from './cell';
|
||||
import GridFieldAction from './action';
|
||||
|
||||
class GridField extends SilverStripeComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
||||
this.deleteCampaign = this.deleteCampaign.bind(this);
|
||||
this.editCampaign = this.editCampaign.bind(this);
|
||||
|
||||
97
admin/javascript/src/components/grid-field/styles.scss
Normal file
97
admin/javascript/src/components/grid-field/styles.scss
Normal file
@ -0,0 +1,97 @@
|
||||
.grid-field-action-component {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: $gray-dark;
|
||||
float: left;
|
||||
padding: 0 8px;
|
||||
height: 52px;
|
||||
|
||||
&:hover {
|
||||
color: darken($gray-dark, 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;
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
line-height: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $grid-x*2.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $grid-x*2.5;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.cell-width-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
line-height: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $grid-x*2.5;
|
||||
}
|
||||
|
||||
&: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%;
|
||||
border: 0;
|
||||
box-shadow: inset 0 -1px 0 0 $gray-lighter;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// Header row
|
||||
&:first-child {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-field-table-component {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
jest.dontMock('../index');
|
||||
jest.dontMock('../table');
|
||||
|
||||
const React = require('react'),
|
||||
ReactTestUtils = require('react-addons-test-utils'),
|
||||
GridFieldTableComponent = require('../index.js').default;
|
||||
GridFieldTableComponent = require('../table.js').default;
|
||||
|
||||
describe('GridFieldTableComponent', () => {
|
||||
var props;
|
||||
@ -33,11 +34,11 @@ describe('GridFieldTableComponent', () => {
|
||||
gridfield = ReactTestUtils.renderIntoDocument(
|
||||
<GridFieldTableComponent {...props} />
|
||||
);
|
||||
|
||||
|
||||
expect(gridfield.generateHeader()).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('generateRows()', function () {
|
||||
var gridfield;
|
||||
|
||||
@ -59,7 +60,7 @@ describe('GridFieldTableComponent', () => {
|
||||
gridfield = ReactTestUtils.renderIntoDocument(
|
||||
<GridFieldTableComponent {...props} />
|
||||
);
|
||||
|
||||
|
||||
expect(gridfield.generateRows()).toBe(null);
|
||||
});
|
||||
});
|
||||
@ -1,3 +0,0 @@
|
||||
# GridField
|
||||
|
||||
General purpose component for tabular data.
|
||||
@ -6,12 +6,7 @@
|
||||
/** -----------------------------
|
||||
* components
|
||||
* ------------------------------ */
|
||||
@import "../components/grid-field-table/styles";
|
||||
@import "../components/grid-field-cell/styles";
|
||||
@import "../components/grid-field-header/styles";
|
||||
@import "../components/grid-field-header-cell/styles";
|
||||
@import "../components/grid-field-row/styles";
|
||||
@import "../components/grid-field-action/styles";
|
||||
@import "../components/grid-field/styles";
|
||||
@import "../components/north-header/styles";
|
||||
@import "../components/north-header-breadcrumbs/styles";
|
||||
@import "../components/action/styles";
|
||||
|
||||
12
gulpfile.js
12
gulpfile.js
@ -194,12 +194,12 @@ gulp.task('bundle-lib', function bundleLib() {
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form', { expose: 'form' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-action', { expose: 'form-action' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-builder', { expose: 'form-builder' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/sections/grid-field', { expose: 'grid-field' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-cell', { expose: 'grid-field-cell' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-header', { expose: 'grid-field-header' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-header-cell', { expose: 'grid-field-header-cell' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-row', { expose: 'grid-field-row' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-table', { expose: 'grid-field-table' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field', { expose: 'grid-field' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/cell', { expose: 'grid-field-cell' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header', { expose: 'grid-field-header' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header-cell', { expose: 'grid-field-header-cell' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/row', { expose: 'grid-field-row' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/table', { expose: 'grid-field-table' })
|
||||
.require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/hidden-field', { expose: 'hidden-field' })
|
||||
.require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/i18n.js', { expose: 'i18n' })
|
||||
.require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/jQuery.js', { expose: 'jQuery' })
|
||||
|
||||
Loading…
Reference in New Issue
Block a user