Merge branch '0.3.0'

Author: Genarito

.eslintrc.json

@@ -4,6 +4,9 @@
         "es2021": true,
         "node": true
     },
+    "globals": {
+        "JSX": true
+    },
     "extends": [
         "standard",
         "standard-jsdoc/ts",

.storybook/preview.js

@@ -7,6 +7,6 @@ export const parameters = {
     }
   },
   backgrounds: {
-    default: 'dark'
+    default: 'light'
   }
 }

README.md

@@ -4,6 +4,8 @@
 
 A modern single a multi React Slider to use with [Semantic-UI][semantic-ui] or [Fomantic-UI][fomantic-ui].
 
+**IMPORTANT**: although the library mentions Semantic UI/Fomantic UI. It is not necessary to install this dependency. This library contains the needed styles to fit as well as possible with that framework, but you can use it in any desired environment. 
+
 
 ![Slider example with multiple colors](./assets/colors.png)
 

assets/colors.png

@@ -1,6 +1,6 @@
 {
   "name": "neo-react-semantic-ui-range",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A modern Semantic/Fomantic UI Slider component for React",
   "scripts": {
     "build": "del 'dist/*' && npx tsc",

package.json

@@ -1,3 +1,6 @@
+// Components
+import { SliderTracks } from './SliderTracks'
+
 // Utils
 import { decimalCount } from '../utils/utils'
 
@@ -35,7 +38,9 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
     onChange,
     margin = 0,
     showLabels = false,
-    color = 'Green'
+    disabled = false,
+    inverted = false,
+    color = 'green'
   } = props
 
   /**
@@ -79,34 +84,43 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
   const maxPercent = getPercent(maxValue)
   const left = `${minPercent}%`
   const width = `${maxPercent - minPercent}%`
+  const disabledClass = disabled ? 'disabled' : ''
+
   return (
     <>
       <input
         type="range"
         min={defaultMinValue}
         max={defaultMaxValue}
         value={minValue}
+        disabled={disabled}
         onChange={(event) => {
           handleChange(parseFloat(event.target.value), maxValue)
         }}
-        className="thumb thumb--left"
+        className={`thumb thumb--left ${disabledClass}`}
       />
       <input
         type="range"
         step={step}
         min={defaultMinValue}
         max={defaultMaxValue}
         value={maxValue}
+        disabled={disabled}
         onChange={(event) => {
           handleChange(minValue, parseFloat(event.target.value))
         }}
-        className="thumb thumb--right"
+        className={`thumb thumb--right ${disabledClass}`}
       />
-      <div className="slider">
-        <div className="slider__track" />
+
+      <SliderTracks
+        left={left}
+        width={width}
+        color={color}
+        disabled={disabled}
+        inverted={inverted}
+      >
         {renderLabels()}
-        <div style={{ left: left, width: width, backgroundColor: color }} className={'slider__range'} />
-      </div>
+      </SliderTracks>
     </>
   )
 }

src/components/MultiRangeSlider.tsx

@@ -1,3 +1,6 @@
+// Components
+import { SliderTracks } from './SliderTracks'
+
 // Utils
 import { decimalCount } from '../utils/utils'
 
@@ -22,7 +25,17 @@ interface SingleRangeSliderProps extends SliderProps {
  * @returns Component.
  */
 const SingleRangeSlider = function (props: SingleRangeSliderProps) {
-  const { defaultMinValue, defaultMaxValue, value, color = 'Green', showLabels = false, step = 1, onChange } = props
+  const {
+    defaultMinValue,
+    defaultMaxValue,
+    value,
+    color = 'green',
+    showLabels = false,
+    step = 1,
+    disabled = false,
+    inverted = false,
+    onChange
+  } = props
 
   /**
    * Invokes callback function if slider value is updated.
@@ -55,6 +68,7 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
   }
 
   const selectedPercent = `${getSelectedSliderPercent(value)}%`
+  const disabledClass = disabled ? 'disabled' : ''
 
   return (
     <>
@@ -64,16 +78,16 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
         max={defaultMaxValue}
         value={value}
         step={step}
+        disabled={disabled}
         onChange={(event) => {
           handleValueChange(parseFloat(event.target.value))
         }}
-        className="thumb thumb--left"
+        className={`thumb thumb--left ${disabledClass}`}
       />
-      <div className="slider">
-        <div className="slider__track" />
+
+      <SliderTracks width={selectedPercent} color={color} disabled={disabled} inverted={inverted}>
         {renderLabels()}
-        <div style={{ width: selectedPercent, backgroundColor: color }} className={'slider__range'} />
-      </div>
+      </SliderTracks>
     </>
   )
 }

src/components/SingleRangeSlider.tsx

@@ -0,0 +1,42 @@
+import { RangeColor } from '../types'
+
+/** Component props. */
+interface SliderTracksProps {
+  /** Labels component. */
+  children: JSX.Element;
+  /** Left offset. */
+  left?: string;
+  /** Track width. */
+  width: string;
+  /** Track color. */
+  color: RangeColor;
+  /** Disabled prop. */
+  disabled: boolean;
+  /** Inverted prop. */
+  inverted: boolean;
+}
+
+/**
+ * Render Slider track with custom color, left offset and width.
+ *
+ * @param props - Component props.
+ * @returns Component.
+ */
+const SliderTracks = (props: SliderTracksProps) => {
+  const disabledClass = props.disabled ? 'disabled' : ''
+  const invertedClass = props.inverted ? 'inverted' : ''
+  const colorClass = props.inverted ? `${invertedClass}-${props.color}` : props.color
+
+  return (
+    <div className={`slider ${invertedClass}`}>
+        <div className={`slider__track ${disabledClass} ${invertedClass}`} />
+        {props.children}
+        <div
+          style={{ left: props.left, width: props.width }}
+          className={`color_track slider__range ${disabledClass} ${colorClass}`}
+        />
+    </div>
+  )
+}
+
+export { SliderTracks }

src/components/SliderTracks.tsx

@@ -27,7 +27,7 @@ export const Colors = () => {
     setValue(newValue)
   }
 
-  const colors: RangeColor[] = ['RoyalBlue', 'Green', 'BlueViolet', 'Brown', 'Orange', 'Violet', 'Tomato', 'DarkMagenta']
+  const colors: RangeColor[] = ['blue', 'green', 'red', 'brown', 'orange', 'violet', 'yellow', 'teal']
   return colors.map((color) => (
     <h1 key={color}>
       <SingleRangeSlider

src/stories/Colors.stories.tsx

@@ -0,0 +1,47 @@
+import { ComponentMeta } from '@storybook/react'
+import { SingleRangeSlider } from '../components/SingleRangeSlider'
+import { useState } from 'react'
+import { RangeColor } from '../types'
+
+// Styles
+import './colors.css'
+
+export default {
+  title: 'Example/SingleSlider/Inverted',
+  component: SingleRangeSlider,
+  subcomponents: { SingleRangeSlider },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
+  }
+} as ComponentMeta<typeof SingleRangeSlider >
+
+export const Inverted = () => {
+  const [value, setValue] = useState<number>(40)
+
+  /**
+   * Handles changes.
+   *
+   * @param newValue - New value.
+   */
+  function handleChange (newValue: number) {
+    setValue(newValue)
+  }
+
+  const colors: RangeColor[] = ['blue', 'green', 'red', 'brown', 'orange', 'violet', 'yellow', 'teal']
+  return colors.map((color) => (
+    <h1 key={color}>
+      <SingleRangeSlider
+        key={color}
+        defaultMinValue={0}
+        defaultMaxValue={100}
+        value={value}
+        color={color}
+        inverted={true}
+        onChange={handleChange}
+      />
+    </h1>
+  ))
+}