@lobehub/ui 5.7.1 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,10 +18,11 @@ import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
|
|
|
18
18
|
import chroma from "chroma-js";
|
|
19
19
|
import data from "@emoji-mart/data";
|
|
20
20
|
import Picker from "@emoji-mart/react";
|
|
21
|
+
import { getLobeIconCDN, toc } from "@lobehub/icons";
|
|
21
22
|
import useSWR from "swr";
|
|
22
23
|
//#region src/EmojiPicker/EmojiPicker.tsx
|
|
23
24
|
const DEFAULT_AVATAR = "🤖";
|
|
24
|
-
const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
|
|
25
|
+
const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, allowModelAvatar, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
|
|
25
26
|
const ref = useRef(null);
|
|
26
27
|
const { t } = useTranslation(emojiPicker_default);
|
|
27
28
|
const [visible, setVisible] = useMergeState(defaultOpen, {
|
|
@@ -48,6 +49,27 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
|
|
|
48
49
|
setAva(emoji);
|
|
49
50
|
setVisible(false);
|
|
50
51
|
};
|
|
52
|
+
const mergedCustomEmojis = useMemo(() => {
|
|
53
|
+
if (!allowModelAvatar) return customEmojis;
|
|
54
|
+
const modelEmojisCategory = {
|
|
55
|
+
id: "models",
|
|
56
|
+
name: "Models / Providers",
|
|
57
|
+
emojis: toc.filter((item) => item.group !== "application").map((item) => ({
|
|
58
|
+
id: item.id.toLowerCase(),
|
|
59
|
+
name: item.title,
|
|
60
|
+
keywords: [
|
|
61
|
+
item.title,
|
|
62
|
+
item.id,
|
|
63
|
+
item.fullTitle
|
|
64
|
+
],
|
|
65
|
+
skins: [{ src: getLobeIconCDN(item.id, {
|
|
66
|
+
format: "avatar",
|
|
67
|
+
cdn: "aliyun"
|
|
68
|
+
}) }]
|
|
69
|
+
}))
|
|
70
|
+
};
|
|
71
|
+
return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];
|
|
72
|
+
}, [allowModelAvatar, customEmojis]);
|
|
51
73
|
const emojiText = texts?.emoji ?? t("emojiPicker.emoji");
|
|
52
74
|
const uploadText = texts?.upload ?? t("emojiPicker.upload");
|
|
53
75
|
const deleteText = texts?.delete ?? t("emojiPicker.delete");
|
|
@@ -121,7 +143,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
|
|
|
121
143
|
})]
|
|
122
144
|
}),
|
|
123
145
|
tab === "emoji" && /* @__PURE__ */ jsx(Picker, {
|
|
124
|
-
custom:
|
|
146
|
+
custom: mergedCustomEmojis,
|
|
125
147
|
data,
|
|
126
148
|
i18n,
|
|
127
149
|
icons: "outline",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n ({\n value,\n defaultAvatar = DEFAULT_AVATAR,\n onChange,\n locale = 'en-US',\n allowUpload,\n allowDelete,\n texts,\n onDelete,\n compressSize = 256,\n customEmojis,\n className,\n loading,\n onUpload,\n customTabs = [],\n popupClassName,\n popupStyle,\n customRender,\n open,\n defaultOpen = false,\n onOpenChange,\n popupProps,\n shape,\n contentProps,\n ...rest\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const { t } = useTranslation(emojiPickerMessages);\n const [visible, setVisible] = useMergeState(defaultOpen, {\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n value: open,\n });\n const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n const theme = useTheme();\n const pickerCssVariables = useMemo<Record<string, string>>(\n () => ({\n '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n }),\n [theme.colorPrimary, theme.colorBgElevated],\n );\n\n const { data: i18n } = useSWR(\n locale,\n async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n { revalidateOnFocus: false, revalidateOnMount: false },\n );\n\n const [ava, setAva] = useMergeState(defaultAvatar, {\n defaultValue: defaultAvatar,\n onChange,\n value,\n });\n\n const handleAvatarChange = (emoji: string) => {\n setAva(emoji);\n setVisible(false);\n };\n\n const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n const uploadText = texts?.upload ?? t('emojiPicker.upload');\n const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n const items: TabsProps['items'] = [\n !hideEmojiTab && {\n key: 'emoji',\n label: (\n <Tooltip title={emojiText}>\n <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n allowUpload && {\n key: 'upload',\n label: (\n <Tooltip title={uploadText}>\n <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n ].filter(Boolean) as TabsProps['items'];\n\n const showTabs = allowDelete || (items && items.length > 1);\n\n const content = (\n <Flexbox\n className={cx(styles.picker, popupClassName)}\n ref={ref}\n style={{\n minWidth: 310,\n paddingTop: showTabs ? 4 : 0,\n ...pickerCssVariables,\n ...popupStyle,\n }}\n {...contentProps}\n >\n {showTabs && (\n <Flexbox\n horizontal\n align={'center'}\n className={styles.tabs}\n justify={'space-between'}\n paddingInline={10}\n >\n <Tabs\n compact\n activeKey={tab}\n items={items}\n size={'small'}\n onChange={(key) => setTab(key as any)}\n />\n {allowDelete && (\n <ActionIcon\n icon={TrashIcon}\n title={deleteText}\n size={{\n blockSize: 32,\n size: 18,\n }}\n onClick={() => {\n handleAvatarChange(defaultAvatar);\n onDelete?.();\n }}\n />\n )}\n </Flexbox>\n )}\n {tab === 'emoji' && (\n <Picker\n custom={customEmojis}\n data={data}\n i18n={i18n}\n icons={'outline'}\n locale={locale.split('-')[0]}\n navPosition={showTabs ? 'bottom' : 'top'}\n previewPosition={'none'}\n skinTonePosition={'none'}\n theme={theme.isDarkMode ? 'dark' : 'light'}\n onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n />\n )}\n {tab === 'upload' && (\n <AvatarUploader\n compressSize={compressSize}\n shape={shape}\n texts={texts}\n onChange={handleAvatarChange}\n onUpload={onUpload}\n />\n )}\n {customTabs.map(\n (item) =>\n tab === item.value && (\n <Flexbox key={item.value} padding={10}>\n {item.render(handleAvatarChange)}\n </Flexbox>\n ),\n )}\n </Flexbox>\n );\n\n return (\n <Popover\n className={cx(styles.popover)}\n content={content}\n defaultOpen={defaultOpen}\n open={visible}\n placement={'bottom'}\n trigger={'click'}\n classNames={{\n content: styles.popover,\n root: styles.positioner,\n }}\n onOpenChange={(v) => {\n if (loading) return;\n setVisible(v);\n }}\n {...popupProps}\n >\n {customRender ? (\n customRender(ava)\n ) : (\n <Avatar\n avatar={ava}\n className={cx(styles.root, className)}\n loading={loading}\n shape={shape}\n {...rest}\n />\n )}\n </Popover>\n );\n },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN, toc } from '@lobehub/icons';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n ({\n value,\n defaultAvatar = DEFAULT_AVATAR,\n onChange,\n locale = 'en-US',\n allowUpload,\n allowDelete,\n allowModelAvatar,\n texts,\n onDelete,\n compressSize = 256,\n customEmojis,\n className,\n loading,\n onUpload,\n customTabs = [],\n popupClassName,\n popupStyle,\n customRender,\n open,\n defaultOpen = false,\n onOpenChange,\n popupProps,\n shape,\n contentProps,\n ...rest\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const { t } = useTranslation(emojiPickerMessages);\n const [visible, setVisible] = useMergeState(defaultOpen, {\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n value: open,\n });\n const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n const theme = useTheme();\n const pickerCssVariables = useMemo<Record<string, string>>(\n () => ({\n '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n }),\n [theme.colorPrimary, theme.colorBgElevated],\n );\n\n const { data: i18n } = useSWR(\n locale,\n async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n { revalidateOnFocus: false, revalidateOnMount: false },\n );\n\n const [ava, setAva] = useMergeState(defaultAvatar, {\n defaultValue: defaultAvatar,\n onChange,\n value,\n });\n\n const handleAvatarChange = (emoji: string) => {\n setAva(emoji);\n setVisible(false);\n };\n\n // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n const mergedCustomEmojis = useMemo(() => {\n if (!allowModelAvatar) return customEmojis;\n\n const modelIcons = toc.filter((item) => item.group !== 'application');\n\n const modelEmojisCategory = {\n id: 'models',\n name: 'Models / Providers',\n emojis: modelIcons.map((item) => ({\n id: item.id.toLowerCase(),\n name: item.title,\n keywords: [item.title, item.id, item.fullTitle],\n skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n })),\n };\n\n return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n }, [allowModelAvatar, customEmojis]);\n\n const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n const uploadText = texts?.upload ?? t('emojiPicker.upload');\n const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n const items: TabsProps['items'] = [\n !hideEmojiTab && {\n key: 'emoji',\n label: (\n <Tooltip title={emojiText}>\n <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n allowUpload && {\n key: 'upload',\n label: (\n <Tooltip title={uploadText}>\n <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n </Tooltip>\n ),\n },\n ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n ].filter(Boolean) as TabsProps['items'];\n\n const showTabs = allowDelete || (items && items.length > 1);\n\n const content = (\n <Flexbox\n className={cx(styles.picker, popupClassName)}\n ref={ref}\n style={{\n minWidth: 310,\n paddingTop: showTabs ? 4 : 0,\n ...pickerCssVariables,\n ...popupStyle,\n }}\n {...contentProps}\n >\n {showTabs && (\n <Flexbox\n horizontal\n align={'center'}\n className={styles.tabs}\n justify={'space-between'}\n paddingInline={10}\n >\n <Tabs\n compact\n activeKey={tab}\n items={items}\n size={'small'}\n onChange={(key) => setTab(key as any)}\n />\n {allowDelete && (\n <ActionIcon\n icon={TrashIcon}\n title={deleteText}\n size={{\n blockSize: 32,\n size: 18,\n }}\n onClick={() => {\n handleAvatarChange(defaultAvatar);\n onDelete?.();\n }}\n />\n )}\n </Flexbox>\n )}\n {tab === 'emoji' && (\n <Picker\n custom={mergedCustomEmojis}\n data={data}\n i18n={i18n}\n icons={'outline'}\n locale={locale.split('-')[0]}\n navPosition={showTabs ? 'bottom' : 'top'}\n previewPosition={'none'}\n skinTonePosition={'none'}\n theme={theme.isDarkMode ? 'dark' : 'light'}\n onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n />\n )}\n {tab === 'upload' && (\n <AvatarUploader\n compressSize={compressSize}\n shape={shape}\n texts={texts}\n onChange={handleAvatarChange}\n onUpload={onUpload}\n />\n )}\n {customTabs.map(\n (item) =>\n tab === item.value && (\n <Flexbox key={item.value} padding={10}>\n {item.render(handleAvatarChange)}\n </Flexbox>\n ),\n )}\n </Flexbox>\n );\n\n return (\n <Popover\n className={cx(styles.popover)}\n content={content}\n defaultOpen={defaultOpen}\n open={visible}\n placement={'bottom'}\n trigger={'click'}\n classNames={{\n content: styles.popover,\n root: styles.positioner,\n }}\n onOpenChange={(v) => {\n if (loading) return;\n setVisible(v);\n }}\n {...popupProps}\n >\n {customRender ? (\n customRender(ava)\n ) : (\n <Avatar\n avatar={ava}\n className={cx(styles.root, className)}\n loading={loading}\n shape={shape}\n {...rest}\n />\n )}\n </Popover>\n );\n },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
|
|
@@ -2,43 +2,25 @@ import { memo, useCallback } from "react";
|
|
|
2
2
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { isUndefined } from "es-toolkit/compat";
|
|
4
4
|
//#region src/awesome/GridBackground/components/Grid.tsx
|
|
5
|
-
var Line = /* @__PURE__ */ function(Line) {
|
|
6
|
-
Line[Line["l7"] = 0] = "l7";
|
|
7
|
-
Line[Line["l6"] = 1] = "l6";
|
|
8
|
-
Line[Line["l5"] = 2] = "l5";
|
|
9
|
-
Line[Line["l4"] = 3] = "l4";
|
|
10
|
-
Line[Line["l3"] = 4] = "l3";
|
|
11
|
-
Line[Line["l2"] = 5] = "l2";
|
|
12
|
-
Line[Line["l1"] = 6] = "l1";
|
|
13
|
-
Line[Line["center"] = 7] = "center";
|
|
14
|
-
Line[Line["r1"] = 8] = "r1";
|
|
15
|
-
Line[Line["r2"] = 9] = "r2";
|
|
16
|
-
Line[Line["r3"] = 10] = "r3";
|
|
17
|
-
Line[Line["r4"] = 11] = "r4";
|
|
18
|
-
Line[Line["r5"] = 12] = "r5";
|
|
19
|
-
Line[Line["r6"] = 13] = "r6";
|
|
20
|
-
Line[Line["r7"] = 14] = "r7";
|
|
21
|
-
return Line;
|
|
22
|
-
}(Line || {});
|
|
23
5
|
const Grid = memo(({ color = "#fff", strokeWidth = 3, linePick, ...rest }) => {
|
|
24
6
|
const isUnpick = isUndefined(linePick);
|
|
25
7
|
const showLine = useCallback((l) => isUnpick || linePick === l, [linePick]);
|
|
26
8
|
const vLine = /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
27
|
-
showLine(
|
|
28
|
-
showLine(
|
|
29
|
-
showLine(
|
|
30
|
-
showLine(
|
|
31
|
-
showLine(
|
|
32
|
-
showLine(
|
|
33
|
-
showLine(
|
|
34
|
-
showLine(
|
|
35
|
-
showLine(
|
|
36
|
-
showLine(
|
|
37
|
-
showLine(
|
|
38
|
-
showLine(
|
|
39
|
-
showLine(
|
|
40
|
-
showLine(
|
|
41
|
-
showLine(
|
|
9
|
+
showLine(0) && /* @__PURE__ */ jsx("path", { d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0" }),
|
|
10
|
+
showLine(1) && /* @__PURE__ */ jsx("path", { d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0" }),
|
|
11
|
+
showLine(2) && /* @__PURE__ */ jsx("path", { d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0" }),
|
|
12
|
+
showLine(3) && /* @__PURE__ */ jsx("path", { d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0" }),
|
|
13
|
+
showLine(4) && /* @__PURE__ */ jsx("path", { d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0" }),
|
|
14
|
+
showLine(5) && /* @__PURE__ */ jsx("path", { d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0" }),
|
|
15
|
+
showLine(6) && /* @__PURE__ */ jsx("path", { d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0" }),
|
|
16
|
+
showLine(7) && /* @__PURE__ */ jsx("path", { d: "M1864 420V0h0" }),
|
|
17
|
+
showLine(8) && /* @__PURE__ */ jsx("path", { d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0" }),
|
|
18
|
+
showLine(9) && /* @__PURE__ */ jsx("path", { d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0" }),
|
|
19
|
+
showLine(10) && /* @__PURE__ */ jsx("path", { d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0" }),
|
|
20
|
+
showLine(11) && /* @__PURE__ */ jsx("path", { d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0" }),
|
|
21
|
+
showLine(12) && /* @__PURE__ */ jsx("path", { d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0" }),
|
|
22
|
+
showLine(13) && /* @__PURE__ */ jsx("path", { d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0" }),
|
|
23
|
+
showLine(14) && /* @__PURE__ */ jsx("path", { d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0" })
|
|
42
24
|
] });
|
|
43
25
|
const hLine = isUnpick && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
44
26
|
/* @__PURE__ */ jsx("path", { d: "M2835 42H892" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 type { 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":";;;;
|
|
1
|
+
{"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 type { 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":";;;;AA6BA,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,qBAAA,YAAA,EAAA,UAAA;EACG,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,6DAA8D,CAAA;EAC3F,SAAA,EAAiB,IAChB,oBAAC,QAAD,EAAM,GAAE,kEAAmE,CAAA;EAE5E,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,qDAAsD,CAAA;EACnF,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,oDAAqD,CAAA;EAClF,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,qDAAsD,CAAA;EACnF,SAAA,EAAqB,IAAI,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;EACnD,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,EAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;EACrF,SAAA,GAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;EACrF,SAAA,GAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,GAAiB,IAAI,oBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;EACrF,SAAA,GAAiB,IAChB,oBAAC,QAAD,EAAM,GAAE,mEAAoE,CAAA;EAE7E,SAAA,GAAiB,IAChB,oBAAC,QAAD,EAAM,GAAE,gEAAiE,CAAA;EAE1E,EAAA,CAAA;CAGL,MAAM,QAAQ,YACZ,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;EACzB,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;EAC1B,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;EACzB,EAAA,CAAA;AAGL,QACE,oBAAC,OAAD;EACE,OAAO,EAAE,OAAO,QAAQ;EACxB,SAAQ;EACR,OAAM;EACN,GAAI;YAEJ,qBAAC,KAAD;GAAG,MAAK;GAAO,UAAS;GAAU,QAAQ;GAAoB;aAA9D,CACG,OACA,MACC;;EACA,CAAA;EAER;AAEF,KAAK,cAAc"}
|