Partial removal of lodash from charts, docs, selectable and datepicker components

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Replaced various `lodash` functions with native functions ([#3053](https://github.com/elastic/eui/pull/3053))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))

packages/react-datepicker/docs-site/src/examples/render_custom_header.jsx

@@ -1,7 +1,9 @@
-import React from "react";
-import DatePicker from "react-datepicker";
-import moment from "moment";
-import range from "lodash/range";
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+
+const range = (start, end, step) =>
+  Array.from({ length: (end - start) / step }, (_, i) => i * step + start);
 
 const years = range(1990, moment().year() + 1, 1);
 const months = moment.months();
@@ -10,13 +12,13 @@ export default class Default extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      startDate: moment()
+      startDate: moment(),
     };
   }
 
   handleChange = date => {
     this.setState({
-      startDate: date
+      startDate: date,
     });
   };
 
@@ -51,25 +53,22 @@ export default class Default extends React.Component {
               decreaseMonth,
               increaseMonth,
               prevMonthButtonDisabled,
-              nextMonthButtonDisabled
+              nextMonthButtonDisabled,
             }) => (
               <div
                 style={{
                   margin: 10,
-                  display: "flex",
-                  justifyContent: "center"
-                }}
-              >
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}>
                 <button
                   onClick={decreaseMonth}
-                  disabled={prevMonthButtonDisabled}
-                >
-                  {"<"}
+                  disabled={prevMonthButtonDisabled}>
+                  {'<'}
                 </button>
                 <select
                   value={date.year()}
