From 2de2cf798c9ae0affdbafdf4370309510b5267dd Mon Sep 17 00:00:00 2001
From: jwc780 <chengwjin32666@gmail.com>
Date: Mon, 22 Jun 2020 11:08:11 -0400
Subject: [PATCH] fix: made props more inline with normal react-bootstrap

---
 lib/bootstrap-switch-button-react.d.ts |  8 +++++++-
 src/bootstrap-switch-button-react.js   | 10 ++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/lib/bootstrap-switch-button-react.d.ts b/lib/bootstrap-switch-button-react.d.ts
index 9d4ec47..34de6d9 100644
--- a/lib/bootstrap-switch-button-react.d.ts
+++ b/lib/bootstrap-switch-button-react.d.ts
@@ -20,6 +20,11 @@ export type ColorsOutline =
   | "outline-light"
   | "outline-dark";
 
+interface styleType {
+  switch?: React.CSSProperties,
+  label?: React.CSSProperties
+}
+
 interface BootstrapSwitchButtonProps {
   /**
    * Function to call when the SwitchButton is changed
@@ -32,7 +37,8 @@ interface BootstrapSwitchButtonProps {
   onstyle?: Colors | ColorsOutline;
   offstyle?: Colors | ColorsOutline;
   size?: "xs" | "sm" | "lg";
-  style?: string;
+  style?: styleType;
+  className?: string;
   width?: number;
   height?: number;
 }
diff --git a/src/bootstrap-switch-button-react.js b/src/bootstrap-switch-button-react.js
index fa3bd04..c1eccb1 100644
--- a/src/bootstrap-switch-button-react.js
+++ b/src/bootstrap-switch-button-react.js
@@ -42,7 +42,8 @@ export default class BootstrapSwitchButton extends React.Component {
 			onstyle: this.props.onstyle || 'primary',
 			offstyle: this.props.offstyle || 'light',
 			size: this.props.size || '',
-			style: this.props.style || '',
+			style: this.props.style || {},
+			className: this.props.className || '',
 			width: this.props.width || null,
 			height: this.props.height || null,
 		};
@@ -86,11 +87,12 @@ export default class BootstrapSwitchButton extends React.Component {
 	};
 
 	render = () => {
-		let switchStyle = {};
+		const styles = this.props.style === undefined ? {} : this.props.style;
+		let switchStyle = styles.switch === undefined ? {} : styles.switch;
 		this.state.width ? (switchStyle.width = this.state.width + 'px') : null;
 		this.state.height ? (switchStyle.height = this.state.height + 'px') : null;
 
-		let labelStyle = {};
+		let labelStyle = styles.label === undefined ? {} : styles.label;
 		if (this.state.height) labelStyle.lineHeight = 'calc(' + this.state.height + 'px * 0.8)';
 
 		return (
@@ -99,7 +101,7 @@ export default class BootstrapSwitchButton extends React.Component {
 					'switch btn ' +
 					(this.state.checked ? 'on btn-' + this.state.onstyle : 'off btn-' + this.state.offstyle) +
 					(this.state.size ? ' btn-' + this.state.size : '') +
-					(this.state.style ? ' ' + this.state.style : '')
+					(this.state.className ? ' ' + this.state.className : '')
 				}
 				style={switchStyle}
 				onClick={this.toggle}