@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
67 lines • 2.29 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* UnorderedList module.
* @module @massds/mayflower-react/UnorderedList
*/
import React from "react";
import PropTypes from "prop-types";
const UnorderedList = props => subList(props);
UnorderedList.propTypes = {
/** The text displayed. */
sublist: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired,
sublist: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired
}))
}))
};
UnorderedList.defaultProps = {
sublist: [{
text: 'This is a list item in an unordered list'
}, {
text: 'An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.'
}, {
text: 'Lists can be nested inside of each other',
sublist: [{
text: 'This is a nested list item'
}, {
text: 'This is another nested list item in an unordered list'
}]
}, {
text: 'This is the last list item'
}]
};
const listItem = (props, itemIndex, ulIndex) => {
const raw = {
__html: props.text
};
const key = "li." + ulIndex + "." + itemIndex;
/* eslint-disable-next-line react/no-danger */
return /*#__PURE__*/React.createElement("li", {
key: key,
dangerouslySetInnerHTML: raw
});
};
listItem.propTypes = process.env.NODE_ENV !== "production" ? {
text: PropTypes.string
} : {};
const subList = props => {
const newProps = _extends({}, props);
if (!Object.prototype.hasOwnProperty.call(newProps, 'ulIndex')) {
newProps.ulIndex = 0;
}
const ulId = "ul." + newProps.ulIndex;
newProps.ulIndex += 1;
const list = newProps.sublist;
return /*#__PURE__*/React.createElement("ul", {
key: ulId
}, list && list.map((item, itemIndex) => {
if (item.sublist) {
const subitem = [listItem(item, itemIndex, ulId)];
subitem.push(subList(item));
return subitem;
}
return listItem(item, itemIndex, ulId);
}));
};
export default UnorderedList;