@lobehub/ui/es/awesome/GridBackground/GridBackground.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"GridBackground.mjs","names":["gridProps: GridProps","Grid"],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: reverse ? styles.highlightReverse : styles.highlight,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={flip ? { transform: 'scaleY(-1)', ...style } : style}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            className={styles.backgroundContainer}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div className={styles.background} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAG;AAEvE,MAAM,iBAAiB,MACpB,EACC,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,KAAK;CACxB,MAAM,OAAO,QAAQ,IAAI;CACzB,MAAM,QAAQ,UAAU;CAExB,MAAM,yBAAyB,cAAsC;AACnE,MAAI,CAAC,eAAgB,QAAO,EAAE;EAE9B,MAAM,QAAQ,OACX,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;GAAc,CAAC,CACzE,OAAO,CACP,KAAK,MAAM,CACX,kBAAkB,CAClB,OAAO,EAAE;AAEZ,SAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACpC;IACA;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;EAAc,CAAC;CAE3E,MAAMA,YAAuB,eACpB;EACL,WAAW,UAAU,OAAO,mBAAmB,OAAO;EACtD,OAAO,cAAc,OAAO;EAC5B;EACD,GACD;EAAC;EAAS;EAAY;EAAY,CACnC;CAED,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,OAAU;AACrE,iBAAgB;AACd,WAAS,SAAS,QAAQ,aAAa,GAAG,OAAU;IACnD,CAAC,OAAO,CAAC;CAEZ,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,CAAC,MACH,QAAO,oBAACC;GAAK,OAAO,EAAE,cAAc,GAAG,kBAAkB,IAAI;GAAS,GAAI;IAAa;AAEzF,SACE,4CACG,MAAM,KAAK,MAAM,UAAU;AAC1B,UACE,oBAACA;IAEC,UAAU;IACV,OACE;KACE,WAAW,GAAG,QAAQ,KAAK,QAAQ,CAAC;KACpC,cAAc,GAAG,kBAAkB;KACpC;IAEH,GAAI;MARC,KASL;IAEJ,GACD;IAEJ;EAAC;EAAO;EAAmB;EAAU,CAAC;AAEzC,QACE,qBAAC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EACrC;EACL,OAAO,OAAO;GAAE,WAAW;GAAc,GAAG;GAAO,GAAG;EACtD,GAAI;;GAEJ,oBAACA;IACC,OAAO,aAAa,OAAO;IACd;IACb,OAAO,EAAE,QAAQ,GAAG;KACpB;GACD,aAAa,oBAAC,kBAAgB;GAC9B,kBACC,oBAAC;IACC,WAAW,OAAO;IAClB,OAAO;KACL,GAAI,OAAO,EAAE,UAAU,KAAK,QAAQ,IAAI,GAAG,EAAE;KAC7C,GAAG;KACJ;cAED,oBAAC,SAAI,WAAW,OAAO,aAAc;KACjC;;GAEJ;EAGX;AAED,eAAe,cAAc;AAE7B,6BAAe"}