All files / lib/TabList index.js

56.63% Statements 47/83
31.82% Branches 14/44
75% Functions 12/16
56.63% Lines 47/83
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222                        7x       7x 7x 7x   7x       7x   7x 7x         11x       2x       2x 2x                                                                   2x           2x 2x 2x   2x 3x 3x   3x 1x     2x   3x 3x         2x     2x                                                             2x 2x 2x 2x                                         2x 2x 2x         16x 16x   16x 16x 32x 32x 32x     2x 2x         16x                     89x                           89x         89x             89x    
import React from 'react';
import PropTypes from 'prop-types';
 
/**
 * Tab is supplemental, non-clickable component used to help bring attention to an item or object.
 * @param props
 * @returns {XML}
 * @constructor
 */
class TabList extends React.Component {
 
  componentDidMount() {
    this.determineInitialFocus();
  }
 
  determineInitialFocus = () => {
    const { children } = this.props;
    const { focus } = this.context;
    const childrenList = React.Children.toArray(children);
 
    Iif (focus > childrenList.length - 1 || focus < 0) {
      throw new Error(`focusIndex ${focus} is out of bound.`);
    }
 
    const focusIndex = !childrenList[focus].props.disabled ? focus : null;
 
    this.setFocus(focusIndex);
    this.context.onActivate(focusIndex);
  };
 
  setFocus = index => {
    // Update state with selected index
    return this.context.onFocus(index);
  };
 
  handleClick = (event, index, disabled) => {
    Iif(disabled) {
      event.preventDefault();
      event.stopPropagation();
    }
    this.setFocus(index);
    return this.context.onActivate(index);
  };
 
  getIncludesFirstCharacter = (str, char) =>
    str
      .charAt(0)
      .toLowerCase()
      .includes(char);
 
  setFocusByFirstCharacter = (char, currentIdx, length) => {
    const { children } = this.props;
 
    const newIndex = React.Children.toArray(children).reduce(
      (agg, child, idx, arr) => {
        const index =
          currentIdx + idx + 1 > length
            ? Math.abs(currentIdx + idx - length)
            : currentIdx + idx + 1;
        const label =
          arr[index].props.role === 'menuItem'
            ? arr[index].props.label
            : arr[index].props.heading;
 
        return !agg.length && !arr[index].props.disabled && this.getIncludesFirstCharacter(label, char)
          ? agg.concat(index)
          : agg;
      },
      []
    );
 
    this.setFocus(newIndex[0]);
  };
 
  handleListKeyPress = (e, idx, length, disabled) => {
    Iif(disabled) {
      e.preventDefault();
      e.stopPropagation();
    }
 
    let newIndex, clickEvent;
    const tgt = e.currentTarget;
    const char = e.key;
    let flag = false;
 
    const getNewIndex = (currentIndex, change) => {
      const getPossibleIndex = () => {
        Iif (currentIndex + change < 0) {
          return length;
        } else if (currentIndex + change > length) {
          return 0;
        }
 
        return currentIndex + change;
      };
      const possibleIndex = getPossibleIndex();
      return React.Children.toArray(this.props.children)[possibleIndex].props.disabled
        ? getNewIndex(possibleIndex, change)
        : possibleIndex;
    };
 
    const isPrintableCharacter = str => {
      return str.length === 1 && str.match(/\S/);
    };
    switch (e.which) {
      case 32:
      case 13:
        try {
          clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true,
          });
        } catch (err) {
          if (document.createEvent) {
            // DOM Level 3 for IE 9+
            clickEvent = document.createEvent('MouseEvents');
            clickEvent.initEvent('click', true, true);
          }
        }
        tgt.dispatchEvent(clickEvent);
 
        flag = true;
        break;
 
      case 38:
      case 37:
        // console.log('leftarrow');
        newIndex = getNewIndex(idx, -1);
        this.setFocus(newIndex);
        flag = true;
        break;
 
      case 39:
      case 40:
        newIndex = getNewIndex(idx, 1);
        this.setFocus(newIndex);
        flag = true;
        break;
 
      case 33:
      case 36:
        this.setFocus(0);
        flag = true;
        break;
 
      case 34:
      case 35:
        this.setFocus(length);
        flag = true;
        break;
      default:
        if (isPrintableCharacter(char)) {
          this.setFocusByFirstCharacter(char, idx, length);
          flag = true;
        }
        break;
    }
 
    Eif (flag) {
      e.stopPropagation();
      e.preventDefault();
    }
  };
 
  render() {
    const { children, role } = this.props;
    const { activeIndex, focus } = this.context;
 
    const setTabs = () =>
      React.Children.map(children, (child, idx) => {
        let arrLength = children.length - 1;
        const disabled = child.props.disabled;
        return React.cloneElement(child, {
          active: activeIndex === idx,
          focus: focus === idx,
          onPress: (e) => this.handleClick(e, idx, disabled),
          onKeyDown: e => this.handleListKeyPress(e, idx, arrLength, disabled),
          refName: 'navLink',
        });
      });
 
    return (
      <ul
        className='cui-tab__list'
        role={role}
        >
        {setTabs()}
      </ul>
    );
  }
}
 
TabList.propTypes = {
  /** @prop Children nodes to render inside TabList | null */
  children: PropTypes.node,
  /**
   * @prop ARIA role for the Nav, in the context of a TabContainer, the default will
   * be set to "tablist", but can be overridden by the Nav when set explicitly.
   *
   * When the role is set to "tablist" NavItem focus is managed according to
   * the ARIA authoring practices for tabs:
   * https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel | 'TabList'
   */
  role: PropTypes.string
};
 
TabList.defaultProps = {
  children: null,
  role: 'tablist'
};
 
TabList.contextTypes = {
  onFocus: PropTypes.func,
  focus: PropTypes.number,
  activeIndex: PropTypes.number,
  onActivate: PropTypes.func,
};
 
TabList.displayName = 'TabList';
 
export default TabList;