Giter VIP home page Giter VIP logo

Comments (3)

dnlmzw avatar dnlmzw commented on May 22, 2024 1

Thanks! Option 3 is what's happening, so I'll head over there and see if there's anything to be done.

from hull.

ndimatteo avatar ndimatteo commented on May 22, 2024

Hey there @dnlmzw !

Can you let me know what you mean?

Are the hotspot options not showing up for figure fields used in conditional fields? Or are you not seeing hotspots being applied on the front-end? Or something else?

Just a few preliminary comments:

  1. If you are adding new image fields you'll need to use the imageMeta GROQ from the api to ensure the hotspot data makes it into the frontend.
  2. If you have that in place are you able to log the photo data somewhere to see if your hotspot data is coming through?
  3. If the hotspot options aren't showing up in your Studio, this tells me it's an issue with the custom Conditional Field plugin, which was adapted from here: https://gist.github.com/coxmi/f41aef54d46588fff27651cd0d35212f

from hull.

dnlmzw avatar dnlmzw commented on May 22, 2024

For anyone else interested:

I took the one from @hdoro that can be found here and included the getContext bit from you script and the hotspot is now working.

import React from 'react'
import {
  withDocument,
  withValuePath,
  FormBuilderInput
} from 'part:@sanity/form-builder'

class ConditionalField extends React.PureComponent {
  fieldRef = React.createRef()

  focus() {
    if (this.fieldRef?.current) {
      this.fieldRef.current.focus()
    }
  }

  getContext(level = 1) {
    // gets value path from withValuePath HOC, and applies path to document
    // we remove the last 𝑥 elements from the valuePath

    const valuePath = this.props.getValuePath()
    const removeItems = -Math.abs(level)
    return valuePath.length + removeItems <= 0
      ? this.props.document
      : valuePath.slice(0, removeItems).reduce((context, current) => {
          // basic string path
          if (typeof current === 'string') {
            return context[current] || {}
          }

          // object path with key used on arrays
          if (
            typeof current === 'object' &&
            Array.isArray(context) &&
            current._key
          ) {
            return (
              context.filter(
                item => item._key && item._key === current._key
              )[0] || {}
            )
          }
        }, this.props.document)
  }

  render() {
    const {
      document,
      type,
      value,
      level,
      focusPath,
      onFocus,
      onBlur,
      onChange,
      getValuePath,
      markers = [],
      presence = [],
      compareValue
    } = this.props
    const shouldRenderField = type?.options?.condition
    const renderField = shouldRenderField
      ? shouldRenderField(document, this.getContext.bind(this))
      : true

    if (!renderField) {
      return <div style={{ marginBottom: '-32px' }} />
    }

    const { type: _unusedType, inputComponent, ...usableType } = type
    return (
      <FormBuilderInput
        level={level}
        type={usableType}
        value={value}
        onChange={patchEvent => onChange(patchEvent)}
        path={getValuePath()}
        focusPath={focusPath}
        onFocus={onFocus}
        onBlur={onBlur}
        ref={this.fieldRef}
        markers={markers}
        presence={presence}
        compareValue={compareValue}
      />
    )
  }
}

export default withValuePath(withDocument(ConditionalField))

from hull.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.