Skip to content

T
Tia-dev
Commit df24f678 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

update tooltip

parent ee945e60
Show whitespace changes
Inline Side-by-side
Showing with 26 additions and 22 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ df24f678
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField, InputBase, Snackbar } from "@material-ui/core"; import { TextField, InputBase, Snackbar, withStyles, Tooltip } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
...@@ -17,6 +17,16 @@ import api from "../../api"; ...@@ -17,6 +17,16 @@ import api from "../../api";
import Constant from '../../library/Constant'; import Constant from '../../library/Constant';
import { css } from "@emotion/core"; import { css } from "@emotion/core";
import PropagateLoader from "react-spinners/PropagateLoader" import PropagateLoader from "react-spinners/PropagateLoader"
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
...@@ -66,7 +76,6 @@ export default class ApprovalMatrix extends Component { ...@@ -66,7 +76,6 @@ export default class ApprovalMatrix extends Component {
let isi = resp.rows.slice(3) let isi = resp.rows.slice(3)
let payload = [] let payload = []
isi.map((item, index) => { isi.map((item, index) => {
console.log(item)
if (item.length > 0) { if (item.length > 0) {
payload.push({ payload.push({
id: index + 1, id: index + 1,
...@@ -173,12 +182,11 @@ export default class ApprovalMatrix extends Component { ...@@ -173,12 +182,11 @@ export default class ApprovalMatrix extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ? {tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="email"> <LightTooltip title={tableMeta.rowData[7][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="email" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -198,12 +206,11 @@ export default class ApprovalMatrix extends Component { ...@@ -198,12 +206,11 @@ export default class ApprovalMatrix extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ? {tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="fullname"> <LightTooltip title={tableMeta.rowData[7][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
} }
<ReactTooltip border={true} id="fullname" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -223,12 +230,11 @@ export default class ApprovalMatrix extends Component { ...@@ -223,12 +230,11 @@ export default class ApprovalMatrix extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ? {tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="operatorname"> <LightTooltip title={tableMeta.rowData[7][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="operatorname" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -248,12 +254,11 @@ export default class ApprovalMatrix extends Component { ...@@ -248,12 +254,11 @@ export default class ApprovalMatrix extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ? {tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="startdate"> <LightTooltip title={tableMeta.rowData[7][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
...@@ -273,12 +278,11 @@ export default class ApprovalMatrix extends Component { ...@@ -273,12 +278,11 @@ export default class ApprovalMatrix extends Component {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ? {tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="enddate"> <LightTooltip title={tableMeta.rowData[7][check].message} arrow>
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
</a> : </LightTooltip> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val === "" ? "Empty" : val}</span>
} }
<ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
</div > </div >
); );
} }
......
src/container/BudgetTahunan/TaxPlanning.js
View file @ df24f678
...@@ -3520,7 +3520,7 @@ export default class TaxPlanning extends Component { ...@@ -3520,7 +3520,7 @@ export default class TaxPlanning extends Component {
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}> {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */} </TableCell> */}
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, paddingBottom: 8 }}>{columnMeta.name}</div> <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, paddingTop: 8 }}>{columnMeta.name}</div>
<div style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky", paddingBottom: 20 }}> <div style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky", paddingBottom: 20 }}>
<div style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}> <div style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Trial Balance (Fiscal)"}</span> <span>{"Trial Balance (Fiscal)"}</span>
...@@ -4217,7 +4217,7 @@ export default class TaxPlanning extends Component { ...@@ -4217,7 +4217,7 @@ export default class TaxPlanning extends Component {
</div> </div>
</div> </div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150), height: this.props.height - 400 }}> <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && <MuiThemeProvider theme={getMuiTheme()}> {!this.state.loading && <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable2} data={dataTable2}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment