public render()

in packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx [73:131]


  public render(): JSX.Element {
    const {
      buttonClass = '',
      defaultLabel = '',
      disabled = false,
      id = '',
      options = [],
      submenuLabel = '',
    } = this.props;
    const { expanded, selected } = this.state;
    const {
      caretRef,
      hidePanel,
      onClickOption,
      onClickDefault,
      onClickCaret,
      onKeyDown,
      setButtonRef,
      setCaretRef,
    } = this;
    const expandedClass = expanded ? ` ${styles.expanded}` : '';

    return (
      <>
        <div className={styles.container}>
          <button
            className={`${styles.defaultButton} ${buttonClass}`}
            disabled={disabled}
            id={id}
            onClick={onClickDefault}
            ref={setButtonRef}
            role={'menuitem'}
          >
            <span>{options[this.state.selected]}</span>
          </button>
          <div className={styles.separator} aria-hidden={'true'} />
          <button
            aria-label={submenuLabel || defaultLabel}
            className={styles.caretButton + expandedClass}
            ref={setCaretRef}
            onClick={onClickCaret}
            aria-expanded={expanded}
            aria-haspopup={true}
            disabled={disabled}
            role={'menuitem'}
          />
        </div>
        <SplitButtonPanel
          expanded={expanded}
          caretRef={caretRef}
          selected={selected}
          hidePanel={hidePanel}
          onClick={onClickOption}
          onKeyDown={onKeyDown}
          options={options}
        />
      </>
    );
  }