lucid-ui/dist/esm/components/Underline/Underline.js

A UI component library from Xandr.

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { partitionText } from '../../util/text-manipulation';
import { lucidClassNames } from '../../util/style-helpers';
const cx = lucidClassNames.bind('&-Underline');
const { node, string, instanceOf, oneOfType } = PropTypes;
const matchAllRegexp = /^.*$/;
export const Underline = ({ className, children, match, ...passThroughs }) => {
    if (!_.isRegExp(match)) {
        if (_.isString(match)) {
            match = new RegExp(_.escapeRegExp(match), 'i');
        }
        else {
            match = matchAllRegexp;
        }
    }
    if (!_.isString(children)) {
        return (React.createElement("span", { className: cx('&', className), ...passThroughs },
            React.createElement("span", { style: match === matchAllRegexp
                    ? { textDecoration: 'underline' }
                    : undefined }, children)));
    }
    const [pre, matchText, post] = partitionText(children, match);
    return (React.createElement("span", { className: cx('&', className), ...passThroughs }, [
        pre && React.createElement("span", { key: 'pre' }, pre),
        matchText && (React.createElement("span", { key: 'match', style: { textDecoration: 'underline' } }, matchText)),
        post && React.createElement("span", { key: 'post' }, post),
    ]));
};
Underline.displayName = 'Underline';
Underline.peek = {
    description: `Underlines a portion of text that matches a given pattern.`,
    categories: ['controls', 'selectors'],
};
Underline.propTypes = {
    /**
        Appended to the component-specific class names set on the root element.
    */
    className: string,
    /**
        Text to be partially or fully underlined. If non-text is passed as
        children, it will not attempt to match the given pattern.
    */
    children: node,
    /**
        The first match of the given pattern has the underline style applied to it.
    */
    match: oneOfType([string, instanceOf(RegExp)]),
};
export default Underline;
//# sourceMappingURL=Underline.js.map