Remove `propTypes` definitions from Product Search block (https://github.com/woocommerce/woocommerce-blocks/pull/9565)

* Remove propTypes definitions for product search

* Resolved TS errors

* Addressed review comments

---------

Co-authored-by: Niels Lange <info@nielslange.de>
This commit is contained in:
Hritik Chaudhary 2023-05-24 17:54:08 +05:30 committed by GitHub
parent e6e908c483
commit ed2c17f16c
5 changed files with 46 additions and 38 deletions

View File

@ -3,7 +3,6 @@
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { HOME_URL } from '@woocommerce/settings';
/**
@ -24,9 +23,20 @@ import './style.scss';
* @param {boolean} props.attributes.hasLabel
* @param {string} props.attributes.align
*/
interface ProductSearchBlockProps {
attributes: {
label: string;
placeholder: string;
formId: string;
className: string;
hasLabel: boolean;
align: string;
};
}
const ProductSearchBlock = ( {
attributes: { label, placeholder, formId, className, hasLabel, align },
} ) => {
}: ProductSearchBlockProps ) => {
const classes = classnames(
'wc-block-product-search',
align ? 'align' + align : '',
@ -58,7 +68,10 @@ const ProductSearchBlock = ( {
<button
type="submit"
className="wc-block-product-search__button"
label={ __( 'Search', 'woo-gutenberg-products-block' ) }
aria-label={ __(
'Search',
'woo-gutenberg-products-block'
) }
>
<svg
aria-hidden="true"
@ -79,11 +92,4 @@ const ProductSearchBlock = ( {
);
};
ProductSearchBlock.propTypes = {
/**
* The attributes for this block.
*/
attributes: PropTypes.object.isRequired,
};
export default ProductSearchBlock;

View File

@ -3,7 +3,6 @@
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { InspectorControls, PlainText } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import { withInstanceId } from '@wordpress/compose';
@ -29,11 +28,30 @@ import './style.scss';
* @param {string} props.instanceId
* @param {function(any):any} props.setAttributes Setter for block attributes.
*/
interface EditProps {
attributes: {
label: string;
placeholder: string;
formId: string;
className: string;
hasLabel: boolean;
align: string;
};
instanceId: number;
setAttributes: ( attributes: {
label?: string;
placeholder?: string;
formId?: string;
className?: string;
hasLabel?: boolean;
align?: string;
} ) => void;
}
const Edit = ( {
attributes: { label, placeholder, formId, className, hasLabel, align },
instanceId,
setAttributes,
} ) => {
}: EditProps ) => {
const classes = classnames(
'wc-block-product-search',
align ? 'align' + align : '',
@ -105,9 +123,12 @@ const Edit = ( {
<button
type="submit"
className="wc-block-product-search__button"
label={ __( 'Search', 'woo-gutenberg-products-block' ) }
aria-label={ __(
'Search',
'woo-gutenberg-products-block'
) }
onClick={ ( e ) => e.preventDefault() }
tabIndex="-1"
tabIndex={ -1 }
>
<svg
aria-hidden="true"
@ -128,23 +149,4 @@ const Edit = ( {
);
};
Edit.propTypes = {
/**
* The attributes for this block.
*/
attributes: PropTypes.object.isRequired,
/**
* A unique ID for identifying the label for the select dropdown.
*/
instanceId: PropTypes.number,
/**
* Whether it's in the editor or frontend display.
*/
isEditor: PropTypes.bool,
/**
* A callback to update attributes.
*/
setAttributes: PropTypes.func,
};
export default withInstanceId( Edit );

View File

@ -21,8 +21,8 @@ import {
*/
import './style.scss';
import './editor.scss';
import Block from './block.js';
import Edit from './edit.js';
import Block from './block';
import Edit from './edit';
const isBlockVariationAvailable = getSettingWithCoercion(
'isBlockVariationAvailable',

View File

@ -10,7 +10,7 @@ export const ADMIN_URL = allSettings.adminUrl;
export const COUNTRIES = allSettings.countries;
export const CURRENCY = allSettings.currency;
export const CURRENT_USER_IS_ADMIN = allSettings.currentUserIsAdmin as boolean;
export const HOME_URL = allSettings.homeUrl;
export const HOME_URL = allSettings.homeUrl as string | undefined;
export const LOCALE = allSettings.locale;
export const ORDER_STATUSES = allSettings.orderStatuses;
export const PLACEHOLDER_IMG_SRC = allSettings.placeholderImgSrc as string;

View File

@ -3370,12 +3370,12 @@
<error line="118" column="6" severity="error" message="Type &apos;{ label: string; onChange: (statusLabels: readonly Value[]) =&gt; void; suggestions: string[]; validateInput: (value: string) =&gt; boolean; value: string[]; __experimentalExpandOnFocus: boolean; }&apos; is not assignable to type &apos;IntrinsicAttributes &amp; Props &amp; { children?: ReactNode; }&apos;.
Property &apos;label&apos; does not exist on type &apos;IntrinsicAttributes &amp; Props &amp; { children?: ReactNode; }&apos;." source="TS2322" />
</file>
<file name="assets/js/blocks/product-search/block.js">
<file name="assets/js/blocks/product-search/block.tsx">
<error line="38" column="37" severity="error" message="Type &apos;unknown&apos; is not assignable to type &apos;string | undefined&apos;." source="TS2322" />
<error line="61" column="7" severity="error" message="Type &apos;{ children: Element; type: &quot;submit&quot;; className: string; label: string; }&apos; is not assignable to type &apos;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;&apos;.
Property &apos;label&apos; does not exist on type &apos;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;&apos;." source="TS2322" />
</file>
<file name="assets/js/blocks/product-search/edit.js">
<file name="assets/js/blocks/product-search/edit.tsx">
<error line="109" column="7" severity="error" message="Type &apos;string&apos; is not assignable to type &apos;number&apos;." source="TS2322" />
<error line="149" column="32" severity="error" message="Argument of type &apos;{ ({ attributes: { label, placeholder, formId, className, hasLabel, align }, instanceId, setAttributes, }: { attributes: { label: string; placeholder: string; formId: string; className: string; hasLabel: boolean; align: string; }; instanceId: string; setAttribute...&apos; is not assignable to parameter of type &apos;ComponentType&lt;{ attributes: { label: string; placeholder: string; formId: string; className: string; hasLabel: boolean; align: string; }; instanceId: string; setAttributes: (arg0: any) =&gt; any; }&gt;&apos;.
Type &apos;{ ({ attributes: { label, placeholder, formId, className, hasLabel, align }, instanceId, setAttributes, }: { attributes: { label: string; placeholder: string; formId: string; className: string; hasLabel: boolean; align: string; }; instanceId: string; setAttribute...&apos; is not assignable to type &apos;FunctionComponent&lt;{ attributes: { label: string; placeholder: string; formId: string; className: string; hasLabel: boolean; align: string; }; instanceId: string; setAttributes: (arg0: any) =&gt; any; }&gt;&apos;.