office-ui-fabric-react#Dialog TypeScript Examples
The following examples show how to use
office-ui-fabric-react#Dialog.
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: ChangeColumnComponent.tsx From AIPerf with MIT License | 6 votes |
|
render(): React.ReactNode {
const { showColumn, isHideDialog } = this.props;
const { userSelectColumnList } = this.state;
const renderOptions: Array<CheckBoxItems> = [];
showColumn.map(item => {
if (userSelectColumnList.includes(item)) {
// selected column name
renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
} else {
renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
}
});
return (
<div>
<Dialog
hidden={isHideDialog} // required field!
dialogContentProps={{
type: DialogType.largeHeader,
title: 'Change table column',
subText: 'You can chose which columns you want to see in the table.'
}}
modalProps={{
isBlocking: false,
styles: { main: { maxWidth: 450 } }
}}
>
<div className="columns-height">
{renderOptions.map(item => {
return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />
})}
</div>
<DialogFooter>
<PrimaryButton text="Save" onClick={this.saveUserSelectColumn} />
<DefaultButton text="Cancel" onClick={this.cancelOption} />
</DialogFooter>
</Dialog>
</div>
);
}
Example #2
| Source File: DeveloperNetwork.tsx From hypertrons-crx with Apache License 2.0 | 4 votes |
|
DeveloperNetworkView: React.FC<DeveloperNetworkViewProps> = ({
currentDeveloper,
graphType,
}) => {
const [developerCollabrationData, setDeveloperCollabrationData] = useState<
IGraphData | undefined
>();
const [participatedProjectsData, setParticipatedProjectsData] = useState<
IGraphData | undefined
>();
const [developerPeriod, setDeveloperPeriod] = useState<
string | number | undefined
>(180);
const [repoPeriod, setRepoPeriod] = useState<string | number | undefined>(
180
);
const [showDeveloperDialog, setShowDeveloperDialog] = useState(false);
const [showProjectDialog, setShowProjectDialog] = useState(false);
const [inited, setInited] = useState(false);
const [settings, setSettings] = useState(new Settings());
const [statusCode, setStatusCode] = useState<number>(200);
// get developercollabration data
useEffect(() => {
const getDeveloperCollabrationData = async () => {
try {
const res = await getDeveloperCollabration(currentDeveloper);
setDeveloperCollabrationData(res.data);
} catch (e) {
// @ts-ignore
setStatusCode(e);
}
};
getDeveloperCollabrationData();
}, [developerPeriod]);
// get participated projects data
useEffect(() => {
const getParticipatedProjectsData = async () => {
try {
const res = await getParticipatedProjects(currentDeveloper);
setParticipatedProjectsData(res.data);
} catch (e) {
// @ts-ignore
setStatusCode(e);
}
};
getParticipatedProjectsData();
}, [repoPeriod]);
useEffect(() => {
const initSettings = async () => {
const temp = await loadSettings();
setSettings(temp);
setInited(true);
};
if (!inited) {
initSettings();
}
}, [inited, settings]);
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: 120 },
};
const periodOptions: IDropdownOption[] = [
{
key: 180,
text: `180 ${getMessageByLocale('global_day', settings.locale)}`,
},
];
const onRenderPeriodDropdownTitle = (
options: IDropdownOption[] | undefined
): JSX.Element => {
const option = options![0];
return (
<div>
<span>{getMessageByLocale('global_period', settings.locale)}: </span>
<span>{option!.text}</span>
</div>
);
};
const onRepoPeriodChange = (
e: any,
option: IDropdownOption | undefined
): void => {
setRepoPeriod(option!.key);
};
const onDeveloperPeriodChange = (
e: any,
option: IDropdownOption | undefined
): void => {
setDeveloperPeriod(option!.key);
};
const dialogProps = {
styles: {
main: {
color: 'var(--color-fg-default)',
backgroundColor: 'var(--color-canvas-default)',
},
title: {
padding: 0,
},
},
};
const graphStyle = {
width: '400px',
height: '380px',
};
if (!developerCollabrationData || !participatedProjectsData) {
return <div />;
}
return (
<div className="border-top color-border-secondary pt-3 mt-3">
<h2 className="h4 mb-2">Perceptor</h2>
<ul className="vcard-details">
<li
className="vcard-detail pt-1 css-truncate css-truncate-target"
style={{ margin: '-5px -30px' }}
>
<ActionButton
iconProps={{ iconName: 'Group' }}
onClick={() => {
setShowDeveloperDialog(true);
}}
>
<span
title={`${getMessageByLocale(
'global_clickToshow',
settings.locale
)} ${getMessageByLocale(
'component_developerCollabrationNetwork_title',
settings.locale
)}`}
className="Label"
style={{
marginLeft: '5px!important',
color: 'var(--color-fg-default)',
}}
>
{getMessageByLocale(
'component_developerCollabrationNetwork_title',
settings.locale
)}
</span>
</ActionButton>
</li>
<li
className="vcard-detail pt-1 css-truncate css-truncate-target"
style={{ margin: '-5px -30px' }}
>
<ActionButton
iconProps={{ iconName: 'BranchMerge' }}
onClick={() => {
setShowProjectDialog(true);
}}
>
<span
title={`${getMessageByLocale(
'global_clickToshow',
settings.locale
)} ${getMessageByLocale(
'component_mostParticipatedProjects_title',
settings.locale
)}`}
className="Label"
style={{
marginLeft: '5px!important',
color: 'var(--color-fg-default)',
}}
>
{getMessageByLocale(
'component_mostParticipatedProjects_title',
settings.locale
)}
</span>
</ActionButton>
</li>
</ul>
<TeachingBubbleWrapper target="#developer-network" />
<Dialog
hidden={!showDeveloperDialog}
onDismiss={() => {
setShowDeveloperDialog(false);
}}
modalProps={dialogProps}
>
{statusCode !== 200 ? (
<ErrorPage errorCode={statusCode} />
) : (
<div>
<Stack className="hypertrons-crx-title">
<span>
{getMessageByLocale(
'component_developerCollabrationNetwork_title',
settings.locale
)}
</span>
<div className="hypertrons-crx-title-extra">
<Dropdown
defaultSelectedKey={developerPeriod}
options={periodOptions}
styles={dropdownStyles}
onRenderTitle={onRenderPeriodDropdownTitle}
onChange={onDeveloperPeriodChange}
/>
</div>
</Stack>
<div className="d-flex flex-wrap flex-items-center">
<div className="col-12 col-md-8">
<div style={{ margin: '10px 0 20px 20px' }}>
<Graph
graphType={graphType}
data={developerCollabrationData!}
style={graphStyle}
focusedNodeID={currentDeveloper}
/>
</div>
</div>
<div className="col-12 col-md-4">
<div
className="color-text-secondary"
style={{ marginLeft: '35px', marginRight: '35px' }}
>
<p>
{getMessageByLocale(
'component_developerCollabrationNetwork_description',
settings.locale
)}
</p>
<ul style={{ margin: '0px 0 10px 15px' }}>
<li>
{getMessageByLocale(
'component_developerCollabrationNetwork_description_node',
settings.locale
)}
</li>
<li>
{getMessageByLocale(
'component_developerCollabrationNetwork_description_edge',
settings.locale
)}
</li>
</ul>
</div>
</div>
</div>
</div>
)}
</Dialog>
<Dialog
hidden={!showProjectDialog}
onDismiss={() => {
setShowProjectDialog(false);
}}
modalProps={dialogProps}
>
{statusCode !== 200 ? (
<ErrorPage errorCode={statusCode} />
) : (
<div>
<Stack className="hypertrons-crx-title">
<span>
{getMessageByLocale(
'component_mostParticipatedProjects_title',
settings.locale
)}
</span>
<div className="hypertrons-crx-title-extra">
<Dropdown
defaultSelectedKey={repoPeriod}
options={periodOptions}
styles={dropdownStyles}
onRenderTitle={onRenderPeriodDropdownTitle}
onChange={onRepoPeriodChange}
/>
</div>
</Stack>
<div className="d-flex flex-wrap flex-items-center">
<div className="col-12 col-md-8">
<div style={{ margin: '10px 0 20px 20px' }}>
<Graph
graphType={graphType}
data={participatedProjectsData!}
style={graphStyle}
/>
</div>
</div>
<div className="col-12 col-md-4">
<div
className="color-text-secondary"
style={{ marginLeft: '35px', marginRight: '35px' }}
>
<p>
{getMessageByLocale(
'component_mostParticipatedProjects_description',
settings.locale
)}
</p>
<ul style={{ margin: '0px 0 10px 15px' }}>
<li>
{getMessageByLocale(
'component_mostParticipatedProjects_description_node',
settings.locale
)}
</li>
<li>
{getMessageByLocale(
'component_mostParticipatedProjects_description_edge',
settings.locale
)}
</li>
</ul>
</div>
</div>
</div>
</div>
)}
</Dialog>
</div>
);
}
Example #3
| Source File: Options.tsx From hypertrons-crx with Apache License 2.0 | 4 votes |
|
Options: React.FC = () => {
const [settings, setSettings] = useState(new Settings());
const [metaData, setMetaData] = useState(new MetaData());
const [inited, setInited] = useState(false);
const [version, setVersion] = useState('0.0.0');
const [checkingUpdate, setCheckingUpdate] = useState(false);
const [token, setToken] = useState('');
const [checkingToken, setCheckingToken] = useState(false);
const [showDialogToken, setShowDialogToken] = useState(false);
const [showDialogTokenError, setShowDialogTokenError] = useState(false);
const [showDialogNotification, setShowDialogNotification] = useState(false);
const [notificationId, setNotificationId] = useState(0);
const [notification, setNotification] = useState('');
const [updateStatus, setUpdateStatus] = useState(UpdateStatus.undefine);
const [updateUrl, setUpdateUrl] = useState(
'https://github.com/hypertrons/hypertrons-crx/releases'
);
const tokenCurrent = metaData.token;
const graphOptions: IChoiceGroupOption[] = [
{
key: 'antv',
text: 'Antv',
},
{
key: 'echarts',
text: 'Echarts',
},
];
const locale = settings.locale;
const localeOptions: IChoiceGroupOption[] = [
{
key: 'en',
text: 'English',
},
{
key: 'zh_CN',
text: '简体中文 (Simplified Chinese)',
},
];
useEffect(() => {
const initMetaData = async () => {
const tempMetaData = await loadMetaData();
setMetaData(tempMetaData);
if (tempMetaData.token !== '') {
setToken(tempMetaData.token);
}
const notificationInformation = await getNotificationInformation();
if (
notificationInformation.is_published &&
tempMetaData.idLastNotication < notificationInformation.id
) {
if (locale === 'zh_CN') {
setNotification(notificationInformation.content.zh);
} else {
setNotification(notificationInformation.content.en);
}
setNotificationId(notificationInformation.id);
setShowDialogNotification(true);
}
};
if (!inited) {
initMetaData();
}
}, [inited, locale, metaData]);
useEffect(() => {
const initSettings = async () => {
const temp = await loadSettings();
setSettings(temp);
setInited(true);
};
if (!inited) {
initSettings();
}
}, [inited, settings]);
const getVersion = async () => {
let version = (await chrome.management.getSelf()).version;
setVersion(version);
};
useEffect(() => {
getVersion();
}, [version]);
const saveSettings = async (settings: Settings) => {
setSettings(settings);
await chromeSet('settings', settings.toJson());
};
const checkUpdateManually = async () => {
setUpdateStatus(UpdateStatus.undefine);
setCheckingUpdate(true);
const [currentVersion, latestVersion, updateUrl] = await checkUpdate();
if (compareVersion(currentVersion, latestVersion) === -1) {
setUpdateUrl(updateUrl);
setUpdateStatus(UpdateStatus.yes);
} else {
setUpdateStatus(UpdateStatus.no);
}
setCheckingUpdate(false);
};
if (!inited) {
return <div />;
}
return (
<Stack>
{showDialogNotification && (
<Dialog
hidden={!showDialogNotification}
onDismiss={() => {
setShowDialogNotification(false);
}}
dialogContentProps={{
type: DialogType.normal,
title: getMessageByLocale(
'global_notificationTitle',
settings.locale
),
}}
modalProps={{
isBlocking: true,
}}
>
<Text variant="mediumPlus">{notification}</Text>
<DialogFooter>
<DefaultButton
onClick={() => {
setShowDialogNotification(false);
}}
>
{getMessageByLocale('global_btn_ok', settings.locale)}
</DefaultButton>
<PrimaryButton
onClick={async () => {
metaData.idLastNotication = notificationId;
setMetaData(metaData);
await chromeSet('meta_data', metaData.toJson());
setShowDialogNotification(false);
}}
>
{getMessageByLocale('global_btn_disable', settings.locale)}
</PrimaryButton>
</DialogFooter>
</Dialog>
)}
{showDialogToken && (
<Dialog
hidden={!showDialogToken}
onDismiss={() => {
setShowDialogToken(false);
}}
dialogContentProps={{
type: DialogType.normal,
title: getMessageByLocale(
'options_token_dialog_title',
settings.locale
),
}}
modalProps={{
isBlocking: true,
}}
>
<p style={{ fontSize: 14, color: '#6a737d', margin: 5 }}>
{getMessageByLocale(
'options_token_dialog_description',
settings.locale
)}
</p>
<Stack horizontal style={{ fontSize: 16, margin: 5 }}>
<Link
href="https://github.com/settings/tokens/new"
target="_blank"
underline
>
{getMessageByLocale(
'options_token_dialog_message',
settings.locale
)}
</Link>
</Stack>
{checkingToken && (
<Spinner
label={getMessageByLocale(
'options_token_dialog_checking',
settings.locale
)}
/>
)}
{showDialogTokenError && (
<MessageBar messageBarType={MessageBarType.error}>
{getMessageByLocale(
'options_token_dialog_error',
settings.locale
)}
</MessageBar>
)}
<Stack
horizontal
horizontalAlign="space-around"
verticalAlign="end"
style={{ margin: '10px' }}
tokens={{
childrenGap: 15,
}}
>
<TextField
style={{ width: '200px' }}
defaultValue={token}
onChange={(e, value) => {
if (value) {
setShowDialogTokenError(false);
setToken(value);
}
}}
/>
<PrimaryButton
disabled={checkingToken}
onClick={async () => {
setCheckingToken(true);
const result = await checkIsTokenAvailabe(token);
setCheckingToken(false);
if ('id' in result) {
metaData.token = token;
metaData.avatar = result['avatar_url'];
metaData.name = result['name'];
metaData.id = result['id'];
setMetaData(metaData);
await chromeSet('meta_data', metaData.toJson());
setShowDialogToken(false);
} else {
setShowDialogTokenError(true);
}
}}
>
{getMessageByLocale('global_btn_ok', settings.locale)}
</PrimaryButton>
</Stack>
{tokenCurrent !== '' && (
<DefaultButton
onClick={async () => {
metaData.token = '';
metaData.avatar = '';
metaData.name = '';
metaData.id = '';
setMetaData(metaData);
await chromeSet('meta_data', metaData.toJson());
setShowDialogToken(false);
}}
style={{
width: 120,
}}
>
{getMessageByLocale('options_token_btn_rmToken', settings.locale)}
</DefaultButton>
)}
</Dialog>
)}
<Stack horizontalAlign="center" style={{ paddingBottom: '10px' }}>
<h1>PERCEPTOR</h1>
<sub>{`version ${version}`}</sub>
</Stack>
<Stack
horizontalAlign="center"
tokens={{
childrenGap: 30,
}}
>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_enable_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_enable_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale('options_enable_toolTip', settings.locale)}.
</p>
<Toggle
label={getMessageByLocale(
'options_enable_toggle_autoCheck',
settings.locale
)}
defaultChecked={settings.isEnabled}
onText={getMessageByLocale(
'global_toggle_onText',
settings.locale
)}
offText={getMessageByLocale(
'global_toggle_offText',
settings.locale
)}
onChange={async (e, checked) => {
settings.isEnabled = checked;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_locale_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_locale_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack style={{ margin: '10px 25px' }}>
<p>
{getMessageByLocale('options_locale_toolTip', settings.locale)} :
</p>
<ChoiceGroup
defaultSelectedKey={settings.locale}
options={localeOptions}
onChange={async (e, option: any) => {
settings.locale = option.key;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_components_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale(
'options_components_title',
settings.locale
)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale(
'options_components_toolTip',
settings.locale
)}{' '}
:
</p>
<Checkbox
label={getMessageByLocale(
'component_developerCollabrationNetwork_title',
settings.locale
)}
defaultChecked={settings.developerNetwork}
onChange={async (e, checked) => {
settings.developerNetwork = checked;
await saveSettings(settings);
}}
/>
<Checkbox
label={getMessageByLocale(
'component_projectCorrelationNetwork_title',
settings.locale
)}
defaultChecked={settings.projectNetwork}
onChange={async (e, checked) => {
settings.projectNetwork = checked;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_graphType_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_graphType_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack style={{ margin: '10px 25px' }}>
<p>
{getMessageByLocale('options_graphType_toolTip', settings.locale)}{' '}
:
</p>
<ChoiceGroup
defaultSelectedKey={settings.graphType}
options={graphOptions}
onChange={async (e, option: any) => {
settings.graphType = option.key as GraphType;
await saveSettings(settings);
}}
/>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_update_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_update_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale('options_update_toolTip', settings.locale)}.
</p>
<Toggle
label={getMessageByLocale(
'options_update_toggle_autoCheck',
settings.locale
)}
defaultChecked={settings.checkForUpdates}
onText={getMessageByLocale(
'global_toggle_onText',
settings.locale
)}
offText={getMessageByLocale(
'global_toggle_offText',
settings.locale
)}
onChange={async (e, checked) => {
settings.checkForUpdates = checked;
await saveSettings(settings);
}}
/>
{checkingUpdate && (
<Stack horizontalAlign="start">
<Spinner
label={getMessageByLocale(
'options_update_checking',
settings.locale
)}
/>
</Stack>
)}
{updateStatus === UpdateStatus.yes && (
<MessageBar
messageBarType={MessageBarType.success}
isMultiline={false}
>
{getMessageByLocale(
'options_update_btn_updateStatusYes',
settings.locale
)}
<Link href={updateUrl} target="_blank" underline>
{getMessageByLocale(
'options_update_btn_getUpdate',
settings.locale
)}
</Link>
</MessageBar>
)}
{updateStatus === UpdateStatus.no && (
<MessageBar
messageBarType={MessageBarType.info}
isMultiline={false}
>
{getMessageByLocale(
'options_update_btn_updateStatusNo',
settings.locale
)}
</MessageBar>
)}
<DefaultButton
style={{
width: 120,
}}
disabled={checkingUpdate}
onClick={async () => {
await checkUpdateManually();
}}
>
{getMessageByLocale(
'options_update_btn_checkUpdate',
settings.locale
)}
</DefaultButton>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_token_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_token_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack
style={{ margin: '10px 25px' }}
tokens={{
childrenGap: 10,
}}
>
<p>
{getMessageByLocale('options_token_toolTip', settings.locale)} :
</p>
{tokenCurrent !== '' && (
<Stack
horizontal
verticalAlign="center"
style={{
margin: '5px',
padding: '3px',
width: '300px',
boxShadow: '4px 4px 10px rgba(0, 0, 0, 0.2)',
}}
tokens={{
childrenGap: 5,
}}
>
<Image
width={75}
height={75}
src={metaData.avatar}
imageFit={ImageFit.centerCover}
/>
<Text
variant="large"
style={{
marginLeft: 25,
maxWidth: 200,
wordWrap: 'break-word',
}}
>
{metaData.name}
</Text>
</Stack>
)}
<DefaultButton
onClick={() => {
setShowDialogToken(true);
}}
style={{
width: 120,
}}
>
{getMessageByLocale(
'options_token_btn_setToken',
settings.locale
)}
</DefaultButton>
</Stack>
</Stack.Item>
<Stack.Item className="Box">
<TooltipHost
content={getMessageByLocale(
'options_about_toolTip',
settings.locale
)}
>
<Stack.Item className="Box-header">
<h2 className="Box-title">
{getMessageByLocale('options_about_title', settings.locale)}
</h2>
</Stack.Item>
</TooltipHost>
<Stack style={{ margin: '10px 25px' }}>
<p>
{getMessageByLocale('options_about_description', settings.locale)}
</p>
<p>
{getMessageByLocale(
'options_about_description_website',
settings.locale
)}
</p>
<Link href={HYPERTRONS_CRX_WEBSITE} target="_blank" underline>
{HYPERTRONS_CRX_WEBSITE}
</Link>
</Stack>
</Stack.Item>
</Stack>
</Stack>
);
}