-                  onChange={({ target: { value } }) => changeYear(value)}
-                >
+                  onChange={({ target: { value } }) => changeYear(value)}>
                   {years.map(option => (
                     <option key={option} value={option}>
                       {option}
@@ -79,8 +78,7 @@ export default class Default extends React.Component {
 
                 <select
                   value={months[date.month()]}
-                  onChange={({ target: { value } }) => changeMonth(value)}
-                >
+                  onChange={({ target: { value } }) => changeMonth(value)}>
                   {months.map(option => (
                     <option key={option} value={option}>
                       {option}
@@ -90,9 +88,8 @@ export default class Default extends React.Component {
 
                 <button
                   onClick={increaseMonth}
-                  disabled={nextMonthButtonDisabled}
-                >
-                  {">"}
+                  disabled={nextMonthButtonDisabled}>
+                  {'>'}
                 </button>
               </div>
             )}

packages/react-datepicker/test/month_dropdown_test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import range from "lodash/range";
 import MonthDropdown from "../src/month_dropdown.jsx";
 import MonthDropdownOptions from "../src/month_dropdown_options.jsx";
 import { mount } from "enzyme";
@@ -9,10 +8,12 @@ import {
   getDefaultLocaleData
 } from "../src/date_utils";
 
+const range = length => Array.from({ length }, (_, i) => i);
+
 describe("MonthDropdown", () => {
   let monthDropdown;
   let handleChangeResult;
-  const mockHandleChange = function(changeInput) {
+  const mockHandleChange = function (changeInput) {
     handleChangeResult = changeInput;
   };
   let sandbox;
@@ -40,7 +41,7 @@ describe("MonthDropdown", () => {
   });
 
   describe("scroll mode", () => {
-    beforeEach(function() {
+    beforeEach(function () {
       monthDropdown = getMonthDropdown();
     });
 

packages/react-datepicker/test/month_test.js

@@ -1,12 +1,13 @@
-import React from "react";
-import Month from "../src/month";
-import Day from "../src/day";
-import range from "lodash/range";
-import { mount, shallow } from "enzyme";
-import * as utils from "../src/date_utils";
-import TestUtils from "react-dom/test-utils";
-
-describe("Month", () => {
+import React from 'react';
+import Month from '../src/month';
+import Day from '../src/day';
+import { mount, shallow } from 'enzyme';
+import * as utils from '../src/date_utils';
+import TestUtils from 'react-dom/test-utils';
+
+const range = length => Array.from({ length }, (_, i) => i);
+
+describe('Month', () => {
   function assertDateRangeInclusive(month, start, end) {
     const dayCount = utils.getDaysDiff(end, start) + 1;
     const days = month.find(Day);
@@ -16,32 +17,32 @@ describe("Month", () => {
       const expectedDay = utils.addDays(utils.cloneDate(start), offset);
       assert(
         utils.isSameDay(day.props.day, expectedDay),
-        `Day ${offset % 7 + 1} ` +
+        `Day ${(offset % 7) + 1} ` +
           `of week ${Math.floor(offset / 7) + 1} ` +
-          `should be "${utils.formatDate(expectedDay, "YYYY-MM-DD")}" ` +
-          `but it is "${utils.formatDate(day.props.day, "YYYY-MM-DD")}"`
+          `should be "${utils.formatDate(expectedDay, 'YYYY-MM-DD')}" ` +
+          `but it is "${utils.formatDate(day.props.day, 'YYYY-MM-DD')}"`
       );
     });
   }
 
-  it("should have the month CSS class", () => {
+  it('should have the month CSS class', () => {
     const month = shallow(<Month day={utils.newDate()} />);
-    expect(month.hasClass("react-datepicker__month")).to.equal(true);
+    expect(month.hasClass('react-datepicker__month')).to.equal(true);
   });
 
-  it("should have the month aria-label", () => {
+  it('should have the month aria-label', () => {
     const month = TestUtils.renderIntoDocument(
-      <Month day={utils.newDate("2015-12-01")} />
+      <Month day={utils.newDate('2015-12-01')} />
     );
     const month_dom = TestUtils.findRenderedDOMComponentWithClass(
       month,
-      "react-datepicker__month"
+      'react-datepicker__month'
     );
-    expect(month_dom.getAttribute("aria-label")).to.equal("month-2015-12");
+    expect(month_dom.getAttribute('aria-label')).to.equal('month-2015-12');
   });
 
-  it("should render all days of the month and some days in neighboring months", () => {
-    const monthStart = utils.newDate("2015-12-01");
+  it('should render all days of the month and some days in neighboring months', () => {
+    const monthStart = utils.newDate('2015-12-01');
 
     assertDateRangeInclusive(
       mount(<Month day={monthStart} />),
@@ -50,8 +51,8 @@ describe("Month", () => {
     );
   });
 
-  it("should render all days of the month and peek into the next month", () => {
-    const monthStart = utils.newDate("2015-12-01");
+  it('should render all days of the month and peek into the next month', () => {
+    const monthStart = utils.newDate('2015-12-01');
 
     assertDateRangeInclusive(
       mount(<Month day={monthStart} peekNextMonth />),
@@ -62,8 +63,8 @@ describe("Month", () => {
     );
   });
 
-  it("should render a calendar of fixed height", () => {
-    const monthStart = utils.newDate("2016-11-01");
+  it('should render a calendar of fixed height', () => {
+    const monthStart = utils.newDate('2016-11-01');
     const calendarStart = utils.getStartOfWeek(utils.cloneDate(monthStart));
 
     assertDateRangeInclusive(
@@ -73,8 +74,8 @@ describe("Month", () => {
     );
   });
 
-  it("should render a calendar of fixed height with peeking", () => {
-    const monthStart = utils.newDate("2016-11-01");
+  it('should render a calendar of fixed height with peeking', () => {
+    const monthStart = utils.newDate('2016-11-01');
     const calendarStart = utils.getStartOfWeek(utils.cloneDate(monthStart));
 
     assertDateRangeInclusive(
@@ -84,22 +85,22 @@ describe("Month", () => {
     );
   });
 
-  it("should call the provided onDayClick function", () => {
+  it('should call the provided onDayClick function', () => {
     let dayClicked = null;
 
     function onDayClick(day) {
       dayClicked = day;
     }
 
-    const monthStart = utils.newDate("2015-12-01");
+    const monthStart = utils.newDate('2015-12-01');
     const month = mount(<Month day={monthStart} onDayClick={onDayClick} />);
     const day = month.find(Day).at(0);
 
-    day.simulate("click");
-    assert(utils.isSameDay(day.prop("day"), dayClicked));
+    day.simulate('click');
+    assert(utils.isSameDay(day.prop('day'), dayClicked));
   });
 
-  it("should call the provided onMouseLeave function", () => {
+  it('should call the provided onMouseLeave function', () => {
     let mouseLeaveCalled = false;
 
     function onMouseLeave() {
@@ -109,11 +110,11 @@ describe("Month", () => {
     const month = shallow(
       <Month day={utils.newDate()} onMouseLeave={onMouseLeave} />
     );
-    month.simulate("mouseleave");
+    month.simulate('mouseleave');
     expect(mouseLeaveCalled).to.be.true;
   });
 
-  it("should call the provided onDayMouseEnter function", () => {
+  it('should call the provided onDayMouseEnter function', () => {
     let dayMouseEntered = null;
 
     function onDayMouseEnter(day) {
@@ -124,7 +125,7 @@ describe("Month", () => {
       <Month day={utils.newDate()} onDayMouseEnter={onDayMouseEnter} />
     );
     const day = month.find(Day).first();
-    day.simulate("mouseenter");
-    assert(utils.isSameDay(day.prop("day"), dayMouseEntered));
+    day.simulate('mouseenter');
+    assert(utils.isSameDay(day.prop('day'), dayMouseEntered));
   });
 });