added style props & fixed bugs

lalodoble · Aug 2, 2021 · fd5f8e5 · fd5f8e5
1 parent 14a2b4a
commit fd5f8e5
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 37 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,8 @@
 {
     "workbench.colorCustomizations": {
-        "statusBar.background": "#93e6fc",
+        "statusBar.background": "#ffef5b",
         "statusBar.foreground": "#15202b",
-        "statusBarItem.hoverBackground": "#61dbfb"
+        "statusBarItem.hoverBackground": "#ffea28"
     },
-    "peacock.color": "#61dafb"
+    "peacock.color": "#ffea28"
 }
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # react-pill-switcher
 
-> Made with create-react-library
+> A simple yet beautifull switcher to transition between two or more options. Made for React.
 
 [![NPM](https://img.shields.io/npm/v/react-pill-switcher.svg)](https://www.npmjs.com/package/react-pill-switcher) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
@@ -28,10 +28,14 @@ Coming soon...
 ## Component Props
 |Prop               |Type                                                |Description                                       |
 |-------------------|----------------------------------------------------|--------------------------------------------------|
-|Name               |`String`                                            |The name for the input element                    |
-|Options            |`Array` of `Strings` or `Objects {label, icon}`     |A list of options                                 |
-|onChange           |`event`                                             |OnChange event that returns the input value       |
-|activeColor        |`string`                                            |Color code for the background of the pill         |
+|name*              |`str`                                               |The name for the input element                    |
+|options*           |`[str]` or `[{label: str, icon: obj, value: any}]`  |A list of options                                 |
+|onChange           |`event`                                             |callback event that returns the input value       |
+|activeBg           |`color`                                             |Color code for the background of the pill         |
+|labelColor         |`color`                                             |Color code for the background of the active label |
+|activeColor        |`color`                                             |Color code for the active label                   |
+|on                 |`any`                                               |When changed, the compoent is rerendered (used to prevent visual bugs)        |
+|isFull             |`boolean`                                           |If true, the component will fill the containers width|
 
 ## License
 

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,26 +1,55 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { PillSwitcher } from 'react-pill-switcher'
 import 'react-pill-switcher/dist/index.css'
 
 const App = () => {
+	const [val1, setVal1] = useState('-');
+	const [val2, setVal2] = useState('-');
+	const [val3, setVal3] = useState('-');
+
 	return <div style={{ padding: '3rem' }}>
 		<h2>Simple</h2>
-		<PillSwitcher options={['One', 'Simple Two', 'Three', 'Last & Least']} name="example01" />
+		<PillSwitcher options={['One', 'Simple Two', 'Three', 'Last & Least']} name="example01" onChange={(e) => setVal1(e)} />
+		<p><small>Selected: {val1}</small></p>
 
-		<br /> <br />
-		<h2>With Icons</h2>
-		<PillSwitcher name="example02" activeColor="black"
+		<br />
+		<h2>With Icons and values</h2>
+		<PillSwitcher name="example02"
 			options={[
 				{
 					label: 'Lighten the mood',
-					icon: <i class="uil uil-sun" style={{ fontSize: '1rem' }}></i>
+					icon: <i class="uil uil-sun" style={{ fontSize: '1rem' }}></i>,
+					value: 'light'
 				},
 				{
 					label: 'Dark Stuff',
-					icon: <i class="uil uil-moon" style={{ fontSize: '1rem' }}></i>
+					icon: <i class="uil uil-moon" style={{ fontSize: '1rem' }}></i>,
+					value: 'dark'
 				}
-			]} />
+			]}
+			onChange={(e) => setVal2(e)}
+		/>
+		<p><small>Selected: {val2}</small></p>
+
+		<br />
+		<h2>With Custom Colors</h2>
+		<PillSwitcher name="example03"
+			activeBg="green"
+			labelColor="#445bff"
+			activeColor="#04ff00"
+			options={['One', 'Simple Two', 'Three', 'Last & Least']}
+			onChange={(e) => setVal3(e)}
+		/>
+		<p><small>Selected: {val3}</small></p>
+
+		<br />
+		<h2>Full width</h2>
+		<PillSwitcher
+			isFull
+			name="example04"
+			options={['One', 'Two', 'Three', 'Four']}
+		/>
 	</div>
 }
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "react-pill-switcher",
-	"version": "1.0.3",
-	"description": "Made with create-react-library",
+	"version": "1.0.4",
+	"description": "A simple yet beautifull switcher to transition between two or more options. Made for React.",
 	"author": "lalodoble",
 	"license": "MIT",
 	"homepage": "https://github.com/lalodoble/react-pill-switcher",

diff --git a/src/index.js b/src/index.js
@@ -6,32 +6,40 @@ import classNames from 'classnames'
 //   return <div className={styles.test}>miamam Component: {text}</div>
 // }
 
