office-ui-fabric-react#Callout TypeScript Examples
The following examples show how to use
office-ui-fabric-react#Callout.
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: NetworkViewPCF.tsx From NetworkViewPCF with MIT License | 5 votes |
|
render() {
const { vm, width, height } = this.props;
const { fullScreen } = vm;
let correctedWidth = width;
if (!fullScreen) correctedWidth = width - 22;
const { currentLink, currentNode, calloutTarget, serviceProvider } = this.props.vm;
console.debug("NetworkView:render");
// https://github.com/vasturiano/react-force-graph
return (
<>
<Stack
style={{
boxShadow: "inset 0 0 10px #000000",
background: "radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(220,228,236,1) 100%)",
width: correctedWidth,
}}
>
<Stack verticalFill={false} style={{ position: "absolute", zIndex: 99999 }}>
{!vm.errorText && (
<StackItem shrink>
<IconButton onClick={this.onFullScreen} iconProps={{ iconName: "FullScreen" }}></IconButton>
<IconButton onClick={this.zoomToFit} iconProps={{ iconName: "Zoom" }}></IconButton>
</StackItem>
)}
<StackItem styles={{ root: { paddingLeft: 20 } }}>
<LoadProgress vm={vm} />
</StackItem>
{vm.errorText && (
<StackItem shrink styles={{ root: { width: width - 80, padding: 10, margin: 20 } }}>
<MessageBar messageBarType={MessageBarType.blocked} isMultiline={true}>
{vm.errorText}
</MessageBar>
</StackItem>
)}
</Stack>
<ForceGraph2D
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref={this.gref as any}
width={width}
height={height}
graphData={vm.data}
nodeLabel={this.nodeLabel}
nodeCanvasObject={this.renderNode}
linkCanvasObject={this.linkCanvasObject}
enableZoomPanInteraction={true}
onNodeHover={this.onHoverNode}
onNodeClick={this.onNodeClick}
onLinkHover={this.onLinkHover}
onLinkClick={this.onLinkClick}
onZoomEnd={this.onZoomEnd}
/>
</Stack>
{(currentNode || currentLink) && (
<Callout
target={calloutTarget}
onDismiss={this.onCalloutDismiss}
directionalHint={DirectionalHint.bottomCenter}
setInitialFocus={true}
>
<RecordDetails node={currentNode} link={currentLink} serviceProvider={serviceProvider} />
{currentLink &&
currentLink.otherLinks &&
currentLink.otherLinks.map((link, index) => (
<>
<RecordDetails link={link} serviceProvider={serviceProvider} />
</>
))}
</Callout>
)}
</>
);
}
Example #2
| Source File: Progress.tsx From AIPerf with MIT License | 4 votes |
|
render(): React.ReactNode {
const { bestAccuracy } = this.props;
const { isShowLogDrawer, isCalloutVisible, isShowSucceedInfo, info, typeInfo } = this.state;
const count = TRIALS.countStatus();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const stoppedCount = count.get('USER_CANCELED')! + count.get('SYS_CANCELED')! + count.get('EARLY_STOPPED')!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const bar2 = count.get('RUNNING')! + count.get('SUCCEEDED')! + count.get('FAILED')! + stoppedCount;
// support type [0, 1], not 98%
const bar2Percent = bar2 / EXPERIMENT.profile.params.maxTrialNum;
const percent = EXPERIMENT.profile.execDuration / EXPERIMENT.profile.params.maxExecDuration;
const remaining = convertTime(EXPERIMENT.profile.params.maxExecDuration - EXPERIMENT.profile.execDuration);
const maxDuration = convertTime(EXPERIMENT.profile.params.maxExecDuration);
const maxTrialNum = EXPERIMENT.profile.params.maxTrialNum;
const execDuration = convertTime(EXPERIMENT.profile.execDuration);
return (
<Stack className="progress" id="barBack">
<Stack className="basic lineBasic">
<p>Status</p>
<Stack horizontal className="status">
<span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
{
EXPERIMENT.status === 'ERROR'
?
<div>
<div className={styles.buttonArea} ref={(val): any => this.menuButtonElement = val}>
<IconButton
iconProps={{ iconName: 'info' }}
onClick={isCalloutVisible ? this.onDismiss : this.onShow}
/>
</div>
{isCalloutVisible && (
<Callout
className={styles.callout}
ariaLabelledBy={this.labelId}
ariaDescribedBy={this.descriptionId}
role="alertdialog"
gapSpace={0}
target={this.menuButtonElement}
onDismiss={this.onDismiss}
setInitialFocus={true}
>
<div className={styles.header}>
<p className={styles.title} id={this.labelId}>Error</p>
</div>
<div className={styles.inner}>
<p className={styles.subtext} id={this.descriptionId}>
{EXPERIMENT.error}
</p>
<div className={styles.actions}>
<Link className={styles.link} onClick={this.isShowDrawer}>
Learn about
</Link>
</div>
</div>
</Callout>
)}
</div>
:
null
}
</Stack>
</Stack>
<ProgressBar
who="Duration"
percent={percent}
description={execDuration}
bgclass={EXPERIMENT.status}
maxString={`Max duration: ${maxDuration}`}
/>
<ProgressBar
who="Trial numbers"
percent={bar2Percent}
description={bar2.toString()}
bgclass={EXPERIMENT.status}
maxString={`Max trial number: ${maxTrialNum}`}
/>
<Stack className="basic colorOfbasic mess" horizontal>
<StackItem grow={50}>
<p>Best metric</p>
<div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
</StackItem>
<StackItem>
{isShowSucceedInfo && <MessageInfo className="info" typeInfo={typeInfo} info={info} />}
</StackItem>
</Stack>
<Stack horizontal horizontalAlign="space-between" className="mess">
<span style={itemStyles} className="basic colorOfbasic">
<p>Spent</p>
<div>{execDuration}</div>
</span>
<span style={itemStyles} className="basic colorOfbasic">
<p>Remaining</p>
<div className="time">{remaining}</div>
</span>
<span style={itemStyles}>
{/* modify concurrency */}
<TooltipHost content={CONCURRENCYTOOLTIP}>
<p className="cursor">Concurrency<span className="progress-info">{infoIcon}</span></p>
</TooltipHost>
<ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
</span>
<span style={itemStyles} className="basic colorOfbasic"></span>
</Stack>
<Stack horizontal horizontalAlign="space-between" className="mess">
<div style={itemStyles} className="basic colorOfbasic">
<p>Running</p>
<div>{count.get('RUNNING')}</div>
</div>
<div style={itemStyles} className="basic colorOfbasic">
<p>Succeeded</p>
<div>{count.get('SUCCEEDED')}</div>
</div>
<div style={itemStyles} className="basic">
<p>Stopped</p>
<div>{stoppedCount}</div>
</div>
<div style={itemStyles} className="basic">
<p>Failed</p>
<div>{count.get('FAILED')}</div>
</div>
</Stack>
{/* learn about click -> default active key is dispatcher. */}
{isShowLogDrawer ? (
<LogDrawer
closeDrawer={this.closeDrawer}
activeTab="dispatcher"
/>
) : null}
</Stack>
);
}
Example #3
| Source File: RulesView.tsx From website with MIT License | 4 votes |
|
Rules = () => {
const theme = useTheme();
const locale = LocalizationService.strings();
var language: string | undefined = LocalizationService.getLanguage();
const icon: IIconProps = { iconName: 'QandA' };
const rulesData: Rule[] = getRules();
const imageProperties = { display: 'inline-block', width: '100%' };
const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
const buttonId = useId('callout-button');
const styles = mergeStyleSets({
callout: {
maxWidth: 800,
padding: '20px 24px',
marginLeft: '5px',
marginRight: '15px'
},
button: {
width: 'auto',
height: 'auto',
borderRadius: 3
},
});
return (
<div className="rules pb-3">
<div className="pt-5 pb-5 mb-4" style={{ backgroundColor: theme.palette.themePrimary }}>
<Container>
<Row>
<Col lg={4} className="text-center">
<div style={{ marginLeft: 'auto', marginRight: 'auto', maxWidth: 300 }}>
<Image id="logo" className="mb-2" src={process.env.PUBLIC_URL + '/images/rules.png'} style={imageProperties} />
</div>
</Col>
<Col lg={8}>
<div className="mb-2">
<Text variant="xLargePlus" style={{color: theme.palette.white}}>{locale?.rules.text1}</Text>
</div>
<div className="mb-3">
<Text variant="large" style={{ color: theme.palette.white }}>{locale?.rules.text2}</Text>
</div>
<div className="mb-3">
<DefaultButton
id={buttonId}
onClick={toggleIsCalloutVisible}
text={locale?.rules.question}
className={styles.button}
iconProps={icon}
theme={theme}
style={{ boxShadow: theme.effects.elevation8 }}
/>
{isCalloutVisible && (
<Callout
className={styles.callout}
role="alertdialog"
gapSpace={3}
target={`#${buttonId}`}
onDismiss={toggleIsCalloutVisible}
directionalHint={DirectionalHint.bottomCenter}
setInitialFocus
>
<Text block variant="medium" className="mb-1" styles={semibold}>{locale?.rules.answer.text1}</Text>
<Text block variant="small"><JsxParser bindings={{ theme: theme }} components={{ Text, Link }} jsx={locale?.rules.answer.text2} /></Text>
</Callout>
)}
</div>
<div>
<Text variant="medium" style={{ color: theme.palette.white }}><i>{locale?.rules.text3}</i></Text>
</div>
</Col>
</Row>
</Container>
</div>
<div className="mb-4">
<div className="mb-4 text-center">
<Text variant="xLarge">{locale?.rules.header}</Text>
</div>
</div>
<div className="mb-3">
<Container>
{
rulesData.map((x, i) => {
return (
<Accordion style={{ backgroundColor: theme.palette.white, color: theme.palette.black, boxShadow: theme.effects.elevation8, marginRight: 10, marginLeft: 10 }} key={i}>
<AccordionSummary
expandIcon={<ExpandMoreIcon style={{ color: theme.palette.black }} />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Text variant="medium" style={{ color: theme.palette.themePrimary }} styles={semibold}>{x.title![language!]}</Text>
</AccordionSummary>
<AccordionDetails>
<Text variant="medium">
<JsxParser bindings={{ theme: theme, semibold: semibold }} components={{ Text, Link }} jsx={x.description![language!]} />
</Text>
</AccordionDetails>
</Accordion>
)
})
}
</Container>
</div>
</div>
)
}
