@yamada-ui/react/dist/cjs/components/picture/picture.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"picture.cjs","names":["Picture: FC<PictureProps>","useSystem","rest","tokenToValue","styled","Image","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n  minW: number | string | undefined,\n  maxW: number | string | undefined,\n) => {\n  let media = \"\"\n\n  if (minW) {\n    media = `(min-width: ${minW}px)`\n\n    if (maxW) media += ` and (max-width: ${maxW}px)`\n  } else {\n    media = `(max-width: ${maxW}px)`\n  }\n\n  return media\n}\n\nexport interface PictureSource extends SourceProps {\n  /**\n   * The source set for the source element.\n   */\n  srcSet?: string\n  /**\n   * The maximum width for the source.\n   *\n   * If media is set, media takes precedence.\n   */\n  maxW?: AnyString | number | ThemeTokens[\"sizes\"]\n  /**\n   * The minimum width for the source.\n   *\n   * If media is set, media takes precedence.\n   */\n  minW?: AnyString | number | ThemeTokens[\"sizes\"]\n}\n\nexport interface PictureProps extends ImageProps {\n  /**\n   * If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n   *\n   * @default true\n   */\n  enableSorting?: boolean\n  /**\n   * The sources for the picture element.\n   */\n  sources?: PictureSource[]\n  /**\n   * The props for the picture element.\n   */\n  pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/**\n * `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n *\n * @see https://yamada-ui.com/docs/components/picture\n */\nexport const Picture: FC<PictureProps> = ({\n  children,\n  enableSorting = true,\n  sources: sourcesProp = [],\n  pictureProps,\n  ...rest\n}) => {\n  const system = useSystem()\n  const { queriesObj } = system.breakpoints\n  const { direction = \"down\", identifier = \"@media screen\" } =\n    system.config.breakpoint ?? {}\n  const searchValue =\n    identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n  const compareSources = useCallback(\n    (a: PictureSource, b: PictureSource) => {\n      const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n      if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n      if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n      return direction === \"down\"\n        ? Number(a.maxW) - Number(b.maxW)\n        : Number(b.minW) - Number(a.minW)\n    },\n    [direction],\n  )\n\n  const sources = useMemo(() => {\n    const computedSources = sourcesProp.map(\n      ({ maxW, media, minW, ...rest }) => {\n        if (!media) {\n          if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n          if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n          media = createQuery(minW, maxW)\n\n          return { ...rest, maxW, media, minW }\n        } else {\n          const { maxW, minW, query } = queriesObj[media] ?? {}\n\n          if (query) media = query.replace(searchValue, \"\")\n\n          return { ...rest, maxW, media, minW }\n        }\n      },\n    )\n\n    if (enableSorting) {\n      return computedSources.sort(compareSources)\n    } else {\n      return computedSources\n    }\n  }, [\n    sourcesProp,\n    enableSorting,\n    system,\n    queriesObj,\n    searchValue,\n    compareSources,\n  ])\n\n  const sourceElements = useMemo(\n    () =>\n      sources.map(({ maxW: _maxW, minW: _minW, ...rest }, index) => (\n        <styled.source key={index} {...rest} />\n      )),\n    [sources],\n  )\n\n  return (\n    <styled.picture {...pictureProps}>\n      {children ?? (\n        <>\n          {sourceElements}\n\n          <Image {...rest} />\n        </>\n      )}\n    </styled.picture>\n  )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n  /**\n   * The media query for the source.\n   */\n  media?: AnyString | ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n  const { breakpoints, config } = useSystem()\n  const { queriesObj } = breakpoints\n  const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n  const searchValue =\n    identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n  const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n  if (query) media = query.replace(searchValue, \"\")\n\n  return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;AAEZ,KAAI,MAAM;AACR,UAAQ,eAAe,KAAK;AAE5B,MAAI,KAAM,UAAS,oBAAoB,KAAK;OAE5C,SAAQ,eAAe,KAAK;AAG9B,QAAO;;;;;;;AA4CT,MAAaA,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,EAAE,EACzB,aACA,GAAG,WACC;CACJ,MAAM,SAASC,mCAAW;CAC1B,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,EAAE;CAChC,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,yCACH,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;AAE1C,yDAAgB,EAAE,GAAG,IAAI,oDAAa,EAAE,GAAG,CAAE,QAAO;AAEpD,MAAI,oDAAa,EAAE,GAAG,uDAAgB,EAAE,GAAG,CAAE,QAAO;AAEpD,SAAO,cAAc,SACjB,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,GAC/B,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,mCAAwB;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,KAAM,GAAGC,aAAW;AAClC,OAAI,CAAC,OAAO;AACV,QAAI,KAAM,qDAAaC,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAC3D,QAAI,KAAM,qDAAaA,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAE3D,YAAQ,YAAY,MAAM,KAAK;AAE/B,WAAO;KAAE,GAAGD;KAAM;KAAM;KAAO;KAAM;UAChC;IACL,MAAM,EAAE,cAAM,cAAM,UAAU,WAAW,UAAU,EAAE;AAErD,QAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;;IAG1C;AAED,MAAI,cACF,QAAO,gBAAgB,KAAK,eAAe;MAE3C,QAAO;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,0CAEF,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,MAAO,GAAGA,UAAQ,UAClD,2CAACE,uBAAO,UAAmB,GAAIF,UAAX,MAAmB,CACvC,EACJ,CAAC,QAAQ,CACV;AAED,QACE,2CAACE,uBAAO;EAAQ,GAAI;YACjB,YACC,qFACG,gBAED,2CAACC,uBAAM,GAAI,OAAQ,IAClB;GAEU;;AAWrB,MAAaC,UAA2B,EAAE,MAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAWL,mCAAW;CAC3C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,EAAE;CAChE,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,EAAE,GAAI,EAAE;AAExD,KAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,QAAO,2CAACG,uBAAO;EAAc;EAAO,GAAI;GAAQ"}