Advanced Snippets

This is a collection of some snippets that we think might be useful. If you have a snippet that you think should be here please let us know.

ChoiceField

The first ChoiceField example is just a standard ChoiceField with a popover.

import {Box, Button, Text} from '@chakra-ui/react'
import {fields} from '@snek-at/jaen-pages'

const Component = () => {
  return(
    <fields.ChoiceField
      fieldName="component-choice"
      options={['Option1', 'Option2', 'Option3']}
      initValue="Option1"
      onRenderPopover={(selection, options, select) => {
        return (
          <Box>
            {options.map((option, key) => {
              return (
                <Button
                  key={key}
                  colorScheme="gray"
                  variant="ghost"
                  onClick={() => select(option)}
                  disabled={option === selection}>
                    {option}
                </Button>
              )
            })}
          </Box>
        )
      }}
      onRender={selection => {
        return (
          <Text mb="4" fontSize="xl">
            {selection}
          </Text>
        )
      }}
    />
  )
}

The second example we picked is a ChoiceField without a popover using jaenverster's Chakra-UI-Steps. Note: To use this you have to customize your Chakra-UI theme.

import {fields} from '@snek-at/jaen-pages'
import {Step, Steps} from 'chakra-ui-steps'

const Component = () => {
  return(
    <fields.ChoiceField
      fieldName="stepper"
      options={['Step1', 'Step2', 'Step3', 'Step4', 'Step5']}
      initValue={'Step1'}
      onRenderPopover={null}
      onRender={(selection, options, onSelect, isEditing) => {
        return (
          <Steps activeStep={selection} colorScheme="gray">
            {options.map((option, index) => (
              <Step
                cursor={isEditing ? 'pointer' : 'default'}
                isCompletedStep={
                  selection === options.length - 1 ? true : undefined
                }
                label={option}
                key={index}
                onClick={
                  isEditing ? () => onSelect(index) : () => null
                }></Step>
            ))}
          </Steps>
        )
      }}
    />
  )
}

LightBox

This is a simple Chakra-UI Jaen LightBox. For this to work you have to pass it a ImageField as previewImage and also as child. Keep in mind that these ImageFields must have the same fieldName.

import {
  Box,
  useDisclosure,
  Modal,
  ModalOverlay,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  Center
} from '@chakra-ui/react'
import {useOptions, withRedux} from '@snek-at/jaen-pages'
import * as React from 'react'
import styled from '@emotion/styled'

interface LightBoxProps {
  previewImage: React.ReactNode
}

const DefaultImage = styled(Box)`
  cursor: ${props => (props.isEditing ? 'normal' : 'zoom-in')};
  filter: ${props => (props.isEditing ? '' : 'brightness(80%)')};
`

const LightBox: React.FC<LightBoxProps> = ({previewImage, children}) => {
  const {onToggle, isOpen, onClose} = useDisclosure()
  const {isEditing} = useOptions()
  const togglePreview = () => isEditing === false && onToggle()

  return (
    <>
      <DefaultImage isEditing onClick={togglePreview}>
        {children}
      </DefaultImage>
      <Modal onClose={onClose} isOpen={isOpen} isCentered size="6xl">
        <ModalOverlay />
        <ModalContent>
          <ModalCloseButton color="red" />
          <ModalBody p="0" width="100%" height="100%">
            <Center>{previewImage}</Center>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  )
}

export default withRedux(LightBox)