lodash#isEqual JavaScript Examples

export function getDependenciesChangeResult(id, model, resources) {
  return new Promise((resolve) => {
    const field = model.fields[id];

    if (!field.dependenciesChange) {
      return resolve(undefined); // dependent field still evaluates
    }

    const defaultDependenciesChange = () => {};
    const dependenciesChange = resources.dependenciesChanges[field.dependenciesChange.name].func || defaultDependenciesChange;
    const { defaultArgs } = resources.dependenciesChanges[field.dependenciesChange.name];
    const props = getFieldDependenciesChangeProps(id, model, defaultArgs);

    if (isEqual(props.dependencies, props.prevDependencies)) {
      return resolve(null); // stops circular loops
    }

    const result = dependenciesChange(props);

    return !isPromise(result) ? resolve(result) : result.then((resolveResult) => {
      resolve(resolveResult);
    });
  });
}

// eslint-disable-next-line camelcase
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { allTabList } = this.props;
    this.renderDefaultTabs();
    if (!isEqual(nextProps.allTabList, allTabList) && !isEmpty(nextProps.allTabList)) {
      const defaultList = [
        'PURORG',
        'LOV',
        'DATASOURCE',
        'LOV_VIEW',
        'PURAGENT',
        'COMPANY',
        'DATA_GROUP',
      ];
      const arr = nextProps.allTabList
        .filter(
          item => defaultList.includes(item.dimensionCode) && item.valueSourceType === 'LOCAL'
        )
        .map(item => item.dimensionCode);
      this.setState({ defaultList: arr });
      this.loadDimensions(nextProps.allTabList);
    }
  }

export function serializeFields(fields, omitClientId = "") {
	let f = [];

	if (!isArray(fields)) return [];

	fields.forEach((field) => {
		if (
			field.name.startsWith("cwp/") &&
			!layoutBlocks.includes(field.name) &&
			!isEqual(omitClientId, field.clientId)
		) {
			if (!misc_blocks.includes(field.name)) {
				f.push({
					blockName: field.name,
					fieldName: field.attributes.label,
					field_id: field.attributes.field_name,
					adminId: field.attributes.adminId,
				});
			}
		} else if (layoutBlocks.includes(field.name)) {
			f.push(...serializeFields(field.innerBlocks));
		}
	});

	return f;
}

function trackDependencies(formId, fieldId, value, dependencies) {
  dependencies.push({ fieldId, value });

  // if same field id and value return more than one time - throw a circular error
  const isSameValue = dependencies.filter(x => (x.fieldId === fieldId) && isEqual(x.value, value)).length > 1;

  // if the same id returned with different value - don't allow more than 10 loops
  // (user might didn't infinite loop like increasing the value by 1 each loop cycle)
  const isMaxLoops = dependencies.filter(x => x.fieldId === fieldId).length === MAX_CHANGE_VALUE_LOOPS;

  const prefix = 'Circular dependencies -';
  const dependenciesStr = dependencies.map(x => x.fieldId).join(' -> ');

  if (isSameValue) {
    throwError(prefix, errors.CIRCULAR_DEPENDENCIES, { dependencies }, [fieldId, formId, dependenciesStr]);
  }

  if (isMaxLoops) {
    throwError(prefix, errors.MAX_CIRCULAR_DEPENDENCIES_LOOPS, { dependencies },
      [
        fieldId, formId, MAX_CHANGE_VALUE_LOOPS, dependenciesStr,
      ]);
  }
}

componentDidUpdate(prevProps: Props) {
    if (!this.state.loaded) {
      return;
    }

    const prevMarkers = React.Children.toArray(
      prevProps.elements.Markers?.children || []
    );
    const currMarkers = React.Children.toArray(
      this.props.elements.Markers?.children || []
    );

    const markersDeepEqual = isEqual(
      prevMarkers.map((marker) => marker.props),
      currMarkers.map((marker) => marker.props)
    );
    const markerIdsEqual = isEqual(
      prevMarkers.map((marker) => marker.props.id),
      currMarkers.map((marker) => marker.props.id)
    );

    // Redraw the overlays if there's any change in the marker's props. This can be caused by changes in hover states
    // or the tooltip.
    if (!markersDeepEqual) {
      this._drawOverlays();
    }
    // Fit map bounds if the marker IDs have changed. This signifies any changes in the markers themselves (and
    // potentially the position of the map).
    if (!markerIdsEqual) {
      this._fitMapBounds(currMarkers);
    }
  }

