Moved CSS files back to components.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 594996b3fe
commit adad9b307f

@ -16,13 +16,7 @@
* under the License.
*/
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import DataTableRow from './DataTableRow';
import DataTableHeader from './DataTableHeader';
import RaisedButton from 'material-ui/RaisedButton';
import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
/**
* The Custom Table Component.
@ -53,8 +47,6 @@ class DataTable extends Component {
constructor() {
super();
this.handleRowClick = this.handleRowClick.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.state = {
data: [],
headers: [],
@ -62,92 +54,21 @@ class DataTable extends Component {
this.scriptId = "data-table"
};
componentWillMount() {
console.log("Will mount", this.props.data); //TODO: Remove this
this.setState({data: this.props.data, headers: this.props.headers}, Theme.insertThemingScripts(this.scriptId));
/**
*Loading the theme files based on the the user-preference.
*/
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
shouldComponentUpdate(nextProps, nextState) {
if (!nextProps.data) {
this.setState({data: nextState.data});
return true;
}
this.setState({data: nextProps.data});
return true;
}
/**
* Triggers when user click on table row.
* This method invokes the parent method handleRowClick, which is passed via props.
* */
handleRowClick(id) {
this.props.handleRowClick(id);
}
handleBtnClick(id) {
this.props.onAppEditClick(id);
}
render() {
const {data, headers} = this.state;
//TODO: Remove this
console.log(data);
let noDataContent = null;
if (this.props.noDataMessage.type === 'button') {
noDataContent = <div><RaisedButton label={this.props.noDataMessage.text}/></div>
}
return (
<div className="data-table">
{this.props.children}
</div>
)
if (data) {
return (<Table
selectable={false}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
{headers.map((header) => {
return (
<DataTableHeader
key={header.data_id}
className="datatableRowColumn"
header={header}
/>
)}
)}
</TableRow>
</TableHeader>
<TableBody>
{data.map((dataItem) => {
return (
<DataTableRow
key={dataItem.id}
dataItem={dataItem}
handleButtonClick={this.handleBtnClick}
handleClick={this.handleRowClick}
/>
)
})}
</TableBody>
</Table>)
}
return (<div>{noDataContent}</div>);
}
}
DataTable.prototypes = {
data: PropTypes.arrayOf(Object),
headers: PropTypes.arrayOf(Object),
sortData: PropTypes.func,
handleRowClick: PropTypes.func,
noDataMessage: PropTypes.object
};
DataTable.prototypes = {};
export default DataTable;

@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react';
import FlatButton from 'material-ui/FlatButton';
import {TableHeaderColumn} from 'material-ui/Table';
import {Col, Row} from "reactstrap";
/**
* Data Table header component.
@ -55,33 +56,25 @@ class DataTableHeader extends Component {
}
render() {
let headerCell = null;
/**
* If the header is sortable, create a button with onClick handler.
* else create a span element with label as the table header.
* */
if (this.props.header.sortable) {
headerCell =
<FlatButton
label={this.props.header.label}
onClick={this.tableHeaderClick}
className="sortableHeaderCell"
/>
} else {
headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
}
/*margin-top: 30px
* margin-bottom: 10px
* */
return (
<TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn">
{headerCell}
</TableHeaderColumn>
<Row className="data-table-header">
{this.props.headers.map(header => {
let headerStyle = header.size;
return <Col className={headerStyle}>{header.label}</Col>
})}
</Row>
);
}
}
DataTableHeader.prototypes = {
header: PropTypes.object
headers: PropTypes.array
};
export default DataTableHeader;

@ -23,6 +23,7 @@ import IconButton from 'material-ui/IconButton';
import Create from 'material-ui/svg-icons/content/create'
import {TableRow, TableRowColumn} from 'material-ui/Table';
import Avatar from 'material-ui/Avatar';
import {Row} from "reactstrap";
/**
@ -68,38 +69,12 @@ class DataTableRow extends Component {
render() {
const {dataItem} = this.state;
//height: 62px
return (
<TableRow
key={this.props.key}
onClick={this.handleClick.bind(this)}
>
<TableRowColumn
className="datatableRowColumn"
key={Math.random()}
>
<Avatar>{dataItem.name}</Avatar>
</TableRowColumn>
{Object.keys(dataItem).map((key) => {
if (key !== 'id') {
return (
<TableRowColumn
className="datatableRowColumn"
key={key}
>
{dataItem[key]}
</TableRowColumn>)
}
<Row className="data-table-row">
})}
<TableRowColumn
className="datatableRowColumn"
key={dataItem.id}
>
<IconButton id={dataItem.id} onClick={this.handleBtnClick.bind(this)}>
<Create id={dataItem.id}/>
</IconButton>
</TableRowColumn>
</TableRow>
</Row>
);
}
}

@ -0,0 +1,80 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import FlatButton from 'material-ui/FlatButton';
import {TableHeaderColumn} from 'material-ui/Table';
import {Col, Row} from "reactstrap";
/**
* Data Table header component.
* This component creates the header elements of the table.
* */
class HeaderCell extends Component {
constructor() {
super();
this.tableHeaderClick = this.tableHeaderClick.bind(this);
this.scriptId = "data-table";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* The onClick function of the table header.
* Invokes the function passed in the header object.
* */
tableHeaderClick() {
this.props.header.sort();
}
render() {
/*margin-top: 30px
* margin-bottom: 10px
* */
return (
<Row className="data-table-header">
{this.props.headers.map(header => {
let headerStyle = header.size;
return <Col className={headerStyle}>{header.label}</Col>
})}
</Row>
);
}
}
DataTableHeader.prototypes = {
headers: PropTypes.array
};
export default HeaderCell;

@ -25,21 +25,19 @@
right: 0%;
background-color: #ffffff;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
padding: 60px 0px 0 5px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.app-view-drawer a {
.drawer-close-btn {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* Position and style the close button (top right corner) */
.app-view-drawer .closebtn {
position: absolute;
@ -49,9 +47,8 @@
margin-left: 50px;
}
.drawer-close-btn {
height: 40px;
width: 30px;
.drawer-close-btn i {
font-size: 14px;
}
.drawer-close-btn:hover {
@ -67,7 +64,8 @@
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.sidenav {
padding-top: 15px;
}
}

@ -16,23 +16,24 @@
* under the License.
*/
/*
* Material design based Floating button.
*/
.btn-circle {
color: white;
position: relative;
background-color: #e65100;
border-radius: 50%;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px
}
.btn-circle i {
position: absolute;
margin-top: 37%;
margin-left: 37%;
margin-top: 40%;
}
.small {
height: 50px;
width: 50px;
height: 56px;
width: 56px;
}
.medium {
@ -40,11 +41,6 @@
width: 100px;
}
.btn-circle:hover {
cursor: pointer;
background-color: rgb(255, 93, 2);
}
.primary {
background-color: blue;
}
Loading…
Cancel
Save