gif-picker-react/dist/index.mjs

Multi-provider GIF Picker for React with pluggable provider support

import './style.css';
import*as e from"react";import t,{useContext as n,useEffect as r,useMemo as i,useRef as a,useState as o}from"react";var s=class extends e.Component{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,t){console.error(`GIF Picker React failed to render:`,e,t)}render(){return this.state.hasError?null:this.props.children}};const c=t.createContext(null),l=e.createContext(null),u=e.createContext(null);function d(e){return t.createElement(`div`,{...e,className:`gpr-placeholder ${e.className||``}`,style:{width:e.width,height:e.height,...e.style}})}function f(){let e=n(u);return t.createElement(d,{className:`gpr-category-placeholder`,height:e.categoryHeight,width:`100%`})}function p({image:e,text:r,onClick:i}){let a=n(u);return t.createElement(`button`,{type:`button`,className:`gpr-btn gpr-category`,style:{height:a.categoryHeight},"data-testid":`gpr-category`,onClick:i},t.createElement(`img`,{src:e,loading:`lazy`}),t.createElement(`div`,{className:`gpr-category-overlay`},t.createElement(`div`,{className:`gpr-category-name`},r)))}function m({image:e,name:r,searchTerm:i}){let[a,o]=n(c);function s(){let e=Object.assign({},a);e.searchTerm=i,o(e)}return t.createElement(p,{image:e,text:r,onClick:s})}function h({image:e}){let[r,i]=n(c);function a(){let e=Object.assign({},r);e.showTrending=!0,i(e)}return t.createElement(p,{image:e,onClick:a,text:t.createElement(`div`,{className:`gpr-text-trending-category`},t.createElement(`div`,{className:`gpr-icn-trending`}),t.createElement(`span`,null,`Trending GIFs`))})}function g({categories:e,trending:n,columnsCount:r}){function i(){if(!e)return;let t=(e.length+1)%r;return t==0?e:e?.slice(0,-t)}return t.createElement(`div`,{className:`gpr-category-list`,style:{gridTemplateColumns:`repeat(${r}, 1fr)`}},e&&n?t.createElement(t.Fragment,null,t.createElement(h,{image:n.imageUrl}),i()?.map((e,n)=>t.createElement(m,{key:n,image:e.imageUrl,name:e.name,searchTerm:e.searchTerm??e.name}))):t.createElement(t.Fragment,null,[...Array(10*r)].map((e,n)=>t.createElement(f,{key:n}))))}function _({height:e,showDelay:n}){let[i,a]=o(!1);return r(()=>{if(i)return;function e(){a(!0)}let t=setTimeout(e,n);return()=>clearTimeout(t)},[]),t.createElement(d,{className:`gpr-result-placeholder`,height:e,width:`100%`,style:{opacity:+!!i}})}const v=[[120,100,130,175,154,110],[150,115,135,154,145,170],[140,125,120,150,100,125],[130,145,175,120,135,100]];function y({columnsCount:e,showDelay:n=70}){return t.createElement(`div`,{className:`gpr-gif-list`},[...Array(e)].map((r,i)=>t.createElement(`div`,{className:`gpr-gif-list-column`,key:i},v[i%v.length].map((r,a)=>t.createElement(_,{key:a,height:r,showDelay:(a+1)*n*e+n*i})))))}function b({gif:e,searchTerm:r}){let i=n(u),a=n(l);async function o(){try{await i.onGifClick?.(e)}catch(e){console.error(`[gif-picker-react] Failed to handle GIF selection`,e)}try{await a.onClick?.(e,{searchTerm:r})}catch(e){console.error(`[gif-picker-react] Failed to register GIF click`,e)}}async function s(){try{await a.onLoad?.(e,{searchTerm:r})}catch(e){console.error(`[gif-picker-react] Failed to handle GIF load`,e)}}let c=e.preview??e;return t.createElement(`button`,{type:`button`,className:`gpr-btn gpr-result-image`,onClick:o,"aria-label":`Select GIF`},t.createElement(`img`,{src:c.imageUrl,height:c.height,width:c.width,loading:`lazy`,onLoad:s,alt:e.description??``}))}function x({isLoading:e,result:n,searchTerm:r,columnsCount:a}){let o=i(()=>S(n,a),[n,a]),s=!n||n.length===0;return e?t.createElement(y,{columnsCount:a}):s?t.createElement(`div`,{className:`gpr-gif-list-no-result`},t.createElement(`span`,null,`No GIFs found!`)):t.createElement(`div`,{className:`gpr-gif-list`},o.map((e,n)=>t.createElement(`div`,{className:`gpr-gif-list-column`,key:n},e.map(e=>t.createElement(b,{key:e.id,gif:e,searchTerm:r})))))}function S(e,t=2){if(!e)return[];let n=Array(t).fill(null).map(()=>[]),r=Array(t).fill(0);for(let t of e){let e=(t.preview?t.preview.height:t.height)/(t.preview?t.preview.width:t.width),i=r.indexOf(Math.min(...r));n[i].push(t),r[i]+=e}return n}function C({searchTerm:e,columnsCount:i}){let[a,s]=o(null),[c,u]=o(!0),d=n(l);return r(()=>{u(!0);async function t(){s(await d.search(e)),u(!1)}let n=setTimeout(()=>t(),800);return()=>clearTimeout(n)},[e]),t.createElement(x,{isLoading:c,columnsCount:i,result:a,searchTerm:e})}function w({columnsCount:e}){let[i,a]=o(null),[s,c]=o(!0),u=n(l);return r(()=>{c(!0),(async()=>{a(await u.getTrending()),c(!1)})()},[]),t.createElement(x,{columnsCount:e,isLoading:s,result:i})}function T({width:e}){let[i,s]=o(void 0),[u,d]=o(void 0),[f]=n(c),[p,m]=o(1),h=n(l),_=a(null);return r(()=>{let e=!1;return(async()=>{try{let[t,n]=await Promise.all([h.getCategories(),h.getTrending()]);if(e)return;s(t),n.length>0&&d(n[0])}catch(t){if(e)return;console.error(`[gif-picker-react] Failed to load home page`,t)}})(),()=>{e=!0}},[h]),r(()=>{let e=_.current?_.current.offsetWidth:0,t=Math.floor(e/170);t<1&&(t=1),m(t)},[_.current,e]),t.createElement(`div`,{className:`gpr-body`,ref:_},f.showTrending?t.createElement(w,{columnsCount:p}):f.searchTerm?t.createElement(C,{columnsCount:p,searchTerm:f.searchTerm}):t.createElement(g,{columnsCount:p,categories:i,trending:u}))}const E={searchPlaceholder:`Search GIFs`};function D(){let e=n(l).getAttribution?.();return{...E,...e}}function O(){let e=n(u),{branding:r}=D();if(!r)return null;let i=e.theme===`dark`?r.logoDark??r.logo:r.logo;return t.createElement(`div`,{className:`gpr-footer`},t.createElement(`a`,{className:`gpr-footer-link`,href:r.href,target:`_blank`,rel:`noreferrer`},t.createElement(`img`,{className:`gpr-footer-logo`,src:i,alt:r.alt??``})))}function k(t){return e.createElement(`button`,{type:`button`,...t,className:`gpr-btn `+t.className},t.children)}function A({onClick:e}){return t.createElement(k,{className:`gpr-btn-clear-search`,onClick:e},t.createElement(`div`,{className:`gpr-icn-clear-search`}))}function j(){let[e,r]=n(c),i=n(u),a=D();function o(t){let n=Object.assign({},e);n.searchTerm=t.target.value,r(n)}function s(){let t=Object.assign({},e);t.searchTerm=``,r(t)}return t.createElement(`div`,{className:`gpr-search-container`},t.createElement(`input`,{autoFocus:i.autoFocusSearch,"aria-label":a.searchPlaceholder,placeholder:a.searchPlaceholder,className:`gpr-search`,"data-testid":`gpr-search-input`,type:`text`,dir:`auto`,maxLength:500,value:e.searchTerm,onChange:o}),t.createElement(`div`,{className:`gpr-icn-search`}),e.searchTerm.length>0&&t.createElement(A,{onClick:s}))}function M({children:e}){let[r,i]=n(c);function a(){let e=Object.assign({},r);e.showTrending=!1,i(e)}return t.createElement(`div`,{className:`gpr-title-container`},t.createElement(`div`,{className:`gpr-title`},e),t.createElement(k,{className:`gpr-btn-clear-search`,onClick:a},t.createElement(`div`,{className:`gpr-icn-clear-search`})))}function N(){let[e]=n(c);return t.createElement(`div`,{className:`gpr-header`},e.showTrending?t.createElement(M,null,`Trending GIFs`):t.createElement(j,null))}function P({children:e}){let r=n(u),i={height:r.height,width:r.width};return t.createElement(`aside`,{className:`GifPickerReact gpr-main ${r.theme===`dark`?` gpr-dark-theme`:``}`,style:i},e)}function F(e){let[t,n]=o({searchTerm:e,showTrending:!1});return[t,n]}function I(e){if(!e.provider)throw Error(`provider is a required prop that is missing`);return{provider:e.provider,onGifClick:e.onGifClick??void 0,autoFocusSearch:e.autoFocusSearch??!0,height:L(e.height??450),width:L(e.width??350),categoryHeight:L(e.categoryHeight??95),theme:R(e.theme),initialSearchTerm:e.initialSearchTerm??``}}function L(e){if(typeof e==`number`)return`${e}px`;if(typeof e==`string`)return e;throw TypeError(`Invalid dimension provided`)}function R(e){return e===`auto`?z()?`dark`:`light`:e??`light`}function z(){return typeof window>`u`?!1:!!window.matchMedia(`(prefers-color-scheme: dark)`).matches}let B=function(e){return e.LIGHT=`light`,e.DARK=`dark`,e.AUTO=`auto`,e}({});function V(e){let n=I(e),r=F(n.initialSearchTerm);return t.createElement(u.Provider,{value:n},t.createElement(c.Provider,{value:r},t.createElement(l.Provider,{value:e.provider},t.createElement(P,null,t.createElement(N,null),t.createElement(T,{width:e.width}),t.createElement(O,null)))))}function H(e){return t.createElement(s,null,t.createElement(V,e))}export{H as GifPicker,B as Theme};
//# sourceMappingURL=index.mjs.map