@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.12 kB
Source Map (JSON)
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../../../src/awesome/GridBackground/components/Grid.tsx"],"sourcesContent":["import { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback } from 'react';\n\nimport { SvgProps } from '@/types';\n\nenum Line {\n l7,\n l6,\n l5,\n l4,\n l3,\n l2,\n l1,\n center,\n r1,\n r2,\n r3,\n r4,\n r5,\n r6,\n r7,\n}\n\nexport interface GridProps extends SvgProps {\n color?: string;\n linePick?: Line;\n strokeWidth?: number;\n}\n\nconst Grid = memo<GridProps>(({ color = '#fff', strokeWidth = 3, linePick, ...rest }) => {\n const isUnpick = isUndefined(linePick);\n\n const showLine = useCallback((l: Line) => isUnpick || linePick === l, [linePick]);\n\n const vLine = (\n <>\n {showLine(Line.l7) && <path d=\"M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0\" />}\n {showLine(Line.l6) && (\n <path d=\"M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0\" />\n )}\n {showLine(Line.l5) && <path d=\"M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0\" />}\n {showLine(Line.l4) && <path d=\"M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0\" />}\n {showLine(Line.l3) && <path d=\"M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0\" />}\n {showLine(Line.l2) && <path d=\"M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0\" />}\n {showLine(Line.l1) && <path d=\"M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0\" />}\n {showLine(Line.center) && <path d=\"M1864 420V0h0\" />}\n {showLine(Line.r1) && <path d=\"M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0\" />}\n {showLine(Line.r2) && <path d=\"M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0\" />}\n {showLine(Line.r3) && <path d=\"M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0\" />}\n {showLine(Line.r4) && <path d=\"M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0\" />}\n {showLine(Line.r5) && <path d=\"M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0\" />}\n {showLine(Line.r6) && (\n <path d=\"M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0\" />\n )}\n {showLine(Line.r7) && (\n <path d=\"M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0\" />\n )}\n </>\n );\n\n const hLine = isUnpick && (\n <>\n <path d=\"M2835 42H892\" />\n <path d=\"M595 136h2538\" />\n <path d=\"M237 249h3254\" />\n </>\n );\n\n return (\n <svg\n style={{ width: '100%' }}\n viewBox=\"0 0 3728 422\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...rest}\n >\n <g fill=\"none\" fillRule=\"evenodd\" stroke={color} strokeWidth={strokeWidth}>\n {vLine}\n {hLine}\n </g>\n </svg>\n );\n});\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;AAKA,IAAK,wCAAL;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;EAfG;AAwBL,MAAM,OAAO,MAAiB,EAAE,QAAQ,QAAQ,cAAc,GAAG,UAAU,GAAG,WAAW;CACvF,MAAM,WAAW,YAAY,SAAS;CAEtC,MAAM,WAAW,aAAa,MAAY,YAAY,aAAa,GAAG,CAAC,SAAS,CAAC;CAEjF,MAAM,QACJ;EACG,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,8DAA8D;EAC3F,SAAS,KAAK,GAAG,IAChB,oBAAC,UAAK,GAAE,mEAAmE;EAE5E,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,sDAAsD;EACnF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,qDAAqD;EAClF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,sDAAsD;EACnF,SAAS,KAAK,OAAO,IAAI,oBAAC,UAAK,GAAE,kBAAkB;EACnD,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,wDAAwD;EACrF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,wDAAwD;EACrF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,wDAAwD;EACrF,SAAS,KAAK,GAAG,IAChB,oBAAC,UAAK,GAAE,oEAAoE;EAE7E,SAAS,KAAK,GAAG,IAChB,oBAAC,UAAK,GAAE,iEAAiE;KAE1E;CAGL,MAAM,QAAQ,YACZ;EACE,oBAAC,UAAK,GAAE,iBAAiB;EACzB,oBAAC,UAAK,GAAE,kBAAkB;EAC1B,oBAAC,UAAK,GAAE,kBAAkB;KACzB;AAGL,QACE,oBAAC;EACC,OAAO,EAAE,OAAO,QAAQ;EACxB,SAAQ;EACR,OAAM;EACN,GAAI;YAEJ,qBAAC;GAAE,MAAK;GAAO,UAAS;GAAU,QAAQ;GAAoB;cAC3D,OACA;IACC;GACA;EAER;AAEF,KAAK,cAAc;AAEnB,mBAAe"}