Rating

The Rating component generates a rating scale.

Props:

Properties	Types	Description	Required?	Default
defaultValue	number	The value that the rating scale will start at -- note that the value will override the defaultValue		3
disabled	boolean	disables and grays out component		false
emptyIcon	string	icon of rating that is not selected, example if rating is 4/5 then the emptyIcon is the fifth icon		star_border
emptyIconColor	string	Hex color of the emptyIcon		''
emptyIconVariant	IconVariant	sets the theme of the component IconVariant.Outlined , IconVariant.Round, IconVariant.Sharp, and IconVariant.TwoTone		undefined
icon	string	icon of rating that is selected, example if rating is 4/5 then the Icon is the first four icons		star
iconColor	string	Hex color of the Icon		var(--purplePrimary)
iconVariant	IconVariant	sets the theme of the component IconVariant.Outlined , IconVariant.Round, IconVariant.Sharp, and IconVariant.TwoTone		undefined
max	number	Max rating, set number of icons displayed		5
name	string	html name attribute		rating
onChange	Callback function( error, number, whisper) => {}	calls function when rating is changed		undefine
precision	number	the increment that the rating can increase or decrease		0.5
readOnly	boolean	enables/disables the ability to change the value		false
size	IconSize	size of component: IconSize.Small, IconSize.Medium, IconSize.Large, IconSize.ExtraLarge		IconSize.Medium
value	number	value of rating		undefined

Examples

TypeScript

import { whisper } from '@oliveai/ldk';
import { 
  IconSize,
  IconVariant,
  NewWhisper, 
  UpdateWhisper, 
  Whisper, 
  WhisperComponentType 
} from "@oliveai/ldk/dist/whisper"

const ratingExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
  return {
    label: 'Rating Example',
    components: [
      {
        type: WhisperComponentType.Rating,
        defaultValue: 3,
        disabled: false,
        emptyIcon: 'star',
        emptyIconColor: '#e8e8e8',
        emptyIconVariant: IconVariant.Sharp,
        icon: 'star',
        iconColor: '#f6fa05',
        iconVariant: IconVariant.Sharp,
        max: 10,
        name: 'name',
        onChange: (error: Error, number: number, whisper: Whisper) => {
          console.info(`---Rating number = ${number}---`)
        },
        precision: 1,
        readOnly: false,
        size: IconSize.Medium,
        value: 6,
      }
    ]
  }
})

const newRatingExampleConfig = (async () => {
  await whisper.create(ratingExampleConfig('', '') as NewWhisper);
})

newRatingExampleConfig();

React

import { React, ReactWhisper } from "@oliveai/ldk";
import { IconSize, IconVariant } from "@oliveai/ldk/dist/whisper"

const RatingExample: React.FunctionComponent<Object> = () => { 

  return (
    <oh-whisper label='Rating Example' onClose={ () => {}}>
      <oh-rating
        defaultValue={3}
        disabled={false}
        emptyIcon='star'
        emptyIconColor='#e8e8e8'
        emptyIconVariant={IconVariant.Sharp}
        icon='star'
        iconColor='#f6fa05'
        iconVariant={IconVariant.Sharp}
        max={10}
        name='name'
        onChange={(error, number) => {
          console.info(`---Rating number = ${number}---`)
        }}
        precision={1}
        readOnly={false}
        size={IconSize.Medium}
        value={6}
      />
    </oh-whisper>
  )
}

ReactWhisper.renderNewWhisper(<RatingExample />);