Render Scale even when value is null

Author: vallsv

lib/src/Scale.tsx

@@ -9,6 +9,12 @@ interface RenderProps {
     center: [number, number];
     color?: string;
     className?: string;
+
+    /**
+     * Id of the active tick.
+     *
+     * Can be `-1` if there is no active tick in this state.
+     */
     active: number;
     activeColor?: string;
     activeClassName?: string;
@@ -81,7 +87,7 @@ export interface RenderCustomProps extends RenderProps {
     tickWidth: number;
     tickHeight: number;
     steps: number;
-    percentage: number;
+    percentage: number | null;
 }
 
 function renderCustom({
@@ -92,7 +98,7 @@ function renderCustom({
     tickWidth: number;
     tickHeight: number;
     steps: number;
-    percentage: number;
+    percentage: number | null;
 } & RenderProps) {
     return (_: unknown, i: number) => fn({ ...props, i });
 }
@@ -139,11 +145,9 @@ export function Scale(props: Props) {
     const length = steps + (angleRange === 360 ? 0 : 1);
     const translateX = center[0] - tickWidth / 2;
     const translateY = center[1] - radius;
-    if (percentage === null) {
-        return <></>;
-    }
 
-    const active = Math.round((length - 1) * percentage);
+    const active =
+        percentage === null ? -1 : Math.round((length - 1) * percentage);
 
     function getRenderFn() {
         if (steps === undefined) {
@@ -181,9 +185,6 @@ export function Scale(props: Props) {
             });
         }
         if (fn) {
-            if (percentage === null) {
-                return <></>;
-            }
             return renderCustom({
                 fn,
                 tickWidth,

lib/test/Scale.spec.tsx

@@ -111,4 +111,27 @@ describe('Scale', () => {
         );
         expect(container.children[0].children[0].children[0]).toMatchSnapshot();
     });
+    it('renders when value is null', () => {
+        const { container } = render(
+            <Knob
+                min={0}
+                max={100}
+                value={null}
+                size={100}
+                angleOffset={90}
+                angleRange={200}
+            >
+                <Scale
+                    type="circle"
+                    steps={3}
+                    radius={40}
+                    tickWidth={2}
+                    tickHeight={10}
+                    className="someClassName"
+                    activeClassName="someActiveClassName"
+                />
+            </Knob>,
+        );
+        expect(container.children[0].children[0].children[0]).toMatchSnapshot();
+    });
 });

lib/test/__snapshots__/Scale.spec.tsx.snap

@@ -241,3 +241,44 @@ exports[`Scale > renders correct with custom render function for ticks 1`] = `
   />
 </g>
 `;
+
+exports[`Scale > renders when value is null 1`] = `
+<g>
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(90 50 50) 
+        translate(49 10)
+        "
+  />
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(156.66666666666669 50 50) 
+        translate(49 10)
+        "
+  />
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(223.33333333333334 50 50) 
+        translate(49 10)
+        "
+  />
+  <circle
+    class="someClassName"
+    r="2"
+    stroke="none"
+    transform="
+        rotate(290 50 50) 
+        translate(49 10)
+        "
+  />
+</g>
+`;