Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GC-1083 - Fix console log spam in item editor #1220

Merged
merged 4 commits into from
Jun 21, 2023
Merged

GC-1083 - Fix console log spam in item editor #1220

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1908d3
:adhesive_bandage: prevent prop spreading from adding non-dom attribu…
timbryandev Jun 20, 2023
cf51c17
:adhesive_bandage: prevent prop spreading from adding non-dom attribu…
timbryandev Jun 20, 2023
d4d3adb
:recycle: move destructuring to function argument
timbryandev Jun 21, 2023
e860e35
:recycle: move destructuring to function argument
timbryandev Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions lib/Dropdown/DropdownAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,16 @@ const DropdownAction = ({
...props
}) => {
const {
toggleShowContent = props.toggleShowContent,
showContent = props.showContent
showContent: showContentProp,
toggleShowContent: toggleShowContentProp,
...restProps
} = props;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same q for the one below, why are we destructuring again here rather than in the main props destructuring above?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in this case there was a naming collision when I tried to destructing in the function arguments directly with the destructuring that happens on the DropdownContext below.

I guess i could rename the values in the component props when destructuring like this but it didn't feel right somehow

...
  value,
  showContent: showContentProp,
  toggleShowContent: toggleShowContentProp,
  ...props
}) => {
  const {
    toggleShowContent = toggleShowContentProp,
    showContent = showContentProp
  } = useContext(DropdownContext) || {};
...

I guess my actual issue is refactoring this bit to prevent the collision:

  const {
    toggleShowContent = toggleShowContentProp,
    showContent = showContentProp
  } = useContext(DropdownContext) || {};

I'll have a rethink - think it was my late afternoon brain failing me on this one

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, the other issue was alongside the naming issue, we are also setting default values so that is the dropdown context returns nothing, we default to the values from the props - that tripped up my other attempts too


const {
toggleShowContent = toggleShowContentProp,
showContent = showContentProp
} = useContext(DropdownContext) || {};

const classNames = cx(`dropdown__action ${className}`, {
'dropdown__action--danger': danger,
'dropdown__action--noBg': noBackground,
Expand All @@ -47,7 +54,7 @@ const DropdownAction = ({
if (actionKeyDown) actionKeyDown(e);
},
disabled,
...props
...restProps
};

return isSubmit ? (
Expand Down
14 changes: 10 additions & 4 deletions lib/src/modules/Button/ButtonBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* eslint-disable react/button-has-type */
import React from 'react';
import cx from 'classnames';
import { string, arrayOf, bool, oneOfType } from 'prop-types';
import { arrayOf, bool, oneOfType, string } from 'prop-types';
import Icon from 'lib/Icon';
import { propTypes, defaultProps, sizes } from './common';
import { defaultProps, propTypes, sizes } from './common';

function ButtonBase({
children,
Expand All @@ -18,6 +18,8 @@ function ButtonBase({
buttonRef,
...rest
}) {
const { defaultFillColor, ...restProps } = rest;
timbryandev marked this conversation as resolved.
Show resolved Hide resolved

const classes = cx('button-base', className, {
'button-base-connected-r': connectedRight,
'button-base-connected-l': connectedLeft,
Expand All @@ -32,9 +34,13 @@ function ButtonBase({
}

const loaderTypesWithDisabled = disabled ? ['dark'] : loaderTypes;

return (
<button className={classes} disabled={disabled} ref={buttonRef} {...rest}>
<button
className={classes}
disabled={disabled}
ref={buttonRef}
{...restProps}
>
{loading && !loaderRight && (
<Icon
name="loader16"
Expand Down
Loading