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

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

/*** Libraries ***/
import React, { memo } 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/v1/Layout';
/*** CSS ***/

import style from "../../AlphabeticList/AlphabeticList.module.css";
const AlphabeticListItemMemo = /*#__PURE__*/memo(AlphabeticListItem);

function AlphabeticList(props) {
  let {
    onSelect,
    selectedCharacter,
    align,
    type,
    i18nKeys,
    dataId,
    dataSelectorId
  } = props;
  let {
    allText = 'All',
    allTitle = 'All'
  } = i18nKeys;
  let alignType = align === 'vertical' ? style.column : style.row;
  let letters = type == 'alphabeticalwithhash' ? AlphabeticCharactersWithHash : type == 'alphabetical' ? AlphabeticCharacters : NumberList;

  const handleSelectAll = () => {
    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
  };

  const handleSelect = id => {
    onSelect && selectedCharacter !== id && onSelect(id);
  };

  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: handleSelectAll,
    className: `${style.heading} ${style.letter}`,
    "data-title": allTitle
  }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItemMemo, {
    id: letter,
    isActive: letter === selectedCharacter,
    onClick: handleSelect,
    text: letter,
    key: letter,
    dataId: dataId
  })));
}

AlphabeticList.propTypes = AlphabeticList_propTypes;
AlphabeticList.defaultProps = AlphabeticList_defaultProps;
const MemoizedAlphabeticList = /*#__PURE__*/memo(AlphabeticList);
MemoizedAlphabeticList.propTypes = AlphabeticList_propTypes;
MemoizedAlphabeticList.defaultProps = AlphabeticList_defaultProps;
MemoizedAlphabeticList.displayName = 'AlphabeticList';
export default MemoizedAlphabeticList;

function AlphabeticListItem(props) {
  let {
    isActive,
    text,
    dataId,
    onClick,
    id
  } = props;

  const handleClick = () => {
    onClick && onClick(id);
  };

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

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