sanity-plugin-asset-source-unsplash 1.1.2 → 2.0.0

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 (10) hide show
  1. package/LICENSE +1 -1
  2. package/lib/index.cjs +250 -331
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.js +258 -320
  5. package/lib/index.js.map +1 -1
  6. package/package.json +27 -29
  7. package/src/components/Photo.tsx +4 -1
  8. package/src/components/UnsplashAssetSource.tsx +13 -5
  9. package/src/datastores/unsplash.ts +8 -3
  10. package/lib/index.cjs.js +0 -5
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023 Sanity.io
3
+ Copyright (c) 2024 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/lib/index.cjs CHANGED
@@ -1,372 +1,294 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', {
4
- value: true
5
- });
6
- var sanity = require('sanity');
7
- var jsxRuntime = require('react/jsx-runtime');
8
- var ui = require('@sanity/ui');
9
- var React = require('react');
10
- var InfiniteScroll = require('react-infinite-scroll-component');
11
- var PhotoAlbum = require('react-photo-album');
12
- var rxjs = require('rxjs');
13
- var operators = require('rxjs/operators');
14
- var styled = require('styled-components');
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: !0 });
3
+ var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), React = require("react"), InfiniteScroll = require("react-infinite-scroll-component"), PhotoAlbum = require("react-photo-album"), rxjs = require("rxjs"), operators = require("rxjs/operators"), styled = require("styled-components");
15
4
  function _interopDefaultCompat(e) {
16
- return e && typeof e === 'object' && 'default' in e ? e : {
17
- default: e
18
- };
5
+ return e && typeof e == "object" && "default" in e ? e : { default: e };
19
6
  }
20
- var React__default = /*#__PURE__*/_interopDefaultCompat(React);
21
- var InfiniteScroll__default = /*#__PURE__*/_interopDefaultCompat(InfiniteScroll);
22
- var PhotoAlbum__default = /*#__PURE__*/_interopDefaultCompat(PhotoAlbum);
23
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
7
+ var React__default = /* @__PURE__ */ _interopDefaultCompat(React), InfiniteScroll__default = /* @__PURE__ */ _interopDefaultCompat(InfiniteScroll), PhotoAlbum__default = /* @__PURE__ */ _interopDefaultCompat(PhotoAlbum), styled__default = /* @__PURE__ */ _interopDefaultCompat(styled);
24
8
  function UnsplashIcon() {
25
- return /* @__PURE__ */jsxRuntime.jsxs("svg", {
26
- role: "img",
27
- viewBox: "0 0 25 25",
28
- width: "1em",
29
- height: "1em",
30
- fill: "currentColor",
31
- children: [/* @__PURE__ */jsxRuntime.jsx("title", {}), /* @__PURE__ */jsxRuntime.jsx("path", {
32
- d: "M9 9V4h7v5H9Zm7 3h5v9H4v-9h5v5h7v-5Z"
33
- })]
34
- });
9
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { role: "img", viewBox: "0 0 25 25", width: "1em", height: "1em", fill: "currentColor", children: [
10
+ /* @__PURE__ */ jsxRuntime.jsx("title", {}),
11
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9V4h7v5H9Zm7 3h5v9H4v-9h5v5h7v-5Z" })
12
+ ] });
35
13
  }
