Moving useProductHelper and useVariationsOrder hooks to product editor package (#37006)
This commit is contained in:
Joel Thiessen
GitHub
parent
deb1d131ad
commit
b825b51767
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Bringing in use-product-helper and related hooks.
|
||||
|
|
@ -29,7 +29,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@woocommerce/components": "workspace:*",
|
||||
"@woocommerce/currency": "workspace:*",
|
||||
"@woocommerce/data": "workspace:^4.1.0",
|
||||
"@woocommerce/number": "workspace:*",
|
||||
"@woocommerce/tracks": "workspace:^1.3.0",
|
||||
"@wordpress/components": "^19.5.0",
|
||||
"@wordpress/element": "^4.1.1",
|
||||
|
|
@ -39,6 +41,7 @@
|
|||
"devDependencies": {
|
||||
"@types/react": "^17.0.2",
|
||||
"@types/wordpress__components": "^19.10.1",
|
||||
"@types/wordpress__data": "^6.0.0",
|
||||
"@woocommerce/eslint-plugin": "workspace:*",
|
||||
"@woocommerce/internal-style-build": "workspace:*",
|
||||
"@wordpress/browserslist-config": "^4.1.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
|
||||
export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';
|
||||
export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper';
|
||||
export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order';
|
||||
|
|
@ -2,10 +2,6 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
AUTO_DRAFT_NAME,
|
||||
getDerivedProductType,
|
||||
} from '@woocommerce/product-editor';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { useCallback, useContext, useState } from '@wordpress/element';
|
||||
import * as WooNumber from '@woocommerce/number';
|
||||
|
|
@ -25,11 +21,14 @@ import { CurrencyContext } from '@woocommerce/currency';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { AUTO_DRAFT_NAME, getDerivedProductType } from '../index';
|
||||
import {
|
||||
NUMBERS_AND_DECIMAL_SEPARATOR,
|
||||
ONLY_ONE_DECIMAL_SEPARATOR,
|
||||
} from './constants';
|
||||
import { ProductVariationsOrder } from './hooks/use-variations-order';
|
||||
} from '../constants';
|
||||
import { ProductVariationsOrder } from './use-variations-order';
|
||||
|
||||
// TODO: Having to add TS ignore comments here, should be able to address with TS config but running into issues.
|
||||
|
||||
function removeReadonlyProperties(
|
||||
product: Product
|
||||
|
|
@ -156,7 +155,11 @@ export function useProductHelper() {
|
|||
},
|
||||
{
|
||||
update: Object.values( variationsOrder )
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
.flatMap( Object.entries )
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
.map( ( [ id, menu_order ] ) => ( {
|
||||
id,
|
||||
menu_order,
|
||||
|
|
@ -309,6 +312,8 @@ export function useProductHelper() {
|
|||
'g'
|
||||
);
|
||||
const decimalRegex = new RegExp(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
ONLY_ONE_DECIMAL_SEPARATOR.replaceAll( '%s', decimalSeparator ),
|
||||
'g'
|
||||
);
|
||||
|
|
@ -45,10 +45,10 @@ function sort(
|
|||
} );
|
||||
}
|
||||
|
||||
export default function useVariationsOrder( {
|
||||
export const useVariationsOrder = ( {
|
||||
variations,
|
||||
currentPage,
|
||||
}: UseVariationsOrderInput ): UseVariationsOrderOutput {
|
||||
}: UseVariationsOrderInput ): UseVariationsOrderOutput => {
|
||||
const { setValue, values } = useFormContext< ProductVariationsOrder >();
|
||||
|
||||
function onOrderChange( items: JSX.Element[] ) {
|
||||
|
|
@ -71,7 +71,7 @@ export default function useVariationsOrder( {
|
|||
getVariationKey,
|
||||
onOrderChange,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export type UseVariationsOrderInput = {
|
||||
variations: ProductVariation[];
|
||||
|
|
@ -4,3 +4,8 @@ export * from './components';
|
|||
* Utils
|
||||
*/
|
||||
export * from './utils';
|
||||
|
||||
/**
|
||||
* Hooks
|
||||
*/
|
||||
export * from './hooks';
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
import {
|
||||
getProductStockStatus,
|
||||
getProductStockStatusClass,
|
||||
__experimentalUseVariationsOrder as useVariationsOrder,
|
||||
} from '@woocommerce/product-editor';
|
||||
import {
|
||||
Link,
|
||||
|
|
@ -31,7 +32,6 @@ import { CurrencyContext } from '@woocommerce/currency';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { PRODUCT_VARIATION_TITLE_LIMIT } from '~/products/constants';
|
||||
import useVariationsOrder from '~/products/hooks/use-variations-order';
|
||||
import HiddenIcon from '~/products/images/hidden-icon';
|
||||
import VisibleIcon from '~/products/images/visible-icon';
|
||||
import './variations.scss';
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
__experimentalWooProductSectionItem as WooProductSectionItem,
|
||||
__experimentalWooProductFieldItem as WooProductFieldItem,
|
||||
__experimentalProductSectionLayout as ProductSectionLayout,
|
||||
__experimentalUseProductHelper as useProductHelper,
|
||||
} from '@woocommerce/product-editor';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { Product } from '@woocommerce/data';
|
||||
|
|
@ -27,7 +28,6 @@ import {
|
|||
PricingTaxesClassField,
|
||||
PricingTaxesChargeField,
|
||||
} from './index';
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
import { PLUGIN_ID } from '../constants';
|
||||
|
||||
import './pricing-section.scss';
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useFormContext } from '@woocommerce/components';
|
||||
import { PartialProduct } from '@woocommerce/data';
|
||||
import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
|
||||
import {
|
||||
BaseControl,
|
||||
// @ts-expect-error `__experimentalInputControl` does exist.
|
||||
|
|
@ -14,7 +15,6 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
import { getInterpolatedSizeLabel } from './utils';
|
||||
import { ShippingDimensionsPropsType } from './index';
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useFormContext } from '@woocommerce/components';
|
||||
import { PartialProduct } from '@woocommerce/data';
|
||||
import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
|
||||
|
||||
import {
|
||||
BaseControl,
|
||||
// @ts-expect-error `__experimentalInputControl` does exist.
|
||||
|
|
@ -14,7 +16,6 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
import { getInterpolatedSizeLabel } from './utils';
|
||||
import { ShippingDimensionsPropsType } from './index';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
|
|||
import { useFormContext } from '@woocommerce/components';
|
||||
import { OPTIONS_STORE_NAME, PartialProduct } from '@woocommerce/data';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
|
||||
import {
|
||||
BaseControl,
|
||||
// @ts-expect-error `__experimentalInputControl` does exist.
|
||||
|
|
@ -12,11 +13,6 @@ import {
|
|||
__experimentalInputControl as InputControl,
|
||||
} from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
|
||||
export const ShippingDimensionsWeightField = () => {
|
||||
const { getInputProps } = useFormContext< PartialProduct >();
|
||||
const { formatNumber, parseNumber } = useProductHelper();
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useFormContext } from '@woocommerce/components';
|
||||
import { PartialProduct } from '@woocommerce/data';
|
||||
import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
|
||||
import {
|
||||
BaseControl,
|
||||
// @ts-expect-error `__experimentalInputControl` does exist.
|
||||
|
|
@ -14,7 +15,6 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
import { getInterpolatedSizeLabel } from './utils';
|
||||
import { ShippingDimensionsPropsType } from './index';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
__experimentalWooProductSectionItem as WooProductSectionItem,
|
||||
__experimentalWooProductFieldItem as WooProductFieldItem,
|
||||
__experimentalProductSectionLayout as ProductSectionLayout,
|
||||
__experimentalUseProductHelper as useProductHelper,
|
||||
} from '@woocommerce/product-editor';
|
||||
import { PartialProduct, OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
|
|
@ -30,7 +31,6 @@ import {
|
|||
ShippingDimensionsImage,
|
||||
ShippingDimensionsImageProps,
|
||||
} from '../../fields/shipping-dimensions-image';
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
|
||||
import './shipping-section.scss';
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@ import {
|
|||
import { chevronDown, check, Icon } from '@wordpress/icons';
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { useFormContext } from '@woocommerce/components';
|
||||
import { preventLeavingProductForm } from '@woocommerce/product-editor';
|
||||
import {
|
||||
preventLeavingProductForm,
|
||||
__experimentalUseProductHelper as useProductHelper,
|
||||
} from '@woocommerce/product-editor';
|
||||
import { Product } from '@woocommerce/data';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { navigateTo } from '@woocommerce/navigation';
|
||||
|
|
@ -27,7 +30,6 @@ import { store } from '@wordpress/viewport';
|
|||
*/
|
||||
import usePreventLeavingPage from '~/hooks/usePreventLeavingPage';
|
||||
import { WooHeaderItem } from '~/header/utils';
|
||||
import { useProductHelper } from './use-product-helper';
|
||||
import './product-form-actions.scss';
|
||||
import { useProductMVPCESFooter } from '~/customer-effort-score-tracks/use-product-mvp-ces-footer';
|
||||
import { useCustomerEffortScoreExitPageTracker } from '~/customer-effort-score-tracks/use-customer-effort-score-exit-page-tracker';
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ import interpolateComponents from '@automattic/interpolate-components';
|
|||
import { Product } from '@woocommerce/data';
|
||||
import { useFormContext } from '@woocommerce/components';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './edit-product-link-modal.scss';
|
||||
import { useProductHelper } from '../../use-product-helper';
|
||||
|
||||
type EditProductLinkModalProps = {
|
||||
product: Product;
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ jest.mock( '~/header/utils', () => ( {
|
|||
<Fragment { ...props }>{ props.children() }</Fragment>
|
||||
),
|
||||
} ) );
|
||||
jest.mock( '../use-product-helper', () => {
|
||||
jest.mock( '@woocommerce/product-editor', () => {
|
||||
return {
|
||||
useProductHelper: () => ( {
|
||||
__experimentalUseProductHelper: () => ( {
|
||||
createProductWithStatus,
|
||||
updateProductWithStatus,
|
||||
copyProductWithStatus,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Moving use-product-helper and related product hooks to product editor package.
|
||||
|
|
@ -1297,10 +1297,13 @@ importers:
|
|||
specifiers:
|
||||
'@types/react': ^17.0.2
|
||||
'@types/wordpress__components': ^19.10.1
|
||||
'@types/wordpress__data': ^6.0.0
|
||||
'@woocommerce/components': workspace:*
|
||||
'@woocommerce/currency': workspace:*
|
||||
'@woocommerce/data': workspace:^4.1.0
|
||||
'@woocommerce/eslint-plugin': workspace:*
|
||||
'@woocommerce/internal-style-build': workspace:*
|
||||
'@woocommerce/number': workspace:*
|
||||
'@woocommerce/tracks': workspace:^1.3.0
|
||||
'@wordpress/browserslist-config': ^4.1.1
|
||||
'@wordpress/components': ^19.5.0
|
||||
|
|
@ -1323,7 +1326,9 @@ importers:
|
|||
webpack-cli: ^3.3.12
|
||||
dependencies:
|
||||
'@woocommerce/components': link:../components
|
||||
'@woocommerce/currency': link:../currency
|
||||
'@woocommerce/data': link:../data
|
||||
'@woocommerce/number': link:../number
|
||||
'@woocommerce/tracks': link:../tracks
|
||||
'@wordpress/components': 19.12.0_tufdcic6wklrwyy3rhbsbktylu
|
||||
'@wordpress/element': 4.20.0
|
||||
|
|
@ -1332,6 +1337,7 @@ importers:
|
|||
devDependencies:
|
||||
'@types/react': 17.0.50
|
||||
'@types/wordpress__components': 19.10.1_sfoxds7t5ydpegc3knd667wn6m
|
||||
'@types/wordpress__data': 6.0.0
|
||||
'@woocommerce/eslint-plugin': link:../eslint-plugin
|
||||
'@woocommerce/internal-style-build': link:../internal-style-build
|
||||
'@wordpress/browserslist-config': 4.1.3
|
||||
|
|
@ -3026,6 +3032,7 @@ packages:
|
|||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.19.3
|
||||
dev: true
|
||||
|
||||
/@babel/helper-module-imports/7.16.7:
|
||||
resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==}
|
||||
|
|
@ -3082,6 +3089,7 @@ packages:
|
|||
/@babel/helper-plugin-utils/7.14.5:
|
||||
resolution: {integrity: sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@babel/helper-plugin-utils/7.18.9:
|
||||
resolution: {integrity: sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==}
|
||||
|
|
@ -4160,7 +4168,7 @@ packages:
|
|||
'@babel/core': 7.12.9
|
||||
'@babel/helper-annotate-as-pure': 7.16.7
|
||||
'@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9
|
||||
'@babel/helper-plugin-utils': 7.19.0
|
||||
'@babel/helper-plugin-utils': 7.18.9
|
||||
'@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.12.9
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
|
@ -4175,7 +4183,7 @@ packages:
|
|||
'@babel/core': 7.16.12
|
||||
'@babel/helper-annotate-as-pure': 7.16.7
|
||||
'@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.12
|
||||
'@babel/helper-plugin-utils': 7.19.0
|
||||
'@babel/helper-plugin-utils': 7.18.9
|
||||
'@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.12
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
|
|
|||
Loading…
Reference in New Issue