mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-11 01:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

open account data in same window instead of popup (#2234)

Browse source 
* refactor TextViewer Content component

* open account data inside setting window

* close account data edit window on cancel when adding new
This commit is contained in:
Ajay Bura 2025-02-27 19:34:55 +11:00 • committed by GitHub
parent b7e5e0db3e
commit 2b8b0dcffd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 429 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/components/text-viewer/TextViewer.css.ts
View file

@ -31,8 +31,11 @@ export const TextViewerContent = style([
export const TextViewerPre = style([
DefaultReset,
{
padding: config.space.S600,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
},
]);
export const TextViewerPrePadding = style({
padding: config.space.S600,
});

38
src/app/components/text-viewer/TextViewer.tsx
View file

@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { Suspense, lazy } from 'react';
import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
import classNames from 'classnames';
import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
import { ErrorBoundary } from 'react-error-boundary';
@ -8,6 +8,29 @@ import { copyToClipboard } from '../../utils/dom';
const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
type TextViewerContentProps = {
text: string;
langName: string;
size?: ComponentProps<typeof Text>['size'];
} & HTMLAttributes<HTMLPreElement>;
export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentProps>(
({ text, langName, size, className, ...props }, ref) => (
<Text
as="pre"
size={size}
className={classNames(css.TextViewerPre, `language-${langName}`, className)}
{...props}
ref={ref}
>
<ErrorBoundary fallback={<code>{text}</code>}>
<Suspense fallback={<code>{text}</code>}>
<ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
</Suspense>
</ErrorBoundary>
</Text>
)
);
export type TextViewerProps = {
name: string;
text: string;
@ -43,6 +66,7 @@ export const TextViewer = as<'div', TextViewerProps>(
</Chip>
</Box>
</Header>
<Box
grow="Yes"
className={css.TextViewerContent}
@ -50,13 +74,11 @@ export const TextViewer = as<'div', TextViewerProps>(
alignItems="Center"
>
<Scroll hideTrack variant="Background" visibility="Hover">
<Text as="pre" className={classNames(css.TextViewerPre, `language-${langName}`)}>
<ErrorBoundary fallback={<code>{text}</code>}>
<Suspense fallback={<code>{text}</code>}>
<ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
</Suspense>
</ErrorBoundary>
</Text>
<TextViewerContent
className={css.TextViewerPrePadding}
text={text}
langName={langName}
/>
</Scroll>
</Box>
</Box>