office-ui-fabric-react#ActionButton TypeScript Examples
The following examples show how to use
office-ui-fabric-react#ActionButton.
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: index.tsx From azure-serverless-workshop with MIT License | 6 votes |
|
public render(): JSX.Element {
const { disabled, checked } = this.props;
return (
<div className={css(classNames.loginActionButton)}>
{auth.isLoggedIn() ? (
<ActionButton
data-automation-id="test"
iconProps={{ iconName: 'AddFriend' }}
allowDisabledFocus={true}
disabled={disabled}
checked={checked}
onClick={event => {
event.preventDefault()
auth.logout()
}}>
Sign out ({auth.getUserName()})
</ActionButton>
) : (
<ActionButton
data-automation-id="test"
iconProps={{ iconName: 'AddFriend' }}
allowDisabledFocus={true}
disabled={disabled}
checked={checked}
onClick={event => {
event.preventDefault()
auth.login()
}}>
Sign in
</ActionButton>
)}
</div>
);
}
Example #2
| Source File: ExportPackageViewer.tsx From sp-site-designs-studio with MIT License | 5 votes |
|
ExportPackageViewer = (props: IExportPackageViewerProps) => {
const [currentFile, setCurrentFile] = useState(props.exportPackage.allFiles && props.exportPackage.allFiles.length && props.exportPackage.allFiles[0]);
useEffect(() => {
const allFiles = props.exportPackage.allFiles;
if (allFiles && allFiles.length > 0) {
setCurrentFile(allFiles[0]);
}
}, [props.exportPackage]);
const viewFileContent = (file: string) => {
setCurrentFile(file);
};
const getContentLanguage = (fileName: string) => {
if (!fileName) {
return null;
}
const fileNameParts = fileName.split(".");
const extension = fileNameParts.length > 1 ? fileNameParts[fileNameParts.length - 1].toLowerCase() : null;
switch (extension) {
case "json":
return "json";
case "ps1":
return "powershell";
default:
return "";
}
};
const currentContent = props.exportPackage.hasContent(currentFile)
? props.exportPackage.getFileContent(currentFile)
: "";
return <div className={styles.ExportPackageViewer}>
<div className={styles.row}>
<div className={styles.column}>
<h3><Icon styles={{
root: {
fontSize: 24,
verticalAlign: "text-bottom",
marginRight: 10
}
}} iconName="Package" />{(props.exportPackage.packageName) || ""}</h3>
</div></div>
<div className={styles.row}>
<div className={styles.column2}>
<ul className={styles.filesList}>
{props.exportPackage.allFiles.map(f => <li>
<ActionButton iconProps={{ iconName: "TextDocument" }}
styles={{
root: { fontWeight: currentFile == f ? "bold" : "normal" }
}}
checked={currentFile == f} text={f} onClick={() => viewFileContent(f)} />
</li>)}
</ul>
</div>
<div className={styles.column10}>
<CodeEditor
height="65vh"
language={getContentLanguage(currentFile)}
options={{
readOnly: true,
folding: true,
renderIndentGuides: true,
minimap: {
enabled: false
}
}}
value={currentContent}
/>
</div>
</div>
</div>;
}
Example #3
| 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>
);
}
