75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import CopyButton from '../copy-button';
|
|
import SegmentLine from '../segment-line';
|
|
import './index.less';
|
|
|
|
const Wrapper = styled.div<{ $height: number }>`
|
|
height: ${(props) => props.$height}px;
|
|
`;
|
|
|
|
interface EditorwrapProps {
|
|
headerHeight?: number;
|
|
header?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
showHeader?: boolean;
|
|
copyText: string;
|
|
defaultValue?: string;
|
|
langOptions?: Global.BaseOption<string | number>[];
|
|
styles?: {
|
|
wrapper?: React.CSSProperties;
|
|
header?: React.CSSProperties;
|
|
content?: React.CSSProperties;
|
|
};
|
|
onChangeLang?: (value: string | number) => void;
|
|
}
|
|
const EditorWrap: React.FC<EditorwrapProps> = ({
|
|
headerHeight = 40,
|
|
header,
|
|
children,
|
|
copyText,
|
|
langOptions = [],
|
|
onChangeLang,
|
|
defaultValue,
|
|
styles = {},
|
|
showHeader = true
|
|
}) => {
|
|
const handleChangeLang = (value: string | number) => {
|
|
onChangeLang?.(value);
|
|
};
|
|
const renderHeader = () => {
|
|
if (header) {
|
|
return <div className="editor-header">{header}</div>;
|
|
}
|
|
if (showHeader) {
|
|
return (
|
|
<Wrapper className="editor-header" $height={headerHeight}>
|
|
<SegmentLine
|
|
height={headerHeight}
|
|
defaultValue={defaultValue}
|
|
size="small"
|
|
options={langOptions}
|
|
onChange={handleChangeLang}
|
|
></SegmentLine>
|
|
<CopyButton
|
|
text={copyText}
|
|
size="small"
|
|
style={{
|
|
color: 'rgba(255,255,255,.7)'
|
|
}}
|
|
/>
|
|
</Wrapper>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
return (
|
|
<div className="editor-wrap" style={{ ...styles.wrapper }}>
|
|
{renderHeader()}
|
|
<div className="editor-content">{children}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(EditorWrap);
|