sanity-plugin-asset-source-unsplash 1.1.1 → 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 (12) hide show
  1. package/LICENSE +1 -1
  2. package/lib/index.cjs +250 -333
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.js +258 -322
  5. package/lib/index.js.map +1 -1
  6. package/package.json +30 -34
  7. package/src/components/Icon.tsx +0 -2
  8. package/src/components/Photo.styled.tsx +2 -8
  9. package/src/components/Photo.tsx +6 -5
  10. package/src/components/UnsplashAssetSource.tsx +13 -5
  11. package/src/datastores/unsplash.ts +8 -3
  12. 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,374 +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
- studioTheme
74
- } = _ref2;
75
- return "1px solid ".concat(studioTheme.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
- const theme = ui.useTheme().sanity;
120
- return /* @__PURE__ */jsxRuntime.jsx(Root, {
121
- studioTheme: theme,
122
- title: "Select image by ".concat(userName, " from Unsplash"),
123
- tabIndex: 0,
124
- onKeyDown: handleKeyDown,
125
- onMouseDown: handleMouseDown,
126
- style: {
127
- width: "".concat(width, "px"),
128
- height: "".concat(height, "px"),
129
- backgroundImage: 'url("'.concat(src, '")')
130
- },
131
- onClick: handleClick,
132
- children: /* @__PURE__ */jsxRuntime.jsx(CreditLineLink, {
133
- onClick: handleCreditLineClicked,
134
- children: /* @__PURE__ */jsxRuntime.jsx(CreditLine, {
135
- padding: 2,
136
- radius: 2,
137
- margin: 2,
138
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
139
- size: 1,
140
- title: "Open image by ".concat(userName, " on Unsplash in new window"),
141
- children: ["By @", data.user.username]
142
- })
143
- })
144
- })
145
- });
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
+ );
146
135
  }
147
- var __freeze = Object.freeze;
148
- var __defProp$1 = Object.defineProperty;
149
- var __template = (cooked, raw) => __freeze(__defProp$1(cooked, "raw", {
150
- value: __freeze(raw || cooked.slice())
151
- }));
152
- var _a, _b;
153
- const Search = styled__default.default(ui.Stack)(_a || (_a = __template(["\n position: sticky;\n top: 0;\n z-index: 1;\n"])));
154
- styled__default.default.div(_b || (_b = __template(["\n overflow-y: auto;\n max-height: 80vh;\n"])));
155
- var __defProp = Object.defineProperty;
156
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
157
- enumerable: true,
158
- configurable: true,
159
- writable: true,
160
- value
161
- }) : obj[key] = value;
162
- var __publicField = (obj, key, value) => {
163
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
164
- return value;
165
- };
166
- const RESULTS_PER_PAGE = 42;
167
- const PHOTO_SPACING = 2;
168
- 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;
169
147
  function UnsplashAssetSource(props) {
170
- const client = sanity.useClient({
171
- apiVersion: "2022-09-01"
172
- });
173
- return /* @__PURE__ */jsxRuntime.jsx(UnsplashAssetSourceInternal, {
174
- ...props,
175
- client
176
- });
148
+ const client = sanity.useClient({ apiVersion: "2022-09-01" });
149
+ return /* @__PURE__ */ jsxRuntime.jsx(UnsplashAssetSourceInternal, { ...props, client });
177
150
  }
178
151
  class UnsplashAssetSourceInternal extends React__default.default.Component {
179
152
  constructor() {
180
- super(...arguments);
181
- __publicField(this, "state", {
153
+ super(...arguments), __publicField(this, "state", {
182
154
  cursor: 0,
183
155
  query: "",
184
156
  page: 1,
185
157
  searchResults: [[]],
186
- isLoading: true
187
- });
188
- __publicField(this, "searchSubscription", null);
189
- __publicField(this, "searchSubject$", new rxjs.BehaviorSubject(""));
190
- __publicField(this, "pageSubject$", new rxjs.BehaviorSubject(1));
191
- __publicField(this, "handleSelect", photo => {
192
- this.setState({
193
- isLoading: true
194
- });
195
- return fetchDownloadUrl(this.props.client, photo).then(downloadUrl => {
196
- const description = photo.description || void 0;
197
- const asset = {
198
- kind: "url",
199
- value: downloadUrl,
200
- assetDocumentProps: {
201
- _type: "sanity.imageAsset",
202
- source: {
203
- name: "unsplash",
204
- id: photo.id,
205
- url: photo.links.html
206
- },
207
- description,
208
- creditLine: "".concat(photo.user.name, " by Unsplash")
209
- }
210
- };
211
- this.props.onSelect([asset]);
212
- });
213
- });
214
- __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", () => {
215
177
  this.props.onClose();
216
- });
217
- __publicField(this, "handleSearchTermChanged", event => {
178
+ }), __publicField(this, "handleSearchTermChanged", (event) => {
218
179
  const query = event.currentTarget.value;
219
- this.setState({
220
- query,
221
- page: 1,
222
- searchResults: [[]],
223
- isLoading: true,
224
- cursor: 0
225
- });
226
- this.pageSubject$.next(1);
227
- this.searchSubject$.next(query);
228
- });
229
- __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", () => {
230
182
  const nextPage = this.state.page + 1;
231
- this.setState({
232
- page: nextPage,
233
- isLoading: true
234
- });
235
- this.pageSubject$.next(nextPage);
236
- this.searchSubject$.next(this.state.query);
237
- });
238
- __publicField(this, "handleKeyDown", event => {
239
- const {
240
- cursor
241
- } = this.state;
242
- if ((event.keyCode === 38 || event.keyCode === 37) && cursor > 0) {
243
- this.setState(prevState => ({
244
- cursor: prevState.cursor - 1
245
- }));
246
- } else if ((event.keyCode === 40 || event.keyCode === 39) && cursor < this.getPhotos().length - 1) {
247
- this.setState(prevState => ({
248
- cursor: prevState.cursor + 1
249
- }));
250
- }
251
- });
252
- __publicField(this, "updateCursor", photo => {
253
- const index = this.getPhotos().findIndex(result => result.id === photo.id);
254
- this.setState({
255
- cursor: index
256
- });
257
- });
258
- __publicField(this, "renderImage", props => {
259
- const {
260
- photo,
261
- layout
262
- } = props;
263
- const active = this.getPhotos().findIndex(result => result.id === photo.data.id) === this.state.cursor || false;
264
- return /* @__PURE__ */jsxRuntime.jsx(Photo, {
265
- onClick: this.handleSelect.bind(photo.data),
266
- onKeyDown: this.handleKeyDown,
267
- data: photo.data,
268
- width: layout.width,
269
- height: layout.height,
270
- active,
271
- onFocus: this.updateCursor
272
- });
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
+ );
273
208
  });
