feat: add renderBar render prop for customizing bar content

zillow · Sep 27, 2019 · 0de9013 · 0de9013
1 parent 54cadf7
commit 0de9013
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -231,6 +231,18 @@ class ReactSlider extends React.Component {
          */
         // eslint-disable-next-line zillow/react/require-default-props
         ariaValuetext: PropTypes.string,
+
+        /**
+         * Provide a custom render function for the bar fragment.
+         * The render function will be passed a single arguments,
+         * an object with the following properties:
+         *
+         * - `index` {`number`} the index of the bar
+         * - `key` {`string`} a unique key for the bar
+         * - `style` {`object`} positioning styles that should be applied to the fragment
+         * - `className` {`string`} default classNames for the bar
+         */
+        renderBar: PropTypes.func,
     };
 
     static defaultProps = {
@@ -249,6 +261,7 @@ class ReactSlider extends React.Component {
         disabled: false,
         snapDragDisabled: false,
         invert: false,
+        renderBar: props => <div {...props} />,
     };
 
     constructor(props) {
@@ -894,13 +907,13 @@ class ReactSlider extends React.Component {
         return res;
     }
 
-    renderBar = (i, offsetFrom, offsetTo) => (
-        <div
-            key={`bar${i}`}
-            className={`${this.props.barClassName} ${this.props.barClassName}-${i}`}
-            style={this.buildBarStyle(offsetFrom, this.state.upperBound - offsetTo)}
-        />
-    );
+    renderBar = (i, offsetFrom, offsetTo) =>
+        this.props.renderBar({
+            index: i,
+            key: `${this.props.barClassName}-${i}`,
+            className: `${this.props.barClassName} ${this.props.barClassName}-${i}`,
+            style: this.buildBarStyle(offsetFrom, this.state.upperBound - offsetTo),
+        });
 
     renderBars(offset) {
         const bars = [];

diff --git a/src/components/ReactSlider/ReactSlider.md b/src/components/ReactSlider/ReactSlider.md
@@ -74,3 +74,30 @@ initialState = { value: [0, 50, 100] };
     {state.value.map((value, i) => <div key={i}>{value}</div>)}
 </ReactSlider>
 ```
+
+### Custom bars
+
+The bar fragment can be customized with the `renderBar` render prop.
+
+```jsx
+import styled from 'styled-components';
+
+const StyledBar = styled.div`
+    top: 1px;
+    bottom: 1px;
+    background: ${props => props.index ? '#0f0' : '#ddd'};
+    border-radius: 999px;
+`;
+
+initialState = { value: 50 };
+
+<ReactSlider
+    className="horizontal-slider"
+    value={state.value}
+    onChange={value => setState({ value })}
+    withBars
+    renderBar={({ className, ...props }) => <StyledBar {...props} />}
+>
+    <div>{state.value}</div>
+</ReactSlider>
+```