Control Admin Display for Number Arrays

zed0547last year

4

• 

  samuelkblast year

  hey

  @654031862146007055

  
  
  

  I was moving

  https://www.reactbits.dev/backgrounds/threads

  component into a block to understand better fields in payload and exploit the potential of Blocks.

  
  

  since the component had already defined the prop color as

  color?: [number, number, number]

  , I took it from there and tried to connect to payloadCMS

  
  
  

  I agree, an array allows n elements, I was forcing it using maxRows, but felt wierd.

  
  
  

  currently, I do:

  
  

  fields: [
      {
        name: 'R',
        type: 'number',
        min: 0,
        max: 255,
      },
      {
        name: 'G',
        type: 'number',
        min: 0,
        max: 255,
      },
      {
        name: 'B',
        type: 'number',
        min: 0,
        max: 255,
      },
  ]

  
  

  and in the compont I map them:

  
  

  import { Threads } from './Component.client'
  
  export type ThreadsBlockProps = {
    R: number
    G: number
    B: number
    amplitude: number
    distance: number
    enableMouseInteraction: boolean
    blockType: 'threads'
  }
  
  type Props = ThreadsBlockProps & {
    className?: string
  }
  
  export const ThreadsBlock: React.FC<Props> = ({
    R,
    G,
    B,
    amplitude,
    distance,
    enableMouseInteraction,
  }) => {
    const color: [number, number, number] = [R, G, B]
    return (
      <div className="w-full h-96 relative">
        <Threads
          color={color}
          amplitude={amplitude}
          distance={distance}
          enableMouseInteraction={enableMouseInteraction}
        />
      </div>
    )
  }

• 

  zed0547last year

  Ah, I see. You're constrained to use the format dictated by this library. In that case, you may have some luck with a custom component that imitates a Number hasMany field, but internally maps it to your three "real" fields that you can just hide from the ui

• 

  samuelkblast year

  sounds good idea, since the library is already open source I thought would be nice to adapt it to blocks and share them with the community 🙂

• 

  zed0547last year

  This is a super cool library

  
  
  

  I think that's a great idea