diff --git a/src/blocks/HeaderSlider/schema.ts b/src/blocks/HeaderSlider/schema.ts index 5a387cefc..2d842c6e0 100644 --- a/src/blocks/HeaderSlider/schema.ts +++ b/src/blocks/HeaderSlider/schema.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import omit from 'lodash/omit'; import {HeaderProperties, SliderProps} from '../../schema/validators/blocks'; import {BlockBaseProps} from '../../schema/validators/common'; @@ -9,7 +9,7 @@ export const HeaderSliderBlock = { required: ['items'], properties: { ...BlockBaseProps, - ..._.omit(SliderProps, ['loadable', 'children']), + ...omit(SliderProps, ['loadable', 'children']), items: { type: 'array', items: { diff --git a/src/blocks/Info/schema.ts b/src/blocks/Info/schema.ts index 59f6f613e..b5a60508e 100644 --- a/src/blocks/Info/schema.ts +++ b/src/blocks/Info/schema.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import omit from 'lodash/omit'; import { BaseProps, @@ -12,7 +12,7 @@ import {ContentBase} from '../../sub-blocks/Content/schema'; const ContentProps = { additionalProperties: false, - properties: _.omit(ContentBase, ['size', 'colSizes', 'theme']), + properties: omit(ContentBase, ['size', 'colSizes', 'theme']), }; export const InfoBlock = { diff --git a/src/blocks/Media/schema.ts b/src/blocks/Media/schema.ts index 1fc002137..a42ae9287 100644 --- a/src/blocks/Media/schema.ts +++ b/src/blocks/Media/schema.ts @@ -1,4 +1,4 @@ -import {omit} from 'lodash'; +import omit from 'lodash/omit'; import { AnimatableProps, diff --git a/src/blocks/Questions/schema.ts b/src/blocks/Questions/schema.ts index df13a5092..6b910bbe5 100644 --- a/src/blocks/Questions/schema.ts +++ b/src/blocks/Questions/schema.ts @@ -1,10 +1,10 @@ -import _ from 'lodash'; +import omit from 'lodash/omit'; import {BlockBaseProps, LinkProps} from '../../schema/validators/common'; import {filteredArray} from '../../schema/validators/utils'; import {ContentBase} from '../../sub-blocks/Content/schema'; -const QuestionsBlockContentProps = _.omit(ContentBase, ['size', 'theme']); +const QuestionsBlockContentProps = omit(ContentBase, ['size', 'theme']); export const QuestionsBlock = { 'questions-block': { diff --git a/src/blocks/Slider/Slider.tsx b/src/blocks/Slider/Slider.tsx index d03d6454d..36900537b 100644 --- a/src/blocks/Slider/Slider.tsx +++ b/src/blocks/Slider/Slider.tsx @@ -8,7 +8,9 @@ import React, { useState, } from 'react'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; +import get from 'lodash/get'; +import noop from 'lodash/noop'; import SlickSlider, {Settings} from 'react-slick'; import Anchor from '../../components/Anchor/Anchor'; @@ -113,12 +115,12 @@ export const SliderBlock = (props: WithChildren) => { // eslint-disable-next-line react-hooks/exhaustive-deps const onResize = useCallback( - _.debounce(() => { + debounce(() => { if (!slider) { return; } - const newBreakpoint = _.get(slider, 'state.breakpoint') || BREAKPOINTS.xl; + const newBreakpoint = get(slider, 'state.breakpoint') || BREAKPOINTS.xl; if (newBreakpoint !== breakpoint) { setBreakpoint(newBreakpoint); @@ -343,7 +345,7 @@ export const SliderBlock = (props: WithChildren) => { }; return ( - + {disclosedChildren}
{renderDisclaimer()} diff --git a/src/blocks/Slider/utils.ts b/src/blocks/Slider/utils.ts index 63bdd2be9..5b39cffc0 100644 --- a/src/blocks/Slider/utils.ts +++ b/src/blocks/Slider/utils.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import pickBy from 'lodash/pickBy'; import {BREAKPOINTS} from '../../constants'; @@ -38,7 +38,7 @@ export function getSlidesToShowWithDefaults({ return { ...DEFAULT_SLIDE_BREAKPOINTS, - ..._.pickBy(result, (value) => !isNaN(value)), + ...pickBy(result, (value) => !isNaN(value)), sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1, }; } diff --git a/src/blocks/Tabs/schema.ts b/src/blocks/Tabs/schema.ts index e6ac1cdd2..af5e033d8 100644 --- a/src/blocks/Tabs/schema.ts +++ b/src/blocks/Tabs/schema.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import omit from 'lodash/omit'; import {ImageProps} from '../../components/Image/schema'; import { @@ -15,7 +15,7 @@ import { import {filteredArray} from '../../schema/validators/utils'; import {ContentBase} from '../../sub-blocks/Content/schema'; -const TabsItemContentProps = _.omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']); +const TabsItemContentProps = omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']); export const tabsItem = { type: 'object', diff --git a/src/components/BalancedMasonry/BalancedMasonry.tsx b/src/components/BalancedMasonry/BalancedMasonry.tsx index caab82de4..4f3ec2e29 100644 --- a/src/components/BalancedMasonry/BalancedMasonry.tsx +++ b/src/components/BalancedMasonry/BalancedMasonry.tsx @@ -1,6 +1,8 @@ import React, {ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; +import first from 'lodash/first'; +import minBy from 'lodash/minBy'; import {SSRContext} from '../../context/ssrContext'; import {QAProps, WithChildren} from '../../models'; @@ -31,7 +33,7 @@ const BalancedMasonry = (props: WithChildren) => { ); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - let [, result] = _.first(breakpoints)!; + let [, result] = first(breakpoints)!; if (isServer) { return result; @@ -54,7 +56,7 @@ const BalancedMasonry = (props: WithChildren) => { // eslint-disable-next-line react-hooks/exhaustive-deps const balanceColumns = useCallback( - _.debounce(() => { + debounce(() => { if (!containerRef.current) { return; } @@ -74,7 +76,7 @@ const BalancedMasonry = (props: WithChildren) => { continue; } - const minColumn = _.minBy(columnsMeta, 'height') || {id: 0, height: 0}; + const minColumn = minBy(columnsMeta, 'height') || {id: 0, height: 0}; const {id: columnId} = minColumn; localColumns[columnId].push(children[i]); diff --git a/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx b/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx index ecc2eb002..4ae233058 100644 --- a/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx +++ b/src/components/BalancedMasonry/__tests__/BalancedMasonry.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {render, screen, waitFor} from '@testing-library/react'; -import {omit} from 'lodash'; +import omit from 'lodash/omit'; import {testCustomClassName} from '../../../../test-utils/shared/common'; import {CardBase} from '../../../components'; diff --git a/src/components/FullWidthBackground/FullWidthBackground.tsx b/src/components/FullWidthBackground/FullWidthBackground.tsx index 4f2f02c9a..b68675237 100644 --- a/src/components/FullWidthBackground/FullWidthBackground.tsx +++ b/src/components/FullWidthBackground/FullWidthBackground.tsx @@ -1,6 +1,6 @@ import React, {CSSProperties, Component, PropsWithChildren, createRef} from 'react'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; import {BREAKPOINTS} from '../../constants'; import {ClassNameProps} from '../../models'; @@ -24,7 +24,7 @@ export default class FullWidthBackground extends Component< > { private ref = createRef(); - private setBg = _.debounce(() => { + private setBg = debounce(() => { if (this.ref && this.ref.current) { const bg = this.ref.current; const width = document.documentElement.clientWidth || document.body.clientWidth; diff --git a/src/components/Map/GoogleMap.tsx b/src/components/Map/GoogleMap.tsx index f20930fc0..9641023d3 100644 --- a/src/components/Map/GoogleMap.tsx +++ b/src/components/Map/GoogleMap.tsx @@ -1,6 +1,6 @@ import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; import {LocaleContext} from '../../context/localeContext/localeContext'; import {MapsContext} from '../../context/mapsContext/mapsContext'; @@ -43,7 +43,7 @@ const GoogleMap: React.FC = (props) => { ); useEffect(() => { - const updateSize = _.debounce(() => { + const updateSize = debounce(() => { if (ref.current) { setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile))); } diff --git a/src/components/Map/YMap/YandexMap.tsx b/src/components/Map/YMap/YandexMap.tsx index 2aed7f360..2b81c34e0 100644 --- a/src/components/Map/YMap/YandexMap.tsx +++ b/src/components/Map/YMap/YandexMap.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useContext, useEffect, useRef, useState} from 'react'; import {Spin} from '@gravity-ui/uikit'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; import {LocaleContext} from '../../../context/localeContext/localeContext'; import {MapsContext} from '../../../context/mapsContext/mapsContext'; @@ -69,7 +69,7 @@ const YandexMap: React.FC = (props) => { }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]); useEffect(() => { - const updateSize = _.debounce(() => { + const updateSize = debounce(() => { if (ref.current) { setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile))); } diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx index 153ea04cc..de309d5f3 100644 --- a/src/components/Media/Image/Image.tsx +++ b/src/components/Media/Image/Image.tsx @@ -1,6 +1,6 @@ import React, {useEffect, useState} from 'react'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; import {Interpolation, animated, config, useSpring} from 'react-spring'; import SliderBlock from '../../../blocks/Slider/Slider'; @@ -62,7 +62,7 @@ const Image = (props: ImageAllProps) => { useEffect(() => { if (parallax) { const handleScroll = () => setScrollY(window.scrollY); - const debouncedHandler = _.debounce(handleScroll, 5); + const debouncedHandler = debounce(handleScroll, 5); window.addEventListener('scroll', debouncedHandler, {passive: true}); return () => window.removeEventListener('scroll', debouncedHandler); diff --git a/src/components/OverflowScroller/OverflowScroller.tsx b/src/components/OverflowScroller/OverflowScroller.tsx index 12b6f83b4..291d5f7fd 100644 --- a/src/components/OverflowScroller/OverflowScroller.tsx +++ b/src/components/OverflowScroller/OverflowScroller.tsx @@ -1,6 +1,6 @@ import React, {PropsWithChildren, createRef} from 'react'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; import {ToggleArrow} from '..'; import {block} from '../../utils'; @@ -91,7 +91,7 @@ export default class OverflowScroller extends React.Component< } // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp - private checkOverflow = _.debounce(() => { + private checkOverflow = debounce(() => { if ( this.containerRef && this.containerRef.current && diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 31854d27f..eb9d9bb47 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -10,7 +10,7 @@ import React, { } from 'react'; import {Icon} from '@gravity-ui/uikit'; -import _ from 'lodash'; +import debounce from 'lodash/debounce'; import ReactPlayer from 'react-player'; import {MetrikaContext} from '../../context/metrikaContext'; @@ -161,7 +161,7 @@ export const ReactPlayerBlock = React.forwardRef { - const updateSize = _.debounce(() => { + const updateSize = debounce(() => { if (ref.current) { // We need to get parent's width does not equal 0 const parentElement = getParentElement(ref.current); diff --git a/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx b/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx index 5340dbf26..c10385d8f 100644 --- a/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx +++ b/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx @@ -1,6 +1,6 @@ import React, {useMemo} from 'react'; -import _ from 'lodash'; +import pick from 'lodash/pick'; import BlockBase from '../../../../components/BlockBase/BlockBase'; import {BlockDecoration} from '../../../../customization/BlockDecoration'; @@ -26,7 +26,7 @@ export const ConstructorBlock: React.FC> = ( }) => { const {type, indent} = data; const blockBaseProps = useMemo( - () => _.pick(data, ['anchor', 'visible', 'resetPaddings']), + () => pick(data, ['anchor', 'visible', 'resetPaddings']), [data], ); diff --git a/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx b/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx index 1e47ae9de..9fa99aa64 100644 --- a/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx +++ b/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx @@ -1,6 +1,6 @@ import React, {Fragment, ReactElement, useContext} from 'react'; -import _ from 'lodash'; +import get from 'lodash/get'; import {InnerContext} from '../../../../context/innerContext'; import {BlockDecoration} from '../../../../customization/BlockDecoration'; @@ -44,7 +44,7 @@ export const ConstructorBlocks: React.FC = ({items}) => if ('loadable' in item && item.loadable) { const {source, serviceId, params} = item.loadable as LoadableProps; - const config = _.get(loadables, source); + const config = get(loadables, source); if (!config) { return null; diff --git a/src/editor/components/BlockForm/BlockForm.tsx b/src/editor/components/BlockForm/BlockForm.tsx index ccba49453..510248165 100644 --- a/src/editor/components/BlockForm/BlockForm.tsx +++ b/src/editor/components/BlockForm/BlockForm.tsx @@ -1,7 +1,8 @@ import React, {Fragment, memo, useMemo} from 'react'; import {DynamicField, SimpleVerticalAccordeon, Spec} from '@gravity-ui/dynamic-forms'; -import _ from 'lodash'; +import isEqual from 'lodash/isEqual'; +import noop from 'lodash/noop'; import {Form as FinalForm, FormSpy} from 'react-final-form'; import {Block, ConstructorBlock} from '../../../models'; @@ -46,13 +47,13 @@ export const BlockForm = memo( } return ( - + {() => ( { // fix for FormSpy onChange called twice without content changes - if (!_.isEqual(values.content, prevContent)) { + if (!isEqual(values.content, prevContent)) { onChange({type, ...values.content}); } }} diff --git a/src/editor/components/PagePropsForm/PagePropsForm.tsx b/src/editor/components/PagePropsForm/PagePropsForm.tsx index 7bea67e81..ca23cd047 100644 --- a/src/editor/components/PagePropsForm/PagePropsForm.tsx +++ b/src/editor/components/PagePropsForm/PagePropsForm.tsx @@ -1,7 +1,7 @@ import React, {memo, useMemo} from 'react'; import {DynamicField, Spec} from '@gravity-ui/dynamic-forms'; -import _ from 'lodash'; +import noop from 'lodash/noop'; import {Form as FinalForm, FormSpy} from 'react-final-form'; import {PageContent} from '../../../models'; @@ -21,7 +21,7 @@ export const PagePropsForm = memo(({data: content, spec, onChange}: PagePropsFor const initialValues = useMemo(() => ({content}), []); return ( - + {() => (
any) => { @@ -6,7 +6,7 @@ export const memoizeLast = (fn: (...args: any[]) => any) => { let cacheResult: ReturnType; return (...params: Parameters) => { - if (!_.isEqual(params, cacheKey)) { + if (!isEqual(params, cacheKey)) { try { const result = fn(...params); diff --git a/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.tsx b/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.tsx index b96b39d94..659f4a96e 100644 --- a/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.tsx +++ b/src/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.tsx @@ -12,7 +12,7 @@ import { transformArrOut, } from '@gravity-ui/dynamic-forms'; import Ajv from 'ajv'; -import _ from 'lodash'; +import isEmpty from 'lodash/isEmpty'; import {block} from '../../../../utils'; import {getSpecTypeDefaultValue, useOneOf} from '../../hooks/useOneOf'; @@ -36,7 +36,7 @@ const getOneOfCustomSpecDefaultType = (spec: ObjectSpec) => // dynamic-forms pass {} as default value for required properties of all types // this function replaces {} with default value accordingly to selected OneOf option spec type const getControllerDefautValue = (value: FieldValue, valueSpecType?: SpecTypes) => { - const isDefaultValue = typeof value === 'object' && _.isEmpty(value); + const isDefaultValue = typeof value === 'object' && isEmpty(value); const defaultValue = valueSpecType ? getSpecTypeDefaultValue(valueSpecType) : undefined; return isDefaultValue ? (defaultValue as FieldValue) : value; diff --git a/src/editor/dynamic-forms-custom/config.ts b/src/editor/dynamic-forms-custom/config.ts index 753f8b29c..cc8786658 100644 --- a/src/editor/dynamic-forms-custom/config.ts +++ b/src/editor/dynamic-forms-custom/config.ts @@ -1,10 +1,10 @@ import {DynamicFormConfig, dynamicConfig as libConfig} from '@gravity-ui/dynamic-forms'; -import _ from 'lodash'; +import cloneDeep from 'lodash/cloneDeep'; import {OneOfCustom} from './components/OneOfCustom/OneOfCustom'; const getDynamicConfig = () => { - const dynamicConfig: DynamicFormConfig = _.cloneDeep(libConfig); + const dynamicConfig: DynamicFormConfig = cloneDeep(libConfig); dynamicConfig.object.inputs['oneof_custom'] = {Component: OneOfCustom, independent: true}; diff --git a/src/editor/dynamic-forms-custom/hooks/useOneOf.tsx b/src/editor/dynamic-forms-custom/hooks/useOneOf.tsx index 818c30261..4b3949624 100644 --- a/src/editor/dynamic-forms-custom/hooks/useOneOf.tsx +++ b/src/editor/dynamic-forms-custom/hooks/useOneOf.tsx @@ -7,7 +7,8 @@ import { SpecTypes, } from '@gravity-ui/dynamic-forms'; import {RadioButton, Select} from '@gravity-ui/uikit'; -import _ from 'lodash'; +import isObjectLike from 'lodash/isObjectLike'; +import some from 'lodash/some'; const MAX_TAB_TITLE_LENGTH = 20; @@ -34,14 +35,14 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { const {order, disabled, oneOfParams} = spec.viewSpec; const specProperties = React.useMemo( - () => (_.isObjectLike(spec.properties) ? (spec.properties as Record) : {}), + () => (isObjectLike(spec.properties) ? (spec.properties as Record) : {}), [spec.properties], ); const [oneOfValue, setOneOfValue] = React.useState(() => { let valueKeys: string[] | undefined; - if (_.isObjectLike(input.value)) { + if (isObjectLike(input.value)) { const keys = Object.keys(input.value); if (keys.length) { @@ -87,7 +88,7 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => { oneOfParams?.toggler !== 'radio' && (oneOfParams?.toggler === 'select' || options.length > 3 || - _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)) + some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)) ) { return (