office-ui-fabric-react#Dropdown TypeScript Examples

ListTemplatePicker = (props: IListTemplatePickerProps) => {


    const getSupportedListTemplates: () => IDropdownOption[] = () => [
        { key: 100, text: 'Generic List' },
        { key: 101, text: 'Document Library' },
        { key: 102, text: 'Survey' },
        { key: 103, text: 'Links' },
        { key: 104, text: 'Announcements' },
        { key: 105, text: 'Contacts' },
        { key: 106, text: 'Events' },
        { key: 107, text: 'Tasks' },
        { key: 108, text: 'Discussion Board' },
        { key: 109, text: 'Picture Library' },
        { key: 119, text: 'Site Pages' },
        { key: 1100, text: 'Issues Tracking' }
    ];

    const onValueChange = (ev: any, option: IDropdownOption) => {
        props.onValueChanged(option.key);
    };

    return <Dropdown
        label={props.label}
        selectedKey={props.value}
        options={getSupportedListTemplates()}
        onChange={onValueChange}
    />;
}

public render(): React.ReactElement<ISpfxAzureTranslatorProps> {
    return (
      <div className={styles.spfxAzureTranslator}>
        <Stack horizontal tokens={stackTokens} styles={stackStyles}>
          <Stack {...columnProps}>
            <TextField label="Any language (auto deducted)" multiline autoAdjustHeight onChanged={(newtext) => { this.setState({ userinput: newtext }); this._translate() }} />
          </Stack>
          <Stack {...smallcolumnProps}>
            <Dropdown
              placeholder="Select a language"
              label="Select Language"
              options={this.state.langarr}
              onChanged={(value) => { this.setState({ toLanguage: value.key.toString() }); this._translate() }}
            />
          </Stack>
          <Stack {...columnProps}>
            <label>{this.state.content}</label>
          </Stack>
        </Stack>
      </div>
    );
  }

public render(): React.ReactElement<ISpfxFluentuiDropdownProps> {
    return (
      <div className={styles.spfxFluentuiDropdown}>
        <TextField
          className={styles.fixedwidth}
          label="Title" value={this.state.salestitle} onChanged={(titlevalue) => this.setState({ salestitle: titlevalue })} />
        {this.state.seletedprojects == null ? '' : <Dropdown
          placeholder="Select projects"
          label="Projects"
          onChange={this.projects_selection}
          multiSelect
          options={this.state.projectlookupvalues}
          className={styles.fixedwidth}
          defaultSelectedKeys={this.state.seletedprojects}
        />}

        <br />
        <PrimaryButton text="Save" onClick={this._savesales} />
      </div>
    );
  }

public render(): React.ReactElement<ISpfxGoogletranslateProps> {
    return (
      <div className={styles.spfxGoogletranslate}>
        <Stack horizontal tokens={stackTokens} styles={stackStyles}>
          <Stack {...columnProps}>
            <TextField label="English" multiline autoAdjustHeight onChanged={(newtext) => { this.setState({ userinput: newtext }); this._translate() }} />
          </Stack>
          <Stack {...smallcolumnProps}>
            <Dropdown
              placeholder="Select a language"
              label="Select Language"
              options={languages}
              onChanged={(value) => { this.setState({ toLanguage: value.key.toString() }); this._translate() }}
            />

          </Stack>
          <Stack {...columnProps}>
            <label>{this.state.content}</label>
          </Stack>
        </Stack>
      </div>
    );
  }

render(): React.ReactNode {
        const { option, paraNodata, dimName, isLoadConfirm, selectedItem, swapyAxis } = this.state;
        return (
            <div className="parameter">
                <Stack horizontal className="para-filter" horizontalAlign="end">
                    <span className="para-filter-text">Top</span>
                    <Dropdown
                        selectedKey={selectedItem ? selectedItem.key : undefined}
                        onChange={this.percentNum}
                        placeholder="100%"
                        defaultSelectedKeys={[0.2]}
                        options={[
                            { key: '0.2', text: '20%' },
                            { key: '0.5', text: '50%' },
                            { key: '0.8', text: '80%' },
                            { key: '1', text: '100%' },
                        ]}
                        styles={{ dropdown: { width: 300 } }}
                        className="para-filter-percent"
                    />
                    <Dropdown
                        placeholder="Select options"
                        selectedKeys={swapyAxis}
                        onChange={this.getSwapArr}
                        multiSelect
                        options={
                            dimName.map((key, item) => {
                                return {
                                    key: key, text: dimName[item]
                                };
                            })
                        }
                        styles={{ dropdown: { width: 300 } }}
                    />
                    <PrimaryButton
                        text="Confirm"
                        onClick={this.swapReInit}
                        disabled={isLoadConfirm}
                    />
                </Stack>
                <div className="searcHyper">
                    <ReactEcharts
                        option={option}
                        style={this.chartMulineStyle}
                        // lazyUpdate={true}
                        notMerge={true} // update now
                    />
                    <div className="noneData">{paraNodata}</div>
                </div>
            </div>
        );
    }

