react-icons/ai#AiOutlineFullscreen JavaScript Examples
The following examples show how to use
react-icons/ai#AiOutlineFullscreen.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Tree.js From covid19 with MIT License | 6 votes |
|
render() {
const { fullPlot, fullTree, fullTreeToggle, fullDimensions, lang } = this.props
if (fullPlot) return <div />
const FullScreenIcon = fullTree ? AiOutlineFullscreenExit : AiOutlineFullscreen
return (
<div
className="tree-wrap"
style={{
height: !fullTree ? this.state.height : fullDimensions.height - 100,
width: !fullTree ? '100%' : fullDimensions.width + 100
}}
>
<div className="tree-full-button">
<FullScreenIcon size={fullTree ? 30 : 20} onClick={fullTreeToggle} />
</div>
<div className="bubble-table-toggle-btn">
<RadioButton
texts={{ bubble: i18n.BUBBLES[lang], table: i18n.TABLE[lang] }}
selected={this.state.type}
onSelect={(s) => this.setState({ type: s })}
alwaysShow={true}
/>
</div>
{this.state.type === 'bubble' && <BubblePlot {...this.props} />}
{this.state.type === 'table' && <Table {...this.props} />}
</div>
)
}
Example #2
| Source File: Plot.js From covid19 with MIT License | 5 votes |
|
render() {
const { plotType, data, lang, darkMode, fullPlot, fullTree, fullPlotToggle, fullDimensions } = this.props
if (data == null || fullTree) return <div />
const plotParameters = plotSpecificTypes[this.state.plotSpecificType]
const plotDataAll = generatePlotData({
...this.props,
plotSpecificType: this.state.plotSpecificType,
plotDetails: this.state.plotDetails
})
const plotData = plotDataAll.plotData
const isDataEmpty = ![ 'plot_subregion_active_stream', 'plot_subregion_stream' ].includes(plotType)
? plotData.map((d) => d.data.length).reduce((s, x) => s + x, 0) === 0
: plotData.map((d) => Object.keys(d).length).reduce((s, x) => s + x, 0) === 0
const tickValues = isDataEmpty ? 0 : plotDataAll.tickValues != null ? plotDataAll.tickValues : 5
const FullScreenIcon = fullPlot ? AiOutlineFullscreenExit : AiOutlineFullscreen
const plotProps = {
...this.props,
plotParameters,
plotDataAll,
tickValues,
plotTheme: plotTheme(darkMode, fullPlot)
}
return (
<div
className="plot-wrap"
style={{
height: !fullPlot ? 'auto' : fullDimensions.height - 100,
width: !fullPlot ? '100%' : fullDimensions.width + 100
}}
>
<PlotSelector
{...this.props}
{...this.state}
currentPlotType={plotType}
onPlotTypeChange={(plotType) => {
this.setSpecificPlotType(plotType, this.state.plotDetails)
this.props.handlePlotTypeChange(plotType)
}}
/>
<div className="plot-with-nav-bar">
<PlotNavBar {...this.props} {...this.state} onSelect={this.onSelect} />
<div
style={{
height: !fullPlot ? this.state.height : fullDimensions.height - 125,
width: !fullPlot ? '100%' : fullDimensions.width - 70
}}
>
{isDataEmpty ? (
<div className="plot-no-data">
<span>{i18n.NO_DATA[lang]}</span>
</div>
) : (
<div />
)}
{!isDataEmpty && <LinePlot {...plotProps} />}
{!isDataEmpty && <BumpPlot {...plotProps} />}
{!isDataEmpty && <StreamPlot offsetType={this.state.plotDetails.stream} {...plotProps} />}
<div
className="plot-full-button"
data-tip={!fullPlot && !isMobile && !isIPad13 ? i18n.PLOT_SETTINGS[lang] : ''}
>
<FullScreenIcon size={fullPlot ? 30 : 20} onClick={fullPlotToggle} />
</div>
</div>
</div>
</div>
)
}
Example #3
| Source File: Calendar.js From anutimetable with Creative Commons Attribution Share Alike 4.0 International | 4 votes |
|
export default function Calendar({ timetableState }) {
// Set the initial date to max(start of sem, today)
const startOfSemester = getStartOfSession()
const initialDate =
startOfSemester && startOfSemester.getTime() > new Date().getTime()
? startOfSemester
: new Date();
// Where the events are stored
const events = useMemo(() => getEvents(timetableState), [timetableState])
const [startTime, finishTime] = useMemo(() => getLocaleStartFinishTime(events, timetableState.timeZone), [events, timetableState.timeZone])
const [fullScreen, setFullScreen] = useState(false)
useEffect(() => {
const func = () => setFullScreen(!fullScreen)
document.addEventListener('fullscreenchange', func, false);
return () => document.removeEventListener('fullscreenchange', func, false)
}, [fullScreen])
// Handler for calendar to display event content
const getEventContent = useCallback(e => formatEventContent(timetableState, e), [timetableState])
const fullScreenClick = useCallback(() => {
if (fullScreen) document.exitFullscreen()
else document.getElementsByClassName('fc')[0].requestFullscreen()
}, [fullScreen])
return <FullCalendar
plugins={[bootstrapPlugin, dayGridPlugin, timeGridPlugin, listPlugin, rrulePlugin, luxonPlugin]}
themeSystem='bootstrap'
bootstrapFontAwesome={false}
height='100%'
expandRows={true}
eventSources={events}
headerToolbar={{
start: 'prev,next',
center: 'title',
end: 'timeGridDay,timeGridWeek,dayGridMonth,listTwoDay,fullScreen'
}}
buttonText={{
today: 'Today',
prev: 'Back',
next: 'Next',
day: 'Day',
week: 'Week',
month: 'Month'
}}
customButtons={{
fullScreen: {
text: fullScreen ? <AiOutlineFullscreenExit size='1.5em' /> : <AiOutlineFullscreen size='1.5em' />,
hint: fullScreen ? 'Exit FullScreen' : 'Enter FullScreen',
click: fullScreenClick
}
}}
views={{
timeGridDay: {
titleFormat: { year: 'numeric', month: 'short', day: 'numeric' },
eventContent: getEventContent,
},
timeGridWeek: {
weekends: true,
dayHeaderFormat: { weekday: 'short' },
eventContent: getEventContent,
},
listTwoDay: {
type: 'list',
duration: { days: 2 },
buttonText: 'Agenda',
listDayFormat: { weekday: 'long', month: 'short', day: 'numeric' },
displayEventTime: true,
weekends: true,
eventContent: getEventContent,
},
dayGridMonth: {
weekNumberFormat: { week: 'short' }
}
}}
initialView={window.navigator.userAgent.includes('Mobi') ? 'listTwoDay' : 'timeGridWeek'}
initialDate={initialDate}
// timeGrid options
allDaySlot={false}
// Earliest business hour is 8am AEDT
scrollTime={formatDate('2020-01-01T08:00+11:00', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})}
scrollTimeReset={false}
slotLabelClassNames={'slot-label'}
nowIndicator
navLinks
// businessHours={{
// daysOfWeek: [1, 2, 3, 4, 5],
// startTime: '07:00',
// endTime: '19:00'
// }}
displayEventTime={false}
defaultAllDay={false} // allDay=false required for non-string rrule inputs (eg Dates) https://github.com/fullcalendar/fullcalendar/issues/6689
slotEventOverlap={false}
// Week 1 = start of semester
weekNumbers
weekNumberCalculation={weekNumberCalculation}
weekText='Week'
firstDay={timetableState.weekStart}
hiddenDays={timetableState.hiddenDays}
fixedWeekCount={false}
timeZone={timetableState.timeZone}
slotMinTime={startTime}
slotMaxTime={finishTime}
eventSourceFailure={err => console.error(err.message)}
/>
}
Example #4
| Source File: App.js From covid19 with MIT License | 4 votes |
|
render() {
const { lang, dataLoaded, currentMap, fullMap, fullPlot, fullTree, darkMode } = this.state
const fullScreenMode = fullMap ? 'map-full' : fullPlot ? 'plot-full' : fullTree ? 'tree-full' : ''
const FullScreenIcon = fullMap ? AiOutlineFullscreenExit : AiOutlineFullscreen
return (
<div className={`App ${darkMode ? 'dark' : ''}`}>
<Helmet>
<title>{i18n.COVID19[lang]}</title>
</Helmet>
{!dataLoaded ? (
<Loading />
) : (
<Fragment>
<Container className={`app-container ${fullScreenMode}`}>
<Row>
<Col lg={!fullMap ? 7 : 12}>
<div className="header">
<span className="header-icon" style={{ opacity: dataLoaded ? 1 : 0 }}>
<Icon />
</span>
<span
className="header-title"
style={{ letterSpacing: lang === 'zh' ? '1px' : 'normal' }}
>
{i18n.COVID19[lang]}
</span>
</div>
<NavBar
{...this.state}
scaleToggle={this.scaleToggle}
languageToggle={this.languageToggle}
darkModeToggle={this.darkModeToggle}
reset={this.reset}
/>
{!fullPlot &&
!fullTree && (
<Measure
bounds
onResize={(contentRect) => {
this.setState({ mapDimensions: contentRect.bounds })
}}
>
{({ measureRef }) => (
<div
ref={measureRef}
className="map"
style={{
height: !fullMap
? this.state.mapDimensions.width * 3 / 4
: this.state.fullDimensions.height,
width: !fullMap ? '100%' : this.state.fullDimensions.width
}}
>
{currentMap === str.TRANSMISSION && (
<TransmissionNetwork
{...this.state}
regionToggle={this.regionToggle}
tooltipRebuild={this.tooltipRebuild}
/>
)}
{currentMap !== str.TRANSMISSION && (
<Map
{...this.state}
handleMapZoomChange={this.handleMapZoomChange}
mapToggle={this.mapToggle}
regionToggle={this.regionToggle}
tooltipRebuild={this.tooltipRebuild}
/>
)}
<div className="map-full-button">
<FullScreenIcon
size={fullMap ? 30 : 20}
onClick={this.fullMapToggle}
/>
</div>
</div>
)}
</Measure>
)}
<MapNavBar
{...this.state}
mapToggle={this.mapToggle}
metricToggle={this.metricToggle}
regionToggle={this.regionToggle}
/>
<DateSlider
{...this.state}
handleDateChange={this.handleDateChange}
handleTempDateChange={this.handleTempDateChange}
/>
<AnimationController
{...this.state}
handleDateChange={this.handleDateChange}
playingToggle={this.playingToggle}
/>
<div className="footer-white" />
</Col>
{!fullMap && (
<Col lg={!fullPlot && !fullTree ? 5 : 12} className="col-right">
<Row style={{ display: 'flex', flexDirection: 'column', padding: 10 }}>
<Region
{...this.state}
regionToggle={this.regionToggle}
ReactTooltip={ReactTooltip}
/>
<MainCounts {...this.state} />
<Plot
{...this.state}
regionToggle={this.regionToggle}
fullPlotToggle={this.fullPlotToggle}
scaleToggle={this.scaleToggle}
handlePlotTypeChange={this.handlePlotTypeChange}
/>
<Tree
{...this.state}
regionToggle={this.regionToggle}
fullTreeToggle={this.fullTreeToggle}
/>
<div className="footer-placeholder" />
</Row>
</Col>
)}
</Row>
</Container>
<Footer {...this.state} />
</Fragment>
)}
<ReactTooltip className="plot-tooltip" type={darkMode ? 'dark' : 'light'} html={true} />
</div>
)
}
