EuiDualRange component

CHANGELOG.md

@@ -1,12 +1,19 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.9.0`.
+- Created `EuiDualRange` using components from modularized, refactored `EuiRange`. New util service `isWithinRange` is the first in the number category. ([#1485](https://github.com/elastic/eui/pull/1485))
 
 ## [`6.9.0`](https://github.com/elastic/eui/tree/v6.9.0)
 
 - Changed animation settings for `EuiNavDrawer` ([#1524](https://github.com/elastic/eui/pull/1524))
 - Converted a number of components to support text localization ([#1504](https://github.com/elastic/eui/pull/1504))
-- Created `EuiDualRange` using components from modularized, refactored `EuiRange`. New util service `isWithinRange` is the first in the number category. ([#1485](https://github.com/elastic/eui/pull/1485))
+- Updated `app_ems.svg` ([#1517](https://github.com/elastic/eui/pull/1517))
+
+**Bug fixes**
+
+- Updated `EuiPage` background color to match body background color ([#1513](https://github.com/elastic/eui/pull/1513))
+- Fixed React key usage in `EuiPagination` ([#1514](https://github.com/elastic/eui/pull/1514))
+- Fixed bug which prevented `EuiSwitch` with generated ID from having its label announced by VoiceOver ([#1519](https://github.com/elastic/eui/pull/1519))
+- Fixed `EuiFilterButton` handling `numFilters` when `0` was specified ([#1510](https://github.com/elastic/eui/pull/1510))
 
 ## [`6.8.0`](https://github.com/elastic/eui/tree/v6.8.0)
 

src/components/form/range/dual_range.js

@@ -123,25 +123,25 @@ export class EuiDualRange extends Component {
 
   _handleKeyDown = (value, e) => {
     let newVal = Number(value);
-    let changeRemainder = 0;
-    const change = this.props.step || 1;
+    let stepRemainder = 0;
+    const step = this.props.step || 1;
     switch (e.keyCode) {
       case keyCodes.UP:
       case keyCodes.RIGHT:
         e.preventDefault();
-        newVal += change;
-        changeRemainder = (newVal - this.props.min) % change;
-        if (change !== 1 && changeRemainder > 0) {
-          newVal = newVal - changeRemainder;
+        newVal += step;
+        stepRemainder = (newVal - this.props.min) % step;
+        if (step !== 1 && stepRemainder > 0) {
+          newVal = newVal - stepRemainder;
         }
         break;
       case keyCodes.DOWN:
       case keyCodes.LEFT:
         e.preventDefault();
-        newVal -= change;
-        changeRemainder = (newVal - this.props.min) % change;
-        if (change !== 1 && changeRemainder > 0) {
-          newVal = newVal + (change - changeRemainder);
+        newVal -= step;
+        stepRemainder = (newVal - this.props.min) % step;
+        if (step !== 1 && stepRemainder > 0) {
+          newVal = newVal + (step - stepRemainder);
         }
         break;
     }

src/components/form/range/index.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../common';
+import { CommonProps, Omit } from '../../common';
 
 import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react';
 
@@ -43,10 +43,10 @@ declare module '@elastic/eui' {
 
     export interface EuiDualRangeProps {
       // Override acceptable value type
-      value: Array<number | string>
+      value: [number | string, number | string]
     }
 
     export const EuiDualRange: SFC<
-      CommonProps & InputHTMLAttributes<HTMLInputElement> & EuiRangeProps & EuiDualRangeProps
+      CommonProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> & EuiRangeProps & EuiDualRangeProps
     >;
 }

src/services/index.ts

@@ -39,6 +39,10 @@ export {
   formatText,
 } from './format';
 
+export {
+  isWithinRange,
+} from './number';
+
 export {
   Pager
 } from './paging';

src/services/number/number.test.tsx

@@ -18,8 +18,5 @@ describe('numbers', () => {
     expect(isWithinRange(10, 100, 0)).toBe(false);
     expect(isWithinRange(0, 100, -10)).toBe(false);
     expect(isWithinRange(0, 100, '')).toBe(false);
-    expect(isWithinRange(0, 100, null)).toBe(false);
-    expect(isWithinRange(0, 100)).toBe(false);
-    expect(isWithinRange(0, 100, 'a')).toBe(false);
   });
 });

src/services/number/number.ts

@@ -1,15 +1,7 @@
-import { isNil } from '../predicate';
-
-export const isWithinRange = (min?: any, max?: any, value?: any) => {
-  if (isNil(value) || isNaN(value) || value === '') {
+export const isWithinRange = (min: number | string, max: number | string, value: number | string) => {
+  if (value === '') {
     return false;
   }
 
-  min = Number(min);
-  max = Number(max);
-  value = Number(value);
-  if (value >= min && value <= max) {
-    return true;
-  }
-  return false;
+  return min <= value && value <= max;
 };