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

docs: add example for custom colors (#329)

Browse Source
This commit is contained in:
witt
2020-07-14 12:23:07 +08:00
committed by GitHub
parent b4bcc5b4fc
commit 9c0720bc87
4 changed files with 68 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/components/playground/playground.tsx
View File

@@ -16,7 +16,7 @@ const DynamicLive = dynamic(() => import('./dynamic-live'), {
interface Props {
title?: React.ReactNode | string
desc?: string
desc?: React.ReactNode | string
code: string
scope: {
[key: string]: any

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

@@ -4,7 +4,7 @@ import withDefaults from 'components/utils/with-defaults'
interface Props {
title: React.ReactNode | string
desc?: string
desc?: React.ReactNode | string
}
const defaultProps = {
@@ -13,7 +13,7 @@ const defaultProps = {
export type TitleProps = Props & typeof defaultProps
const replaceCode = (desc: string) => {
const replaceCode = (desc: string): string => {
if (!desc.includes('`')) return desc
let count = 0
return desc.replace(/`/g, () => {
@@ -24,13 +24,14 @@ const replaceCode = (desc: string) => {
}
const Title: React.FC<TitleProps> = React.memo(({ title, desc }) => {
const isStringDesc = typeof desc === 'string'
return (
<>
<h3>
<VirtualAnchor>{title}</VirtualAnchor>
</h3>
{desc && <p dangerouslySetInnerHTML={{ __html: replaceCode(desc) }} />}
{desc && isStringDesc && <p dangerouslySetInnerHTML={{ __html: replaceCode(desc) }} />}
{desc && !isStringDesc && <p>{desc}</p>}
<style jsx>{`
h3 {
margin-bottom: ${desc ? 0 : '30px'};