render()

in src/toggle/toggle.tsx [30:75]


  render() {
    const {
      className,
      children,
      disabled,
      title,
      leftLabel,
      size = Size.Size16,
      'data-test': dataTest,
      help,
      onTransitionEnd,
      ...restProps
    } = this.props;

    const classes = classNames(className, size, styles.toggle, disabled && styles.disabled);

    return (
      <label className={classes} title={title} data-test={dataTests('ring-toggle', dataTest)}>
        {leftLabel && (
          <span className={styles.leftLabel}>
            {leftLabel}
            {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
          </span>
        )}

        <span className={styles.switchWrapper}>
          <input
            data-test='ring-toggle-input'
            {...restProps}
            type='checkbox'
            disabled={disabled}
            className={styles.input}
          />

          <span className={styles.switch} onTransitionEnd={onTransitionEnd} />
        </span>

        {children && (
          <div className={styles.label}>
            {children}
            {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
          </div>
        )}
      </label>
    );
  }