I have component which have div element. I want to be able to disable/enable clicking on that div element based on the border color of that div element.
Idea is to have a method which will return what border color should be drawn on div, and then if color is 'green' then set pointerEvent of that div to 'auto' if it is not 'green' set pointerEvent to 'none'. However I am getting strange syntax error when I try to do that which I can't figure out why it is happening, I think code is ok, but some other configuration within Typescript might be wrong. The error which I get is shown below
[ts] Type '{ pointerEvents: string; display: string; border: string; height: string; width: string; marginLeft: string; }' is not assignable to type 'CSSProperties'. Types of property 'pointerEvents' are incompatible. Type 'string' is not assignable to type 'PointerEventsProperty'. [2322]
I tried to set property just to be one value 'none' or 'auto' and that works fine, but when I put in conditional statement it doesn't work. I tried to set my style to be of type CSSProperties but then I get error shown below:
[ts] Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "all" | "auto" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke" | Observable<...>'. [2322]
Style definition:
const divContainerDetailsStyle ={
pointerEvents: `${this.whatColorToDraw('container') == 'green' ? 'auto' as PointerEventsProperty : 'none' as PointerEventsProperty }`,
display: 'inline-block',
border: `${this.whatColorToDraw('container') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('container')}`,
height: '20%',
width: '100%',
marginLeft: '10px'
}
Call to that style:
return (
<div style={{ height: '100%', width: '100%' }}>
<div style={{ height: '100%', width: '70%', marginLeft: '30%', padding: '10px' }}>
<div className="row" style={divContainerDetailsStyle}>
<ContainerDetails container={this.state.selectedContainer != undefined ? this.state.selectedContainer : emptyContainer} containerChangeHandler={this.onContainerChangeHandler} menuItemsNames ={menuItemsNames}></ContainerDetails>
</div>
<div className="row" style={{ display: 'inline-block', border: `${this.whatColorToDraw('device') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('device')}`, height: '80%', width: '100%', marginTop: '5px', marginLeft: '10px' }}>
<DeviceDetails selectedDevice={this.state.selectedDevice != undefined ? this.state.selectedDevice : emptyDevice} />
</div>
</div>
</div>
)
What color to draw method
whatColorToDraw(componentName) {
switch (this.state.deviceSelected) {
case true && componentName == 'container':
return 'gray';
case false && componentName == 'container':
return 'green';
case true && componentName == 'device':
return 'green';
case false && componentName == 'device':
return 'gray';
default:
return 'black';
}
Expected result is that pointerEvents are set to none, which means click on div will be disabled when whatcolorToDraw method return color other than green. When whatColorToDraw method returns 'green' pointerEvent should be set to 'auto'.
Actual result is syntax error described above, and can't compile.