block7.tsx

interface Props {
  exposing: (self: CounterCard) => void;
}

interface State {
  count: number;
}

class CounterCard extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { count: 0 };
    this.props.exposing(this);
  }

  public reset() {
    this.setState({ count: 0 });
  }

  private up() {
    this.setState(state => ({ count: state.count! + 1 }));
  }

  private down() {
    this.setState(state => ({ count: Math.max(state.count! - 1, 0) }));
  }

  public render() {
    return (
      <div className={"col-xs-12 col-sm-6 col-md-4 col-lg-3"}>
        <div className={"card-pf card-pf-view"}>
          <div className={"card-pf-body"}>
            <div>
              <h2 className={"card-pf-title"}>
                <CounterButton label={"+"} onClick={() => this.up()} />
                <CounterButton label={"-"} onClick={() => this.down()} />
              </h2>
              <h5>Click to change count!</h5>
            </div>
            <div className={"right"}>
              <span className={"card-pf-icon-circle"}>{this.state.count}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function CounterButton(props: { onClick: () => void; label: string }) {
  return (
    <button
      style={{ minWidth: "30px", marginRight: "5px" }}
      className={"btn btn-primary"}
      onClick={props.onClick}
    >
      {props.label}
    </button>
  );
}