feat(lodash): update lodash import to be more readable and smaller

Signed-off-by: Harry Andriyan <harry.andriyan@gmail.com>
GluuFederation · Apr 25, 2022 · b61cb31 · b61cb31
1 parent 1fd036d
commit b61cb31
Show file tree

Hide file tree

Showing 27 changed files with 121 additions and 93 deletions.
diff --git a/admin-ui/app/colors.js b/admin-ui/app/colors.js
@@ -1,14 +1,14 @@
-import _ from 'lodash';
+import chain from 'lodash/chain';
+import pick from 'lodash/pick';
 
 import colors from './colors.scss';
 
-const colorKeys = _
-  .chain(colors)
+const colorKeys = chain(colors)
   .keys()
   .filter((colorKey) => (
     colorKey.indexOf('bg-') === -1 &&
         colorKey.indexOf('fg-') === -1
   ))
   .value();
 
-export default _.pick(colors, colorKeys);
+export default pick(colors, colorKeys);
diff --git a/admin-ui/app/components/Avatar/Avatar.js b/admin-ui/app/components/Avatar/Avatar.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import _ from 'lodash';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import reduce from 'lodash/reduce';
+import isEmpty from 'lodash/isEmpty';
+import first from 'lodash/first';
 
 const Avatar = (props) => {
   const avatarClass = classNames(
@@ -10,11 +14,11 @@ const Avatar = (props) => {
     props.className
   );
   const addOnsdArr = React.Children.toArray(props.addOns);
-  const badge = _.find(addOnsdArr, (avatarAddOn) =>
+  const badge = find(addOnsdArr, (avatarAddOn) =>
     avatarAddOn.type.addOnId === "avatar--badge");
-  const icons = _.filter(addOnsdArr, (avatarAddOn) =>
+  const icons = filter(addOnsdArr, (avatarAddOn) =>
     avatarAddOn.type.addOnId === "avatar--icon");
-  const isNested = _.reduce(addOnsdArr, (acc, avatarAddOn) =>
+  const isNested = reduce(addOnsdArr, (acc, avatarAddOn) =>
     acc || !!avatarAddOn.props.small, false);
 
   return (
@@ -27,12 +31,12 @@ const Avatar = (props) => {
         )
       }
       {
-        !_.isEmpty(icons) && (() => {
+        !isEmpty(icons) && (() => {
           switch(icons.length) {
           case 1:
             return (
               <div className="avatar__icon">
-                { _.first(icons) }
+                { first(icons) }
               </div>
             );
           default:

diff --git a/admin-ui/app/components/Avatar/AvatarImage.js b/admin-ui/app/components/Avatar/AvatarImage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import _ from 'lodash';
+import omit from 'lodash/omit';
 
 import { Avatar } from './Avatar';
 import { AvatarFont } from './AvatarFont';
@@ -12,7 +12,7 @@ class AvatarImage extends React.PureComponent {
       placeholder: PropTypes.node,
       alt: PropTypes.string,
       className: PropTypes.string,
-      ..._.omit(Avatar.propTypes, ['children'])
+      ...omit(Avatar.propTypes, ['children'])
     };
 
     static defaultProps = {

diff --git a/admin-ui/app/components/EmptyLayout/EmptyLayoutSection.js b/admin-ui/app/components/EmptyLayout/EmptyLayoutSection.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import _ from 'lodash';
+import isNumber from 'lodash';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const EmptyLayoutSection = (props) => {
   const sectionClass = classNames(props.className, 'fullscreen__section', {
     'fullscreen__section--center': props.center
   });
-  const maxWidth = _.isNumber(props.width) ? `${props.width}px` : props.width;
+  const maxWidth = isNumber(props.width) ? `${props.width}px` : props.width;
   return (
     <div className={ sectionClass }>
       {

diff --git a/admin-ui/app/components/FloatGrid/Col.js b/admin-ui/app/components/FloatGrid/Col.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import { isUndefined, omit, pick, keys, extend } from 'lodash';
 import classNames from 'classnames';
 
 import { Col as BootstrapCol } from 'reactstrap';
@@ -18,8 +18,8 @@ const getCurrentbreakPoint = (width, breakPoints) => {
   let output = 'xl';
   for (const bp of breakPoints) {
     if (
-      (_.isUndefined(bp.min) || bp.min <= width) &&
-            (_.isUndefined(bp.max) || bp.max > width)
+      (isUndefined(bp.min) || bp.min <= width) &&
+            (isUndefined(bp.max) || bp.max > width)
     ) {
       output = bp.id;
     }
@@ -66,8 +66,8 @@ export class Col extends React.Component {
 
     render() {
       const { active, children, className, trueSize } = this.props;
-      const bsColumnProps = _.pick(this.props, ['xl', 'lg', 'md', 'sm', 'xs']);
-      const otherProps = _.omit(this.props, [..._.keys(Col.propTypes),
+      const bsColumnProps = pick(this.props, ['xl', 'lg', 'md', 'sm', 'xs']);
+      const otherProps = omit(this.props, [...keys(Col.propTypes),
         'minW', 'maxW', 'minH', 'maxH', 'moved', 'static', 'isDraggable', 'isResizable']);
       const floatColBpId = trueSize ? getCurrentbreakPoint(trueSize.wPx, breakPoints) : 'xl';
       const floatColClasses = classNames(className, 'float-col',
@@ -79,7 +79,7 @@ export class Col extends React.Component {
         </div>
       ) : (
         <BootstrapCol
-          { ...(_.extend(bsColumnProps, otherProps)) }
+          { ...(extend(bsColumnProps, otherProps)) }
           className={ classNames(className, 'pb-3') }
         >
           { children }

diff --git a/admin-ui/app/components/FloatGrid/Row.js b/admin-ui/app/components/FloatGrid/Row.js
@@ -1,6 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import { 
+  keys,
+  map,
+  isEqual,
+  isEmpty,
+  drop,
+  isUndefined,
+  pick,
+  indexOf,
+  max
+} from 'lodash';
 import {
   WidthProvider,
   Responsive
@@ -14,10 +24,10 @@ const responsiveBreakpoints = {
   xl: 1139, lg: 959, md: 719, sm: 539, xs: 0
   //xl: Number.MAX_VALUE, lg: 1199, md: 991, sm: 767, xs: 576
 };
-const breakPointSteps = _.keys(responsiveBreakpoints);
+const breakPointSteps = keys(responsiveBreakpoints);
 const TOTAL_ROW = 12;
 
-const simplifyChildrenArray = (reactChildren) => _.map(reactChildren, child => (
+const simplifyChildrenArray = (reactChildren) => map(reactChildren, child => (
   { ...child, key: child.key.replace(/\.\$/g, '') }
 ));
 
@@ -40,8 +50,8 @@ export class Row extends React.Component {
     initialDebounceTimeout = false;
 
     componentDidUpdate(nextProps) {
-      if (!_.isEqual(nextProps.gridSize, this.props.gridSize)) {
-        if (!_.isEmpty(this._lastLayouts)) {
+      if (!isEqual(nextProps.gridSize, this.props.gridSize)) {
+        if (!isEmpty(this._lastLayouts)) {
           this._updateTrueColSizes(this._lastLayouts[this.state.activeLayout]);
         }
       }
@@ -121,8 +131,8 @@ export class Row extends React.Component {
      */
     _findClosestBreakpoint = (breakpoint, definition) => {
       let found = 12;
-      for (const bp of _.drop(breakPointSteps, _.indexOf(breakPointSteps, breakpoint))) {
-        if (!_.isUndefined(definition[bp])) {
+      for (const bp of drop(breakPointSteps, indexOf(breakPointSteps, breakpoint))) {
+        if (!isUndefined(definition[bp])) {
           found = definition[bp];
         }
       }
@@ -139,7 +149,7 @@ export class Row extends React.Component {
         for (const child of childrenArray) {
           let bpData = { };
           // Save the props for current child and breakpoint
-          const config = _.pick(child.props, [
+          const config = pick(child.props, [
             'i',
             'h', 'minH', 'maxH',
             'minW', 'maxW',
@@ -153,7 +163,7 @@ export class Row extends React.Component {
             ...{
               // Set the x to the calculated value or take from the 
               // props if defined for controlled type
-              x: _.isUndefined(child.props[`${breakPoint}X`]) ?
+              x: isUndefined(child.props[`${breakPoint}X`]) ?
                 rowCounter : child.props[`${breakPoint}X`],
               h: child.props[`${breakPoint}H`] || config.h || 1,
               minH: config.minH || (config.h || 1),
@@ -163,14 +173,14 @@ export class Row extends React.Component {
                         this._findClosestBreakpoint(breakPoint, child.props),
             // Set the y to the calculated value or take from the 
             // props if defined for controlled type
-            y: _.isUndefined(child.props[`${breakPoint}Y`]) ?
+            y: isUndefined(child.props[`${breakPoint}Y`]) ?
               y : child.props[`${breakPoint}Y`]
           });
           rowChildren = [...rowChildren, bpData];
           rowCounter += bpData.w;
           if (rowCounter + bpData.x > TOTAL_ROW) {
             // Increase by the largest found height
-            y += _.max(_.map(rowChildren, 'h'));
+            y += max(map(rowChildren, 'h'));
             rowCounter = 0;
             rowChildren = [];
           }

diff --git a/admin-ui/app/components/HolderProvider/HolderTextProvider.js b/admin-ui/app/components/HolderProvider/HolderTextProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import omit from 'lodash/omit';
 import uid from 'uuid/v4';
 import qs from 'query-string';
 
@@ -78,7 +78,7 @@ class HolderTextProvider extends React.Component {
     render() {
       const onlyChild = React.Children.only(this.props.children);
 
-      const phProps = _.omit(this.props, ['children', 'width', 'height']);
+      const phProps = omit(this.props, ['children', 'width', 'height']);
       const phPropsQuery = qs.stringify(phProps);
 
       return React.cloneElement(onlyChild, {

diff --git a/admin-ui/app/components/InputGroupAddon/InputGroupAddon.js b/admin-ui/app/components/InputGroupAddon/InputGroupAddon.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import _ from 'lodash';
+import some from 'lodash/some';
+import includes from 'lodash/includes';
 
 import {
   InputGroupAddon as BsInputGroupAddon
@@ -8,9 +9,9 @@ import {
 const InputGroupAddon = (props) => {
   const { children, ...otherProps } = props;
   const childArr = React.Children.toArray(children);
-  const isFa = _.some(childArr, (child) =>
-    React.isValidElement(child) && child.props.className && _.includes(child.props.className, 'fa'));
-  const isCheckRadio = _.some(childArr, (child) =>
+  const isFa = some(childArr, (child) =>
+    React.isValidElement(child) && child.props.className && includes(child.props.className, 'fa'));
+  const isCheckRadio = some(childArr, (child) =>
     React.isValidElement(child) && (child.props.type === 'radio' || child.props.type === 'checkbox'));
 
   const child = isFa || isCheckRadio ? (

diff --git a/admin-ui/app/components/Layout/Layout.js b/admin-ui/app/components/Layout/Layout.js
@@ -4,7 +4,15 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { withRouter } from 'react-router-dom';
-import _ from 'lodash';
+import {
+  filter,
+  forOwn,
+  isUndefined,
+  compact,
+  differenceBy,
+  pick,
+  map 
+} from 'lodash';
 
 import { LayoutContent } from './LayoutContent';
 import { LayoutNavbar } from './LayoutNavbar';
@@ -26,7 +34,7 @@ const findChildByType = (children, targetType) => {
   return result;
 };
 const findChildrenByType = (children, targetType) => {
-  return _.filter(React.Children.toArray(children), (child) =>
+  return filter(React.Children.toArray(children), (child) =>
     child.type.layoutPartName === targetType.layoutPartName);
 };
 
@@ -73,12 +81,12 @@ class Layout extends React.Component {
         const { screenSize } = this.state;
         let currentScreenSize;
 
-        _.forOwn(responsiveBreakpoints, (value, key) => {
+        forOwn(responsiveBreakpoints, (value, key) => {
           const queryParts = [
-            `${ _.isUndefined(value.min) ? '' : `(min-width: ${value.min}px)` }`,
-            `${ _.isUndefined(value.max) ? '' : `(max-width: ${value.max}px)`}`
+            `${ isUndefined(value.min) ? '' : `(min-width: ${value.min}px)` }`,
+            `${ isUndefined(value.max) ? '' : `(max-width: ${value.max}px)`}`
           ];
-          const query = _.compact(queryParts).join(' and ');
+          const query = compact(queryParts).join(' and ');
 
           if (window.matchMedia(query).matches) {
             currentScreenSize = key;
@@ -196,15 +204,15 @@ class Layout extends React.Component {
     }
 
     setElementsVisibility(elements) {
-      this.setState(_.pick(elements, ['sidebarHidden', 'navbarHidden', 'footerHidden']));
+      this.setState(pick(elements, ['sidebarHidden', 'navbarHidden', 'footerHidden']));
     }
 
     render() {
       const { children, favIcons } = this.props;
       const sidebar = findChildByType(children, LayoutSidebar);
       const navbars = findChildrenByType(children, LayoutNavbar);
       const content = findChildByType(children, LayoutContent);
-      const otherChildren = _.differenceBy(
+      const otherChildren = differenceBy(
         React.Children.toArray(children),
         [
           sidebar,
@@ -237,7 +245,7 @@ class Layout extends React.Component {
             <link rel="canonical" href={ config.siteCannonicalUrl } />
             <meta name="description" content={ this.state.pageDescription } />
             {
-              _.map(favIcons, (favIcon, index) => (
+              map(favIcons, (favIcon, index) => (
                 <link { ...favIcon } key={ index } />
               ))
             }

diff --git a/admin-ui/app/components/Layout/setupPage.js b/admin-ui/app/components/Layout/setupPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash';
+import pick from 'lodash/pick';
 import PropTypes from 'prop-types';
 import { withPageConfig } from './withPageConfig';
 
@@ -10,7 +10,7 @@ export const setupPage = (startupConfig) =>
               pageConfig: PropTypes.object
             }
             componentDidMount() {
-              this.prevConfig = _.pick(this.props.pageConfig,
+              this.prevConfig = pick(this.props.pageConfig,
                 ['pageTitle', 'pageDescription', 'pageKeywords']);
               this.props.pageConfig.changeMeta(startupConfig);
             }

diff --git a/admin-ui/app/components/OuterClick/OuterClick.js b/admin-ui/app/components/OuterClick/OuterClick.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import _ from 'lodash';
+import some from 'lodash/some';
 
 // Safely gets the browser document object,
 // returns a simple mock for server rendering purposes
@@ -54,7 +54,7 @@ class OuterClick extends React.Component {
           // eslint-disable-next-line react/no-find-dom-node
           const domElement = ReactDOM.findDOMNode(this.elementRef);
 
-          const isExcluded = _.some(this.props.excludedElements,
+          const isExcluded = some(this.props.excludedElements,
             // eslint-disable-next-line react/no-find-dom-node
             (element) => element && ReactDOM.findDOMNode(element).contains(evt.target));