From c2ef6c3f9278113833125f6105e105aa424e7c57 Mon Sep 17 00:00:00 2001 From: atomiks Date: Sun, 22 Mar 2020 22:51:57 +1100 Subject: [PATCH] chore: upgrade to Prettier 2 --- .prettierrc.json | 1 - build/index.js | 8 +- package-lock.json | 6 +- package.json | 2 +- src/addons/createSingleton.ts | 10 +- src/addons/delegate.ts | 8 +- src/createTippy.ts | 50 ++++---- src/dom-utils.ts | 16 +-- src/index.ts | 8 +- src/plugins/animateFill.ts | 2 +- src/plugins/inlinePositioning.ts | 12 +- src/plugins/sticky.ts | 2 +- src/props.ts | 22 ++-- src/template.ts | 12 +- src/types.ts | 12 +- src/utils.ts | 6 +- src/validation.ts | 4 +- test/functional/followCursor.test.js | 10 +- test/functional/inlinePositioning.test.js | 2 +- test/image-reporter.js | 8 +- .../addons/createSingleton.test.js | 10 +- test/integration/addons/delegate.test.js | 22 ++-- test/integration/createTippy.test.js | 8 +- test/integration/plugins/animateFill.test.js | 8 +- test/integration/plugins/followCursor.test.js | 12 +- test/integration/props.test.js | 54 ++++---- test/setup.js | 2 +- test/unit/css.test.js | 6 +- test/unit/dom-utils.test.js | 6 +- test/unit/props.test.js | 14 +- test/unit/tippy.test.js | 20 +-- test/unit/utils.test.js | 4 +- test/unit/validation.test.js | 6 +- test/utils.js | 4 +- test/visual/index.js | 6 +- test/visual/tests.js | 36 +++--- website/gatsby-node.js | 2 +- website/scripts/should-deploy-docs.js | 10 +- website/src/components/ElasticScroll.js | 6 +- website/src/components/Framework.js | 24 ++-- website/src/components/Image.js | 4 +- website/src/components/Layout.js | 12 +- website/src/components/Nav.js | 20 +-- website/src/components/NavButtons.js | 4 +- website/src/components/SEO.js | 4 +- website/src/components/TippyTransition.js | 8 +- .../components/examples/ImageTransition.js | 4 +- website/src/components/examples/Singleton.js | 4 +- .../src/components/examples/TextTransition.js | 2 +- website/src/pages/index.mdx | 32 ++--- website/src/pages/v5/addons.mdx | 14 +- website/src/pages/v5/ajax.mdx | 22 ++-- website/src/pages/v5/animations.mdx | 10 +- website/src/pages/v5/creating-tooltips.mdx | 4 +- website/src/pages/v5/customizing-tooltips.mdx | 4 +- website/src/pages/v5/faq.mdx | 20 +-- website/src/pages/v5/html-content.mdx | 8 +- website/src/pages/v5/lifecycle-hooks.mdx | 22 ++-- website/src/pages/v5/methods.mdx | 2 +- website/src/pages/v5/misc.mdx | 14 +- website/src/pages/v5/plugins.mdx | 25 ++-- website/src/pages/v5/themes.mdx | 8 +- website/src/pages/v6/addons.mdx | 12 +- website/src/pages/v6/ajax.mdx | 22 ++-- website/src/pages/v6/all-props.mdx | 120 +++++++++--------- website/src/pages/v6/animations.mdx | 10 +- website/src/pages/v6/creation.mdx | 2 +- website/src/pages/v6/customization.mdx | 4 +- website/src/pages/v6/faq.mdx | 20 +-- website/src/pages/v6/headless-tippy.mdx | 6 +- website/src/pages/v6/html-content.mdx | 8 +- website/src/pages/v6/methods.mdx | 2 +- website/src/pages/v6/misc.mdx | 18 +-- website/src/pages/v6/plugins.mdx | 16 +-- website/src/pages/v6/themes.mdx | 10 +- website/src/utils.js | 4 +- 76 files changed, 478 insertions(+), 484 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index 0f44ac735..4926d6b70 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,6 +1,5 @@ { "singleQuote": true, "bracketSpacing": false, - "trailingComma": "all", "proseWrap": "always" } diff --git a/build/index.js b/build/index.js index 7a322e1af..c6ebbaa09 100644 --- a/build/index.js +++ b/build/index.js @@ -57,7 +57,7 @@ function createPluginSCSS(output, shouldInjectNodeEnvTheme = false) { processor(css) { return postcss([autoprefixer, cssnano]) .process(css, {from: undefined}) - .then(result => result.css); + .then((result) => result.css); }, }); } @@ -79,8 +79,8 @@ async function build() { const cssConfig = createRollupConfig( `css/${filename}`, PLUGIN_CONFIG.concat( - createPluginSCSS(`./dist/${filename.replace('.js', '.css')}`, true), - ), + createPluginSCSS(`./dist/${filename.replace('.js', '.css')}`, true) + ) ); const cssBundle = await rollup(cssConfig); await cssBundle.write({ @@ -99,7 +99,7 @@ async function build() { const config = createRollupConfig( `${folder}/${filename}`, - PLUGIN_CONFIG.concat(createPluginSCSS(outputFile)), + PLUGIN_CONFIG.concat(createPluginSCSS(outputFile)) ); const bundle = await rollup(config); await bundle.write({ diff --git a/package-lock.json b/package-lock.json index 5a13366ca..bdd44d406 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8767,9 +8767,9 @@ "dev": true }, "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz", + "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==", "dev": true }, "pretty-format": { diff --git a/package.json b/package.json index 3ea58d66d..5afc11741 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "lint-staged": "^9.5.0", "postcss": "^7.0.26", "poster": "0.0.9", - "prettier": "^1.19.1", + "prettier": "^2.0.1", "promise": "^8.0.3", "puppeteer": "^2.1.0", "rimraf": "^3.0.0", diff --git a/src/addons/createSingleton.ts b/src/addons/createSingleton.ts index 147bf731d..d77ae23ae 100644 --- a/src/addons/createSingleton.ts +++ b/src/addons/createSingleton.ts @@ -6,7 +6,7 @@ import {errorWhen} from '../validation'; const createSingleton: CreateSingleton = ( tippyInstances, - optionalProps = {}, + optionalProps = {} ) => { /* istanbul ignore else */ if (__DEV__) { @@ -16,23 +16,23 @@ const createSingleton: CreateSingleton = ( 'The first argument passed to createSingleton() must be an array of', 'tippy instances. The passed value was', String(tippyInstances), - ].join(' '), + ].join(' ') ); } - tippyInstances.forEach(instance => { + tippyInstances.forEach((instance) => { instance.disable(); }); let currentTarget: Element; - const references = tippyInstances.map(instance => instance.reference); + const references = tippyInstances.map((instance) => instance.reference); const singleton: Plugin = { fn() { return { onDestroy(): void { - tippyInstances.forEach(instance => { + tippyInstances.forEach((instance) => { instance.enable(); }); }, diff --git a/src/addons/delegate.ts b/src/addons/delegate.ts index 623f08b97..feb0a580d 100644 --- a/src/addons/delegate.ts +++ b/src/addons/delegate.ts @@ -17,7 +17,7 @@ const BUBBLING_EVENTS_MAP = { */ function delegate( targets: Targets, - props: Partial & {target: string}, + props: Partial & {target: string} ): Instance | Instance[] { /* istanbul ignore else */ if (__DEV__) { @@ -26,7 +26,7 @@ function delegate( [ 'You must specity a `target` prop indicating a CSS selector string matching', 'the target elements that should receive a tippy.', - ].join(' '), + ].join(' ') ); } @@ -83,7 +83,7 @@ function delegate( node: Element, eventType: string, handler: EventListener, - options: object | boolean = false, + options: object | boolean = false ): void { node.addEventListener(eventType, handler, options); listeners.push({node, eventType, handler, options}); @@ -108,7 +108,7 @@ function delegate( const originalDestroy = instance.destroy; instance.destroy = (shouldDestroyChildInstances = true): void => { if (shouldDestroyChildInstances) { - childTippyInstances.forEach(instance => { + childTippyInstances.forEach((instance) => { instance.destroy(); }); } diff --git a/src/createTippy.ts b/src/createTippy.ts index dbc5d9a76..f97b16244 100644 --- a/src/createTippy.ts +++ b/src/createTippy.ts @@ -42,7 +42,7 @@ export let mountedInstances: Instance[] = []; export default function createTippy( reference: ReferenceElement, - passedProps: Partial, + passedProps: Partial ): Instance { const props = evaluateProps(reference, { ...defaultProps, @@ -130,7 +130,7 @@ export default function createTippy( reference._tippy = instance; popper._tippy = instance; - const pluginsHooks = plugins.map(plugin => plugin.fn(instance)); + const pluginsHooks = plugins.map((plugin) => plugin.fn(instance)); const hasAriaExpanded = reference.hasAttribute('aria-expanded'); addListeners(); @@ -151,7 +151,7 @@ export default function createTippy( } }); - popper.addEventListener('mouseleave', event => { + popper.addEventListener('mouseleave', (event) => { if ( instance.props.interactive && instance.props.trigger.indexOf('mouseenter') >= 0 @@ -203,7 +203,7 @@ export default function createTippy( return getValueAtIndexOrReturn( instance.props.delay, isShow ? 0 : 1, - defaultProps.delay, + defaultProps.delay ); } @@ -221,9 +221,9 @@ export default function createTippy( function invokeHook( hook: keyof LifecycleHooks, args: [Instance, any?], - shouldInvokePropsHook = true, + shouldInvokePropsHook = true ): void { - pluginsHooks.forEach(pluginHooks => { + pluginsHooks.forEach((pluginHooks) => { if (pluginHooks[hook]) { pluginHooks[hook]!(...args); } @@ -245,7 +245,7 @@ export default function createTippy( const id = popper.id; const nodes = normalizeToArray(instance.props.triggerTarget || reference); - nodes.forEach(node => { + nodes.forEach((node) => { const currentValue = node.getAttribute(attr); if (instance.state.isVisible) { @@ -269,13 +269,13 @@ export default function createTippy( const nodes = normalizeToArray(instance.props.triggerTarget || reference); - nodes.forEach(node => { + nodes.forEach((node) => { if (instance.props.interactive) { node.setAttribute( 'aria-expanded', instance.state.isVisible && node === getCurrentTarget() ? 'true' - : 'false', + : 'false' ); } else { node.removeAttribute('aria-expanded'); @@ -287,7 +287,7 @@ export default function createTippy( doc.body.removeEventListener('mouseleave', scheduleHide); doc.removeEventListener('mousemove', debouncedOnMouseMove); mouseMoveListeners = mouseMoveListeners.filter( - listener => listener !== debouncedOnMouseMove, + (listener) => listener !== debouncedOnMouseMove ); } @@ -387,10 +387,10 @@ export default function createTippy( function on( eventType: string, handler: EventListener, - options: boolean | object = false, + options: boolean | object = false ): void { const nodes = normalizeToArray(instance.props.triggerTarget || reference); - nodes.forEach(node => { + nodes.forEach((node) => { node.addEventListener(eventType, handler, options); listeners.push({node, eventType, handler, options}); }); @@ -402,7 +402,7 @@ export default function createTippy( on('touchend', onMouseLeave as EventListener, PASSIVE); } - splitBySpaces(instance.props.trigger).forEach(eventType => { + splitBySpaces(instance.props.trigger).forEach((eventType) => { if (eventType === 'manual') { return; } @@ -451,7 +451,7 @@ export default function createTippy( // over a new target, but `mousemove` events don't get fired. This // causes interactive tooltips to get stuck open until the cursor is // moved - mouseMoveListeners.forEach(listener => listener(event)); + mouseMoveListeners.forEach((listener) => listener(event)); } // Toggle show/hide when clicking click-triggered tooltips @@ -497,7 +497,7 @@ export default function createTippy( const popperTreeData = getNestedPopperTree() .concat(popper) - .map(popper => { + .map((popper) => { const instance = popper._tippy!; const state = instance.popperInstance?.state; @@ -592,7 +592,7 @@ export default function createTippy( if (getIsDefaultRenderFn()) { const {box} = getDefaultTemplateChildren(); - ['placement', 'reference-hidden', 'escaped'].forEach(attr => { + ['placement', 'reference-hidden', 'escaped'].forEach((attr) => { if (attr === 'placement') { box.setAttribute('data-placement', state.placement); } else { @@ -717,14 +717,14 @@ export default function createTippy( 'keyboard navigation.', '\n\n', 'See: https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity', - ].join(' '), + ].join(' ') ); } } function getNestedPopperTree(): PopperElement[] { return arrayFrom( - popper.querySelectorAll('[data-__NAMESPACE_PREFIX__-root]'), + popper.querySelectorAll('[data-__NAMESPACE_PREFIX__-root]') ); } @@ -838,13 +838,13 @@ export default function createTippy( cleanupInteractiveMouseListeners(); debouncedOnMouseMove = debounce( onMouseMove, - nextProps.interactiveDebounce, + nextProps.interactiveDebounce ); } // Ensure stale aria-expanded attributes are removed if (prevProps.triggerTarget && !nextProps.triggerTarget) { - normalizeToArray(prevProps.triggerTarget).forEach(node => { + normalizeToArray(prevProps.triggerTarget).forEach((node) => { node.removeAttribute('aria-expanded'); }); } else if (nextProps.triggerTarget) { @@ -865,7 +865,7 @@ export default function createTippy( // and the nested ones get re-rendered first. // https://github.com/atomiks/tippyjs-react/issues/177 // TODO: find a cleaner / more efficient solution(!) - getNestedPopperTree().forEach(nestedPopper => { + getNestedPopperTree().forEach((nestedPopper) => { // React (and other UI libs likely) requires a rAF wrapper as it flushes // its work in one requestAnimationFrame(nestedPopper._tippy!.popperInstance!.forceUpdate); @@ -894,7 +894,7 @@ export default function createTippy( const duration = getValueAtIndexOrReturn( instance.props.duration, 0, - defaultProps.duration, + defaultProps.duration ); if ( @@ -990,7 +990,7 @@ export default function createTippy( const duration = getValueAtIndexOrReturn( instance.props.duration, 1, - defaultProps.duration, + defaultProps.duration ); if (isAlreadyHidden || isDestroyed || isDisabled) { @@ -1049,7 +1049,7 @@ export default function createTippy( // If a popper is not interactive, it will be appended outside the popper // tree by default. This seems mainly for interactive tippies, but we should // find a workaround if possible - getNestedPopperTree().forEach(nestedPopper => { + getNestedPopperTree().forEach((nestedPopper) => { nestedPopper._tippy!.unmount(); }); @@ -1057,7 +1057,7 @@ export default function createTippy( popper.parentNode.removeChild(popper); } - mountedInstances = mountedInstances.filter(i => i !== instance); + mountedInstances = mountedInstances.filter((i) => i !== instance); if (mountedInstances.length === 0) { updateIOSClass(false); diff --git a/src/dom-utils.ts b/src/dom-utils.ts index b508bb192..247017313 100644 --- a/src/dom-utils.ts +++ b/src/dom-utils.ts @@ -40,9 +40,9 @@ export function getArrayOfElements(value: Targets): Element[] { export function setTransitionDuration( els: (HTMLDivElement | null)[], - value: number, + value: number ): void { - els.forEach(el => { + els.forEach((el) => { if (el) { el.style.transitionDuration = `${value}ms`; } @@ -51,9 +51,9 @@ export function setTransitionDuration( export function setVisibilityState( els: (HTMLDivElement | null)[], - state: 'visible' | 'hidden', + state: 'visible' | 'hidden' ): void { - els.forEach(el => { + els.forEach((el) => { if (el) { el.setAttribute('data-state', state); } @@ -61,7 +61,7 @@ export function setVisibilityState( } export function getOwnerDocument( - elementOrElements: Element | Element[], + elementOrElements: Element | Element[] ): Document { const [element] = normalizeToArray(elementOrElements); return element ? element.ownerDocument || document : document; @@ -69,7 +69,7 @@ export function getOwnerDocument( export function isCursorOutsideInteractiveBorder( popperTreeData: PopperTreeData[], - event: MouseEvent, + event: MouseEvent ): boolean { const {clientX, clientY} = event; @@ -103,7 +103,7 @@ export function isCursorOutsideInteractiveBorder( export function updateTransitionEndListener( box: HTMLDivElement, action: 'add' | 'remove', - listener: (event: TransitionEvent) => void, + listener: (event: TransitionEvent) => void ): void { const method = `${action}EventListener` as | 'addEventListener' @@ -111,7 +111,7 @@ export function updateTransitionEndListener( // some browsers apparently support `transition` (unprefixed) but only fire // `webkitTransitionEnd`... - ['transitionend', 'webkitTransitionEnd'].forEach(event => { + ['transitionend', 'webkitTransitionEnd'].forEach((event) => { box[method](event, listener as EventListener); }); } diff --git a/src/index.ts b/src/index.ts index 579454a7a..c7e5b53db 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,7 +9,7 @@ import {validateTargets, warnWhen} from './validation'; function tippy( targets: Targets, - optionalProps: Partial = {}, + optionalProps: Partial = {} ): Instance | Instance[] { const plugins = defaultProps.plugins.concat(optionalProps.plugins || []); @@ -41,7 +41,7 @@ function tippy( '\n\n', '1) content: element.innerHTML\n', '2) content: () => element.cloneNode(true)', - ].join(' '), + ].join(' ') ); } @@ -55,7 +55,7 @@ function tippy( return acc; }, - [], + [] ); return isElement(targets) ? instances[0] : instances; @@ -71,7 +71,7 @@ export const hideAll: HideAll = ({ exclude: excludedReferenceOrInstance, duration, }: HideAllOptions = {}) => { - mountedInstances.forEach(instance => { + mountedInstances.forEach((instance) => { let isExcluded = false; if (excludedReferenceOrInstance) { diff --git a/src/plugins/animateFill.ts b/src/plugins/animateFill.ts index 63902609f..5acb79efe 100644 --- a/src/plugins/animateFill.ts +++ b/src/plugins/animateFill.ts @@ -13,7 +13,7 @@ const animateFill: AnimateFill = { if (__DEV__) { errorWhen( instance.props.animateFill, - 'The `animateFill` plugin requires the default render function.', + 'The `animateFill` plugin requires the default render function.' ); } diff --git a/src/plugins/inlinePositioning.ts b/src/plugins/inlinePositioning.ts index 74dfd36cb..b6c59186e 100644 --- a/src/plugins/inlinePositioning.ts +++ b/src/plugins/inlinePositioning.ts @@ -38,7 +38,7 @@ const inlinePositioning: InlinePositioning = { return getInlineBoundingClientRect( getBasePlacement(placement), reference.getBoundingClientRect(), - arrayFrom(reference.getClientRects()), + arrayFrom(reference.getClientRects()) ); } @@ -63,7 +63,7 @@ export default inlinePositioning; export function getInlineBoundingClientRect( currentBasePlacement: BasePlacement | null, boundingRect: ClientRect, - clientRects: ClientRect[], + clientRects: ClientRect[] ): ClientRect { // Not an inline element, or placement is not yet known if (clientRects.length < 2 || currentBasePlacement === null) { @@ -88,12 +88,12 @@ export function getInlineBoundingClientRect( } case 'left': case 'right': { - const minLeft = Math.min(...clientRects.map(rects => rects.left)); - const maxRight = Math.max(...clientRects.map(rects => rects.right)); - const measureRects = clientRects.filter(rect => + const minLeft = Math.min(...clientRects.map((rects) => rects.left)); + const maxRight = Math.max(...clientRects.map((rects) => rects.right)); + const measureRects = clientRects.filter((rect) => currentBasePlacement === 'left' ? rect.left === minLeft - : rect.right === maxRight, + : rect.right === maxRight ); const top = measureRects[0].top; diff --git a/src/plugins/sticky.ts b/src/plugins/sticky.ts index 5a00ce1c0..3c2045e14 100644 --- a/src/plugins/sticky.ts +++ b/src/plugins/sticky.ts @@ -59,7 +59,7 @@ export default sticky; function areRectsDifferent( rectA: ClientRect | null, - rectB: ClientRect | null, + rectB: ClientRect | null ): boolean { if (rectA && rectB) { return ( diff --git a/src/props.ts b/src/props.ts index ee7eb69ce..dc1d55e56 100644 --- a/src/props.ts +++ b/src/props.ts @@ -68,20 +68,20 @@ export const defaultProps: DefaultProps = { const defaultKeys = Object.keys(defaultProps); -export const setDefaultProps: Tippy['setDefaultProps'] = partialProps => { +export const setDefaultProps: Tippy['setDefaultProps'] = (partialProps) => { /* istanbul ignore else */ if (__DEV__) { validateProps(partialProps, []); } const keys = Object.keys(partialProps) as Array; - keys.forEach(key => { + keys.forEach((key) => { (defaultProps as any)[key] = partialProps[key]; }); }; export function getExtendedPassedProps( - passedProps: Partial & Record, + passedProps: Partial & Record ): Partial { const plugins = passedProps.plugins || []; const pluginProps = plugins.reduce>((acc, plugin) => { @@ -103,7 +103,7 @@ export function getExtendedPassedProps( export function getDataAttributeProps( reference: ReferenceElement, - plugins: Plugin[], + plugins: Plugin[] ): Record { const propKeys = plugins ? Object.keys(getExtendedPassedProps({...defaultProps, plugins})) @@ -131,7 +131,7 @@ export function getDataAttributeProps( return acc; }, - {}, + {} ); return props; @@ -139,7 +139,7 @@ export function getDataAttributeProps( export function evaluateProps( reference: ReferenceElement, - props: Props, + props: Props ): Props { const out = { ...props, @@ -170,13 +170,13 @@ export function evaluateProps( export function validateProps( partialProps: Partial = {}, - plugins: Plugin[] = [], + plugins: Plugin[] = [] ): void { const keys = Object.keys(partialProps) as Array; - keys.forEach(prop => { + keys.forEach((prop) => { const nonPluginProps = removeProperties( defaultProps, - Object.keys(pluginProps), + Object.keys(pluginProps) ); let didPassUnknownProp = !hasOwnProperty(nonPluginProps, prop); @@ -184,7 +184,7 @@ export function validateProps( // Check if the prop exists in `plugins` if (didPassUnknownProp) { didPassUnknownProp = - plugins.filter(plugin => plugin.name === prop).length === 0; + plugins.filter((plugin) => plugin.name === prop).length === 0; } warnWhen( @@ -196,7 +196,7 @@ export function validateProps( '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/', - ].join(' '), + ].join(' ') ); }); } diff --git a/src/template.ts b/src/template.ts index 210057ce2..dd939ae04 100644 --- a/src/template.ts +++ b/src/template.ts @@ -54,18 +54,20 @@ export function getChildren(popper: PopperElement): PopperChildren { return { box, - content: boxChildren.find(node => node.classList.contains(CONTENT_CLASS)), + content: boxChildren.find((node) => node.classList.contains(CONTENT_CLASS)), arrow: boxChildren.find( - node => + (node) => node.classList.contains(ARROW_CLASS) || - node.classList.contains(SVG_ARROW_CLASS), + node.classList.contains(SVG_ARROW_CLASS) + ), + backdrop: boxChildren.find((node) => + node.classList.contains(BACKDROP_CLASS) ), - backdrop: boxChildren.find(node => node.classList.contains(BACKDROP_CLASS)), }; } export function render( - instance: Instance, + instance: Instance ): { popper: PopperElement; onUpdate?: (prevProps: Props, nextProps: Props) => void; diff --git a/src/types.ts b/src/types.ts index 5fea722d5..aa5bd1e46 100644 --- a/src/types.ts +++ b/src/types.ts @@ -23,11 +23,11 @@ export interface PopperElement extends HTMLDivElement { export interface LifecycleHooks { onAfterUpdate( instance: Instance, - partialProps: Partial, + partialProps: Partial ): void; onBeforeUpdate( instance: Instance, - partialProps: Partial, + partialProps: Partial ): void; onCreate(instance: Instance): void; onDestroy(instance: Instance): void; @@ -87,7 +87,7 @@ export interface Props extends LifecycleHooks, RenderProps { popperOptions: Partial; render: | (( - instance: Instance, + instance: Instance ) => { popper: PopperElement; onUpdate?: (prevProps: Props, nextProps: Props) => void; @@ -158,20 +158,20 @@ export interface DelegateInstance extends Instance { export interface Delegate { ( targets: SingleTarget, - props: Partial & {target: string}, + props: Partial & {target: string} ): DelegateInstance; } export interface Delegate { ( targets: MultipleTargets, - props: Partial & {target: string}, + props: Partial & {target: string} ): DelegateInstance[]; } export type CreateSingleton = ( tippyInstances: Instance[], - optionalProps?: Partial & {overrides?: Array}, + optionalProps?: Partial & {overrides?: Array} ) => Instance; declare const delegate: Delegate; diff --git a/src/utils.ts b/src/utils.ts index 1d7140903..05aa0fb04 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -7,7 +7,7 @@ export function hasOwnProperty(obj: object, key: string): boolean { export function getValueAtIndexOrReturn( value: T | [T | null, T | null], index: number, - defaultValue: T | [T, T], + defaultValue: T | [T, T] ): T { if (Array.isArray(value)) { const v = value[index]; @@ -32,7 +32,7 @@ export function invokeWithArgsOrReturn(value: any, args: any[]): any { export function debounce( fn: (arg: T) => void, - ms: number, + ms: number ): (arg: T) => void { // Avoid wrapping in `setTimeout` if ms is 0 anyway if (ms === 0) { @@ -51,7 +51,7 @@ export function debounce( export function removeProperties(obj: T, keys: string[]): Partial { const clone = {...obj}; - keys.forEach(key => { + keys.forEach((key) => { delete (clone as any)[key]; }); return clone; diff --git a/src/validation.ts b/src/validation.ts index d56eda8d7..d4b290497 100644 --- a/src/validation.ts +++ b/src/validation.ts @@ -78,7 +78,7 @@ export function validateTargets(targets: Targets): void { '`' + String(targets) + '`', 'as its targets (first) argument. Valid types are: String, Element,', 'Element[], or NodeList.', - ].join(' '), + ].join(' ') ); errorWhen( @@ -86,6 +86,6 @@ export function validateTargets(targets: Targets): void { [ 'tippy() was passed a plain object which is not supported as an argument', 'for virtual positioning. Use props.getReferenceClientRect instead.', - ].join(' '), + ].join(' ') ); } diff --git a/test/functional/followCursor.test.js b/test/functional/followCursor.test.js index ce01aa7c9..a3fa01a62 100644 --- a/test/functional/followCursor.test.js +++ b/test/functional/followCursor.test.js @@ -18,7 +18,7 @@ describe('followCursor', () => { await navigateToTest(page, 'followCursor'); const reference = await page.$(selector); - const rect = await page.evaluate(ref => { + const rect = await page.evaluate((ref) => { const {top, left} = ref.getBoundingClientRect(); return {top, left}; }, reference); @@ -55,7 +55,7 @@ describe('followCursor', () => { await navigateToTest(page, 'followCursor'); const reference = await page.$(selector); - const rect = await page.evaluate(ref => { + const rect = await page.evaluate((ref) => { const {top, left} = ref.getBoundingClientRect(); return {top, left}; }, reference); @@ -78,7 +78,7 @@ describe('followCursor', () => { await navigateToTest(page, 'followCursor'); const reference = await page.$(selector); - const rect = await page.evaluate(ref => { + const rect = await page.evaluate((ref) => { const {top, left} = ref.getBoundingClientRect(); return {top, left}; }, reference); @@ -101,7 +101,7 @@ describe('followCursor', () => { await navigateToTest(page, 'followCursor'); const reference = await page.$(selector); - const rect = await page.evaluate(ref => { + const rect = await page.evaluate((ref) => { const {top, left} = ref.getBoundingClientRect(); return {top, left}; }, reference); @@ -124,7 +124,7 @@ describe('followCursor', () => { await navigateToTest(page, 'followCursor'); const reference = await page.$(selector); - const rect = await page.evaluate(ref => { + const rect = await page.evaluate((ref) => { const {top, left} = ref.getBoundingClientRect(); return {top, left}; }, reference); diff --git a/test/functional/inlinePositioning.test.js b/test/functional/inlinePositioning.test.js index db3ef0ddd..7c922dc22 100644 --- a/test/functional/inlinePositioning.test.js +++ b/test/functional/inlinePositioning.test.js @@ -12,7 +12,7 @@ describe('inlinePositioning', () => { await navigateToTest(page, 'inlinePositioning'); expect( - await screenshotTest(page, 'inlinePositioning'), + await screenshotTest(page, 'inlinePositioning') ).toMatchImageSnapshot(); }); }); diff --git a/test/image-reporter.js b/test/image-reporter.js index 790a25711..7b8b04c24 100644 --- a/test/image-reporter.js +++ b/test/image-reporter.js @@ -20,9 +20,9 @@ class ImageReporter { testResult.failureMessage.match(/different from snapshot/) ) { const files = fs.readdirSync( - './test/functional/__image_snapshots__/__diff_output__/', + './test/functional/__image_snapshots__/__diff_output__/' ); - files.forEach(async value => { + files.forEach(async (value) => { const file = `./test/functional/__image_snapshots__/__diff_output__/${value}`; poster.post( @@ -38,9 +38,9 @@ class ImageReporter { } console.log( - red(bold(`Uploaded image diff file to ${JSON.parse(data).url}`)), + red(bold(`Uploaded image diff file to ${JSON.parse(data).url}`)) ); - }, + } ); }); } diff --git a/test/integration/addons/createSingleton.test.js b/test/integration/addons/createSingleton.test.js index 89e30ca94..1c768a985 100644 --- a/test/integration/addons/createSingleton.test.js +++ b/test/integration/addons/createSingleton.test.js @@ -32,7 +32,7 @@ describe('createSingleton', () => { it('uses the relevant tippy instance content', () => { const configs = [{content: 'hi'}, {content: 'bye'}]; - const instances = configs.map(props => tippy(h(), props)); + const instances = configs.map((props) => tippy(h(), props)); const singletonInstance = createSingleton(instances); fireEvent.mouseEnter(instances[0].reference); @@ -106,8 +106,8 @@ describe('createSingleton', () => { 'The first argument passed to createSingleton() must be an array of tippy', 'instances. The passed value was', String(null), - ].join(' '), - ), + ].join(' ') + ) ); }); @@ -178,14 +178,14 @@ describe('createSingleton', () => { const tippyInstances = tippy([h(), h()]); const singletonInstance = createSingleton(tippyInstances); singletonInstance.destroy(false); - tippyInstances.forEach(instance => { + tippyInstances.forEach((instance) => { expect(instance.state.isDestroyed).toBe(false); }); }); it('restores original state when destroyed', () => { const tippyInstances = tippy([h(), h()]); - const prevInstanceProps = tippyInstances.map(instance => instance.props); + const prevInstanceProps = tippyInstances.map((instance) => instance.props); const singletonInstance = createSingleton(tippyInstances); singletonInstance.destroy(false); diff --git a/test/integration/addons/delegate.test.js b/test/integration/addons/delegate.test.js index fe78c0304..6a853fc31 100644 --- a/test/integration/addons/delegate.test.js +++ b/test/integration/addons/delegate.test.js @@ -10,7 +10,7 @@ let delegateElement = h(); afterEach(() => { if (instance) { - normalizeToArray(instance).forEach(i => i.destroy()); + normalizeToArray(instance).forEach((i) => i.destroy()); } delegateElement = h(); @@ -49,7 +49,7 @@ describe('delegate', () => { it('handles an array of delegate targets', () => { const refs = [h(), h()]; - refs.forEach(ref => ref.append(document.createElement('button'))); + refs.forEach((ref) => ref.append(document.createElement('button'))); instance = delegate(refs, {target: 'button'}); const button = refs[0].querySelector('button'); @@ -60,7 +60,7 @@ describe('delegate', () => { expect(button._tippy).toBeDefined(); - instance.forEach(instance => instance.destroy()); + instance.forEach((instance) => instance.destroy()); }); it('does not show its own tippy', () => { @@ -86,8 +86,8 @@ describe('delegate', () => { '`' + String(null) + '`', 'as its targets (first) argument. Valid types are: String, Element, Element[],', 'or NodeList.', - ].join(' '), - ), + ].join(' ') + ) ); }); @@ -99,8 +99,8 @@ describe('delegate', () => { [ 'You must specity a `target` prop indicating a CSS selector string matching', 'the target elements that should receive a tippy.', - ].join(' '), - ), + ].join(' ') + ) ); }); @@ -112,8 +112,8 @@ describe('delegate', () => { [ 'You must specity a `target` prop indicating a CSS selector string matching', 'the target elements that should receive a tippy.', - ].join(' '), - ), + ].join(' ') + ) ); }); @@ -151,12 +151,12 @@ describe('delegate', () => { const clickButton = h( 'button', {'data-tippy-trigger': 'click'}, - delegateElement, + delegateElement ); const focusButton = h( 'button', {'data-tippy-trigger': 'focus'}, - delegateElement, + delegateElement ); instance = delegate(delegateElement, { diff --git a/test/integration/createTippy.test.js b/test/integration/createTippy.test.js index 0e6b0e198..ba3dd47f7 100644 --- a/test/integration/createTippy.test.js +++ b/test/integration/createTippy.test.js @@ -155,7 +155,7 @@ describe('createTippy', () => { instance = createTippy(h(), {render: null}); expect(spy).toHaveBeenCalledWith( - ...getFormattedMessage('render() function has not been supplied.'), + ...getFormattedMessage('render() function has not been supplied.') ); }); @@ -166,7 +166,7 @@ describe('createTippy', () => { instance = createTippy(h(), {content: null}); expect(spy).toHaveBeenCalledWith( - ...getFormattedMessage('content has not been supplied.'), + ...getFormattedMessage('content has not been supplied.') ); }); }); @@ -433,13 +433,13 @@ describe('instance.setProps()', () => { instance = createTippy(h(), defaultProps); expect( - instance.popper.querySelector('.__NAMESPACE_PREFIX__-arrow'), + instance.popper.querySelector('.__NAMESPACE_PREFIX__-arrow') ).not.toBeNull(); instance.setProps({arrow: false}); expect( - instance.popper.querySelector('.__NAMESPACE_PREFIX__-arrow'), + instance.popper.querySelector('.__NAMESPACE_PREFIX__-arrow') ).toBeNull(); }); diff --git a/test/integration/plugins/animateFill.test.js b/test/integration/plugins/animateFill.test.js index c8ec0ab85..835d79b4b 100644 --- a/test/integration/plugins/animateFill.test.js +++ b/test/integration/plugins/animateFill.test.js @@ -13,7 +13,7 @@ describe('animateFill', () => { const instance = tippy(ref, {animateFill: true}); expect( - getChildren(instance.popper).box.hasAttribute('data-animatefill'), + getChildren(instance.popper).box.hasAttribute('data-animatefill') ).toBe(true); }); @@ -22,7 +22,7 @@ describe('animateFill', () => { const instance = tippy(ref, {animateFill: false}); expect( - getChildren(instance.popper).box.hasAttribute('data-animatefill'), + getChildren(instance.popper).box.hasAttribute('data-animatefill') ).toBe(false); }); @@ -89,8 +89,8 @@ describe('animateFill', () => { expect(spy).toHaveBeenCalledWith( ...getFormattedMessage( - 'The `animateFill` plugin requires the default render function.', - ), + 'The `animateFill` plugin requires the default render function.' + ) ); }); diff --git a/test/integration/plugins/followCursor.test.js b/test/integration/plugins/followCursor.test.js index 47a2be27c..ec4219616 100644 --- a/test/integration/plugins/followCursor.test.js +++ b/test/integration/plugins/followCursor.test.js @@ -28,7 +28,7 @@ describe('followCursor', () => { function matches(receivedRect) { const isVerticalPlacement = ['top', 'bottom'].includes( - getBasePlacement(instance.popperInstance.state.placement), + getBasePlacement(instance.popperInstance.state.placement) ); expect(rect.left).toBe(receivedRect.left); @@ -38,7 +38,7 @@ describe('followCursor', () => { } it('true: follows both axes', () => { - placements.forEach(placement => { + placements.forEach((placement) => { instance = tippy(h(), {followCursor: true, placement}); fireEvent.mouseEnter(instance.reference, defaultPosition); @@ -66,7 +66,7 @@ describe('followCursor', () => { }); it('"horizontal": follows x-axis', () => { - placements.forEach(placement => { + placements.forEach((placement) => { instance = tippy(h(), { followCursor: 'horizontal', placement, @@ -100,7 +100,7 @@ describe('followCursor', () => { }); it('"vertical": follows y-axis', () => { - placements.forEach(placement => { + placements.forEach((placement) => { instance = tippy(h(), {followCursor: 'vertical', placement}); const referenceRect = instance.reference.getBoundingClientRect(); @@ -131,12 +131,12 @@ describe('followCursor', () => { }); it('"initial": only follows once', () => { - placements.forEach(placement => { + placements.forEach((placement) => { instance = tippy(h(), {followCursor: 'initial', placement}); // lastMouseMove event is used in this case instance.reference.dispatchEvent( - new MouseEvent('mouseenter', {...first}), + new MouseEvent('mouseenter', {...first}) ); jest.runAllTimers(); diff --git a/test/integration/props.test.js b/test/integration/props.test.js index bf9d5229d..016e02c21 100644 --- a/test/integration/props.test.js +++ b/test/integration/props.test.js @@ -57,7 +57,7 @@ describe('aria', () => { jest.runAllTimers(); expect(instance.reference.getAttribute('aria-describedby')).toBe( - `__NAMESPACE_PREFIX__-${instance.id}`, + `__NAMESPACE_PREFIX__-${instance.id}` ); }); @@ -70,7 +70,7 @@ describe('aria', () => { jest.runAllTimers(); expect(instance.reference.getAttribute('aria-labelledby')).toBe( - `__NAMESPACE_PREFIX__-${instance.id}`, + `__NAMESPACE_PREFIX__-${instance.id}` ); }); @@ -303,7 +303,7 @@ describe('getReferenceClientRect', () => { jest.runAllTimers(); expect( - instance.popperInstance.state.elements.reference.getBoundingClientRect, + instance.popperInstance.state.elements.reference.getBoundingClientRect ).toBe(getBoundingClientRect); }); @@ -314,7 +314,7 @@ describe('getReferenceClientRect', () => { jest.runAllTimers(); expect(instance.popperInstance.state.elements.reference).toBe( - instance.reference, + instance.reference ); }); }); @@ -598,8 +598,8 @@ describe('interactive', () => { 'keyboard navigation.', '\n\n', 'See: https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity', - ].join(' '), - ), + ].join(' ') + ) ); instance.reference.parentNode.removeChild(inbetweenNode); @@ -667,8 +667,8 @@ describe('moveTransition', () => { expect( instance.popperInstance.state.options.modifiers.find( - modifier => modifier.name === 'computeStyles', - ).options.adaptive, + (modifier) => modifier.name === 'computeStyles' + ).options.adaptive ).toBe(false); }); }); @@ -682,8 +682,8 @@ describe('offset', () => { expect( instance.popperInstance.state.options.modifiers.find( - modifier => modifier.name === 'offset', - ).options.offset, + (modifier) => modifier.name === 'offset' + ).options.offset ).toEqual([5, 20]); }); }); @@ -876,7 +876,7 @@ describe('onTrigger', () => { expect(onTrigger).toHaveBeenCalledTimes(1); expect(onTrigger).toHaveBeenCalledWith( instance, - new MouseEvent('mouseenter'), + new MouseEvent('mouseenter') ); }); }); @@ -900,7 +900,7 @@ describe('onTrigger', () => { expect(onUntrigger).toHaveBeenCalledTimes(1); expect(onUntrigger).toHaveBeenCalledWith( instance, - new MouseEvent('mouseleave'), + new MouseEvent('mouseleave') ); }); }); @@ -1234,7 +1234,7 @@ describe('animation', () => { const instance = tippy(h(), {animation: 'anything'}); expect( - getChildren(instance.popper).box.getAttribute('data-animation'), + getChildren(instance.popper).box.getAttribute('data-animation') ).toBe('anything'); }); }); @@ -1245,7 +1245,7 @@ describe('allowHTML', () => { const instance = tippy(h(), {content: 'hello', allowHTML: true}); expect(getChildren(instance.popper).content.querySelector('b')).not.toBe( - null, + null ); }); }); @@ -1255,7 +1255,7 @@ describe('allowHTML', () => { const instance = tippy(h(), {content: 'hello', allowHTML: false}); expect(getChildren(instance.popper).content.querySelector('b')).toBe( - null, + null ); }); }); @@ -1266,7 +1266,7 @@ describe('inertia', () => { const instance = tippy(h(), {inertia: true}); expect(getChildren(instance.popper).box.hasAttribute('data-inertia')).toBe( - true, + true ); }); @@ -1274,13 +1274,13 @@ describe('inertia', () => { const instance = tippy(h(), {inertia: false}); expect(getChildren(instance.popper).box.hasAttribute('data-inertia')).toBe( - false, + false ); instance.setProps({inertia: true}); expect(getChildren(instance.popper).box.hasAttribute('data-inertia')).toBe( - true, + true ); }); }); @@ -1307,10 +1307,10 @@ describe('arrow', () => { const instance = tippy(h(), {arrow: ''}); expect(getChildren(instance.popper).arrow.className).toBe( - '__NAMESPACE_PREFIX__-svg-arrow', + '__NAMESPACE_PREFIX__-svg-arrow' ); expect(getChildren(instance.popper).arrow.querySelector('svg')).not.toBe( - null, + null ); }); }); @@ -1321,10 +1321,10 @@ describe('arrow', () => { }); expect(getChildren(instance.popper).arrow.className).toBe( - '__NAMESPACE_PREFIX__-svg-arrow', + '__NAMESPACE_PREFIX__-svg-arrow' ); expect(getChildren(instance.popper).arrow.querySelector('svg')).not.toBe( - null, + null ); }); @@ -1342,7 +1342,7 @@ describe('arrow', () => { instance.setProps({arrow: ''}); expect(getChildren(instance.popper).arrow.querySelector('path')).not.toBe( - undefined, + undefined ); }); }); @@ -1359,7 +1359,7 @@ describe('content', () => { const instance = tippy(h(), {content: 'hello'}); expect(getChildren(instance.popper).content.innerHTML).not.toBe( - 'hello', + 'hello' ); }); }); @@ -1370,7 +1370,7 @@ describe('content', () => { const instance = tippy(h(), {content}); expect(getChildren(instance.popper).content.firstElementChild).toBe( - content, + content ); }); }); @@ -1460,7 +1460,7 @@ describe('theme', () => { const instance = tippy(h(), {theme: 'a bunch of themes'}); expect(getChildren(instance.popper).box.getAttribute('data-theme')).toBe( - 'a bunch of themes', + 'a bunch of themes' ); }); @@ -1468,7 +1468,7 @@ describe('theme', () => { const instance = tippy(h(), {theme: null}); expect(getChildren(instance.popper).box.hasAttribute('data-theme')).toBe( - false, + false ); }); }); diff --git a/test/setup.js b/test/setup.js index 7e12a38ca..339990da9 100644 --- a/test/setup.js +++ b/test/setup.js @@ -19,7 +19,7 @@ jest.useFakeTimers(); // We want to use macrotask timers that can be mocked by Jest global.Promise = require('promise'); -global.requestAnimationFrame = cb => cb(); +global.requestAnimationFrame = (cb) => cb(); // Prevents console from spamming test output while still allowing for debugging // while writing tests diff --git a/test/unit/css.test.js b/test/unit/css.test.js index d2525d2cd..29145b55b 100644 --- a/test/unit/css.test.js +++ b/test/unit/css.test.js @@ -13,7 +13,7 @@ describe('injectCSS', () => { injectCSS(styles); const stylesheet = document.head.querySelector( - '[data-__NAMESPACE_PREFIX__-stylesheet]', + '[data-__NAMESPACE_PREFIX__-stylesheet]' ); expect(stylesheet).not.toBe(null); @@ -28,7 +28,7 @@ describe('injectCSS', () => { injectCSS(styles); const stylesheet = document.head.querySelector( - '[data-__NAMESPACE_PREFIX__-stylesheet]', + '[data-__NAMESPACE_PREFIX__-stylesheet]' ); expect(document.head.children[1]).toBe(stylesheet); @@ -42,7 +42,7 @@ describe('injectCSS', () => { injectCSS(styles); const stylesheet = document.head.querySelector( - '[data-__NAMESPACE_PREFIX__-stylesheet]', + '[data-__NAMESPACE_PREFIX__-stylesheet]' ); expect(document.head.children[1]).toBe(stylesheet); diff --git a/test/unit/dom-utils.test.js b/test/unit/dom-utils.test.js index 0bdc88138..052b2e6d2 100644 --- a/test/unit/dom-utils.test.js +++ b/test/unit/dom-utils.test.js @@ -16,7 +16,7 @@ describe('getArrayOfElements', () => { it('returns an array of elements when given a valid selector string', () => { [...Array(10)].map(() => h()); const allAreElements = DomUtils.getArrayOfElements(IDENTIFIER).every( - value => value instanceof Element, + (value) => value instanceof Element ); expect(allAreElements).toBe(true); }); @@ -39,7 +39,7 @@ describe('getArrayOfElements', () => { it('returns an array if given a NodeList', () => { const ref = h(); const arr = DomUtils.getArrayOfElements( - document.querySelectorAll(`.${IDENTIFIER}`), + document.querySelectorAll(`.${IDENTIFIER}`) ); expect(arr[0]).toBe(ref); @@ -88,7 +88,7 @@ describe('isReferenceElement', () => { const instance = tippy(h()); expect(DomUtils.isReferenceElement(document.createElement('div'))).toBe( - false, + false ); expect(DomUtils.isReferenceElement(instance.reference)).toBe(true); expect(DomUtils.isReferenceElement(instance.popper)).toBe(false); diff --git a/test/unit/props.test.js b/test/unit/props.test.js index b673c7f17..3ae85686a 100644 --- a/test/unit/props.test.js +++ b/test/unit/props.test.js @@ -23,7 +23,7 @@ describe('getDataAttributeProps', () => { ref.setAttribute('data-tippy-content', '3333333333333333333333333'); expect(getDataAttributeProps(ref).content).toBe( - '3333333333333333333333333', + '3333333333333333333333333' ); }); @@ -124,8 +124,8 @@ describe('validateProps', () => { '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/', - ].join(' '), - ), + ].join(' ') + ) ); }); @@ -143,8 +143,8 @@ describe('validateProps', () => { '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/', - ].join(' '), - ), + ].join(' ') + ) ); console.warn.mockClear(); @@ -167,8 +167,8 @@ describe('validateProps', () => { '\n\n', 'All props: https://atomiks.github.io/tippyjs/v6/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/v6/plugins/', - ].join(' '), - ), + ].join(' ') + ) ); console.warn.mockClear(); diff --git a/test/unit/tippy.test.js b/test/unit/tippy.test.js index 76d64ce8e..0582a71b9 100644 --- a/test/unit/tippy.test.js +++ b/test/unit/tippy.test.js @@ -35,8 +35,8 @@ describe('tippy', () => { '`' + String(null) + '`', 'as its targets (first) argument. Valid types are: String, Element, Element[],', 'or NodeList.', - ].join(' '), - ), + ].join(' ') + ) ); }); @@ -57,8 +57,8 @@ describe('tippy', () => { '\n\n', '1) content: element.innerHTML\n', '2) content: () => element.cloneNode(true)', - ].join(' '), - ), + ].join(' ') + ) ); }); }); @@ -81,7 +81,7 @@ describe('hideAll()', () => { jest.runAllTimers(); hideAll(); - instances.forEach(instance => { + instances.forEach((instance) => { expect(instance.state.isVisible).toBe(false); }); }); @@ -93,7 +93,7 @@ describe('hideAll()', () => { jest.runAllTimers(); hideAll({duration: 0}); - instances.forEach(instance => { + instances.forEach((instance) => { expect(instance.state.isMounted).toBe(false); }); }); @@ -105,9 +105,9 @@ describe('hideAll()', () => { jest.runAllTimers(); hideAll({exclude: instances[0]}); - instances.forEach(instance => { + instances.forEach((instance) => { expect(instance.state.isVisible).toBe( - instance === instances[0] ? true : false, + instance === instances[0] ? true : false ); }); }); @@ -121,10 +121,10 @@ describe('hideAll()', () => { hideAll({exclude: ref}); const instances = [...document.querySelectorAll(POPPER_SELECTOR)].map( - popper => popper._tippy, + (popper) => popper._tippy ); - instances.forEach(instance => { + instances.forEach((instance) => { expect(instance.state.isVisible).toBe(true); }); }); diff --git a/test/unit/utils.test.js b/test/unit/utils.test.js index c8d16e468..440906aeb 100644 --- a/test/unit/utils.test.js +++ b/test/unit/utils.test.js @@ -103,8 +103,8 @@ describe('isType', () => { expect( Utils.isType( document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - 'Element', - ), + 'Element' + ) ).toBe(true); expect(Utils.isType({}, 'Element')).toBe(false); expect(Utils.isType('button', 'Element')).toBe(false); diff --git a/test/unit/validation.test.js b/test/unit/validation.test.js index 57d845ec1..81b90b2f8 100644 --- a/test/unit/validation.test.js +++ b/test/unit/validation.test.js @@ -3,7 +3,7 @@ import {validateTargets, getFormattedMessage} from '../../src/validation'; describe('validateTargets', () => { it('recognizes a falsy target', () => { const falsys = [null, undefined, false, NaN, 0, '']; - falsys.forEach(falsy => { + falsys.forEach((falsy) => { validateTargets(falsy); expect(console.error).toHaveBeenCalledWith( @@ -13,8 +13,8 @@ describe('validateTargets', () => { '`' + String(falsy) + '`', 'as its targets (first) argument. Valid types are: String, Element, Element[],', 'or NodeList.', - ].join(' '), - ), + ].join(' ') + ) ); }); }); diff --git a/test/utils.js b/test/utils.js index 0b3d25dd7..03da106e6 100644 --- a/test/utils.js +++ b/test/utils.js @@ -48,7 +48,7 @@ export async function screenshotTest(page, name) { `, }); - const rect = await page.evaluate(selector => { + const rect = await page.evaluate((selector) => { const element = document.querySelector(selector); const {x, y, width, height} = element.getBoundingClientRect(); return {left: x, top: y, width, height, id: element.id}; @@ -66,5 +66,5 @@ export async function screenshotTest(page, name) { } export async function navigateToTest(page, name) { - return page.$eval(`button[data-id="${name}"]`, el => el.click()); + return page.$eval(`button[data-id="${name}"]`, (el) => el.click()); } diff --git a/test/visual/index.js b/test/visual/index.js index d62d41dd1..0d8398640 100644 --- a/test/visual/index.js +++ b/test/visual/index.js @@ -1,6 +1,6 @@ const containers = document.querySelectorAll('.container'); -containers.forEach(container => { +containers.forEach((container) => { const button = document.createElement('button'); button.textContent = container.id; @@ -24,7 +24,7 @@ containers.forEach(container => { function hide() { const container = document.getElementById(state.currentTest); const button = document.querySelector( - `button[data-id="${state.currentTest}"]`, + `button[data-id="${state.currentTest}"]` ); if (container) { @@ -36,7 +36,7 @@ function hide() { function show() { const container = document.getElementById(state.currentTest); const button = document.querySelector( - `button[data-id="${state.currentTest}"]`, + `button[data-id="${state.currentTest}"]` ); if (container) { diff --git a/test/visual/tests.js b/test/visual/tests.js index a5d749faf..1d1bcce7c 100644 --- a/test/visual/tests.js +++ b/test/visual/tests.js @@ -78,7 +78,7 @@ tests.sticky = () => { tests.inlinePositioning = () => { const instances = []; - ['top', 'right', 'bottom', 'left'].forEach(placement => { + ['top', 'right', 'bottom', 'left'].forEach((placement) => { const [instance] = tippy('#inlinePositioning .reference', { placement, content: 'tippy', @@ -94,7 +94,7 @@ tests.inlinePositioning = () => { }); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); }; }; @@ -102,7 +102,7 @@ tests.followCursor = () => { const instances = []; [true, false, 'vertical', 'horizontal', 'initial', 'contentChange'].forEach( - test => { + (test) => { let interval; const [instance] = tippy(`#followCursor [data-test="${test}"]`, { @@ -132,11 +132,11 @@ tests.followCursor = () => { }); instances.push(instance); - }, + } ); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); }; }; @@ -149,13 +149,13 @@ tests.themes = () => { const container = document.querySelector('#themes .wrapper'); - themes.forEach(theme => { + themes.forEach((theme) => { const heading = document.createElement('h3'); heading.textContent = theme; container.appendChild(heading); - placements.forEach(placement => { - arrows.forEach(arrow => { + placements.forEach((placement) => { + arrows.forEach((arrow) => { const button = document.createElement('button'); button.textContent = 'ref'; button.style.margin = '0 5px'; @@ -178,7 +178,7 @@ tests.themes = () => { }); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); container.innerHTML = ''; }; }; @@ -190,14 +190,14 @@ tests.animations = () => { ['shift-away', 'shift-toward', 'scale', 'perspective'].reduce( (acc, animation) => acc.concat(animation, `${animation}-subtle`, `${animation}-extreme`), - [], - ), + [] + ) ); const placements = ['top', 'bottom', 'left', 'right']; const container = document.querySelector('#animations .wrapper'); - animations.forEach(animation => { - placements.forEach(placement => { + animations.forEach((animation) => { + placements.forEach((placement) => { const button = document.createElement('button'); button.textContent = animation; container.appendChild(button); @@ -213,7 +213,7 @@ tests.animations = () => { }); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); container.innerHTML = ''; }; }; @@ -229,7 +229,7 @@ tests.createSingleton = () => { }); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); singleton.destroy(); }; }; @@ -237,7 +237,7 @@ tests.createSingleton = () => { tests.animateFill = () => { const instances = []; - ['top', 'right', 'bottom', 'left'].forEach(placement => { + ['top', 'right', 'bottom', 'left'].forEach((placement) => { const [instance] = tippy('#animateFill .reference', { placement, content: 'Tippy', @@ -249,7 +249,7 @@ tests.animateFill = () => { }); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); }; }; @@ -297,6 +297,6 @@ tests.border = () => { ].flat(); return () => { - instances.forEach(instance => instance.destroy()); + instances.forEach((instance) => instance.destroy()); }; }; diff --git a/website/gatsby-node.js b/website/gatsby-node.js index c1229b6e4..5317b5eca 100644 --- a/website/gatsby-node.js +++ b/website/gatsby-node.js @@ -20,7 +20,7 @@ exports.createPages = ({graphql, actions}) => { 'motivation', ]; - paths.forEach(path => { + paths.forEach((path) => { createRedirect({ fromPath: `/${path}/`, toPath: `/v5/${path}/`, diff --git a/website/scripts/should-deploy-docs.js b/website/scripts/should-deploy-docs.js index 6d160afbe..383494a18 100644 --- a/website/scripts/should-deploy-docs.js +++ b/website/scripts/should-deploy-docs.js @@ -27,7 +27,7 @@ if (TRAVIS_COMMIT_RANGE) { } const commitList = execSync( - `git rev-list ${COMMIT_RANGE} --oneline`, + `git rev-list ${COMMIT_RANGE} --oneline` ).toString(); console.log(`Commits included in this build:\n${commitList}`); @@ -35,17 +35,17 @@ if (TRAVIS_COMMIT_RANGE) { commitMessages = commitList .split('\n') // filter out empty lines - .filter(line => line) + .filter((line) => line) // extract commit message, line should be something like: `dbede8c message` - .map(line => line.slice(8)); + .map((line) => line.slice(8)); } else { commitMessages = [TRAVIS_COMMIT_MESSAGE]; } const DOCS_PREFIXES = ['docs', 'release']; -const shouldDeployDocs = commitMessages.some(message => { - return DOCS_PREFIXES.some(prefix => message.startsWith(`${prefix}: `)); +const shouldDeployDocs = commitMessages.some((message) => { + return DOCS_PREFIXES.some((prefix) => message.startsWith(`${prefix}: `)); }); console.log(`SHOULD_DEPLOY_DOCS=${shouldDeployDocs}`); diff --git a/website/src/components/ElasticScroll.js b/website/src/components/ElasticScroll.js index f993a906b..407128052 100644 --- a/website/src/components/ElasticScroll.js +++ b/website/src/components/ElasticScroll.js @@ -20,14 +20,14 @@ class ElasticScroll extends Component { } render() { - return Children.map(this.props.children, child => + return Children.map(this.props.children, (child) => cloneElement(child, { children: (
{child.props.children}
), - ref: node => { + ref: (node) => { this.scroller = node; const {ref} = child; if (ref) { @@ -38,7 +38,7 @@ class ElasticScroll extends Component { } } }, - }), + }) ); } } diff --git a/website/src/components/Framework.js b/website/src/components/Framework.js index f59e77c29..e4ab030f5 100644 --- a/website/src/components/Framework.js +++ b/website/src/components/Framework.js @@ -23,7 +23,7 @@ export const Center = styled.div` export const Container = styled.div` position: relative; max-width: 800px; - padding: 0 ${props => props.mobilePadding || '16'}px; + padding: 0 ${(props) => props.mobilePadding || '16'}px; margin: 0 auto; ${MEDIA.sm} { @@ -41,20 +41,20 @@ export const Row = styled(({spacing, ...rest}) =>
)` display: flex; flex-wrap: wrap; justify-content: space-between; - margin: 0 -${props => props.spacing || '8'}px; + margin: 0 -${(props) => props.spacing || '8'}px; `; -export const Col = props => { +export const Col = (props) => { const {spacing = 8, base, xs, sm, md, lg, xl, ...rest} = props; const mediaCss = ['xs', 'sm', 'md', 'lg', 'xl'] - .filter(size => props[size]) + .filter((size) => props[size]) .map( - size => css` + (size) => css` ${MEDIA[size]} { flex-basis: calc(${(100 * props[size]) / 12}% - ${2 * spacing}px); } - `, + ` ); return ( @@ -70,7 +70,7 @@ export const Col = props => { ); }; -export const Link = props => ( +export const Link = (props) => ( ( /> ); -export const ExternalLink = props => ( +export const ExternalLink = (props) => ( ( export const Flex = styled.div` display: flex; - justify-content: ${props => props.justify || 'space-between'}; - align-items: ${props => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'space-between'}; + align-items: ${(props) => props.align || 'center'}; > div { margin-right: 15px; margin-bottom: 15px; - flex: ${props => props.type === 'even' && 1}; + flex: ${(props) => props.type === 'even' && 1}; } `; @@ -124,7 +124,7 @@ export const Button = styled.button` font-weight: 600; padding: 8px 16px; border-radius: 4px; - margin: ${props => (props.marginless ? '0' : '0 8px 8px 0')}; + margin: ${(props) => (props.marginless ? '0' : '0 8px 8px 0')}; transition: background 0.2s, color 0.1s; &:hover { diff --git a/website/src/components/Image.js b/website/src/components/Image.js index 5b3406f38..4f15e9f2f 100644 --- a/website/src/components/Image.js +++ b/website/src/components/Image.js @@ -37,9 +37,9 @@ const Image = ({name}) => ( } } `} - render={data => { + render={(data) => { const image = data.allImageSharp.edges.find( - edge => edge.node.fluid.originalName === name, + (edge) => edge.node.fluid.originalName === name ); return image ? ( diff --git a/website/src/components/Layout.js b/website/src/components/Layout.js index fa81bd3e6..b4eb6f1c9 100644 --- a/website/src/components/Layout.js +++ b/website/src/components/Layout.js @@ -80,7 +80,7 @@ class Heading extends React.Component { let href = [] .concat(this.props.children) - .filter(child => typeof child === 'string') + .filter((child) => typeof child === 'string') .join(' ') .replace(/[^a-zA-Z0-9]/g, '-') .replace(/-+/g, '-') @@ -132,7 +132,7 @@ const components = { Flex, Image, Icon, - a: props => { + a: (props) => { const extendedProps = {...props}; const re = /^(\.\.)?[/#]/.test(props.href); @@ -143,10 +143,10 @@ const components = { return ; }, - h3: props => , - h4: props => , - h5: props => , - h6: props => , + h3: (props) => , + h4: (props) => , + h5: (props) => , + h6: (props) => , pre: class extends React.Component { ref = React.createRef(); diff --git a/website/src/components/Nav.js b/website/src/components/Nav.js index cd01ac657..3f52e20c2 100644 --- a/website/src/components/Nav.js +++ b/website/src/components/Nav.js @@ -11,7 +11,7 @@ import ElasticScroll from './ElasticScroll'; import Tippy from './Tippy'; const Navbar = styled.nav` - display: ${props => (props.isMounted ? 'block' : 'none')}; + display: ${(props) => (props.isMounted ? 'block' : 'none')}; position: fixed; top: 0; bottom: 0; @@ -21,17 +21,17 @@ const Navbar = styled.nav` color: white; overflow-y: auto; z-index: 2; - transform: ${props => + transform: ${(props) => props.isOpen ? 'translate3d(-4%, 0, 0) scaleX(1)' : 'translate3d(-100%, 0, 0) scaleX(0)'}; - transition: transform ${props => (props.isOpen ? '0.55s' : '0.3s')}, + transition: transform ${(props) => (props.isOpen ? '0.55s' : '0.3s')}, visibility 0.2s, opacity 0.8s; - transition-timing-function: ${props => + transition-timing-function: ${(props) => props.isOpen ? 'cubic-bezier(.165, 1.3, 0.4, 1)' : 'ease'}; - visibility: ${props => (props.isOpen ? 'visible' : 'hidden')}; + visibility: ${(props) => (props.isOpen ? 'visible' : 'hidden')}; box-shadow: 4px 0 32px 0 rgba(0, 32, 64, 0.25); - opacity: ${props => (props.isOpen ? 1 : 0)}; + opacity: ${(props) => (props.isOpen ? 1 : 0)}; ${MEDIA.lg} { padding-top: 0; @@ -148,13 +148,13 @@ class Nav extends Component { this.props.close(); }; - handleBlur = e => { + handleBlur = (e) => { if (!e.currentTarget.contains(e.relatedTarget)) { this.props.close(); } }; - handleOutsideClick = e => { + handleOutsideClick = (e) => { if (this.props.isOpen && !this.ref.current.contains(e.target)) { this.props.close(); } @@ -243,7 +243,7 @@ class Nav extends Component {
{ + render={(data) => { return sortActivePages(data.allMdx.edges, location).map( ({node}) => ( @@ -251,7 +251,7 @@ class Nav extends Component { {node.frontmatter.title} - ), + ) ); }} /> diff --git a/website/src/components/NavButtons.js b/website/src/components/NavButtons.js index f8f3df439..457a2f6eb 100644 --- a/website/src/components/NavButtons.js +++ b/website/src/components/NavButtons.js @@ -142,9 +142,9 @@ function NavButtons({next}) { {({location}) => ( { + render={(data) => { const links = sortActivePages(data.allMdx.edges, location).map( - ({node}) => node, + ({node}) => node ); const nextLink = links[next]; const prevLink = next > 1 ? links[next - 2] : null; diff --git a/website/src/components/SEO.js b/website/src/components/SEO.js index 46a3553ac..f53a46048 100644 --- a/website/src/components/SEO.js +++ b/website/src/components/SEO.js @@ -6,7 +6,7 @@ function SEO({title, description, lang, meta, keywords, pageContext}) { return ( { + render={(data) => { const metaDescription = description || data.site.siteMetadata.description; const isIndex = pageContext.frontmatter.title === 'Demo'; @@ -64,7 +64,7 @@ function SEO({title, description, lang, meta, keywords, pageContext}) { name: `keywords`, content: keywords.join(`, `), } - : [], + : [] ) .concat(meta)} /> diff --git a/website/src/components/TippyTransition.js b/website/src/components/TippyTransition.js index 3d89542c7..da7fb497c 100644 --- a/website/src/components/TippyTransition.js +++ b/website/src/components/TippyTransition.js @@ -127,7 +127,7 @@ function TippyTransition({children, onChange}) { tooltip.style.height = `${prevDimensions.height}px`; } - Object.keys(instance.popperChildren).forEach(key => { + Object.keys(instance.popperChildren).forEach((key) => { if (instance.popperChildren[key]) { instance.popperChildren[key].style.transitionDuration = '0ms'; instance.popperChildren[key].style.transitionProperty = @@ -221,19 +221,19 @@ function TippyTransition({children, onChange}) { onCreate(data) { preserveInvocation( child.props.popperOptions && child.props.popperOptions.onCreate, - [data], + [data] ); popperOnCreate(data); }, onUpdate(data) { preserveInvocation( child.props.popperOptions && child.props.popperOptions.onUpdate, - [data], + [data] ); popperOnUpdate(data); }, }), - [child.props.popperOptions], + [child.props.popperOptions] ); return cloneElement(child, { diff --git a/website/src/components/examples/ImageTransition.js b/website/src/components/examples/ImageTransition.js index e27380640..2b94ebb3e 100644 --- a/website/src/components/examples/ImageTransition.js +++ b/website/src/components/examples/ImageTransition.js @@ -14,8 +14,8 @@ function DimensionsTransition() { const imageContainerRef = useRef(); function onClick() { - setExpanded(expanded => !expanded); - setDisplay(display => (display === 'none' ? 'block' : 'none')); + setExpanded((expanded) => !expanded); + setDisplay((display) => (display === 'none' ? 'block' : 'none')); } function onChange(instance) { diff --git a/website/src/components/examples/Singleton.js b/website/src/components/examples/Singleton.js index a4245bb06..43d08ddf0 100644 --- a/website/src/components/examples/Singleton.js +++ b/website/src/components/examples/Singleton.js @@ -29,8 +29,8 @@ function Singleton({group, transition}) { return ( <> {sourceElement} - {Children.map(children, child => - cloneElement(child, {singleton: target}), + {Children.map(children, (child) => + cloneElement(child, {singleton: target}) )} ); diff --git a/website/src/components/examples/TextTransition.js b/website/src/components/examples/TextTransition.js index 9aaac4291..8c182b902 100644 --- a/website/src/components/examples/TextTransition.js +++ b/website/src/components/examples/TextTransition.js @@ -23,7 +23,7 @@ function DimensionsTransition() { const component = useInstance({currentIndex: 0}); function scheduleNextContent() { - const currentIndex = contents.findIndex(c => c === content); + const currentIndex = contents.findIndex((c) => c === content); const nextIndex = currentIndex === contents.length - 1 ? 0 : currentIndex + 1; const nextContent = contents[nextIndex]; diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx index d894cfce7..8a8b81f52 100644 --- a/website/src/pages/index.mdx +++ b/website/src/pages/index.mdx @@ -66,7 +66,7 @@ You can initialize it like so: ```js tippy('#myButton', { - content: "I'm a Tippy tooltip!" + content: "I'm a Tippy tooltip!", }); ``` @@ -99,22 +99,22 @@ Additionally, the tooltip can be shifted along the axis using the suffix modifiers: [ { name: 'flip', - enabled: false + enabled: false, }, { name: 'preventOverflow', options: { altAxis: true, - } - } - ] + }, + }, + ], }} > @@ -306,7 +306,7 @@ These themes are included in the package and can be imported separately. You can apply any CSS to a tippy via a theme. - {['gradient', 'retro', 'forest'].map(theme => ( + {['gradient', 'retro', 'forest'].map((theme) => ( diff --git a/website/src/pages/v5/addons.mdx b/website/src/pages/v5/addons.mdx index 51450aceb..45bd7f0c2 100644 --- a/website/src/pages/v5/addons.mdx +++ b/website/src/pages/v5/addons.mdx @@ -40,7 +40,7 @@ should match the child elements which should receive a tippy. import {delegate} from 'tippy.js'; delegate('#parent', { - target: '.child' + target: '.child', }); ``` @@ -53,11 +53,11 @@ value depending on the type supplied, just like `tippy()`. ```js const delegateInstances = delegate('.parent', { - target: '.child' + target: '.child', }); // Instance[] const delegateInstance = delegate(parentElement, { - target: '.child' + target: '.child', }); // Instance ``` @@ -69,7 +69,7 @@ behavior, pass `false` as an argument: ```js const delegateInstance = delegate(parentElement, { - target: '.child' + target: '.child', }); // Prevents further creation and destroys any created child tippy instances @@ -121,7 +121,7 @@ position updates of the tippy element: ```js const singleton = createSingleton(tippyInstances, { delay: 1000, - updateDuration: 500 + updateDuration: 500, }); ``` @@ -136,7 +136,7 @@ To solve this, constrain the tippy to the viewport: ```js createSingleton(instances, { - boundary: 'viewport' + boundary: 'viewport', }); ``` @@ -152,6 +152,6 @@ const singleton = createSingleton(tippyInstances, { onCreate({popper}) { // Any easing function you want. popper.style.transitionTimingFunction = 'cubic-bezier(...)'; - } + }, }); ``` diff --git a/website/src/pages/v5/ajax.mdx b/website/src/pages/v5/ajax.mdx index 0db4830af..26049c0e8 100644 --- a/website/src/pages/v5/ajax.mdx +++ b/website/src/pages/v5/ajax.mdx @@ -28,7 +28,7 @@ Now, let's add some JavaScript: tippy('#ajax-tippy', { content: 'Loading...', // This prop is recommended if your tooltip changes size while showing - flipOnUpdate: true + flipOnUpdate: true, }); ``` @@ -49,7 +49,7 @@ tippy('#ajax-tippy', { flipOnUpdate: true, onShow(instance) { // Code here is executed every time the tippy shows - } + }, }); ``` @@ -60,8 +60,8 @@ tippy('#ajax-tippy', { // ... onShow(instance) { fetch('https://unsplash.it/200/?random') - .then(response => response.blob()) - .then(blob => { + .then((response) => response.blob()) + .then((blob) => { // Convert the blob into a URL const url = URL.createObjectURL(blob); // Create an image @@ -73,11 +73,11 @@ tippy('#ajax-tippy', { // Update the tippy content with the image instance.setContent(image); }) - .catch(error => { + .catch((error) => { // Fallback if the network request failed instance.setContent(`Request failed. ${error}`); }); - } + }, }); ``` @@ -95,7 +95,7 @@ tippy('#ajax-tippy', { // ... onHidden(instance) { instance.setContent('Loading...'); - } + }, }); ``` @@ -118,13 +118,13 @@ tippy('#ajax-tippy', { instance._isFetching = true; fetch('https://unsplash.it/200/?random') - .then(response => response.blob()) - .then(blob => { + .then((response) => response.blob()) + .then((blob) => { const src = URL.createObjectURL(blob); instance._src = src; // ... }) - .catch(error => { + .catch((error) => { instance._error = error; instance.setContent(`Request failed. ${error}`); }) @@ -137,7 +137,7 @@ tippy('#ajax-tippy', { // Unset these properties so new network requests can be initiated instance._src = null; instance._error = null; - } + }, }); ``` diff --git a/website/src/pages/v5/animations.mdx b/website/src/pages/v5/animations.mdx index 6c7c0648d..81fb9f1ec 100644 --- a/website/src/pages/v5/animations.mdx +++ b/website/src/pages/v5/animations.mdx @@ -28,7 +28,7 @@ Pass the animation name as the `animation` prop: ```js tippy('button', { - animation: 'scale' + animation: 'scale', }); ``` @@ -60,7 +60,7 @@ To create your own animation: ```js tippy('button', { - animation: 'rotate' + animation: 'rotate', }); ``` @@ -71,7 +71,7 @@ tippy, which is a limited CSS-only way to mimic spring physics. ```js tippy('button', { - inertia: true + inertia: true, }); ``` @@ -95,7 +95,7 @@ import 'tippy.js/animations/shift-away.css'; tippy(targets, { animateFill: true, - plugins: [animateFill] + plugins: [animateFill], }); ``` @@ -117,7 +117,7 @@ tippy('button', { const {tooltip} = instance.popperChildren; tooltip.classList.remove('animated'); tooltip.classList.remove('wobble'); - } + }, }); ``` diff --git a/website/src/pages/v5/creating-tooltips.mdx b/website/src/pages/v5/creating-tooltips.mdx index 0d9a9a137..8539d507d 100644 --- a/website/src/pages/v5/creating-tooltips.mdx +++ b/website/src/pages/v5/creating-tooltips.mdx @@ -27,7 +27,7 @@ attribute: ```js tippy('#singleElement', { - content: 'Tooltip' + content: 'Tooltip', }); ``` @@ -45,7 +45,7 @@ unless explicitly sanitizing it: ```js tippy('#singleElement', { content: unsafeUserData, - allowHTML: false + allowHTML: false, }); ``` diff --git a/website/src/pages/v5/customizing-tooltips.mdx b/website/src/pages/v5/customizing-tooltips.mdx index f281f95da..caaa4d36a 100644 --- a/website/src/pages/v5/customizing-tooltips.mdx +++ b/website/src/pages/v5/customizing-tooltips.mdx @@ -11,7 +11,7 @@ a second argument to customize the tooltips being created: tippy('button', { duration: 0, arrow: false, - delay: [1000, 200] + delay: [1000, 200], }); ``` @@ -42,7 +42,7 @@ for individual config here and there: // Global config for all