Merge pull request #38 from aeagle/fix/30-container-classname

Ensure multiple user classes are appended with -container for the out…

Author: aeagle

demo/src/ui-demo/CodeEditor.tsx

@@ -6,7 +6,7 @@ import './CodeEditor.scss';
 
 export const CodeEditor = () => {
 	return (
-		<Space.Fill className="code-editor">
+		<Space.Fill className="code-editor code-editor-1">
 			<Header />
 			<Main />
 		</Space.Fill>

react-spaces/src/Globals/Hooks.ts

@@ -161,20 +161,29 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 	const debug =
 		parentContext ? parentContext.debug : false ||
 		props.debug !== undefined ? props.debug : false;
+
+	const userClasses = 
+		props.className ? 
+			props.className.split(' ').map(c => c.trim()) : 
+			[];
 
-	const outerClasses = [
-		"spaces-space",
-		props.anchor || '',
-		resize.resizeType || '',
-		props.scrollable ? "scrollable" : '',
-		props.className ? `${props.className}-container` : '',
-		debug ? 'debug' : ''
-	]
-
-	const innerClasses = [
-		"spaces-space-inner",
-		props.className ? props.className : ''
-	]
+	const outerClasses = 
+		[
+			...[
+				"spaces-space",
+				props.anchor || undefined,
+				resize.resizeType || undefined,
+				props.scrollable ? "scrollable" : undefined,
+				debug ? 'debug' : undefined
+			],
+			...userClasses.map(c => `${c}-container`)
+		].filter(c => c);
+
+	const innerClasses =
+		[
+			"spaces-space-inner", 
+			...userClasses
+		].filter(c => c);
 
 	return {
 		currentContext,