@geezee/react-ui
Version:
Modern and minimalist React UI library.
30 lines (28 loc) • 2.42 kB
JavaScript
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
var defaultProps = {
maxLength: undefined
};
var Counter = function Counter(_ref) {
var count = _ref.count,
maxLength = _ref.maxLength;
var theme = useTheme();
var hasLimit = useMemo(function () {
return Number.isInteger(maxLength) && maxLength > 0;
}, [maxLength]);
return /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["2364753662", [theme.layout.gapHalf, theme.layout.gapHalf, hasLimit ? theme.palette.cTheme3 : theme.palette.cTheme5, theme.palette.cTheme3, theme.palette.cTheme5]]]) + " " + "counter"
}, /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["2364753662", [theme.layout.gapHalf, theme.layout.gapHalf, hasLimit ? theme.palette.cTheme3 : theme.palette.cTheme5, theme.palette.cTheme3, theme.palette.cTheme5]]]) + " " + "count"
}, count), hasLimit && /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["2364753662", [theme.layout.gapHalf, theme.layout.gapHalf, hasLimit ? theme.palette.cTheme3 : theme.palette.cTheme5, theme.palette.cTheme3, theme.palette.cTheme5]]]) + " " + "separator"
}, "/"), hasLimit && /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["2364753662", [theme.layout.gapHalf, theme.layout.gapHalf, hasLimit ? theme.palette.cTheme3 : theme.palette.cTheme5, theme.palette.cTheme3, theme.palette.cTheme5]]]) + " " + "limit"
}, Math.min(maxLength, Number.MAX_SAFE_INTEGER)), /*#__PURE__*/React.createElement(_JSXStyle, {
id: "2364753662",
dynamic: [theme.layout.gapHalf, theme.layout.gapHalf, hasLimit ? theme.palette.cTheme3 : theme.palette.cTheme5, theme.palette.cTheme3, theme.palette.cTheme5]
}, ".counter.__jsx-style-dynamic-selector{display:inline;position:absolute;bottom:".concat(theme.layout.gapHalf, ";right:").concat(theme.layout.gapHalf, ";}.counter.__jsx-style-dynamic-selector .count.__jsx-style-dynamic-selector{color:").concat(hasLimit ? theme.palette.cTheme3 : theme.palette.cTheme5, ";}.counter.__jsx-style-dynamic-selector .separator.__jsx-style-dynamic-selector{color:").concat(theme.palette.cTheme3, ";}.counter.__jsx-style-dynamic-selector .limit.__jsx-style-dynamic-selector{color:").concat(theme.palette.cTheme5, ";}")));
};
Counter.defaultProps = defaultProps;
export default Counter;