36
- const fetchSearch = (client, query, page, perPage) => rxjs.defer(() => client.observable.request({
37
- url: "/addons/unsplash/search/photos?query=".concat(encodeURIComponent(query), "&page=").concat(page, "&per_page=").concat(perPage),
38
- withCredentials: true,
39
- method: "GET"
40
- }));
41
- const fetchList = (client, type, page, perPage) => rxjs.defer(() => client.observable.request({
42
- url: "/addons/unsplash/photos?order_by=".concat(type, "&page=").concat(page, "&per_page=").concat(perPage),
43
- withCredentials: true,
44
- method: "GET"
45
- }));
14
+ const fetchSearch = (client, query, page, perPage) => rxjs.defer(
15
+ () => client.observable.request({
16
+ url: `/addons/unsplash/search/photos?query=${encodeURIComponent(
17
+ query
18
+ )}&page=${page}&per_page=${perPage}`,
19
+ withCredentials: !0,
20
+ method: "GET"
21
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
22
+ })
23
+ ), fetchList = (client, type, page, perPage) => rxjs.defer(
24
+ () => client.observable.request({
25
+ url: `/addons/unsplash/photos?order_by=${type}&page=${page}&per_page=${perPage}`,
26
+ withCredentials: !0,
27
+ method: "GET"
28
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
29
+ })
30
+ );
46
31
  function fetchDownloadUrl(client, photo) {
47
- const downloadUrl = photo.links.download_location.replace("https://api.unsplash.com", "/addons/unsplash");
32
+ const downloadUrl = photo.links.download_location.replace(
33
+ "https://api.unsplash.com",
34
+ "/addons/unsplash"
35
+ );
48
36
  return client.request({
49
37
  url: downloadUrl,
50
- withCredentials: true,
38
+ withCredentials: !0,
51
39
  method: "GET"
52
- }).then(result => {
53
- return result.url;
54
- });
40
+ }).then((result) => result.url);
55
41
  }
