semantic-ui-react#DropdownProps TypeScript Examples

mapper = ({
  multiselect,
  options,
  getOptionLabel,
  onChange,
  error,
  value,
  onBlur,
  ...rest
}: SelectProps): DropdownProps => {
  const semanticOptions = options.map((o: SelectOptionProps<string>) => ({
    value: o.value,
    text: o.label,
    key: o.value,
    content: getOptionLabel ? getOptionLabel(o) : null,
  }));
  const onChangeSemantic: any = onChange;
  return {
    ...rest,
    onChange: onChangeSemantic,
    options: semanticOptions,
    multiple: multiselect,
  };
}

changeController = async (_e: any, data: DropdownProps) => {
    // console.log(data);
    this.socket.emit('CMD:changeController', data.value);
  };

setMedia = (_e: any, data: DropdownProps) => {
    this.socket.emit('CMD:host', data.value);
  };

playlistAdd = (_e: any, data: DropdownProps) => {
    this.socket.emit('CMD:playlistAdd', data.value);
  };

setMediaAndClose = (e: any, data: DropdownProps) => {
    window.setTimeout(
      () => this.setState({ inputMedia: undefined, results: undefined }),
      300
    );
    this.props.setMedia(e, data);
  };

setMedia = (e: any, data: DropdownProps) => {
    window.setTimeout(
      () => this.setState({ resetDropdown: Number(new Date()) }),
      300
    );
    this.props.setMedia(e, data);
  };

