@fortawesome/free-solid-svg-icons#faRedo TypeScript Examples

Filter = (props: PropsType) => {
  let lo = props.selected * props.perPage;
  let high = Math.min(props.length, lo + props.perPage);

  return (
    <div className="menu">
      <ul className="navbar w-100 pt-3 mb-0 p-0 container d-flex justify-content-between list-unstyled">
        <li className="nav-item col-6">
          <input
            className={"form-control mr-sm-2 " + props.theme.bgText}
            type="text"
            placeholder={props.searchPlaceHolder}
            name={props.searchName}
            autoComplete="on"
            value={props.search}
            onChange={(e) => {
              props.onSearch(e.target.value);
            }}
          />
        </li>
        <li className="nav-item text-secondary">
          Showing {high - lo} of {props.length}
        </li>
        <li className="nav-item">
          <div className="btn-group" role="group" aria-label="Basic example">
            <button
              type="button"
              className={"btn btn-transparent text-secondary"}
              onClick={() => {
                if (props.length > 0)
                  props.setRandom(getRandomInteger(0, props.length - 1));
              }}
              title={"Find Random " + props.name}>
              <FontAwesomeIcon icon={faRandom} />
            </button>
            <button
              type="button"
              className={"btn btn-transparent text-secondary"}
              title="Cancel Random"
              onClick={() => props.setRandom(-1)}>
              <FontAwesomeIcon icon={faRedo} />
            </button>
          </div>
        </li>
        <li className="nav-item">{props.children}</li>
      </ul>
    </div>
  );
}

MenuBar: FunctionComponent = () => {
	const { level, undoManager } = useStore();
	const dispatch = useDispatch();

	function on2StarsChange(value: number): void {
		level.set2StarsTime(value * 1000);
	}
	function on3StarsChange(value: number): void {
		level.set3StarsTime(value * 1000);
	}
	function onNameChange(ev: ChangeEvent<HTMLInputElement>): void {
		level.setName(ev.target.value);
	}

	function onNameFocus(): void {
		undoManager.startGroup();
	}
	function onNameBlur(ev: FocusEvent<HTMLInputElement>): void {
		undoManager.stopGroup();
		ev.target.reportValidity();
	}

	function onStarFocus(): void {
		undoManager.startGroup();
	}
	function onStarBlur(): void {
		undoManager.stopGroup();
	}

	function onUndo(): void {
		dispatch({
			type: 'undo',
		});
	}

	function onRedo(): void {
		dispatch({
			type: 'redo',
		});
	}

	return (
		<Bar>
			<Line>
				<LevelNameInput
					type="text"
					value={level.name}
					onChange={onNameChange}
					onFocus={onNameFocus}
					onBlur={onNameBlur}
					placeholder="Level name"
					required
				/>
				<Table>
					<TableRow
						title={`Finish in ${level.timings[0] / 1000}s or less to get 2 stars`}
					>
						<Text>★★</Text>
						<StarInput
							min={0}
							step={0.001}
							value={level.timings[0] / 1000}
							onChange={on2StarsChange}
							onFocus={onStarFocus}
							onBlur={onStarBlur}
							required
						/>
						<Text>secs</Text>
					</TableRow>
					<TableRow
						title={`Finish in ${level.timings[1] / 1000}s or less to get 3 stars`}
					>
						<Text>★★★</Text>
						<StarInput
							min={0}
							step={0.001}
							value={level.timings[1] / 1000}
							onChange={on3StarsChange}
							onFocus={onStarFocus}
							onBlur={onStarBlur}
							required
						/>
						<Text>secs</Text>
					</TableRow>
				</Table>
			</Line>
			<Line>
				<Button onClick={onUndo} disabled={!undoManager.canUndo}>
					<FontAwesomeIcon icon={faUndo}/>
					&#32;
					Undo
				</Button>
				<Button onClick={onRedo} disabled={!undoManager.canRedo}>
					<FontAwesomeIcon icon={faRedo}/>
					&#32;
					Redo
				</Button>
				<LoadSave/>
				<HomeButton/>
			</Line>
		</Bar>
	);
}