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