Skip to content

Commit

Permalink
fix(layout): demo拆解与规范 & 修复脚本在不同操作系统的正则匹配出错 (jdf2e#2016)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-huxiyang
Alex-huxiyang authored Mar 14, 2024
1 parent 4d61f5c commit 885ea21
Show file tree
Hide file tree
Showing 13 changed files with 447 additions and 1,108 deletions.
6 changes: 3 additions & 3 deletions scripts/doc-demo-extract-replace.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const extractH5Demos = (i) => {
__dirname,
`../src/packages/${args[i]}/demos/h5`
);
const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
const tsxRegex = /:::demo\r?\n\r?\n```tsx\r?\n([\s\S]*?)```\r?\n\r?\n:::/g;
let match;
if (!fs.existsSync(outputDirectory)) {
fs.mkdirSync(outputDirectory, { recursive: true });
Expand Down Expand Up @@ -49,7 +49,7 @@ const extractTaroDemos = (i) => {
__dirname,
`../src/packages/${args[i]}/demos/taro`
);
const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
const tsxRegex = /:::demo\r?\n\r?\n```tsx\r?\n([\s\S]*?)```\r?\n\r?\n:::/g;
let match;
if (!fs.existsSync(outputDirectory)) {
fs.mkdirSync(outputDirectory, { recursive: true });
Expand Down Expand Up @@ -88,7 +88,7 @@ const replaceAllDocs = (i) => {
filePaths.forEach((path, index) => {
let markdownContent = fs.readFileSync(path, "utf-8");

const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
const tsxRegex = /:::demo\r?\n\r?\n```tsx\r?\n([\s\S]*?)```\r?\n\r?\n:::/g;
const arr = markdownContent.match(tsxRegex);
for (let i = 0; i < arr.length; i++) {
markdownContent = markdownContent.replace(
Expand Down
139 changes: 7 additions & 132 deletions src/packages/layout/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import React from 'react'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Row, Col } from '@/packages/nutui.react.taro'
import '@/packages/layout/demo.scss'
import Header from '@/sites/components/header'

type TLayoutDemo = {
title1: string
title2: string
title3: string
}
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
import Demo3 from './demos/taro/demo3'

const LayoutDemo = () => {
const [translated] = useTranslate<TLayoutDemo>({
const [translated] = useTranslate({
'zh-CN': {
title1: '基础布局',
title2: '分栏间隔',
Expand Down Expand Up @@ -40,136 +36,15 @@ const LayoutDemo = () => {
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}>
<h2>{translated.title1}</h2>
<div className="box-item">
<Row>
<Col span="24">
<div className="layout-flex-content">span:24</div>
</Col>
</Row>
<Row>
<Col span="12">
<div className="layout-flex-content">span:12</div>
</Col>
<Col span="12">
<div className="layout-flex-content layout-flex-content-light">
span:12
</div>
</Col>
</Row>
<Row>
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
<Col span="8">
<div className="layout-flex-content layout-flex-content-light">
span:8
</div>
</Col>
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
</Row>
<Row>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
</Row>
<Demo1 />
</div>
<h2>{translated.title2}</h2>
<div className="box-item">
<Row gutter="10">
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
<Col span="8">
<div className="layout-flex-content layout-flex-content-light">
span:8
</div>
</Col>
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
</Row>
<Demo2 />
</div>
<h2>{translated.title3}</h2>
<div className="box-item">
<Row type="flex" wrap="nowrap">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="center">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="end">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="space-between">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="space-around">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Demo3 />
</div>
</div>
</>
Expand Down
140 changes: 7 additions & 133 deletions src/packages/layout/demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
import React from 'react'
import Row from '@/packages/row'
import Col from '@/packages/col'
import { useTranslate } from '../../sites/assets/locale'
import './demo.scss'

type TLayoutDemo = {
title1: string
title2: string
title3: string
}
import Demo1 from './demos/h5/demo1'
import Demo2 from './demos/h5/demo2'
import Demo3 from './demos/h5/demo3'

const LayoutDemo = () => {
const [translated] = useTranslate<TLayoutDemo>({
const [translated] = useTranslate({
'zh-CN': {
title1: '基础布局',
title2: '分栏间隔',
Expand All @@ -38,136 +33,15 @@ const LayoutDemo = () => {
<div className="demo full">
<h2>{translated.title1}</h2>
<div className="layout-box-item">
<Row>
<Col span="24">
<div className="layout-flex-content">span:24</div>
</Col>
</Row>
<Row>
<Col span="12">
<div className="layout-flex-content">span:12</div>
</Col>
<Col span="12">
<div className="layout-flex-content layout-flex-content-light">
span:12
</div>
</Col>
</Row>
<Row>
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
<Col span="8">
<div className="layout-flex-content layout-flex-content-light">
span:8
</div>
</Col>
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
</Row>
<Row>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
</Row>
<Demo1 />
</div>
<h2>{translated.title2}</h2>
<div className="layout-box-item">
<Row gutter="10">
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
<Col span="8">
<div className="layout-flex-content layout-flex-content-light">
span:8
</div>
</Col>
<Col span="8">
<div className="layout-flex-content">span:8</div>
</Col>
</Row>
<Demo2 />
</div>
<h2>{translated.title3}</h2>
<div className="layout-box-item">
<Row type="flex" wrap="nowrap">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="center">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="end">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="space-between">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Row type="flex" justify="space-around">
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
<Col span="6">
<div className="layout-flex-content layout-flex-content-light">
span:6
</div>
</Col>
<Col span="6">
<div className="layout-flex-content">span:6</div>
</Col>
</Row>
<Demo3 />
</div>
</div>
</>
Expand Down
Loading

0 comments on commit 885ea21

Please sign in to comment.