Skip to content

Instantly share code, notes, and snippets.

@veggiesaurus
Created August 1, 2018 09:51
Show Gist options
  • Save veggiesaurus/b8c377a364b4d38107f0e9a6e8cfc309 to your computer and use it in GitHub Desktop.
Save veggiesaurus/b8c377a364b4d38107f0e9a6e8cfc309 to your computer and use it in GitHub Desktop.
public render() {
const headerHeight = 25;
const titleClass = this.props.isSelected ? "floating-header selected" : "floating-header";
const widgetConfig = this.props.widgetConfig;
return (
<Rnd
className="floating-widget"
style={{zIndex: this.props.zIndex}}
default={{
// Shift by 5 pixels to compensate for 5px CSS margins
x: widgetConfig.defaultX !== undefined ? widgetConfig.defaultX : this.props.appStore.floatingWidgetStore.defaultOffset + 5,
y: widgetConfig.defaultY !== undefined ? widgetConfig.defaultY : this.props.appStore.floatingWidgetStore.defaultOffset,
width: widgetConfig.defaultWidth,
height: widgetConfig.defaultHeight + headerHeight,
}}
resizeGrid={[25, 25]}
dragGrid={[25, 25]}
minWidth={widgetConfig.minWidth}
minHeight={widgetConfig.minHeight + headerHeight}
bounds={".gl-container"}
dragHandleClassName={"floating-title"}
onMouseDown={this.props.onSelected}
>
<div className={titleClass}>
<div className={"floating-title"}>
{widgetConfig.title}
</div>
{this.props.showPinButton &&
<div className="floating-header-button" ref={ref => this.pinElementRef = ref}>
<Icon icon={"pin"}/>
</div>
}
{widgetConfig.isCloseable &&
<div onMouseDown={this.props.onClosed} className="floating-header-button">
<Icon icon={"cross"}/>
</div>
}
</div>
<div className="floating-content">
{this.props.children}
</div>
</Rnd>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment