ChoiceField

Table of Contents

• Description
• Code
• Parameters
  • onRender
  • onRenderPopover
• Code Sandbox

Description

The ChoiceField allows you to build React-Components and let the adimistrator of the page decide which of the components to display. You can achieve this by either providing a popover in which the options can be decided or you can return null in the popover and add an onClick to your component for usecases in which all the choices are always displayed or for a boolean like behaviour.

Code

import {fields} from '@snek-at/jaen-pages'

import {Button, Box, Text} from '@chakra-ui/react'

const Component = () => {
  return(
    <fields.ChoiceField 
      fieldName="home-choice"
      options={['option1', 'option2']}
      onRender={(selection /*, options, onSelect, isEditing */) => {
        return <Text>{selection}</Text>
      }}
      onRenderPopOver={(selection, options, select) => {
        return (
          <Box>
            {options.map((option, key) => {
              return (
                <Button
                  key={key}
                  onClick={() => select(option)}
                  disabled={option === selection}>
                  {option}
                </Button>
              )
            })}
          </Box>
        )
      }}
    />
  )
}

export default Component

Parameters

Property	Type	Required	Description
fieldName	string	yes	The fieldName requires you to give the field an identifier that is unique on that page. It is advisable to use descriptive names for fetching purposes.
options	string[]	yes	In the options field you define the options your user has.
onRender	function	yes	onRender allows you to build React-Components of any kind.
onRenderPopover	function or null	yes	onRenderPopOver allows you to build a custom popover for the administrator of the page to select the options. If you don't require a popover just set it to null.

onRender

Property	Type	Description
selection	string	Selection is the currently selected option.
options	string[]	The options array you defined above.
onSelect	function	onSelect allows you to select an option.
isEditing	boolean	isEditing allows you to build a div that only shows if the user is editing the page.

onRenderPopover

Property	Type	Description
selection	string	Selection is the currently selected option.
options	string[]	The options array you defined above.
select	function	select allows you to select an option.

Code Sandbox

WIP