// eslint-disable-next-line
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!isEqual(nextProps.jobLog.skipQuery, this.props.jobLog.skipQuery)) {
      this.fetchLogsList({
        jobId: nextProps.jobLog.skipQuery.jobId,
        // groupId: nextProps.jobLog.skipQuery.groupId,
      });
    }
  }

function Templates(props) {


    const { templates, currentTemplate } = props;

    const currentTemplateName = get(currentTemplate, 'fields.Name');

    return (
        <div className="cwp-templates">
            <Panel header={__(<strong>Available Templates</strong>, "cwp-gutenberg-forms")}>
                <MenuGroup>
                    {
                        templates.map((template, index) => {

                            const name = get(template, 'fields.Name');

                            return <MenuItem onClick={() => props.onSelect(template)} isDefault={isEqual(currentTemplateName, name)} key={index}>{name}</MenuItem>

                        })
                    }
                </MenuGroup>
            </Panel>
        </div>
    )
}

// eslint-disable-next-line
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!isEqual(nextProps.sqlExecute.resultData, this.props.sqlExecute.resultData)) {
      this.setState({ resultData: nextProps.sqlExecute.resultData }, () => {
        const sqlList = this.state.resultData.results.map(item => item.sql);
        this.props.dispatch({
          type: 'sqlExecute/updateState',
          payload: {
            exportSql: sqlList.join(';'),
          },
        });
      });
    }

    // 当执行的SQL改变后，将Tab定位在【信息】
    if (!isEqual(nextProps.sqlExecute.executeSql, this.props.sqlExecute.executeSql)) {
      this.setState({ ...this.state, defaultActiveKey: 'information' });
    }
  }

componentWillReceiveProps(nextProps) {
    if (nextProps.monitor !== this.props.monitor) {
      this.props.dispatch(setMonitorState(nextProps.monitor));
    }
    if (nextProps.disableStoreViewState !== this.props.disableStoreViewState) {
      this.props.dispatch(setStoreViewState(!nextProps.disableStoreViewState));
    }
    // Debounce-notify about the route change if the URL state changes its content.
    if (!isEqual(nextProps.urlState, this.props.urlState)) {
      this.handleRouteChange(nextProps.urlState);
    }
  }

@Bind()
  changeDriverType(value) {
    const { form } = this.props;
    if (isEqual(value, 'CUSTOMIZE')) {
      this.setState({
        driverIdRequired: true,
      });
    } else {
      this.setState({
        driverIdRequired: false,
      });
      form.resetFields(['driverId']);
    }
  }

render() {
    const listing = this.props.navigation.getParam('listing');
    const { options, skus } = listing.listing.item;

    const { combo, quantity } = this.state;
    const variantInfo = skus.find(o => isEqual(o.variantCombo, combo));

    return (
      <View style={screenWrapper.wrapper}>
        <Header
          left={<NavBackButton />}
          onLeft={this.goBack}
          title="Checkout"
          right={<LinkText text="Next" color={linkTextColor} />}
          onRight={this.handleGoToNext}
        />
        <CheckoutHeader
          listing={listing}
          quantity={quantity}
          variantInfo={variantInfo}
          onChange={this.handleChange('quantity')}
        />
        {skus.length > 1 && (
          <ScrollView style={{ flex: 1 }}>
            <VariantOptions
              value={combo}
              onChange={this.handleChange('combo')}
              variants={skus}
              options={options}
            />
          </ScrollView>
        )}
      </View>
    );
  }

// eslint-disable-next-line camelcase
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { allTabList } = this.props;
    this.renderDefaultTabs();
    if (!isEqual(nextProps.allTabList, allTabList) && !isEmpty(nextProps.allTabList)) {
      const defaultList = [
        'PURORG',
        'LOV',
        'DATASOURCE',
        'LOV_VIEW',
        'PURAGENT',
        'COMPANY',
        'DATA_GROUP',
      ];
      const arr = nextProps.allTabList
        .filter(
          item => defaultList.includes(item.dimensionCode) && item.valueSourceType === 'LOCAL'
        )
        .map(item => item.dimensionCode);
      this.setState({ defaultList: arr });
      this.loadDimensions(nextProps.allTabList);
    }
  }

