Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
#772 Size column property
Browse files Browse the repository at this point in the history
  • Loading branch information
@damianprzygodzki
damianprzygodzki committed May 24, 2017
1 parent af7a2b1 commit 289164d
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 60 deletions.
25 changes: 9 additions & 16 deletions src/assets/css/table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,38 +251,31 @@ th {
position: relative;
}

.th-lg {
width: 200px;
/* Table cols sizing */

.td-lg {
width: 225px;
max-width: 225px;
}

.th-md {
width: 100px;
.td-md {
width: 144px;
max-width: 144px;
}

.th-sm {
.td-sm {
min-width: 60px;
max-width: 100px;
}

.table .td-lg {
width: 225px;
max-width: 225px;
}

.td-lg .input-dropdown-list {
width: 225px;
}

.table .td-md {
width: 144px;
max-width: 144px;
}

.td-lg .input-dropdown-list {
width: auto;
}


.pagination {
margin-top: 0;
margin-bottom: 0;
Expand Down
36 changes: 30 additions & 6 deletions src/components/table/Table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,31 @@ class Table extends Component {
}
}

getSizeClass = (col) => {
const {widgetType, size} = col;
const lg = ['List', 'Lookup', 'LongText', 'Date', 'DateTime', 'Time'];
const md = ['Text', 'Address', 'ProductAttributes'];

if(size){
switch(size){
case 'S':
return 'td-sm';
case 'M':
return 'td-md';
case 'L':
return 'td-lg';
}
}else{
if(lg.indexOf(widgetType) > -1){
return 'td-lg';
}else if(md.indexOf(widgetType) > -1){
return 'td-md';
}else {
return 'td-sm';
}
}
}

renderTableBody = () => {
const {
tabid, cols, type, docId, readonly, keyProperty, onDoubleClick,
Expand Down Expand Up @@ -670,6 +695,7 @@ class Table extends Component {
item[key].saveStatus &&
!item[key].saveStatus.saved
}
getSizeClass={this.getSizeClass}
/>
</tbody>
);
Expand Down Expand Up @@ -792,13 +818,11 @@ class Table extends Component {
>
<thead>
<TableHeader
cols={cols}
mainTable={mainTable}
sort={sort}
orderBy={orderBy}
{...{cols, mainTable, sort,
orderBy, page, indentSupported
}}
getSizeClass={this.getSizeClass}
deselect={this.deselectAllProducts}
page={page}
indentSupported={indentSupported}
/>
</thead>
{this.renderTableBody()}
Expand Down
13 changes: 2 additions & 11 deletions src/components/table/TableCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ class TableCell extends Component {
const {
isEdited, widgetData, item, docId, type, rowId, tabId,
onDoubleClick, onKeyDown, readonly, updatedRow, tabIndex, entity,
listenOnKeys, listenOnKeysFalse, closeTableField
listenOnKeys, listenOnKeysFalse, closeTableField, getSizeClass
} = this.props;

return (
Expand All @@ -114,16 +114,7 @@ class TableCell extends Component {
(item.gridAlign ? 'text-xs-' + item.gridAlign + ' ' : '') +
(widgetData[0].readonly ? 'cell-disabled ' : '') +
(widgetData[0].mandatory ? 'cell-mandatory ' : '') +
(item.widgetType==='Lookup' ||
item.widgetType==='LongText' ||
item.widgetType==='List' ||
item.widgetType==='Date' ||
item.widgetType==='DateTime' ||
item.widgetType==='Time' ?
'td-lg ' : '') +
(item.widgetType==='ProductAttributes' ? 'td-md ' : '') +
(item.widgetType==='Address' ? 'td-md ' : '') +
(item.widgetType==='Text' ? 'td-md ' : '') +
(getSizeClass(item) + ' ') +
(item.widgetType) +
((updatedRow) ? ' pulse-on' : ' pulse-off')
}
Expand Down
19 changes: 3 additions & 16 deletions src/components/table/TableHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,6 @@ class TableHeader extends Component {
super(props);
}

getSizeClass = (widgetType) => {
const lg = ['List', 'Lookup', 'LongText'];
const md = ['DateTime', 'Date', 'Time', 'Text'];

if(lg.indexOf(widgetType) > -1){
return 'th-lg';
}else if(md.indexOf(widgetType) > -1){
return 'th-md';
}else {
return 'th-sm';
}
}

renderSorting = (field, caption) => {
const {sort, orderBy, deselect, page} = this.props;
let sorting = {};
Expand Down Expand Up @@ -54,12 +41,12 @@ class TableHeader extends Component {
}

renderCols = (cols, mainTable) => {
const {getSizeClass} = this.props;

return cols && cols.map((item, index) =>
<th
key={index}
className={
this.getSizeClass(item.widgetType)
}
className={getSizeClass(item)}
>
{!mainTable ? item.caption: ''}
{mainTable ?
Expand Down
14 changes: 3 additions & 11 deletions src/components/table/TableItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ class TableItem extends Component {
renderCells = (cols, cells) => {
const {
type, docId, rowId, tabId, readonly, mainTable, newRow,
changeListenOnTrue, tabIndex, entity
changeListenOnTrue, tabIndex, entity, getSizeClass
} = this.props;

const {
Expand All @@ -118,15 +118,9 @@ class TableItem extends Component {

return (
<TableCell
entity={entity}
type={type}
docId={docId}
rowId={rowId}
tabId={tabId}
item={item}
readonly={readonly}
{...{getSizeClass, entity, type, docId, rowId, tabId, item,
readonly, widgetData, tabIndex, listenOnKeys }}
key={index}
widgetData={widgetData}
isEdited={edited === property}
onDoubleClick={(e) =>
this.handleEditProperty(e, property, true)
Expand All @@ -140,8 +134,6 @@ class TableItem extends Component {
}
updatedRow={updatedRow || newRow}
updateRow={this.updateRow}
tabIndex={tabIndex}
listenOnKeys={listenOnKeys}
listenOnKeysFalse={this.listenOnKeysFalse}
closeTableField={(e) => this.closeTableField(e)}
/>
Expand Down

0 comments on commit 289164d

Please sign in to comment.