sanity-plugin-hotspot-array 0.0.3 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Feedback.js.map +1 -1
- package/lib/HotspotArray.js +14 -11
- package/lib/HotspotArray.js.map +1 -1
- package/lib/Spot.js.map +1 -1
- package/lib/useUnsetInputComponent.js.map +1 -1
- package/package.json +6 -6
- package/src/HotspotArray.tsx +15 -8
package/lib/Feedback.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Feedback.js","names":["Feedback","children"],"sources":["../src/Feedback.tsx"],"sourcesContent":["import React from 'react'\nimport {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}) {\n return (\n <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n <Text>{children}</Text>\n </Card>\n )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,QAAT,OAA8B;EAAA,IAAXC,QAAW,QAAXA,QAAW;EAC3C,oBACE,6BAAC,QAAD;IAAM,OAAO,EAAE,CAAf;IAAkB,MAAM,EAAE,CAA1B;IAA6B,MAAM,EAAE,CAArC;IAAwC,IAAI,EAAC;EAA7C,gBACE,6BAAC,QAAD,QAAOA,QAAP,CADF,CADF;AAKD"}
|
package/lib/HotspotArray.js
CHANGED
|
@@ -33,37 +33,40 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
|
|
|
33
33
|
|
|
34
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
35
|
|
|
36
|
-
function _extends() { _extends = Object.assign
|
|
37
|
-
|
|
38
|
-
var builder = (0, _imageUrl.default)(_client.default);
|
|
39
|
-
|
|
40
|
-
var urlFor = source => builder.image(source);
|
|
36
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
41
37
|
|
|
42
38
|
var imageStyle = {
|
|
43
39
|
width: "100%",
|
|
44
40
|
height: "auto"
|
|
45
41
|
};
|
|
42
|
+
var VALID_ROOT_PATHS = ['document', 'parent'];
|
|
46
43
|
|
|
47
44
|
var HotspotArray = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
48
|
-
var _type$options, _type$options2;
|
|
45
|
+
var _type$options, _type$options2, _type$options3;
|
|
49
46
|
|
|
50
47
|
var type = props.type,
|
|
51
48
|
value = props.value,
|
|
52
49
|
onChange = props.onChange,
|
|
53
|
-
|
|
50
|
+
document = props.document,
|
|
51
|
+
parent = props.parent;
|
|
54
52
|
|
|
55
53
|
var _ref = type !== null && type !== void 0 ? type : {},
|
|
56
54
|
options = _ref.options; // Attempt prevention of infinite loop in <FormBuilderInput />
|
|
57
55
|
// Re-renders can still occur if this Component is used again in a nested field
|
|
58
56
|
|
|
59
57
|
|
|
60
|
-
var typeWithoutInputComponent = (0, _useUnsetInputComponent.useUnsetInputComponent)(type, type === null || type === void 0 ? void 0 : type.inputComponent); // Finding the image from the document,
|
|
58
|
+
var typeWithoutInputComponent = (0, _useUnsetInputComponent.useUnsetInputComponent)(type, type === null || type === void 0 ? void 0 : type.inputComponent); // Finding the image from the imageHotspotPathRoot (defaults to document),
|
|
61
59
|
// using the path from the hotspot's `options` field
|
|
62
60
|
|
|
63
61
|
var displayImage = _react.default.useMemo(() => {
|
|
64
62
|
var _hotspotImage$asset;
|
|
65
63
|
|
|
66
|
-
var
|
|
64
|
+
var builder = (0, _imageUrl.default)(_client.default).dataset(_client.default.config().dataset);
|
|
65
|
+
|
|
66
|
+
var urlFor = source => builder.image(source);
|
|
67
|
+
|
|
68
|
+
var imageHotspotPathRoot = VALID_ROOT_PATHS.includes(options === null || options === void 0 ? void 0 : options.imageHotspotPathRoot) ? props[options.imageHotspotPathRoot] : document;
|
|
69
|
+
var hotspotImage = (0, _get.default)(imageHotspotPathRoot, options === null || options === void 0 ? void 0 : options.hotspotImagePath);
|
|
67
70
|
|
|
68
71
|
if (hotspotImage !== null && hotspotImage !== void 0 && (_hotspotImage$asset = hotspotImage.asset) !== null && _hotspotImage$asset !== void 0 && _hotspotImage$asset._ref) {
|
|
69
72
|
var _getImageDimensions = (0, _assetUtils.getImageDimensions)(hotspotImage.asset._ref),
|
|
@@ -80,7 +83,7 @@ var HotspotArray = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
return null;
|
|
83
|
-
}, [
|
|
86
|
+
}, [type, document]);
|
|
84
87
|
|
|
85
88
|
var handleHotspotImageClick = _react.default.useCallback(event => {
|
|
86
89
|
var nativeEvent = event.nativeEvent; // Calculate the x/y percentage of the click position
|
|
@@ -149,7 +152,7 @@ var HotspotArray = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
149
152
|
alt: "",
|
|
150
153
|
style: imageStyle,
|
|
151
154
|
onClick: handleHotspotImageClick
|
|
152
|
-
})))) : /*#__PURE__*/_react.default.createElement(_Feedback.default, null, type !== null && type !== void 0 && (_type$options = type.options) !== null && _type$options !== void 0 && _type$options.hotspotImagePath ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "No Hotspot image found at path ", /*#__PURE__*/_react.default.createElement("code", null, type === null || type === void 0 ? void 0 : (_type$options2 = type.options) === null || _type$options2 === void 0 ? void 0 : _type$options2.hotspotImagePath)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Define a path in this field using to the image field in this document at ", /*#__PURE__*/_react.default.createElement("code", null, "options.hotspotImagePath"))), /*#__PURE__*/_react.default.createElement(_FormBuilderInput.FormBuilderInput, _extends({}, props, {
|
|
155
|
+
})))) : /*#__PURE__*/_react.default.createElement(_Feedback.default, null, type !== null && type !== void 0 && (_type$options = type.options) !== null && _type$options !== void 0 && _type$options.hotspotImagePath ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "No Hotspot image found at path ", /*#__PURE__*/_react.default.createElement("code", null, type === null || type === void 0 ? void 0 : (_type$options2 = type.options) === null || _type$options2 === void 0 ? void 0 : _type$options2.hotspotImagePath)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Define a path in this field using to the image field in this document at ", /*#__PURE__*/_react.default.createElement("code", null, "options.hotspotImagePath"))), (type === null || type === void 0 ? void 0 : (_type$options3 = type.options) === null || _type$options3 === void 0 ? void 0 : _type$options3.imageHotspotPathRoot) && !VALID_ROOT_PATHS.includes(type.options.imageHotspotPathRoot) && /*#__PURE__*/_react.default.createElement(_Feedback.default, null, "The supplied imageHotspotPathRoot \"", type.options.imageHotspotPathRoot, "\" is not valid, falling back to \"document\". Available values are \"", VALID_ROOT_PATHS.join(', '), "\"."), /*#__PURE__*/_react.default.createElement(_FormBuilderInput.FormBuilderInput, _extends({}, props, {
|
|
153
156
|
type: typeWithoutInputComponent,
|
|
154
157
|
ref: ref
|
|
155
158
|
})));
|
package/lib/HotspotArray.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/HotspotArray.tsx"],"names":["builder","sanityClient","urlFor","source","image","imageStyle","width","height","HotspotArray","React","forwardRef","props","ref","type","value","onChange","sanityDocument","document","options","typeWithoutInputComponent","inputComponent","displayImage","useMemo","hotspotImage","hotspotImagePath","asset","_ref","aspectRatio","Math","round","url","handleHotspotImageClick","useCallback","event","nativeEvent","x","Number","offsetX","srcElement","toFixed","y","offsetY","description","newRow","_key","_type","hotspotDescriptionPath","PatchEvent","from","handleHotspotMove","key","console","warn","hotspotImageRef","useRef","position","length","map","spot","hotspotTooltip"],"mappings":"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","sourcesContent":["/* eslint-disable react/display-name */\n\n// @ts-ignore\nimport sanityClient from 'part:@sanity/base/client'\n// @ts-ignore\nimport {withDocument} from 'part:@sanity/form-builder'\n\nimport React from 'react'\nimport {Card, Flex, Stack, Text} from '@sanity/ui'\nimport {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'\nimport {randomKey} from '@sanity/util/content'\nimport {PatchEvent, setIfMissing, set, insert} from '@sanity/form-builder/PatchEvent'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {getImageDimensions} from '@sanity/asset-utils'\nimport get from 'lodash/get'\n\nimport Spot from './Spot'\nimport { useUnsetInputComponent } from './useUnsetInputComponent'\nimport Feedback from './Feedback'\n\nconst builder = imageUrlBuilder(sanityClient)\nconst urlFor = (source) => builder.image(source)\nconst imageStyle = {width: `100%`, height: `auto`}\n\n\nconst HotspotArray = React.forwardRef((props, ref) => {\n const {type, value, onChange, document: sanityDocument} = props\n const {options} = type ?? {}\n\n // Attempt prevention of infinite loop in <FormBuilderInput />\n // Re-renders can still occur if this Component is used again in a nested field\n const typeWithoutInputComponent = useUnsetInputComponent(type, type?.inputComponent)\n\n // Finding the image from the document,\n // using the path from the hotspot's `options` field\n const displayImage = React.useMemo(() => {\n const hotspotImage = get(sanityDocument, options?.hotspotImagePath)\n\n if (hotspotImage?.asset?._ref) {\n const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n const width = 600\n const height = Math.round(width / aspectRatio)\n const url = urlFor(hotspotImage).width(width).url()\n\n return {width, height, url}\n }\n\n return null\n }, [sanityDocument, type])\n\n const handleHotspotImageClick = React.useCallback((event) => {\n const {nativeEvent} = event\n\n // Calculate the x/y percentage of the click position\n const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))\n const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))\n const description = `New Hotspot at ${x}% x ${y}%`\n\n const newRow = {\n _key: randomKey(12),\n _type: `spot`,\n x,\n y,\n }\n\n if (options?.hotspotDescriptionPath) {\n newRow[options.hotspotDescriptionPath] = description\n }\n\n onChange(PatchEvent.from(setIfMissing([]), insert([newRow], 'after', [-1])))\n }, [])\n\n const handleHotspotMove = React.useCallback(\n (key, x, y) => {\n if (!Number(x) || !Number(y)) {\n console.warn(`Missing or non-number X or Y`, {x, y})\n return\n }\n\n onChange(\n PatchEvent.from(\n // Set the `x` value of this array key item\n set(x, [{_key: key}, 'x']),\n // Set the `y` value of this array key item\n set(y, [{_key: key}, 'y'])\n )\n )\n },\n [value]\n )\n\n const hotspotImageRef = React.useRef(null)\n\n return (\n <Stack space={[2,2,3]}>\n {displayImage?.url ? (\n <div style={{position: `relative`}}>\n {value?.length > 0 &&\n value.map((spot) => (\n <Spot\n key={spot._key}\n spot={spot}\n bounds={hotspotImageRef}\n update={handleHotspotMove}\n hotspotDescriptionPath={options?.hotspotDescriptionPath}\n tooltip={options?.hotspotTooltip}\n />\n ))}\n\n <Card __unstable_checkered shadow={1}>\n <Flex align=\"center\" justify=\"center\">\n <img\n ref={hotspotImageRef}\n src={displayImage.url}\n width={displayImage.width}\n height={displayImage.height}\n alt=\"\"\n style={imageStyle}\n onClick={handleHotspotImageClick}\n />\n </Flex>\n </Card>\n </div>\n ) : (\n <Feedback>\n {type?.options?.hotspotImagePath \n ? <>No Hotspot image found at path <code>{type?.options?.hotspotImagePath}</code></> \n : <>Define a path in this field using to the image field in this document at <code>options.hotspotImagePath</code></>\n }\n </Feedback>\n )}\n <FormBuilderInput {...props} type={typeWithoutInputComponent} ref={ref} />\n </Stack>\n )\n})\n\nexport default withDocument(HotspotArray)\n"],"file":"HotspotArray.js"}
|
|
1
|
+
{"version":3,"file":"HotspotArray.js","names":["imageStyle","width","height","VALID_ROOT_PATHS","HotspotArray","React","forwardRef","props","ref","type","value","onChange","document","parent","options","typeWithoutInputComponent","useUnsetInputComponent","inputComponent","displayImage","useMemo","builder","imageUrlBuilder","sanityClient","dataset","config","urlFor","source","image","imageHotspotPathRoot","includes","hotspotImage","get","hotspotImagePath","asset","_ref","getImageDimensions","aspectRatio","Math","round","url","handleHotspotImageClick","useCallback","event","nativeEvent","x","Number","offsetX","srcElement","toFixed","y","offsetY","description","newRow","_key","randomKey","_type","hotspotDescriptionPath","PatchEvent","from","setIfMissing","insert","handleHotspotMove","key","console","warn","set","hotspotImageRef","useRef","position","length","map","spot","hotspotTooltip","join","withDocument"],"sources":["../src/HotspotArray.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n\n// @ts-ignore\nimport sanityClient from 'part:@sanity/base/client'\n// @ts-ignore\nimport {withDocument} from 'part:@sanity/form-builder'\n\nimport React from 'react'\nimport {Card, Flex, Stack, Text} from '@sanity/ui'\nimport {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'\nimport {randomKey} from '@sanity/util/content'\nimport {PatchEvent, setIfMissing, set, insert} from '@sanity/form-builder/PatchEvent'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {getImageDimensions} from '@sanity/asset-utils'\nimport get from 'lodash/get'\n\nimport Spot from './Spot'\nimport { useUnsetInputComponent } from './useUnsetInputComponent'\nimport Feedback from './Feedback'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nconst HotspotArray = React.forwardRef((props, ref) => {\n const {type, value, onChange, document, parent} = props\n const {options} = type ?? {}\n\n // Attempt prevention of infinite loop in <FormBuilderInput />\n // Re-renders can still occur if this Component is used again in a nested field\n const typeWithoutInputComponent = useUnsetInputComponent(type, type?.inputComponent)\n\n // Finding the image from the imageHotspotPathRoot (defaults to document),\n // using the path from the hotspot's `options` field\n const displayImage = React.useMemo(() => {\n const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset)\n const urlFor = (source) => builder.image(source)\n\n const imageHotspotPathRoot = VALID_ROOT_PATHS.includes(options?.imageHotspotPathRoot) ? props[options.imageHotspotPathRoot] : document\n const hotspotImage = get(imageHotspotPathRoot, options?.hotspotImagePath)\n\n if (hotspotImage?.asset?._ref) {\n const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n const width = 600\n const height = Math.round(width / aspectRatio)\n const url = urlFor(hotspotImage).width(width).url()\n\n return {width, height, url}\n }\n\n return null\n }, [type, document])\n\n const handleHotspotImageClick = React.useCallback((event) => {\n const {nativeEvent} = event\n\n // Calculate the x/y percentage of the click position\n const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))\n const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))\n const description = `New Hotspot at ${x}% x ${y}%`\n\n const newRow = {\n _key: randomKey(12),\n _type: `spot`,\n x,\n y,\n }\n\n if (options?.hotspotDescriptionPath) {\n newRow[options.hotspotDescriptionPath] = description\n }\n\n onChange(PatchEvent.from(setIfMissing([]), insert([newRow], 'after', [-1])))\n }, [])\n\n const handleHotspotMove = React.useCallback(\n (key, x, y) => {\n if (!Number(x) || !Number(y)) {\n console.warn(`Missing or non-number X or Y`, {x, y})\n return\n }\n\n onChange(\n PatchEvent.from(\n // Set the `x` value of this array key item\n set(x, [{_key: key}, 'x']),\n // Set the `y` value of this array key item\n set(y, [{_key: key}, 'y'])\n )\n )\n },\n [value]\n )\n\n const hotspotImageRef = React.useRef(null)\n\n return (\n <Stack space={[2,2,3]}>\n {displayImage?.url ? (\n <div style={{position: `relative`}}>\n {value?.length > 0 &&\n value.map((spot) => (\n <Spot\n key={spot._key}\n spot={spot}\n bounds={hotspotImageRef}\n update={handleHotspotMove}\n hotspotDescriptionPath={options?.hotspotDescriptionPath}\n tooltip={options?.hotspotTooltip}\n />\n ))}\n\n <Card __unstable_checkered shadow={1}>\n <Flex align=\"center\" justify=\"center\">\n <img\n ref={hotspotImageRef}\n src={displayImage.url}\n width={displayImage.width}\n height={displayImage.height}\n alt=\"\"\n style={imageStyle}\n onClick={handleHotspotImageClick}\n />\n </Flex>\n </Card>\n </div>\n ) : (\n <Feedback>\n {type?.options?.hotspotImagePath\n ? <>No Hotspot image found at path <code>{type?.options?.hotspotImagePath}</code></>\n : <>Define a path in this field using to the image field in this document at <code>options.hotspotImagePath</code></>\n }\n </Feedback>\n )}\n {type?.options?.imageHotspotPathRoot && !VALID_ROOT_PATHS.includes(type.options.imageHotspotPathRoot) &&\n <Feedback>\n The supplied imageHotspotPathRoot \"{type.options.imageHotspotPathRoot}\" is not valid, falling back to \"document\". Available values are \"{VALID_ROOT_PATHS.join(', ')}\".\n </Feedback>}\n <FormBuilderInput {...props} type={typeWithoutInputComponent} ref={ref} />\n </Stack>\n )\n})\n\nexport default withDocument(HotspotArray)\n"],"mappings":"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"}
|
package/lib/Spot.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Spot.js","names":["dragStyle","width","height","position","dotStyle","borderRadius","pointerEvents","round","num","Math","Spot","spot","bounds","undefined","update","hotspotDescriptionPath","tooltip","React","useState","x","y","setXY","current","getBoundingClientRect","rect","setRect","isDragging","setIsDragging","useEffect","clientRect","handleDragEnd","useCallback","event","srcElement","style","transform","split","map","v","match","pop","replace","currentX","currentY","Number","console","warn","newX","newY","safeX","max","min","safeY","_key","createElement","maxWidth","get"],"sources":["../src/Spot.tsx"],"sourcesContent":["import React from 'react'\nimport {Box, Card, Text, Tooltip} from '@sanity/ui'\nimport {motion} from 'framer-motion'\nimport get from 'lodash/get'\n\nconst dragStyle = {\n width: `1rem`,\n height: `1rem`,\n position: `absolute`,\n}\n\nconst dotStyle = {\n ...dragStyle,\n borderRadius: `50%`,\n // make sure pointer events only run on the parent\n pointerEvents: `none`,\n}\n\nconst round = (num) => Math.round(num * 100) / 100\n\nexport default function Spot({spot, bounds = undefined, update, hotspotDescriptionPath = ``, tooltip}) {\n // x/y are stored as % but need to be displayed as px\n const [{x, y}, setXY] = React.useState({x: 0, y: 0})\n const [rect, setRect] = React.useState(bounds?.current ? bounds.current.getBoundingClientRect() : {width: 0, height:0})\n const [isDragging, setIsDragging] = React.useState(false)\n\n React.useEffect(() => {\n const clientRect = bounds?.current?.getBoundingClientRect()\n\n if (clientRect) {\n // So convert % to px once we know the height/width of the image\n setXY({\n x: round(clientRect.width * (spot.x / 100)),\n y: round(clientRect.height * (spot.y / 100)),\n })\n\n if (!rect.width || !rect.height) {\n setRect(clientRect)\n }\n }\n }, [bounds, bounds.current])\n\n const handleDragEnd = React.useCallback(\n (event) => {\n setIsDragging(false)\n\n // I don't know why, but framer-motion doesn't give you the actual transform values\n // So we have to regex the `px` values off the inline styles\n const [currentX, currentY] = event.srcElement.style.transform.split(` `).map((v) => {\n return v\n ? v\n .match(/\\(([^)]+)\\)/)\n .pop()\n .replace(`px`, ``)\n : null\n })\n\n if (!Number(currentX) || !Number(currentY)) {\n return console.warn(`Missing or non-number X or Y`, {currentX, currentY}, event.srcElement)\n }\n\n if (!rect.width || !rect.height) {\n return console.warn(`Rect width/height not yet set`, {rect}, bounds?.current)\n }\n\n // Which we need to convert back to `%` to patch the document\n const newX = round((currentX * 100) / rect.width)\n const newY = round((currentY * 100) / rect.height)\n \n // Don't go below 0 or above 100\n const safeX = Math.max(0, Math.min(100, newX))\n const safeY = Math.max(0, Math.min(100, newY))\n\n update(spot._key, safeX, safeY)\n },\n\n [spot]\n )\n\n if (!x || !y) {\n return null\n }\n\n return (\n <Tooltip\n key={spot._key}\n disabled={isDragging}\n boundaryElement={bounds.current}\n portal\n content={\n tooltip && typeof tooltip === 'function' ? (\n React.createElement(tooltip, {spot})\n ) : (\n <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n <Text textOverflow=\"ellipsis\">{hotspotDescriptionPath ? get(spot, hotspotDescriptionPath) : `${spot.x}% x ${spot.y}%`}</Text>\n </Box>\n )\n }\n >\n <motion.div\n drag\n dragConstraints={bounds}\n dragMomentum={false}\n initial={{x, y}}\n onDragEnd={handleDragEnd}\n onDragStart={() => setIsDragging(true)}\n style={dragStyle}\n >\n <Card tone=\"primary\" shadow={3} style={dotStyle} />\n </motion.div>\n </Tooltip>\n )\n}"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"useUnsetInputComponent.js","names":["useUnsetInputComponent","type","component","React","useMemo","unsetInputComponent","t","inputComponent","undefined","typeOfType"],"sources":["../src/useUnsetInputComponent.ts"],"sourcesContent":["import React from 'react'\n\nexport function useUnsetInputComponent(type, component) {\n return React.useMemo(() => unsetInputComponent(type, component), [type, component])\n }\n \n function unsetInputComponent(type, component) {\n const t = {\n ...type,\n inputComponent: type.inputComponent === component ? undefined : type.inputComponent,\n }\n const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined\n return {\n ...t,\n type: typeOfType,\n }\n }"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAEO,SAASA,sBAAT,CAAgCC,IAAhC,EAAsCC,SAAtC,EAAiD;EACpD,OAAOC,cAAA,CAAMC,OAAN,CAAc,MAAMC,mBAAmB,CAACJ,IAAD,EAAOC,SAAP,CAAvC,EAA0D,CAACD,IAAD,EAAOC,SAAP,CAA1D,CAAP;AACD;;AAED,SAASG,mBAAT,CAA6BJ,IAA7B,EAAmCC,SAAnC,EAA8C;EAC5C,IAAMI,CAAC,mCACFL,IADE;IAELM,cAAc,EAAEN,IAAI,CAACM,cAAL,KAAwBL,SAAxB,GAAoCM,SAApC,GAAgDP,IAAI,CAACM;EAFhE,EAAP;;EAIA,IAAME,UAAU,GAAGH,CAAC,CAACL,IAAF,GAASI,mBAAmB,CAACC,CAAC,CAACL,IAAH,EAASC,SAAT,CAA5B,GAAkDM,SAArE;EACA,uCACKF,CADL;IAEEL,IAAI,EAAEQ;EAFR;AAID"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sanity-plugin-hotspot-array",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "A configurable Custom Input for Arrays that will add and update items by clicking on an Image",
|
|
5
5
|
"main": "lib/HotspotArray.js",
|
|
6
6
|
"scripts": {
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
"license": "MIT",
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@sanity/asset-utils": "^1.2.3",
|
|
32
|
-
"@sanity/base": "^2.
|
|
33
|
-
"@sanity/form-builder": "^2.
|
|
34
|
-
"@sanity/ui": "^0.
|
|
35
|
-
"framer-motion": "^
|
|
36
|
-
"husky": "^7.0.
|
|
32
|
+
"@sanity/base": "^2.27.0",
|
|
33
|
+
"@sanity/form-builder": "^2.27.0",
|
|
34
|
+
"@sanity/ui": "^0.37.5",
|
|
35
|
+
"framer-motion": "^6.2.6",
|
|
36
|
+
"husky": "^7.0.4"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"eslint": "^7.32.0",
|
package/src/HotspotArray.tsx
CHANGED
|
@@ -18,23 +18,26 @@ import Spot from './Spot'
|
|
|
18
18
|
import { useUnsetInputComponent } from './useUnsetInputComponent'
|
|
19
19
|
import Feedback from './Feedback'
|
|
20
20
|
|
|
21
|
-
const builder = imageUrlBuilder(sanityClient)
|
|
22
|
-
const urlFor = (source) => builder.image(source)
|
|
23
21
|
const imageStyle = {width: `100%`, height: `auto`}
|
|
24
22
|
|
|
23
|
+
const VALID_ROOT_PATHS = ['document', 'parent']
|
|
25
24
|
|
|
26
25
|
const HotspotArray = React.forwardRef((props, ref) => {
|
|
27
|
-
const {type, value, onChange, document
|
|
26
|
+
const {type, value, onChange, document, parent} = props
|
|
28
27
|
const {options} = type ?? {}
|
|
29
28
|
|
|
30
29
|
// Attempt prevention of infinite loop in <FormBuilderInput />
|
|
31
30
|
// Re-renders can still occur if this Component is used again in a nested field
|
|
32
31
|
const typeWithoutInputComponent = useUnsetInputComponent(type, type?.inputComponent)
|
|
33
32
|
|
|
34
|
-
// Finding the image from the document,
|
|
33
|
+
// Finding the image from the imageHotspotPathRoot (defaults to document),
|
|
35
34
|
// using the path from the hotspot's `options` field
|
|
36
35
|
const displayImage = React.useMemo(() => {
|
|
37
|
-
const
|
|
36
|
+
const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset)
|
|
37
|
+
const urlFor = (source) => builder.image(source)
|
|
38
|
+
|
|
39
|
+
const imageHotspotPathRoot = VALID_ROOT_PATHS.includes(options?.imageHotspotPathRoot) ? props[options.imageHotspotPathRoot] : document
|
|
40
|
+
const hotspotImage = get(imageHotspotPathRoot, options?.hotspotImagePath)
|
|
38
41
|
|
|
39
42
|
if (hotspotImage?.asset?._ref) {
|
|
40
43
|
const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)
|
|
@@ -46,7 +49,7 @@ const HotspotArray = React.forwardRef((props, ref) => {
|
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
return null
|
|
49
|
-
}, [
|
|
52
|
+
}, [type, document])
|
|
50
53
|
|
|
51
54
|
const handleHotspotImageClick = React.useCallback((event) => {
|
|
52
55
|
const {nativeEvent} = event
|
|
@@ -123,12 +126,16 @@ const HotspotArray = React.forwardRef((props, ref) => {
|
|
|
123
126
|
</div>
|
|
124
127
|
) : (
|
|
125
128
|
<Feedback>
|
|
126
|
-
{type?.options?.hotspotImagePath
|
|
127
|
-
? <>No Hotspot image found at path <code>{type?.options?.hotspotImagePath}</code></>
|
|
129
|
+
{type?.options?.hotspotImagePath
|
|
130
|
+
? <>No Hotspot image found at path <code>{type?.options?.hotspotImagePath}</code></>
|
|
128
131
|
: <>Define a path in this field using to the image field in this document at <code>options.hotspotImagePath</code></>
|
|
129
132
|
}
|
|
130
133
|
</Feedback>
|
|
131
134
|
)}
|
|
135
|
+
{type?.options?.imageHotspotPathRoot && !VALID_ROOT_PATHS.includes(type.options.imageHotspotPathRoot) &&
|
|
136
|
+
<Feedback>
|
|
137
|
+
The supplied imageHotspotPathRoot "{type.options.imageHotspotPathRoot}" is not valid, falling back to "document". Available values are "{VALID_ROOT_PATHS.join(', ')}".
|
|
138
|
+
</Feedback>}
|
|
132
139
|
<FormBuilderInput {...props} type={typeWithoutInputComponent} ref={ref} />
|
|
133
140
|
</Stack>
|
|
134
141
|
)
|