Before you add the comment, you can set the indicator size for the comment using the indicatorSize method or set the indicator color for the comment using the indicatorColor method. For example:
You can also get size & color of comment indicator
You should set size & color in the legal range:
If you want to set indicator color, you should set a string type data.
If this string cannot be identified as a color (like 'black' '#000' 'rgba(255, 255, 0, 0.5)' can be identified), the comments indicator will be set to the default color black.
If you want to set indicator size, you should set a number type data and make sure the data > 1.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
let spread;
export const AppFunc = () => {
let [color, setColor] = React.useState('red');
let [size, setSize] = React.useState(6);
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>initSpread(spread)}>
<Worksheet/>
</SpreadSheets>
</div>
<Panel setColor={setColor}
color = {color}
size = {size}
setSize={setSize}/>
</div>);
}
const Panel = (props) => {
return (
<div class="options-container">
<div class="option-row">
<label for="color">Color:</label>
<input id="color" type="text" value= {props.color} onChange={(e)=>{props.setColor(e.target.value)}}/>
<input type="button" style={{display:"none"}} value="Set Comment Indicator Color"id="setColor"onClick={setColor(props.color)}/>
</div>
<div class="option-row">
<label for="size">Size</label>
<input id="size" type="number" value= {props.size} onChange={(e)=>{props.setSize(parseInt(e.target.value))}}/>
<input type="button" style={{display:"none"}} value="Set Comment Indicator Size" id="setSize"onClick={setSize(props.size)}/>
</div>
</div>
)
}
function initSpread(_spread) {
spread = _spread;
spread.suspendPaint();
let sheet = spread.getSheet(0);
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, "there is a comment on the upper right corner of the cell");
sheet.comments.add(1, 1, "new comment!");
spread.resumePaint();
}
function setColor (color) {
spread && spread.getActiveSheet().comments.get(1,1).indicatorColor(color);
}
function setSize (size) {
if (!isNaN(size)) {
spread && spread.getActiveSheet().comments.get(1,1).indicatorSize(size);
} else {
spread && spread.getActiveSheet().comments.get(1,1).indicatorSize(6);
}
}
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
<Worksheet/>
</SpreadSheets>
</div>
<Panel setColor={(e) => { this.setColor(e) }}
setSize={(e) => { this.setSize(e) }} />
</div>);
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
let sheet = spread.getSheet(0);
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, "there is a comment on the upper right corner of the cell");
sheet.comments.add(1, 1, "new comment!");
spread.resumePaint();
}
setColor(color) {
this.spread && this.spread.getActiveSheet().comments.get(1, 1).indicatorColor(color);
}
setSize(size) {
if (!isNaN(size)) {
this.spread && this.spread.getActiveSheet().comments.get(1, 1).indicatorSize(size);
} else {
this.spread && this.spread.getActiveSheet().comments.get(1, 1).indicatorSize(6);
}
}
}
class Panel extends Component{
constructor(props){
super(props);
this.state = {
color: 'red',
size: 6,
commentText: "new comment!"
}
}
render() {
return (
<div class="options-container">
<div class="option-row">
<label for="color">Color:</label>
<input id="color" type="text" value= {this.state.color} onChange={(e)=>{this.setState({color: e.target.value})}}/>
<input type="button" value="Set Comment Indicator Color" id="setColor"onClick={this.props.setColor(this.state.color)}/>
</div>
<div class="option-row">
<label for="size">Size</label>
<input id="size" type="text" value= {this.state.size} onChange={(e)=>{this.setState({size: parseInt(e.target.value)})}}/>
<input type="button" value="Set Comment Indicator Size" id="setSize"onClick={this.props.setSize(this.state.size)}/>
</div>
</div>
)
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height:100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
label {
display: inline-block;
min-width: 90px;
margin: 6px 0;
}
input {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
width: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
