fix(react): Fix react wrappers resizing with animation

carbon-design-system · Nov 26, 2018 · 4219f33 · 4219f33
1 parent 429bd0f
commit 4219f33
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/packages/core/demo/index.scss b/packages/core/demo/index.scss
@@ -141,19 +141,17 @@ header.m-demo-header {
 }
 .chart-holder {
 	background-color: #fff;
-	// border: 1px solid rgba(24, 62, 117, 0.2);
 	box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1);
 	margin: 0 auto 60px auto;
 	display: block;
 	height: 500px;
 	min-width: 300px;
 	max-width: 800px;
+	padding: 30px;
 	position: relative;
 	transition: box-shadow .1s ease-out;
-	// tmp
 	overflow: hidden;
 	resize: both;
-	//
 	font-weight: 400;
 
 	h3 {

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -51,19 +51,20 @@ export class BaseChart {
 	constructor(holder: Element, configs: any) {
 		this.id = `chart-${BaseChart.chartCount++}`;
 
-		(holder as HTMLElement).style.position = "relative";
+		if (configs.options) {
+			this.options = Object.assign({}, this.options, configs.options);
+		}
+
+		// Save holder element reference, and initialize it by applying appropriate styling
 		this.holder = holder;
+		this.styleHolderElement();
 
 		const {chartId, container} = this.setChartIDContainer();
 		this.container = container;
 		this.chartContainerID = chartId;
 
-		if (configs.options) {
-			this.options = Object.assign({}, this.options, configs.options);
-
-			if (this.options.containerResizable) {
-				this.resizeWhenContainerChange();
-			}
+		if (this.options && this.options.containerResizable) {
+			this.resizeWhenContainerChange();
 		}
 
 		this.events = document.createDocumentFragment();
@@ -73,6 +74,33 @@ export class BaseChart {
 		}
 	}
 
+	styleHolderElement() {
+		const holderElement = this.holder as HTMLElement;
+		const { width, height } = this.options;
+
+		// If width exists in options
+		if (width) {
+			// Validate it's value
+			if (Tools.validateWidthHeightValues(width)) {
+				// Apply formatted width attribute to chart
+				holderElement.style.width = Tools.formatWidthHeightValues(width);
+			} else {
+				console.error("`width` is badly formatted");
+			}
+		}
+
+		// If height exists in options
+		if (height) {
+			// Validate it's value
+			if (Tools.validateWidthHeightValues(height)) {
+				// Apply formatted height attribute to chart
+				holderElement.style.height = Tools.formatWidthHeightValues(height);
+			} else {
+				console.error("`height` is badly formatted");
+			}
+		}
+	}
+
 	dispatchEvent(eventType: string, eventDetail?: object) {
 		let newEvent;
 		if (eventDetail) {
@@ -308,6 +336,7 @@ export class BaseChart {
 					selectAll(".legend-tooltip").style("display", "none");
 
 					this.hideTooltip();
+
 					this.resizeChart();
 				}
 			}

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -6,10 +6,6 @@ $default_transition: all .1s ease-out;
 	font-family: "IBM Plex Sans", Arial, sans-serif;
 }
 
-.chart-holder {
-	padding: 30px;
-}
-
 // TODO - Nest all styles into the "chart-wrapper class
 .chart-wrapper {
 	width: 100%;

diff --git a/packages/core/src/tools.ts b/packages/core/src/tools.ts
@@ -82,6 +82,26 @@ export namespace Tools {
 		};
 	}
 
+	export function validateWidthHeightValues(value) {
+		const numberRegex = new RegExp(/[0-9]+(\.[0-9]+)?/);
+		if (numberRegex.test(value.toString())) {
+			return true;
+		}
+
+		console.error(`Value provided "${value}" is not formatted correctly`);
+
+		return false;
+	}
+
+	export function formatWidthHeightValues(value) {
+		const stringValue = value.toString();
+		if (stringValue.indexOf("%") || stringValue.indexOf("px")) {
+			return stringValue;
+		}
+
+		return stringValue + "px";
+	}
+
 	/**
 	 * Capitalizes first letter of a string
 	 *

diff --git a/packages/react/src/base-chart.js b/packages/react/src/base-chart.js
@@ -7,6 +7,20 @@ export default class BaseChart extends React.Component {
 		this.data = props.data;
 		this.options = props.options;
 
+		// Width prop is mandatory for the wrappers
+		if (props.width) {
+			this.options.width = props.width;
+		} else {
+			console.error("Missing `width` prop!");
+		}
+
+		// Height prop is mandatory for the wrappers
+		if (props.height) {
+			this.options.height = props.height;
+		} else {
+			console.error("Missing `height` prop!");
+		}
+
 		Object.assign(this, this.chart);
 	}
 }