@lobehub/ui 5.9.1 → 5.9.3
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.
- package/es/Accordion/Accordion.mjs +2 -2
- package/es/Accordion/Accordion.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs +2 -2
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/Checkbox/Checkbox.mjs +2 -2
- package/es/Checkbox/Checkbox.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs +2 -2
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeEditor/CodeEditor.mjs +2 -2
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +2 -2
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/DraggablePanel/DraggablePanel.mjs +2 -2
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs +2 -2
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs +2 -2
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs +3 -3
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs +2 -2
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs +2 -2
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/Markdown/markdown.style.mjs +3 -4
- package/es/Markdown/markdown.style.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs +2 -2
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/SortableList/SortableList.mjs +7 -3
- package/es/SortableList/SortableList.mjs.map +1 -1
- package/es/SortableList/type.d.mts +5 -0
- package/es/Toc/TocMobile.mjs +2 -2
- package/es/Toc/TocMobile.mjs.map +1 -1
- package/es/base-ui/Modal/style.mjs +1 -0
- package/es/base-ui/Modal/style.mjs.map +1 -1
- package/es/base-ui/Switch/atoms.mjs +2 -2
- package/es/base-ui/Switch/atoms.mjs.map +1 -1
- package/es/chat/EditableMessage/EditableMessage.mjs +3 -3
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +3 -3
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/mobile/TabBar/TabBar.mjs +2 -2
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/package.json +1 -1
package/es/Toc/TocMobile.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TocMobile.mjs","names":[
|
|
1
|
+
{"version":3,"file":"TocMobile.mjs","names":[],"sources":["../../src/Toc/TocMobile.tsx"],"sourcesContent":["'use client';\n\nimport { Anchor, Collapse, ConfigProvider } from 'antd';\nimport { PanelTopClose, PanelTopOpen } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\n\nimport { styles } from './style';\nimport type { TocMobileProps } from './type';\nimport { mapItems } from './utils';\n\nconst TocMobile = memo<TocMobileProps>(\n ({ items, activeKey, onChange, getContainer, headerHeight = 64, tocWidth = 176 }) => {\n // tocWidth is part of the interface but not used in this component\n void tocWidth;\n const [activeLink, setActiveLink] = useControlledState<string>('', {\n onChange,\n value: activeKey,\n });\n\n const activeAnchor = items.find((item) => item.id === activeLink);\n\n const tocItems = useMemo(() => mapItems(items), [items]);\n\n return (\n <ConfigProvider theme={{ token: { fontSize: 12, sizeStep: 3 } }}>\n <section className={styles.mobileCtn}>\n <Collapse\n ghost\n className={styles.expand}\n expandIconPlacement={'end'}\n expandIcon={({ isActive }) => (\n <ActionIcon icon={isActive ? PanelTopClose : PanelTopOpen} size={'small'} />\n )}\n >\n <Collapse.Panel\n forceRender\n header={activeAnchor ? activeAnchor.title : 'TOC'}\n key={'toc'}\n >\n <ConfigProvider theme={{ token: { fontSize: 14, sizeStep: 4 } }}>\n <Anchor\n getContainer={getContainer}\n items={tocItems}\n targetOffset={headerHeight + 48}\n onChange={(currentLink) => {\n setActiveLink(currentLink.replace('#', ''));\n }}\n />\n </ConfigProvider>\n </Collapse.Panel>\n </Collapse>\n </section>\n </ConfigProvider>\n );\n },\n);\n\nTocMobile.displayName = 'TocMobile';\n\nexport default TocMobile;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EAAE,OAAO,WAAW,UAAU,cAAc,eAAe,IAAI,WAAW,UAAU;CAGnF,MAAM,CAAC,YAAY,iBAAiB,mBAA2B,IAAI;EACjE;EACA,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,MAAM,MAAM,SAAS,KAAK,OAAO,WAAW;CAEjE,MAAM,WAAW,cAAc,SAAS,MAAM,EAAE,CAAC,MAAM,CAAC;AAExD,QACE,oBAAC,gBAAD;EAAgB,OAAO,EAAE,OAAO;GAAE,UAAU;GAAI,UAAU;GAAG,EAAE;YAC7D,oBAAC,WAAD;GAAS,WAAW,OAAO;aACzB,oBAAC,UAAD;IACE,OAAA;IACA,WAAW,OAAO;IAClB,qBAAqB;IACrB,aAAa,EAAE,eACb,oBAAC,YAAD;KAAY,MAAM,WAAW,gBAAgB;KAAc,MAAM;KAAW,CAAA;cAG9E,oBAAC,SAAS,OAAV;KACE,aAAA;KACA,QAAQ,eAAe,aAAa,QAAQ;eAG5C,oBAAC,gBAAD;MAAgB,OAAO,EAAE,OAAO;OAAE,UAAU;OAAI,UAAU;OAAG,EAAE;gBAC7D,oBAAC,QAAD;OACgB;OACd,OAAO;OACP,cAAc,eAAe;OAC7B,WAAW,gBAAgB;AACzB,sBAAc,YAAY,QAAQ,KAAK,GAAG,CAAC;;OAE7C,CAAA;MACa,CAAA;KACF,EAZV,MAYU;IACR,CAAA;GACH,CAAA;EACK,CAAA;EAGtB;AAED,UAAU,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1000;\n inset: 0;\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n transition: opacity 150ms ease-out;\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n close: css`\n cursor: pointer;\n\n position: absolute;\n inset-block-start: 12px;\n inset-inline-end: 12px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 150ms ease-out;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n closeInline: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 150ms ease-out;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n content: css`\n overflow: hidden auto;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n footer: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n\n headerDraggable: css`\n cursor: default;\n user-select: none;\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1001;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n\n popupInner: css`\n pointer-events: auto;\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n\n box-sizing: border-box;\n width: calc(100% - 32px);\n max-width: 520px;\n max-height: calc(100dvh - 64px);\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: 12px;\n\n background: ${cssVar.colorBgContainer};\n box-shadow: ${cssVar.boxShadow};\n\n transition:\n transform 150ms cubic-bezier(0.22, 1, 0.36, 1),\n opacity 150ms ease-out;\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: scale(0.96) translateY(4px);\n opacity: 0;\n }\n `,\n\n title: css`\n margin: 0;\n\n font-size: 16px;\n font-weight: 600;\n line-height: 1.5;\n color: ${cssVar.colorText};\n `,\n\n buttonBase: css`\n cursor: pointer;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n height: 36px;\n padding-block: 0;\n padding-inline: 16px;\n border: 1px solid ${cssVar.colorBorder};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n\n transition: all 150ms ease-out;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n\n cancelButton: css`\n color: ${cssVar.colorText};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:disabled) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n loadingSpinner: css`\n @keyframes modal-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 14px;\n height: 14px;\n border: 2px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: modal-spin 0.6s linear infinite;\n `,\n\n dangerOkButton: css`\n border-color: ${cssVar.colorError};\n color: #fff;\n background: ${cssVar.colorError};\n\n &:hover:not(:disabled) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:active:not(:disabled) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n\n fullscreenPopupInner: css`\n width: 100% !important;\n max-width: 100% !important;\n height: 100dvh !important;\n max-height: 100dvh !important;\n border: none;\n border-radius: 0;\n `,\n\n fullscreenToggle: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 28px;\n height: 28px;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 150ms ease-out;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n headerActions: css`\n display: flex;\n gap: 4px;\n align-items: center;\n margin-inline-end: -4px;\n `,\n\n okButton: css`\n border-color: ${cssVar.colorPrimary};\n color: #fff;\n background: ${cssVar.colorPrimary};\n\n &:hover:not(:disabled) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active:not(:disabled) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n denyAnimation: css`\n @keyframes modal-deny {\n 0% {\n outline-color: ${cssVar.colorPrimary};\n outline-offset: 0;\n }\n\n 100% {\n outline-color: transparent;\n outline-offset: 4px;\n }\n }\n\n outline: 2px solid transparent;\n animation: modal-deny 400ms ease-out;\n `,\n\n viewport: css`\n position: fixed;\n z-index: 1000;\n inset: 0;\n overflow: auto;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;qBAeS,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,SAAS,GAAG;;;;;CAMZ,QAAQ,GAAG;;;;;;;;oCAQuB,OAAO,qBAAqB;;CAG9D,QAAQ,GAAG;;;;;;;kCAOqB,OAAO,qBAAqB;;CAG5D,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1000;\n inset: 0;\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n transition: opacity 150ms ease-out;\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n close: css`\n cursor: pointer;\n\n position: absolute;\n inset-block-start: 12px;\n inset-inline-end: 12px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 150ms ease-out;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n closeInline: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 150ms ease-out;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n content: css`\n overflow: hidden auto;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n footer: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n\n headerDraggable: css`\n cursor: default;\n user-select: none;\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1001;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n\n popupInner: css`\n pointer-events: auto;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n box-sizing: border-box;\n width: calc(100% - 32px);\n max-width: 520px;\n max-height: calc(100dvh - 64px);\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: 12px;\n\n background: ${cssVar.colorBgContainer};\n box-shadow: ${cssVar.boxShadow};\n\n transition:\n transform 150ms cubic-bezier(0.22, 1, 0.36, 1),\n opacity 150ms ease-out;\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: scale(0.96) translateY(4px);\n opacity: 0;\n }\n `,\n\n title: css`\n margin: 0;\n\n font-size: 16px;\n font-weight: 600;\n line-height: 1.5;\n color: ${cssVar.colorText};\n `,\n\n buttonBase: css`\n cursor: pointer;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n height: 36px;\n padding-block: 0;\n padding-inline: 16px;\n border: 1px solid ${cssVar.colorBorder};\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n\n transition: all 150ms ease-out;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n\n cancelButton: css`\n color: ${cssVar.colorText};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:disabled) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n loadingSpinner: css`\n @keyframes modal-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 14px;\n height: 14px;\n border: 2px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: modal-spin 0.6s linear infinite;\n `,\n\n dangerOkButton: css`\n border-color: ${cssVar.colorError};\n color: #fff;\n background: ${cssVar.colorError};\n\n &:hover:not(:disabled) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:active:not(:disabled) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n\n fullscreenPopupInner: css`\n width: 100% !important;\n max-width: 100% !important;\n height: 100dvh !important;\n max-height: 100dvh !important;\n border: none;\n border-radius: 0;\n `,\n\n fullscreenToggle: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 28px;\n height: 28px;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 150ms ease-out;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n headerActions: css`\n display: flex;\n gap: 4px;\n align-items: center;\n margin-inline-end: -4px;\n `,\n\n okButton: css`\n border-color: ${cssVar.colorPrimary};\n color: #fff;\n background: ${cssVar.colorPrimary};\n\n &:hover:not(:disabled) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active:not(:disabled) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n denyAnimation: css`\n @keyframes modal-deny {\n 0% {\n outline-color: ${cssVar.colorPrimary};\n outline-offset: 0;\n }\n\n 100% {\n outline-color: transparent;\n outline-offset: 4px;\n }\n }\n\n outline: 2px solid transparent;\n animation: modal-deny 400ms ease-out;\n `,\n\n viewport: css`\n position: fixed;\n z-index: 1000;\n inset: 0;\n overflow: auto;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;qBAeS,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,SAAS,GAAG;;;;;CAMZ,QAAQ,GAAG;;;;;;;;oCAQuB,OAAO,qBAAqB;;CAG9D,QAAQ,GAAG;;;;;;;kCAOqB,OAAO,qBAAqB;;CAG5D,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,iBAAiB;kBACxB,OAAO,UAAU;;;;;;;;;;;;CAajC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,YAAY,GAAG;;;;;;;;;;;wBAWO,OAAO,YAAY;qBACtB,OAAO,eAAe;;;;;;;;;2BAShB,OAAO,mBAAmB;;;;;;;;;CAUnD,cAAc,GAAG;aACN,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,gBAAgB,GAAG;oBACD,OAAO,WAAW;;kBAEpB,OAAO,WAAW;;;sBAGd,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;qBAWF,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,eAAe,GAAG;;;;;;CAOlB,UAAU,GAAG;oBACK,OAAO,aAAa;;kBAEtB,OAAO,aAAa;;;sBAGhB,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;;yBAGK,OAAO,aAAa;;;;;;;;;;;;;CAc3C,UAAU,GAAG;;;;;;CAMd,EAAE"}
|
|
@@ -4,7 +4,7 @@ import { rootVariants, styles, thumbVariants } from "./style.mjs";
|
|
|
4
4
|
import { createContext, use, useMemo, useRef, useState } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { cx } from "antd-style";
|
|
7
|
-
import
|
|
7
|
+
import useControlledState from "use-merge-value";
|
|
8
8
|
import { Switch } from "@base-ui/react/switch";
|
|
9
9
|
//#region src/base-ui/Switch/atoms.tsx
|
|
10
10
|
const SwitchContext = createContext(null);
|
|
@@ -17,7 +17,7 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
|
|
|
17
17
|
const Motion = useMotionComponent();
|
|
18
18
|
const [isPressed, setIsPressed] = useState(false);
|
|
19
19
|
const lastEventRef = useRef(null);
|
|
20
|
-
const [isChecked, setIsChecked] =
|
|
20
|
+
const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {
|
|
21
21
|
defaultValue: defaultChecked,
|
|
22
22
|
onChange: (value) => {
|
|
23
23
|
if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n ...rest\n}: SwitchRootInternalProps) => {\n const Motion = useMotionComponent();\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const baseClassName = rootVariants({ size });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n (rest as any).onKeyDown?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <Motion.button\n {...rest}\n className={cx(baseClassName, className)}\n initial={false}\n whileTap=\"tap\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onTap={() => setIsPressed(false)}\n onTapCancel={() => setIsPressed(false)}\n onTapStart={() => setIsPressed(true)}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n pressedAnimation,\n size = 'default',\n transition = { damping: 25, stiffness: 300, type: 'spring' },\n children,\n ...rest\n}: SwitchThumbProps) => {\n const Motion = useMotionComponent();\n const { isPressed } = useSwitchContext();\n const baseClassName = thumbVariants({ size });\n\n const defaultPressedAnimation = {\n width: size === 'small' ? 16 : 22,\n };\n\n return (\n <Switch.Thumb\n render={\n <Motion.span\n layout\n animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n className={cx(baseClassName, className)}\n transition={transition}\n {...rest}\n >\n {children}\n </Motion.span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n if (position === 'thumb') return styles.iconThumb;\n if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n transition = { bounce: 0, type: 'spring' },\n ...rest\n}: SwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n const Motion = useMotionComponent();\n const { isChecked } = useSwitchContext();\n const size = (rest as any).size || 'default';\n\n const isAnimated = useMemo(() => {\n if (position === 'right') return !isChecked;\n if (position === 'left') return isChecked;\n if (position === 'thumb') return true;\n return false;\n }, [position, isChecked]);\n\n const positionClass = getIconPositionClass(position, size);\n\n return (\n <Motion.span\n animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n className={cx(styles.icon, positionClass, className)}\n transition={transition}\n {...rest}\n >\n {children}\n </Motion.span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}
|
|
@@ -5,14 +5,14 @@ import MessageModal from "../MessageModal/MessageModal.mjs";
|
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
|
-
import
|
|
8
|
+
import useControlledState from "use-merge-value";
|
|
9
9
|
//#region src/chat/EditableMessage/EditableMessage.tsx
|
|
10
10
|
const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {
|
|
11
|
-
const [isEdit, setTyping] =
|
|
11
|
+
const [isEdit, setTyping] = useControlledState(false, {
|
|
12
12
|
onChange: onEditingChange,
|
|
13
13
|
value: editing
|
|
14
14
|
});
|
|
15
|
-
const [expand, setExpand] =
|
|
15
|
+
const [expand, setExpand] = useControlledState(false, {
|
|
16
16
|
onChange: onOpenChange,
|
|
17
17
|
value: openModal
|
|
18
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableMessage.mjs","names":[
|
|
1
|
+
{"version":3,"file":"EditableMessage.mjs","names":[],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n ({\n value,\n onChange,\n classNames = {},\n onEditingChange,\n editing,\n openModal,\n onOpenChange,\n placeholder,\n showEditWhenEmpty = false,\n styles: customStyles,\n className,\n style,\n height,\n variant,\n editButtonSize,\n text,\n fullFeaturedCodeBlock,\n model,\n fontSize,\n language = 'markdown',\n markdownProps,\n }) => {\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [expand, setExpand] = useControlledState<boolean>(false, {\n onChange: onOpenChange,\n value: openModal,\n });\n\n const isAutoSize = height === 'auto';\n\n const input = (\n <MessageInput\n shortcut\n className={cx(className, classNames?.input)}\n classNames={classNames}\n defaultValue={value}\n editButtonSize={editButtonSize}\n height={height}\n language={language}\n placeholder={placeholder}\n styles={customStyles}\n text={text}\n variant={variant}\n style={{\n ...style,\n ...customStyles?.input,\n }}\n onCancel={() => setTyping(false)}\n onConfirm={(text) => {\n onChange?.(text);\n setTyping(false);\n }}\n />\n );\n\n if (!value && showEditWhenEmpty) return input;\n\n return (\n <>\n {!expand && isEdit ? (\n input\n ) : (\n <Markdown\n className={cx(className, classNames?.markdown)}\n fontSize={fontSize}\n fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n variant={'chat'}\n style={{\n height: isAutoSize ? 'unset' : height,\n ...style,\n ...customStyles?.markdown,\n }}\n {...markdownProps}\n >\n {value || placeholder || ''}\n </Markdown>\n )}\n {expand && (\n <MessageModal\n editing={isEdit}\n extra={model?.extra}\n footer={model?.footer}\n height={height}\n language={language}\n open={expand}\n placeholder={placeholder}\n text={text}\n value={value}\n onChange={onChange}\n onEditingChange={setTyping}\n onOpenChange={(e) => {\n setExpand(e);\n setTyping(false);\n }}\n />\n )}\n </>\n );\n },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,EAAE,EACf,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAW,GAAG,WAAW,YAAY,MAAM;EAC/B;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACD,gBAAgB,UAAU,MAAM;EAChC,YAAY,SAAS;AACnB,cAAW,KAAK;AAChB,aAAU,MAAM;;EAElB,CAAA;AAGJ,KAAI,CAAC,SAAS,kBAAmB,QAAO;AAExC,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAW,GAAG,WAAW,YAAY,SAAS;EACpC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;GAClB;EACD,GAAI;YAEH,SAAS,eAAe;EAChB,CAAA,EAEZ,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;AACnB,aAAU,EAAE;AACZ,aAAU,MAAM;;EAElB,CAAA,CAEH,EAAA,CAAA;EAGR;AAED,gBAAgB,cAAc"}
|
|
@@ -11,16 +11,16 @@ import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
|
|
|
11
11
|
import { memo, useState } from "react";
|
|
12
12
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useResponsive } from "antd-style";
|
|
14
|
-
import
|
|
14
|
+
import useControlledState from "use-merge-value";
|
|
15
15
|
//#region src/chat/MessageModal/MessageModal.tsx
|
|
16
16
|
const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenChange, onEditingChange, placeholder, value, language = "markdown", onChange, text, footer, extra }) => {
|
|
17
17
|
const { mobile } = useResponsive();
|
|
18
18
|
const { t } = useTranslation(messageModal_default);
|
|
19
|
-
const [isEdit, setTyping] =
|
|
19
|
+
const [isEdit, setTyping] = useControlledState(false, {
|
|
20
20
|
onChange: onEditingChange,
|
|
21
21
|
value: editing
|
|
22
22
|
});
|
|
23
|
-
const [showModal, setShowModal] =
|
|
23
|
+
const [showModal, setShowModal] = useControlledState(false, {
|
|
24
24
|
onChange: onOpenChange,
|
|
25
25
|
value: open
|
|
26
26
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","
|
|
1
|
+
{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","Flexbox","textStyles"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport { styles as textStyles } from '@/chat/MessageInput/style';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\n\nimport { type MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n ({\n panelRef,\n editing,\n open,\n height = '75vh',\n onOpenChange,\n onEditingChange,\n placeholder,\n value,\n language = 'markdown',\n onChange,\n text,\n footer,\n extra,\n }) => {\n const { mobile } = useResponsive();\n const { t } = useTranslation(messageModalMessages);\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [showModal, setShowModal] = useControlledState(false, {\n onChange: onOpenChange,\n value: open,\n });\n\n const [temporaryValue, setMessage] = useState(value);\n\n const confirmText = text?.confirm ?? t('messageModal.confirm');\n const cancelText = text?.cancel ?? t('messageModal.cancel');\n const editText = text?.edit ?? t('messageModal.edit');\n\n const modalFooter = isEdit ? (\n <Flexbox direction={'horizontal-reverse'} gap={8}>\n <Button\n type=\"primary\"\n onClick={() => {\n setTyping(false);\n onChange?.(temporaryValue);\n setMessage(value);\n }}\n >\n {confirmText}\n </Button>\n <Button\n onClick={() => {\n setTyping(false);\n setMessage(value);\n }}\n >\n {cancelText}\n </Button>\n </Flexbox>\n ) : (\n footer\n );\n\n return (\n <Modal\n allowFullscreen\n destroyOnHidden\n cancelText={cancelText}\n footer={modalFooter}\n height={height}\n okText={editText}\n open={showModal}\n panelRef={panelRef}\n title={text?.title}\n onOk={() => setTyping(true)}\n onCancel={() => {\n setShowModal(false);\n setTyping(false);\n setMessage(value);\n }}\n >\n {isEdit ? (\n mobile ? (\n <TextArea\n autoSize\n className={textStyles}\n defaultValue={temporaryValue}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onChange={(value) => setMessage(value.target.value)}\n />\n ) : (\n <CodeEditor\n className={textStyles}\n defaultValue={temporaryValue}\n language={language}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onValueChange={(value) => setMessage(value)}\n />\n )\n ) : (\n <>\n {extra}\n <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n </>\n )}\n </Modal>\n );\n },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,mBAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAAC,OAAD;EACE,iBAAA;EACA,iBAAA;EACY;EACZ,QA9BgB,SAClB,qBAACC,mBAAD;GAAS,WAAW;GAAsB,KAAK;aAA/C,CACE,oBAAC,QAAD;IACE,MAAK;IACL,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;cAGlB;IACM,CAAA,EACT,oBAAC,QAAD;IACE,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;IACM,CAAA,CACD;OAEV;EASU;EACR,QAAQ;EACR,MAAM;EACI;EACV,OAAO,MAAM;EACb,YAAY,UAAU,KAAK;EAC3B,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;YAGlB,SACC,SACE,oBAAC,UAAD;GACE,UAAA;GACA,WAAWC;GACX,cAAc;GACD;GACb,OAAO;GACP,SAAS;GACT,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,UAAU,WAAW,MAAM,OAAO,MAAM;GACnD,CAAA,GAEF,oBAAC,YAAD;GACE,WAAWA;GACX,cAAc;GACJ;GACG;GACb,OAAO;GACP,SAAS;GACT,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,UAAU,WAAW,MAAM;GAC3C,CAAA,GAGJ,qBAAA,YAAA,EAAA,UAAA,CACG,OACD,oBAAC,UAAD;GAAU,SAAS;aAAS,OAAO,SAAS,YAAY;GAAY,CAAA,CACnE,EAAA,CAAA;EAEC,CAAA;EAGb;AAED,aAAa,cAAc"}
|
|
@@ -5,10 +5,10 @@ import { styles } from "./style.mjs";
|
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
|
-
import
|
|
8
|
+
import useControlledState from "use-merge-value";
|
|
9
9
|
//#region src/mobile/TabBar/TabBar.tsx
|
|
10
10
|
const TabBar = memo(({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {
|
|
11
|
-
const [currentActive, setCurrentActive] =
|
|
11
|
+
const [currentActive, setCurrentActive] = useControlledState(defaultActiveKey || items[0].key, {
|
|
12
12
|
defaultValue: defaultActiveKey,
|
|
13
13
|
onChange,
|
|
14
14
|
value: activeKey
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.mjs","names":["Flexbox"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n const [currentActive, setCurrentActive] = useMergeState<string>(\n defaultActiveKey || items[0].key,\n {\n defaultValue: defaultActiveKey,\n onChange,\n value: activeKey,\n },\n );\n\n return (\n <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n <Flexbox\n horizontal\n align={'center'}\n className={cx(styles.inner, className)}\n justify={'space-around'}\n >\n {items.map((item) => {\n const active = item.key === currentActive;\n return (\n <Flexbox\n align={'center'}\n className={cx(styles.tab, active && styles.active)}\n gap={4}\n justify={'center'}\n key={item.key}\n onClick={() => {\n setCurrentActive(item.key);\n item?.onClick?.();\n }}\n >\n <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n </Flexbox>\n <div className={styles.title}>\n {typeof item.title === 'function' ? item.title(active) : item.title}\n </div>\n </Flexbox>\n );\n })}\n </Flexbox>\n {safeArea && <SafeArea position={'bottom'} />}\n </Flexbox>\n );\n },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"TabBar.mjs","names":["useMergeState","Flexbox"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n const [currentActive, setCurrentActive] = useMergeState<string>(\n defaultActiveKey || items[0].key,\n {\n defaultValue: defaultActiveKey,\n onChange,\n value: activeKey,\n },\n );\n\n return (\n <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n <Flexbox\n horizontal\n align={'center'}\n className={cx(styles.inner, className)}\n justify={'space-around'}\n >\n {items.map((item) => {\n const active = item.key === currentActive;\n return (\n <Flexbox\n align={'center'}\n className={cx(styles.tab, active && styles.active)}\n gap={4}\n justify={'center'}\n key={item.key}\n onClick={() => {\n setCurrentActive(item.key);\n item?.onClick?.();\n }}\n >\n <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n </Flexbox>\n <div className={styles.title}>\n {typeof item.title === 'function' ? item.title(active) : item.title}\n </div>\n </Flexbox>\n );\n })}\n </Flexbox>\n {safeArea && <SafeArea position={'bottom'} />}\n </Flexbox>\n );\n },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoBA,mBACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;AAED,QACE,qBAACC,mBAAD;EAAS,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;YAAjF,CACE,oBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA,mBAAD;KACE,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;eARrB,CAWE,oBAACA,mBAAD;MAAS,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;MACpD,CAAA,EACV,oBAAC,OAAD;MAAK,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;MAC1D,CAAA,CACE;OAZH,KAAK,IAYF;KAEZ;GACM,CAAA,EACT,YAAY,oBAAC,UAAD,EAAU,UAAU,UAAY,CAAA,CACrC;;EAGf;AAED,OAAO,cAAc"}
|