kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 12:45:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(snippet): add component

Browse Source
This commit is contained in:
unix
2020-04-03 06:35:35 +08:00
parent 101a4c8395
commit 1120d9dd92
12 changed files with 380 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/components/playground/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { MouseEvent, useState } from 'react'
import { LivePreview, LiveProvider, LiveEditor, LiveError } from 'react-live'
import { useClipboard } from 'use-clipboard-copy'
import withDefaults from 'components/utils/with-defaults'
import useClipboard from 'components/utils/use-clipboard'
import { useTheme, useToasts } from 'components'
import makeCodeTheme from './code-theme'
import RightIcon from 'lib/components/icons/right'
@@ -26,10 +26,10 @@ const defaultProps = {
export type PlaygroundProps = Props & typeof defaultProps
const editor = (code: string) => {
const editor = (code: string, copy: Function) => {
const theme = useTheme()
const [visible, setVisible] = useState(false)
const { copy } = useClipboard()
const [, setToast] = useToasts()
const clickHandler = (event: MouseEvent<HTMLDetailsElement>) => {
event.stopPropagation()
@@ -118,6 +118,7 @@ const editor = (code: string) => {
const Playground: React.FC<PlaygroundProps> = React.memo(props => {
const theme = useTheme()
const codeTheme = makeCodeTheme(theme)
const { copy } = useClipboard()
const code = props.code.trim()
return (
@@ -129,7 +130,7 @@ const Playground: React.FC<PlaygroundProps> = React.memo(props => {
<LivePreview />
<LiveError />
</div>
{editor(code)}
{editor(code, copy)}
</LiveProvider>
<style jsx>{`