fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,74 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { createContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import { disabledStyles } from './styles/disabled-styles';
import { useCx } from '../utils';
const Context = createContext(false);
const {
Consumer,
Provider
} = Context;
/**
* `Disabled` is a component which disables descendant tabbable elements and
* prevents pointer interaction.
*
* _Note: this component may not behave as expected in browsers that don't
* support the `inert` HTML attribute. We recommend adding the official WICG
* polyfill when using this component in your project._
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
*
* ```jsx
* import { Button, Disabled, TextControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyDisabled = () => {
* const [ isDisabled, setIsDisabled ] = useState( true );
*
* let input = <TextControl label="Input" onChange={ () => {} } />;
* if ( isDisabled ) {
* input = <Disabled>{ input }</Disabled>;
* }
*
* const toggleDisabled = () => {
* setIsDisabled( ( state ) => ! state );
* };
*
* return (
* <div>
* { input }
* <Button variant="primary" onClick={ toggleDisabled }>
* Toggle Disabled
* </Button>
* </div>
* );
* };
* ```
*/
function Disabled({
className,
children,
isDisabled = true,
...props
}) {
const cx = useCx();
return createElement(Provider, {
value: isDisabled
}, createElement("div", {
// @ts-ignore Reason: inert is a recent HTML attribute
inert: isDisabled ? 'true' : undefined,
className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined,
...props
}, children));
}
Disabled.Context = Context;
Disabled.Consumer = Consumer;
export default Disabled;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["createContext","disabledStyles","useCx","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","cx","createElement","value","inert","undefined"],"sources":["@wordpress/components/src/disabled/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { disabledStyles } from './styles/disabled-styles';\nimport type { DisabledProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useCx } from '../utils';\n\nconst Context = createContext< boolean >( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n * \tlet input = <TextControl label=\"Input\" onChange={ () => {} } />;\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled( {\n\tclassName,\n\tchildren,\n\tisDisabled = true,\n\t...props\n}: WordPressComponentProps< DisabledProps, 'div' > ) {\n\tconst cx = useCx();\n\n\treturn (\n\t\t<Provider value={ isDisabled }>\n\t\t\t<div\n\t\t\t\t// @ts-ignore Reason: inert is a recent HTML attribute\n\t\t\t\tinert={ isDisabled ? 'true' : undefined }\n\t\t\t\tclassName={\n\t\t\t\t\tisDisabled\n\t\t\t\t\t\t? cx( disabledStyles, className, 'components-disabled' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,cAAc,QAAQ,0BAA0B;AAGzD,SAASC,KAAK,QAAQ,UAAU;AAEhC,MAAMC,OAAO,GAAGH,aAAa,CAAa,KAAM,CAAC;AACjD,MAAM;EAAEI,QAAQ;EAAEC;AAAS,CAAC,GAAGF,OAAO;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,QAAQA,CAAE;EAClBC,SAAS;EACTC,QAAQ;EACRC,UAAU,GAAG,IAAI;EACjB,GAAGC;AAC6C,CAAC,EAAG;EACpD,MAAMC,EAAE,GAAGT,KAAK,CAAC,CAAC;EAElB,OACCU,aAAA,CAACP,QAAQ;IAACQ,KAAK,EAAGJ;EAAY,GAC7BG,aAAA;IACC;IACAE,KAAK,EAAGL,UAAU,GAAG,MAAM,GAAGM,SAAW;IACzCR,SAAS,EACRE,UAAU,GACPE,EAAE,CAAEV,cAAc,EAAEM,SAAS,EAAE,qBAAsB,CAAC,GACtDQ,SACH;IAAA,GACIL;EAAK,GAERF,QACE,CACI,CAAC;AAEb;AAEAF,QAAQ,CAACH,OAAO,GAAGA,OAAO;AAC1BG,QAAQ,CAACF,QAAQ,GAAGA,QAAQ;AAE5B,eAAeE,QAAQ"}

View File

@@ -0,0 +1,14 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { View } from 'react-native';
function Disabled({
children
}) {
return createElement(View, {
pointerEvents: "none"
}, children);
}
export default Disabled;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","Disabled","children","createElement","pointerEvents"],"sources":["@wordpress/components/src/disabled/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\nfunction Disabled( { children } ) {\n\treturn <View pointerEvents=\"none\">{ children }</View>;\n}\n\nexport default Disabled;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQA,CAAE;EAAEC;AAAS,CAAC,EAAG;EACjC,OAAOC,aAAA,CAACH,IAAI;IAACI,aAAa,EAAC;EAAM,GAAGF,QAAgB,CAAC;AACtD;AAEA,eAAeD,QAAQ"}

View File

@@ -0,0 +1,15 @@
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
import { css } from '@emotion/react';
export const disabledStyles = process.env.NODE_ENV === "production" ? {
name: "u2jump",
styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}"
} : {
name: "iqemdn-disabledStyles",
styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;};label:disabledStyles;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGlzYWJsZWQvc3R5bGVzL2Rpc2FibGVkLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2lDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGlzYWJsZWQvc3R5bGVzL2Rpc2FibGVkLXN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBkaXNhYmxlZFN0eWxlcyA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXHQmOjphZnRlciB7XG5cdFx0Y29udGVudDogJyc7XG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogMDtcblx0XHRyaWdodDogMDtcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0fVxuXG5cdC8vIEFsc28gbWFrZSBuZXN0ZWQgYmxvY2tzIHVuc2VsZWN0YWJsZS5cblx0KiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cbmA7XG4iXX0= */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
//# sourceMappingURL=disabled-styles.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","disabledStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["@wordpress/components/src/disabled/styles/disabled-styles.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\nexport const disabledStyles = css`\n\tposition: relative;\n\tpointer-events: none;\n\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t}\n\n\t// Also make nested blocks unselectable.\n\t* {\n\t\tpointer-events: none;\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,cAAc,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAiB1B"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/disabled/types.ts"],"sourcesContent":["export interface DisabledProps {\n\t/**\n\t * Whether to disable all the descendant fields.\n\t *\n\t * @default true\n\t */\n\tisDisabled?: boolean;\n\n\t/**\n\t * The children elements.\n\t */\n\tchildren: React.ReactNode;\n}\n"],"mappings":""}