fix: impoer external components
This commit is contained in:
jialin
@@ -1,53 +0,0 @@
|
||||
import { DoubleRightOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, FloatButton } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
useInfiniteScroll,
|
||||
UseInfiniteScrollOptions
|
||||
} from './use-infinite-scroll';
|
||||
|
||||
const InfiniteScroller: React.FC<
|
||||
UseInfiniteScrollOptions & { children: React.ReactNode }
|
||||
> = (props) => {
|
||||
const { children, ...restProps } = props;
|
||||
const intl = useIntl();
|
||||
const { observerRef, throttledLoadMore } = useInfiniteScroll(restProps);
|
||||
|
||||
return (
|
||||
<div className="relative" style={{ width: '100%' }}>
|
||||
{children}
|
||||
<div
|
||||
ref={observerRef}
|
||||
style={{
|
||||
height: 1
|
||||
}}
|
||||
>
|
||||
{restProps.current < restProps.total && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: 24
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={throttledLoadMore}
|
||||
type="text"
|
||||
size="small"
|
||||
disabled={restProps.loading}
|
||||
>
|
||||
{intl.formatMessage({ id: 'common.button.more' })}
|
||||
<DoubleRightOutlined rotate={90} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<FloatButton.BackTop visibilityHeight={1000} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfiniteScroller;
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { throttle } from 'lodash';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
export interface UseInfiniteScrollOptions {
|
||||
total: number;
|
||||
current: number;
|
||||
loading: boolean;
|
||||
refresh: (nextPage: number) => void;
|
||||
onBottom?: () => void;
|
||||
throttleDelay?: number;
|
||||
}
|
||||
|
||||
export function useInfiniteScroll({
|
||||
total,
|
||||
current,
|
||||
loading,
|
||||
refresh,
|
||||
onBottom,
|
||||
throttleDelay = 300
|
||||
}: UseInfiniteScrollOptions) {
|
||||
const { ref: observerRef, inView } = useInView({
|
||||
threshold: 0.2
|
||||
});
|
||||
const isInitialLoad = useRef(true);
|
||||
|
||||
const throttledLoadMore = useMemoizedFn(
|
||||
throttle(() => {
|
||||
if (loading) return;
|
||||
if (current >= total) return;
|
||||
|
||||
onBottom?.();
|
||||
refresh(current + 1);
|
||||
}, throttleDelay)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
if (isInitialLoad.current) {
|
||||
isInitialLoad.current = false;
|
||||
return;
|
||||
}
|
||||
throttledLoadMore();
|
||||
}
|
||||
}, [inView, throttledLoadMore]);
|
||||
|
||||
return { observerRef, throttledLoadMore };
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
|
||||
interface ScrollerContextProps {
|
||||
total: number; // total pages
|
||||
current: number;
|
||||
loading: boolean;
|
||||
refresh: (nextPage: number) => void;
|
||||
onBottom?: () => void;
|
||||
throttleDelay?: number;
|
||||
}
|
||||
|
||||
export const ScrollerContext = createContext<ScrollerContextProps>(
|
||||
{} as ScrollerContextProps
|
||||
);
|
||||
|
||||
export const useScrollerContext = () => {
|
||||
const context = useContext(ScrollerContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'useScrollerContext must be used within a ScrollerProvider'
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@@ -1,127 +0,0 @@
|
||||
import { Button, Empty, EmptyProps, Typography } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledEmpty = styled(Empty)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-block: 60px 32px;
|
||||
.ant-empty-image {
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
font-size: 42px;
|
||||
.anticon {
|
||||
color: var(--ant-color-primary);
|
||||
}
|
||||
}
|
||||
.ant-empty-footer {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const ImageWrapper = styled.div`
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const SimpleImageWrapper = styled.div`
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Description = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const NoResult: React.FC<
|
||||
EmptyProps & {
|
||||
title?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
noFoundText?: React.ReactNode;
|
||||
filters?: Record<string, any>;
|
||||
loading?: boolean;
|
||||
loadend?: boolean;
|
||||
dataSource?: any[];
|
||||
buttonText?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
> = (props) => {
|
||||
const {
|
||||
filters,
|
||||
noFoundText,
|
||||
loadend,
|
||||
loading,
|
||||
dataSource,
|
||||
buttonText,
|
||||
onClick
|
||||
} = props;
|
||||
|
||||
const hasFilters = useMemo(() => {
|
||||
const filterValues = _.omit(filters, ['page', 'perPage']);
|
||||
|
||||
return Object.values(filterValues || {}).some((value) => {
|
||||
if (Array.isArray(value)) {
|
||||
return value.length > 0;
|
||||
}
|
||||
|
||||
return !!value;
|
||||
});
|
||||
}, [filters]);
|
||||
|
||||
const renderChildren = () => {
|
||||
if (!buttonText || !onClick) return null;
|
||||
return (
|
||||
<Button color="primary" variant="filled" onClick={onClick}>
|
||||
{buttonText}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!loading && loadend && !dataSource?.length ? (
|
||||
<StyledEmpty
|
||||
image={
|
||||
hasFilters ? (
|
||||
<SimpleImageWrapper>
|
||||
{Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
</SimpleImageWrapper>
|
||||
) : (
|
||||
<ImageWrapper>{props.image}</ImageWrapper>
|
||||
)
|
||||
}
|
||||
description={
|
||||
<Description>
|
||||
{!hasFilters && (
|
||||
<Typography.Text style={{ fontSize: '16px', fontWeight: 500 }}>
|
||||
{props.title}
|
||||
</Typography.Text>
|
||||
)}
|
||||
<Typography.Text type="secondary">
|
||||
{hasFilters ? noFoundText : props.subTitle}
|
||||
</Typography.Text>
|
||||
</Description>
|
||||
}
|
||||
>
|
||||
{!hasFilters && renderChildren()}
|
||||
</StyledEmpty>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoResult;
|
||||
@@ -1,13 +0,0 @@
|
||||
.ant-pro-footer-bar {
|
||||
padding-inline: 0;
|
||||
border-block-start: 1px solid rgba(5, 5, 5, 6%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
.ant-pro-footer-bar-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-pro-footer-bar-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import './footer.less';
|
||||
import TerminalTabs from './tabs';
|
||||
|
||||
export interface TerminalModalProps {
|
||||
terminals: { url: string; name: string }[];
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
currentActive?: string;
|
||||
}
|
||||
|
||||
const TerminalModal: React.FC<TerminalModalProps> = ({
|
||||
terminals,
|
||||
open,
|
||||
onClose,
|
||||
currentActive
|
||||
}) => {
|
||||
return (
|
||||
<TerminalTabs
|
||||
terminals={terminals}
|
||||
currentActive={currentActive}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default TerminalModal;
|
||||
@@ -1,98 +0,0 @@
|
||||
import { HolderOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
import { Resizable, ResizableProps } from 're-resizable';
|
||||
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: -12px;
|
||||
font-size: var(--font-size-middle);
|
||||
left: calc(50% + 10px);
|
||||
transform: translateX(-50%);
|
||||
background: none !important;
|
||||
cursor: ns-resize;
|
||||
&::hover {
|
||||
background: none !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const ResizeContainer: React.FC<
|
||||
React.PropsWithChildren<
|
||||
ResizableProps & {
|
||||
ref?: any;
|
||||
defaultHeight?: number;
|
||||
defaultWidth?: number;
|
||||
minHeight?: number;
|
||||
maxHeight?: number;
|
||||
onReSize?: (
|
||||
e: MouseEvent | TouchEvent,
|
||||
dir: any,
|
||||
refToElement: HTMLElement
|
||||
) => void;
|
||||
onReSizeStop?: (
|
||||
e: MouseEvent | TouchEvent,
|
||||
dir: any,
|
||||
refToElement: HTMLElement,
|
||||
delta: { width: number; height: number }
|
||||
) => void;
|
||||
}
|
||||
>
|
||||
> = forwardRef((props, ref) => {
|
||||
const {
|
||||
defaultWidth,
|
||||
defaultHeight = 180,
|
||||
minHeight = 180,
|
||||
maxHeight = 400,
|
||||
children,
|
||||
onReSize,
|
||||
onReSizeStop,
|
||||
...restProps
|
||||
} = props;
|
||||
const intl = useIntl();
|
||||
const resizeRef = useRef<Resizable>(null);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
container: resizeRef.current
|
||||
}));
|
||||
|
||||
const dragHanle = (
|
||||
<StyledButton
|
||||
size="small"
|
||||
type="text"
|
||||
icon={
|
||||
<HolderOutlined
|
||||
rotate={90}
|
||||
style={{ fontSize: 'var(--font-size-14)' }}
|
||||
/>
|
||||
}
|
||||
></StyledButton>
|
||||
);
|
||||
|
||||
return (
|
||||
<Resizable
|
||||
ref={resizeRef}
|
||||
enable={{
|
||||
top: true
|
||||
}}
|
||||
defaultSize={{
|
||||
height: defaultHeight,
|
||||
width: defaultWidth
|
||||
}}
|
||||
handleComponent={{
|
||||
top: undefined
|
||||
}}
|
||||
maxHeight={maxHeight}
|
||||
minHeight={minHeight}
|
||||
onResize={onReSize}
|
||||
onResizeStop={onReSizeStop}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</Resizable>
|
||||
);
|
||||
});
|
||||
|
||||
export default ResizeContainer;
|
||||
@@ -1,138 +0,0 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { XTerminal } from '@gpustack/core-ui';
|
||||
import { Button, Tabs } from 'antd';
|
||||
import { throttle } from 'lodash';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import ResizeContainer from './resize-container';
|
||||
import { TerminalProps } from './types';
|
||||
|
||||
const TabsContainer = styled.div`
|
||||
.ant-tabs {
|
||||
.ant-tabs-tab {
|
||||
positon: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--ant-color-split);
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav {
|
||||
.ant-tabs-tab {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
.ant-tabs-tab-remove .anticon-close {
|
||||
// display: none;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
content: '';
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
background-color: var(--ant-color-fill-tertiary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
.ant-tabs-tab-remove .anticon-close {
|
||||
// display: inline-block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab:not(.ant-tabs-tab-active) {
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
background-color: var(--ant-color-bg-elevated);
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export interface TerminalTabsProps {
|
||||
terminals: TerminalProps[];
|
||||
currentActive?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TerminalTabs: React.FC<TerminalTabsProps> = ({
|
||||
terminals,
|
||||
currentActive,
|
||||
onClose
|
||||
}) => {
|
||||
const [activeKey, setActiveKey] = useState(
|
||||
currentActive || terminals[0]?.url || ''
|
||||
);
|
||||
const [height, setHeight] = useState(300);
|
||||
const resizeRef = React.useRef<any>(null);
|
||||
|
||||
const items = useMemo(() => {
|
||||
return terminals.map((terminal) => {
|
||||
return {
|
||||
key: terminal.url,
|
||||
label: terminal.name,
|
||||
children: <XTerminal height={height} url={terminal.url} />
|
||||
};
|
||||
});
|
||||
}, [terminals, height]);
|
||||
|
||||
const handleOnResize = throttle(() => {
|
||||
const newHeight = resizeRef.current?.container?.state?.height;
|
||||
console.log('newHeight', newHeight);
|
||||
setHeight(newHeight - 43); // 43 is the height of the tabs header
|
||||
}, 200);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentActive) {
|
||||
setActiveKey(currentActive);
|
||||
}
|
||||
}, [currentActive]);
|
||||
|
||||
return (
|
||||
<ResizeContainer onReSize={handleOnResize} ref={resizeRef}>
|
||||
<TabsContainer>
|
||||
<Tabs
|
||||
type="editable-card"
|
||||
hideAdd
|
||||
activeKey={activeKey}
|
||||
onChange={setActiveKey}
|
||||
tabBarStyle={{ marginBottom: 0 }}
|
||||
items={items}
|
||||
tabBarExtraContent={{
|
||||
right: (
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
type="text"
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
onClick={onClose}
|
||||
></Button>
|
||||
)
|
||||
}}
|
||||
></Tabs>
|
||||
</TabsContainer>
|
||||
</ResizeContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TerminalTabs;
|
||||
@@ -1,4 +0,0 @@
|
||||
export interface TerminalProps {
|
||||
url: string;
|
||||
name: string;
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { EditorWrap } from '@gpustack/core-ui';
|
||||
import Editor, { loader } from '@monaco-editor/react';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import { yamlDefaults } from 'monaco-yaml';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef
|
||||
} from 'react';
|
||||
|
||||
loader.config({
|
||||
monaco
|
||||
});
|
||||
|
||||
interface ViewerProps {
|
||||
ref?: any;
|
||||
defaultLang?: string;
|
||||
config?: any;
|
||||
value: string;
|
||||
height?: string | number;
|
||||
theme?: string;
|
||||
header?: React.ReactNode;
|
||||
placeholder?: string;
|
||||
variant?: 'bordered' | 'borderless';
|
||||
schema?: any;
|
||||
}
|
||||
|
||||
const path = 'inmemory://model/config.yaml';
|
||||
|
||||
const EditorInner: React.FC<ViewerProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
value,
|
||||
height = 380,
|
||||
theme = 'vs-dark',
|
||||
header,
|
||||
variant = 'borderless',
|
||||
schema,
|
||||
placeholder
|
||||
} = props;
|
||||
|
||||
const editorRef = useRef<any>(null);
|
||||
const monacoRef = useRef<any>(null);
|
||||
const monacoYamlRef = useRef<any>(null);
|
||||
|
||||
const handleBeforeMount = (monaco: any) => {
|
||||
const yamlUri = monaco.Uri.parse(path);
|
||||
|
||||
yamlDefaults.setDiagnosticsOptions({
|
||||
validate: false,
|
||||
enableSchemaRequest: true,
|
||||
hover: false,
|
||||
schemas: [
|
||||
{
|
||||
uri: 'http://example.com/schema-name.json',
|
||||
fileMatch: [yamlUri.toString()],
|
||||
schema: schema
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditorDidMount = (editor: any, monaco: any) => {
|
||||
editorRef.current = editor;
|
||||
monacoRef.current = monaco;
|
||||
};
|
||||
|
||||
const formatCode = () => {
|
||||
if (editorRef.current) {
|
||||
setTimeout(() => {
|
||||
editorRef.current
|
||||
?.getAction?.('editor.action.formatDocument')
|
||||
?.run()
|
||||
.then(() => {
|
||||
console.log('format success');
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Currently, do not use this function, but keep it for future validation needs
|
||||
const getMarkers = () => {
|
||||
const uri = editorRef.current?.getModel()?.uri;
|
||||
const markers = monacoRef.current?.editor.getModelMarkers({
|
||||
resource: uri
|
||||
});
|
||||
return markers;
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
format: () => {
|
||||
formatCode();
|
||||
},
|
||||
getValue: () => {
|
||||
return editorRef.current?.getValue?.();
|
||||
},
|
||||
setValue: (val: string) => {
|
||||
editorRef.current?.setValue?.(val);
|
||||
},
|
||||
dispose: () => {
|
||||
editorRef.current?.dispose?.();
|
||||
monacoYamlRef.current?.dispose?.();
|
||||
},
|
||||
validate() {
|
||||
return getMarkers();
|
||||
},
|
||||
editor: editorRef.current
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
formatCode();
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<EditorWrap header={header} variant={variant}>
|
||||
<Editor
|
||||
path={path}
|
||||
defaultPath={path}
|
||||
height={height}
|
||||
theme={theme}
|
||||
className="monaco-editor"
|
||||
defaultLanguage={'yaml'}
|
||||
language={'yaml'}
|
||||
value={value}
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
quickSuggestions: true,
|
||||
suggestOnTriggerCharacters: true,
|
||||
fontSize: 14,
|
||||
scrollbar: {
|
||||
verticalScrollbarSize: 6,
|
||||
horizontalScrollbarSize: 6
|
||||
}
|
||||
}}
|
||||
loading={<LoadingOutlined style={{ fontSize: 24 }}></LoadingOutlined>}
|
||||
beforeMount={handleBeforeMount}
|
||||
onMount={handleEditorDidMount}
|
||||
/>
|
||||
</EditorWrap>
|
||||
);
|
||||
});
|
||||
|
||||
export default EditorInner;
|
||||
@@ -1,177 +0,0 @@
|
||||
import useUserSettings from '@/hooks/use-user-settings';
|
||||
import { ImportOutlined } from '@ant-design/icons';
|
||||
import { loader } from '@monaco-editor/react';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, message, Typography, Upload } from 'antd';
|
||||
import { RcFile } from 'antd/lib/upload';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef
|
||||
} from 'react';
|
||||
import styled from 'styled-components';
|
||||
import EditorInner from './editor';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
loader.config({ monaco });
|
||||
|
||||
const Container = styled.div`
|
||||
position: relative;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--ant-border-radius);
|
||||
overflow: hidden;
|
||||
.monaco-editor .scroll-decoration {
|
||||
box-shadow: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const ErrorText = styled(Text)`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 4px 6px;
|
||||
background-color: var(--ant-color-bg-elevated);
|
||||
border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding-inline: 10px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid var(--ant-color-border);
|
||||
background-color: var(--ant-color-fill-quaternary);
|
||||
`;
|
||||
|
||||
interface ViewerProps {
|
||||
ref?: any;
|
||||
title?: React.ReactNode;
|
||||
defaultLang?: string;
|
||||
config?: any;
|
||||
value: string;
|
||||
height?: string | number;
|
||||
placeholder?: string;
|
||||
variant?: 'bordered' | 'borderless';
|
||||
validateMessage?: React.ReactNode;
|
||||
schema?: any;
|
||||
onUpload?: (content: string) => void;
|
||||
}
|
||||
|
||||
const YamlEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
value,
|
||||
height = 380,
|
||||
variant = 'borderless',
|
||||
schema,
|
||||
placeholder,
|
||||
validateMessage,
|
||||
title,
|
||||
onUpload
|
||||
} = props;
|
||||
|
||||
const intl = useIntl();
|
||||
const { userSettings } = useUserSettings();
|
||||
|
||||
const editorRef = useRef<any>(null);
|
||||
|
||||
const setContent = (val: string) => {
|
||||
editorRef.current?.setValue?.(val);
|
||||
};
|
||||
|
||||
const beforeUpload = (file: RcFile) => {
|
||||
const isYaml =
|
||||
file.type === 'application/x-yaml' ||
|
||||
file.type === 'text/yaml' ||
|
||||
file.name.endsWith('.yaml') ||
|
||||
file.name.endsWith('.yml');
|
||||
if (!isYaml) {
|
||||
message.error('You can only upload YAML file!');
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result;
|
||||
if (typeof content === 'string') {
|
||||
onUpload?.(content);
|
||||
setContent(content);
|
||||
} else {
|
||||
message.error('Failed to read file content!');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
// Prevent upload
|
||||
return false;
|
||||
};
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<Header>
|
||||
<span className="title">{title || 'YAML'}</span>
|
||||
<Upload
|
||||
name="file"
|
||||
multiple={false}
|
||||
beforeUpload={beforeUpload}
|
||||
showUploadList={false}
|
||||
accept=".yaml,.yml,text/yaml,application/x-yaml"
|
||||
>
|
||||
<Button icon={<ImportOutlined />} type="text" size="small">
|
||||
{intl.formatMessage({ id: 'common.button.import' })}
|
||||
</Button>
|
||||
</Upload>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
format: () => {
|
||||
editorRef.current?.format();
|
||||
},
|
||||
getValue: () => {
|
||||
return editorRef.current?.getValue?.();
|
||||
},
|
||||
setValue: (val: string) => {
|
||||
editorRef.current?.setValue?.(val);
|
||||
},
|
||||
dispose: () => {
|
||||
editorRef.current?.dispose?.();
|
||||
},
|
||||
validate() {
|
||||
return editorRef.current?.validate();
|
||||
},
|
||||
editor: editorRef.current
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.format();
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
minHeight: height
|
||||
}}
|
||||
>
|
||||
<EditorInner
|
||||
ref={editorRef}
|
||||
header={renderHeader()}
|
||||
variant={variant}
|
||||
height={height}
|
||||
theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
schema={schema}
|
||||
/>
|
||||
{validateMessage && (
|
||||
<ErrorText type="danger">{validateMessage}</ErrorText>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
|
||||
export default YamlEditor;
|
||||
Reference in New Issue
Block a user