Browse Source
* Adding survey banner for community * fixing up a kludge for the banner, making the graphic look less like swearing * updating banner start date * make the banner smaller * Close as a button * fixes * Remove the arrow * Updating image sizes, making the arrow do a little slide * Revert "Remove the arrow" This reverts commit 3dddae8108f27178628a38aefd98fdfb60ae09b0. * Remove extra space * Legibility tweaks * Fixing border radius * Making close button a real button * Remove trailing space, plz don't re-add, Prettier * Centering that banner * Modified Survey header styles * Inline Banner content at the usage site * Fix flash by using CSS variables Co-authored-by: Dan Abramov <dan.abramov@me.com> Co-authored-by: Brian Vaughn <bvaughn@fb.com>main
R Nabors
4 years ago
committed by
GitHub
GitHub
12 changed files with 295 additions and 170 deletions
@ -1,14 +0,0 @@ |
|||
/** |
|||
* Copyright (c) Facebook, Inc. and its affiliates. |
|||
* |
|||
* @emails react-core |
|||
* @flow |
|||
*/ |
|||
|
|||
import React from 'react'; |
|||
|
|||
// $FlowFixMe Update Flow
|
|||
export default React.createContext({ |
|||
banner: null, |
|||
dismiss() {}, |
|||
}); |
|||
@ -1,106 +0,0 @@ |
|||
/** |
|||
* Copyright (c) Facebook, Inc. and its affiliates. |
|||
* |
|||
* @emails react-core |
|||
* @flow |
|||
*/ |
|||
|
|||
// $FlowFixMe Update Flow
|
|||
import React, {useState, useLayoutEffect} from 'react'; |
|||
import BannerContext from './BannerContext'; |
|||
|
|||
let activeBanner = null; |
|||
let snoozeStartDate = null; |
|||
const today = new Date(); |
|||
|
|||
function addTimes(date, days) { |
|||
const time = new Date(date); |
|||
time.setDate(time.getDate() + days); |
|||
return time; |
|||
} |
|||
|
|||
// Example usage:
|
|||
// activeBanner = {
|
|||
// storageId: 'react_banner_XX',
|
|||
// normalHeight: 60,
|
|||
// smallHeight: 80,
|
|||
// campaignStartDate: '2020-09-20Z', // the Z is for UTC
|
|||
// campaignEndDate: '2020-10-31Z', // the Z is for UTC
|
|||
// snoozeForDays: 7,
|
|||
// content: dismiss => (
|
|||
// <div>
|
|||
// <a href="test">Test</a> <button onClick={dismiss}>close</button>
|
|||
// </div>
|
|||
// ),
|
|||
// };
|
|||
|
|||
if (activeBanner) { |
|||
try { |
|||
if (localStorage[activeBanner.storageId]) { |
|||
snoozeStartDate = new Date( |
|||
parseInt(localStorage.getItem(activeBanner.storageId), 10), |
|||
); |
|||
} |
|||
} catch (err) { |
|||
// Ignore.
|
|||
} |
|||
|
|||
try { |
|||
// If it's too early or long past the campaign, don't show the banner:
|
|||
if ( |
|||
today < new Date(activeBanner.campaignStartDate) || |
|||
today > new Date(activeBanner.campaignEndDate) |
|||
) { |
|||
activeBanner = null; |
|||
// If we're in the campaign window, but the snooze has been set and it hasn't expired:
|
|||
} else if ( |
|||
snoozeStartDate && |
|||
addTimes(snoozeStartDate, activeBanner.snoozeForDays) >= today |
|||
) { |
|||
activeBanner = null; |
|||
} |
|||
} catch (err) { |
|||
// Ignore.
|
|||
} |
|||
} |
|||
|
|||
type Props = { |
|||
children: mixed, |
|||
}; |
|||
|
|||
export default function BannerContextManager({children}: Props) { |
|||
const [bannerContext, setBannerContext] = useState({ |
|||
banner: null, |
|||
dismiss() {}, |
|||
}); |
|||
|
|||
// Apply after hydration.
|
|||
useLayoutEffect(() => { |
|||
if (activeBanner) { |
|||
let banner = activeBanner; |
|||
setBannerContext({ |
|||
banner, |
|||
dismiss: () => { |
|||
try { |
|||
localStorage.setItem(banner.storageId, Date.now().toString()); |
|||
} catch (err) { |
|||
// Ignore.
|
|||
} |
|||
// Don't show for next navigations within the session.
|
|||
activeBanner = null; |
|||
// Hide immediately.
|
|||
setBannerContext({ |
|||
banner: null, |
|||
dismiss() {}, |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
}, []); |
|||
|
|||
return ( |
|||
<BannerContext.Provider value={bannerContext}> |
|||
{children} |
|||
</BannerContext.Provider> |
|||
); |
|||
} |
|||
|
After Width: | Height: | Size: 278 B |
Loading…
Reference in new issue