Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 26x 1x 1x 1x 26x 26x 26x 26x 1x 1x | /*** 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/lib/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 (
<Container
tagName='ul'
isCover={false}
alignBox={align === 'vertical' ? 'column' : 'row'}
className={`${style.container} ${alignType} ${type != 'alphabetical' ? style.numbers : ''}`}
dataId='navigationDiv'
dataSelectorId={dataSelectorId}
>
<Box
tagName='li'
className={`${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`}
dataId={`All_${dataId}`}
>
<span onClick={this.handleSelectAll} className={`${style.heading} ${style.letter}`} data-title={allTitle}>
{allText}
</span>
</Box>
{letters.map((letter) => (
<AlphabeticListItem
id={letter}
isActive={letter === selectedCharacter}
onClick={this.handleSelect}
text={letter}
key={letter}
dataId={dataId}
/>
))}
</Container>
);
}
}
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 (
<Box
flexible
tagName='li'
className={`${style.list} ${isActive ? style.selected : ''}`}
onClick={this.handleClick}
dataId={`${text}_${dataId}`}
>
<span className={style.letter}>{text}</span>
</Box>
);
}
}
AlphabeticListItem.propTypes = AlphabeticListItem_propTypes;
AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;
|