sanity-plugin-asset-source-unsplash 1.0.1 → 1.0.2

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.
Files changed (8) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +2 -2
  3. package/lib/index.esm.js +1 -1
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +1 -1
  6. package/lib/index.js.map +1 -1
  7. package/package.json +4 -11
  8. package/src/components/Icon.tsx +1 -0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2022 Sanity.io
3
+ Copyright (c) 2023 Sanity.io
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -36,7 +36,7 @@ This will add [unsplashAssetSource](src/index.ts) to all image-fields in Sanity
36
36
  ### Manually configure asset sources
37
37
 
38
38
  If you need to configure when Unsplash should be available as an asset source, filter it out as needed in
39
- `formbuilder.image.assetSources`:
39
+ `form.image.assetSources`:
40
40
 
41
41
  ```js
42
42
  import { unsplashImageAsset, unsplashAssetSource } from "sanity-plugin-asset-source-unsplash";
@@ -46,7 +46,7 @@ export default defineConfig({
46
46
  plugins: [
47
47
  unsplashImageAsset(),
48
48
  ],
49
- formBuilder: {
49
+ form: {
50
50
  image: {
51
51
  assetSources: (previousAssetSources, {schema}) => {
52
52
  if (schema.name === 'movie-image') {
package/lib/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- var e,t,n,o,r,s;function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}import{jsx as l,jsxs as d}from"react/jsx-runtime";import u,{useRef as p,useCallback as g,useEffect as m}from"react";import b from"react-photo-album";import f from"lodash/flatten";import{concat as y,defer as w,BehaviorSubject as v}from"rxjs";import{Card as S,useTheme as x,Text as j,Stack as C,Dialog as k,TextInput as O,Flex as P,Spinner as D}from"@sanity/ui";import z from"styled-components";import{withLatestFrom as T,debounceTime as L,distinctUntilChanged as U,switchMap as R,map as q}from"rxjs/operators";import I from"react-infinite-scroll-component";import{useClient as $,definePlugin as M}from"sanity";const _=z.div(e||(e=h(["\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ",";\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n"])),(e=>{let{studioTheme:t}=e;return"1px solid ".concat(t.color.card.enabled.border)})),E=z.a(t||(t=h(["\n text-decoration: none;\n cursor: pointer;\n"]))),K=z(S)(n||(n=h(["\n ",";\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n"])),(e=>{let{theme:t}=e;return"\n --creditline-fg: ".concat(t.sanity.color.card.enabled.fg,";\n --creditline-bg: ").concat(t.sanity.color.card.enabled.bg,";\n ")}));function V(e){const{onClick:t,data:n,onKeyDown:o,onFocus:r,active:s,width:i,height:a}=e,c=p(null),h=p(!1),u=g((()=>{t(n)}),[t,n]),b=g((e=>{e.stopPropagation();const t="".concat(n.links.html,"?utm_source=").concat(encodeURIComponent("sanity-plugin-asset-source-unsplash"),"&utm_medium=referral");window.open(t,n.id,"noreferrer,noopener")}),[n]),f=g((e=>{o(e),13===e.keyCode&&t(n)}),[o,n,t]),y=g((()=>{r(n)}),[r,n]);m((()=>{!h.current&&s&&c.current&&(c.current.focus(),r(n)),h.current=s}),[s]);const w=n.urls.small,v=n.user.name,S=x().sanity;return l(_,{ref:c,studioTheme:S,title:"Select image by ".concat(v," from Unsplash"),tabIndex:0,onKeyDown:f,onMouseDown:y,style:{width:"".concat(i,"px"),height:"".concat(a,"px"),backgroundImage:'url("'.concat(w,'")')},onClick:u,children:l(E,{onClick:b,children:l(K,{padding:2,radius:2,margin:2,children:d(j,{size:1,title:"Open image by ".concat(v," on Unsplash in new window"),children:["By @",n.user.username]})})})})}const B=(e,t,n,o)=>y(t.pipe(T(n),L(500),U(),R((t=>{let[n,r]=t;return n?((e,t,n,o)=>w((()=>e.observable.request({url:"/addons/unsplash/search/photos?query=".concat(encodeURIComponent(t),"&page=").concat(n,"&per_page=").concat(o),withCredentials:!0,method:"GET"}))))(e,n,r,o).pipe(U(),q((e=>e.results))):((e,t,n,o)=>w((()=>e.observable.request({url:"/addons/unsplash/photos?order_by=".concat(t,"&page=").concat(n,"&per_page=").concat(o),withCredentials:!0,method:"GET"}))))(e,"popular",r,o)})))),G=z(C)(o||(o=h(["\n position: sticky;\n top: 0;\n z-index: 1;\n"])));z.div(r||(r=h(["\n overflow-y: auto;\n max-height: 80vh;\n"])));class H extends u.Component{constructor(){super(...arguments),this.state={cursor:0,query:"",page:1,searchResults:[[]],isLoading:!0},this.searchSubscription=null,this.searchSubject$=new v(""),this.pageSubject$=new v(1),this.handleSelect=e=>(this.setState({isLoading:!0}),function(e,t){const n=t.links.download_location.replace("https://api.unsplash.com","/addons/unsplash");return e.request({url:n,withCredentials:!0,method:"GET"}).then((e=>e.url))}(this.props.client,e).then((t=>{const n=e.description||void 0,o={kind:"url",value:t,assetDocumentProps:{_type:"sanity.imageAsset",source:{name:"unsplash",id:e.id,url:e.links.html},description:n,creditLine:"".concat(e.user.name," by Unsplash")}};this.props.onSelect([o])}))),this.handleClose=()=>{this.props.onClose()},this.handleSearchTermChanged=e=>{const t=e.currentTarget.value;this.setState({query:t,page:1,searchResults:[[]],isLoading:!0,cursor:0}),this.pageSubject$.next(1),this.searchSubject$.next(t)},this.handleScollerLoadMore=()=>{const e=this.state.page+1;this.setState({page:e,isLoading:!0}),this.pageSubject$.next(e),this.searchSubject$.next(this.state.query)},this.handleKeyDown=e=>{const{cursor:t}=this.state;(38===e.keyCode||37===e.keyCode)&&t>0?this.setState((e=>({cursor:e.cursor-1}))):(40===e.keyCode||39===e.keyCode)&&t<this.getPhotos().length-1&&this.setState((e=>({cursor:e.cursor+1})))},this.updateCursor=e=>{const t=this.getPhotos().findIndex((t=>t.id===e.id));this.setState({cursor:t})},this.renderImage=e=>{const{photo:t,layout:n}=e,o=this.getPhotos().findIndex((e=>e.id===t.data.id))===this.state.cursor||!1;return l(V,{onClick:this.handleSelect.bind(t.data),onKeyDown:this.handleKeyDown,data:t.data,width:n.width,height:n.height,active:o,onFocus:this.updateCursor})}}componentDidMount(){this.searchSubscription=B(this.props.client,this.searchSubject$,this.pageSubject$,42).subscribe({next:e=>{this.setState((t=>({searchResults:[...t.searchResults,e],isLoading:!1})))}})}componentWillUnmount(){this.searchSubscription&&this.searchSubscription.unsubscribe()}getPhotos(){return f(this.state.searchResults)}render(){const{query:e,searchResults:t,isLoading:n}=this.state;return l(k,{id:"unsplash-asset-source",header:"Select image from Unsplash",onClose:this.handleClose,open:!0,width:4,children:d(C,{space:3,padding:4,children:[l(S,{children:d(G,{space:3,children:[l(j,{size:1,weight:"semibold",children:"Search Unsplash"}),l(O,{label:"Search Unsplash.com",placeholder:"Topics or colors",value:e,onChange:this.handleSearchTermChanged})]})}),!n&&0===this.getPhotos().length&&l(j,{size:1,muted:!0,children:"No results found"}),l(I,{dataLength:this.getPhotos().length,next:this.handleScollerLoadMore,hasMore:!0,scrollThreshold:.99,height:"60vh",loader:l(P,{align:"center",justify:"center",padding:3,children:l(D,{muted:!0})}),endMessage:l(j,{size:1,muted:!0,children:"No more results"}),children:t.filter((e=>e.length>0)).map(((t,n)=>l(b,{layout:"rows",spacing:2,padding:1,targetRowHeight:e=>e<300?150:e<600?200:300,photos:t.map((e=>({src:e.urls.small,width:e.width,height:e.height,key:e.id,data:e}))),renderPhoto:this.renderImage,componentsProps:{containerProps:{style:{marginBottom:"".concat(2,"px")}}}},"gallery-".concat(e||"popular","-").concat(n))))})]})})}}H.defaultProps={selectedAssets:void 0};const A=z.svg(s||(s=h(["\n transform: scale(0.8);\n"])));const F={name:"unsplash",title:"Unsplash",component:function(e){const t=$({apiVersion:"2022-09-01"});return l(H,a(a({},e),{},{client:t}))},icon:function(){return d(A,{role:"img",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",children:[l("title",{}),l("path",{d:"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z"})]})}},N=M({name:"asset-source-unsplash-plugin",form:{image:{assetSources:e=>[...e,F]}}});export{F as unsplashAssetSource,N as unsplashImageAsset};
1
+ var e,t,n,o,r,s;function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}import{jsx as l,jsxs as d}from"react/jsx-runtime";import u,{useRef as p,useCallback as g,useEffect as m}from"react";import b from"react-photo-album";import f from"lodash/flatten";import{concat as y,defer as w,BehaviorSubject as v}from"rxjs";import{Card as S,useTheme as x,Text as j,Stack as C,Dialog as k,TextInput as O,Flex as P,Spinner as D}from"@sanity/ui";import z from"styled-components";import{withLatestFrom as T,debounceTime as L,distinctUntilChanged as U,switchMap as R,map as q}from"rxjs/operators";import I from"react-infinite-scroll-component";import{useClient as $,definePlugin as M}from"sanity";const _=z.div(e||(e=h(["\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ",";\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n"])),(e=>{let{studioTheme:t}=e;return"1px solid ".concat(t.color.card.enabled.border)})),E=z.a(t||(t=h(["\n text-decoration: none;\n cursor: pointer;\n"]))),K=z(S)(n||(n=h(["\n ",";\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n"])),(e=>{let{theme:t}=e;return"\n --creditline-fg: ".concat(t.sanity.color.card.enabled.fg,";\n --creditline-bg: ").concat(t.sanity.color.card.enabled.bg,";\n ")}));function V(e){const{onClick:t,data:n,onKeyDown:o,onFocus:r,active:s,width:i,height:a}=e,c=p(null),h=p(!1),u=g((()=>{t(n)}),[t,n]),b=g((e=>{e.stopPropagation();const t="".concat(n.links.html,"?utm_source=").concat(encodeURIComponent("sanity-plugin-asset-source-unsplash"),"&utm_medium=referral");window.open(t,n.id,"noreferrer,noopener")}),[n]),f=g((e=>{o(e),13===e.keyCode&&t(n)}),[o,n,t]),y=g((()=>{r(n)}),[r,n]);m((()=>{!h.current&&s&&c.current&&(c.current.focus(),r(n)),h.current=s}),[s]);const w=n.urls.small,v=n.user.name,S=x().sanity;return l(_,{ref:c,studioTheme:S,title:"Select image by ".concat(v," from Unsplash"),tabIndex:0,onKeyDown:f,onMouseDown:y,style:{width:"".concat(i,"px"),height:"".concat(a,"px"),backgroundImage:'url("'.concat(w,'")')},onClick:u,children:l(E,{onClick:b,children:l(K,{padding:2,radius:2,margin:2,children:d(j,{size:1,title:"Open image by ".concat(v," on Unsplash in new window"),children:["By @",n.user.username]})})})})}const B=(e,t,n,o)=>y(t.pipe(T(n),L(500),U(),R((t=>{let[n,r]=t;return n?((e,t,n,o)=>w((()=>e.observable.request({url:"/addons/unsplash/search/photos?query=".concat(encodeURIComponent(t),"&page=").concat(n,"&per_page=").concat(o),withCredentials:!0,method:"GET"}))))(e,n,r,o).pipe(U(),q((e=>e.results))):((e,t,n,o)=>w((()=>e.observable.request({url:"/addons/unsplash/photos?order_by=".concat(t,"&page=").concat(n,"&per_page=").concat(o),withCredentials:!0,method:"GET"}))))(e,"popular",r,o)})))),G=z(C)(o||(o=h(["\n position: sticky;\n top: 0;\n z-index: 1;\n"])));z.div(r||(r=h(["\n overflow-y: auto;\n max-height: 80vh;\n"])));class H extends u.Component{constructor(){super(...arguments),this.state={cursor:0,query:"",page:1,searchResults:[[]],isLoading:!0},this.searchSubscription=null,this.searchSubject$=new v(""),this.pageSubject$=new v(1),this.handleSelect=e=>(this.setState({isLoading:!0}),function(e,t){const n=t.links.download_location.replace("https://api.unsplash.com","/addons/unsplash");return e.request({url:n,withCredentials:!0,method:"GET"}).then((e=>e.url))}(this.props.client,e).then((t=>{const n=e.description||void 0,o={kind:"url",value:t,assetDocumentProps:{_type:"sanity.imageAsset",source:{name:"unsplash",id:e.id,url:e.links.html},description:n,creditLine:"".concat(e.user.name," by Unsplash")}};this.props.onSelect([o])}))),this.handleClose=()=>{this.props.onClose()},this.handleSearchTermChanged=e=>{const t=e.currentTarget.value;this.setState({query:t,page:1,searchResults:[[]],isLoading:!0,cursor:0}),this.pageSubject$.next(1),this.searchSubject$.next(t)},this.handleScollerLoadMore=()=>{const e=this.state.page+1;this.setState({page:e,isLoading:!0}),this.pageSubject$.next(e),this.searchSubject$.next(this.state.query)},this.handleKeyDown=e=>{const{cursor:t}=this.state;(38===e.keyCode||37===e.keyCode)&&t>0?this.setState((e=>({cursor:e.cursor-1}))):(40===e.keyCode||39===e.keyCode)&&t<this.getPhotos().length-1&&this.setState((e=>({cursor:e.cursor+1})))},this.updateCursor=e=>{const t=this.getPhotos().findIndex((t=>t.id===e.id));this.setState({cursor:t})},this.renderImage=e=>{const{photo:t,layout:n}=e,o=this.getPhotos().findIndex((e=>e.id===t.data.id))===this.state.cursor||!1;return l(V,{onClick:this.handleSelect.bind(t.data),onKeyDown:this.handleKeyDown,data:t.data,width:n.width,height:n.height,active:o,onFocus:this.updateCursor})}}componentDidMount(){this.searchSubscription=B(this.props.client,this.searchSubject$,this.pageSubject$,42).subscribe({next:e=>{this.setState((t=>({searchResults:[...t.searchResults,e],isLoading:!1})))}})}componentWillUnmount(){this.searchSubscription&&this.searchSubscription.unsubscribe()}getPhotos(){return f(this.state.searchResults)}render(){const{query:e,searchResults:t,isLoading:n}=this.state;return l(k,{id:"unsplash-asset-source",header:"Select image from Unsplash",onClose:this.handleClose,open:!0,width:4,children:d(C,{space:3,padding:4,children:[l(S,{children:d(G,{space:3,children:[l(j,{size:1,weight:"semibold",children:"Search Unsplash"}),l(O,{label:"Search Unsplash.com",placeholder:"Topics or colors",value:e,onChange:this.handleSearchTermChanged})]})}),!n&&0===this.getPhotos().length&&l(j,{size:1,muted:!0,children:"No results found"}),l(I,{dataLength:this.getPhotos().length,next:this.handleScollerLoadMore,hasMore:!0,scrollThreshold:.99,height:"60vh",loader:l(P,{align:"center",justify:"center",padding:3,children:l(D,{muted:!0})}),endMessage:l(j,{size:1,muted:!0,children:"No more results"}),children:t.filter((e=>e.length>0)).map(((t,n)=>l(b,{layout:"rows",spacing:2,padding:1,targetRowHeight:e=>e<300?150:e<600?200:300,photos:t.map((e=>({src:e.urls.small,width:e.width,height:e.height,key:e.id,data:e}))),renderPhoto:this.renderImage,componentsProps:{containerProps:{style:{marginBottom:"".concat(2,"px")}}}},"gallery-".concat(e||"popular","-").concat(n))))})]})})}}H.defaultProps={selectedAssets:void 0};const A=z.svg(s||(s=h(["\n transform: scale(0.8);\n transform-origin: top;\n"])));const F={name:"unsplash",title:"Unsplash",component:function(e){const t=$({apiVersion:"2022-09-01"});return l(H,a(a({},e),{},{client:t}))},icon:function(){return d(A,{role:"img",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",children:[l("title",{}),l("path",{d:"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z"})]})}},N=M({name:"asset-source-unsplash-plugin",form:{image:{assetSources:e=>[...e,F]}}});export{F as unsplashAssetSource,N as unsplashImageAsset};
2
2
  //# sourceMappingURL=index.esm.js.map
package/lib/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/components/Photo.styled.tsx","../src/components/Photo.tsx","../src/datastores/unsplash.ts","../src/components/UnsplashAssetSource.styled.tsx","../src/components/UnsplashAssetSource.tsx","../src/components/Icon.tsx","../src/index.ts"],"sourcesContent":["import { Card, Theme } from '@sanity/ui'\nimport styled from 'styled-components'\n\ntype SanityTheme = Theme['sanity']\n\ninterface Style {\n studioTheme: SanityTheme\n}\n\nexport const Root = styled.div`\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ${({ studioTheme }: Style) => `1px solid ${studioTheme.color.card.enabled.border}`};\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n`\n\nexport const CreditLineLink = styled.a`\n text-decoration: none;\n cursor: pointer;\n`\n\nexport const CreditLine = styled(Card)`\n ${({ theme }) => `\n --creditline-fg: ${theme.sanity.color.card.enabled.fg};\n --creditline-bg: ${theme.sanity.color.card.enabled.bg};\n `};\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n`\n","import { Text, useTheme } from '@sanity/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\nimport { UnsplashPhoto } from '../types'\nimport { CreditLine, CreditLineLink, Root } from './Photo.styled'\n\ntype Props = {\n data: UnsplashPhoto\n width: number\n height: number\n onClick: (photo: UnsplashPhoto) => void\n onKeyDown: (event: any) => void\n active: boolean\n onFocus: (photo: UnsplashPhoto) => void\n}\n\nconst UTM_SOURCE = 'sanity-plugin-asset-source-unsplash'\n\nexport default function Photo(props: Props) {\n const { onClick, data, onKeyDown, onFocus, active, width, height } = props\n const rootElm = useRef<HTMLDivElement>(null)\n const prevActive = useRef<boolean>(false)\n\n const handleClick = useCallback(() => {\n onClick(data)\n }, [onClick, data])\n\n const handleCreditLineClicked = useCallback(\n (event: any) => {\n event.stopPropagation()\n const url = `${data.links.html}?utm_source=${encodeURIComponent(\n UTM_SOURCE\n )}&utm_medium=referral`\n window.open(url, data.id, 'noreferrer,noopener')\n },\n [data]\n )\n\n const handleKeyDown = useCallback(\n (event: any) => {\n onKeyDown(event)\n if (event.keyCode === 13) {\n onClick(data)\n }\n },\n [onKeyDown, data, onClick]\n )\n\n const handleMouseDown = useCallback(() => {\n onFocus(data)\n }, [onFocus, data])\n\n useEffect(() => {\n if (!prevActive.current && active && rootElm.current) {\n rootElm.current.focus()\n onFocus(data)\n }\n prevActive.current = active\n // data changing alone should not re-trigger effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [active])\n\n const src = data.urls.small\n const userName = data.user.name\n\n const theme = useTheme().sanity\n return (\n <Root\n ref={rootElm}\n studioTheme={theme}\n title={`Select image by ${userName} from Unsplash`}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onMouseDown={handleMouseDown}\n style={{\n width: `${width}px`,\n height: `${height}px`,\n backgroundImage: `url(\"${src}\")`,\n }}\n onClick={handleClick}\n >\n <CreditLineLink onClick={handleCreditLineClicked}>\n <CreditLine padding={2} radius={2} margin={2}>\n <Text size={1} title={`Open image by ${userName} on Unsplash in new window`}>\n By @{data.user.username}\n </Text>\n </CreditLine>\n </CreditLineLink>\n </Root>\n )\n}\n","import { defer, concat, BehaviorSubject, Observable } from 'rxjs'\nimport { debounceTime, switchMap, map, distinctUntilChanged, withLatestFrom } from 'rxjs/operators'\nimport { UnsplashPhoto } from '../types'\nimport { SanityClient } from '@sanity/client'\n\ntype SearchSubject = BehaviorSubject<string>\ntype PageSubject = BehaviorSubject<number>\n\nconst fetchSearch = (\n client: SanityClient,\n query: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/search/photos?query=${encodeURIComponent(\n query\n )}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nconst fetchList = (\n client: SanityClient,\n type: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/photos?order_by=${type}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nexport function fetchDownloadUrl(client: SanityClient, photo: UnsplashPhoto): Promise<string> {\n const downloadUrl = photo.links.download_location.replace(\n 'https://api.unsplash.com',\n '/addons/unsplash'\n )\n return client\n .request({\n url: downloadUrl,\n withCredentials: true,\n method: 'GET',\n })\n .then((result: { url: string }) => {\n return result.url\n })\n}\n\nexport const search = (\n client: SanityClient,\n query: SearchSubject,\n page: PageSubject,\n resultsPerPage: number\n): Observable<any> => {\n return concat(\n query.pipe(\n withLatestFrom(page),\n debounceTime(500),\n distinctUntilChanged(),\n switchMap(([q, p]) => {\n if (q) {\n return fetchSearch(client, q, p, resultsPerPage).pipe(\n distinctUntilChanged(),\n map((result) => result.results)\n )\n }\n return fetchList(client, 'popular', p, resultsPerPage)\n })\n )\n )\n}\n","import { Stack } from '@sanity/ui'\nimport styled from 'styled-components'\n\nexport const Search = styled(Stack)`\n position: sticky;\n top: 0;\n z-index: 1;\n`\n\nexport const Scroller = styled.div`\n overflow-y: auto;\n max-height: 80vh;\n`\n","import React from 'react'\nimport PhotoAlbum from 'react-photo-album'\nimport flatten from 'lodash/flatten'\nimport { BehaviorSubject, Subscription } from 'rxjs'\nimport { UnsplashPhoto } from '../types'\nimport Photo from './Photo'\nimport { fetchDownloadUrl, search } from '../datastores/unsplash'\nimport { Card, Dialog, Flex, Spinner, Stack, Text, TextInput } from '@sanity/ui'\nimport { Search } from './UnsplashAssetSource.styled'\nimport InfiniteScroll from 'react-infinite-scroll-component'\nimport { useClient, AssetSourceComponentProps, AssetFromSource } from 'sanity'\nimport { SanityClient } from '@sanity/client'\n\ntype State = {\n query: string\n searchResults: UnsplashPhoto[][]\n page: number\n isLoading: boolean\n cursor: number\n}\n\nconst RESULTS_PER_PAGE = 42\nconst PHOTO_SPACING = 2\nconst PHOTO_PADDING = 1 // offset the 1px border width\n\nexport default function UnsplashAssetSource(props: AssetSourceComponentProps) {\n const client = useClient({ apiVersion: '2022-09-01' })\n return <UnsplashAssetSourceInternal {...props} client={client} />\n}\n\nclass UnsplashAssetSourceInternal extends React.Component<\n AssetSourceComponentProps & { client: SanityClient },\n State\n> {\n static defaultProps = {\n selectedAssets: undefined,\n }\n\n state = {\n cursor: 0,\n query: '',\n page: 1,\n searchResults: [[]],\n isLoading: true,\n }\n\n searchSubscription: Subscription | null = null\n\n searchSubject$ = new BehaviorSubject('')\n pageSubject$ = new BehaviorSubject(1)\n\n componentDidMount() {\n this.searchSubscription = search(\n this.props.client,\n this.searchSubject$,\n this.pageSubject$,\n RESULTS_PER_PAGE\n ).subscribe({\n next: (results: UnsplashPhoto[]) => {\n this.setState((prev) => ({\n searchResults: [...prev.searchResults, results],\n isLoading: false,\n }))\n },\n })\n }\n\n componentWillUnmount() {\n if (this.searchSubscription) {\n this.searchSubscription.unsubscribe()\n }\n }\n\n handleSelect = (photo: UnsplashPhoto) => {\n this.setState({ isLoading: true })\n return fetchDownloadUrl(this.props.client, photo).then((downloadUrl) => {\n const description = photo.description || undefined\n const asset: AssetFromSource = {\n kind: 'url',\n value: downloadUrl,\n assetDocumentProps: {\n _type: 'sanity.imageAsset',\n source: {\n name: 'unsplash',\n id: photo.id,\n url: photo.links.html,\n },\n description,\n creditLine: `${photo.user.name} by Unsplash`,\n } as any,\n }\n this.props.onSelect([asset])\n })\n }\n\n handleClose = () => {\n this.props.onClose()\n }\n\n handleSearchTermChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value\n this.setState({ query, page: 1, searchResults: [[]], isLoading: true, cursor: 0 })\n this.pageSubject$.next(1)\n this.searchSubject$.next(query)\n }\n\n handleScollerLoadMore = () => {\n // eslint-disable-next-line react/no-access-state-in-setstate\n const nextPage = this.state.page + 1\n this.setState({ page: nextPage, isLoading: true })\n this.pageSubject$.next(nextPage)\n this.searchSubject$.next(this.state.query)\n }\n\n handleKeyDown = (event: any) => {\n const { cursor } = this.state\n if ((event.keyCode === 38 || event.keyCode === 37) && cursor > 0) {\n this.setState((prevState) => ({\n cursor: prevState.cursor - 1,\n }))\n } else if (\n (event.keyCode === 40 || event.keyCode === 39) &&\n cursor < this.getPhotos().length - 1\n ) {\n this.setState((prevState) => ({\n cursor: prevState.cursor + 1,\n }))\n }\n }\n\n getPhotos() {\n return flatten(this.state.searchResults)\n }\n\n updateCursor = (photo: UnsplashPhoto) => {\n const index = this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.id)\n this.setState({ cursor: index })\n }\n\n renderImage = (props: any) => {\n const { photo, layout } = props\n const active =\n this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.data.id) ===\n this.state.cursor || false\n return (\n <Photo\n onClick={this.handleSelect.bind(photo.data)}\n onKeyDown={this.handleKeyDown}\n data={photo.data}\n width={layout.width}\n height={layout.height}\n active={active}\n onFocus={this.updateCursor}\n />\n )\n }\n\n render() {\n const { query, searchResults, isLoading } = this.state\n\n return (\n <Dialog\n id=\"unsplash-asset-source\"\n header=\"Select image from Unsplash\"\n onClose={this.handleClose}\n open\n width={4}\n >\n <Stack space={3} padding={4}>\n <Card>\n <Search space={3}>\n <Text size={1} weight=\"semibold\">\n Search Unsplash\n </Text>\n <TextInput\n label=\"Search Unsplash.com\"\n placeholder=\"Topics or colors\"\n value={query}\n onChange={this.handleSearchTermChanged}\n />\n </Search>\n </Card>\n {!isLoading && this.getPhotos().length === 0 && (\n <Text size={1} muted>\n No results found\n </Text>\n )}\n <InfiniteScroll\n dataLength={this.getPhotos().length} // This is important field to render the next data\n next={this.handleScollerLoadMore}\n // scrollableTarget=\"unsplash-scroller\"\n hasMore\n scrollThreshold={0.99}\n height=\"60vh\"\n loader={\n <Flex align=\"center\" justify=\"center\" padding={3}>\n <Spinner muted />\n </Flex>\n }\n endMessage={\n <Text size={1} muted>\n No more results\n </Text>\n }\n >\n {searchResults\n .filter((photos) => photos.length > 0)\n .map((photos: UnsplashPhoto[], index) => (\n <PhotoAlbum\n key={`gallery-${query || 'popular'}-${index}`}\n layout=\"rows\"\n spacing={PHOTO_SPACING}\n padding={PHOTO_PADDING}\n targetRowHeight={(width) => {\n if (width < 300) return 150\n else if (width < 600) return 200\n return 300\n }}\n photos={photos.map((photo: UnsplashPhoto) => ({\n src: photo.urls.small,\n width: photo.width,\n height: photo.height,\n key: photo.id,\n data: photo,\n }))}\n renderPhoto={this.renderImage}\n componentsProps={{\n containerProps: { style: { marginBottom: `${PHOTO_SPACING}px` } },\n }}\n />\n ))}\n </InfiniteScroll>\n </Stack>\n </Dialog>\n )\n }\n}\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Svg = styled.svg`\n transform: scale(0.8);\n`\n\nexport default function UnsplashIcon() {\n return (\n <Svg role=\"img\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"currentColor\">\n <title />\n <path d=\"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z\" />\n </Svg>\n )\n}\n","import Unsplash from './components/UnsplashAssetSource'\nimport Icon from './components/Icon'\nimport { definePlugin, AssetSource } from 'sanity'\n\nexport type { UnsplashPhoto, Asset, AssetDocument } from './types'\n\n/**\n * @public\n */\nexport const unsplashAssetSource: AssetSource = {\n name: 'unsplash',\n title: 'Unsplash',\n component: Unsplash,\n icon: Icon,\n}\n\n/**\n * @public\n */\nexport const unsplashImageAsset = definePlugin({\n name: 'asset-source-unsplash-plugin',\n\n form: {\n image: {\n assetSources: (prev) => {\n return [...prev, unsplashAssetSource]\n },\n },\n },\n})\n"],"names":["Root","styled","div","_templateObject","_taggedTemplateLiteral","_ref","studioTheme","color","card","enabled","border","CreditLineLink","a","_templateObject2","CreditLine","Card","_templateObject3","_ref2","theme","sanity","fg","bg","Photo","props","onClick","data","onKeyDown","onFocus","active","width","height","rootElm","useRef","prevActive","handleClick","useCallback","handleCreditLineClicked","event","stopPropagation","url","concat","links","html","encodeURIComponent","window","open","id","handleKeyDown","keyCode","handleMouseDown","useEffect","current","focus","src","urls","small","userName","user","name","useTheme","jsx","ref","title","tabIndex","onMouseDown","style","backgroundImage","children","padding","radius","margin","jsxs","Text","size","username","search","client","query","page","resultsPerPage","pipe","withLatestFrom","debounceTime","distinctUntilChanged","switchMap","_ref3","q","p","perPage","defer","observable","request","withCredentials","method","fetchSearch","map","result","results","type","fetchList","Search","Stack","_templateObject4","_templateObject5","UnsplashAssetSourceInternal","React","Component","constructor","super","arguments","this","state","cursor","searchResults","isLoading","searchSubscription","searchSubject$","BehaviorSubject","pageSubject$","handleSelect","photo","setState","downloadUrl","download_location","replace","then","fetchDownloadUrl","description","asset","kind","value","assetDocumentProps","_type","source","creditLine","onSelect","handleClose","onClose","handleSearchTermChanged","currentTarget","next","handleScollerLoadMore","nextPage","prevState","getPhotos","length","updateCursor","index","findIndex","renderImage","layout","bind","componentDidMount","subscribe","prev","componentWillUnmount","unsubscribe","flatten","render","Dialog","header","space","weight","TextInput","label","placeholder","onChange","muted","InfiniteScroll","dataLength","hasMore","scrollThreshold","loader","Flex","align","justify","Spinner","endMessage","filter","photos","PhotoAlbum","spacing","targetRowHeight","key","renderPhoto","componentsProps","containerProps","marginBottom","defaultProps","selectedAssets","Svg","svg","_templateObject6","unsplashAssetSource","component","useClient","apiVersion","icon","role","viewBox","fill","d","unsplashImageAsset","definePlugin","form","image","assetSources"],"mappings":"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"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/components/Photo.styled.tsx","../src/components/Photo.tsx","../src/datastores/unsplash.ts","../src/components/UnsplashAssetSource.styled.tsx","../src/components/UnsplashAssetSource.tsx","../src/components/Icon.tsx","../src/index.ts"],"sourcesContent":["import { Card, Theme } from '@sanity/ui'\nimport styled from 'styled-components'\n\ntype SanityTheme = Theme['sanity']\n\ninterface Style {\n studioTheme: SanityTheme\n}\n\nexport const Root = styled.div`\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ${({ studioTheme }: Style) => `1px solid ${studioTheme.color.card.enabled.border}`};\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n`\n\nexport const CreditLineLink = styled.a`\n text-decoration: none;\n cursor: pointer;\n`\n\nexport const CreditLine = styled(Card)`\n ${({ theme }) => `\n --creditline-fg: ${theme.sanity.color.card.enabled.fg};\n --creditline-bg: ${theme.sanity.color.card.enabled.bg};\n `};\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n`\n","import { Text, useTheme } from '@sanity/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\nimport { UnsplashPhoto } from '../types'\nimport { CreditLine, CreditLineLink, Root } from './Photo.styled'\n\ntype Props = {\n data: UnsplashPhoto\n width: number\n height: number\n onClick: (photo: UnsplashPhoto) => void\n onKeyDown: (event: any) => void\n active: boolean\n onFocus: (photo: UnsplashPhoto) => void\n}\n\nconst UTM_SOURCE = 'sanity-plugin-asset-source-unsplash'\n\nexport default function Photo(props: Props) {\n const { onClick, data, onKeyDown, onFocus, active, width, height } = props\n const rootElm = useRef<HTMLDivElement>(null)\n const prevActive = useRef<boolean>(false)\n\n const handleClick = useCallback(() => {\n onClick(data)\n }, [onClick, data])\n\n const handleCreditLineClicked = useCallback(\n (event: any) => {\n event.stopPropagation()\n const url = `${data.links.html}?utm_source=${encodeURIComponent(\n UTM_SOURCE\n )}&utm_medium=referral`\n window.open(url, data.id, 'noreferrer,noopener')\n },\n [data]\n )\n\n const handleKeyDown = useCallback(\n (event: any) => {\n onKeyDown(event)\n if (event.keyCode === 13) {\n onClick(data)\n }\n },\n [onKeyDown, data, onClick]\n )\n\n const handleMouseDown = useCallback(() => {\n onFocus(data)\n }, [onFocus, data])\n\n useEffect(() => {\n if (!prevActive.current && active && rootElm.current) {\n rootElm.current.focus()\n onFocus(data)\n }\n prevActive.current = active\n // data changing alone should not re-trigger effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [active])\n\n const src = data.urls.small\n const userName = data.user.name\n\n const theme = useTheme().sanity\n return (\n <Root\n ref={rootElm}\n studioTheme={theme}\n title={`Select image by ${userName} from Unsplash`}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onMouseDown={handleMouseDown}\n style={{\n width: `${width}px`,\n height: `${height}px`,\n backgroundImage: `url(\"${src}\")`,\n }}\n onClick={handleClick}\n >\n <CreditLineLink onClick={handleCreditLineClicked}>\n <CreditLine padding={2} radius={2} margin={2}>\n <Text size={1} title={`Open image by ${userName} on Unsplash in new window`}>\n By @{data.user.username}\n </Text>\n </CreditLine>\n </CreditLineLink>\n </Root>\n )\n}\n","import { defer, concat, BehaviorSubject, Observable } from 'rxjs'\nimport { debounceTime, switchMap, map, distinctUntilChanged, withLatestFrom } from 'rxjs/operators'\nimport { UnsplashPhoto } from '../types'\nimport { SanityClient } from '@sanity/client'\n\ntype SearchSubject = BehaviorSubject<string>\ntype PageSubject = BehaviorSubject<number>\n\nconst fetchSearch = (\n client: SanityClient,\n query: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/search/photos?query=${encodeURIComponent(\n query\n )}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nconst fetchList = (\n client: SanityClient,\n type: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/photos?order_by=${type}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nexport function fetchDownloadUrl(client: SanityClient, photo: UnsplashPhoto): Promise<string> {\n const downloadUrl = photo.links.download_location.replace(\n 'https://api.unsplash.com',\n '/addons/unsplash'\n )\n return client\n .request({\n url: downloadUrl,\n withCredentials: true,\n method: 'GET',\n })\n .then((result: { url: string }) => {\n return result.url\n })\n}\n\nexport const search = (\n client: SanityClient,\n query: SearchSubject,\n page: PageSubject,\n resultsPerPage: number\n): Observable<any> => {\n return concat(\n query.pipe(\n withLatestFrom(page),\n debounceTime(500),\n distinctUntilChanged(),\n switchMap(([q, p]) => {\n if (q) {\n return fetchSearch(client, q, p, resultsPerPage).pipe(\n distinctUntilChanged(),\n map((result) => result.results)\n )\n }\n return fetchList(client, 'popular', p, resultsPerPage)\n })\n )\n )\n}\n","import { Stack } from '@sanity/ui'\nimport styled from 'styled-components'\n\nexport const Search = styled(Stack)`\n position: sticky;\n top: 0;\n z-index: 1;\n`\n\nexport const Scroller = styled.div`\n overflow-y: auto;\n max-height: 80vh;\n`\n","import React from 'react'\nimport PhotoAlbum from 'react-photo-album'\nimport flatten from 'lodash/flatten'\nimport { BehaviorSubject, Subscription } from 'rxjs'\nimport { UnsplashPhoto } from '../types'\nimport Photo from './Photo'\nimport { fetchDownloadUrl, search } from '../datastores/unsplash'\nimport { Card, Dialog, Flex, Spinner, Stack, Text, TextInput } from '@sanity/ui'\nimport { Search } from './UnsplashAssetSource.styled'\nimport InfiniteScroll from 'react-infinite-scroll-component'\nimport { useClient, AssetSourceComponentProps, AssetFromSource } from 'sanity'\nimport { SanityClient } from '@sanity/client'\n\ntype State = {\n query: string\n searchResults: UnsplashPhoto[][]\n page: number\n isLoading: boolean\n cursor: number\n}\n\nconst RESULTS_PER_PAGE = 42\nconst PHOTO_SPACING = 2\nconst PHOTO_PADDING = 1 // offset the 1px border width\n\nexport default function UnsplashAssetSource(props: AssetSourceComponentProps) {\n const client = useClient({ apiVersion: '2022-09-01' })\n return <UnsplashAssetSourceInternal {...props} client={client} />\n}\n\nclass UnsplashAssetSourceInternal extends React.Component<\n AssetSourceComponentProps & { client: SanityClient },\n State\n> {\n static defaultProps = {\n selectedAssets: undefined,\n }\n\n state = {\n cursor: 0,\n query: '',\n page: 1,\n searchResults: [[]],\n isLoading: true,\n }\n\n searchSubscription: Subscription | null = null\n\n searchSubject$ = new BehaviorSubject('')\n pageSubject$ = new BehaviorSubject(1)\n\n componentDidMount() {\n this.searchSubscription = search(\n this.props.client,\n this.searchSubject$,\n this.pageSubject$,\n RESULTS_PER_PAGE\n ).subscribe({\n next: (results: UnsplashPhoto[]) => {\n this.setState((prev) => ({\n searchResults: [...prev.searchResults, results],\n isLoading: false,\n }))\n },\n })\n }\n\n componentWillUnmount() {\n if (this.searchSubscription) {\n this.searchSubscription.unsubscribe()\n }\n }\n\n handleSelect = (photo: UnsplashPhoto) => {\n this.setState({ isLoading: true })\n return fetchDownloadUrl(this.props.client, photo).then((downloadUrl) => {\n const description = photo.description || undefined\n const asset: AssetFromSource = {\n kind: 'url',\n value: downloadUrl,\n assetDocumentProps: {\n _type: 'sanity.imageAsset',\n source: {\n name: 'unsplash',\n id: photo.id,\n url: photo.links.html,\n },\n description,\n creditLine: `${photo.user.name} by Unsplash`,\n } as any,\n }\n this.props.onSelect([asset])\n })\n }\n\n handleClose = () => {\n this.props.onClose()\n }\n\n handleSearchTermChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value\n this.setState({ query, page: 1, searchResults: [[]], isLoading: true, cursor: 0 })\n this.pageSubject$.next(1)\n this.searchSubject$.next(query)\n }\n\n handleScollerLoadMore = () => {\n // eslint-disable-next-line react/no-access-state-in-setstate\n const nextPage = this.state.page + 1\n this.setState({ page: nextPage, isLoading: true })\n this.pageSubject$.next(nextPage)\n this.searchSubject$.next(this.state.query)\n }\n\n handleKeyDown = (event: any) => {\n const { cursor } = this.state\n if ((event.keyCode === 38 || event.keyCode === 37) && cursor > 0) {\n this.setState((prevState) => ({\n cursor: prevState.cursor - 1,\n }))\n } else if (\n (event.keyCode === 40 || event.keyCode === 39) &&\n cursor < this.getPhotos().length - 1\n ) {\n this.setState((prevState) => ({\n cursor: prevState.cursor + 1,\n }))\n }\n }\n\n getPhotos() {\n return flatten(this.state.searchResults)\n }\n\n updateCursor = (photo: UnsplashPhoto) => {\n const index = this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.id)\n this.setState({ cursor: index })\n }\n\n renderImage = (props: any) => {\n const { photo, layout } = props\n const active =\n this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.data.id) ===\n this.state.cursor || false\n return (\n <Photo\n onClick={this.handleSelect.bind(photo.data)}\n onKeyDown={this.handleKeyDown}\n data={photo.data}\n width={layout.width}\n height={layout.height}\n active={active}\n onFocus={this.updateCursor}\n />\n )\n }\n\n render() {\n const { query, searchResults, isLoading } = this.state\n\n return (\n <Dialog\n id=\"unsplash-asset-source\"\n header=\"Select image from Unsplash\"\n onClose={this.handleClose}\n open\n width={4}\n >\n <Stack space={3} padding={4}>\n <Card>\n <Search space={3}>\n <Text size={1} weight=\"semibold\">\n Search Unsplash\n </Text>\n <TextInput\n label=\"Search Unsplash.com\"\n placeholder=\"Topics or colors\"\n value={query}\n onChange={this.handleSearchTermChanged}\n />\n </Search>\n </Card>\n {!isLoading && this.getPhotos().length === 0 && (\n <Text size={1} muted>\n No results found\n </Text>\n )}\n <InfiniteScroll\n dataLength={this.getPhotos().length} // This is important field to render the next data\n next={this.handleScollerLoadMore}\n // scrollableTarget=\"unsplash-scroller\"\n hasMore\n scrollThreshold={0.99}\n height=\"60vh\"\n loader={\n <Flex align=\"center\" justify=\"center\" padding={3}>\n <Spinner muted />\n </Flex>\n }\n endMessage={\n <Text size={1} muted>\n No more results\n </Text>\n }\n >\n {searchResults\n .filter((photos) => photos.length > 0)\n .map((photos: UnsplashPhoto[], index) => (\n <PhotoAlbum\n key={`gallery-${query || 'popular'}-${index}`}\n layout=\"rows\"\n spacing={PHOTO_SPACING}\n padding={PHOTO_PADDING}\n targetRowHeight={(width) => {\n if (width < 300) return 150\n else if (width < 600) return 200\n return 300\n }}\n photos={photos.map((photo: UnsplashPhoto) => ({\n src: photo.urls.small,\n width: photo.width,\n height: photo.height,\n key: photo.id,\n data: photo,\n }))}\n renderPhoto={this.renderImage}\n componentsProps={{\n containerProps: { style: { marginBottom: `${PHOTO_SPACING}px` } },\n }}\n />\n ))}\n </InfiniteScroll>\n </Stack>\n </Dialog>\n )\n }\n}\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Svg = styled.svg`\n transform: scale(0.8);\n transform-origin: top;\n`\n\nexport default function UnsplashIcon() {\n return (\n <Svg role=\"img\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"currentColor\">\n <title />\n <path d=\"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z\" />\n </Svg>\n )\n}\n","import Unsplash from './components/UnsplashAssetSource'\nimport Icon from './components/Icon'\nimport { definePlugin, AssetSource } from 'sanity'\n\nexport type { UnsplashPhoto, Asset, AssetDocument } from './types'\n\n/**\n * @public\n */\nexport const unsplashAssetSource: AssetSource = {\n name: 'unsplash',\n title: 'Unsplash',\n component: Unsplash,\n icon: Icon,\n}\n\n/**\n * @public\n */\nexport const unsplashImageAsset = definePlugin({\n name: 'asset-source-unsplash-plugin',\n\n form: {\n image: {\n assetSources: (prev) => {\n return [...prev, unsplashAssetSource]\n },\n },\n },\n})\n"],"names":["Root","styled","div","_templateObject","_taggedTemplateLiteral","_ref","studioTheme","color","card","enabled","border","CreditLineLink","a","_templateObject2","CreditLine","Card","_templateObject3","_ref2","theme","sanity","fg","bg","Photo","props","onClick","data","onKeyDown","onFocus","active","width","height","rootElm","useRef","prevActive","handleClick","useCallback","handleCreditLineClicked","event","stopPropagation","url","concat","links","html","encodeURIComponent","window","open","id","handleKeyDown","keyCode","handleMouseDown","useEffect","current","focus","src","urls","small","userName","user","name","useTheme","jsx","ref","title","tabIndex","onMouseDown","style","backgroundImage","children","padding","radius","margin","jsxs","Text","size","username","search","client","query","page","resultsPerPage","pipe","withLatestFrom","debounceTime","distinctUntilChanged","switchMap","_ref3","q","p","perPage","defer","observable","request","withCredentials","method","fetchSearch","map","result","results","type","fetchList","Search","Stack","_templateObject4","_templateObject5","UnsplashAssetSourceInternal","React","Component","constructor","super","arguments","this","state","cursor","searchResults","isLoading","searchSubscription","searchSubject$","BehaviorSubject","pageSubject$","handleSelect","photo","setState","downloadUrl","download_location","replace","then","fetchDownloadUrl","description","asset","kind","value","assetDocumentProps","_type","source","creditLine","onSelect","handleClose","onClose","handleSearchTermChanged","currentTarget","next","handleScollerLoadMore","nextPage","prevState","getPhotos","length","updateCursor","index","findIndex","renderImage","layout","bind","componentDidMount","subscribe","prev","componentWillUnmount","unsubscribe","flatten","render","Dialog","header","space","weight","TextInput","label","placeholder","onChange","muted","InfiniteScroll","dataLength","hasMore","scrollThreshold","loader","Flex","align","justify","Spinner","endMessage","filter","photos","PhotoAlbum","spacing","targetRowHeight","key","renderPhoto","componentsProps","containerProps","marginBottom","defaultProps","selectedAssets","Svg","svg","_templateObject6","unsplashAssetSource","component","useClient","apiVersion","icon","role","viewBox","fill","d","unsplashImageAsset","definePlugin","form","image","assetSources"],"mappings":"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"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e,t,n,s,r,o;function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,s)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react/jsx-runtime"),h=require("react"),d=require("react-photo-album"),p=require("lodash/flatten"),g=require("rxjs"),b=require("@sanity/ui"),m=require("styled-components"),f=require("rxjs/operators"),x=require("react-infinite-scroll-component"),y=require("sanity");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var w=j(h),v=j(d),S=j(p),C=j(m),k=j(x);const P=C.default.div(e||(e=l(["\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ",";\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n"])),(e=>{let{studioTheme:t}=e;return"1px solid ".concat(t.color.card.enabled.border)})),O=C.default.a(t||(t=l(["\n text-decoration: none;\n cursor: pointer;\n"]))),q=C.default(b.Card)(n||(n=l(["\n ",";\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n"])),(e=>{let{theme:t}=e;return"\n --creditline-fg: ".concat(t.sanity.color.card.enabled.fg,";\n --creditline-bg: ").concat(t.sanity.color.card.enabled.bg,";\n ")}));function T(e){const{onClick:t,data:n,onKeyDown:s,onFocus:r,active:o,width:i,height:a}=e,c=h.useRef(null),l=h.useRef(!1),d=h.useCallback((()=>{t(n)}),[t,n]),p=h.useCallback((e=>{e.stopPropagation();const t="".concat(n.links.html,"?utm_source=").concat(encodeURIComponent("sanity-plugin-asset-source-unsplash"),"&utm_medium=referral");window.open(t,n.id,"noreferrer,noopener")}),[n]),g=h.useCallback((e=>{s(e),13===e.keyCode&&t(n)}),[s,n,t]),m=h.useCallback((()=>{r(n)}),[r,n]);h.useEffect((()=>{!l.current&&o&&c.current&&(c.current.focus(),r(n)),l.current=o}),[o]);const f=n.urls.small,x=n.user.name,y=b.useTheme().sanity;return u.jsx(P,{ref:c,studioTheme:y,title:"Select image by ".concat(x," from Unsplash"),tabIndex:0,onKeyDown:g,onMouseDown:m,style:{width:"".concat(i,"px"),height:"".concat(a,"px"),backgroundImage:'url("'.concat(f,'")')},onClick:d,children:u.jsx(O,{onClick:p,children:u.jsx(q,{padding:2,radius:2,margin:2,children:u.jsxs(b.Text,{size:1,title:"Open image by ".concat(x," on Unsplash in new window"),children:["By @",n.user.username]})})})})}const D=(e,t,n,s)=>g.concat(t.pipe(f.withLatestFrom(n),f.debounceTime(500),f.distinctUntilChanged(),f.switchMap((t=>{let[n,r]=t;return n?((e,t,n,s)=>g.defer((()=>e.observable.request({url:"/addons/unsplash/search/photos?query=".concat(encodeURIComponent(t),"&page=").concat(n,"&per_page=").concat(s),withCredentials:!0,method:"GET"}))))(e,n,r,s).pipe(f.distinctUntilChanged(),f.map((e=>e.results))):((e,t,n,s)=>g.defer((()=>e.observable.request({url:"/addons/unsplash/photos?order_by=".concat(t,"&page=").concat(n,"&per_page=").concat(s),withCredentials:!0,method:"GET"}))))(e,"popular",r,s)})))),U=C.default(b.Stack)(s||(s=l(["\n position: sticky;\n top: 0;\n z-index: 1;\n"])));C.default.div(r||(r=l(["\n overflow-y: auto;\n max-height: 80vh;\n"])));class z extends w.default.Component{constructor(){super(...arguments),this.state={cursor:0,query:"",page:1,searchResults:[[]],isLoading:!0},this.searchSubscription=null,this.searchSubject$=new g.BehaviorSubject(""),this.pageSubject$=new g.BehaviorSubject(1),this.handleSelect=e=>(this.setState({isLoading:!0}),function(e,t){const n=t.links.download_location.replace("https://api.unsplash.com","/addons/unsplash");return e.request({url:n,withCredentials:!0,method:"GET"}).then((e=>e.url))}(this.props.client,e).then((t=>{const n=e.description||void 0,s={kind:"url",value:t,assetDocumentProps:{_type:"sanity.imageAsset",source:{name:"unsplash",id:e.id,url:e.links.html},description:n,creditLine:"".concat(e.user.name," by Unsplash")}};this.props.onSelect([s])}))),this.handleClose=()=>{this.props.onClose()},this.handleSearchTermChanged=e=>{const t=e.currentTarget.value;this.setState({query:t,page:1,searchResults:[[]],isLoading:!0,cursor:0}),this.pageSubject$.next(1),this.searchSubject$.next(t)},this.handleScollerLoadMore=()=>{const e=this.state.page+1;this.setState({page:e,isLoading:!0}),this.pageSubject$.next(e),this.searchSubject$.next(this.state.query)},this.handleKeyDown=e=>{const{cursor:t}=this.state;(38===e.keyCode||37===e.keyCode)&&t>0?this.setState((e=>({cursor:e.cursor-1}))):(40===e.keyCode||39===e.keyCode)&&t<this.getPhotos().length-1&&this.setState((e=>({cursor:e.cursor+1})))},this.updateCursor=e=>{const t=this.getPhotos().findIndex((t=>t.id===e.id));this.setState({cursor:t})},this.renderImage=e=>{const{photo:t,layout:n}=e,s=this.getPhotos().findIndex((e=>e.id===t.data.id))===this.state.cursor||!1;return u.jsx(T,{onClick:this.handleSelect.bind(t.data),onKeyDown:this.handleKeyDown,data:t.data,width:n.width,height:n.height,active:s,onFocus:this.updateCursor})}}componentDidMount(){this.searchSubscription=D(this.props.client,this.searchSubject$,this.pageSubject$,42).subscribe({next:e=>{this.setState((t=>({searchResults:[...t.searchResults,e],isLoading:!1})))}})}componentWillUnmount(){this.searchSubscription&&this.searchSubscription.unsubscribe()}getPhotos(){return S.default(this.state.searchResults)}render(){const{query:e,searchResults:t,isLoading:n}=this.state;return u.jsx(b.Dialog,{id:"unsplash-asset-source",header:"Select image from Unsplash",onClose:this.handleClose,open:!0,width:4,children:u.jsxs(b.Stack,{space:3,padding:4,children:[u.jsx(b.Card,{children:u.jsxs(U,{space:3,children:[u.jsx(b.Text,{size:1,weight:"semibold",children:"Search Unsplash"}),u.jsx(b.TextInput,{label:"Search Unsplash.com",placeholder:"Topics or colors",value:e,onChange:this.handleSearchTermChanged})]})}),!n&&0===this.getPhotos().length&&u.jsx(b.Text,{size:1,muted:!0,children:"No results found"}),u.jsx(k.default,{dataLength:this.getPhotos().length,next:this.handleScollerLoadMore,hasMore:!0,scrollThreshold:.99,height:"60vh",loader:u.jsx(b.Flex,{align:"center",justify:"center",padding:3,children:u.jsx(b.Spinner,{muted:!0})}),endMessage:u.jsx(b.Text,{size:1,muted:!0,children:"No more results"}),children:t.filter((e=>e.length>0)).map(((t,n)=>u.jsx(v.default,{layout:"rows",spacing:2,padding:1,targetRowHeight:e=>e<300?150:e<600?200:300,photos:t.map((e=>({src:e.urls.small,width:e.width,height:e.height,key:e.id,data:e}))),renderPhoto:this.renderImage,componentsProps:{containerProps:{style:{marginBottom:"".concat(2,"px")}}}},"gallery-".concat(e||"popular","-").concat(n))))})]})})}}z.defaultProps={selectedAssets:void 0};const L=C.default.svg(o||(o=l(["\n transform: scale(0.8);\n"])));const R={name:"unsplash",title:"Unsplash",component:function(e){const t=y.useClient({apiVersion:"2022-09-01"});return u.jsx(z,a(a({},e),{},{client:t}))},icon:function(){return u.jsxs(L,{role:"img",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",children:[u.jsx("title",{}),u.jsx("path",{d:"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z"})]})}},I=y.definePlugin({name:"asset-source-unsplash-plugin",form:{image:{assetSources:e=>[...e,R]}}});exports.unsplashAssetSource=R,exports.unsplashImageAsset=I;
1
+ "use strict";var e,t,n,s,r,o;function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,s)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react/jsx-runtime"),h=require("react"),d=require("react-photo-album"),p=require("lodash/flatten"),g=require("rxjs"),b=require("@sanity/ui"),m=require("styled-components"),f=require("rxjs/operators"),x=require("react-infinite-scroll-component"),y=require("sanity");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var w=j(h),v=j(d),S=j(p),C=j(m),k=j(x);const P=C.default.div(e||(e=l(["\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ",";\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n"])),(e=>{let{studioTheme:t}=e;return"1px solid ".concat(t.color.card.enabled.border)})),O=C.default.a(t||(t=l(["\n text-decoration: none;\n cursor: pointer;\n"]))),q=C.default(b.Card)(n||(n=l(["\n ",";\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n"])),(e=>{let{theme:t}=e;return"\n --creditline-fg: ".concat(t.sanity.color.card.enabled.fg,";\n --creditline-bg: ").concat(t.sanity.color.card.enabled.bg,";\n ")}));function T(e){const{onClick:t,data:n,onKeyDown:s,onFocus:r,active:o,width:i,height:a}=e,c=h.useRef(null),l=h.useRef(!1),d=h.useCallback((()=>{t(n)}),[t,n]),p=h.useCallback((e=>{e.stopPropagation();const t="".concat(n.links.html,"?utm_source=").concat(encodeURIComponent("sanity-plugin-asset-source-unsplash"),"&utm_medium=referral");window.open(t,n.id,"noreferrer,noopener")}),[n]),g=h.useCallback((e=>{s(e),13===e.keyCode&&t(n)}),[s,n,t]),m=h.useCallback((()=>{r(n)}),[r,n]);h.useEffect((()=>{!l.current&&o&&c.current&&(c.current.focus(),r(n)),l.current=o}),[o]);const f=n.urls.small,x=n.user.name,y=b.useTheme().sanity;return u.jsx(P,{ref:c,studioTheme:y,title:"Select image by ".concat(x," from Unsplash"),tabIndex:0,onKeyDown:g,onMouseDown:m,style:{width:"".concat(i,"px"),height:"".concat(a,"px"),backgroundImage:'url("'.concat(f,'")')},onClick:d,children:u.jsx(O,{onClick:p,children:u.jsx(q,{padding:2,radius:2,margin:2,children:u.jsxs(b.Text,{size:1,title:"Open image by ".concat(x," on Unsplash in new window"),children:["By @",n.user.username]})})})})}const D=(e,t,n,s)=>g.concat(t.pipe(f.withLatestFrom(n),f.debounceTime(500),f.distinctUntilChanged(),f.switchMap((t=>{let[n,r]=t;return n?((e,t,n,s)=>g.defer((()=>e.observable.request({url:"/addons/unsplash/search/photos?query=".concat(encodeURIComponent(t),"&page=").concat(n,"&per_page=").concat(s),withCredentials:!0,method:"GET"}))))(e,n,r,s).pipe(f.distinctUntilChanged(),f.map((e=>e.results))):((e,t,n,s)=>g.defer((()=>e.observable.request({url:"/addons/unsplash/photos?order_by=".concat(t,"&page=").concat(n,"&per_page=").concat(s),withCredentials:!0,method:"GET"}))))(e,"popular",r,s)})))),U=C.default(b.Stack)(s||(s=l(["\n position: sticky;\n top: 0;\n z-index: 1;\n"])));C.default.div(r||(r=l(["\n overflow-y: auto;\n max-height: 80vh;\n"])));class z extends w.default.Component{constructor(){super(...arguments),this.state={cursor:0,query:"",page:1,searchResults:[[]],isLoading:!0},this.searchSubscription=null,this.searchSubject$=new g.BehaviorSubject(""),this.pageSubject$=new g.BehaviorSubject(1),this.handleSelect=e=>(this.setState({isLoading:!0}),function(e,t){const n=t.links.download_location.replace("https://api.unsplash.com","/addons/unsplash");return e.request({url:n,withCredentials:!0,method:"GET"}).then((e=>e.url))}(this.props.client,e).then((t=>{const n=e.description||void 0,s={kind:"url",value:t,assetDocumentProps:{_type:"sanity.imageAsset",source:{name:"unsplash",id:e.id,url:e.links.html},description:n,creditLine:"".concat(e.user.name," by Unsplash")}};this.props.onSelect([s])}))),this.handleClose=()=>{this.props.onClose()},this.handleSearchTermChanged=e=>{const t=e.currentTarget.value;this.setState({query:t,page:1,searchResults:[[]],isLoading:!0,cursor:0}),this.pageSubject$.next(1),this.searchSubject$.next(t)},this.handleScollerLoadMore=()=>{const e=this.state.page+1;this.setState({page:e,isLoading:!0}),this.pageSubject$.next(e),this.searchSubject$.next(this.state.query)},this.handleKeyDown=e=>{const{cursor:t}=this.state;(38===e.keyCode||37===e.keyCode)&&t>0?this.setState((e=>({cursor:e.cursor-1}))):(40===e.keyCode||39===e.keyCode)&&t<this.getPhotos().length-1&&this.setState((e=>({cursor:e.cursor+1})))},this.updateCursor=e=>{const t=this.getPhotos().findIndex((t=>t.id===e.id));this.setState({cursor:t})},this.renderImage=e=>{const{photo:t,layout:n}=e,s=this.getPhotos().findIndex((e=>e.id===t.data.id))===this.state.cursor||!1;return u.jsx(T,{onClick:this.handleSelect.bind(t.data),onKeyDown:this.handleKeyDown,data:t.data,width:n.width,height:n.height,active:s,onFocus:this.updateCursor})}}componentDidMount(){this.searchSubscription=D(this.props.client,this.searchSubject$,this.pageSubject$,42).subscribe({next:e=>{this.setState((t=>({searchResults:[...t.searchResults,e],isLoading:!1})))}})}componentWillUnmount(){this.searchSubscription&&this.searchSubscription.unsubscribe()}getPhotos(){return S.default(this.state.searchResults)}render(){const{query:e,searchResults:t,isLoading:n}=this.state;return u.jsx(b.Dialog,{id:"unsplash-asset-source",header:"Select image from Unsplash",onClose:this.handleClose,open:!0,width:4,children:u.jsxs(b.Stack,{space:3,padding:4,children:[u.jsx(b.Card,{children:u.jsxs(U,{space:3,children:[u.jsx(b.Text,{size:1,weight:"semibold",children:"Search Unsplash"}),u.jsx(b.TextInput,{label:"Search Unsplash.com",placeholder:"Topics or colors",value:e,onChange:this.handleSearchTermChanged})]})}),!n&&0===this.getPhotos().length&&u.jsx(b.Text,{size:1,muted:!0,children:"No results found"}),u.jsx(k.default,{dataLength:this.getPhotos().length,next:this.handleScollerLoadMore,hasMore:!0,scrollThreshold:.99,height:"60vh",loader:u.jsx(b.Flex,{align:"center",justify:"center",padding:3,children:u.jsx(b.Spinner,{muted:!0})}),endMessage:u.jsx(b.Text,{size:1,muted:!0,children:"No more results"}),children:t.filter((e=>e.length>0)).map(((t,n)=>u.jsx(v.default,{layout:"rows",spacing:2,padding:1,targetRowHeight:e=>e<300?150:e<600?200:300,photos:t.map((e=>({src:e.urls.small,width:e.width,height:e.height,key:e.id,data:e}))),renderPhoto:this.renderImage,componentsProps:{containerProps:{style:{marginBottom:"".concat(2,"px")}}}},"gallery-".concat(e||"popular","-").concat(n))))})]})})}}z.defaultProps={selectedAssets:void 0};const L=C.default.svg(o||(o=l(["\n transform: scale(0.8);\n transform-origin: top;\n"])));const R={name:"unsplash",title:"Unsplash",component:function(e){const t=y.useClient({apiVersion:"2022-09-01"});return u.jsx(z,a(a({},e),{},{client:t}))},icon:function(){return u.jsxs(L,{role:"img",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",children:[u.jsx("title",{}),u.jsx("path",{d:"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z"})]})}},I=y.definePlugin({name:"asset-source-unsplash-plugin",form:{image:{assetSources:e=>[...e,R]}}});exports.unsplashAssetSource=R,exports.unsplashImageAsset=I;
2
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/components/Photo.styled.tsx","../src/components/Photo.tsx","../src/datastores/unsplash.ts","../src/components/UnsplashAssetSource.styled.tsx","../src/components/UnsplashAssetSource.tsx","../src/components/Icon.tsx","../src/index.ts"],"sourcesContent":["import { Card, Theme } from '@sanity/ui'\nimport styled from 'styled-components'\n\ntype SanityTheme = Theme['sanity']\n\ninterface Style {\n studioTheme: SanityTheme\n}\n\nexport const Root = styled.div`\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ${({ studioTheme }: Style) => `1px solid ${studioTheme.color.card.enabled.border}`};\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n`\n\nexport const CreditLineLink = styled.a`\n text-decoration: none;\n cursor: pointer;\n`\n\nexport const CreditLine = styled(Card)`\n ${({ theme }) => `\n --creditline-fg: ${theme.sanity.color.card.enabled.fg};\n --creditline-bg: ${theme.sanity.color.card.enabled.bg};\n `};\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n`\n","import { Text, useTheme } from '@sanity/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\nimport { UnsplashPhoto } from '../types'\nimport { CreditLine, CreditLineLink, Root } from './Photo.styled'\n\ntype Props = {\n data: UnsplashPhoto\n width: number\n height: number\n onClick: (photo: UnsplashPhoto) => void\n onKeyDown: (event: any) => void\n active: boolean\n onFocus: (photo: UnsplashPhoto) => void\n}\n\nconst UTM_SOURCE = 'sanity-plugin-asset-source-unsplash'\n\nexport default function Photo(props: Props) {\n const { onClick, data, onKeyDown, onFocus, active, width, height } = props\n const rootElm = useRef<HTMLDivElement>(null)\n const prevActive = useRef<boolean>(false)\n\n const handleClick = useCallback(() => {\n onClick(data)\n }, [onClick, data])\n\n const handleCreditLineClicked = useCallback(\n (event: any) => {\n event.stopPropagation()\n const url = `${data.links.html}?utm_source=${encodeURIComponent(\n UTM_SOURCE\n )}&utm_medium=referral`\n window.open(url, data.id, 'noreferrer,noopener')\n },\n [data]\n )\n\n const handleKeyDown = useCallback(\n (event: any) => {\n onKeyDown(event)\n if (event.keyCode === 13) {\n onClick(data)\n }\n },\n [onKeyDown, data, onClick]\n )\n\n const handleMouseDown = useCallback(() => {\n onFocus(data)\n }, [onFocus, data])\n\n useEffect(() => {\n if (!prevActive.current && active && rootElm.current) {\n rootElm.current.focus()\n onFocus(data)\n }\n prevActive.current = active\n // data changing alone should not re-trigger effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [active])\n\n const src = data.urls.small\n const userName = data.user.name\n\n const theme = useTheme().sanity\n return (\n <Root\n ref={rootElm}\n studioTheme={theme}\n title={`Select image by ${userName} from Unsplash`}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onMouseDown={handleMouseDown}\n style={{\n width: `${width}px`,\n height: `${height}px`,\n backgroundImage: `url(\"${src}\")`,\n }}\n onClick={handleClick}\n >\n <CreditLineLink onClick={handleCreditLineClicked}>\n <CreditLine padding={2} radius={2} margin={2}>\n <Text size={1} title={`Open image by ${userName} on Unsplash in new window`}>\n By @{data.user.username}\n </Text>\n </CreditLine>\n </CreditLineLink>\n </Root>\n )\n}\n","import { defer, concat, BehaviorSubject, Observable } from 'rxjs'\nimport { debounceTime, switchMap, map, distinctUntilChanged, withLatestFrom } from 'rxjs/operators'\nimport { UnsplashPhoto } from '../types'\nimport { SanityClient } from '@sanity/client'\n\ntype SearchSubject = BehaviorSubject<string>\ntype PageSubject = BehaviorSubject<number>\n\nconst fetchSearch = (\n client: SanityClient,\n query: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/search/photos?query=${encodeURIComponent(\n query\n )}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nconst fetchList = (\n client: SanityClient,\n type: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/photos?order_by=${type}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nexport function fetchDownloadUrl(client: SanityClient, photo: UnsplashPhoto): Promise<string> {\n const downloadUrl = photo.links.download_location.replace(\n 'https://api.unsplash.com',\n '/addons/unsplash'\n )\n return client\n .request({\n url: downloadUrl,\n withCredentials: true,\n method: 'GET',\n })\n .then((result: { url: string }) => {\n return result.url\n })\n}\n\nexport const search = (\n client: SanityClient,\n query: SearchSubject,\n page: PageSubject,\n resultsPerPage: number\n): Observable<any> => {\n return concat(\n query.pipe(\n withLatestFrom(page),\n debounceTime(500),\n distinctUntilChanged(),\n switchMap(([q, p]) => {\n if (q) {\n return fetchSearch(client, q, p, resultsPerPage).pipe(\n distinctUntilChanged(),\n map((result) => result.results)\n )\n }\n return fetchList(client, 'popular', p, resultsPerPage)\n })\n )\n )\n}\n","import { Stack } from '@sanity/ui'\nimport styled from 'styled-components'\n\nexport const Search = styled(Stack)`\n position: sticky;\n top: 0;\n z-index: 1;\n`\n\nexport const Scroller = styled.div`\n overflow-y: auto;\n max-height: 80vh;\n`\n","import React from 'react'\nimport PhotoAlbum from 'react-photo-album'\nimport flatten from 'lodash/flatten'\nimport { BehaviorSubject, Subscription } from 'rxjs'\nimport { UnsplashPhoto } from '../types'\nimport Photo from './Photo'\nimport { fetchDownloadUrl, search } from '../datastores/unsplash'\nimport { Card, Dialog, Flex, Spinner, Stack, Text, TextInput } from '@sanity/ui'\nimport { Search } from './UnsplashAssetSource.styled'\nimport InfiniteScroll from 'react-infinite-scroll-component'\nimport { useClient, AssetSourceComponentProps, AssetFromSource } from 'sanity'\nimport { SanityClient } from '@sanity/client'\n\ntype State = {\n query: string\n searchResults: UnsplashPhoto[][]\n page: number\n isLoading: boolean\n cursor: number\n}\n\nconst RESULTS_PER_PAGE = 42\nconst PHOTO_SPACING = 2\nconst PHOTO_PADDING = 1 // offset the 1px border width\n\nexport default function UnsplashAssetSource(props: AssetSourceComponentProps) {\n const client = useClient({ apiVersion: '2022-09-01' })\n return <UnsplashAssetSourceInternal {...props} client={client} />\n}\n\nclass UnsplashAssetSourceInternal extends React.Component<\n AssetSourceComponentProps & { client: SanityClient },\n State\n> {\n static defaultProps = {\n selectedAssets: undefined,\n }\n\n state = {\n cursor: 0,\n query: '',\n page: 1,\n searchResults: [[]],\n isLoading: true,\n }\n\n searchSubscription: Subscription | null = null\n\n searchSubject$ = new BehaviorSubject('')\n pageSubject$ = new BehaviorSubject(1)\n\n componentDidMount() {\n this.searchSubscription = search(\n this.props.client,\n this.searchSubject$,\n this.pageSubject$,\n RESULTS_PER_PAGE\n ).subscribe({\n next: (results: UnsplashPhoto[]) => {\n this.setState((prev) => ({\n searchResults: [...prev.searchResults, results],\n isLoading: false,\n }))\n },\n })\n }\n\n componentWillUnmount() {\n if (this.searchSubscription) {\n this.searchSubscription.unsubscribe()\n }\n }\n\n handleSelect = (photo: UnsplashPhoto) => {\n this.setState({ isLoading: true })\n return fetchDownloadUrl(this.props.client, photo).then((downloadUrl) => {\n const description = photo.description || undefined\n const asset: AssetFromSource = {\n kind: 'url',\n value: downloadUrl,\n assetDocumentProps: {\n _type: 'sanity.imageAsset',\n source: {\n name: 'unsplash',\n id: photo.id,\n url: photo.links.html,\n },\n description,\n creditLine: `${photo.user.name} by Unsplash`,\n } as any,\n }\n this.props.onSelect([asset])\n })\n }\n\n handleClose = () => {\n this.props.onClose()\n }\n\n handleSearchTermChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value\n this.setState({ query, page: 1, searchResults: [[]], isLoading: true, cursor: 0 })\n this.pageSubject$.next(1)\n this.searchSubject$.next(query)\n }\n\n handleScollerLoadMore = () => {\n // eslint-disable-next-line react/no-access-state-in-setstate\n const nextPage = this.state.page + 1\n this.setState({ page: nextPage, isLoading: true })\n this.pageSubject$.next(nextPage)\n this.searchSubject$.next(this.state.query)\n }\n\n handleKeyDown = (event: any) => {\n const { cursor } = this.state\n if ((event.keyCode === 38 || event.keyCode === 37) && cursor > 0) {\n this.setState((prevState) => ({\n cursor: prevState.cursor - 1,\n }))\n } else if (\n (event.keyCode === 40 || event.keyCode === 39) &&\n cursor < this.getPhotos().length - 1\n ) {\n this.setState((prevState) => ({\n cursor: prevState.cursor + 1,\n }))\n }\n }\n\n getPhotos() {\n return flatten(this.state.searchResults)\n }\n\n updateCursor = (photo: UnsplashPhoto) => {\n const index = this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.id)\n this.setState({ cursor: index })\n }\n\n renderImage = (props: any) => {\n const { photo, layout } = props\n const active =\n this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.data.id) ===\n this.state.cursor || false\n return (\n <Photo\n onClick={this.handleSelect.bind(photo.data)}\n onKeyDown={this.handleKeyDown}\n data={photo.data}\n width={layout.width}\n height={layout.height}\n active={active}\n onFocus={this.updateCursor}\n />\n )\n }\n\n render() {\n const { query, searchResults, isLoading } = this.state\n\n return (\n <Dialog\n id=\"unsplash-asset-source\"\n header=\"Select image from Unsplash\"\n onClose={this.handleClose}\n open\n width={4}\n >\n <Stack space={3} padding={4}>\n <Card>\n <Search space={3}>\n <Text size={1} weight=\"semibold\">\n Search Unsplash\n </Text>\n <TextInput\n label=\"Search Unsplash.com\"\n placeholder=\"Topics or colors\"\n value={query}\n onChange={this.handleSearchTermChanged}\n />\n </Search>\n </Card>\n {!isLoading && this.getPhotos().length === 0 && (\n <Text size={1} muted>\n No results found\n </Text>\n )}\n <InfiniteScroll\n dataLength={this.getPhotos().length} // This is important field to render the next data\n next={this.handleScollerLoadMore}\n // scrollableTarget=\"unsplash-scroller\"\n hasMore\n scrollThreshold={0.99}\n height=\"60vh\"\n loader={\n <Flex align=\"center\" justify=\"center\" padding={3}>\n <Spinner muted />\n </Flex>\n }\n endMessage={\n <Text size={1} muted>\n No more results\n </Text>\n }\n >\n {searchResults\n .filter((photos) => photos.length > 0)\n .map((photos: UnsplashPhoto[], index) => (\n <PhotoAlbum\n key={`gallery-${query || 'popular'}-${index}`}\n layout=\"rows\"\n spacing={PHOTO_SPACING}\n padding={PHOTO_PADDING}\n targetRowHeight={(width) => {\n if (width < 300) return 150\n else if (width < 600) return 200\n return 300\n }}\n photos={photos.map((photo: UnsplashPhoto) => ({\n src: photo.urls.small,\n width: photo.width,\n height: photo.height,\n key: photo.id,\n data: photo,\n }))}\n renderPhoto={this.renderImage}\n componentsProps={{\n containerProps: { style: { marginBottom: `${PHOTO_SPACING}px` } },\n }}\n />\n ))}\n </InfiniteScroll>\n </Stack>\n </Dialog>\n )\n }\n}\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Svg = styled.svg`\n transform: scale(0.8);\n`\n\nexport default function UnsplashIcon() {\n return (\n <Svg role=\"img\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"currentColor\">\n <title />\n <path d=\"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z\" />\n </Svg>\n )\n}\n","import Unsplash from './components/UnsplashAssetSource'\nimport Icon from './components/Icon'\nimport { definePlugin, AssetSource } from 'sanity'\n\nexport type { UnsplashPhoto, Asset, AssetDocument } from './types'\n\n/**\n * @public\n */\nexport const unsplashAssetSource: AssetSource = {\n name: 'unsplash',\n title: 'Unsplash',\n component: Unsplash,\n icon: Icon,\n}\n\n/**\n * @public\n */\nexport const unsplashImageAsset = definePlugin({\n name: 'asset-source-unsplash-plugin',\n\n form: {\n image: {\n assetSources: (prev) => {\n return [...prev, unsplashAssetSource]\n },\n },\n },\n})\n"],"names":["Root","styled","div","_templateObject","_taggedTemplateLiteral","_ref","studioTheme","color","card","enabled","border","CreditLineLink","a","_templateObject2","CreditLine","Card","_templateObject3","_ref2","theme","sanity","fg","bg","Photo","props","onClick","data","onKeyDown","onFocus","active","width","height","rootElm","useRef","prevActive","handleClick","useCallback","handleCreditLineClicked","event","stopPropagation","url","concat","links","html","encodeURIComponent","window","open","id","handleKeyDown","keyCode","handleMouseDown","useEffect","current","focus","src","urls","small","userName","user","name","useTheme","jsx","ref","title","tabIndex","onMouseDown","style","backgroundImage","children","padding","radius","margin","jsxs","Text","size","username","search","client","query","page","resultsPerPage","pipe","withLatestFrom","debounceTime","distinctUntilChanged","switchMap","_ref3","q","p","perPage","defer","observable","request","withCredentials","method","fetchSearch","map","result","results","type","fetchList","Search","Stack","_templateObject4","_templateObject5","UnsplashAssetSourceInternal","React","Component","constructor","super","arguments","this","state","cursor","searchResults","isLoading","searchSubscription","searchSubject$","BehaviorSubject","pageSubject$","handleSelect","photo","setState","downloadUrl","download_location","replace","then","fetchDownloadUrl","description","asset","kind","value","assetDocumentProps","_type","source","creditLine","onSelect","handleClose","onClose","handleSearchTermChanged","currentTarget","next","handleScollerLoadMore","nextPage","prevState","getPhotos","length","updateCursor","index","findIndex","renderImage","layout","bind","componentDidMount","subscribe","prev","componentWillUnmount","unsubscribe","flatten","render","Dialog","header","space","weight","TextInput","label","placeholder","onChange","muted","InfiniteScroll","dataLength","hasMore","scrollThreshold","loader","Flex","align","justify","Spinner","endMessage","filter","photos","PhotoAlbum","spacing","targetRowHeight","key","renderPhoto","componentsProps","containerProps","marginBottom","defaultProps","selectedAssets","Svg","svg","_templateObject6","unsplashAssetSource","component","useClient","apiVersion","icon","role","viewBox","fill","d","unsplashImageAsset","definePlugin","form","image","assetSources"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/components/Photo.styled.tsx","../src/components/Photo.tsx","../src/datastores/unsplash.ts","../src/components/UnsplashAssetSource.styled.tsx","../src/components/UnsplashAssetSource.tsx","../src/components/Icon.tsx","../src/index.ts"],"sourcesContent":["import { Card, Theme } from '@sanity/ui'\nimport styled from 'styled-components'\n\ntype SanityTheme = Theme['sanity']\n\ninterface Style {\n studioTheme: SanityTheme\n}\n\nexport const Root = styled.div`\n overflow: hidden;\n background-origin: content-box;\n background-repeat: no-repeat;\n background-clip: border-box;\n background-size: cover;\n position: relative;\n outline: none !important;\n border: ${({ studioTheme }: Style) => `1px solid ${studioTheme.color.card.enabled.border}`};\n box-sizing: content-box;\n user-drag: none;\n\n &:hover {\n opacity: 0.85;\n }\n\n &:focus,\n &:active {\n border: 1px solid var(--input-border-color-focus);\n box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n }\n`\n\nexport const CreditLineLink = styled.a`\n text-decoration: none;\n cursor: pointer;\n`\n\nexport const CreditLine = styled(Card)`\n ${({ theme }) => `\n --creditline-fg: ${theme.sanity.color.card.enabled.fg};\n --creditline-bg: ${theme.sanity.color.card.enabled.bg};\n `};\n user-drag: none;\n position: absolute;\n background-color: var(--creditline-bg);\n bottom: 0;\n\n [data-ui='Text'] {\n color: var(--creditline-fg);\n }\n`\n","import { Text, useTheme } from '@sanity/ui'\nimport React, { useCallback, useEffect, useRef } from 'react'\nimport { UnsplashPhoto } from '../types'\nimport { CreditLine, CreditLineLink, Root } from './Photo.styled'\n\ntype Props = {\n data: UnsplashPhoto\n width: number\n height: number\n onClick: (photo: UnsplashPhoto) => void\n onKeyDown: (event: any) => void\n active: boolean\n onFocus: (photo: UnsplashPhoto) => void\n}\n\nconst UTM_SOURCE = 'sanity-plugin-asset-source-unsplash'\n\nexport default function Photo(props: Props) {\n const { onClick, data, onKeyDown, onFocus, active, width, height } = props\n const rootElm = useRef<HTMLDivElement>(null)\n const prevActive = useRef<boolean>(false)\n\n const handleClick = useCallback(() => {\n onClick(data)\n }, [onClick, data])\n\n const handleCreditLineClicked = useCallback(\n (event: any) => {\n event.stopPropagation()\n const url = `${data.links.html}?utm_source=${encodeURIComponent(\n UTM_SOURCE\n )}&utm_medium=referral`\n window.open(url, data.id, 'noreferrer,noopener')\n },\n [data]\n )\n\n const handleKeyDown = useCallback(\n (event: any) => {\n onKeyDown(event)\n if (event.keyCode === 13) {\n onClick(data)\n }\n },\n [onKeyDown, data, onClick]\n )\n\n const handleMouseDown = useCallback(() => {\n onFocus(data)\n }, [onFocus, data])\n\n useEffect(() => {\n if (!prevActive.current && active && rootElm.current) {\n rootElm.current.focus()\n onFocus(data)\n }\n prevActive.current = active\n // data changing alone should not re-trigger effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [active])\n\n const src = data.urls.small\n const userName = data.user.name\n\n const theme = useTheme().sanity\n return (\n <Root\n ref={rootElm}\n studioTheme={theme}\n title={`Select image by ${userName} from Unsplash`}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onMouseDown={handleMouseDown}\n style={{\n width: `${width}px`,\n height: `${height}px`,\n backgroundImage: `url(\"${src}\")`,\n }}\n onClick={handleClick}\n >\n <CreditLineLink onClick={handleCreditLineClicked}>\n <CreditLine padding={2} radius={2} margin={2}>\n <Text size={1} title={`Open image by ${userName} on Unsplash in new window`}>\n By @{data.user.username}\n </Text>\n </CreditLine>\n </CreditLineLink>\n </Root>\n )\n}\n","import { defer, concat, BehaviorSubject, Observable } from 'rxjs'\nimport { debounceTime, switchMap, map, distinctUntilChanged, withLatestFrom } from 'rxjs/operators'\nimport { UnsplashPhoto } from '../types'\nimport { SanityClient } from '@sanity/client'\n\ntype SearchSubject = BehaviorSubject<string>\ntype PageSubject = BehaviorSubject<number>\n\nconst fetchSearch = (\n client: SanityClient,\n query: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/search/photos?query=${encodeURIComponent(\n query\n )}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nconst fetchList = (\n client: SanityClient,\n type: string,\n page: number,\n perPage: number\n): Observable<any> =>\n defer(\n () =>\n client.observable.request({\n url: `/addons/unsplash/photos?order_by=${type}&page=${page}&per_page=${perPage}`,\n withCredentials: true,\n method: 'GET',\n }) as any\n )\n\nexport function fetchDownloadUrl(client: SanityClient, photo: UnsplashPhoto): Promise<string> {\n const downloadUrl = photo.links.download_location.replace(\n 'https://api.unsplash.com',\n '/addons/unsplash'\n )\n return client\n .request({\n url: downloadUrl,\n withCredentials: true,\n method: 'GET',\n })\n .then((result: { url: string }) => {\n return result.url\n })\n}\n\nexport const search = (\n client: SanityClient,\n query: SearchSubject,\n page: PageSubject,\n resultsPerPage: number\n): Observable<any> => {\n return concat(\n query.pipe(\n withLatestFrom(page),\n debounceTime(500),\n distinctUntilChanged(),\n switchMap(([q, p]) => {\n if (q) {\n return fetchSearch(client, q, p, resultsPerPage).pipe(\n distinctUntilChanged(),\n map((result) => result.results)\n )\n }\n return fetchList(client, 'popular', p, resultsPerPage)\n })\n )\n )\n}\n","import { Stack } from '@sanity/ui'\nimport styled from 'styled-components'\n\nexport const Search = styled(Stack)`\n position: sticky;\n top: 0;\n z-index: 1;\n`\n\nexport const Scroller = styled.div`\n overflow-y: auto;\n max-height: 80vh;\n`\n","import React from 'react'\nimport PhotoAlbum from 'react-photo-album'\nimport flatten from 'lodash/flatten'\nimport { BehaviorSubject, Subscription } from 'rxjs'\nimport { UnsplashPhoto } from '../types'\nimport Photo from './Photo'\nimport { fetchDownloadUrl, search } from '../datastores/unsplash'\nimport { Card, Dialog, Flex, Spinner, Stack, Text, TextInput } from '@sanity/ui'\nimport { Search } from './UnsplashAssetSource.styled'\nimport InfiniteScroll from 'react-infinite-scroll-component'\nimport { useClient, AssetSourceComponentProps, AssetFromSource } from 'sanity'\nimport { SanityClient } from '@sanity/client'\n\ntype State = {\n query: string\n searchResults: UnsplashPhoto[][]\n page: number\n isLoading: boolean\n cursor: number\n}\n\nconst RESULTS_PER_PAGE = 42\nconst PHOTO_SPACING = 2\nconst PHOTO_PADDING = 1 // offset the 1px border width\n\nexport default function UnsplashAssetSource(props: AssetSourceComponentProps) {\n const client = useClient({ apiVersion: '2022-09-01' })\n return <UnsplashAssetSourceInternal {...props} client={client} />\n}\n\nclass UnsplashAssetSourceInternal extends React.Component<\n AssetSourceComponentProps & { client: SanityClient },\n State\n> {\n static defaultProps = {\n selectedAssets: undefined,\n }\n\n state = {\n cursor: 0,\n query: '',\n page: 1,\n searchResults: [[]],\n isLoading: true,\n }\n\n searchSubscription: Subscription | null = null\n\n searchSubject$ = new BehaviorSubject('')\n pageSubject$ = new BehaviorSubject(1)\n\n componentDidMount() {\n this.searchSubscription = search(\n this.props.client,\n this.searchSubject$,\n this.pageSubject$,\n RESULTS_PER_PAGE\n ).subscribe({\n next: (results: UnsplashPhoto[]) => {\n this.setState((prev) => ({\n searchResults: [...prev.searchResults, results],\n isLoading: false,\n }))\n },\n })\n }\n\n componentWillUnmount() {\n if (this.searchSubscription) {\n this.searchSubscription.unsubscribe()\n }\n }\n\n handleSelect = (photo: UnsplashPhoto) => {\n this.setState({ isLoading: true })\n return fetchDownloadUrl(this.props.client, photo).then((downloadUrl) => {\n const description = photo.description || undefined\n const asset: AssetFromSource = {\n kind: 'url',\n value: downloadUrl,\n assetDocumentProps: {\n _type: 'sanity.imageAsset',\n source: {\n name: 'unsplash',\n id: photo.id,\n url: photo.links.html,\n },\n description,\n creditLine: `${photo.user.name} by Unsplash`,\n } as any,\n }\n this.props.onSelect([asset])\n })\n }\n\n handleClose = () => {\n this.props.onClose()\n }\n\n handleSearchTermChanged = (event: React.ChangeEvent<HTMLInputElement>) => {\n const query = event.currentTarget.value\n this.setState({ query, page: 1, searchResults: [[]], isLoading: true, cursor: 0 })\n this.pageSubject$.next(1)\n this.searchSubject$.next(query)\n }\n\n handleScollerLoadMore = () => {\n // eslint-disable-next-line react/no-access-state-in-setstate\n const nextPage = this.state.page + 1\n this.setState({ page: nextPage, isLoading: true })\n this.pageSubject$.next(nextPage)\n this.searchSubject$.next(this.state.query)\n }\n\n handleKeyDown = (event: any) => {\n const { cursor } = this.state\n if ((event.keyCode === 38 || event.keyCode === 37) && cursor > 0) {\n this.setState((prevState) => ({\n cursor: prevState.cursor - 1,\n }))\n } else if (\n (event.keyCode === 40 || event.keyCode === 39) &&\n cursor < this.getPhotos().length - 1\n ) {\n this.setState((prevState) => ({\n cursor: prevState.cursor + 1,\n }))\n }\n }\n\n getPhotos() {\n return flatten(this.state.searchResults)\n }\n\n updateCursor = (photo: UnsplashPhoto) => {\n const index = this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.id)\n this.setState({ cursor: index })\n }\n\n renderImage = (props: any) => {\n const { photo, layout } = props\n const active =\n this.getPhotos().findIndex((result: UnsplashPhoto) => result.id === photo.data.id) ===\n this.state.cursor || false\n return (\n <Photo\n onClick={this.handleSelect.bind(photo.data)}\n onKeyDown={this.handleKeyDown}\n data={photo.data}\n width={layout.width}\n height={layout.height}\n active={active}\n onFocus={this.updateCursor}\n />\n )\n }\n\n render() {\n const { query, searchResults, isLoading } = this.state\n\n return (\n <Dialog\n id=\"unsplash-asset-source\"\n header=\"Select image from Unsplash\"\n onClose={this.handleClose}\n open\n width={4}\n >\n <Stack space={3} padding={4}>\n <Card>\n <Search space={3}>\n <Text size={1} weight=\"semibold\">\n Search Unsplash\n </Text>\n <TextInput\n label=\"Search Unsplash.com\"\n placeholder=\"Topics or colors\"\n value={query}\n onChange={this.handleSearchTermChanged}\n />\n </Search>\n </Card>\n {!isLoading && this.getPhotos().length === 0 && (\n <Text size={1} muted>\n No results found\n </Text>\n )}\n <InfiniteScroll\n dataLength={this.getPhotos().length} // This is important field to render the next data\n next={this.handleScollerLoadMore}\n // scrollableTarget=\"unsplash-scroller\"\n hasMore\n scrollThreshold={0.99}\n height=\"60vh\"\n loader={\n <Flex align=\"center\" justify=\"center\" padding={3}>\n <Spinner muted />\n </Flex>\n }\n endMessage={\n <Text size={1} muted>\n No more results\n </Text>\n }\n >\n {searchResults\n .filter((photos) => photos.length > 0)\n .map((photos: UnsplashPhoto[], index) => (\n <PhotoAlbum\n key={`gallery-${query || 'popular'}-${index}`}\n layout=\"rows\"\n spacing={PHOTO_SPACING}\n padding={PHOTO_PADDING}\n targetRowHeight={(width) => {\n if (width < 300) return 150\n else if (width < 600) return 200\n return 300\n }}\n photos={photos.map((photo: UnsplashPhoto) => ({\n src: photo.urls.small,\n width: photo.width,\n height: photo.height,\n key: photo.id,\n data: photo,\n }))}\n renderPhoto={this.renderImage}\n componentsProps={{\n containerProps: { style: { marginBottom: `${PHOTO_SPACING}px` } },\n }}\n />\n ))}\n </InfiniteScroll>\n </Stack>\n </Dialog>\n )\n }\n}\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Svg = styled.svg`\n transform: scale(0.8);\n transform-origin: top;\n`\n\nexport default function UnsplashIcon() {\n return (\n <Svg role=\"img\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"currentColor\">\n <title />\n <path d=\"M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z\" />\n </Svg>\n )\n}\n","import Unsplash from './components/UnsplashAssetSource'\nimport Icon from './components/Icon'\nimport { definePlugin, AssetSource } from 'sanity'\n\nexport type { UnsplashPhoto, Asset, AssetDocument } from './types'\n\n/**\n * @public\n */\nexport const unsplashAssetSource: AssetSource = {\n name: 'unsplash',\n title: 'Unsplash',\n component: Unsplash,\n icon: Icon,\n}\n\n/**\n * @public\n */\nexport const unsplashImageAsset = definePlugin({\n name: 'asset-source-unsplash-plugin',\n\n form: {\n image: {\n assetSources: (prev) => {\n return [...prev, unsplashAssetSource]\n },\n },\n },\n})\n"],"names":["Root","styled","div","_templateObject","_taggedTemplateLiteral","_ref","studioTheme","color","card","enabled","border","CreditLineLink","a","_templateObject2","CreditLine","Card","_templateObject3","_ref2","theme","sanity","fg","bg","Photo","props","onClick","data","onKeyDown","onFocus","active","width","height","rootElm","useRef","prevActive","handleClick","useCallback","handleCreditLineClicked","event","stopPropagation","url","concat","links","html","encodeURIComponent","window","open","id","handleKeyDown","keyCode","handleMouseDown","useEffect","current","focus","src","urls","small","userName","user","name","useTheme","jsx","ref","title","tabIndex","onMouseDown","style","backgroundImage","children","padding","radius","margin","jsxs","Text","size","username","search","client","query","page","resultsPerPage","pipe","withLatestFrom","debounceTime","distinctUntilChanged","switchMap","_ref3","q","p","perPage","defer","observable","request","withCredentials","method","fetchSearch","map","result","results","type","fetchList","Search","Stack","_templateObject4","_templateObject5","UnsplashAssetSourceInternal","React","Component","constructor","super","arguments","this","state","cursor","searchResults","isLoading","searchSubscription","searchSubject$","BehaviorSubject","pageSubject$","handleSelect","photo","setState","downloadUrl","download_location","replace","then","fetchDownloadUrl","description","asset","kind","value","assetDocumentProps","_type","source","creditLine","onSelect","handleClose","onClose","handleSearchTermChanged","currentTarget","next","handleScollerLoadMore","nextPage","prevState","getPhotos","length","updateCursor","index","findIndex","renderImage","layout","bind","componentDidMount","subscribe","prev","componentWillUnmount","unsubscribe","flatten","render","Dialog","header","space","weight","TextInput","label","placeholder","onChange","muted","InfiniteScroll","dataLength","hasMore","scrollThreshold","loader","Flex","align","justify","Spinner","endMessage","filter","photos","PhotoAlbum","spacing","targetRowHeight","key","renderPhoto","componentsProps","containerProps","marginBottom","defaultProps","selectedAssets","Svg","svg","_templateObject6","unsplashAssetSource","component","useClient","apiVersion","icon","role","viewBox","fill","d","unsplashImageAsset","definePlugin","form","image","assetSources"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sanity-plugin-asset-source-unsplash",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Use images from Unsplash.com in your Sanity Studio",
5
5
  "keywords": [
6
6
  "sanity",
@@ -91,8 +91,8 @@
91
91
  "prettier": "^2.7.1",
92
92
  "prettier-plugin-packagejson": "^2.3.0",
93
93
  "prompt": "^1.3.0",
94
- "react": "^18",
95
- "react-dom": "^18",
94
+ "react": "^18.2.0",
95
+ "react-dom": "^18.2.0",
96
96
  "replace-in-file": "^6.3.5",
97
97
  "rimraf": "^3.0.2",
98
98
  "sanity": "^3.0.0",
@@ -115,12 +115,5 @@
115
115
  "publishConfig": {
116
116
  "access": "public"
117
117
  },
118
- "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-asset-source-unsplash",
119
- "sanityPlugin": {
120
- "verifyPackage": {
121
- "babelConfig": false,
122
- "scripts": false,
123
- "parcel": false
124
- }
125
- }
118
+ "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-asset-source-unsplash"
126
119
  }
package/src/components/Icon.tsx CHANGED
@@ -3,6 +3,7 @@ import styled from 'styled-components'
3
3
 
4
4
  const Svg = styled.svg`
5
5
  transform: scale(0.8);
6
+ transform-origin: top;
6
7
  `
7
8
 
8
9
  export default function UnsplashIcon() {