shouldComponentUpdate(nextProps, nextState) {
    const { selected = true, value, readOnly } = nextProps;
    const res =
      selected ||
      this.props.selected !== selected ||
      this.props.readOnly !== readOnly ||
      !isEqual(value, this.props.value);
    return res;
  }

CheckboxGroupField = memo(({
  id,
  name,
  options,
  filtersLabelClass,
  disabledFields,
  onChange,
}) => {
  return (
    <div id={id}>
      {options.map(option => (
        <div key={option.value}>
          <Field
            name={name}
            type="checkbox"
            value={option.value}
            isEqual={isEqual}
            render={fieldProps => (
              <Layout className="display-flex">
                <Checkbox
                  {...fieldProps.input}
                  label={option.label}
                  innerClass={filtersLabelClass}
                  disabled={disabledFields[option.value]}
                  onChange={event => {
                    onChange(event, option);
                    fieldProps.input.onChange(event);
                  }}
                />
                {option.details}
              </Layout>
            )}
          />
        </div>
      ))}
    </div>
  );
})

difference = ( object, base ) => {
	/* eslint-disable no-shadow */
	function changes( object, base ) {
		return transform( object, function( result, value, key ) {
			if ( ! isEqual( value, base[ key ] ) ) {
				result[ key ] =
					isObject( value ) && isObject( base[ key ] )
						? changes( value, base[ key ] )
						: value;
			}
		} );
	}
	return changes( object, base );
}

beforeEach(() => {
  jasmine.addMatchers({
    // override built-in toEqual because it behaves incorrectly
    // on Vue-observed arrays in Safari
    toEqual: () => {
      return {
        compare: (a, b) => {
          const pass = isEqual(a, b)
          return {
            pass,
            message: `Expected ${a} to equal ${b}`
          }
        }
      }
    }
  })
})

componentDidUpdate(prevProps, prevState) {
    if (!isEqual(prevProps.options, this.props.options)) {
      this.setState({ options: [...this.props.options], searchResult: [] });
      this.fuse = new Fuse(this.props.options, this.fuseOptions);
    }

    if ("value" in this.props && this.props.value !== prevState.value) {
      this.setState({ value: this.props.value });
    }
  }

export function getProtection(name, pr) {
	let res;

	pr.forEach((protection) => {
		if (isEqual(protection.title, name)) {
			res = protection;
		}
	});

	return res;
}

componentDidUpdate(prevProps, prevState) {
    const { routeName } = this.props.navigation.state;
    if (routeName !== 'CheckoutShippingAddress') {
      return;
    }

    const { selected, shippingAddresses } = this.state;
    const { selected: prevSelected, shippingAddresses: prevShippingAddresses } = prevState;
    if (selected === -1) {
      return;
    }
    if (
      prevSelected === -1
      || !isEqual(shippingAddresses[selected], prevShippingAddresses[prevSelected])
    ) {
      this.initShippingOption();
    }
  }

mergeValueToList = (valueList, value) => {
  let old
  if (isObject(value) && value.id) {
    // Check if this object has been constructed earlier
    old = findLast(valueList, function (e) {
      return e.id === value.id
    })
    if (old) {
      // Merge this object to the object constructed earlier
      mergeObjects(old, value)
    }
  } else {
    // Check if this value is present in the list
    old = findLast(valueList, function (e) {
      return isEqual(e, value)
    })
  }
  if (!old) {
    // This is a distinct value
    valueList.push(value)
  }
  return valueList
}

beforeEach(() => {
  jasmine.addMatchers({
    // override built-in toEqual because it behaves incorrectly
    // on Vue-observed arrays in Safari
    toEqual: () => {
      return {
        compare: (a, b) => {
          const pass = isEqual(a, b)
          return {
            pass,
            message: `Expected ${a} to equal ${b}`
          }
        }
      }
    }
  })
})

findModifiedFields = (
  demarcheState = {},
  enrollmentState = {}
) => {
  const modified = [];
  Object.keys(demarcheState).forEach((key) => {
    const initialValue = demarcheState[key];
    const value = enrollmentState[key];
    if (
      !isEmpty(initialValue) &&
      !isEmpty(value) &&
      !isEqual(initialValue, value)
    ) {
      modified.push(key);
    }
  });
  return modified;
}

