@prosperitainova/dumbo-react-native/lib/module/components/List/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Text } from '../Text';

/** Props for List component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * List component for rendering an ordered or unordered list
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/List.tsx | Example code}
 */
export class List extends React.Component {
  letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
  get styles() {
    return StyleSheet.create({
      itemWrapper: {
        flexDirection: 'row',
        paddingBottom: 4
      },
      indicator: {
        marginRight: 10
      },
      content: {
        flex: 1
      }
    });
  }
  getIndicator(index) {
    const {
      type,
      nested
    } = this.props;
    if (type === 'ordered') {
      if (nested) {
        let value = this.letters[index % 26] || '?';
        if (index >= 26) {
          const subIndex = Math.floor(index / 26) - 1;
          const subValue = this.letters[subIndex % 26] || '?';
          value = subValue + value;
        }
        return /*#__PURE__*/_jsx(Text, {
          text: value + '.'
        });
      } else {
        return /*#__PURE__*/_jsx(Text, {
          text: String(index + 1) + '.'
        });
      }
    } else {
      if (nested) {
        return /*#__PURE__*/_jsx(Text, {
          text: '\uFFED'
        });
      } else {
        return /*#__PURE__*/_jsx(Text, {
          text: '\u2014'
        });
      }
    }
  }
  getListItem(item, index) {
    const {
      textType
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.itemWrapper,
      children: [/*#__PURE__*/_jsx(View, {
        style: this.styles.indicator,
        children: this.getIndicator(index)
      }), /*#__PURE__*/_jsx(View, {
        style: this.styles.content,
        children: typeof item === 'string' ? /*#__PURE__*/_jsx(Text, {
          type: textType,
          text: item
        }) : item
      })]
    }, index);
  }
  render() {
    const {
      items,
      componentProps,
      style
    } = this.props;
    return /*#__PURE__*/_jsx(View, {
      style: style,
      ...(componentProps || {}),
      children: items.map((item, index) => this.getListItem(item, index))
    });
  }
}
//# sourceMappingURL=index.js.map