office-ui-fabric-react#IDropdownOption TypeScript Examples

updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
        // clear input value and re-render table
        if (item !== undefined) {
            if (this.searchInput !== null) {
                this.searchInput.value = '';
            }
            this.setState(() => ({ searchType: item.text }));
        }
    }

// get percent value number
    // percentNum = (value: string) => {
    percentNum = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
        // percentNum = (event: React.FormEvent<HTMLDivElement>, item?: ISelectableOption) => {
        if (item !== undefined) {
            const vals = parseFloat(item !== undefined ? item.text : '');
            this.setState({ percent: vals / 100, selectedItem: item }, () => {
                this.reInit();
            });
        }
    }

// get swap parallel axis
    getSwapArr = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
        const newSelectedItems = [...this.state.swapyAxis];
        if (item !== undefined) {
            if (item.selected) {
                // add the option if it's checked
                newSelectedItems.push(item.key as string);
            } else {
                // remove the option if it's unchecked
                const currIndex = newSelectedItems.indexOf(item.key as string);
                if (currIndex > -1) {
                    newSelectedItems.splice(currIndex, 1);
                }
            }
            this.setState({
                swapAxisArr: newSelectedItems,
                swapyAxis: newSelectedItems
            });
        }
    }

// intermediate button click -> intermediate graph for each trial
    // support intermediate is dict
    selectOtherKeys = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
        if (item !== undefined) {
            const value = item.text;
            const isShowDefault: boolean = value === 'default' ? true : false;
            const { intermediateData, intermediateId } = this.state;
            const intermediateArr: number[] = [];
            // just watch default key-val
            if (isShowDefault === true) {
                Object.keys(intermediateData).map(item => {
                    if (intermediateData[item].type === 'PERIODICAL') {
                        const temp = parseMetrics(intermediateData[item].data);
                        if (typeof temp === 'object') {
                            intermediateArr.push(temp[value]);
                        } else {
                            intermediateArr.push(temp);
                        }
                    }
                });
            } else {
                Object.keys(intermediateData).map(item => {
                    const temp = parseMetrics(intermediateData[item].data);
                    if (typeof temp === 'object') {
                        intermediateArr.push(temp[value]);
                    }
                });
            }
            const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
            // re-render
            this.setState({
                intermediateKey: value,
                intermediateOption: intermediate
            });
        }
    }

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

private async _getSupportedLangualge() {
    $.get({
      url: 'https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation'
    })
      .done((languages: any): void => {
        let droparr: IDropdownOption[] = []
        let langobjs = languages.translation;
        for (var key in langobjs) {
          if (langobjs.hasOwnProperty(key)) {
            droparr.push({ key: key, text: langobjs[key].name })
          }
        }
        this.setState({ langarr: droparr })
      }).fail(function (res) {
        console.log(res);
      });
  }

@autobind
  private async _getLookupvalues() {
    const allItems: any[] = await sp.web.lists.getByTitle("Projects").items.getAll();

    let projectarr: IDropdownOption[] = [];
    allItems.forEach(project => {
      projectarr.push({ key: project.ID, text: project.Title });
    })
    this.setState({
      projectlookupvalues: projectarr
    });
    this._getSalesInfo();
  }

@autobind
  private projects_selection(event: React.FormEvent<HTMLDivElement>, item: IDropdownOption) {
    if (item.selected) {
      let seleteditemarr = this.state.seletedprojects;
      seleteditemarr.push(+item.key);
      this.setState({ seletedprojects: seleteditemarr });
    }
    else {
      let seleteditemarr = this.state.seletedprojects;
      let i = seleteditemarr.indexOf(+item.key);
      if (i >= 0) {
        seleteditemarr.splice(i, 1);
      }
      this.setState({ seletedprojects: seleteditemarr });
    }
  }

handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
        if (item !== undefined) {
            this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
        }
    }

private async _getProjects() {
    const allItems: any[] = await sp.web.lists.getByTitle("Projects").items.getAll();
    const options: IDropdownOption[] = [];
    allItems.forEach(function (v, i) {
      options.push({ key: v.ID, text: v.Title });
    });
    this.setState({ projects: options });
  }

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