Convert product-elements/summary to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/7566)
* Convert product-elements/summary to TypeScript * bot: update checkstyle.xml * Update assets/js/atomic/blocks/product-elements/summary/index.ts Co-authored-by: Tung Du <dinhtungdu@gmail.com> * Resolve introduced TS error * bot: update checkstyle.xml * Remove default subproperties * Add TODO to refactor this part in the future * Make attribute type more strict * Add more context to the todo regarding removing the HOC Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com>
This commit is contained in:
Niels Lange
GitHub
parent
2a3a39bdcd
commit
7b84be1156
|
|
@ -1,8 +0,0 @@
|
|||
export const blockAttributes = {
|
||||
productId: {
|
||||
type: 'number',
|
||||
default: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export default blockAttributes;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
type BlockAttributes = {
|
||||
productId: {
|
||||
type: string;
|
||||
default: number;
|
||||
};
|
||||
};
|
||||
|
||||
export const blockAttributes: BlockAttributes = {
|
||||
productId: {
|
||||
type: 'number',
|
||||
default: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export default blockAttributes;
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Summary from '@woocommerce/base-components/summary';
|
||||
import { blocksConfig } from '@woocommerce/block-settings';
|
||||
|
|
@ -12,22 +11,18 @@ import {
|
|||
} from '@woocommerce/shared-context';
|
||||
import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
|
||||
import { withProductDataContext } from '@woocommerce/shared-hocs';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import type { BlockAttributes } from './types';
|
||||
|
||||
/**
|
||||
* Product Summary Block Component.
|
||||
*
|
||||
* @param {Object} props Incoming props.
|
||||
* @param {string} [props.className] CSS Class name for the component.
|
||||
* @return {*} The component.
|
||||
*/
|
||||
const Block = ( props ) => {
|
||||
type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
|
||||
|
||||
const Block = ( props: Props ): JSX.Element | null => {
|
||||
const { className } = props;
|
||||
|
||||
const { parentClassName } = useInnerBlockLayoutContext();
|
||||
const { product } = useProductDataContext();
|
||||
const colorProps = useColorProps( props );
|
||||
|
|
@ -78,8 +73,4 @@ const Block = ( props ) => {
|
|||
);
|
||||
};
|
||||
|
||||
Block.propTypes = {
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default withProductDataContext( Block );
|
||||
|
|
@ -4,14 +4,14 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { page, Icon } from '@wordpress/icons';
|
||||
|
||||
export const BLOCK_TITLE = __(
|
||||
export const BLOCK_TITLE: string = __(
|
||||
'Product Summary',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
export const BLOCK_ICON = (
|
||||
export const BLOCK_ICON: JSX.Element = (
|
||||
<Icon icon={ page } className="wc-block-editor-components-block-icon" />
|
||||
);
|
||||
export const BLOCK_DESCRIPTION = __(
|
||||
export const BLOCK_DESCRIPTION: string = __(
|
||||
'Display a short description about a product.',
|
||||
'woo-gutenberg-products-block'
|
||||
);
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block';
|
||||
import withProductSelector from '../shared/with-product-selector';
|
||||
import { BLOCK_TITLE, BLOCK_ICON } from './constants';
|
||||
import './editor.scss';
|
||||
|
||||
const Edit = ( { attributes } ) => {
|
||||
const blockProps = useBlockProps();
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<Block { ...attributes } />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withProductSelector( {
|
||||
icon: BLOCK_ICON,
|
||||
label: BLOCK_TITLE,
|
||||
description: __(
|
||||
'Choose a product to display its short description.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
} )( Edit );
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block';
|
||||
import withProductSelector from '../shared/with-product-selector';
|
||||
import {
|
||||
BLOCK_TITLE as label,
|
||||
BLOCK_ICON as icon,
|
||||
BLOCK_DESCRIPTION as description,
|
||||
} from './constants';
|
||||
import './editor.scss';
|
||||
import type { BlockAttributes } from './types';
|
||||
|
||||
interface Props {
|
||||
attributes: BlockAttributes;
|
||||
}
|
||||
|
||||
const Edit = ( { attributes }: Props ): JSX.Element => {
|
||||
const blockProps = useBlockProps();
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<Block { ...attributes } />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// @todo: Refactor this to remove the HOC 'withProductSelector()' component as users will not see this block in the inserter. Therefore, we can export the Edit component by default. The HOC 'withProductSelector()' component should also be removed from other `product-elements` components. See also https://github.com/woocommerce/woocommerce-blocks/pull/7566#pullrequestreview-1168635469.
|
||||
export default withProductSelector( { icon, label, description } )( Edit );
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import type { BlockConfiguration } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -17,7 +18,8 @@ import {
|
|||
} from './constants';
|
||||
import { Save } from './save';
|
||||
|
||||
const blockConfig = {
|
||||
const blockConfig: BlockConfiguration = {
|
||||
...sharedConfig,
|
||||
apiVersion: 2,
|
||||
title,
|
||||
description,
|
||||
|
|
@ -28,7 +30,4 @@ const blockConfig = {
|
|||
save: Save,
|
||||
};
|
||||
|
||||
registerBlockType( 'woocommerce/product-summary', {
|
||||
...sharedConfig,
|
||||
...blockConfig,
|
||||
} );
|
||||
registerBlockType( 'woocommerce/product-summary', blockConfig );
|
||||
|
|
@ -6,9 +6,7 @@ import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
|||
export const supports = {
|
||||
...( isFeaturePluginBuild() && {
|
||||
color: {
|
||||
text: true,
|
||||
background: false,
|
||||
link: false,
|
||||
},
|
||||
typography: {
|
||||
fontSize: true,
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface BlockAttributes {
|
||||
productId: number;
|
||||
}
|
||||
|
|
@ -1539,20 +1539,6 @@
|
|||
Types of parameters '__0' and 'props' are incompatible.
|
||||
Property 'context' is missing in type 'BlockEditProps<{}> & { children?: ReactNode; }' but required in type '{ attributes: any; setAttributes: any; context: any; }'." source="TS2769" />
|
||||
</file>
|
||||
<file name="assets/js/atomic/blocks/product-elements/summary/edit.js">
|
||||
<error line="15" column="18" severity="error" message="Binding element 'attributes' implicitly has an 'any' type." source="TS7031" />
|
||||
</file>
|
||||
<file name="assets/js/atomic/blocks/product-elements/summary/index.js">
|
||||
<error line="31" column="1" severity="error" message="No overload matches this call.
|
||||
Overload 1 of 2, '(metadata: BlockConfiguration<{}>, settings?: Partial<BlockConfiguration<{}>> | undefined): Block<{}> | undefined', gave the following error.
|
||||
Argument of type 'string' is not assignable to parameter of type 'BlockConfiguration<{}>'.
|
||||
Type 'string' is not assignable to type 'Pick<Block<{}>, "title" | "category" | "attributes">'.
|
||||
Overload 2 of 2, '(name: string, settings: BlockConfiguration<{}>): Block<{}> | undefined', gave the following error.
|
||||
Argument of type '{ apiVersion: number; title: string; description: string; icon: { src: JSX.Element; }; attributes: { productId: { type: string; default: number; }; }; supports: { color?: { text: boolean; background: boolean; link: boolean; }; typography?: { ...; }; __experimentalSelector?: string; }; ... 19 more ...; merge?: ((attr...' is not assignable to parameter of type 'BlockConfiguration<{}>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
|
||||
Type '{ apiVersion: number; title: string; description: string; icon: { src: JSX.Element; }; attributes: { productId: { type: string; default: number; }; }; supports: { color?: { text: boolean; background: boolean; link: boolean; }; typography?: { ...; }; __experimentalSelector?: string; }; ... 19 more ...; merge?: ((attr...' is not assignable to type 'Partial<Omit<Block<{}>, "icon">>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
|
||||
The types of 'supports.color.text' are incompatible between these types.
|
||||
Type 'boolean' is not assignable to type 'string'." source="TS2769" />
|
||||
</file>
|
||||
<file name="assets/js/editor-components/edit-product-link/index.js">
|
||||
<error line="18" column="40" severity="error" message="Property 'productId' does not exist on type 'Object'." source="TS2339" />
|
||||
</file>
|
||||
|
|
|
|||
Loading…
Reference in New Issue