From 80b988f137155ef1ee210cefb8e56248f39d7b39 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 12 Mar 2020 17:53:35 +0530 Subject: [PATCH] removed lodash dependency from various files --- .../src/examples/render_custom_header.jsx | 38 ++++---- .../test/month_dropdown_test.js | 7 +- packages/react-datepicker/test/month_test.js | 71 +++++++------- .../test/year_dropdown_test.js | 95 ++++++++++--------- src-docs/src/views/elastic_charts/shared.js | 4 +- .../elastic_charts/theming_categorical.js | 9 +- .../views/selectable/selectable_popover.js | 8 +- .../super_date_picker/async_interval.test.js | 3 +- src/components/form/range/range_ticks.tsx | 3 +- src/services/color/eui_palettes.ts | 3 +- .../security/get_secure_rel_for_target.ts | 3 +- 11 files changed, 123 insertions(+), 121 deletions(-) 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 index 2f49779400c8..5524175c58fc 100644 --- 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,8 @@ -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 = length => Array.from({ length }, (_, i) => i); const years = range(1990, moment().year() + 1, 1); const months = moment.months(); @@ -10,13 +11,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 +52,22 @@ export default class Default extends React.Component { decreaseMonth, increaseMonth, prevMonthButtonDisabled, - nextMonthButtonDisabled + nextMonthButtonDisabled, }) => (
+ display: 'flex', + justifyContent: 'center', + }}> changeMonth(value)} - > + onChange={({ target: { value } }) => changeMonth(value)}> {months.map(option => (
)} diff --git a/packages/react-datepicker/test/month_dropdown_test.js b/packages/react-datepicker/test/month_dropdown_test.js index 440749b3f7fc..7cc903cf14ba 100644 --- a/packages/react-datepicker/test/month_dropdown_test.js +++ b/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(); }); diff --git a/packages/react-datepicker/test/month_test.js b/packages/react-datepicker/test/month_test.js index 109a198fe387..0b9e3ecfcbb4 100644 --- a/packages/react-datepicker/test/month_test.js +++ b/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(); - 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( - + ); 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(), @@ -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(), @@ -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(); 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.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", () => { ); 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)); }); }); diff --git a/packages/react-datepicker/test/year_dropdown_test.js b/packages/react-datepicker/test/year_dropdown_test.js index 418545d46a08..b680db9265f2 100644 --- a/packages/react-datepicker/test/year_dropdown_test.js +++ b/packages/react-datepicker/test/year_dropdown_test.js @@ -1,11 +1,12 @@ -import React from "react"; -import range from "lodash/range"; -import YearDropdown from "../src/year_dropdown.jsx"; -import YearDropdownOptions from "../src/year_dropdown_options.jsx"; -import { mount } from "enzyme"; -import { newDate } from "../src/date_utils"; - -describe("YearDropdown", () => { +import React from 'react'; +import YearDropdown from '../src/year_dropdown.jsx'; +import YearDropdownOptions from '../src/year_dropdown_options.jsx'; +import { mount } from 'enzyme'; +import { newDate } from '../src/date_utils'; + +const range = length => Array.from({ length }, (_, i) => i); + +describe('YearDropdown', () => { var yearDropdown; var lastOnChangeValue; @@ -28,94 +29,94 @@ describe("YearDropdown", () => { lastOnChangeValue = null; }); - describe("scroll mode", () => { + describe('scroll mode', () => { beforeEach(function() { yearDropdown = getYearDropdown(); }); - it("shows the selected year in the initial view", () => { - expect(yearDropdown.text()).to.contain("2015"); + it('shows the selected year in the initial view', () => { + expect(yearDropdown.text()).to.contain('2015'); }); - it("starts with the year options list hidden", () => { + it('starts with the year options list hidden', () => { var optionsView = yearDropdown.find(YearDropdownOptions); expect(optionsView).to.have.length(0); }); - it("opens a list when read view is clicked", () => { - yearDropdown.find(".react-datepicker__year-read-view").simulate("click"); + it('opens a list when read view is clicked', () => { + yearDropdown.find('.react-datepicker__year-read-view').simulate('click'); var optionsView = yearDropdown.find(YearDropdownOptions); expect(optionsView).to.exist; }); - it("closes the dropdown when a year is clicked", () => { - yearDropdown.find(".react-datepicker__year-read-view").simulate("click"); + it('closes the dropdown when a year is clicked', () => { + yearDropdown.find('.react-datepicker__year-read-view').simulate('click'); yearDropdown - .find(".react-datepicker__year-option") + .find('.react-datepicker__year-option') .at(1) - .simulate("click"); + .simulate('click'); expect(yearDropdown.find(YearDropdownOptions)).to.have.length(0); }); - it("does not call the supplied onChange function when the same year is clicked", () => { - yearDropdown.find(".react-datepicker__year-read-view").simulate("click"); + it('does not call the supplied onChange function when the same year is clicked', () => { + yearDropdown.find('.react-datepicker__year-read-view').simulate('click'); yearDropdown - .find(".react-datepicker__year-option") + .find('.react-datepicker__year-option') .at(6) - .simulate("click"); + .simulate('click'); expect(lastOnChangeValue).to.be.null; }); - it("calls the supplied onChange function when a different year is clicked", () => { - yearDropdown.find(".react-datepicker__year-read-view").simulate("click"); + it('calls the supplied onChange function when a different year is clicked', () => { + yearDropdown.find('.react-datepicker__year-read-view').simulate('click'); yearDropdown - .find(".react-datepicker__year-option") + .find('.react-datepicker__year-option') .at(7) - .simulate("click"); + .simulate('click'); expect(lastOnChangeValue).to.eq(2014); }); }); - describe("select mode", () => { - it("renders a select with default year range options", () => { - yearDropdown = getYearDropdown({ dropdownMode: "select" }); - const select = yearDropdown.find(".react-datepicker__year-select"); + describe('select mode', () => { + it('renders a select with default year range options', () => { + yearDropdown = getYearDropdown({ dropdownMode: 'select' }); + const select = yearDropdown.find('.react-datepicker__year-select'); expect(select).to.have.length(1); - expect(select.prop("value")).to.eq(2015); + expect(select.prop('value')).to.eq(2015); - const options = select.find("option"); + const options = select.find('option'); expect(options.map(o => o.text())).to.eql( range(1900, 2101).map(n => `${n}`) ); }); - it("renders a select with min and max year range options", () => { + it('renders a select with min and max year range options', () => { yearDropdown = getYearDropdown({ - dropdownMode: "select", - minDate: newDate("1988-01-01"), - maxDate: newDate("2016-01-01") + dropdownMode: 'select', + minDate: newDate('1988-01-01'), + maxDate: newDate('2016-01-01'), }); - const select = yearDropdown.find(".react-datepicker__year-select"); + const select = yearDropdown.find('.react-datepicker__year-select'); expect(select).to.have.length(1); - expect(select.prop("value")).to.eq(2015); + expect(select.prop('value')).to.eq(2015); - const options = select.find("option"); + const options = select.find('option'); expect(options.map(o => o.text())).to.eql( range(1988, 2017).map(n => `${n}`) ); }); - it("does not call the supplied onChange function when the same year is clicked", () => { - yearDropdown = getYearDropdown({ dropdownMode: "select" }); - const select = yearDropdown.find(".react-datepicker__year-select"); - select.simulate("click", { target: { value: 2015 } }); + it('does not call the supplied onChange function when the same year is clicked', () => { + yearDropdown = getYearDropdown({ dropdownMode: 'select' }); + const select = yearDropdown.find('.react-datepicker__year-select'); + select.simulate('click', { target: { value: 2015 } }); expect(lastOnChangeValue).to.be.null; }); - it("calls the supplied onChange function when a different year is clicked", () => { - yearDropdown = getYearDropdown({ dropdownMode: "select" }); - const select = yearDropdown.find(".react-datepicker__year-select"); - select.simulate("change", { target: { value: 2014 } }); + it('calls the supplied onChange function when a different year is clicked', () => { + yearDropdown = getYearDropdown({ dropdownMode: 'select' }); + const select = yearDropdown.find('.react-datepicker__year-select'); + select.simulate('change', { target: { value: 2014 } }); expect(lastOnChangeValue).to.eq(2014); }); }); diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index 27238c6d0fda..6576530763d6 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -9,7 +9,6 @@ import { EuiText, EuiTitle, } from '../../../../src/components'; -import { find } from 'lodash'; import { BarSeries, LineSeries, AreaSeries } from '@elastic/charts'; import { devDependencies } from '../../../../package'; @@ -93,7 +92,8 @@ export class ChartTypeCard extends Component { toggleIdSelected: optionId, }); - const chartType = find(this.toggleButtonsIcons, { id: optionId }).label; + const chartType = this.toggleButtonsIcons.find(({ id }) => id === optionId) + .label; this.props.onChange(chartType); }; diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.js index 082e3afdae37..a947e32adc43 100644 --- a/src-docs/src/views/elastic_charts/theming_categorical.js +++ b/src-docs/src/views/elastic_charts/theming_categorical.js @@ -1,6 +1,5 @@ /* eslint-disable no-nested-ternary */ import React, { Component, Fragment } from 'react'; -import { find } from 'lodash'; import { Chart, Settings, Axis, DataGenerator } from '@elastic/charts'; import { ThemeContext } from '../../components'; @@ -81,7 +80,8 @@ export class Categorical extends Component { }; onColorTypeChange = optionId => { - const colorType = find(this.colorTypeRadios, { id: optionId }).label; + const colorType = this.colorTypeRadios.find(({ id }) => id === optionId) + .label; this.updateCorrectChart(Number(this.state.numCharts), colorType); this.setState({ colorTypeIdSelected: optionId, @@ -92,8 +92,9 @@ export class Categorical extends Component { onGroupChange = e => { const colorType = e.target.checked ? 'Grouped' - : find(this.colorTypeRadios, { id: this.state.colorTypeIdSelected }) - .label; + : this.colorTypeRadios.find( + ({ id }) => id === this.state.colorTypeIdSelected + ).label; this.updateCorrectChart(Number(this.state.numCharts), colorType); this.setState({ grouped: e.target.checked, diff --git a/src-docs/src/views/selectable/selectable_popover.js b/src-docs/src/views/selectable/selectable_popover.js index f2e2927f8905..51cf05eb8039 100644 --- a/src-docs/src/views/selectable/selectable_popover.js +++ b/src-docs/src/views/selectable/selectable_popover.js @@ -1,5 +1,4 @@ import React, { Component, Fragment } from 'react'; -import { orderBy } from 'lodash'; import { EuiButton, EuiCode, @@ -14,6 +13,11 @@ import { EuiTitle, } from '../../../../src/components'; +const orderBy = key => { + // eslint-disable-next-line no-nested-ternary + return (a, b) => (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0); +}; + import { Options } from './data'; import { createDataStore } from '../tables/data_store'; @@ -39,7 +43,7 @@ export default class extends Component { onButtonClick = () => { this.setState(prevState => ({ - options: orderBy(prevState.options, ['checked'], ['asc']), + options: prevState.options.concat().sort(orderBy('checked')), isPopoverOpen: !prevState.isPopoverOpen, })); }; diff --git a/src/components/date_picker/super_date_picker/async_interval.test.js b/src/components/date_picker/super_date_picker/async_interval.test.js index 327267a61389..7f660070b852 100644 --- a/src/components/date_picker/super_date_picker/async_interval.test.js +++ b/src/components/date_picker/super_date_picker/async_interval.test.js @@ -1,5 +1,4 @@ import { AsyncInterval } from './async_interval'; -import { times } from 'lodash'; import { sleep } from '../../../test'; describe('AsyncInterval', () => { @@ -15,7 +14,7 @@ describe('AsyncInterval', () => { // This helper makes it easier to advance time without worrying // whether tasks are still lingering on the event loop async function andvanceTimerAndAwaitFn(instance, ms) { - const iterations = times(Math.floor(ms / 100)); + const iterations = [...Array(Math.floor(ms / 100)).keys()]; const remainder = ms % 100; // eslint-disable-next-line @typescript-eslint/no-unused-vars for (const item of iterations) { diff --git a/src/components/form/range/range_ticks.tsx b/src/components/form/range/range_ticks.tsx index eaf9994120e3..0f6099a4ef6c 100644 --- a/src/components/form/range/range_ticks.tsx +++ b/src/components/form/range/range_ticks.tsx @@ -5,7 +5,6 @@ import React, { ReactNode, } from 'react'; import classNames from 'classnames'; -import find from 'lodash/find'; import { useInnerText } from '../../inner_text'; @@ -44,7 +43,7 @@ const EuiTickValue: FunctionComponent< const tickStyle: { left?: string; width?: string } = {}; let customTick; if (ticks) { - customTick = find(ticks, o => o.value === tickValue); + customTick = ticks.find(o => o.value === tickValue); if (customTick) { tickStyle.left = `${((customTick.value - min) / (max - min)) * 100}%`; diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 8136827cadbf..282d03dab681 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -1,10 +1,11 @@ -import { flatten } from 'lodash'; import chroma from 'chroma-js'; import { HEX } from './color_types'; import { colorPalette } from './color_palette'; export type EuiPalette = string[]; +const flatten = (arr: any[]) => [].concat(...arr); + const euiPalette = function( colors: string[], steps: number, diff --git a/src/services/security/get_secure_rel_for_target.ts b/src/services/security/get_secure_rel_for_target.ts index 9083a4b22ae0..16d657d530e6 100644 --- a/src/services/security/get_secure_rel_for_target.ts +++ b/src/services/security/get_secure_rel_for_target.ts @@ -2,7 +2,6 @@ * Secures outbound links. For more info: * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/ */ -import filter from 'lodash/filter'; import { isDomainSecure } from '../url'; export const getSecureRelForTarget = ({ @@ -16,7 +15,7 @@ export const getSecureRelForTarget = ({ }) => { const isElasticHref = !!href && isDomainSecure(href); const relParts = !!rel - ? filter(rel.split(' '), part => !!part.length && part !== 'noreferrer') + ? rel.split(' ').filter(part => !!part.length && part !== 'noreferrer') : []; if (!isElasticHref) {