diff --git a/docuilib/package.json b/docuilib/package.json index ccfb3f0e02..10b1f5e7ad 100644 --- a/docuilib/package.json +++ b/docuilib/package.json @@ -1,6 +1,6 @@ { "name": "uilib-docs", - "version": "3.27.0", + "version": "3.28.0", "main": "./src/index.ts", "scripts": { "docusaurus": "docusaurus", diff --git a/docuilib/src/components/UILivePreview.module.scss b/docuilib/src/components/UILivePreview.module.scss index 23ff011d46..f1577e7dbd 100644 --- a/docuilib/src/components/UILivePreview.module.scss +++ b/docuilib/src/components/UILivePreview.module.scss @@ -4,16 +4,16 @@ $editor-height: 700px; .container { display: flex; - background-color: #1D1E21; + background-color: #1d1e21; border-radius: 8px; - padding: 50px + padding: 50px; } .liveEditor { height: $editor-height; span { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; font-weight: 600; line-height: 24px; @@ -32,11 +32,21 @@ $editor-height: 700px; pre { min-height: 100%; padding: 20px !important; - background-color: #1D1E21 !important; - border-right: 1px solid #D2D6D8; + background-color: #1d1e21 !important; + border-right: 1px solid #d2d6d8; } } +.codeHeader { + position: sticky; + top: 5px; + right: 16px; + z-index: 1; + margin-right: 24px; + display: flex; + justify-content: flex-end; +} + .errorContainer { position: absolute; bottom: 0; @@ -44,7 +54,7 @@ $editor-height: 700px; right: 0; pre { - background-color: rgba(255, 255, 255, 0.80) !important; + background-color: rgba(255, 255, 255, 0.8) !important; margin: 10px; } } @@ -54,7 +64,7 @@ $editor-height: 700px; width: $preview-width; margin-left: $preview-margin; border-radius: 36px; - border: 10px solid rgba(255, 255, 255, 0.20); + border: 10px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(110, 120, 129, 0.05); overflow: hidden; } @@ -68,4 +78,4 @@ $editor-height: 700px; border: 0; padding: 10; background-color: #fff; -} \ No newline at end of file +} diff --git a/docuilib/src/components/UILivePreview.tsx b/docuilib/src/components/UILivePreview.tsx index 9d9736a5f9..e4022efa38 100644 --- a/docuilib/src/components/UILivePreview.tsx +++ b/docuilib/src/components/UILivePreview.tsx @@ -4,6 +4,7 @@ import {themes} from 'prism-react-renderer'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import BrowserOnly from '@docusaurus/BrowserOnly'; import CodeBlock from '@theme/CodeBlock'; +import Button from 'react-native-ui-lib/Button'; import ReactLiveScope from '../theme/ReactLiveScope'; import {isComponentSupported} from '../utils/componentUtils'; import useFormattedCode from '../hooks/useFormattedCode'; @@ -15,12 +16,8 @@ export default function UILivePreview({code: initialCode, componentName = undefi const [iframeLoaded, setIframeLoaded] = useState(false); const {siteConfig} = useDocusaurusContext(); const iframeRef = useRef(null); - const {code: formattedCode} = useFormattedCode(initialCode, {printWidth: 100}); - const [code, setCode] = useState(formattedCode); - - useEffect(() => { - setCode(formattedCode); - }, [formattedCode]); + const [code, setCode] = useState(initialCode); + const {code: formattedCode} = useFormattedCode(code, {printWidth: 100}); useEffect(() => { if (iframeLoaded) { @@ -33,6 +30,10 @@ export default function UILivePreview({code: initialCode, componentName = undefi iframeRef.current?.contentWindow.postMessage(message, '*'); }; + const handleFormat = () => { + setCode(formattedCode); + }; + if (!liveScopeSupport && !isComponentSupported(componentName)) { return {code}; } @@ -46,6 +47,15 @@ export default function UILivePreview({code: initialCode, componentName = undefi
+
+