274
209
  }
275
210
  componentDidMount() {
276
- this.searchSubscription = search(this.props.client, this.searchSubject$, this.pageSubject$, RESULTS_PER_PAGE).subscribe({
277
- next: results => {
278
- 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) => ({
279
219
  searchResults: [...prev.searchResults, results],
280
- isLoading: false
220
+ isLoading: !1
281
221
  }));
282
222
  }
283
223
  });
284
224
  }
285
225
  componentWillUnmount() {
286
- if (this.searchSubscription) {
287
- this.searchSubscription.unsubscribe();
288
- }
226
+ this.searchSubscription && this.searchSubscription.unsubscribe();
289
227
  }
290
228
  getPhotos() {
291
229
  return this.state.searchResults.flat();
292
230
  }
293
231
  render() {
294
- const {
295
- query,
296
- searchResults,
297
- isLoading
298
- } = this.state;
299
- return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
300
- id: "unsplash-asset-source",
301
- header: "Select image from Unsplash",
302
- onClose: this.handleClose,
303
- open: true,
304
- width: 4,
305
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
306
- space: 3,
307
- padding: 4,
308
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Card, {
309
- children: /* @__PURE__ */jsxRuntime.jsxs(Search, {
310
- space: 3,
311
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
312
- size: 1,
313
- weight: "semibold",
314
- children: "Search Unsplash"
315
- }), /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
316
- label: "Search Unsplash.com",
317
- placeholder: "Topics or colors",
318
- value: query,
319
- onChange: this.handleSearchTermChanged
320
- })]
321
- })
322
- }), !isLoading && this.getPhotos().length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
323
- size: 1,
324
- muted: true,
325
- children: "No results found"
326
- }), /* @__PURE__ */jsxRuntime.jsx(InfiniteScroll__default.default, {
327
- dataLength: this.getPhotos().length,
328
- next: this.handleScollerLoadMore,
329
- hasMore: true,
330
- scrollThreshold: 0.99,
331
- height: "60vh",
332
- loader: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
333
- align: "center",
334
- justify: "center",
335
- padding: 3,
336
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
337
- muted: true
338
- })
339
- }),
340
- endMessage: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
341
- size: 1,
342
- muted: true,
343
- children: "No more results"
344
- }),
345
- children: searchResults.filter(photos => photos.length > 0).map((photos, index) => /* @__PURE__ */jsxRuntime.jsx(PhotoAlbum__default.default, {
346
- layout: "rows",
347
- spacing: PHOTO_SPACING,
348
- padding: PHOTO_PADDING,
349
- targetRowHeight: width => {
350
- if (width < 300) return 150;else if (width < 600) return 200;
351
- return 300;
352
- },
353
- photos: photos.map(photo => ({
354
- src: photo.urls.small,
355
- width: photo.width,
356
- height: photo.height,
357
- key: photo.id,
358
- data: photo
359
- })),
360
- renderPhoto: this.renderImage,
361
- componentsProps: {
362
- containerProps: {
363
- style: {
364
- marginBottom: "".concat(PHOTO_SPACING, "px")
365
- }
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
366
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
+ ))
367
287
  }
368
- }, "gallery-".concat(query || "popular", "-").concat(index)))
369
- })]
370
- })
371
- });
288
+ )
289
+ ] })
290
+ }
291
+ );
372
292
  }
373
293
  }
374
294
  __publicField(UnsplashAssetSourceInternal, "defaultProps", {
@@ -379,14 +299,11 @@ const unsplashAssetSource = {
379
299
  title: "Unsplash",
380
300
  component: UnsplashAssetSource,
381
301
  icon: UnsplashIcon
382
- };
383
- const unsplashImageAsset = sanity.definePlugin({
302
+ }, unsplashImageAsset = sanity.definePlugin({
384
303
  name: "asset-source-unsplash-plugin",
385
304
  form: {
386
305
  image: {
387
- assetSources: prev => {
388
- return [...prev, unsplashAssetSource];
389
- }
306
+ assetSources: (prev) => [...prev, unsplashAssetSource]
390
307
  }
391
308
  }
392
309
  });