| 1 | {"version":3,"file":"Tag.js","sources":["../src/components/Tag/Tag.js"],"sourcesContent":["import React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { useTheme } from '../../theme'\nimport { GU, textStyle } from '../../style'\nimport { unselectable } from '../../utils'\n\nconst MODE_INDICATOR = 'indicator'\nconst MODE_IDENTIFIER = 'identifier'\nconst MODE_NEW = 'new'\nconst MODE_ACTIVITY = 'activity'\n\nconst SIZE_NORMAL = 'normal'\nconst SIZE_SMALL = 'small'\n\nconst COUNT_DEFAULT = 2\n\nfunction useMode(mode) {\n const theme = useTheme()\n\n if (mode === MODE_IDENTIFIER) {\n return {\n background: theme.tagIdentifier,\n color: theme.tagIdentifierContent,\n size: SIZE_NORMAL,\n }\n }\n\n if (mode === MODE_NEW) {\n return {\n background: theme.tagNew,\n color: theme.tagNewContent,\n size: SIZE_NORMAL,\n }\n }\n\n if (mode === MODE_ACTIVITY) {\n return {\n background: theme.tagActivity,\n color: theme.tagActivityContent,\n size: SIZE_SMALL,\n }\n }\n\n // mode === MODE_INDICATOR (default)\n return {\n background: theme.tagIndicator,\n color: theme.tagIndicatorContent,\n size: SIZE_NORMAL,\n }\n}\n\nfunction getSize(size, { uppercase, discMode, iconAndLabel }) {\n if (size === SIZE_SMALL) {\n return `\n min-width: ${2 * GU}px;\n width: ${discMode ? `${2 * GU}px` : 'auto'};\n height: ${2 * GU}px;\n padding: ${discMode ? '0' : `0 ${0.5 * GU}px`};\n padding-top: ${uppercase ? '0.5px' : 0};\n border-radius: ${2 * GU}px;\n ${textStyle('label3')};\n font-weight: 600;\n `\n }\n\n // normal\n return `\n min-width: ${2.5 * GU}px;\n width: ${discMode ? `${3 * GU}px` : 'auto'};\n height: ${2.5 * GU}px;\n padding: ${discMode ? '0' : `0 ${1.5 * GU}px`} ;\n padding-top: ${uppercase ? '1px' : 0};\n ${iconAndLabel ? `padding-left: ${1.25 * GU}px` : ''};\n border-radius: ${2.5 * GU}px;\n ${textStyle('label2')};\n font-weight: 600;\n `\n}\n\nfunction useLabel({ label = '', limitDigits }) {\n const finalLabel = useMemo(() => {\n if (limitDigits === false) {\n return typeof label === 'number' ? String(label) : label || ''\n }\n\n const digits = typeof limitDigits === 'number' ? limitDigits : COUNT_DEFAULT\n const parsed = parseInt(label, 10)\n\n if (isNaN(parsed)) {\n return label || ''\n }\n\n const max = Math.pow(10, digits) - 1\n const formattedValue = parsed > max ? `${max}+` : parsed\n\n return String(formattedValue)\n }, [label, limitDigits])\n\n return finalLabel\n}\n\nfunction Tag({\n background,\n children,\n color,\n limitDigits,\n icon,\n label,\n mode,\n size,\n uppercase,\n ...props\n}) {\n if ((icon || label !== undefined) && children !== undefined) {\n throw new Error('Tag: you cannot use icon or label with children.')\n }\n\n const modeProps = useMode(mode)\n\n const finalSize = size || modeProps.size\n const finalLabel = useLabel({\n label: label !== undefined ? label : children,\n limitDigits,\n })\n\n const sizeStyles = getSize(finalSize, {\n uppercase,\n discMode:\n // icon only\n (icon && !finalLabel) ||\n // label only, using 1 or 0 chars\n (!icon && typeof finalLabel === 'string' && finalLabel.length < 2),\n iconAndLabel: icon && finalLabel,\n })\n\n // Slightly tweak the alignment when there are no descenders,\n // to make the characters look more aligned.\n const alignmentCorrection =\n finalSize === SIZE_NORMAL &&\n (uppercase || typeof label === 'number' || limitDigits !== false)\n\n return (\n <span\n css={`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n ${sizeStyles};\n ${!uppercase ? 'text-transform: unset' : ''};\n color: ${color || modeProps.color};\n background: ${background || modeProps.background};\n ${unselectable};\n `}\n {...props}\n >\n {icon && (\n <span\n css={`\n display: flex;\n align-items: center;\n margin-right: ${finalLabel ? 0.25 * GU : 0}px;\n `}\n >\n {icon}\n </span>\n )}\n <span\n css={`\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: ${alignmentCorrection ? '1px' : '0'};\n `}\n >\n {finalLabel}\n </span>\n </span>\n )\n}\n\nTag.propTypes = {\n background: PropTypes.string,\n children: PropTypes.node,\n color: PropTypes.string,\n limitDigits: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n icon: PropTypes.node,\n label: PropTypes.oneOfType([PropTypes.node, PropTypes.number]),\n mode: PropTypes.oneOf([\n MODE_IDENTIFIER,\n MODE_NEW,\n MODE_INDICATOR,\n MODE_ACTIVITY,\n ]),\n size: PropTypes.oneOf([SIZE_NORMAL, SIZE_SMALL]),\n uppercase: PropTypes.bool,\n}\n\nTag.defaultProps = {\n uppercase: true,\n limitDigits: false,\n}\n\nexport default Tag\n"],"names":["MODE_INDICATOR","MODE_IDENTIFIER","MODE_NEW","MODE_ACTIVITY","SIZE_NORMAL","SIZE_SMALL","COUNT_DEFAULT","useMode","mode","theme","useTheme","background","tagIdentifier","color","tagIdentifierContent","size","tagNew","tagNewContent","tagActivity","tagActivityContent","tagIndicator","tagIndicatorContent","getSize","uppercase","discMode","iconAndLabel","GU","textStyle","useLabel","label","limitDigits","finalLabel","useMemo","String","digits","parsed","parseInt","isNaN","max","Math","pow","formattedValue","unselectable","Tag","children","icon","props","undefined","Error","modeProps","finalSize","sizeStyles","length","alignmentCorrection","React","propTypes","PropTypes","string","node","oneOfType","bool","number","oneOf","defaultProps"],"mappings":"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"} |