Partial removal of lodash from charts, docs, selectable and datepicke…

…r components (#3053) * fixed breaking changes * restored react-datepicker * fixed all errors * upgraded range
elastic · Mar 24, 2020 · 0f6890a · 0f6890a
1 parent dcbcccc
commit 0f6890a
Show file tree

Hide file tree

Showing 12 changed files with 241 additions and 226 deletions.
diff --git a/CHANGELOG.md b/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 `whiteSpace ` prop to `EuiCodeBlock` ([#3103](https://github.com/elastic/eui/pull/3103))
 - Added `sortMatchesBy` prop for `EuiComboBox` ([#3089](https://github.com/elastic/eui/pull/3089))
 - Added `prepend` and `append` ability to `EuiFieldPassword` ([#3122](https://github.com/elastic/eui/pull/3122))

diff --git a/packages/react-datepicker/docs-site/src/examples/render_custom_header.jsx b/packages/react-datepicker/docs-site/src/examples/render_custom_header.jsx
@@ -1,7 +1,12 @@
-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 = 1) =>
+  Array.from(
+    { length: (end - start + step - 1) / step },
+    (_, i) => i * step + start
+  );
 
 const years = range(1990, moment().year() + 1, 1);
 const months = moment.months();
@@ -10,13 +15,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 +56,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 +81,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 +91,8 @@ export default class Default extends React.Component {
 
                 <button
                   onClick={increaseMonth}
-                  disabled={nextMonthButtonDisabled}
-                >
-                  {">"}
+                  disabled={nextMonthButtonDisabled}>
+                  {'>'}
                 </button>
               </div>
             )}