@wordpress/components
Version:
UI components for WordPress.
375 lines (360 loc) • 8.99 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LABELS = exports.DEFAULT_VALUES = exports.CUSTOM_VALUE_SETTINGS = exports.ALL_SIDES = void 0;
exports.applyValueToSides = applyValueToSides;
exports.getAllUnitFallback = getAllUnitFallback;
exports.getAllowedSides = getAllowedSides;
exports.getInitialSide = getInitialSide;
exports.getMergedValue = getMergedValue;
exports.getPresetIndexFromValue = getPresetIndexFromValue;
exports.getPresetValueFromIndex = getPresetValueFromIndex;
exports.isValueMixed = isValueMixed;
exports.isValuePreset = isValuePreset;
exports.isValuesDefined = isValuesDefined;
exports.normalizeSides = normalizeSides;
var _i18n = require("@wordpress/i18n");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const CUSTOM_VALUE_SETTINGS = exports.CUSTOM_VALUE_SETTINGS = {
px: {
max: 300,
step: 1
},
'%': {
max: 100,
step: 1
},
vw: {
max: 100,
step: 1
},
vh: {
max: 100,
step: 1
},
em: {
max: 10,
step: 0.1
},
rm: {
max: 10,
step: 0.1
},
svw: {
max: 100,
step: 1
},
lvw: {
max: 100,
step: 1
},
dvw: {
max: 100,
step: 1
},
svh: {
max: 100,
step: 1
},
lvh: {
max: 100,
step: 1
},
dvh: {
max: 100,
step: 1
},
vi: {
max: 100,
step: 1
},
svi: {
max: 100,
step: 1
},
lvi: {
max: 100,
step: 1
},
dvi: {
max: 100,
step: 1
},
vb: {
max: 100,
step: 1
},
svb: {
max: 100,
step: 1
},
lvb: {
max: 100,
step: 1
},
dvb: {
max: 100,
step: 1
},
vmin: {
max: 100,
step: 1
},
svmin: {
max: 100,
step: 1
},
lvmin: {
max: 100,
step: 1
},
dvmin: {
max: 100,
step: 1
},
vmax: {
max: 100,
step: 1
},
svmax: {
max: 100,
step: 1
},
lvmax: {
max: 100,
step: 1
},
dvmax: {
max: 100,
step: 1
}
};
const LABELS = exports.LABELS = {
all: (0, _i18n.__)('All sides'),
top: (0, _i18n.__)('Top side'),
bottom: (0, _i18n.__)('Bottom side'),
left: (0, _i18n.__)('Left side'),
right: (0, _i18n.__)('Right side'),
vertical: (0, _i18n.__)('Top and bottom sides'),
horizontal: (0, _i18n.__)('Left and right sides')
};
const DEFAULT_VALUES = exports.DEFAULT_VALUES = {
top: undefined,
right: undefined,
bottom: undefined,
left: undefined
};
const ALL_SIDES = exports.ALL_SIDES = ['top', 'right', 'bottom', 'left'];
/**
* Gets an items with the most occurrence within an array
* https://stackoverflow.com/a/20762713
*
* @param arr Array of items to check.
* @return The item with the most occurrences.
*/
function mode(arr) {
return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
}
/**
* Gets the merged input value and unit from values data.
*
* @param values Box values.
* @param availableSides Available box sides to evaluate.
*
* @return A value + unit for the 'all' input.
*/
function getMergedValue(values = {}, availableSides = ALL_SIDES) {
const sides = normalizeSides(availableSides);
if (sides.every(side => values[side] === values[sides[0]])) {
return values[sides[0]];
}
return undefined;
}
/**
* Checks if the values are mixed.
*
* @param values Box values.
* @param availableSides Available box sides to evaluate.
* @return Whether the values are mixed.
*/
function isValueMixed(values = {}, availableSides = ALL_SIDES) {
const sides = normalizeSides(availableSides);
return sides.some(side => values[side] !== values[sides[0]]);
}
/**
* Determine the most common unit selection to use as a fallback option.
*
* @param selectedUnits Current unit selections for individual sides.
* @return Most common unit selection.
*/
function getAllUnitFallback(selectedUnits) {
if (!selectedUnits || typeof selectedUnits !== 'object') {
return undefined;
}
const filteredUnits = Object.values(selectedUnits).filter(Boolean);
return mode(filteredUnits);
}
/**
* Checks to determine if values are defined.
*
* @param values Box values.
*
* @return Whether values are mixed.
*/
function isValuesDefined(values) {
return values && Object.values(values).filter(
// Switching units when input is empty causes values only
// containing units. This gives false positive on mixed values
// unless filtered.
value => !!value && /\d/.test(value)).length > 0;
}
/**
* Get initial selected side, factoring in whether the sides are linked,
* and whether the vertical / horizontal directions are grouped via splitOnAxis.
*
* @param isLinked Whether the box control's fields are linked.
* @param splitOnAxis Whether splitting by horizontal or vertical axis.
* @return The initial side.
*/
function getInitialSide(isLinked, splitOnAxis) {
let initialSide = 'all';
if (!isLinked) {
initialSide = splitOnAxis ? 'vertical' : 'top';
}
return initialSide;
}
/**
* Normalizes provided sides configuration to an array containing only top,
* right, bottom and left. This essentially just maps `horizontal` or `vertical`
* to their appropriate sides to facilitate correctly determining value for
* all input control.
*
* @param sides Available sides for box control.
* @return Normalized sides configuration.
*/
function normalizeSides(sides) {
const filteredSides = [];
if (!sides?.length) {
return ALL_SIDES;
}
if (sides.includes('vertical')) {
filteredSides.push(...['top', 'bottom']);
} else if (sides.includes('horizontal')) {
filteredSides.push(...['left', 'right']);
} else {
const newSides = ALL_SIDES.filter(side => sides.includes(side));
filteredSides.push(...newSides);
}
return filteredSides;
}
/**
* Applies a value to an object representing top, right, bottom and left sides
* while taking into account any custom side configuration.
*
* @deprecated
*
* @param currentValues The current values for each side.
* @param newValue The value to apply to the sides object.
* @param sides Array defining valid sides.
*
* @return Object containing the updated values for each side.
*/
function applyValueToSides(currentValues, newValue, sides) {
(0, _deprecated.default)('applyValueToSides', {
since: '6.8',
version: '7.0'
});
const newValues = {
...currentValues
};
if (sides?.length) {
sides.forEach(side => {
if (side === 'vertical') {
newValues.top = newValue;
newValues.bottom = newValue;
} else if (side === 'horizontal') {
newValues.left = newValue;
newValues.right = newValue;
} else {
newValues[side] = newValue;
}
});
} else {
ALL_SIDES.forEach(side => newValues[side] = newValue);
}
return newValues;
}
/**
* Return the allowed sides based on the sides configuration.
*
* @param sides Sides configuration.
* @return Allowed sides.
*/
function getAllowedSides(sides) {
const allowedSides = new Set(!sides ? ALL_SIDES : []);
sides?.forEach(allowedSide => {
if (allowedSide === 'vertical') {
allowedSides.add('top');
allowedSides.add('bottom');
} else if (allowedSide === 'horizontal') {
allowedSides.add('right');
allowedSides.add('left');
} else {
allowedSides.add(allowedSide);
}
});
return allowedSides;
}
/**
* Checks if a value is a preset value.
*
* @param value The value to check.
* @param presetKey The preset key to check against.
* @return Whether the value is a preset value.
*/
function isValuePreset(value, presetKey) {
return value.startsWith(`var:preset|${presetKey}|`);
}
/**
* Returns the index of the preset value in the presets array.
*
* @param value The value to check.
* @param presetKey The preset key to check against.
* @param presets The array of presets to search.
* @return The index of the preset value in the presets array.
*/
function getPresetIndexFromValue(value, presetKey, presets) {
if (!isValuePreset(value, presetKey)) {
return undefined;
}
const match = value.match(new RegExp(`^var:preset\\|${presetKey}\\|(.+)$`));
if (!match) {
return undefined;
}
const slug = match[1];
const index = presets.findIndex(preset => {
return preset.slug === slug;
});
return index !== -1 ? index : undefined;
}
/**
* Returns the preset value from the index.
*
* @param index The index of the preset value in the presets array.
* @param presetKey The preset key to check against.
* @param presets The array of presets to search.
* @return The preset value from the index.
*/
function getPresetValueFromIndex(index, presetKey, presets) {
const preset = presets[index];
return `var:preset|${presetKey}|${preset.slug}`;
}
//# sourceMappingURL=utils.js.map