public render(): React.ReactElement<ISpfxFluentuiPanelProps> {
    let buttonStyles = { root: { marginRight: 8 } };
    const onRenderFooterContent = () => (
      <div>
        <PrimaryButton onClick={this._saveclick} styles={buttonStyles}>
          Save
        </PrimaryButton>
        <DefaultButton onClick={this._cancelclick}>Cancel</DefaultButton>
      </div>
    );

    return (
      <div className={styles.spfxFluentuiPanel}>
        <Stack tokens={stackTokens} verticalAlign="end">
          <Stack horizontal tokens={stackTokens} verticalAlign="end">
            <Dropdown className={styles.Dropdown}
              placeholder="Select a Project"
              label="Projects"
              options={this.state.projects}
            />
            <DefaultButton text="Project" iconProps={addIcon} onClick={() => this.setState({ showpanel: true, projectname: '' })} />
          </Stack>
        </Stack>
        {this.state.showpanel &&
          <Panel
            headerText={"New Project Name"}
            isOpen={true}
            isBlocking={false}
            closeButtonAriaLabel="Close"
            onRenderFooterContent={onRenderFooterContent}>
            <TextField placeholder={'Enter a new project name'} onChanged={(strproject) => this.setState({ projectname: strproject })}></TextField>
          </Panel>
        }

      </div>
    );
  }

render(): React.ReactNode {
        const { tablePageSize, whichGraph, searchType } = this.state;
        const { columnList, changeColumn } = this.props;
        const source = TRIALS.filter(this.state.searchFilter);
        const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
        const searchOptions = [
            { key: 'Id', text: 'Id' },
            { key: 'Trial No.', text: 'Trial No.' },
            { key: 'Status', text: 'Status' },
            { key: 'Parameters', text: 'Parameters' },
        ];
        return (
            <div>
                <div className="trial" id="tabsty">
                    <Pivot defaultSelectedKey={"0"} className="detial-title">
                        {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
                        <PivotItem headerText="Default metric" itemIcon="HomeGroup" key="1">
                            <Stack className="graph">
                                <DefaultPoint
                                    trialIds={trialIds}
                                    visible={whichGraph === '1'}
                                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
                                />
                            </Stack>
                        </PivotItem>
                        {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
                        <PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="2">
                            <Stack className="graph">
                                <Para
                                    dataSource={source}
                                    expSearchSpace={JSON.stringify(EXPERIMENT.searchSpace)}
                                    whichGraph={whichGraph}
                                />
                            </Stack>
                        </PivotItem>
                        {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
                        <PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="3">
                            <Duration source={source} whichGraph={whichGraph} />
                        </PivotItem>
                        {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
                        <PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="4">
                            {/* *why this graph has small footprint? */}
                            <Intermediate source={source} whichGraph={whichGraph} />
                        </PivotItem>
                    </Pivot>
                </div>
                {/* trial table list */}
                <Stack horizontal className="panelTitle">
                    <span style={{ marginRight: 12 }}>{tableListIcon}</span>
                    <span>Trial jobs</span>
                </Stack>
                <Stack horizontal className="allList">
                    <StackItem grow={50}>
                        <DefaultButton
                            text="Compare"
                            className="allList-compare"
                            // use child-component tableList's function, the function is in child-component.
                            onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
                        />
                    </StackItem>
                    <StackItem grow={50}>
                        <Stack horizontal horizontalAlign="end" className="allList">
                            <DefaultButton
                                className="allList-button-gap"
                                text="Add column"
                                onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
                            />
                            <Dropdown
                                selectedKey={searchType}
                                options={searchOptions}
                                onChange={this.updateSearchFilterType}
                                styles={{ root: { width: 150 } }}
                            />
                            <input
                                type="text"
                                className="allList-search-input"
                                placeholder={`Search by ${this.state.searchType}`}
                                onChange={this.searchTrial}
                                style={{ width: 230 }}
                                ref={(text): any => (this.searchInput) = text}
                            />
                        </Stack>

                    </StackItem>
                </Stack>
                <TableList
                    pageSize={tablePageSize}
                    tableSource={source.map(trial => trial.tableRecord)}
                    columnList={columnList}
                    changeColumn={changeColumn}
                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
                    // TODO: change any to specific type
                    ref={(tabList): any => this.tableList = tabList}
                />
            </div>
        );
    }

render(): React.ReactNode {
        const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight,
            tableColumns, allColumnList, isShowColumn, modalVisible,
            selectRows, isShowCompareModal, intermediateOtherKeys,
            isShowCustomizedModal, copyTrialId, intermediateOption
        } = this.state;
        const { columnList } = this.props;
        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.state.tableSourceForSort));
        return (
            <Stack>
                <div id="tableList">
                    <DetailsList
                        columns={tableColumns}
                        items={tableSource}
                        setKey="set"
                        compact={true}
                        onRenderRow={this.onRenderRow}
                        layoutMode={DetailsListLayoutMode.justified}
                        selectionMode={SelectionMode.multiple}
                        selection={this.getSelectedRows}
                    />

                </div>
                {/* Intermediate Result Modal */}
                <Modal
                    isOpen={modalVisible}
                    onDismiss={this.hideIntermediateModal}
                    containerClassName={contentStyles.container}
                >
                    <div className={contentStyles.header}>
                        <span>Intermediate result</span>
                        <IconButton
                            styles={iconButtonStyles}
                            iconProps={{ iconName: 'Cancel' }}
                            ariaLabel="Close popup modal"
                            onClick={this.hideIntermediateModal as any}
                        />
                    </div>
                    {
                        intermediateOtherKeys.length > 1
                            ?
                            <Stack horizontalAlign="end" className="selectKeys">
                                <Dropdown
                                    className="select"
                                    selectedKey={intermediateKey}
                                    options={
                                        intermediateOtherKeys.map((key, item) => {
                                            return {
                                                key: key, text: intermediateOtherKeys[item]
                                            };
                                        })
                                    }
                                    onChange={this.selectOtherKeys}
                                />
                            </Stack>
                            :
                            null
                    }
                    <div className="intermediate-graph">
                        <ReactEcharts
                            option={intermediateOption}
                            style={{
                                width: 0.5 * modalIntermediateWidth,
                                height: 0.7 * modalIntermediateHeight,
                                padding: 20
                            }}
                            theme="my_theme"
                        />
                        <div className="xAxis">#Intermediate result</div>
                    </div>
                </Modal>
                {/* Add Column Modal */}
                {
                    isShowColumn &&
                    <ChangeColumnComponent
                        hideShowColumnDialog={this.hideShowColumnModal}
                        isHideDialog={!isShowColumn}
                        showColumn={allColumnList}
                        selectedColumn={columnList}
                        changeColumn={this.props.changeColumn}
                    />
                }
                {/* compare trials based message */}
                {isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
                {/* clone trial parameters and could submit a customized trial */}
                <Customize
                    visible={isShowCustomizedModal}
                    copyTrialId={copyTrialId}
                    closeCustomizeModal={this.closeCustomizedTrial}
                />
            </Stack>
        );
    }

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>
  );
}

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>
  );
}