function BaseDropdown<Option> ({ allowAdd = false, children, className = '', defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, tabIndex, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
  const lastUpdate = useRef<string>('');
  const [stored, setStored] = useState<string | undefined>();

  const _setStored = useCallback(
    (value: string): void => {
      const json = JSON.stringify({ v: value });

      if (lastUpdate.current !== json) {
        lastUpdate.current = json;

        setStored(value);

        onChange && onChange(
          transform
            ? transform(value)
            : value
        );
      }
    },
    [onChange, transform]
  );

  useEffect((): void => {
    _setStored(isUndefined(value) ? defaultValue : value);
  }, [_setStored, defaultValue, value]);

  const _onAdd = useCallback(
    (_: React.SyntheticEvent<HTMLElement>, { value }: DropdownProps): void =>
      onAdd && onAdd(value),
    [onAdd]
  );

  const _onChange = useCallback(
    (_: React.SyntheticEvent<HTMLElement> | null, { value }: DropdownProps): void =>
      _setStored(value as string),
    [_setStored]
  );

  const dropdown = (
    <SUIDropdown
      allowAdditions={allowAdd}
      button={isButton}
      className={dropdownClassName}
      compact={isButton}
      disabled={isDisabled}
      error={isError}
      floating={isButton}
      multiple={isMultiple}
      onAddItem={_onAdd}
      onBlur={onBlur}
      onChange={_onChange}
      onClose={onClose}
      options={options}
      placeholder={placeholder}
      renderLabel={renderLabel}
      search={onSearch || allowAdd}
      searchInput={searchInput}
      selection
      tabIndex={tabIndex}
      value={stored}
    />
  );

  return isButton
    ? <SUIButton.Group>{dropdown}{children}</SUIButton.Group>
    : (
      <Labelled
        className={`ui--Dropdown ${className}`}
        help={help}
        isFull={isFull}
        label={label}
        labelExtra={labelExtra}
        withEllipsis={withEllipsis}
        withLabel={withLabel}
      >
        {dropdown}
        {children}
      </Labelled>
    );
}

function BaseDropdown<Option> ({ allowAdd = false, children, className = '', defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, tabIndex, transform, value, withEllipsis, withLabel, ...otherProps }: Props<Option>): React.ReactElement<Props<Option>> {
  const lastUpdate = useRef<string>('');
  const [stored, setStored] = useState<string | undefined>();

  const _setStored = useCallback(
    (value: string): void => {
      const json = JSON.stringify({ v: value });

      if (lastUpdate.current !== json) {
        lastUpdate.current = json;

        setStored(value);

        onChange && onChange(
          transform
            ? transform(value)
            : value
        );
      }
    },
    [onChange, transform]
  );

  useEffect((): void => {
    _setStored(isUndefined(value) ? defaultValue : value);
  }, [_setStored, defaultValue, value]);

  const _onAdd = useCallback(
    (_: React.SyntheticEvent<HTMLElement>, { value }: DropdownProps): void =>
      onAdd && onAdd(value),
    [onAdd]
  );

  const _onChange = useCallback(
    (_: React.SyntheticEvent<HTMLElement> | null, { value }: DropdownProps): void =>
      _setStored(value as string),
    [_setStored]
  );

  const dropdown = (
    <StyledDropdown
      allowAdditions={allowAdd}
      button={isButton}
      className={dropdownClassName}
      compact={isButton}
      disabled={isDisabled}
      error={isError}
      floating={isButton}
      multiple={isMultiple}
      onAddItem={_onAdd}
      onBlur={onBlur}
      onChange={_onChange}
      onClose={onClose}
      options={options}
      placeholder={placeholder}
      renderLabel={renderLabel}
      search={onSearch || allowAdd}
      searchInput={searchInput}
      selection
      tabIndex={tabIndex}
      value={stored}
      {...otherProps}
    />
  );

  return isButton
    ? <SUIButton.Group>{dropdown}{children}</SUIButton.Group>
    : (
      <Labelled
        className={`ui--Dropdown ${className}`}
        help={help}
        isFull={isFull}
        label={label}
        labelExtra={labelExtra}
        withEllipsis={withEllipsis}
        withLabel={withLabel}
      >
        {dropdown}
        {children}
      </Labelled>
    );
}

ChatVideoCard: React.FC<{
  video: PlaylistVideo;
  index: number;
  controls?: boolean;
  onPlay?: (index: number) => void;
  onRemove?: (index: number) => void;
  onPlayNext?: (index: number) => void;
  onSetMedia?: (e: any, data: DropdownProps) => void;
  onPlaylistAdd?: (e: any, data: DropdownProps) => void;
  isYoutube?: boolean;
  disabled?: boolean;
}> = (props) => {
  const {
    video,
    index,
    controls,
    onPlay,
    onPlayNext,
    onRemove,
    onSetMedia,
    disabled,
    onPlaylistAdd,
    isYoutube,
  } = props;

  const handlePlayClick = React.useCallback(
    (e) => {
      if (onPlay) {
        onPlay(index);
      }
    },
    [onPlay, index]
  );

  const handlePlayNextClick = React.useCallback(
    (e) => {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
      if (onPlayNext) {
        onPlayNext(index);
      }
    },
    [onPlayNext, index]
  );

  const handleRemoveClick = React.useCallback(
    (e) => {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
      if (onRemove) {
        onRemove(index);
      }
    },
    [onRemove, index]
  );

  const Element = 'div';

  return (
    <Element
      title={video.name}
      className={classes.Card}
      onClick={
        onSetMedia
          ? (e) => {
              onSetMedia(e, { value: video.url });
            }
          : undefined
      }
    >
      <div className={classes.Wrapper}>
        <div className={classes.ThumbnailWrapper}>
          {!!video.duration && (
            <div className={classes.DurationLabel}>
              {formatTimestamp(video.duration)}
            </div>
          )}
          {!!video.img && (
            <img
              className={classes.Thumbnail}
              src={video.img}
              alt={video.name}
            />
          )}
        </div>
        <Icon
          color={isYoutube ? 'red' : 'black'}
          size="large"
          name={isYoutube ? 'youtube' : 'linkify'}
        />
        <div className={classes.Content}>
          <div className={classes.Title}>{decodeEntities(video.name)}</div>
          <div className={classes.ChannelName}>{video.channel}</div>
        </div>
        {onPlaylistAdd && (
          <div className={classes.Controls}>
            <div style={{ marginLeft: 'auto' }}>
              <Button
                className="playlistAddButton"
                onClick={(e) => {
                  e.stopPropagation();
                  e.nativeEvent.stopImmediatePropagation();
                  onPlaylistAdd(e, { value: video.url });
                }}
              >
                Add To Playlist
              </Button>
            </div>
          </div>
        )}
        {controls && (
          <div className={classes.Controls}>
            <ButtonGroup size="mini">
              <Button
                icon
                color="green"
                title="Play now"
                onClick={handlePlayClick}
                disabled={disabled}
              >
                <Icon name="play" />
              </Button>
              <Button
                icon
                color="black"
                title="Play next"
                onClick={handlePlayNextClick}
                disabled={disabled}
              >
                <Icon name="arrow up" />
              </Button>
              <Button
                icon
                color="red"
                title="Remove"
                onClick={handleRemoveClick}
                disabled={disabled}
              >
                <Icon name="trash" />
              </Button>
            </ButtonGroup>
          </div>
        )}
      </div>
    </Element>
  );
}

GradeDist: FC<GradeDistProps> = (props) => {
  /*
 * Initialize a GradeDist block on the webpage.
 * @param props attributes received from the parent element
 */

  const [gradeDistData, setGradeDistData] = useState<GradeDistData>(null!);
  const [chartType, setChartType] = useState<ChartTypes>('bar');
  const [currentQuarter, setCurrentQuarter] = useState('');
  const [currentProf, setCurrentProf] = useState('');
  const [profEntries, setProfEntries] = useState<Entry[]>(null!);
  const [currentCourse, setCurrentCourse] = useState('');
  const [courseEntries, setCourseEntries] = useState<Entry[]>(null!);
  const [quarterEntries, setQuarterEntries] = useState<Entry[]>(null!);

  const fetchGradeDistData = () => {
    let url = '';
    let params = {};
    // course context
    if (props.course) {
      url = `/courses/api/grades`;
      params = {
        department: props.course.department,
        number: props.course.number
      }
    }
    else if (props.professor) {
      url = `/professors/api/grades/${props.professor.shortened_name}`;
    }
    const res = axios.get<GradeDistData>(url, {
      params: params
    })
      .then(res => {
        setGradeDistData(res.data);
      });
  }

  // initial request to get grade dist data
  useEffect(() => {
    if (gradeDistData == null) {
      fetchGradeDistData();
    }
  })

  // get new data if choose a new course or professor
  useEffect(() => {
    setGradeDistData([]);
    fetchGradeDistData();
  }, [props.course?.id, props.professor?.ucinetid])

  // update list of professors/courses when new course/professor is detected
  useEffect(() => {
    if (gradeDistData && gradeDistData.length !== 0) {
      if (props.course) {
        createProfEntries();
      }
      else if (props.professor) {
        createCourseEntries();
      }
    }
  }, [gradeDistData])

  // update list of quarters when new professor/course is chosen
  useEffect(() => {
    if ((currentProf || currentCourse) && gradeDistData.length !== 0) {
      createQuarterEntries();
    }
  }, [currentProf, currentCourse])

  /*
   * Create an array of objects to feed into the quarter dropdown menu.
   * @return an array of JSON objects recording each quarter
   */
  const createQuarterEntries = () => {
    let quarters: Set<string> = new Set()
    let result: Entry[] = [{ value: 'ALL', text: 'All Quarters' }];

    gradeDistData
      .filter(entry => {
        if (props.course && entry.instructor === currentProf) {
          return true;
        }
        if (props.professor && (entry.department + ' ' + entry.number) == currentCourse) {
          return true;
        }
        return false;
      })
      .forEach(data => quarters.add(data.quarter + ' ' + data.year));
    quarters.forEach(quarter => result.push({ value: quarter, text: quarter }));

    setQuarterEntries(result);
    setCurrentQuarter(result[0].value);
  }

  /*
   * Create an array of objects to feed into the professor dropdown menu.
   * @return an array of JSON objects recording professor's names
   */
  const createProfEntries = () => {
    let professors: Set<string> = new Set()
    let result: Entry[] = [];

    gradeDistData
      .forEach(match => professors.add(match.instructor));

    professors.forEach(professor => result.push(
      { value: professor, text: professor }
    ));

    setProfEntries(result);
    setCurrentProf(result[0].value);
  }

  /*
 * Create an array of objects to feed into the course dropdown menu.
 * @return an array of JSON objects recording course's names
 */
  const createCourseEntries = () => {
    let courses: Set<string> = new Set()
    let result: Entry[] = [];

    gradeDistData
      .forEach(match => courses.add(match.department + ' ' + match.number));

    courses.forEach(course => result.push(
      { value: course, text: course }
    ));

    setCourseEntries(result);
    setCurrentCourse(result[0].value);
  }

  /*
   * Record what is in the quarter dropdown menu at the moment.
   * @param event an event object recording the mouse movement, etc.
   * @param status details about the status in the dropdown menu
   */
  const updateCurrentQuarter = (event: React.SyntheticEvent<HTMLElement>, status: DropdownProps) => {
    setCurrentQuarter(status.value as string);
  }

  /*
   * Record what is in the professor dropdown menu at the moment.
   * @param event an event object recording the mouse movement, etc.
   * @param status details about the status in the dropdown menu
   */
  const updateCurrentProf = (event: React.SyntheticEvent<HTMLElement>, status: DropdownProps) => {
    setCurrentProf(status.value as string);
  }

  /*
 * Record what is in the course dropdown menu at the moment.
 * @param event an event object recording the mouse movement, etc.
 * @param status details about the status in the dropdown menu
 */
  const updateCurrentCourse = (event: React.SyntheticEvent<HTMLElement>, status: DropdownProps) => {
    setCurrentCourse(status.value as string);
  }

  if (gradeDistData !== null && gradeDistData.length !== 0) {
    let graphProps = {
      gradeData: gradeDistData,
      quarter: currentQuarter,
      course: currentCourse,
      professor: currentProf
    }
    return (
      <div className={`gradedist-module-container ${props.minify ? 'grade-dist-mini' : ''}`}>
        <Grid.Row id='menu'>
          {
            props.minify && <Grid.Column className='gradedist-filter'>
              <Dropdown
                placeholder='Chart Type'
                scrolling
                selection
                options={[{ text: 'Bar', value: 'bar' }, { text: 'Pie', value: 'pie' }]}
                value={chartType}
                onChange={(e, s) => setChartType(s.value as ChartTypes)}
              />
            </Grid.Column>
          }

          <Grid.Column className='gradedist-filter'>
            <Dropdown
              placeholder={props.course ? 'Professor' : 'Course'}
              scrolling
              selection
              options={props.course ? profEntries : courseEntries}
              value={props.course ? currentProf : currentCourse}
              onChange={props.course ? updateCurrentProf : updateCurrentCourse}
            />
          </Grid.Column>

          <Grid.Column className='gradedist-filter'>
            <Dropdown
              placeholder='Quarter'
              scrolling
              selection
              options={quarterEntries}
              value={currentQuarter}
              onChange={updateCurrentQuarter}
            />
          </Grid.Column>
        </Grid.Row>

        <Grid.Row id='chart'>
          {
            (props.minify && chartType == 'bar' || !props.minify) && <div className={'grade_distribution_chart-container chart'}>
              <Chart {...graphProps} />
            </div>
          }
          {
            (props.minify && chartType == 'pie' || !props.minify) && <div className={'grade_distribution_chart-container pie'}>
              <Pie {...graphProps} />
            </div>
          }
        </Grid.Row>
      </div>
    );
  } else {
    return (
      <div>
      </div>
    );
  }
}

function BaseDropdown<Option>({
  allowAdd = false,
  children,
  className = '',
  defaultValue,
  dropdownClassName,
  help,
  isButton,
  isDisabled,
  isError,
  isFull,
  isMultiple,
  label,
  labelExtra,
  onAdd,
  onBlur,
  onChange,
  onClose,
  onSearch,
  options,
  placeholder,
  renderLabel,
  searchInput,
  tabIndex,
  transform,
  value,
  withEllipsis,
  withLabel,
}: Props<Option>): React.ReactElement<Props<Option>> {
  const lastUpdate = useRef<string>('');
  const [stored, setStored] = useState<string | undefined>();

  const _setStored = useCallback(
    (val: string): void => {
      const json = JSON.stringify({ v: val });

      if (lastUpdate.current !== json) {
        lastUpdate.current = json;

        setStored(val);

        // eslint-disable-next-line
        onChange && onChange(transform ? transform(val) : val);
      }
    },
    [onChange, transform]
  );

  useEffect((): void => {
    _setStored(isUndefined(value) ? defaultValue : value);
  }, [_setStored, defaultValue, value]);

  const _onAdd = useCallback(
    (_: React.SyntheticEvent<HTMLElement>, { value }: DropdownProps): void => onAdd && onAdd(value),
    [onAdd]
  );

  const _onChange = useCallback(
    (_: React.SyntheticEvent<HTMLElement> | null, { value }: DropdownProps): void => _setStored(value as string),
    [_setStored]
  );

  const dropdown = (
    <SUIDropdown
      allowAdditions={allowAdd}
      button={isButton}
      className={dropdownClassName}
      compact={isButton}
      disabled={isDisabled}
      error={isError}
      floating={isButton}
      multiple={isMultiple}
      onAddItem={_onAdd}
      onBlur={onBlur}
      onChange={_onChange}
      onClose={onClose}
      options={options}
      placeholder={placeholder}
      renderLabel={renderLabel}
      search={onSearch || allowAdd}
      searchInput={searchInput}
      selection
      tabIndex={tabIndex}
      value={stored}
    />
  );

  return isButton ? (
    <SUIButton.Group>
      {dropdown}
      {children}
    </SUIButton.Group>
  ) : (
    <Labelled
      className={`ui--Dropdown ${className}`}
      help={help}
      isFull={isFull}
      label={label}
      labelExtra={labelExtra}
      withEllipsis={withEllipsis}
      withLabel={withLabel}
    >
      {dropdown}
      {children}
    </Labelled>
  );
}