@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.08 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,iBAAiB;CAC7B,MAAM,YAAY,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CACrE,MAAM,aAAa,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI;CACxE,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,CAAC,YACA,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,GAAI,IAAI,UAAU,OAAO;EACzB,YAAY,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,YAAY,SAAS,KAAK;EAChF;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,cAAY,iBAAiB,KAAK;EAC3B;EACC;EACR,UAAU;EACV,GAAI;CACL,CAAA,GAGH,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAW,WAAW,QAAQ;EAC9B,GAAI,IAAI,UAAU,OAAO;EACzB,kBAAgB,YAAY,KAAA;EAC5B,SAAS;EACT,SAAS,WAAW,KAAA,UAAkB,SAAS,KAAK;EACpD,QAAQ,EACN,0BAA0B,kBAAkB,IAAI,KAAA,IAAY,SAAS,IAAI,IAAI,SAAS,EACxF;YAEA,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,YAAY;GAC9B,QAAQ,EACN,6BACE,kBAAkB,IACd,KAAA,IACA,QAAQ,QACN,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD,eAAe,SAAS,MAAM,gBAAgB,MAAM,IAAI,KAClE;aAEC,OACG,aAAa,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD,EAAY,MAAK,OAAQ,CAAA,IACtC,cAAc,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,YAAD,EAAY,MAAK,QAAS,CAAA;EACzC,CAAA;CACF,CAAA,CACL,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc"}