@ndla/image-search 11.0.138-alpha.0 → 11.0.140-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.
Files changed (5) hide show
  1. package/es/ImageSearch.mjs +10 -10
  2. package/es/ImageSearch.mjs.map +1 -1
  3. package/lib/ImageSearch.js +10 -10
  4. package/lib/ImageSearch.js.map +1 -1
  5. package/package.json +3 -3
package/es/ImageSearch.mjs CHANGED
@@ -54,13 +54,13 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
54
54
  onImageSelect(image);
55
55
  if (saveAsMetaImage) checkboxAction?.(image);
56
56
  };
57
- const searchImages = (queryObject$1) => {
57
+ const searchImages = (queryObject) => {
58
58
  setSearching(true);
59
- search(queryObject$1.query, queryObject$1.page).then((result) => {
59
+ search(queryObject.query, queryObject.page).then((result) => {
60
60
  setQueryObject({
61
- query: queryObject$1.query,
61
+ query: queryObject.query,
62
62
  pageSize: result.pageSize,
63
- page: queryObject$1.page
63
+ page: queryObject.page
64
64
  });
65
65
  setSearchResult(result);
66
66
  setSearching(false);
@@ -102,7 +102,7 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
102
102
  !!noResultsFound && noResults,
103
103
  /* @__PURE__ */ jsx(StyledSearchResults, { children: searchResult?.results.map((image) => /* @__PURE__ */ jsx(ImageSearchResult, {
104
104
  image,
105
- onImageClick: (image$1) => setSelectedImage(image$1),
105
+ onImageClick: (image) => setSelectedImage(image),
106
106
  selectedImage,
107
107
  onSelectImage,
108
108
  showCheckbox: !!showCheckbox,
@@ -129,14 +129,14 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
129
129
  children: [/* @__PURE__ */ jsx(ArrowLeftShortLine, {}), /* @__PURE__ */ jsx("span", { children: translations.paginationTranslations?.prevTriggerLabel })]
130
130
  })
131
131
  }),
132
- /* @__PURE__ */ jsx(PaginationContext, { children: (pagination) => pagination.pages.map((page$1, index, full) => {
132
+ /* @__PURE__ */ jsx(PaginationContext, { children: (pagination) => pagination.pages.map((page, index, full) => {
133
133
  if (index === full.length - 1) return null;
134
- return page$1.type === "page" ? /* @__PURE__ */ jsx(StyledPaginationItem, {
135
- ...page$1,
134
+ return page.type === "page" ? /* @__PURE__ */ jsx(StyledPaginationItem, {
135
+ ...page,
136
136
  asChild: true,
137
137
  children: /* @__PURE__ */ jsx(Button, {
138
- variant: page$1.value === pagination.page ? "primary" : "tertiary",
139
- children: page$1.value
138
+ variant: page.value === pagination.page ? "primary" : "tertiary",
139
+ children: page.value
140
140
  })
141
141
  }, index) : /* @__PURE__ */ jsx(PaginationEllipsis, {
142
142
  index,
package/es/ImageSearch.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageSearch.mjs","names":["queryObject","image","page"],"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>&#8230;</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.mjs","names":[],"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>&#8230;</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/ImageSearch.js CHANGED
@@ -54,13 +54,13 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
54
54
  onImageSelect(image);
55
55
  if (saveAsMetaImage) checkboxAction?.(image);
56
56
  };
57
- const searchImages = (queryObject$1) => {
57
+ const searchImages = (queryObject) => {
58
58
  setSearching(true);
59
- search(queryObject$1.query, queryObject$1.page).then((result) => {
59
+ search(queryObject.query, queryObject.page).then((result) => {
60
60
  setQueryObject({
61
- query: queryObject$1.query,
61
+ query: queryObject.query,
62
62
  pageSize: result.pageSize,
63
- page: queryObject$1.page
63
+ page: queryObject.page
64
64
  });
65
65
  setSearchResult(result);
66
66
  setSearching(false);
@@ -102,7 +102,7 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
102
102
  !!noResultsFound && noResults,
103
103
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSearchResults, { children: searchResult?.results.map((image) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageSearchResult.ImageSearchResult, {
104
104
  image,
105
- onImageClick: (image$1) => setSelectedImage(image$1),
105
+ onImageClick: (image) => setSelectedImage(image),
106
106
  selectedImage,
107
107
  onSelectImage,
108
108
  showCheckbox: !!showCheckbox,
@@ -129,14 +129,14 @@ const ImageSearch = ({ onImageSelect, searchImages: search, onError, locale, noR
129
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)(_ndla_primitives.PaginationContext, { children: (pagination) => pagination.pages.map((page$1, index, full) => {
132
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PaginationContext, { children: (pagination) => pagination.pages.map((page, index, full) => {
133
133
  if (index === full.length - 1) return null;
134
- return page$1.type === "page" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPaginationItem, {
135
- ...page$1,
134
+ return page.type === "page" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPaginationItem, {
135
+ ...page,
136
136
  asChild: true,
137
137
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Button, {
138
- variant: page$1.value === pagination.page ? "primary" : "tertiary",
139
- children: page$1.value
138
+ variant: page.value === pagination.page ? "primary" : "tertiary",
139
+ children: page.value
140
140
  })
141
141
  }, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PaginationEllipsis, {
142
142
  index,
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>&#8230;</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","Input","IconButton","SearchLine","ImageSearchResult","PaginationPrevTrigger","ArrowLeftShortLine","PaginationContext","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>&#8230;</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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ndla/image-search",
3
3
  "type": "module",
4
- "version": "11.0.138-alpha.0",
4
+ "version": "11.0.140-alpha.0",
5
5
  "description": "A simple library for searching images from NDLA",
6
6
  "license": "GPL-3.0",
7
7
  "exports": {
@@ -32,7 +32,7 @@
32
32
  "dependencies": {
33
33
  "@ndla/icons": "^8.0.77-alpha.0",
34
34
  "@ndla/licenses": "^10.0.9-alpha.0",
35
- "@ndla/primitives": "^1.0.117-alpha.0",
35
+ "@ndla/primitives": "^1.0.119-alpha.0",
36
36
  "@ndla/styled-system": "^0.0.46",
37
37
  "@ndla/util": "^5.0.18-alpha.0"
38
38
  },
@@ -48,5 +48,5 @@
48
48
  "publishConfig": {
49
49
  "access": "public"
50
50
  },
51
- "gitHead": "176b61e29793f21b58a53fd9f72e3b4b88d6843e"
51
+ "gitHead": "36c5e7334db527a79bf6c0b498e21b72c643ebf2"
52
52
  }