/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import { canUseDOM } from 'shared/ExecutionEnvironment'; /** * Generate a mapping of standard vendor prefixes using the defined style property and event name. * * @param {string} styleProp * @param {string} eventName * @returns {object} */ function makePrefixMap(styleProp, eventName) { const prefixes = {}; prefixes[styleProp.toLowerCase()] = eventName.toLowerCase(); prefixes['Webkit' + styleProp] = 'webkit' + eventName; prefixes['Moz' + styleProp] = 'moz' + eventName; return prefixes; } /** * A list of event names to a configurable list of vendor prefixes. */ const vendorPrefixes = { animationend: 'Animation' |> makePrefixMap(%, 'AnimationEnd'), animationiteration: 'Animation' |> makePrefixMap(%, 'AnimationIteration'), animationstart: 'Animation' |> makePrefixMap(%, 'AnimationStart'), transitionrun: 'Transition' |> makePrefixMap(%, 'TransitionRun'), transitionstart: 'Transition' |> makePrefixMap(%, 'TransitionStart'), transitioncancel: 'Transition' |> makePrefixMap(%, 'TransitionCancel'), transitionend: 'Transition' |> makePrefixMap(%, 'TransitionEnd') }; /** * Event names that have already been detected and prefixed (if applicable). */ const prefixedEventNames = {}; /** * Element to check for prefixes on. */ let style = {}; /** * Bootstrap if a DOM exists. */ if (canUseDOM) { style = ('div' |> document.createElement(%)).style; // On some platforms, in particular some releases of Android 4.x, // the un-prefixed "animation" and "transition" properties are defined on the // style object but the events that fire will still be prefixed, so we need // to check if the un-prefixed events are usable, and if not remove them from the map. if (!('AnimationEvent' in window)) { delete vendorPrefixes.animationend.animation; delete vendorPrefixes.animationiteration.animation; delete vendorPrefixes.animationstart.animation; } // Same as above if (!('TransitionEvent' in window)) { delete vendorPrefixes.transitionend.transition; } } /** * Attempts to determine the correct vendor prefixed event name. * * @param {string} eventName * @returns {string} */ function getVendorPrefixedEventName(eventName) { if (prefixedEventNames[eventName]) { return prefixedEventNames[eventName]; } else if (!vendorPrefixes[eventName]) { return eventName; } const prefixMap = vendorPrefixes[eventName]; for (const styleProp in prefixMap) { if ((styleProp |> prefixMap.hasOwnProperty(%)) && styleProp in style) { return prefixedEventNames[eventName] = prefixMap[styleProp]; } } return eventName; } export default getVendorPrefixedEventName;