isFieldDirty = (fieldId, model) => {
  if (!model.initializedData) return false;
  const initializedValue = get(model.initializedData, model.fields[fieldId].path);
  const currentValue = get(model.data, model.fields[fieldId].path);
  return !isEqual(initializedValue, currentValue);
}

trackedReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TRACKED_EXCHANGES: {
      const activeExchanges = state?.trackedExchanges?.filter((item) => item.created_at < Date.now() + 1000 * 60 * 30) || [];
      return {
        ...state,
        trackedExchanges: [...activeExchanges, { ...action.payload }],
        lastExchange: action.payload.created_at
      }
    }
    case REMOVE_TRACKED_EXCHANGE: {
      const exchanges = state?.trackedExchanges?.filter((item) => !(item.aa === action.payload.aa && isEqual(item.payload, action.payload.aa) && (Number(action.payload.amount) === item.amount) && (action.payload.activeWallet ? item.activeWallet && (item.activeWallet === action.payload.activeWallet) : true)));
      return {
        ...state,
        trackedExchanges: exchanges
      }
    }
    default:
      return state;
  }
}

export function registerFieldStyles(fields) {
	let prefix = "cwp/"; // our block prefix

	each(fields, field => {
		let slug = prefix.concat(field); // example => "cwp/name"

		if (isEqual(slug, "cwp/checkbox") || isEqual(slug, "cwp/radio"))
			registerBlockStyle(slug, radioFieldStyling);
		// styling only for radio and checkbox fields
		else registerBlockStyle(slug, fieldStyles); //registering style with the specified field slug
	});
}

AutoRestHeight = ({ children, diff = 80, topSelector, style, bodyStyle, type = 'c7n' }) => {
  const childrenRef = useRef(null);
  const frame = useRef(0);
  const [height, setHeight] = useState('auto');

  useEffect(() => {
    const resize = () => {
      if (childrenRef.current) {
        // eslint-disable-next-line
        const childrenRefWrapperDom = ReactDOM.findDOMNode(childrenRef.current);
        let childrenRefDom = childrenRefWrapperDom;
        if (topSelector) {
          childrenRefDom = childrenRefDom.querySelector(topSelector);
        }
        const { top: offsetTop } = childrenRefDom.getBoundingClientRect();
        setHeight(window.innerHeight - offsetTop - diff);
        if (childrenRef.current.handleResize) {
          childrenRef.current.handleResize();
        }
      }
    };
    resize();
    const handler = () => {
      cancelAnimationFrame(frame.current);
      frame.current = requestAnimationFrame(resize);
    };
    window.addEventListener('resize', handler);
    return () => {
      cancelAnimationFrame(frame.current);
      window.removeEventListener('resize', handler);
    };
  }, []);

  if (React.isValidElement(children)) {
    if (isEqual(type, 'hzero-ui')) {
      let newScroll = {
        y: height - 40,
      };
      if (children.props && children.props.scroll) {
        const { x: newX } = children.props.scroll;
        newScroll = {
          x: newX,
          y: newScroll.y,
        };
      }
      return React.cloneElement(children, {
        ref: childrenRef,
        scroll: newScroll,
        bodyStyle: {
          ...bodyStyle,
          height: height - 40,
        },
        style: {
          ...style,
          height,
        },
      });
    } else {
      return React.cloneElement(children, {
        ref: childrenRef,
        style: {
          ...style,
          height,
        },
      });
    }
  } else {
    return null;
  }
}

render() {
    const { props, context } = this;
    const {
      prefixCls,
      className,
      children,
      style,
      defaultChecked,
      onChange,
      ...restProps
    } = props;
    const { checked } = this.state;

    const { radioGroup } = context;

    const RadioProps = { ...restProps };

    if (radioGroup) {
      RadioProps.name = radioGroup.name;
      RadioProps.checked = isEqual(props.value, radioGroup.value);
      RadioProps.disabled = props.disabled || radioGroup.disabled;
    } else {
      RadioProps.checked = checked;
    }

    const wrapperClassString = classNames(className, {
      [`${prefixCls}-wrapper`]: true,
      [`${prefixCls}-wrapper-checked`]: RadioProps.checked,
      [`${prefixCls}-wrapper-disabled`]: RadioProps.disabled,
    });

    return (
      <label
        className={classNames(
          prefixCls,
          wrapperClassString,
          { checked: RadioProps.checked, disabled: RadioProps.disabled },
          className
        )}
        style={style}
      >
        <input type="radio" onChange={this.handleChange} {...RadioProps} />
        {children ? <span className="label-value">{children}</span> : null}
      </label>
    );
  }

