CatDogWidget.tsx

/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react'

import { TextWithIconWidget } from '@kui-shell/plugin-client-common'

interface Props {
  className?: string
}

interface State {
  which: 'dog' | 'cat'
}

export default class CatDogWidget extends React.PureComponent<Props, State> {
  public constructor(props: Props) {
    super(props)

    this.state = {
      which: 'cat'
    }
  }

  private readonly _toggle = () => {
    this.setState(curState => ({
      which: curState.which === 'dog' ? 'cat' : 'dog'
    }))
  }

  private cat() {
    return '🐱'
  }

  private dog() {
    return '🐶'
  }

  public render() {
    return (
      <TextWithIconWidget
        className={this.props.className}
        text={this.state.which === 'cat' ? this.cat() : this.dog()}
        viewLevel="normal"
        id="kui--plugin-example--cat-dog-widget"
        textOnclick={this._toggle}
        iconOnclick="hello cat"
      >
        {this.state.which === 'cat' ? this.dog() : this.cat() /* intentionally inverted */}
      </TextWithIconWidget>
    )
  }
}