lucid-ui
Version:
A UI component library from AppNexus.
44 lines • 1.73 kB
JavaScript
import _ from 'lodash';
import classNames from 'classnames';
const RANDOM_INTEGER = _.random(0, Number.MAX_SAFE_INTEGER);
/**
* bindClassNames
*
* Returns a version of the `classnames` functions where `&` is bound to a given
* value. The returned functions can be further bound to more specific values for
* `&` which allows your bound classnames to look closer to style selector.
*
* Examples:
* bindClassNames('lucid')('&-Button') === 'lucid-Button'
* bindClassNames('lucid').bind('&-Button')('&-active') === 'lucid-Button-active'
*/
export function bindClassNames(value = '', variable = /&/g) {
// We left `any` here because the classNames @types package doesn't export
// the right types for us to be able to use. It accepts a fairly wide range
// of input.
function cx(...args) {
return _.map(classNames(...args).split(' '), (className) => className.replace(variable, value)).join(' ');
}
return _.assign(cx, {
bind(nextValue = value, ...args) {
return bindClassNames(nextValue.replace(variable, value), ...args);
},
});
}
export const NAMESPACE = typeof LUCID_CSS_NAMESPACE !== 'undefined' ? LUCID_CSS_NAMESPACE : 'lucid'; // eslint-disable-line no-undef
/**
* Exports a lucid-bound version of classnames, which can be make more specific
* to a component.
*
* Example:
* const cx = lucidClassNames.bind('&-Button')
*
* cx('&',{
* '&-active': true
* }, ['custom-classname']) === 'lucid-Button lucid-Button-active custom-classname'
*/
export const lucidClassNames = bindClassNames(NAMESPACE);
export function uniqueName(prefix) {
return _.uniqueId(`${RANDOM_INTEGER}-${prefix}`);
}
//# sourceMappingURL=style-helpers.js.map