/**
 * Updates the block doc with the local blocks block changes.
 *
 * @param {yjs.Map} yDocBlocks Blocks doc.
 * @param {Array}   blocks     Updated blocks.
 * @param {string}  clientId   Current clientId.
 */
export function updateBlocksDoc( yDocBlocks, blocks, clientId = '' ) {
	if ( ! yDocBlocks.has( 'order' ) ) {
		yDocBlocks.set( 'order', new yjs.Map() );
	}
	let order = yDocBlocks.get( 'order' );
	if ( ! order.has( clientId ) ) order.set( clientId, new yjs.Array() );
	order = order.get( clientId );
	if ( ! yDocBlocks.has( 'byClientId' ) ) {
		yDocBlocks.set( 'byClientId', new yjs.Map() );
	}
	const byClientId = yDocBlocks.get( 'byClientId' );
	const currentOrder = order.toArray();
	const orderDiff = simpleDiff(
		currentOrder,
		blocks.map( ( block ) => block.clientId )
	);
	currentOrder
		.slice( orderDiff.index, orderDiff.remove )
		.forEach(
			( _clientId ) =>
				! orderDiff.insert.includes( _clientId ) &&
				byClientId.delete( _clientId )
		);
	order.delete( orderDiff.index, orderDiff.remove );
	order.insert( orderDiff.index, orderDiff.insert );

	for ( const _block of blocks ) {
		const { innerBlocks, ...block } = _block;
		if (
			! byClientId.has( block.clientId ) ||
			! isEqual( byClientId.get( block.clientId ), block )
		) {
			byClientId.set( block.clientId, block );
		}

		updateBlocksDoc( yDocBlocks, innerBlocks, block.clientId );
	}
}

function Deposits ({ searchHistory }) {
  const [ page, setPage ] = useState(1);

  const ethDeposits = useSelector(selectEthDeposits, isEqual);
  const erc20Deposits = useSelector(selectErc20Deposits, isEqual);
  const loading = useSelector(selectLoading([ 'DEPOSIT/GETALL' ]));

  useEffect(() => {
    setPage(1);
  }, [ searchHistory ]);

  const deposits = orderBy(
    [ ...ethDeposits, ...erc20Deposits ],
    i => i.blockNumber, 'desc'
  );
  const _deposits = deposits.filter(i => {
    return i.transactionHash.includes(searchHistory) || i.returnValues.token.includes(searchHistory);
  });

  const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE);
  const endingIndex = page * PER_PAGE;
  const paginatedDeposits = _deposits.slice(startingIndex, endingIndex);

  return (
    <div className={styles.transactionSection}>
      <div className={styles.transactions}>
        <Pager
          currentPage={page}
          isLastPage={paginatedDeposits.length < PER_PAGE}
          onClickNext={() => setPage(page + 1)}
          onClickBack={() => setPage(page - 1)}
        />
        {!paginatedDeposits.length && !loading && (
          <div className={styles.disclaimer}>No deposit history.</div>
        )}
        {!paginatedDeposits.length && loading && (
          <div className={styles.disclaimer}>Loading...</div>
        )}
        {paginatedDeposits.map((i, index) => {
          return (
            <Transaction
              key={index}
              link={`${config.etherscanUrl}/tx/${i.transactionHash}`}
              title={truncate(i.transactionHash, 6, 4, '...')}
              midTitle='Deposit'
              subTitle={`Token: ${i.tokenInfo.name}`}
              status={i.status === 'Pending' ? 'Pending' : logAmount(i.returnValues.amount, i.tokenInfo.decimals)}
              statusPercentage={i.pendingPercentage <= 100 ? i.pendingPercentage : ''}
              subStatus={`Block ${i.blockNumber}`}
              tooltip={'For re-org protection, deposits require 10 block confirmations before the UTXO is available to spend.'}
            />
          );
        })}
      </div>
    </div>
  );
}