Skip to content

Commit

Permalink
feat(ui): add grid component
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiejay97
xiejay97 committed Dec 6, 2021
1 parent 511d8f5 commit fa1f5bc
Show file tree
Hide file tree
Showing 21 changed files with 832 additions and 165 deletions.
12 changes: 1 addition & 11 deletions packages/site/src/app/components/header/Header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
}

.app-header__logo-container {
display: none;
display: inline-flex;
align-items: center;
margin-right: auto;
}
Expand Down Expand Up @@ -113,14 +113,4 @@
background-repeat: no-repeat;
background-size: 100% 100%;
}

@media (min-width: 768px) {
.app-header__menu-button {
display: none;
}

.app-header__logo-container {
display: inline-flex;
}
}
}
40 changes: 24 additions & 16 deletions packages/site/src/app/components/header/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';

import { DButton } from '@react-devui/ui';
import { DButton, DRow } from '@react-devui/ui';
import { useCustomContext } from '@react-devui/ui/hooks';
import { getClassName } from '@react-devui/ui/utils';

Expand All @@ -25,21 +25,29 @@ export function AppHeader() {

return (
<header className="app-header is-shadow">
<DButton className="app-header__menu-button" dType="text" onClick={() => onMenuOpenChange?.(!menuOpen)}>
<div
className={getClassName('hamburger', {
'is-active': menuOpen,
})}
>
<span className="line"></span>
<span className="line"></span>
<span className="line"></span>
</div>
</DButton>
<div className="app-header__logo-container">
<img className="app-header__logo" src="/assets/logo.svg" alt="Logo" width="36" height="36" />
<span className="app-header__title">DevUI</span>
</div>
<DRow
dAsListener
dRender={(match, matchs) =>
matchs.includes('md') ? (
<div className="app-header__logo-container">
<img className="app-header__logo" src="/assets/logo.svg" alt="Logo" width="36" height="36" />
<span className="app-header__title">DevUI</span>
</div>
) : (
<DButton className="app-header__menu-button" dType="text" onClick={() => onMenuOpenChange?.(!menuOpen)}>
<div
className={getClassName('hamburger', {
'is-active': menuOpen,
})}
>
<span className="line"></span>
<span className="line"></span>
<span className="line"></span>
</div>
</DButton>
)
}
></DRow>

<DButton className="app-header__language" dType="secondary" onClick={changeLanguage}>
{i18n.language === 'en-US' ? '中 文' : 'English'}
Expand Down
20 changes: 10 additions & 10 deletions packages/site/src/app/components/route/DemoBox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,20 @@
position: relative;

border-top: 1px solid var(--d-divider-color);
}

.app-demo-box__title {
position: absolute;
top: -14px;
left: 16px;
.app-demo-box__title {
position: absolute;
top: -14px;
left: 16px;

padding: 1px 8px;
padding: 1px 8px;

background-color: var(--d-background-color);
}
background-color: var(--d-background-color);
}

.app-demo-box__description {
padding: 24px;
}
.app-demo-box__description {
padding: 24px;
}

.app-demo-box__toolbar {
Expand Down
31 changes: 9 additions & 22 deletions packages/site/src/app/components/route/RouteArticle.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
@import '~rfs/scss';

.app-route-anchor-md {
.app-route__anchor {
position: fixed;
top: 120px;
right: 20px;
z-index: 910;

display: none;

width: 168px;

.d-anchor-link > a {
padding: 4px 0;
}

@media (min-width: 768px) {
display: block;
}
}

.app-route-anchor-conatiner {
.app-route__anchor-conatiner {
position: fixed;
right: 0;
bottom: 0;
Expand All @@ -31,10 +25,6 @@
overflow: auto;

background-color: var(--d-background-color);

@media (min-width: 768px) {
display: none;
}
}

.app-route__anchor-button {
Expand All @@ -50,17 +40,14 @@
justify-content: center;
width: 60px;
height: 60px;
border: 1px solid var(--d-divider-color);
border-radius: 50%;

color: var(--d-color-primary-lighter);

background-color: var(--d-color-step-800);
box-shadow: 0 2px 20px 2px var(--d-shadow-color);

@media (min-width: 768px) {
display: none;
}
appearance: none;
}

.app-route-article {
Expand All @@ -76,12 +63,6 @@
background-color: var(--app-code-background-color);
}

.app-route-article__demos {
pre code.hljs {
background-color: transparent;
}
}

code:not(pre > code) {
margin: 0 1px;
padding: 4px 6px;
Expand Down Expand Up @@ -191,6 +172,12 @@
margin-left: 12px;
}

.app-route-article__demos {
pre code.hljs {
background-color: transparent;
}
}

.app-route-article__api {
.app-table-container {
width: 100%;
Expand Down
124 changes: 68 additions & 56 deletions packages/site/src/app/components/route/RouteArticle.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useTranslation } from 'react-i18next';

import { DTooltip, DIcon, DAnchor, DAnchorLink } from '@react-devui/ui';
import { DTooltip, DIcon, DAnchor, DAnchorLink, DRow } from '@react-devui/ui';
import { DTransition } from '@react-devui/ui/components/_transition';
import { useImmer, useRefCallback } from '@react-devui/ui/hooks';

Expand Down Expand Up @@ -54,67 +54,79 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
);

return (
<>
<DAnchor className="app-route-anchor-md" dPage=".app-main">
{links &&
links.map((link) => (
<DAnchorLink key={link.href} href={link.href} title={link.title}>
{link.title}
</DAnchorLink>
))}
<DAnchorLink href="#API">API</DAnchorLink>
</DAnchor>
<DTransition
dEl={el}
dVisible={menuOpen}
dStateList={{
'enter-from': { opacity: '0', transform: 'translateY(120px)' },
'enter-to': { transition: 'opacity 0.2s linear, transform 0.2s ease-out' },
'leave-to': { opacity: '0', transform: 'translateY(120px)', transition: 'opacity 0.2s linear, transform 0.2s ease-out' },
}}
dRender={(hidden) => (
<div ref={ref} className="app-route-anchor-conatiner" style={{ visibility: hidden ? 'hidden' : undefined }}>
<DAnchor dPage=".app-main" dIndicator="line">
<DRow
dAsListener
dRender={(match, matchs) => (
<>
{matchs.includes('md') && (
<DAnchor className="app-route__anchor" dPage=".app-main">
{links &&
links.map((link) => (
<DAnchorLink key={link.href} href={link.href} title={link.title} onClick={() => setMenuOpen(false)}>
<DAnchorLink key={link.href} href={link.href} title={link.title}>
{link.title}
</DAnchorLink>
))}
<DAnchorLink href="#API" onClick={() => setMenuOpen(false)}>
API
</DAnchorLink>
<DAnchorLink href="#API">API</DAnchorLink>
</DAnchor>
</div>
)}
></DTransition>
)}
{!matchs.includes('md') && (
<>
<DTransition
dEl={el}
dVisible={menuOpen}
dStateList={{
'enter-from': { opacity: '0', transform: 'translateY(120px)' },
'enter-to': { transition: 'opacity 0.2s linear, transform 0.2s ease-out' },
'leave-to': { opacity: '0', transform: 'translateY(120px)', transition: 'opacity 0.2s linear, transform 0.2s ease-out' },
}}
dRender={(hidden) => (
<div ref={ref} className="app-route__anchor-conatiner" style={{ visibility: hidden ? 'hidden' : undefined }}>
<DAnchor dPage=".app-main" dIndicator="line">
{links &&
links.map((link) => (
<DAnchorLink key={link.href} href={link.href} title={link.title} onClick={() => setMenuOpen(false)}>
{link.title}
</DAnchorLink>
))}
<DAnchorLink href="#API" onClick={() => setMenuOpen(false)}>
API
</DAnchorLink>
</DAnchor>
</div>
)}
></DTransition>

<div className="app-route__anchor-button" role="button" tabIndex={0} onClick={() => setMenuOpen(!menuOpen)}>
{icon(true)}
{icon(false)}
</div>
<article className="app-route-article">
<h1 id="title">
{title}
{i18n.language !== 'en-US' && <span className="app-route-article__subtitle">{subtitle}</span>}
<DTooltip dTitle={t('Edit this page on GitHub')}>
<DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={20}>
<path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
</DIcon>
</DTooltip>
</h1>
<section className="app-route-article__description" dangerouslySetInnerHTML={{ __html: description }} />
<h2 id="Examples">
{t('Examples')}
<DTooltip dTitle={t('Expand all code')}>
<DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={24}>
<path d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 00308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 00-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path>
</DIcon>
</DTooltip>
</h2>
<section className="app-route-article__demos">{demos}</section>
<section className="app-route-article__api" dangerouslySetInnerHTML={{ __html: api }} />
</article>
</>
<div className="app-route__anchor-button" role="button" tabIndex={0} onClick={() => setMenuOpen(!menuOpen)}>
{icon(true)}
{icon(false)}
</div>
</>
)}

<article className="app-route-article">
<h1 id="title">
{title}
{i18n.language !== 'en-US' && <span className="app-route-article__subtitle">{subtitle}</span>}
<DTooltip dTitle={t('Edit this page on GitHub')}>
<DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={20}>
<path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
</DIcon>
</DTooltip>
</h1>
<section className="app-route-article__description" dangerouslySetInnerHTML={{ __html: description }} />
<h2 id="Examples">
{t('Examples')}
<DTooltip dTitle={t('Expand all code')}>
<DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={24}>
<path d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 00308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 00-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path>
</DIcon>
</DTooltip>
</h2>
<section className="app-route-article__demos">{demos}</section>
<section className="app-route-article__api" dangerouslySetInnerHTML={{ __html: api }} />
</article>
</>
)}
></DRow>
);
}
5 changes: 0 additions & 5 deletions packages/site/src/app/components/sidebar/Sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
bottom: 0;
left: 0;

display: none;
width: 260px;
height: calc(100% - 64px);
padding: 20px 0;
Expand All @@ -23,10 +22,6 @@

content: '';
}

@media (min-width: 768px) {
display: block;
}
}

.app-sidebar__drawer {
Expand Down
Loading

0 comments on commit fa1f5bc

Please sign in to comment.