Class ToggleWidget

modules/widgets/src/toggle-widget.tsx:36–101

 * A generic widget that displays a button with icon or text content.
 */
export class ToggleWidget extends Widget<ToggleWidgetProps> {
  static defaultProps: Required<ToggleWidgetProps> = {
    ...Widget.defaultProps,
    id: 'icon',
    placement: 'top-left',
    viewId: null,
    initialChecked: false,
    icon: '',
    onIcon: undefined!,
    label: '',
    onLabel: undefined!,
    color: '',
    onColor: undefined!,
    onChange: undefined!
  };

  className = 'deck-widget-toggle';
  placement: WidgetPlacement = 'top-left';
  checked: boolean;

  constructor(props: ToggleWidgetProps) {
    super(props);
    this.checked = this.props.initialChecked;
    this.setProps(this.props);
  }

  setProps(props: Partial<ToggleWidgetProps>) {
    this.placement = props.placement ?? this.placement;
    this.viewId = props.viewId;
    super.setProps(props);
  }

  onRenderHTML(rootElement: HTMLElement): void {
    const {
      className,
      style,
      icon,
      label,
      color,
      onIcon = icon,
      onLabel = label,
      onColor = color
    } = this.props;
    const on = this.checked;

    rootElement.dataset.checked = String(on);

    render(
      <IconButton
        className={className}
        style={style as JSX.CSSProperties}
        icon={on ? onIcon : icon}
        label={on ? onLabel : label}
        color={on ? onColor : color}
        onClick={this._toggle}
      />,
      rootElement
    );