mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-28 23:50:58 +08:00
d4a1e02430
* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { LivePreview, LiveProvider, LiveError } from 'react-live'
|
|
import { useTheme } from 'components'
|
|
import makeCodeTheme from './code-theme'
|
|
import Editor from './editor'
|
|
|
|
export interface Props {
|
|
code: string
|
|
scope: {
|
|
[key: string]: any
|
|
}
|
|
}
|
|
|
|
const DynamicLive: React.FC<Props> = ({ code, scope }) => {
|
|
const theme = useTheme()
|
|
const codeTheme = makeCodeTheme(theme)
|
|
return (
|
|
<LiveProvider code={code} scope={scope} theme={codeTheme}>
|
|
<div className="wrapper">
|
|
<LivePreview />
|
|
<LiveError className="live-error" />
|
|
</div>
|
|
<Editor code={code} />
|
|
<style jsx>{`
|
|
.wrapper {
|
|
width: 100%;
|
|
padding: ${theme.layout.pageMargin};
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
.wrapper > :global(div) {
|
|
width: 100%;
|
|
}
|
|
.wrapper > :global(.live-error) {
|
|
padding: 10px 12px 0 12px;
|
|
margin-bottom: 0;
|
|
border: 2px ${theme.palette.error} dotted;
|
|
border-radius: 10px;
|
|
color: ${theme.palette.errorLight};
|
|
font-size: 13px;
|
|
}
|
|
`}</style>
|
|
</LiveProvider>
|
|
)
|
|
}
|
|
|
|
export default DynamicLive
|