Convert product-elements/sale-badge to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/7543)

This commit is contained in:
Niels Lange 2022-11-02 13:30:58 +07:00 committed by GitHub
parent fdc07e5a96
commit 14a35c6722
8 changed files with 96 additions and 93 deletions

View File

@ -1,4 +1,4 @@
export const blockAttributes = {
export const blockAttributes: Record< string, Record< string, unknown > > = {
productId: {
type: 'number',
default: 0,

View File

@ -1,7 +1,6 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import Label from '@woocommerce/base-components/label';
@ -16,27 +15,22 @@ import {
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 Sale Badge Block Component.
*
* @param {Object} props Incoming props.
* @param {string} [props.className] CSS Class name for the component.
* @param {string} [props.align] Alignment of the badge.
* @return {*} The component.
*/
export const Block = ( props ) => {
type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
const Block = ( props: Props ): JSX.Element | null => {
const { className, align } = props;
const { parentClassName } = useInnerBlockLayoutContext();
const { product } = useProductDataContext();
const borderProps = useBorderProps( props );
const colorProps = useColorProps( props );
const typographyProps = useTypographyProps( props );
const spacingProps = useSpacingProps( props );
@ -79,9 +73,4 @@ export const Block = ( props ) => {
);
};
Block.propTypes = {
className: PropTypes.string,
align: PropTypes.string,
};
export default withProductDataContext( Block );

View File

@ -4,14 +4,14 @@
import { __ } from '@wordpress/i18n';
import { percent, Icon } from '@wordpress/icons';
export const BLOCK_TITLE = __(
export const BLOCK_TITLE: string = __(
'On-Sale Badge',
'woo-gutenberg-products-block'
);
export const BLOCK_ICON = (
export const BLOCK_ICON: JSX.Element = (
<Icon icon={ percent } className="wc-block-editor-components-block-icon" />
);
export const BLOCK_DESCRIPTION = __(
export const BLOCK_DESCRIPTION: string = __(
'Displays an on-sale badge if the product is on-sale.',
'woo-gutenberg-products-block'
);

View File

@ -1,7 +1,6 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
/**
@ -9,9 +8,18 @@ import { useBlockProps } from '@wordpress/block-editor';
*/
import Block from './block';
import withProductSelector from '../shared/with-product-selector';
import { BLOCK_TITLE, BLOCK_ICON } from './constants';
import {
BLOCK_TITLE as label,
BLOCK_ICON as icon,
BLOCK_DESCRIPTION as description,
} from './constants';
import type { BlockAttributes } from './types';
const Edit = ( { attributes } ) => {
interface Props {
attributes: BlockAttributes;
}
const Edit = ( { attributes }: Props ): JSX.Element => {
const blockProps = useBlockProps();
return (
<div { ...blockProps }>
@ -20,11 +28,4 @@ const Edit = ( { attributes } ) => {
);
};
export default withProductSelector( {
icon: BLOCK_ICON,
label: BLOCK_TITLE,
description: __(
'Choose a product to display its sale-badge.',
'woo-gutenberg-products-block'
),
} )( Edit );
export default withProductSelector( { icon, label, description } )( Edit );

View File

@ -1,62 +0,0 @@
/**
* External dependencies
*/
import { registerBlockType } from '@wordpress/blocks';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import sharedConfig from '../shared/config';
import attributes from './attributes';
import edit from './edit';
import {
BLOCK_TITLE as title,
BLOCK_ICON as icon,
BLOCK_DESCRIPTION as description,
} from './constants';
import { Save } from './save';
import { hasSpacingStyleSupport } from '../../../../utils/global-style';
const blockConfig = {
title,
description,
icon: { src: icon },
apiVersion: 2,
supports: {
html: false,
...( isFeaturePluginBuild() && {
color: {
gradients: true,
background: true,
link: false,
__experimentalSkipSerialization: true,
},
typography: {
fontSize: true,
__experimentalSkipSerialization: true,
},
__experimentalBorder: {
color: true,
radius: true,
width: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
spacing: {
padding: true,
__experimentalSkipSerialization: true,
},
} ),
__experimentalSelector: '.wc-block-components-product-sale-badge',
} ),
},
attributes,
edit,
save: Save,
};
registerBlockType( 'woocommerce/product-sale-badge', {
...sharedConfig,
...blockConfig,
} );

View File

@ -0,0 +1,33 @@
/**
* External dependencies
*/
import { registerBlockType } from '@wordpress/blocks';
import type { BlockConfiguration } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import sharedConfig from '../shared/config';
import attributes from './attributes';
import edit from './edit';
import {
BLOCK_TITLE as title,
BLOCK_ICON as icon,
BLOCK_DESCRIPTION as description,
} from './constants';
import { Save } from './save';
import { supports } from './support';
const blockConfig: BlockConfiguration = {
...sharedConfig,
title,
description,
icon: { src: icon },
apiVersion: 2,
supports,
attributes,
edit,
save: Save,
};
registerBlockType( 'woocommerce/product-sale-badge', { ...blockConfig } );

View File

@ -0,0 +1,38 @@
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import { hasSpacingStyleSupport } from '../../../../utils/global-style';
export const supports = {
html: false,
...( isFeaturePluginBuild() && {
color: {
gradients: true,
background: true,
link: false,
__experimentalSkipSerialization: true,
},
typography: {
fontSize: true,
__experimentalSkipSerialization: true,
},
__experimentalBorder: {
color: true,
radius: true,
width: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
spacing: {
padding: true,
__experimentalSkipSerialization: true,
},
} ),
__experimentalSelector: '.wc-block-components-product-sale-badge',
} ),
};

View File

@ -0,0 +1,4 @@
export interface BlockAttributes {
productId: number;
align: 'left' | 'center' | 'right';
}