gif-picker-react/dist/index.cjs

Multi-provider GIF Picker for React with pluggable provider support

import './style.css';
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c);var l=class extends c.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 u=c.default.createContext(null),d=c.createContext(null),f=c.createContext(null);function p(e){return c.default.createElement(`div`,{...e,className:`gpr-placeholder ${e.className||``}`,style:{width:e.width,height:e.height,...e.style}})}function m(){let e=(0,c.useContext)(f);return c.default.createElement(p,{className:`gpr-category-placeholder`,height:e.categoryHeight,width:`100%`})}function h({image:e,text:t,onClick:n}){let r=(0,c.useContext)(f);return c.default.createElement(`button`,{type:`button`,className:`gpr-btn gpr-category`,style:{height:r.categoryHeight},"data-testid":`gpr-category`,onClick:n},c.default.createElement(`img`,{src:e,loading:`lazy`}),c.default.createElement(`div`,{className:`gpr-category-overlay`},c.default.createElement(`div`,{className:`gpr-category-name`},t)))}function g({image:e,name:t,searchTerm:n}){let[r,i]=(0,c.useContext)(u);function a(){let e=Object.assign({},r);e.searchTerm=n,i(e)}return c.default.createElement(h,{image:e,text:t,onClick:a})}function _({image:e}){let[t,n]=(0,c.useContext)(u);function r(){let e=Object.assign({},t);e.showTrending=!0,n(e)}return c.default.createElement(h,{image:e,onClick:r,text:c.default.createElement(`div`,{className:`gpr-text-trending-category`},c.default.createElement(`div`,{className:`gpr-icn-trending`}),c.default.createElement(`span`,null,`Trending GIFs`))})}function v({categories:e,trending:t,columnsCount:n}){function r(){if(!e)return;let t=(e.length+1)%n;return t==0?e:e?.slice(0,-t)}return c.default.createElement(`div`,{className:`gpr-category-list`,style:{gridTemplateColumns:`repeat(${n}, 1fr)`}},e&&t?c.default.createElement(c.default.Fragment,null,c.default.createElement(_,{image:t.imageUrl}),r()?.map((e,t)=>c.default.createElement(g,{key:t,image:e.imageUrl,name:e.name,searchTerm:e.searchTerm??e.name}))):c.default.createElement(c.default.Fragment,null,[...Array(10*n)].map((e,t)=>c.default.createElement(m,{key:t}))))}function y({height:e,showDelay:t}){let[n,r]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{if(n)return;function e(){r(!0)}let i=setTimeout(e,t);return()=>clearTimeout(i)},[]),c.default.createElement(p,{className:`gpr-result-placeholder`,height:e,width:`100%`,style:{opacity:+!!n}})}const b=[[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 x({columnsCount:e,showDelay:t=70}){return c.default.createElement(`div`,{className:`gpr-gif-list`},[...Array(e)].map((n,r)=>c.default.createElement(`div`,{className:`gpr-gif-list-column`,key:r},b[r%b.length].map((n,i)=>c.default.createElement(y,{key:i,height:n,showDelay:(i+1)*t*e+t*r})))))}function S({gif:e,searchTerm:t}){let n=(0,c.useContext)(f),r=(0,c.useContext)(d);async function i(){try{await n.onGifClick?.(e)}catch(e){console.error(`[gif-picker-react] Failed to handle GIF selection`,e)}try{await r.onClick?.(e,{searchTerm:t})}catch(e){console.error(`[gif-picker-react] Failed to register GIF click`,e)}}async function a(){try{await r.onLoad?.(e,{searchTerm:t})}catch(e){console.error(`[gif-picker-react] Failed to handle GIF load`,e)}}let o=e.preview??e;return c.default.createElement(`button`,{type:`button`,className:`gpr-btn gpr-result-image`,onClick:i,"aria-label":`Select GIF`},c.default.createElement(`img`,{src:o.imageUrl,height:o.height,width:o.width,loading:`lazy`,onLoad:a,alt:e.description??``}))}function C({isLoading:e,result:t,searchTerm:n,columnsCount:r}){let i=(0,c.useMemo)(()=>w(t,r),[t,r]),a=!t||t.length===0;return e?c.default.createElement(x,{columnsCount:r}):a?c.default.createElement(`div`,{className:`gpr-gif-list-no-result`},c.default.createElement(`span`,null,`No GIFs found!`)):c.default.createElement(`div`,{className:`gpr-gif-list`},i.map((e,t)=>c.default.createElement(`div`,{className:`gpr-gif-list-column`,key:t},e.map(e=>c.default.createElement(S,{key:e.id,gif:e,searchTerm:n})))))}function w(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 T({searchTerm:e,columnsCount:t}){let[n,r]=(0,c.useState)(null),[i,a]=(0,c.useState)(!0),o=(0,c.useContext)(d);return(0,c.useEffect)(()=>{a(!0);async function t(){r(await o.search(e)),a(!1)}let n=setTimeout(()=>t(),800);return()=>clearTimeout(n)},[e]),c.default.createElement(C,{isLoading:i,columnsCount:t,result:n,searchTerm:e})}function E({columnsCount:e}){let[t,n]=(0,c.useState)(null),[r,i]=(0,c.useState)(!0),a=(0,c.useContext)(d);return(0,c.useEffect)(()=>{i(!0),(async()=>{n(await a.getTrending()),i(!1)})()},[]),c.default.createElement(C,{columnsCount:e,isLoading:r,result:t})}function D({width:e}){let[t,n]=(0,c.useState)(void 0),[r,i]=(0,c.useState)(void 0),[a]=(0,c.useContext)(u),[o,s]=(0,c.useState)(1),l=(0,c.useContext)(d),f=(0,c.useRef)(null);return(0,c.useEffect)(()=>{let e=!1;return(async()=>{try{let[t,r]=await Promise.all([l.getCategories(),l.getTrending()]);if(e)return;n(t),r.length>0&&i(r[0])}catch(t){if(e)return;console.error(`[gif-picker-react] Failed to load home page`,t)}})(),()=>{e=!0}},[l]),(0,c.useEffect)(()=>{let e=f.current?f.current.offsetWidth:0,t=Math.floor(e/170);t<1&&(t=1),s(t)},[f.current,e]),c.default.createElement(`div`,{className:`gpr-body`,ref:f},a.showTrending?c.default.createElement(E,{columnsCount:o}):a.searchTerm?c.default.createElement(T,{columnsCount:o,searchTerm:a.searchTerm}):c.default.createElement(v,{columnsCount:o,categories:t,trending:r}))}const O={searchPlaceholder:`Search GIFs`};function k(){let e=(0,c.useContext)(d).getAttribution?.();return{...O,...e}}function A(){let e=(0,c.useContext)(f),{branding:t}=k();if(!t)return null;let n=e.theme===`dark`?t.logoDark??t.logo:t.logo;return c.default.createElement(`div`,{className:`gpr-footer`},c.default.createElement(`a`,{className:`gpr-footer-link`,href:t.href,target:`_blank`,rel:`noreferrer`},c.default.createElement(`img`,{className:`gpr-footer-logo`,src:n,alt:t.alt??``})))}function j(e){return c.createElement(`button`,{type:`button`,...e,className:`gpr-btn `+e.className},e.children)}function M({onClick:e}){return c.default.createElement(j,{className:`gpr-btn-clear-search`,onClick:e},c.default.createElement(`div`,{className:`gpr-icn-clear-search`}))}function N(){let[e,t]=(0,c.useContext)(u),n=(0,c.useContext)(f),r=k();function i(n){let r=Object.assign({},e);r.searchTerm=n.target.value,t(r)}function a(){let n=Object.assign({},e);n.searchTerm=``,t(n)}return c.default.createElement(`div`,{className:`gpr-search-container`},c.default.createElement(`input`,{autoFocus:n.autoFocusSearch,"aria-label":r.searchPlaceholder,placeholder:r.searchPlaceholder,className:`gpr-search`,"data-testid":`gpr-search-input`,type:`text`,dir:`auto`,maxLength:500,value:e.searchTerm,onChange:i}),c.default.createElement(`div`,{className:`gpr-icn-search`}),e.searchTerm.length>0&&c.default.createElement(M,{onClick:a}))}function P({children:e}){let[t,n]=(0,c.useContext)(u);function r(){let e=Object.assign({},t);e.showTrending=!1,n(e)}return c.default.createElement(`div`,{className:`gpr-title-container`},c.default.createElement(`div`,{className:`gpr-title`},e),c.default.createElement(j,{className:`gpr-btn-clear-search`,onClick:r},c.default.createElement(`div`,{className:`gpr-icn-clear-search`})))}function F(){let[e]=(0,c.useContext)(u);return c.default.createElement(`div`,{className:`gpr-header`},e.showTrending?c.default.createElement(P,null,`Trending GIFs`):c.default.createElement(N,null))}function I({children:e}){let t=(0,c.useContext)(f),n={height:t.height,width:t.width};return c.default.createElement(`aside`,{className:`GifPickerReact gpr-main ${t.theme===`dark`?` gpr-dark-theme`:``}`,style:n},e)}function L(e){let[t,n]=(0,c.useState)({searchTerm:e,showTrending:!1});return[t,n]}function R(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:z(e.height??450),width:z(e.width??350),categoryHeight:z(e.categoryHeight??95),theme:B(e.theme),initialSearchTerm:e.initialSearchTerm??``}}function z(e){if(typeof e==`number`)return`${e}px`;if(typeof e==`string`)return e;throw TypeError(`Invalid dimension provided`)}function B(e){return e===`auto`?V()?`dark`:`light`:e??`light`}function V(){return typeof window>`u`?!1:!!window.matchMedia(`(prefers-color-scheme: dark)`).matches}let H=function(e){return e.LIGHT=`light`,e.DARK=`dark`,e.AUTO=`auto`,e}({});function U(e){let t=R(e),n=L(t.initialSearchTerm);return c.default.createElement(f.Provider,{value:t},c.default.createElement(u.Provider,{value:n},c.default.createElement(d.Provider,{value:e.provider},c.default.createElement(I,null,c.default.createElement(F,null),c.default.createElement(D,{width:e.width}),c.default.createElement(A,null)))))}function W(e){return c.default.createElement(l,null,c.default.createElement(U,e))}exports.GifPicker=W,exports.Theme=H;
//# sourceMappingURL=index.cjs.map