Comments (3)
Thanks! Option 3 is what's happening, so I'll head over there and see if there's anything to be done.
from hull.
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:
- 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. - If you have that in place are you able to log the photo data somewhere to see if your hotspot data is coming through?
- 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.
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)
- Is it true that you have to redeploy every time a product is added? HOT 4
- Sanity CLI v3 causes project to not work correctly HOT 1
- GBP Cart Subtotals
- Sanity not connecting to Storefront HOT 2
- Products not appearing in Sanity—how to bring them over? HOT 1
- Bundles created with the Shopify App (Summer 2023) can't be added to cart HOT 11
- Mobile Crashes When Interacting On Page HOT 6
- marketing starter upgrade packages HOT 1
- Client-side exception HOT 7
- unknown field found
- Sync seems inconsistent HOT 1
- Can't locate Sanity Starter HOT 1
- Not able to Import Shopify Products into sanity Studio
- Application error: a client-side exception has occurred (see the browser console for more information). HOT 2
- Issue cloning project from Vercel HOT 1
- TypeError: Cannot read properties of undefined (reading 'replace') HOT 2
- I got the same error after following the directions. I cloned the repository with git clonee and followed the instructions in the ReadMe.md file in the root. Localhost:3333 and localhost:3000 are running, I don't see any errors. HOT 2
- Tried deploying Hull from Vercel Interface. HOT 1
- Sanity Create Project is not working HOT 1
- @reach/rect error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hull.