56
- const search = (client, query, page, resultsPerPage) => {
57
- return rxjs.concat(query.pipe(operators.withLatestFrom(page), operators.debounceTime(500), operators.distinctUntilChanged(), operators.switchMap(_ref => {
58
- let [q, p] = _ref;
59
- if (q) {
60
- return fetchSearch(client, q, p, resultsPerPage).pipe(operators.distinctUntilChanged(), operators.map(result => result.results));
61
- }
62
- return fetchList(client, "popular", p, resultsPerPage);
63
- })));
64
- };
65
- var __freeze$1 = Object.freeze;
66
- var __defProp$2 = Object.defineProperty;
67
- var __template$1 = (cooked, raw) => __freeze$1(__defProp$2(cooked, "raw", {
68
- value: __freeze$1(raw || cooked.slice())
69
- }));
70
- var _a$1, _b$1, _c;
71
- const Root = styled__default.default.div(_a$1 || (_a$1 = __template$1(["\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"])), _ref2 => {
72
- let {
73
- theme
74
- } = _ref2;
75
- return "1px solid ".concat(theme.sanity.color.card.enabled.border);
76
- });
77
- const CreditLineLink = styled__default.default.a(_b$1 || (_b$1 = __template$1(["\n text-decoration: none;\n cursor: pointer;\n"])));
78
- const CreditLine = styled__default.default(ui.Card)(_c || (_c = __template$1(["\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"])), _ref3 => {
79
- let {
80
- theme
81
- } = _ref3;
82
- return "\n --creditline-fg: ".concat(theme.sanity.color.card.enabled.fg, ";\n --creditline-bg: ").concat(theme.sanity.color.card.enabled.bg, ";\n ");
83
- });
84
- const UTM_SOURCE = "sanity-plugin-asset-source-unsplash";
42
+ const search = (client, query, page, resultsPerPage) => rxjs.concat(
43
+ query.pipe(
44
+ operators.withLatestFrom(page),
45
+ operators.debounceTime(500),
46
+ operators.distinctUntilChanged(),
47
+ operators.switchMap(([q, p]) => q ? fetchSearch(client, q, p, resultsPerPage).pipe(
48
+ operators.distinctUntilChanged(),
49
+ operators.map((result) => result.results)
50
+ ) : fetchList(client, "popular", p, resultsPerPage))
51
+ )
52
+ ), Root = styled__default.default.div`
53
+ overflow: hidden;
54
+ background-origin: content-box;
55
+ background-repeat: no-repeat;
56
+ background-clip: border-box;
57
+ background-size: cover;
58
+ position: relative;
59
+ outline: none !important;
60
+ border: ${({ theme }) => `1px solid ${theme.sanity.color.card.enabled.border}`};
61
+ box-sizing: content-box;
62
+ user-drag: none;
63
+
64
+ &:hover {
65
+ opacity: 0.85;
66
+ }
67
+
68
+ &:focus,
69
+ &:active {
70
+ border: 1px solid var(--input-border-color-focus);
71
+ box-shadow: inset 0 0 0 3px var(--input-border-color-focus);
72
+ }
73
+ `, CreditLineLink = styled__default.default.a`
74
+ text-decoration: none;
75
+ cursor: pointer;
76
+ `, CreditLine = styled__default.default(ui.Card)`
77
+ ${({ theme }) => `
78
+ --creditline-fg: ${theme.sanity.color.card.enabled.fg};
79
+ --creditline-bg: ${theme.sanity.color.card.enabled.bg};
80
+ `};
81
+ user-drag: none;
82
+ position: absolute;
83
+ background-color: var(--creditline-bg);
84
+ bottom: 0;
85
+
86
+ [data-ui='Text'] {
87
+ color: var(--creditline-fg);
88
+ }
89
+ `, UTM_SOURCE = "sanity-plugin-asset-source-unsplash";
85
90
  function Photo(props) {
86
- const {
87
- onClick,
88
- data,
89
- onKeyDown,
90
- onFocus,
91
- active,
92
- width,
93
- height
94
- } = props;
95
- const handleClick = React.useCallback(() => {
91
+ const { onClick, data, onKeyDown, onFocus, active, width, height } = props, handleClick = React.useCallback(() => {
96
92
  onClick(data);
97
- }, [onClick, data]);
98
- const handleCreditLineClicked = React.useCallback(event => {
99
- event.stopPropagation();
100
- const url = "".concat(data.links.html, "?utm_source=").concat(encodeURIComponent(UTM_SOURCE), "&utm_medium=referral");
101
- window.open(url, data.id, "noreferrer,noopener");
102
- }, [data]);
103
- const handleKeyDown = React.useCallback(event => {
104
- onKeyDown(event);
105
- if (event.keyCode === 13) {
106
- onClick(data);
107
- }
108
- }, [onKeyDown, data, onClick]);
109
- const handleMouseDown = React.useCallback(() => {
93
+ }, [onClick, data]), handleCreditLineClicked = React.useCallback(
94
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
95
+ (event) => {
96
+ event.stopPropagation();
97
+ const url = `${data.links.html}?utm_source=${encodeURIComponent(
98
+ UTM_SOURCE
99
+ )}&utm_medium=referral`;
100
+ window.open(url, data.id, "noreferrer,noopener");
101
+ },
102
+ [data]
103
+ ), handleKeyDown = React.useCallback(
104
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
105
+ (event) => {
106
+ onKeyDown(event), event.keyCode === 13 && onClick(data);
107
+ },
108
+ [onKeyDown, data, onClick]
109
+ ), handleMouseDown = React.useCallback(() => {
110
110
  onFocus(data);
111
111
  }, [onFocus, data]);
112
112
  React.useEffect(() => {
113
- if (active) {
114
- onFocus(data);
115
- }
113
+ active && onFocus(data);
116
114
  }, [active, data, onFocus]);
117
- const src = data.urls.small;
118
- const userName = data.user.name;
119
- return /* @__PURE__ */jsxRuntime.jsx(Root, {
120
- title: "Select image by ".concat(userName, " from Unsplash"),
121
- tabIndex: 0,
122
- onKeyDown: handleKeyDown,
123
- onMouseDown: handleMouseDown,
124
- style: {
125
- width: "".concat(width, "px"),
126
- height: "".concat(height, "px"),
127
- backgroundImage: 'url("'.concat(src, '")')
128
- },
129
- onClick: handleClick,
130
- children: /* @__PURE__ */jsxRuntime.jsx(CreditLineLink, {
131
- onClick: handleCreditLineClicked,
132
- children: /* @__PURE__ */jsxRuntime.jsx(CreditLine, {
133
- padding: 2,
134
- radius: 2,
135
- margin: 2,
136
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
137
- size: 1,
138
- title: "Open image by ".concat(userName, " on Unsplash in new window"),
139
- children: ["By @", data.user.username]
140
- })
141
- })
142
- })
143
- });
115
+ const src = data.urls.small, userName = data.user.name;
116
+ return /* @__PURE__ */ jsxRuntime.jsx(
117
+ Root,
118
+ {
119
+ title: `Select image by ${userName} from Unsplash`,
120
+ tabIndex: 0,
121
+ onKeyDown: handleKeyDown,
122
+ onMouseDown: handleMouseDown,
123
+ style: {
124
+ width: `${width}px`,
125
+ height: `${height}px`,
126
+ backgroundImage: `url("${src}")`
127
+ },
128
+ onClick: handleClick,
129
+ children: /* @__PURE__ */ jsxRuntime.jsx(CreditLineLink, { onClick: handleCreditLineClicked, children: /* @__PURE__ */ jsxRuntime.jsx(CreditLine, { padding: 2, radius: 2, margin: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, title: `Open image by ${userName} on Unsplash in new window`, children: [
130
+ "By @",
131
+ data.user.username
132
+ ] }) }) })
133
+ }
134
+ );
144
135
  }
