| @@ -1,28 +1,28 @@ | ||
| 1 | 1 | import { useState } from '@wordpress/element'; |
| 2 | 2 | import { Icon } from '@wordpress/icons'; |
| 3 | 3 | import classNames from 'classnames'; |
| 4 | 4 | import { bannerButtonVariables, buttonHoverClasses, colorsOf } from '../colors'; |
| 5 | +import { ctaActionFor, runCtaAction } from '../cta-action'; | |
| 5 | 6 | import { iconFor } from '../icons'; |
| 6 | 7 | import { externalLinkProps } from '../notification-link'; |
| 7 | -import { publishAndReload, publishesSite } from '../publish-site'; | |
| 8 | 8 | |
| 9 | 9 | export const Pill = ({ notification, href, external, onClick }) => { |
| 10 | 10 | const ctaLabel = notification['cta-label']; |
| 11 | 11 | const icon = iconFor(notification.icon); |
| 12 | 12 | const colors = colorsOf(notification); |
| 13 | - const [publishing, setPublishing] = useState(false); | |
| 14 | - const publishes = publishesSite(notification); | |
| 13 | + const [running, setRunning] = useState(false); | |
| 14 | + const action = ctaActionFor(notification); | |
| 15 | 15 | // Core's admin bar is taller below the md breakpoint; the pill matches it. |
| 16 | 16 | const className = classNames( |
| 17 | 17 | 'inline-flex h-7.5 shrink-0 items-center gap-1 rounded-sm bg-banner-main px-2.5 text-sm leading-none text-banner-text no-underline md:h-6 md:text-[13px]', |
| 18 | - publishing ? 'cursor-not-allowed' : 'cursor-pointer', | |
| 19 | - !publishing && buttonHoverClasses(colors), | |
| 18 | + running ? 'cursor-not-allowed' : 'cursor-pointer', | |
| 19 | + !running && buttonHoverClasses(colors), | |
| 20 | 20 | ); |
| 21 | 21 | // The pill has no room for a spinner, so the reload is the only feedback. |
| 22 | - const publishNow = () => { | |
| 23 | - setPublishing(true); | |
| 24 | - publishAndReload(onClick); | |
| 22 | + const runAction = () => { | |
| 23 | + setRunning(true); | |
| 24 | + runCtaAction(action, onClick); | |
| 25 | 25 | }; |
| 26 | 26 | |
| 27 | 27 | const shared = { |
| 28 | 28 | // Without this the pill has no accessible name where CSS hides the label. |
| @@ -37,15 +37,15 @@ | ||
| 37 | 37 | <span className="ext-notification-pill-label">{ctaLabel}</span> |
| 38 | 38 | </> |
| 39 | 39 | ); |
| 40 | 40 | |
| 41 | - if (publishes) { | |
| 41 | + if (action) { | |
| 42 | 42 | return ( |
| 43 | 43 | <button |
| 44 | 44 | type="button" |
| 45 | - onClick={publishNow} | |
| 46 | - disabled={publishing} | |
| 47 | - aria-busy={publishing} | |
| 45 | + onClick={runAction} | |
| 46 | + disabled={running} | |
| 47 | + aria-busy={running} | |
| 48 | 48 | {...shared} |
| 49 | 49 | > |
| 50 | 50 | {label} |
| 51 | 51 | </button> |
