Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Switch out usage from withComponentId to tree-shaken withInstanceId (https://github.com/woocommerce/woocommerce-blocks/pull/1923)

This commit is contained in:
Mike Jolley 2020-03-10 14:40:30 +00:00 committed by GitHub
parent 2aa2093dfb
commit e6dfe243f9
9 changed files with 38 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/woocommerce-blocks/assets/js/base/components/product-list-item/index.js
View File

@ -7,18 +7,18 @@ import {
useInnerBlockConfigurationContext,
useProductLayoutContext,
} from '@woocommerce/base-context';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
/**
* Internal dependencies
*/
import { renderProductLayout } from './utils';
const ProductListItem = ( { product, attributes, componentId } ) => {
const ProductListItem = ( { product, attributes, instanceId } ) => {
const { layoutConfig } = attributes;
const { parentName } = useInnerBlockConfigurationContext();
const { layoutStyleClassPrefix } = useProductLayoutContext();
const isLoading = ! Object.keys( product ).length > 0;
const isLoading = Object.keys( product ).length === 0;
const classes = classnames( `${ layoutStyleClassPrefix }__product`, {
'is-loading': isLoading,
} );
@ -29,7 +29,7 @@ const ProductListItem = ( { product, attributes, componentId } ) => {
parentName,
product,
layoutConfig,
componentId
instanceId
) }
</li>
);
@ -38,8 +38,8 @@ const ProductListItem = ( { product, attributes, componentId } ) => {
ProductListItem.propTypes = {
attributes: PropTypes.object.isRequired,
product: PropTypes.object,
// from withComponentId
componentId: PropTypes.number.isRequired,
// from withInstanceId
instanceId: PropTypes.number.isRequired,
};
export default withComponentId( ProductListItem );
export default withInstanceId( ProductListItem );

8
plugins/woocommerce-blocks/assets/js/base/components/radio-control/index.js
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
/**
* Internal dependencies
@ -13,13 +13,13 @@ import './style.scss';
const RadioControl = ( {
className,
componentId,
instanceId,
id,
selected,
onChange,
options = [],
} ) => {
const radioControlId = id || componentId;
const radioControlId = id || instanceId;
return (
options.length && (
@ -40,6 +40,6 @@ const RadioControl = ( {
);
};
export default withComponentId( RadioControl );
export default withInstanceId( RadioControl );
export { RadioControlOption };
export { default as RadioControlOptionLayout } from './option-layout';

12
plugins/woocommerce-blocks/assets/js/base/components/sort-select/index.js
View File

@ -4,7 +4,7 @@
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Label from '@woocommerce/base-components/label';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
/**
* Internal dependencies
@ -17,7 +17,7 @@ import './style.scss';
*/
const SortSelect = ( {
className,
componentId,
instanceId,
defaultValue,
label,
onChange,
@ -26,7 +26,7 @@ const SortSelect = ( {
readOnly,
value,
} ) => {
const selectId = `wc-block-sort-select__select-${ componentId }`;
const selectId = `wc-block-sort-select__select-${ instanceId }`;
return (
<div className={ classNames( 'wc-block-sort-select', className ) }>
@ -70,8 +70,8 @@ SortSelect.propTypes = {
readOnly: PropTypes.bool,
screenReaderLabel: PropTypes.string,
value: PropTypes.string,
// from withComponentId
componentId: PropTypes.number.isRequired,
// from withInstanceId
instanceId: PropTypes.number.isRequired,
};
export default withComponentId( SortSelect );
export default withInstanceId( SortSelect );

12
plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { useState } from '@wordpress/element';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
@ -41,7 +41,7 @@ const Tabs = ( {
tabs,
activeClass = 'is-active',
initialTabName,
componentId,
instanceId,
ariaLabel = __( 'Tabbed Content', 'woo-gutenberg-products-block' ),
children,
} ) => {
@ -59,7 +59,7 @@ const Tabs = ( {
if ( ! selectedTab ) {
throw new Error( 'There is no available tab for the selected item' );
}
const selectedId = `${ componentId }-${ selectedTab.name }`;
const selectedId = `${ instanceId }-${ selectedTab.name }`;
return (
<div className={ classnames( 'wc-component__tabs', className ) }>
<div
@ -76,8 +76,8 @@ const Tabs = ( {
[ activeClass ]: tab.name === selected,
}
) }
tabId={ `${ componentId }-${ tab.name }` }
aria-controls={ `${ componentId }-${ tab.name }-view` }
tabId={ `${ instanceId }-${ tab.name }` }
aria-controls={ `${ instanceId }-${ tab.name }-view` }
selected={ tab.name === selected }
key={ tab.name }
ariaLabel={ tab.ariaLabel || null }
@ -102,4 +102,4 @@ const Tabs = ( {
);
};
export default withComponentId( Tabs );
export default withInstanceId( Tabs );

8
plugins/woocommerce-blocks/assets/js/base/components/text-input/index.js
View File

@ -4,7 +4,7 @@
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useState } from '@wordpress/element';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
/**
* Internal dependencies
@ -14,7 +14,7 @@ import './style.scss';
const TextInput = ( {
className,
componentId,
instanceId,
id,
type = 'text',
ariaLabel,
@ -29,7 +29,7 @@ const TextInput = ( {
} ) => {
const [ isActive, setIsActive ] = useState( false );
const onChangeValue = ( event ) => onChange( event.target.value );
const textInputId = id || 'textinput-' + componentId;
const textInputId = id || 'textinput-' + instanceId;
return (
<div
@ -86,4 +86,4 @@ TextInput.propTypes = {
required: PropTypes.bool,
};
export default withComponentId( TextInput );
export default withInstanceId( TextInput );

10
plugins/woocommerce-blocks/assets/js/base/components/totals/totals-coupon-code-input/index.js
View File

@ -8,7 +8,7 @@ import Button from '@woocommerce/base-components/button';
import TextInput from '@woocommerce/base-components/text-input';
import Label from '@woocommerce/base-components/label';
import PropTypes from 'prop-types';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
/**
* Internal dependencies
@ -17,7 +17,7 @@ import './style.scss';
import LoadingMask from '../../loading-mask';
const TotalsCouponCodeInput = ( {
componentId,
instanceId,
isLoading = false,
onSubmit = () => {},
} ) => {
@ -46,7 +46,7 @@ const TotalsCouponCodeInput = ( {
'Introduce Coupon Code',
'woo-gutenberg-products-block'
) }
htmlFor={ `wc-block-coupon-code__input-${ componentId }` }
htmlFor={ `wc-block-coupon-code__input-${ instanceId }` }
/>
}
initialOpen={ true }
@ -62,7 +62,7 @@ const TotalsCouponCodeInput = ( {
<PanelRow className="wc-block-coupon-code__row">
<form className="wc-block-coupon-code__form">
<TextInput
id={ `wc-block-coupon-code__input-${ componentId }` }
id={ `wc-block-coupon-code__input-${ instanceId }` }
className="wc-block-coupon-code__input"
label={ __(
'Enter code',
@ -95,4 +95,4 @@ TotalsCouponCodeInput.propTypes = {
isLoading: PropTypes.bool,
};
export default withComponentId( TotalsCouponCodeInput );
export default withInstanceId( TotalsCouponCodeInput );

36
plugins/woocommerce-blocks/assets/js/base/hocs/test/with-component-id.js
View File

@ -1,36 +0,0 @@
/**
* External dependencies
*/
import TestRenderer from 'react-test-renderer';
/**
* Internal dependencies
*/
import withComponentId from '../with-component-id';
const TestComponent = withComponentId( ( props ) => {
return <div componentId={ props.componentId } />;
} );
const render = () => {
return TestRenderer.create( <TestComponent /> );
};
describe( 'withComponentId Component', () => {
let renderer;
it( 'initializes with expected id on initial render', () => {
renderer = render();
const props = renderer.root.findByType( 'div' ).props;
expect( props.componentId ).toBe( 0 );
} );
it( 'does not increment on re-render', () => {
renderer.update( <TestComponent someValue={ 3 } /> );
const props = renderer.root.findByType( 'div' ).props;
expect( props.componentId ).toBe( 0 );
} );
it( 'increments on a new component instance', () => {
renderer.update( <TestComponent key={ 42 } /> );
const props = renderer.root.findByType( 'div' ).props;
expect( props.componentId ).toBe( 1 );
} );
} );

33
plugins/woocommerce-blocks/assets/js/base/hocs/with-component-id.js
View File

@ -1,33 +0,0 @@
/**
* External dependencies
*/
import { Component } from 'react';
/**
* HOC that gives a component a unique ID.
*
* This is an alternative for withInstanceId from @wordpress/compose to avoid
* using that dependency on the frontend.
*
* @param {Function} OriginalComponent Passed in component.
*/
const withComponentId = ( OriginalComponent ) => {
let instances = 0;
class WrappedComponent extends Component {
instanceId = instances++;
render() {
return (
<OriginalComponent
{ ...this.props }
componentId={ this.instanceId }
/>
);
}
}
WrappedComponent.displayName = 'withComponentId';
return WrappedComponent;
};
export default withComponentId;

12
plugins/woocommerce-blocks/assets/js/components/view-switcher/index.js
View File

@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonGroup, Button } from '@wordpress/components';
import { useState, Fragment } from '@wordpress/element';
import withComponentId from '@woocommerce/base-hocs/with-component-id';
import { withInstanceId } from 'wordpress-compose';
/**
* Internal dependencies
@ -18,12 +18,12 @@ const ViewSwitcher = ( {
label = __( 'View', 'woo-gutenberg-products-block' ),
views,
defaultView,
componentId,
instanceId,
render,
} ) => {
const [ currentView, setCurrentView ] = useState( defaultView );
const classes = classnames( className, 'wc-block-view-switch-control' );
const htmlId = 'wc-block-view-switch-control-' + componentId;
const htmlId = 'wc-block-view-switch-control-' + instanceId;
return (
<Fragment>
@ -77,8 +77,8 @@ ViewSwitcher.propTypes = {
* Render prop for selected views.
*/
render: PropTypes.func.isRequired,
// from withComponentId
componentId: PropTypes.number.isRequired,
// from withInstanceId
instanceId: PropTypes.number.isRequired,
};
export default withComponentId( ViewSwitcher );
export default withInstanceId( ViewSwitcher );