145
- var __freeze = Object.freeze;
146
- var __defProp$1 = Object.defineProperty;
147
- var __template = (cooked, raw) => __freeze(__defProp$1(cooked, "raw", {
148
- value: __freeze(raw || cooked.slice())
149
- }));
150
- var _a, _b;
151
- const Search = styled__default.default(ui.Stack)(_a || (_a = __template(["\n position: sticky;\n top: 0;\n z-index: 1;\n"])));
152
- styled__default.default.div(_b || (_b = __template(["\n overflow-y: auto;\n max-height: 80vh;\n"])));
153
- var __defProp = Object.defineProperty;
154
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
155
- enumerable: true,
156
- configurable: true,
157
- writable: true,
158
- value
159
- }) : obj[key] = value;
160
- var __publicField = (obj, key, value) => {
161
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
162
- return value;
163
- };
164
- const RESULTS_PER_PAGE = 42;
165
- const PHOTO_SPACING = 2;
166
- const PHOTO_PADDING = 1;
136
+ const Search = styled__default.default(ui.Stack)`
137
+ position: sticky;
138
+ top: 0;
139
+ z-index: 1;
140
+ `;
141
+ styled__default.default.div`
142
+ overflow-y: auto;
143
+ max-height: 80vh;
144
+ `;
145
+ var __defProp = Object.defineProperty, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField = (obj, key, value) => (__defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value), value);
146
+ const RESULTS_PER_PAGE = 42, PHOTO_SPACING = 2, PHOTO_PADDING = 1;
167
147
  function UnsplashAssetSource(props) {
168
- const client = sanity.useClient({
169
- apiVersion: "2022-09-01"
170
- });
171
- return /* @__PURE__ */jsxRuntime.jsx(UnsplashAssetSourceInternal, {
172
- ...props,
173
- client
174
- });
148
+ const client = sanity.useClient({ apiVersion: "2022-09-01" });
149
+ return /* @__PURE__ */ jsxRuntime.jsx(UnsplashAssetSourceInternal, { ...props, client });
175
150
  }
