e8fbfb14c1
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>
99 lines
2.0 KiB
JavaScript
99 lines
2.0 KiB
JavaScript
import { createElement, Fragment } from "react";
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { isRTL } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import RangeMark from './mark';
|
|
import { MarksWrapper, Rail } from './styles/range-control-styles';
|
|
export default function RangeRail(props) {
|
|
const {
|
|
disabled = false,
|
|
marks = false,
|
|
min = 0,
|
|
max = 100,
|
|
step = 1,
|
|
value = 0,
|
|
...restProps
|
|
} = props;
|
|
return createElement(Fragment, null, createElement(Rail, {
|
|
disabled: disabled,
|
|
...restProps
|
|
}), marks && createElement(Marks, {
|
|
disabled: disabled,
|
|
marks: marks,
|
|
min: min,
|
|
max: max,
|
|
step: step,
|
|
value: value
|
|
}));
|
|
}
|
|
function Marks(props) {
|
|
const {
|
|
disabled = false,
|
|
marks = false,
|
|
min = 0,
|
|
max = 100,
|
|
step: stepProp = 1,
|
|
value = 0
|
|
} = props;
|
|
const step = stepProp === 'any' ? 1 : stepProp;
|
|
const marksData = useMarks({
|
|
marks,
|
|
min,
|
|
max,
|
|
step,
|
|
value
|
|
});
|
|
return createElement(MarksWrapper, {
|
|
"aria-hidden": "true",
|
|
className: "components-range-control__marks"
|
|
}, marksData.map(mark => createElement(RangeMark, {
|
|
...mark,
|
|
key: mark.key,
|
|
"aria-hidden": "true",
|
|
disabled: disabled
|
|
})));
|
|
}
|
|
function useMarks({
|
|
marks,
|
|
min = 0,
|
|
max = 100,
|
|
step = 1,
|
|
value = 0
|
|
}) {
|
|
if (!marks) {
|
|
return [];
|
|
}
|
|
const range = max - min;
|
|
if (!Array.isArray(marks)) {
|
|
marks = [];
|
|
const count = 1 + Math.round(range / step);
|
|
while (count > marks.push({
|
|
value: step * marks.length + min
|
|
}));
|
|
}
|
|
const placedMarks = [];
|
|
marks.forEach((mark, index) => {
|
|
if (mark.value < min || mark.value > max) {
|
|
return;
|
|
}
|
|
const key = `mark-${index}`;
|
|
const isFilled = mark.value <= value;
|
|
const offset = `${(mark.value - min) / range * 100}%`;
|
|
const offsetStyle = {
|
|
[isRTL() ? 'right' : 'left']: offset
|
|
};
|
|
placedMarks.push({
|
|
...mark,
|
|
isFilled,
|
|
key,
|
|
style: offsetStyle
|
|
});
|
|
});
|
|
return placedMarks;
|
|
}
|
|
//# sourceMappingURL=rail.js.map
|