@zohodesk/dot/es/AlphabeticList/AlphabeticList.js

In this Library, we Provide Some Basic Components to Build Your Application

/*** Libraries ***/
import React from 'react';
import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from "./props/defaultProps";
import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/Layout';
/*** CSS ***/

import style from "./AlphabeticList.module.css";
export default class AlphabeticList extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleSelectAll = this.handleSelectAll.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelectAll() {
    let {
      onSelect,
      selectedCharacter
    } = this.props;
    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
  }

  handleSelect(id) {
    let {
      onSelect,
      selectedCharacter
    } = this.props;
    onSelect && selectedCharacter !== id && onSelect(id);
  }

  render() {
    let {
      selectedCharacter,
      align,
      type,
      i18nKeys,
      dataId,
      dataSelectorId
    } = this.props;
    let {
      allText = 'All',
      allTitle = 'All'
    } = i18nKeys;
    let alignType = align === 'vertical' ? style.column : style.row;
    let letters = type == 'alphabeticalwithhash' ? AlphabeticCharactersWithHash : type == 'alphabetical' ? AlphabeticCharacters : NumberList;
    return /*#__PURE__*/React.createElement(Container, {
      tagName: "ul",
      isCover: false,
      alignBox: align === 'vertical' ? 'column' : 'row',
      className: `${style.container} ${alignType} ${type != 'alphabetical' ? style.numbers : ''}`,
      dataId: "navigationDiv",
      dataSelectorId: dataSelectorId
    }, /*#__PURE__*/React.createElement(Box, {
      tagName: "li",
      className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,
      dataId: `All_${dataId}`
    }, /*#__PURE__*/React.createElement("span", {
      onClick: this.handleSelectAll,
      className: `${style.heading} ${style.letter}`,
      "data-title": allTitle
    }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItem, {
      id: letter,
      isActive: letter === selectedCharacter,
      onClick: this.handleSelect,
      text: letter,
      key: letter,
      dataId: dataId
    })));
  }

}
AlphabeticList.propTypes = AlphabeticList_propTypes;
AlphabeticList.defaultProps = AlphabeticList_defaultProps;
AlphabeticList.docs = {
  componentGroup: 'Atom'
};

class AlphabeticListItem extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    let {
      onClick,
      id
    } = this.props;
    onClick && onClick(id);
  }

  render() {
    let {
      isActive,
      text,
      dataId
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      tagName: "li",
      className: `${style.list} ${isActive ? style.selected : ''}`,
      onClick: this.handleClick,
      dataId: `${text}_${dataId}`
    }, /*#__PURE__*/React.createElement("span", {
      className: style.letter
    }, text));
  }

}

AlphabeticListItem.propTypes = AlphabeticListItem_propTypes;
AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;