-
-export function PillSwitcher({ name, options, onChange, activeColor }) {
+export function PillSwitcher({ name, options, onChange, activeColor = null, activeBg = null, labelColor = null, on = null, isFull = false }) {
 	// const name = props.name;
 	// const options = props.options;
 	const defaultRef = useRef();
-	const [defaultValue, setDefaultValue] = useState(typeof options[0] === 'object' ? options[0].label : options[0])
-	const [value, setValue] = useState(typeof options[0] === 'object' ? options[0].label : options[0])
+	const [defaultValue, setDefaultValue] = useState(typeof options[0] === 'object' ? options[0].value || options[0].label : options[0])
+	const [value, setValue] = useState(typeof options[0] === 'object' ? options[0].value || options[0].label : options[0])
 	const [sizes, setSizes] = useState()
 
+	let labelStyles = {
+		color: labelColor
+	}
+
+	let activeLabelStyles = {
+		color: activeColor
+	}
+
 	useEffect(() => {
 		if (defaultRef.current) {
-			setSizes({
-				width: defaultRef.current.clientWidth,
-				height: defaultRef.current.clientHeight,
-				left: defaultRef.current.offsetLeft,
-				top: defaultRef.current.offsetTop,
-				transition: 'none',
-			})
+			setTimeout(() => {
+				setSizes({
+					width: defaultRef.current.clientWidth,
+					height: defaultRef.current.clientHeight,
+					left: defaultRef.current.offsetLeft,
+					top: defaultRef.current.offsetTop,
+					transition: 'none',
+				})
+			}, 200);
 		}
-	}, [defaultRef.current])
+	}, [defaultRef.current, on])
 
 	function onChangeHandle(e) {
 		const val = e.target.value
 		setValue(val)
 		onChange && onChange(val)
-
 	}
 
 	function onClick(e) {
@@ -44,21 +52,26 @@ export function PillSwitcher({ name, options, onChange, activeColor }) {
 		})
 	}
 
-	return <div className={classNames(styles.pillSwitcher, 'pillSwitcher')}>
+	return <div className={classNames(styles.pillSwitcher, 'pillSwitcher', { [styles.__full]: isFull }, { '--full': isFull })}>
 		{options.map((opt, i) => {
 			const id = name + '-' + i
 			const isObject = typeof opt === 'object' ? true : false
-			const actualOption = isObject ? opt.label : opt
+			const actualOption = isObject ? opt.value || opt.label : opt
 			// console.log(actualOption + ' - ' + value)
 			return (
 				<div
 					key={i}
-					ref={opt === defaultValue || (isObject && opt.label === defaultValue) ? defaultRef : null}
+					ref={opt === defaultValue || (isObject && actualOption === defaultValue) ? defaultRef : null}
 					className={classNames(styles.switcher__tab, { [styles.active]: value === actualOption }, 'switcher__tab', { 'active': value === actualOption })}
 				>
-					<label htmlFor={id} className={classNames(styles.switcher__label, 'switcher__label')} onClick={onClick}>
+					<label
+						htmlFor={id}
+						className={classNames(styles.switcher__label, 'switcher__label')}
+						onClick={onClick}
+						style={value === actualOption ? activeLabelStyles : labelStyles}
+					>
 						{isObject ?
-							<div className={classNames(styles.switcher__labelInner, 'switcher__labelInner')}>
+							<div className={classNames(styles.switcher__labelInner, 'switcher__labelInner')} 							>
 								<span className={classNames(styles.switcher__icon, 'switcher__icon')}>{opt.icon}</span>
 								<span className={classNames(styles.switcher__labelText, 'switcher__labelText')}>{opt.label}</span>
 							</div>
@@ -78,6 +91,6 @@ export function PillSwitcher({ name, options, onChange, activeColor }) {
 			)
 		})}
 
-		<span className={classNames(styles.switcher__bg, 'switcher__bg')} style={{...sizes, backgroundColor: activeColor || null}}></span>
+		<span className={classNames(styles.switcher__bg, 'switcher__bg')} style={{ ...sizes, backgroundColor: activeBg || null }}></span>
 	</div>
 }
diff --git a/src/styles.module.scss b/src/styles.module.scss
@@ -83,4 +83,20 @@
 		top: .25rem;
 		left: .25rem;
 	}
+
+	&.__full {
+		width: 100%;
+		display: grid;
+		grid-auto-flow: column;
+
+		.switcher__tab {
+			.switcher__label {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				align-items: center;
+				width: 100%;
+			}
+		}
+	}
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -83,4 +83,18 @@
 		top: .25rem;
 		left: .25rem;
 	}
+
+	&.--full {
+		@apply w-full grid grid-flow-col;
+
+		.switcher__tab {
+			.switcher__label {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				align-items: center;
+				width: 100%;
+			}
+		}
+	}
 }