export function PropertyEditor(props: IPropertyEditorProps) {
    let { schema,
        label,
        readonly,
        required,
        value,
        onChange } = props;

    const onDropdownChange = ((ev: any, v: IDropdownOption) => {
        onChange(v.key);
    });

    const onNumberInputChange = ((ev: any, v: any) => {
        if (typeof (v) === "number") {
            onChange(v);
        } else {
            const number = parseFloat(v as string);
            onChange(number);
        }
    });

    const onInputChange = ((ev: any, v: any) => {
        onChange(v);
    });

    if (schema.enum) {
        if (schema.enum.length > 1 && !readonly) {
            return (
                <Dropdown
                    required={required}
                    label={label}
                    selectedKey={value}
                    options={schema.enum.map((p) => ({ key: p, text: p }))}
                    onChange={onDropdownChange}
                />
            );
        } else {
            return (
                <TextField
                    label={label}
                    value={value}
                    readOnly={true}
                    required={required}
                    onChange={onInputChange}
                />
            );
        }
    } else {
        switch (schema.type) {
            case 'boolean':
                return (
                    <Toggle
                        label={label}
                        checked={value as boolean}
                        disabled={readonly}
                        onChange={onInputChange}
                    />
                );
            case 'array':
                return <>
                    <Label>{label}</Label>
                    <GenericArrayEditor
                        object={value}
                        schema={schema.items}
                        onObjectChanged={onChange} />
                </>;
            case 'object': // TODO If object is a simple dictionary (key/non-complex object values) => Display a custom control
                // return <GenericObjectEditor
                //     object={value}
                //     schema={schema}
                //     onObjectChanged={onChange}
                // />;
                return <div>
                    <Label>{label}</Label>
                    <MessageBar messageBarType={MessageBarType.info}>{`This value of this property must be a complex object. Please use code editor to edit it`}</MessageBar>
                </div>;
            case 'number':
                return (
                    <TextField
                        required={required}
                        label={label}
                        value={value}
                        readOnly={readonly}
                        onChange={onNumberInputChange}
                    />
                );
            case 'string':
            default:
                return (
                    <TextField
                        required={required}
                        label={label}
                        value={value}
                        readOnly={readonly}
                        onChange={onInputChange}
                    />
                );
        }
    }
}