@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.07 kB
Source Map (JSON)
{"version":3,"file":"RatingItem.cjs","names":["useRatingContext","useDirection","Box","StarSymbol"],"sources":["../../../../src/components/Rating/RatingItem/RatingItem.tsx"],"sourcesContent":["import { Box, BoxProps, ElementProps, useDirection } from '../../../core';\nimport { useRatingContext } from '../Rating.context';\nimport { StarSymbol } from '../StarSymbol/StarSymbol';\n\nexport interface RatingItemProps extends BoxProps, ElementProps<'input', 'value' | 'size'> {\n getSymbolLabel: ((value: number) => string) | undefined;\n emptyIcon?: React.ReactNode | ((value: number) => React.ReactNode);\n fullIcon?: React.ReactNode | ((value: number) => React.ReactNode);\n full: boolean;\n active: boolean;\n fractionValue: number;\n value: number;\n id: string;\n onChange: (event: React.ChangeEvent<HTMLInputElement> | number) => void;\n onInputChange: (event: React.ChangeEvent<HTMLInputElement> | number) => void;\n}\n\nexport function RatingItem({\n getSymbolLabel,\n emptyIcon,\n fullIcon,\n full,\n active,\n value,\n readOnly,\n fractionValue,\n color,\n id,\n onBlur,\n onChange,\n onInputChange,\n style,\n ...others\n}: RatingItemProps) {\n const ctx = useRatingContext();\n const _fullIcon = typeof fullIcon === 'function' ? fullIcon(value) : fullIcon;\n const _emptyIcon = typeof emptyIcon === 'function' ? emptyIcon(value) : emptyIcon;\n const { dir } = useDirection();\n\n return (\n <>\n {!readOnly && (\n <input\n {...ctx.getStyles('input')}\n onKeyDown={(event) => (event.key === ' ' || event.key === 'Enter') && onChange(value)}\n id={id}\n type=\"radio\"\n data-active={active || undefined}\n aria-label={getSymbolLabel?.(value)}\n value={value}\n onBlur={onBlur}\n onChange={onInputChange}\n {...others}\n />\n )}\n\n <Box\n component={readOnly ? 'div' : 'label'}\n {...ctx.getStyles('label')}\n data-read-only={readOnly || undefined}\n htmlFor={id}\n onClick={readOnly ? undefined : () => onChange(value)}\n __vars={{\n '--rating-item-z-index': (fractionValue === 1 ? undefined : active ? 2 : 0)?.toString(),\n }}\n >\n <Box\n {...ctx.getStyles('symbolBody')}\n __vars={{\n '--rating-symbol-clip-path':\n fractionValue === 1\n ? undefined\n : dir === 'ltr'\n ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)`\n : `inset(0 0 0 ${active ? 100 - fractionValue * 100 : 100}% )`,\n }}\n >\n {full\n ? _fullIcon || <StarSymbol type=\"full\" />\n : _emptyIcon || <StarSymbol type=\"empty\" />}\n </Box>\n </Box>\n </>\n );\n}\n\nRatingItem.displayName = '@mantine/core/RatingItem';\n"],"mappings":";;;;;;;;AAiBA,SAAgB,WAAW,EACzB,gBACA,WACA,UACA,MACA,QACA,OACA,UACA,eACA,OACA,IACA,QACA,UACA,eACA,OACA,GAAG,UACe;CAClB,MAAM,MAAMA,uBAAAA,kBAAkB;CAC9B,MAAM,YAAY,OAAO,aAAa,aAAa,SAAS,MAAM,GAAG;CACrE,MAAM,aAAa,OAAO,cAAc,aAAa,UAAU,MAAM,GAAG;CACxE,MAAM,EAAE,QAAQC,0BAAAA,cAAc;AAE9B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,CAAC,YACA,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,GAAI,IAAI,UAAU,QAAQ;EAC1B,YAAY,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,YAAY,SAAS,MAAM;EACjF;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,cAAY,iBAAiB,MAAM;EAC5B;EACC;EACR,UAAU;EACV,GAAI;EACJ,CAAA,EAGJ,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAW,WAAW,QAAQ;EAC9B,GAAI,IAAI,UAAU,QAAQ;EAC1B,kBAAgB,YAAY,KAAA;EAC5B,SAAS;EACT,SAAS,WAAW,KAAA,UAAkB,SAAS,MAAM;EACrD,QAAQ,EACN,0BAA0B,kBAAkB,IAAI,KAAA,IAAY,SAAS,IAAI,IAAI,UAAU,EACxF;YAED,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,aAAa;GAC/B,QAAQ,EACN,6BACE,kBAAkB,IACd,KAAA,IACA,QAAQ,QACN,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD,eAAe,SAAS,MAAM,gBAAgB,MAAM,IAAI,MACjE;aAEA,OACG,aAAa,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD,EAAY,MAAK,QAAS,CAAA,GACvC,cAAc,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,YAAD,EAAY,MAAK,SAAU,CAAA;GACzC,CAAA;EACF,CAAA,CACL,EAAA,CAAA;;AAIP,WAAW,cAAc"}