176
151
  class UnsplashAssetSourceInternal extends React__default.default.Component {
177
152
  constructor() {
178
- super(...arguments);
179
- __publicField(this, "state", {
153
+ super(...arguments), __publicField(this, "state", {
180
154
  cursor: 0,
181
155
  query: "",
182
156
  page: 1,
183
157
  searchResults: [[]],
184
- isLoading: true
185
- });
186
- __publicField(this, "searchSubscription", null);
187
- __publicField(this, "searchSubject$", new rxjs.BehaviorSubject(""));
188
- __publicField(this, "pageSubject$", new rxjs.BehaviorSubject(1));
189
- __publicField(this, "handleSelect", photo => {
190
- this.setState({
191
- isLoading: true
192
- });
193
- return fetchDownloadUrl(this.props.client, photo).then(downloadUrl => {
194
- const description = photo.description || void 0;
195
- const asset = {
196
- kind: "url",
197
- value: downloadUrl,
198
- assetDocumentProps: {
199
- _type: "sanity.imageAsset",
200
- source: {
201
- name: "unsplash",
202
- id: photo.id,
203
- url: photo.links.html
204
- },
205
- description,
206
- creditLine: "".concat(photo.user.name, " by Unsplash")
207
- }
208
- };
209
- this.props.onSelect([asset]);
210
- });
211
- });
212
- __publicField(this, "handleClose", () => {
158
+ isLoading: !0
159
+ }), __publicField(this, "searchSubscription", null), __publicField(this, "searchSubject$", new rxjs.BehaviorSubject("")), __publicField(this, "pageSubject$", new rxjs.BehaviorSubject(1)), __publicField(this, "handleSelect", (photo) => (this.setState({ isLoading: !0 }), fetchDownloadUrl(this.props.client, photo).then((downloadUrl) => {
160
+ const description = photo.description || void 0, asset = {
161
+ kind: "url",
162
+ value: downloadUrl,
163
+ assetDocumentProps: {
164
+ _type: "sanity.imageAsset",
165
+ source: {
166
+ name: "unsplash",
167
+ id: photo.id,
168
+ url: photo.links.html
169
+ },
170
+ description,
171
+ creditLine: `${photo.user.name} by Unsplash`
172
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
173
+ }
174
+ };
175
+ this.props.onSelect([asset]);
176
+ }))), __publicField(this, "handleClose", () => {
213
177
  this.props.onClose();
214
- });
215
- __publicField(this, "handleSearchTermChanged", event => {
178
+ }), __publicField(this, "handleSearchTermChanged", (event) => {
216
179
  const query = event.currentTarget.value;
217
- this.setState({
218
- query,
219
- page: 1,
220
- searchResults: [[]],
221
- isLoading: true,
222
- cursor: 0
223
- });
224
- this.pageSubject$.next(1);
225
- this.searchSubject$.next(query);
226
- });
227
- __publicField(this, "handleScollerLoadMore", () => {
180
+ this.setState({ query, page: 1, searchResults: [[]], isLoading: !0, cursor: 0 }), this.pageSubject$.next(1), this.searchSubject$.next(query);
181
+ }), __publicField(this, "handleScollerLoadMore", () => {
228
182
  const nextPage = this.state.page + 1;
229
- this.setState({
230
- page: nextPage,
231
- isLoading: true
232
- });
233
- this.pageSubject$.next(nextPage);
234
- this.searchSubject$.next(this.state.query);
235
- });
236
- __publicField(this, "handleKeyDown", event => {
237
- const {
238
- cursor
239
- } = this.state;
240
- if ((event.keyCode === 38 || event.keyCode === 37) && cursor > 0) {
241
- this.setState(prevState => ({
242
- cursor: prevState.cursor - 1
243
- }));
244
- } else if ((event.keyCode === 40 || event.keyCode === 39) && cursor < this.getPhotos().length - 1) {
245
- this.setState(prevState => ({
246
- cursor: prevState.cursor + 1
247
- }));
248
- }
249
- });
250
- __publicField(this, "updateCursor", photo => {
251
- const index = this.getPhotos().findIndex(result => result.id === photo.id);
252
- this.setState({
253
- cursor: index
254
- });
255
- });
256
- __publicField(this, "renderImage", props => {
257
- const {
258
- photo,
259
- layout
260
- } = props;
261
- const active = this.getPhotos().findIndex(result => result.id === photo.data.id) === this.state.cursor || false;
262
- return /* @__PURE__ */jsxRuntime.jsx(Photo, {
263
- onClick: this.handleSelect.bind(photo.data),
264
- onKeyDown: this.handleKeyDown,
265
- data: photo.data,
266
- width: layout.width,
267
- height: layout.height,
268
- active,
269
- onFocus: this.updateCursor
270
- });
183
+ this.setState({ page: nextPage, isLoading: !0 }), this.pageSubject$.next(nextPage), this.searchSubject$.next(this.state.query);
184
+ }), __publicField(this, "handleKeyDown", (event) => {
185
+ const { cursor } = this.state;
186
+ (event.keyCode === 38 || event.keyCode === 37) && cursor > 0 ? this.setState((prevState) => ({
187
+ cursor: prevState.cursor - 1
188
+ })) : (event.keyCode === 40 || event.keyCode === 39) && cursor < this.getPhotos().length - 1 && this.setState((prevState) => ({
189
+ cursor: prevState.cursor + 1
190
+ }));
191
+ }), __publicField(this, "updateCursor", (photo) => {
192
+ const index = this.getPhotos().findIndex((result) => result.id === photo.id);
193
+ this.setState({ cursor: index });
194
+ }), __publicField(this, "renderImage", (props) => {
195
+ const { photo, layout } = props, active = this.getPhotos().findIndex((result) => result.id === photo.data.id) === this.state.cursor || !1;
196
+ return /* @__PURE__ */ jsxRuntime.jsx(
197
+ Photo,
198
+ {
199
+ onClick: this.handleSelect.bind(photo.data),
200
+ onKeyDown: this.handleKeyDown,
201
+ data: photo.data,
202
+ width: layout.width,
203
+ height: layout.height,
204
+ active,
205
+ onFocus: this.updateCursor
206
+ }
207
+ );
271
208
  });
272
209
  }
273
210
  componentDidMount() {
274
- this.searchSubscription = search(this.props.client, this.searchSubject$, this.pageSubject$, RESULTS_PER_PAGE).subscribe({
275
- next: results => {
276
- this.setState(prev => ({
211
+ this.searchSubscription = search(
212
+ this.props.client,
213
+ this.searchSubject$,
214
+ this.pageSubject$,
215
+ RESULTS_PER_PAGE
216
+ ).subscribe({
217
+ next: (results) => {
218
+ this.setState((prev) => ({
277
219
  searchResults: [...prev.searchResults, results],
278
- isLoading: false
220
+ isLoading: !1
279
221
  }));
280
222
  }
281
223
  });
282
224
  }
283
225
  componentWillUnmount() {
284
- if (this.searchSubscription) {
285
- this.searchSubscription.unsubscribe();
286
- }
226
+ this.searchSubscription && this.searchSubscription.unsubscribe();
287
227
  }
288
228
  getPhotos() {
289
229
  return this.state.searchResults.flat();
290
230
  }
291
231
  render() {
292
- const {
293
- query,
294
- searchResults,
295
- isLoading
296
- } = this.state;
297
- return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
298
- id: "unsplash-asset-source",
299
- header: "Select image from Unsplash",
300
- onClose: this.handleClose,
301
- open: true,
302
- width: 4,
303
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
304
- space: 3,
305
- padding: 4,
306
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Card, {
307
- children: /* @__PURE__ */jsxRuntime.jsxs(Search, {
308
- space: 3,
309
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
310
- size: 1,
311
- weight: "semibold",
312
- children: "Search Unsplash"
313
- }), /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
314
- label: "Search Unsplash.com",
315
- placeholder: "Topics or colors",
316
- value: query,
317
- onChange: this.handleSearchTermChanged
318
- })]
319
- })
320
- }), !isLoading && this.getPhotos().length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
321
- size: 1,
322
- muted: true,
323
- children: "No results found"
324
- }), /* @__PURE__ */jsxRuntime.jsx(InfiniteScroll__default.default, {
325
- dataLength: this.getPhotos().length,
326
- next: this.handleScollerLoadMore,
327
- hasMore: true,
328
- scrollThreshold: 0.99,
329
- height: "60vh",
330
- loader: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
331
- align: "center",
332
- justify: "center",
333
- padding: 3,
334
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
335
- muted: true
336
- })
337
- }),
338
- endMessage: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
339
- size: 1,
340
- muted: true,
341
- children: "No more results"
342
- }),
343
- children: searchResults.filter(photos => photos.length > 0).map((photos, index) => /* @__PURE__ */jsxRuntime.jsx(PhotoAlbum__default.default, {
344
- layout: "rows",
345
- spacing: PHOTO_SPACING,
346
- padding: PHOTO_PADDING,
347
- targetRowHeight: width => {
348
- if (width < 300) return 150;else if (width < 600) return 200;
349
- return 300;
350
- },
351
- photos: photos.map(photo => ({
352
- src: photo.urls.small,
353
- width: photo.width,
354
- height: photo.height,
355
- key: photo.id,
356
- data: photo
357
- })),
358
- renderPhoto: this.renderImage,
359
- componentsProps: {
360
- containerProps: {
361
- style: {
362
- marginBottom: "".concat(PHOTO_SPACING, "px")
363
- }
232
+ const { query, searchResults, isLoading } = this.state;
233
+ return /* @__PURE__ */ jsxRuntime.jsx(
234
+ ui.Dialog,
235
+ {
236
+ animate: !0,
237
+ id: "unsplash-asset-source",
238
+ header: "Select image from Unsplash",
239
+ onClose: this.handleClose,
240
+ open: !0,
241
+ width: 4,
242
+ children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, padding: 4, children: [
243
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(Search, { space: 3, children: [
244
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "Search Unsplash" }),
245
+ /* @__PURE__ */ jsxRuntime.jsx(
246
+ ui.TextInput,
247
+ {
248
+ label: "Search Unsplash.com",
249
+ placeholder: "Topics or colors",
250
+ value: query,
251
+ onChange: this.handleSearchTermChanged
364
252
  }
253
+ )
254
+ ] }) }),
255
+ !isLoading && this.getPhotos().length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "No results found" }),
256
+ /* @__PURE__ */ jsxRuntime.jsx(
257
+ InfiniteScroll__default.default,
258
+ {
259
+ dataLength: this.getPhotos().length,
260
+ next: this.handleScollerLoadMore,
261
+ hasMore: !0,
262
+ scrollThreshold: 0.99,
263
+ height: "60vh",
264
+ loader: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { muted: !0 }) }),
265
+ endMessage: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "No more results" }),
266
+ children: searchResults.filter((photos) => photos.length > 0).map((photos, index) => /* @__PURE__ */ jsxRuntime.jsx(
267
+ PhotoAlbum__default.default,
268
+ {
269
+ layout: "rows",
270
+ spacing: PHOTO_SPACING,
271
+ padding: PHOTO_PADDING,
272
+ targetRowHeight: (width) => width < 300 ? 150 : width < 600 ? 200 : 300,
273
+ photos: photos.map((photo) => ({
274
+ src: photo.urls.small,
275
+ width: photo.width,
276
+ height: photo.height,
277
+ key: photo.id,
278
+ data: photo
279
+ })),
280
+ renderPhoto: this.renderImage,
281
+ componentsProps: {
282
+ containerProps: { style: { marginBottom: `${PHOTO_SPACING}px` } }
283
+ }
284
+ },
285
+ `gallery-${query || "popular"}-${index}`
286
+ ))
365
287
  }
366
- }, "gallery-".concat(query || "popular", "-").concat(index)))
367
- })]
368
- })
369
- });
288
+ )
289
+ ] })
290
+ }
291
+ );
370
292
  }
371
293
  }
372
294
  __publicField(UnsplashAssetSourceInternal, "defaultProps", {
@@ -377,14 +299,11 @@ const unsplashAssetSource = {
377
299
  title: "Unsplash",
378
300
  component: UnsplashAssetSource,
379
301
  icon: UnsplashIcon
380
- };
381
- const unsplashImageAsset = sanity.definePlugin({
302
+ }, unsplashImageAsset = sanity.definePlugin({
382
303
  name: "asset-source-unsplash-plugin",
383
304
  form: {
384
305
  image: {
385
- assetSources: prev => {
386
- return [...prev, unsplashAssetSource];
387
- }
306
+ assetSources: (prev) => [...prev, unsplashAssetSource]
388
307
  }
389
308
  }
390
309
  });