office-ui-fabric-react#IDropdownStyles TypeScript Examples
The following examples show how to use
office-ui-fabric-react#IDropdownStyles.
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: 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 #2
| Source File: ProjectNetwork.tsx From hypertrons-crx with Apache License 2.0 | 4 votes |
|
ProjectNetworkView: React.FC<ProjectNetworkViewProps> = ({
currentRepo,
graphType,
}) => {
const [repoCorrelationData, setRepoCorrelationData] = useState<
IGraphData | undefined
>();
const [developersByRepoData, setDevelopersByRepoData] = useState<
IGraphData | undefined
>();
const [repoPeriod, setRepoPeriod] = useState<string | number | undefined>(
180
);
const [developerPeriod, setDeveloperPeriod] = useState<
string | number | undefined
>(180);
const [inited, setInited] = useState(false);
const [settings, setSettings] = useState(new Settings());
const [statusCode, setStatusCode] = useState<number>(200);
useEffect(() => {
const getRepoCorrelationData = async () => {
try {
const res = await getRepoCorrelation(currentRepo);
setRepoCorrelationData(res.data);
} catch (e) {
// @ts-ignore
setStatusCode(e);
}
};
getRepoCorrelationData();
}, [repoPeriod]);
useEffect(() => {
const getDevelopersByRepoData = async () => {
try {
const res = await getDevelopersByRepo(currentRepo);
setDevelopersByRepoData(res.data);
} catch (e) {
// @ts-ignore
setStatusCode(e);
}
};
getDevelopersByRepoData();
}, [developerPeriod]);
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 graphStyle = {
width: 780,
height: 380,
};
if (statusCode !== 200) {
return <ErrorPage errorCode={statusCode} />;
}
if (!repoCorrelationData || !developersByRepoData) {
return (
<Spinner
id="spinner_perceptor_layout"
label={getMessageByLocale('golbal_loading', settings.locale)}
/>
);
}
return (
<div>
<div className="hypertrons-crx-border hypertrons-crx-container">
<Stack className="hypertrons-crx-title">
<span>
{getMessageByLocale(
'component_projectCorrelationNetwork_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={repoCorrelationData!}
style={graphStyle}
focusedNodeID={currentRepo}
/>
</div>
</div>
<div className="col-12 col-md-4">
<div
className="color-text-secondary"
style={{ marginLeft: '35px', marginRight: '35px' }}
>
<p>
{getMessageByLocale(
'component_projectCorrelationNetwork_description',
settings.locale
)}
</p>
<ul style={{ margin: '0px 0 10px 15px' }}>
<li>
{getMessageByLocale(
'component_projectCorrelationNetwork_description_node',
settings.locale
)}
</li>
<li>
{getMessageByLocale(
'component_projectCorrelationNetwork_description_edge',
settings.locale
)}
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="hypertrons-crx-border hypertrons-crx-container">
<Stack className="hypertrons-crx-title">
<span>
{getMessageByLocale(
'component_activeDeveloperCollabrationNetwork_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={developersByRepoData!}
style={graphStyle}
/>
</div>
</div>
<div className="col-12 col-md-4">
<div
className="color-text-secondary"
style={{ marginLeft: '35px', marginRight: '35px' }}
>
<p>
{getMessageByLocale(
'component_activeDeveloperCollabrationNetwork_description',
settings.locale
)}
</p>
<ul style={{ margin: '0px 0 10px 15px' }}>
<li>
{getMessageByLocale(
'component_activeDeveloperCollabrationNetwork_description_node',
settings.locale
)}
</li>
<li>
{getMessageByLocale(
'component_activeDeveloperCollabrationNetwork_description_edge',
settings.locale
)}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
