From ed199c60b45995a19a60d14be93598a89df0d7c3 Mon Sep 17 00:00:00 2001 From: yyyyaaa Date: Tue, 14 Nov 2023 11:51:53 +0700 Subject: [PATCH] fix(connect-modal): pass through custom class names --- .../react/stories/ConnectModal.stories.tsx | 1 + src/index.ts | 2 -- .../connect-modal-wallet-list.css.ts | 5 ++-- .../connect-modal-wallet-list.lite.tsx | 23 ++++++++++++++----- src/ui/connect-modal/connect-modal.css.ts | 2 +- src/ui/connect-modal/connect-modal.lite.tsx | 13 +++++++---- src/ui/connect-modal/connect-modal.types.tsx | 3 +++ 7 files changed, 34 insertions(+), 15 deletions(-) diff --git a/packages/react/stories/ConnectModal.stories.tsx b/packages/react/stories/ConnectModal.stories.tsx index f6f2a3fb..e70ae668 100644 --- a/packages/react/stories/ConnectModal.stories.tsx +++ b/packages/react/stories/ConnectModal.stories.tsx @@ -30,6 +30,7 @@ function convert(ws: typeof wallets) { badge: wallet.extends ? WalletPluginSystem[wallet.extends].text : undefined, btmLogo: wallet.extends ? wallet.logo : undefined, })); + // .slice(0, 2); } export const Primary: Story = { diff --git a/src/index.ts b/src/index.ts index 3b8cb766..f262e240 100644 --- a/src/index.ts +++ b/src/index.ts @@ -93,13 +93,11 @@ export type { AssetListProps } from "./ui/asset-list/asset-list.types"; export { default as CrossChain } from "./ui/cross-chain"; export type { CrossChainProps, - CrossChainHeaderProps, CrossChainListItemProps, } from "./ui/cross-chain/cross-chain.types"; export { default as SingleChain } from "./ui/single-chain"; export type { SingleChainProps, - SingleChainHeaderProps, SingleChainListItemProps, } from "./ui/single-chain/single-chain.types"; export { default as OverviewTransfer } from "./ui/overview-transfer"; diff --git a/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts b/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts index e69b815b..c76f826e 100644 --- a/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts +++ b/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.css.ts @@ -11,12 +11,14 @@ export const walletList = style({ width: "100%", overflow: "auto", scrollbarWidth: "none", - paddingBottom: themeVars.space[8], paddingTop: themeVars.space[1], selectors: { "&::-webkit-scrollbar": { display: "none" /* Safari and Chrome */, }, + "&[data-has-list-wallets='true']": { + paddingBottom: themeVars.space[8], + } }, }); @@ -30,7 +32,6 @@ export const squareWallets = style({ }); export const listWallets = style({ - display: "grid", rowGap: themeVars.space[2], gridTemplateColumns: "repeat(1, minmax(0, 1fr))", paddingBottom: themeVars.space[4], diff --git a/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx b/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx index d530da91..954da300 100644 --- a/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx +++ b/src/ui/connect-modal-wallet-list/connect-modal-wallet-list.lite.tsx @@ -11,6 +11,7 @@ import { import anime from "animejs"; import type { AnimeInstance } from "animejs"; import clx from "clsx"; +import Box from "../box"; import WalletButton from "../connect-modal-wallet-button"; import { walletList, @@ -44,6 +45,9 @@ export default function ConnectModalWalletList( await exec(); })(); }, + getListShapeWallets() { + return props.wallets.filter((w) => w.shape === "list"); + }, }); onMount(() => { @@ -115,7 +119,11 @@ export default function ConnectModalWalletList( return (
-
+
0} + > {(wallet, index) => ( -
- w.shape === "list")}> + + {(wallet, index) => ( )} -
+
diff --git a/src/ui/connect-modal/connect-modal.css.ts b/src/ui/connect-modal/connect-modal.css.ts index 955bb897..5cd33291 100644 --- a/src/ui/connect-modal/connect-modal.css.ts +++ b/src/ui/connect-modal/connect-modal.css.ts @@ -37,7 +37,7 @@ export const modalContent = styleVariants({ }); export const modalAnimateContainer = style({ - minHeight: themeVars.space[30], + minHeight: `clamp(100%, ${themeVars.space[30]}px, ${themeVars.space[30]}px)`, }); export const modalChildren = style({ diff --git a/src/ui/connect-modal/connect-modal.lite.tsx b/src/ui/connect-modal/connect-modal.lite.tsx index 48cc9843..13b95acd 100644 --- a/src/ui/connect-modal/connect-modal.lite.tsx +++ b/src/ui/connect-modal/connect-modal.lite.tsx @@ -5,6 +5,7 @@ import { useMetadata, useRef, } from "@builder.io/mitosis"; +import clx from "clsx"; import AnimateLayout from "../animate-layout"; import { store } from "../../models/store"; import type { ThemeVariant } from "../../models/system.model"; @@ -58,11 +59,15 @@ export default function ConnectModal(props: ConnectModalProps) { onClose={() => props.onClose?.()} header={props.header} className={props.modalContainerClassName} - contentClassName={modalContent[state.theme]} - contentStyles={state.overrideManager?.applyOverrides( - connectModalOverrides.name + contentClassName={clx( + modalContent[state.theme], + props.modalContentClassName )} - childrenClassName={modalChildren} + contentStyles={{ + ...state.overrideManager?.applyOverrides(connectModalOverrides.name), + ...props.modalContentStyles, + }} + childrenClassName={clx(modalChildren, props.modalChildrenClassName)} > {props.children} diff --git a/src/ui/connect-modal/connect-modal.types.tsx b/src/ui/connect-modal/connect-modal.types.tsx index 19facdd5..6900a7a3 100644 --- a/src/ui/connect-modal/connect-modal.types.tsx +++ b/src/ui/connect-modal/connect-modal.types.tsx @@ -8,4 +8,7 @@ export interface ConnectModalProps extends BaseComponentProps { children?: BaseComponentProps["children"]; className?: string; modalContainerClassName?: string; + modalContentClassName?: string; + modalChildrenClassName?: string; + modalContentStyles?: any; }