@ndla/image-search 11.0.136-alpha.0 → 11.0.138-alpha.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.
- package/README.md +1 -1
- package/lib/ImageMeta.js +4 -4
- package/lib/ImageMeta.js.map +1 -1
- package/lib/ImageSearch.js +20 -20
- package/lib/ImageSearch.js.map +1 -1
- package/lib/ImageSearchResult.js +5 -5
- package/lib/ImageSearchResult.js.map +1 -1
- package/lib/PreviewImage.js +31 -31
- package/lib/PreviewImage.js.map +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
package/lib/ImageMeta.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
let react = require("react");
|
|
2
|
-
let
|
|
3
|
-
let
|
|
2
|
+
let _ndla_primitives = require("@ndla/primitives");
|
|
3
|
+
let _ndla_util = require("@ndla/util");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
|
|
6
6
|
//#region src/ImageMeta.tsx
|
|
@@ -12,8 +12,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
12
12
|
*
|
|
13
13
|
*/
|
|
14
14
|
const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }) => {
|
|
15
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
16
|
-
return (0,
|
|
15
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, { children: `${contentType} - ${(0, react.useMemo)(() => {
|
|
16
|
+
return (0, _ndla_util.humanFileSize)(fileSize, locale);
|
|
17
17
|
}, [fileSize, locale])}${imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : ""}` });
|
|
18
18
|
};
|
|
19
19
|
|
package/lib/ImageMeta.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageMeta.js","names":["Text"],"sources":["../src/ImageMeta.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useMemo } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport type { ImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\n\ninterface Props {\n contentType: string;\n fileSize: number;\n imageDimensions?: ImageDimensionsDTO;\n locale: string;\n}\n\nexport const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }: Props) => {\n const prettySize = useMemo(() => {\n return humanFileSize(fileSize, locale);\n }, [fileSize, locale]);\n\n const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : \"\";\n return <Text>{`${contentType} - ${prettySize}${dimensions}`}</Text>;\n};\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,aAAa,EAAE,aAAa,UAAU,iBAAiB,aAAoB;AAMtF,QAAO,2CAACA,
|
|
1
|
+
{"version":3,"file":"ImageMeta.js","names":["Text"],"sources":["../src/ImageMeta.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useMemo } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport type { ImageDimensionsDTO } from \"@ndla/types-backend/image-api\";\nimport { humanFileSize } from \"@ndla/util\";\n\ninterface Props {\n contentType: string;\n fileSize: number;\n imageDimensions?: ImageDimensionsDTO;\n locale: string;\n}\n\nexport const ImageMeta = ({ contentType, fileSize, imageDimensions, locale }: Props) => {\n const prettySize = useMemo(() => {\n return humanFileSize(fileSize, locale);\n }, [fileSize, locale]);\n\n const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : \"\";\n return <Text>{`${contentType} - ${prettySize}${dimensions}`}</Text>;\n};\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,aAAa,EAAE,aAAa,UAAU,iBAAiB,aAAoB;AAMtF,QAAO,2CAACA,mCAAM,GAAG,YAAY,8BALI;AAC/B,uCAAqB,UAAU,OAAO;IACrC,CAAC,UAAU,OAAO,CAAC,GAEH,kBAAkB,MAAM,gBAAgB,MAAM,GAAG,gBAAgB,OAAO,OAAO,OAC/B"}
|
package/lib/ImageSearch.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const require_ImageSearchResult = require('./ImageSearchResult.js');
|
|
2
2
|
let react = require("react");
|
|
3
|
-
let
|
|
3
|
+
let _ndla_primitives = require("@ndla/primitives");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
-
let
|
|
6
|
-
let
|
|
5
|
+
let _ndla_icons = require("@ndla/icons");
|
|
6
|
+
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
7
7
|
|
|
8
8
|
//#region src/ImageSearch.tsx
|
|
9
9
|
/**
|
|
@@ -13,27 +13,27 @@ let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
|
13
13
|
* LICENSE file in the root directory of this source tree.
|
|
14
14
|
*
|
|
15
15
|
*/
|
|
16
|
-
const ImageSearchWrapper = (0,
|
|
16
|
+
const ImageSearchWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
17
17
|
display: "flex",
|
|
18
18
|
flexDirection: "column",
|
|
19
19
|
gap: "small"
|
|
20
20
|
} });
|
|
21
|
-
const StyledSearchResults = (0,
|
|
21
|
+
const StyledSearchResults = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
22
22
|
display: "grid",
|
|
23
23
|
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
|
|
24
24
|
gridGap: "xsmall",
|
|
25
25
|
gridAutoFlow: "dense"
|
|
26
26
|
} });
|
|
27
|
-
const InputWrapper = (0,
|
|
27
|
+
const InputWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
28
28
|
display: "flex",
|
|
29
29
|
gap: "xsmall"
|
|
30
30
|
} });
|
|
31
|
-
const StyledPaginationRoot = (0,
|
|
32
|
-
const StyledButton = (0,
|
|
31
|
+
const StyledPaginationRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PaginationRoot, { base: { flexWrap: "wrap" } });
|
|
32
|
+
const StyledButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { tabletWideDown: {
|
|
33
33
|
paddingInline: "xsmall",
|
|
34
34
|
"& span": { display: "none" }
|
|
35
35
|
} } });
|
|
36
|
-
const StyledPaginationItem = (0,
|
|
36
|
+
const StyledPaginationItem = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PaginationItem, { base: { tabletWideDown: {
|
|
37
37
|
"&:nth-child(2)": { display: "none" },
|
|
38
38
|
"&:nth-last-child(2)": { display: "none" }
|
|
39
39
|
} } });
|
|
@@ -84,19 +84,19 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
|
|
|
84
84
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ImageSearchWrapper, { children: [
|
|
85
85
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputWrapper, {
|
|
86
86
|
role: "search",
|
|
87
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
87
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Input, {
|
|
88
88
|
type: "search",
|
|
89
89
|
placeholder: translations.searchPlaceholder,
|
|
90
90
|
value: queryObject?.query ?? "",
|
|
91
91
|
onChange: handleQueryChange,
|
|
92
92
|
onKeyDown: onEnter
|
|
93
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
93
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.IconButton, {
|
|
94
94
|
variant: "primary",
|
|
95
95
|
"aria-label": translations.searchButtonTitle,
|
|
96
96
|
title: translations.searchButtonTitle,
|
|
97
97
|
onKeyDown: onEnter,
|
|
98
98
|
onClick: () => searchImages(queryObject),
|
|
99
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
99
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.SearchLine, {})
|
|
100
100
|
})]
|
|
101
101
|
}),
|
|
102
102
|
!!noResultsFound && noResults,
|
|
@@ -120,41 +120,41 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
|
|
|
120
120
|
pageSize: searchResult?.pageSize,
|
|
121
121
|
hidden: noResultsFound,
|
|
122
122
|
children: [
|
|
123
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
123
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PaginationPrevTrigger, {
|
|
124
124
|
asChild: true,
|
|
125
125
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
|
|
126
126
|
variant: "tertiary",
|
|
127
127
|
"aria-label": translations.paginationTranslations?.prevTriggerLabel,
|
|
128
128
|
title: translations.paginationTranslations?.prevTriggerLabel,
|
|
129
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
129
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowLeftShortLine, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translations.paginationTranslations?.prevTriggerLabel })]
|
|
130
130
|
})
|
|
131
131
|
}),
|
|
132
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
132
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PaginationContext, { children: (pagination) => pagination.pages.map((page$1, index, full) => {
|
|
133
133
|
if (index === full.length - 1) return null;
|
|
134
134
|
return page$1.type === "page" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPaginationItem, {
|
|
135
135
|
...page$1,
|
|
136
136
|
asChild: true,
|
|
137
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
137
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Button, {
|
|
138
138
|
variant: page$1.value === pagination.page ? "primary" : "tertiary",
|
|
139
139
|
children: page$1.value
|
|
140
140
|
})
|
|
141
|
-
}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
141
|
+
}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PaginationEllipsis, {
|
|
142
142
|
index,
|
|
143
143
|
asChild: true,
|
|
144
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
144
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
|
|
145
145
|
asChild: true,
|
|
146
146
|
consumeCss: true,
|
|
147
147
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "…" })
|
|
148
148
|
})
|
|
149
149
|
}, index);
|
|
150
150
|
}) }),
|
|
151
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
151
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PaginationNextTrigger, {
|
|
152
152
|
asChild: true,
|
|
153
153
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
|
|
154
154
|
variant: "tertiary",
|
|
155
155
|
"aria-label": translations.paginationTranslations?.nextTriggerLabel,
|
|
156
156
|
title: translations.paginationTranslations?.nextTriggerLabel,
|
|
157
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translations.paginationTranslations?.nextTriggerLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
157
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: translations.paginationTranslations?.nextTriggerLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowRightShortLine, {})]
|
|
158
158
|
})
|
|
159
159
|
})
|
|
160
160
|
]
|
package/lib/ImageSearch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageSearch.js","names":["PaginationRoot","Button","PaginationItem","queryObject","Input","IconButton","SearchLine","ImageSearchResult","image","PaginationPrevTrigger","ArrowLeftShortLine","PaginationContext","page","PaginationEllipsis","Text","PaginationNextTrigger","ArrowRightShortLine"],"sources":["../src/ImageSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\nimport { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from \"@ndla/icons\";\nimport {\n Button,\n IconButton,\n Input,\n PaginationContext,\n PaginationEllipsis,\n PaginationItem,\n PaginationNextTrigger,\n PaginationPrevTrigger,\n PaginationRoot,\n Text,\n type PaginationRootProps,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO, SearchResultV3DTO, SearchParamsDTO } from \"@ndla/types-backend/image-api\";\nimport { ImageSearchResult } from \"./ImageSearchResult\";\n\nconst ImageSearchWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"small\",\n },\n});\n\nconst StyledSearchResults = styled(\"div\", {\n base: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n gridGap: \"xsmall\",\n gridAutoFlow: \"dense\",\n },\n});\n\nconst InputWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xsmall\",\n },\n});\n\nconst StyledPaginationRoot = styled(PaginationRoot, {\n base: {\n flexWrap: \"wrap\",\n },\n});\n\nconst StyledButton = styled(Button, {\n base: {\n tabletWideDown: {\n paddingInline: \"xsmall\",\n \"& span\": {\n display: \"none\",\n },\n },\n },\n});\n\nconst StyledPaginationItem = styled(PaginationItem, {\n base: {\n tabletWideDown: {\n \"&:nth-child(2)\": {\n display: \"none\",\n },\n \"&:nth-last-child(2)\": {\n display: \"none\",\n },\n },\n },\n});\n\nexport interface PreviewTranslations {\n creatorsLabel: string;\n license: string;\n caption: string;\n altText: string;\n modelRelease: string;\n tags: string;\n close: string;\n checkboxLabel?: string;\n missingTitleFallback?: string;\n useImageTitle: string;\n}\n\nexport interface ImageSearchTranslations {\n searchPlaceholder: string;\n searchButtonTitle: string;\n imagePreview: PreviewTranslations;\n paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport interface ImageSearchProps {\n onImageSelect: (image: ImageMetaInformationV3DTO) => void;\n searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;\n onError?: (err: any) => void;\n locale: string;\n noResults?: ReactNode;\n checkboxAction?: (image: ImageMetaInformationV3DTO) => void;\n showCheckbox?: boolean;\n translations: ImageSearchTranslations;\n}\n\nexport const ImageSearch = ({\n onImageSelect,\n searchImages: search,\n onError,\n locale,\n noResults,\n checkboxAction,\n showCheckbox,\n translations,\n}: ImageSearchProps) => {\n const [queryObject, setQueryObject] = useState<SearchParamsDTO>({\n query: undefined,\n page: 1,\n pageSize: 16,\n });\n const [selectedImage, setSelectedImage] = useState<ImageMetaInformationV3DTO | undefined>();\n const [searching, setSearching] = useState<boolean>(false);\n const [searchResult, setSearchResult] = useState<SearchResultV3DTO | undefined>();\n\n const { page } = queryObject;\n const noResultsFound = !searching && searchResult?.results.length === 0;\n\n const onSelectImage = (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => {\n setSelectedImage(undefined);\n if (!image) return;\n onImageSelect(image);\n if (saveAsMetaImage) {\n checkboxAction?.(image);\n }\n };\n\n const searchImages = (queryObject: SearchParamsDTO) => {\n setSearching(true);\n search(queryObject.query, queryObject.page)\n .then((result) => {\n setQueryObject({\n query: queryObject.query,\n pageSize: result.pageSize,\n page: queryObject.page,\n });\n setSearchResult(result);\n setSearching(false);\n })\n .catch((err) => {\n onError?.(err);\n setSearching(false);\n });\n };\n\n const handleQueryChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {\n setQueryObject((prevState) => ({\n ...prevState,\n query: value,\n }));\n };\n\n const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n if (e.key === \"Enter\") {\n searchImages(queryObject);\n }\n };\n\n useEffect(() => {\n searchImages(queryObject);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <ImageSearchWrapper>\n <InputWrapper role=\"search\">\n <Input\n type=\"search\"\n placeholder={translations.searchPlaceholder}\n value={queryObject?.query ?? \"\"}\n onChange={handleQueryChange}\n onKeyDown={onEnter}\n />\n <IconButton\n variant=\"primary\"\n aria-label={translations.searchButtonTitle}\n title={translations.searchButtonTitle}\n onKeyDown={onEnter}\n onClick={() => searchImages(queryObject)}\n >\n <SearchLine />\n </IconButton>\n </InputWrapper>\n {!!noResultsFound && noResults}\n <StyledSearchResults>\n {searchResult?.results.map((image) => (\n <ImageSearchResult\n key={image.id}\n image={image}\n onImageClick={(image) => setSelectedImage(image)}\n selectedImage={selectedImage}\n onSelectImage={onSelectImage}\n showCheckbox={!!showCheckbox}\n translations={translations.imagePreview}\n locale={locale}\n />\n ))}\n </StyledSearchResults>\n <StyledPaginationRoot\n page={page ?? 1}\n onPageChange={(details) => searchImages({ ...queryObject, page: details.page })}\n translations={translations.paginationTranslations}\n count={searchResult?.totalCount ?? 0}\n pageSize={searchResult?.pageSize}\n hidden={noResultsFound}\n >\n <PaginationPrevTrigger asChild>\n <StyledButton\n variant=\"tertiary\"\n aria-label={translations.paginationTranslations?.prevTriggerLabel}\n title={translations.paginationTranslations?.prevTriggerLabel}\n >\n <ArrowLeftShortLine />\n <span>{translations.paginationTranslations?.prevTriggerLabel}</span>\n </StyledButton>\n </PaginationPrevTrigger>\n <PaginationContext>\n {(pagination) =>\n pagination.pages.map((page, index, full) => {\n // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error\n if (index === full.length - 1) return null;\n return page.type === \"page\" ? (\n <StyledPaginationItem key={index} {...page} asChild>\n <Button variant={page.value === pagination.page ? \"primary\" : \"tertiary\"}>{page.value}</Button>\n </StyledPaginationItem>\n ) : (\n <PaginationEllipsis key={index} index={index} asChild>\n <Text asChild consumeCss>\n <div>…</div>\n </Text>\n </PaginationEllipsis>\n );\n })\n }\n </PaginationContext>\n <PaginationNextTrigger asChild>\n <StyledButton\n variant=\"tertiary\"\n aria-label={translations.paginationTranslations?.nextTriggerLabel}\n title={translations.paginationTranslations?.nextTriggerLabel}\n >\n <span>{translations.paginationTranslations?.nextTriggerLabel}</span>\n <ArrowRightShortLine />\n </StyledButton>\n </PaginationNextTrigger>\n </StyledPaginationRoot>\n </ImageSearchWrapper>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageSearch.js","names":["PaginationRoot","Button","PaginationItem","queryObject","Input","IconButton","SearchLine","ImageSearchResult","image","PaginationPrevTrigger","ArrowLeftShortLine","PaginationContext","page","PaginationEllipsis","Text","PaginationNextTrigger","ArrowRightShortLine"],"sources":["../src/ImageSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ChangeEvent, type ReactNode, type KeyboardEvent, useEffect, useState } from \"react\";\nimport { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from \"@ndla/icons\";\nimport {\n Button,\n IconButton,\n Input,\n PaginationContext,\n PaginationEllipsis,\n PaginationItem,\n PaginationNextTrigger,\n PaginationPrevTrigger,\n PaginationRoot,\n Text,\n type PaginationRootProps,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO, SearchResultV3DTO, SearchParamsDTO } from \"@ndla/types-backend/image-api\";\nimport { ImageSearchResult } from \"./ImageSearchResult\";\n\nconst ImageSearchWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"small\",\n },\n});\n\nconst StyledSearchResults = styled(\"div\", {\n base: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n gridGap: \"xsmall\",\n gridAutoFlow: \"dense\",\n },\n});\n\nconst InputWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xsmall\",\n },\n});\n\nconst StyledPaginationRoot = styled(PaginationRoot, {\n base: {\n flexWrap: \"wrap\",\n },\n});\n\nconst StyledButton = styled(Button, {\n base: {\n tabletWideDown: {\n paddingInline: \"xsmall\",\n \"& span\": {\n display: \"none\",\n },\n },\n },\n});\n\nconst StyledPaginationItem = styled(PaginationItem, {\n base: {\n tabletWideDown: {\n \"&:nth-child(2)\": {\n display: \"none\",\n },\n \"&:nth-last-child(2)\": {\n display: \"none\",\n },\n },\n },\n});\n\nexport interface PreviewTranslations {\n creatorsLabel: string;\n license: string;\n caption: string;\n altText: string;\n modelRelease: string;\n tags: string;\n close: string;\n checkboxLabel?: string;\n missingTitleFallback?: string;\n useImageTitle: string;\n}\n\nexport interface ImageSearchTranslations {\n searchPlaceholder: string;\n searchButtonTitle: string;\n imagePreview: PreviewTranslations;\n paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport interface ImageSearchProps {\n onImageSelect: (image: ImageMetaInformationV3DTO) => void;\n searchImages: (query: string | undefined, page: number | undefined) => Promise<SearchResultV3DTO>;\n onError?: (err: any) => void;\n locale: string;\n noResults?: ReactNode;\n checkboxAction?: (image: ImageMetaInformationV3DTO) => void;\n showCheckbox?: boolean;\n translations: ImageSearchTranslations;\n}\n\nexport const ImageSearch = ({\n onImageSelect,\n searchImages: search,\n onError,\n locale,\n noResults,\n checkboxAction,\n showCheckbox,\n translations,\n}: ImageSearchProps) => {\n const [queryObject, setQueryObject] = useState<SearchParamsDTO>({\n query: undefined,\n page: 1,\n pageSize: 16,\n });\n const [selectedImage, setSelectedImage] = useState<ImageMetaInformationV3DTO | undefined>();\n const [searching, setSearching] = useState<boolean>(false);\n const [searchResult, setSearchResult] = useState<SearchResultV3DTO | undefined>();\n\n const { page } = queryObject;\n const noResultsFound = !searching && searchResult?.results.length === 0;\n\n const onSelectImage = (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => {\n setSelectedImage(undefined);\n if (!image) return;\n onImageSelect(image);\n if (saveAsMetaImage) {\n checkboxAction?.(image);\n }\n };\n\n const searchImages = (queryObject: SearchParamsDTO) => {\n setSearching(true);\n search(queryObject.query, queryObject.page)\n .then((result) => {\n setQueryObject({\n query: queryObject.query,\n pageSize: result.pageSize,\n page: queryObject.page,\n });\n setSearchResult(result);\n setSearching(false);\n })\n .catch((err) => {\n onError?.(err);\n setSearching(false);\n });\n };\n\n const handleQueryChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {\n setQueryObject((prevState) => ({\n ...prevState,\n query: value,\n }));\n };\n\n const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n if (e.key === \"Enter\") {\n searchImages(queryObject);\n }\n };\n\n useEffect(() => {\n searchImages(queryObject);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <ImageSearchWrapper>\n <InputWrapper role=\"search\">\n <Input\n type=\"search\"\n placeholder={translations.searchPlaceholder}\n value={queryObject?.query ?? \"\"}\n onChange={handleQueryChange}\n onKeyDown={onEnter}\n />\n <IconButton\n variant=\"primary\"\n aria-label={translations.searchButtonTitle}\n title={translations.searchButtonTitle}\n onKeyDown={onEnter}\n onClick={() => searchImages(queryObject)}\n >\n <SearchLine />\n </IconButton>\n </InputWrapper>\n {!!noResultsFound && noResults}\n <StyledSearchResults>\n {searchResult?.results.map((image) => (\n <ImageSearchResult\n key={image.id}\n image={image}\n onImageClick={(image) => setSelectedImage(image)}\n selectedImage={selectedImage}\n onSelectImage={onSelectImage}\n showCheckbox={!!showCheckbox}\n translations={translations.imagePreview}\n locale={locale}\n />\n ))}\n </StyledSearchResults>\n <StyledPaginationRoot\n page={page ?? 1}\n onPageChange={(details) => searchImages({ ...queryObject, page: details.page })}\n translations={translations.paginationTranslations}\n count={searchResult?.totalCount ?? 0}\n pageSize={searchResult?.pageSize}\n hidden={noResultsFound}\n >\n <PaginationPrevTrigger asChild>\n <StyledButton\n variant=\"tertiary\"\n aria-label={translations.paginationTranslations?.prevTriggerLabel}\n title={translations.paginationTranslations?.prevTriggerLabel}\n >\n <ArrowLeftShortLine />\n <span>{translations.paginationTranslations?.prevTriggerLabel}</span>\n </StyledButton>\n </PaginationPrevTrigger>\n <PaginationContext>\n {(pagination) =>\n pagination.pages.map((page, index, full) => {\n // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error\n if (index === full.length - 1) return null;\n return page.type === \"page\" ? (\n <StyledPaginationItem key={index} {...page} asChild>\n <Button variant={page.value === pagination.page ? \"primary\" : \"tertiary\"}>{page.value}</Button>\n </StyledPaginationItem>\n ) : (\n <PaginationEllipsis key={index} index={index} asChild>\n <Text asChild consumeCss>\n <div>…</div>\n </Text>\n </PaginationEllipsis>\n );\n })\n }\n </PaginationContext>\n <PaginationNextTrigger asChild>\n <StyledButton\n variant=\"tertiary\"\n aria-label={translations.paginationTranslations?.nextTriggerLabel}\n title={translations.paginationTranslations?.nextTriggerLabel}\n >\n <span>{translations.paginationTranslations?.nextTriggerLabel}</span>\n <ArrowRightShortLine />\n </StyledButton>\n </PaginationNextTrigger>\n </StyledPaginationRoot>\n </ImageSearchWrapper>\n );\n};\n"],"mappings":"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"}
|
package/lib/ImageSearchResult.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const require_imageUtil = require('./util/imageUtil.js');
|
|
2
2
|
const require_PreviewImage = require('./PreviewImage.js');
|
|
3
|
-
let
|
|
3
|
+
let _ndla_primitives = require("@ndla/primitives");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
-
let
|
|
5
|
+
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
6
6
|
|
|
7
7
|
//#region src/ImageSearchResult.tsx
|
|
8
8
|
/**
|
|
@@ -12,17 +12,17 @@ let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
|
12
12
|
* LICENSE file in the root directory of this source tree.
|
|
13
13
|
*
|
|
14
14
|
*/
|
|
15
|
-
const StyledButton = (0,
|
|
15
|
+
const StyledButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: {
|
|
16
16
|
display: "flex",
|
|
17
17
|
flexDirection: "column",
|
|
18
18
|
borderColor: "stroke.subtle"
|
|
19
19
|
} });
|
|
20
|
-
const StyledImage = (0,
|
|
20
|
+
const StyledImage = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Image, { base: {
|
|
21
21
|
maxHeight: "135px",
|
|
22
22
|
width: "100%",
|
|
23
23
|
height: "100%"
|
|
24
24
|
} });
|
|
25
|
-
const StyledText = (0,
|
|
25
|
+
const StyledText = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Text, { base: { lineClamp: "3" } });
|
|
26
26
|
const ImageSearchResult = ({ image, onImageClick, selectedImage, onSelectImage, showCheckbox, translations, locale }) => {
|
|
27
27
|
const isSelectedImage = selectedImage?.id === image.id;
|
|
28
28
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageSearchResult.js","names":["Button","Image","Text","getPreviewSrcSets","PreviewImage"],"sources":["../src/ImageSearchResult.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Image, Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { PreviewImage } from \"./PreviewImage\";\nimport { getPreviewSrcSets } from \"./util/imageUtil\";\n\nconst StyledButton = styled(Button, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n borderColor: \"stroke.subtle\",\n },\n});\n\nconst StyledImage = styled(Image, {\n base: {\n maxHeight: \"135px\",\n width: \"100%\",\n height: \"100%\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n lineClamp: \"3\",\n },\n});\n\ninterface Props {\n image: ImageMetaInformationV3DTO;\n onImageClick: (image: ImageMetaInformationV3DTO) => void;\n selectedImage?: ImageMetaInformationV3DTO;\n onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n showCheckbox: boolean;\n translations: PreviewTranslations;\n locale: string;\n}\n\nexport const ImageSearchResult = ({\n image,\n onImageClick,\n selectedImage,\n onSelectImage,\n showCheckbox,\n translations,\n locale,\n}: Props) => {\n const isSelectedImage = selectedImage?.id === image.id;\n return (\n <>\n <StyledButton\n variant={isSelectedImage ? \"secondary\" : \"tertiary\"}\n data-testid=\"select-image-from-list\"\n onClick={() => onImageClick(image)}\n aria-expanded={isSelectedImage}\n aria-controls={`image-preview-${image.id}`}\n >\n <StyledImage\n alt=\"\"\n srcSet={getPreviewSrcSets(image.image.imageUrl)}\n src={image.image.imageUrl}\n variant=\"rounded\"\n />\n <StyledText textStyle=\"label.medium\" asChild consumeCss>\n <span>\n {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n </span>\n </StyledText>\n </StyledButton>\n {isSelectedImage ? (\n <PreviewImage\n id={`image-preview-${image.id}`}\n image={selectedImage}\n onSelectImage={onSelectImage}\n translations={translations}\n showCheckbox={showCheckbox}\n locale={locale}\n />\n ) : null}\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,
|
|
1
|
+
{"version":3,"file":"ImageSearchResult.js","names":["Button","Image","Text","getPreviewSrcSets","PreviewImage"],"sources":["../src/ImageSearchResult.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Image, Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { PreviewImage } from \"./PreviewImage\";\nimport { getPreviewSrcSets } from \"./util/imageUtil\";\n\nconst StyledButton = styled(Button, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n borderColor: \"stroke.subtle\",\n },\n});\n\nconst StyledImage = styled(Image, {\n base: {\n maxHeight: \"135px\",\n width: \"100%\",\n height: \"100%\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n lineClamp: \"3\",\n },\n});\n\ninterface Props {\n image: ImageMetaInformationV3DTO;\n onImageClick: (image: ImageMetaInformationV3DTO) => void;\n selectedImage?: ImageMetaInformationV3DTO;\n onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n showCheckbox: boolean;\n translations: PreviewTranslations;\n locale: string;\n}\n\nexport const ImageSearchResult = ({\n image,\n onImageClick,\n selectedImage,\n onSelectImage,\n showCheckbox,\n translations,\n locale,\n}: Props) => {\n const isSelectedImage = selectedImage?.id === image.id;\n return (\n <>\n <StyledButton\n variant={isSelectedImage ? \"secondary\" : \"tertiary\"}\n data-testid=\"select-image-from-list\"\n onClick={() => onImageClick(image)}\n aria-expanded={isSelectedImage}\n aria-controls={`image-preview-${image.id}`}\n >\n <StyledImage\n alt=\"\"\n srcSet={getPreviewSrcSets(image.image.imageUrl)}\n src={image.image.imageUrl}\n variant=\"rounded\"\n />\n <StyledText textStyle=\"label.medium\" asChild consumeCss>\n <span>\n {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n </span>\n </StyledText>\n </StyledButton>\n {isSelectedImage ? (\n <PreviewImage\n id={`image-preview-${image.id}`}\n image={selectedImage}\n onSelectImage={onSelectImage}\n translations={translations}\n showCheckbox={showCheckbox}\n locale={locale}\n />\n ) : null}\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,aAAa;CACd,EACF,CAAC;AAEF,MAAM,kDAAqBC,wBAAO,EAChC,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,iDAAoBC,uBAAM,EAC9B,MAAM,EACJ,WAAW,KACZ,EACF,CAAC;AAYF,MAAa,qBAAqB,EAChC,OACA,cACA,eACA,eACA,cACA,cACA,aACW;CACX,MAAM,kBAAkB,eAAe,OAAO,MAAM;AACpD,QACE,qFACE,4CAAC;EACC,SAAS,kBAAkB,cAAc;EACzC,eAAY;EACZ,eAAe,aAAa,MAAM;EAClC,iBAAe;EACf,iBAAe,iBAAiB,MAAM;aAEtC,2CAAC;GACC,KAAI;GACJ,QAAQC,oCAAkB,MAAM,MAAM,SAAS;GAC/C,KAAK,MAAM,MAAM;GACjB,SAAQ;IACR,EACF,2CAAC;GAAW,WAAU;GAAe;GAAQ;aAC3C,2CAAC,oBACE,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,MAAM,QAAS,aAAa,wBAAwB,OAAO,MAAM,OAC9F;IACI;GACA,EACd,kBACC,2CAACC;EACC,IAAI,iBAAiB,MAAM;EAC3B,OAAO;EACQ;EACD;EACA;EACN;GACR,GACA,QACH"}
|
package/lib/PreviewImage.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
const require_ImageMeta = require('./ImageMeta.js');
|
|
2
2
|
const require_imageUtil = require('./util/imageUtil.js');
|
|
3
3
|
let react = require("react");
|
|
4
|
-
let
|
|
4
|
+
let _ndla_primitives = require("@ndla/primitives");
|
|
5
5
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
-
let
|
|
7
|
-
let
|
|
8
|
-
let
|
|
6
|
+
let _ndla_icons = require("@ndla/icons");
|
|
7
|
+
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
8
|
+
let _ndla_licenses = require("@ndla/licenses");
|
|
9
9
|
|
|
10
10
|
//#region src/PreviewImage.tsx
|
|
11
11
|
/**
|
|
@@ -15,28 +15,28 @@ let __ndla_licenses = require("@ndla/licenses");
|
|
|
15
15
|
* LICENSE file in the root directory of this source tree.
|
|
16
16
|
*
|
|
17
17
|
*/
|
|
18
|
-
const ImageContainer = (0,
|
|
19
|
-
const StyledImage = (0,
|
|
20
|
-
const StyledImageMetadata = (0,
|
|
18
|
+
const ImageContainer = (0, _ndla_styled_system_jsx.styled)("div", { base: { flexShrink: "0" } });
|
|
19
|
+
const StyledImage = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Image, { base: { maxHeight: "surface.xsmall" } });
|
|
20
|
+
const StyledImageMetadata = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
21
21
|
display: "flex",
|
|
22
22
|
flexDirection: "column",
|
|
23
23
|
gap: "xxsmall"
|
|
24
24
|
} });
|
|
25
|
-
const HashTagWrapper = (0,
|
|
25
|
+
const HashTagWrapper = (0, _ndla_styled_system_jsx.styled)("ul", { base: {
|
|
26
26
|
display: "flex",
|
|
27
27
|
gap: "xxsmall",
|
|
28
28
|
flexWrap: "wrap"
|
|
29
29
|
} });
|
|
30
|
-
const HashTagGroup = (0,
|
|
30
|
+
const HashTagGroup = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
31
31
|
display: "flex",
|
|
32
32
|
gap: "xxsmall",
|
|
33
33
|
flexWrap: "wrap"
|
|
34
34
|
} });
|
|
35
|
-
const StyledTagItem = (0,
|
|
35
|
+
const StyledTagItem = (0, _ndla_styled_system_jsx.styled)("li", { base: {
|
|
36
36
|
display: "flex",
|
|
37
37
|
alignItems: "center"
|
|
38
38
|
} });
|
|
39
|
-
const StyledPreview = (0,
|
|
39
|
+
const StyledPreview = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
40
40
|
display: "flex",
|
|
41
41
|
gridColumn: "1 / -1",
|
|
42
42
|
borderColor: "stroke.default",
|
|
@@ -47,22 +47,22 @@ const StyledPreview = (0, __ndla_styled_system_jsx.styled)("div", { base: {
|
|
|
47
47
|
flexWrap: "wrap",
|
|
48
48
|
overflow: "hidden"
|
|
49
49
|
} });
|
|
50
|
-
const StyledTopRow = (0,
|
|
50
|
+
const StyledTopRow = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
51
51
|
display: "flex",
|
|
52
52
|
justifyContent: "space-between"
|
|
53
53
|
} });
|
|
54
|
-
const ContentWrapper = (0,
|
|
54
|
+
const ContentWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
55
55
|
display: "flex",
|
|
56
56
|
flexDirection: "column",
|
|
57
57
|
gap: "medium",
|
|
58
58
|
flex: "2"
|
|
59
59
|
} });
|
|
60
|
-
const ActionsWrapper = (0,
|
|
60
|
+
const ActionsWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
61
61
|
display: "flex",
|
|
62
62
|
gap: "small",
|
|
63
63
|
marginBlockEnd: "medium"
|
|
64
64
|
} });
|
|
65
|
-
const StyledFieldRoot = (0,
|
|
65
|
+
const StyledFieldRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.FieldRoot, { base: { alignSelf: "center" } });
|
|
66
66
|
const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }) => {
|
|
67
67
|
const [saveAsMetaImage, setSaveAsMetaImage] = (0, react.useState)(false);
|
|
68
68
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledPreview, {
|
|
@@ -75,52 +75,52 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
|
|
|
75
75
|
"aria-label": image.title.title,
|
|
76
76
|
variant: "rounded"
|
|
77
77
|
}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledImageMetadata, { children: [
|
|
78
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTopRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
78
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTopRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
|
|
79
79
|
textStyle: "title.medium",
|
|
80
80
|
children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
|
|
81
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
81
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.IconButton, {
|
|
82
82
|
variant: "tertiary",
|
|
83
83
|
onClick: () => onSelectImage(void 0),
|
|
84
84
|
"aria-label": translations.close,
|
|
85
85
|
title: translations.close,
|
|
86
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
86
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.CloseLine, {})
|
|
87
87
|
})] }),
|
|
88
|
-
!!image.copyright.creators.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(
|
|
89
|
-
!!image.copyright.license.description?.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(
|
|
90
|
-
!!image.caption.caption.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(
|
|
91
|
-
!!image.alttext.alttext.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(
|
|
88
|
+
!!image.copyright.creators.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.creatorsLabel}: ` }), image.copyright.creators.map((creator) => creator.name).join(", ")] }),
|
|
89
|
+
!!image.copyright.license.description?.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.license}: ` }), image.copyright.license.description] }),
|
|
90
|
+
!!image.caption.caption.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.caption}: ` }), image.caption.caption] }),
|
|
91
|
+
!!image.alttext.alttext.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, { children: [
|
|
92
92
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.altText}:` }),
|
|
93
93
|
" ",
|
|
94
94
|
image.alttext.alttext
|
|
95
95
|
] }),
|
|
96
|
-
!!image.modelRelease.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(
|
|
96
|
+
!!image.modelRelease.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.modelRelease}: ` }), (0, _ndla_licenses.getModelReleaseValue)(image.modelRelease, locale)] }),
|
|
97
97
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageMeta.ImageMeta, {
|
|
98
98
|
contentType: image.image.contentType,
|
|
99
99
|
fileSize: image.image.size,
|
|
100
100
|
imageDimensions: image.image.dimensions,
|
|
101
101
|
locale
|
|
102
102
|
}),
|
|
103
|
-
!!image.tags.tags.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HashTagGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
103
|
+
!!image.tags.tags.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HashTagGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
|
|
104
104
|
id: "tags-title",
|
|
105
105
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: `${translations.tags}: ` })
|
|
106
106
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashTagWrapper, {
|
|
107
107
|
"aria-describedby": "tags-title",
|
|
108
|
-
children: image.tags.tags.map((tag) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTagItem, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
108
|
+
children: image.tags.tags.map((tag) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTagItem, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.HashTag, { size: "small" }), tag] }, tag))
|
|
109
109
|
})] })
|
|
110
|
-
] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionsWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
110
|
+
] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionsWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Button, {
|
|
111
111
|
"data-testid": "use-image",
|
|
112
112
|
onClick: () => onSelectImage(image, saveAsMetaImage),
|
|
113
113
|
children: translations.useImageTitle
|
|
114
|
-
}), !!showCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(
|
|
114
|
+
}), !!showCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.CheckboxRoot, {
|
|
115
115
|
checked: saveAsMetaImage,
|
|
116
116
|
onCheckedChange: () => setSaveAsMetaImage((prev) => !prev),
|
|
117
117
|
children: [
|
|
118
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
118
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.CheckboxControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.CheckboxIndicator, {
|
|
119
119
|
asChild: true,
|
|
120
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
120
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.CheckLine, {})
|
|
121
121
|
}) }),
|
|
122
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
123
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
122
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.CheckboxLabel, { children: translations.checkboxLabel }),
|
|
123
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.CheckboxHiddenInput, {})
|
|
124
124
|
]
|
|
125
125
|
}) })] })] })]
|
|
126
126
|
});
|
package/lib/PreviewImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewImage.js","names":["Image","FieldRoot","getSrcSets","Text","IconButton","CloseLine","ImageMeta","HashTag","Button","CheckboxRoot","CheckboxControl","CheckboxIndicator","CheckLine","CheckboxLabel","CheckboxHiddenInput"],"sources":["../src/PreviewImage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useState } from \"react\";\nimport { CloseLine, HashTag, CheckLine } from \"@ndla/icons\";\nimport { getModelReleaseValue } from \"@ndla/licenses\";\nimport {\n Button,\n CheckboxControl,\n CheckboxHiddenInput,\n CheckboxIndicator,\n CheckboxLabel,\n CheckboxRoot,\n Text,\n Image,\n IconButton,\n FieldRoot,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { ImageMeta } from \"./ImageMeta\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { getSrcSets } from \"./util/imageUtil\";\n\nconst ImageContainer = styled(\"div\", {\n base: {\n flexShrink: \"0\",\n },\n});\n\nconst StyledImage = styled(Image, {\n base: {\n maxHeight: \"surface.xsmall\",\n },\n});\n\nconst StyledImageMetadata = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxsmall\",\n },\n});\n\nconst HashTagWrapper = styled(\"ul\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexWrap: \"wrap\",\n },\n});\n\nconst HashTagGroup = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexWrap: \"wrap\",\n },\n});\n\nconst StyledTagItem = styled(\"li\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n },\n});\n\nconst StyledPreview = styled(\"div\", {\n base: {\n display: \"flex\",\n gridColumn: \"1 / -1\",\n borderColor: \"stroke.default\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n gap: \"small\",\n padding: \"small\",\n flexWrap: \"wrap\",\n overflow: \"hidden\",\n },\n});\n\nconst StyledTopRow = styled(\"div\", {\n base: {\n display: \"flex\",\n justifyContent: \"space-between\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n flex: \"2\",\n },\n});\n\nconst ActionsWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n marginBlockEnd: \"medium\",\n },\n});\n\nconst StyledFieldRoot = styled(FieldRoot, {\n base: { alignSelf: \"center\" },\n});\n\ninterface Props {\n id: string;\n image: ImageMetaInformationV3DTO;\n onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n showCheckbox: boolean;\n translations: PreviewTranslations;\n locale: string;\n}\n\nexport const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }: Props) => {\n const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);\n\n return (\n <StyledPreview id={id}>\n <ImageContainer>\n <StyledImage\n alt=\"\"\n srcSet={getSrcSets(image.image.imageUrl)}\n sizes=\"(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw\"\n src={image.image.imageUrl}\n aria-label={image.title.title}\n variant=\"rounded\"\n />\n </ImageContainer>\n <ContentWrapper>\n <StyledImageMetadata>\n <StyledTopRow>\n <Text textStyle=\"title.medium\">\n {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n </Text>\n <IconButton\n variant=\"tertiary\"\n onClick={() => onSelectImage(undefined)}\n aria-label={translations.close}\n title={translations.close}\n >\n <CloseLine />\n </IconButton>\n </StyledTopRow>\n {!!image.copyright.creators.length && (\n <Text>\n <b>{`${translations.creatorsLabel}: `}</b>\n {image.copyright.creators.map((creator) => creator.name).join(\", \")}\n </Text>\n )}\n {!!image.copyright.license.description?.trim() && (\n <Text>\n <b>{`${translations.license}: `}</b>\n {image.copyright.license.description}\n </Text>\n )}\n {!!image.caption.caption.trim() && (\n <Text>\n <b>{`${translations.caption}: `}</b>\n {image.caption.caption}\n </Text>\n )}\n {!!image.alttext.alttext.trim() && (\n <Text>\n <b>{`${translations.altText}:`}</b> {image.alttext.alttext}\n </Text>\n )}\n {!!image.modelRelease.trim() && (\n <Text>\n <b>{`${translations.modelRelease}: `}</b>\n {getModelReleaseValue(image.modelRelease, locale)}\n </Text>\n )}\n <ImageMeta\n contentType={image.image.contentType}\n fileSize={image.image.size}\n imageDimensions={image.image.dimensions}\n locale={locale}\n />\n {!!image.tags.tags.length && (\n <HashTagGroup>\n <Text id=\"tags-title\">\n <b>{`${translations.tags}: `}</b>\n </Text>\n <HashTagWrapper aria-describedby=\"tags-title\">\n {image.tags.tags.map((tag) => (\n <StyledTagItem key={tag}>\n <HashTag size=\"small\" />\n {tag}\n </StyledTagItem>\n ))}\n </HashTagWrapper>\n </HashTagGroup>\n )}\n </StyledImageMetadata>\n <ActionsWrapper>\n <Button data-testid=\"use-image\" onClick={() => onSelectImage(image, saveAsMetaImage)}>\n {translations.useImageTitle}\n </Button>\n {!!showCheckbox && (\n <StyledFieldRoot>\n <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>\n <CheckboxControl>\n <CheckboxIndicator asChild>\n <CheckLine />\n </CheckboxIndicator>\n </CheckboxControl>\n <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>\n <CheckboxHiddenInput />\n </CheckboxRoot>\n </StyledFieldRoot>\n )}\n </ActionsWrapper>\n </ContentWrapper>\n </StyledPreview>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,
|
|
1
|
+
{"version":3,"file":"PreviewImage.js","names":["Image","FieldRoot","getSrcSets","Text","IconButton","CloseLine","ImageMeta","HashTag","Button","CheckboxRoot","CheckboxControl","CheckboxIndicator","CheckLine","CheckboxLabel","CheckboxHiddenInput"],"sources":["../src/PreviewImage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useState } from \"react\";\nimport { CloseLine, HashTag, CheckLine } from \"@ndla/icons\";\nimport { getModelReleaseValue } from \"@ndla/licenses\";\nimport {\n Button,\n CheckboxControl,\n CheckboxHiddenInput,\n CheckboxIndicator,\n CheckboxLabel,\n CheckboxRoot,\n Text,\n Image,\n IconButton,\n FieldRoot,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { ImageMeta } from \"./ImageMeta\";\nimport type { PreviewTranslations } from \"./ImageSearch\";\nimport { getSrcSets } from \"./util/imageUtil\";\n\nconst ImageContainer = styled(\"div\", {\n base: {\n flexShrink: \"0\",\n },\n});\n\nconst StyledImage = styled(Image, {\n base: {\n maxHeight: \"surface.xsmall\",\n },\n});\n\nconst StyledImageMetadata = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxsmall\",\n },\n});\n\nconst HashTagWrapper = styled(\"ul\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexWrap: \"wrap\",\n },\n});\n\nconst HashTagGroup = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexWrap: \"wrap\",\n },\n});\n\nconst StyledTagItem = styled(\"li\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n },\n});\n\nconst StyledPreview = styled(\"div\", {\n base: {\n display: \"flex\",\n gridColumn: \"1 / -1\",\n borderColor: \"stroke.default\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n gap: \"small\",\n padding: \"small\",\n flexWrap: \"wrap\",\n overflow: \"hidden\",\n },\n});\n\nconst StyledTopRow = styled(\"div\", {\n base: {\n display: \"flex\",\n justifyContent: \"space-between\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n flex: \"2\",\n },\n});\n\nconst ActionsWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n marginBlockEnd: \"medium\",\n },\n});\n\nconst StyledFieldRoot = styled(FieldRoot, {\n base: { alignSelf: \"center\" },\n});\n\ninterface Props {\n id: string;\n image: ImageMetaInformationV3DTO;\n onSelectImage: (image: ImageMetaInformationV3DTO | undefined, saveAsMetaImage?: boolean) => void;\n showCheckbox: boolean;\n translations: PreviewTranslations;\n locale: string;\n}\n\nexport const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, locale }: Props) => {\n const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);\n\n return (\n <StyledPreview id={id}>\n <ImageContainer>\n <StyledImage\n alt=\"\"\n srcSet={getSrcSets(image.image.imageUrl)}\n sizes=\"(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw\"\n src={image.image.imageUrl}\n aria-label={image.title.title}\n variant=\"rounded\"\n />\n </ImageContainer>\n <ContentWrapper>\n <StyledImageMetadata>\n <StyledTopRow>\n <Text textStyle=\"title.medium\">\n {image.title.title.trim() ? image.title.title : (translations.missingTitleFallback ?? `ID: ${image.id}`)}\n </Text>\n <IconButton\n variant=\"tertiary\"\n onClick={() => onSelectImage(undefined)}\n aria-label={translations.close}\n title={translations.close}\n >\n <CloseLine />\n </IconButton>\n </StyledTopRow>\n {!!image.copyright.creators.length && (\n <Text>\n <b>{`${translations.creatorsLabel}: `}</b>\n {image.copyright.creators.map((creator) => creator.name).join(\", \")}\n </Text>\n )}\n {!!image.copyright.license.description?.trim() && (\n <Text>\n <b>{`${translations.license}: `}</b>\n {image.copyright.license.description}\n </Text>\n )}\n {!!image.caption.caption.trim() && (\n <Text>\n <b>{`${translations.caption}: `}</b>\n {image.caption.caption}\n </Text>\n )}\n {!!image.alttext.alttext.trim() && (\n <Text>\n <b>{`${translations.altText}:`}</b> {image.alttext.alttext}\n </Text>\n )}\n {!!image.modelRelease.trim() && (\n <Text>\n <b>{`${translations.modelRelease}: `}</b>\n {getModelReleaseValue(image.modelRelease, locale)}\n </Text>\n )}\n <ImageMeta\n contentType={image.image.contentType}\n fileSize={image.image.size}\n imageDimensions={image.image.dimensions}\n locale={locale}\n />\n {!!image.tags.tags.length && (\n <HashTagGroup>\n <Text id=\"tags-title\">\n <b>{`${translations.tags}: `}</b>\n </Text>\n <HashTagWrapper aria-describedby=\"tags-title\">\n {image.tags.tags.map((tag) => (\n <StyledTagItem key={tag}>\n <HashTag size=\"small\" />\n {tag}\n </StyledTagItem>\n ))}\n </HashTagWrapper>\n </HashTagGroup>\n )}\n </StyledImageMetadata>\n <ActionsWrapper>\n <Button data-testid=\"use-image\" onClick={() => onSelectImage(image, saveAsMetaImage)}>\n {translations.useImageTitle}\n </Button>\n {!!showCheckbox && (\n <StyledFieldRoot>\n <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>\n <CheckboxControl>\n <CheckboxIndicator asChild>\n <CheckLine />\n </CheckboxIndicator>\n </CheckboxControl>\n <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>\n <CheckboxHiddenInput />\n </CheckboxRoot>\n </StyledFieldRoot>\n )}\n </ActionsWrapper>\n </ContentWrapper>\n </StyledPreview>\n );\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/image-search",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "11.0.
|
|
4
|
+
"version": "11.0.138-alpha.0",
|
|
5
5
|
"description": "A simple library for searching images from NDLA",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"repository": {
|
|
19
19
|
"type": "git",
|
|
20
20
|
"url": "https://github.com/NDLANO/frontend-packages.git",
|
|
21
|
-
"directory": "packages/
|
|
21
|
+
"directory": "packages/image-search"
|
|
22
22
|
},
|
|
23
23
|
"keywords": [
|
|
24
24
|
"ndla"
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
"es"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@ndla/icons": "^8.0.
|
|
34
|
-
"@ndla/licenses": "^10.0.
|
|
35
|
-
"@ndla/primitives": "^1.0.
|
|
33
|
+
"@ndla/icons": "^8.0.77-alpha.0",
|
|
34
|
+
"@ndla/licenses": "^10.0.9-alpha.0",
|
|
35
|
+
"@ndla/primitives": "^1.0.117-alpha.0",
|
|
36
36
|
"@ndla/styled-system": "^0.0.46",
|
|
37
|
-
"@ndla/util": "^5.0.
|
|
37
|
+
"@ndla/util": "^5.0.18-alpha.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@ndla/preset-panda": "^0.0.
|
|
40
|
+
"@ndla/preset-panda": "^0.0.70",
|
|
41
41
|
"@ndla/types-backend": "^1.0.89",
|
|
42
42
|
"@pandacss/dev": "^1.7.0"
|
|
43
43
|
},
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"publishConfig": {
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "176b61e29793f21b58a53fd9f72e3b4b88d6843e"
|
|
52
52
|
}
|