Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(pull-down-refresh): update docs and demo #318

Merged
merged 3 commits into from
Nov 10, 2022
Merged

docs(pull-down-refresh): update docs and demo #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6abe366
docs(pull-down-refresh): update docs and demo
yuanmeda Nov 8, 2022
4e097ce
fix(pull-down-refresh): fix cr修复borderRadius不生效的问题
yuanmeda Nov 8, 2022
72cd93e
fix(pull-down-refresh): fix cr
yuanmeda Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 4 additions & 39 deletions src/pull-down-refresh/_example/base.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,15 @@
import React from 'react';
import { PullDownRefresh, Skeleton } from 'tdesign-mobile-react';
import './style/index.less';
import { PullDownRefresh } from 'tdesign-mobile-react';

export default function Demo() {
const rowCols = [
{
height: '171px',
borderRadius: '8px',
},
[
{
width: '50%',
type: 'circle',
},
{
width: '50%',
type: 'circle',
},
],
[
{
width: '30%',
type: 'circle',
},
{
width: '30%',
type: 'circle',
},
],
];
export default function BaseDemo({ children }) {
return (
<div className="tdesign-mobile-wrapper">
<div style={{ display: 'flex' }}>
<div className="tdesign-mobile-item">
<Skeleton theme="text" rowCol={rowCols} />
</div>
<div className="tdesign-mobile-item">
<Skeleton theme="text" rowCol={rowCols} />
</div>
</div>

<PullDownRefresh
loadingBarHeight={80}
loadingProps={{
layout: 'vertical',
}}
loadingTexts={['下拉刷新', '松开刷新', '正在刷新', '刷新完成']}
onRefresh={() =>
new Promise((resolve) => {
setTimeout(() => {
Expand All @@ -53,7 +18,7 @@ export default function Demo() {
})
}
>
<div className="tdesign-mobile-block">拖拽该区域演示 中间下拉刷新</div>
{children}
</PullDownRefresh>
</div>
);
Expand Down
42 changes: 31 additions & 11 deletions src/pull-down-refresh/_example/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,42 @@
import React from 'react';
import { Skeleton } from 'tdesign-mobile-react';
import BaseDemo from './base';
import TopDemo from './top';
import TDemoBlock from '../../../site/mobile/components/DemoBlock';
import TDemoHeader from '../../../site/mobile/components/DemoHeader';
import './style/index.less';

export default function Demo() {
const rowCols = [
1,
{
width: '100px',
},
{
width: '165.5px',
height: '165.5px',
borderRadius: '12px',
},
];
return (
<div className="tdesign-mobile-demo">
<TDemoHeader
title="PullDownRefresh 下拉刷新"
summary="用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。"
/>
<TDemoBlock title="01 类型" summary="下拉刷新大致分为顶部下拉和中间下拉">
<BaseDemo />
</TDemoBlock>
<TDemoBlock summary="顶部下拉刷新">
<TopDemo />
</TDemoBlock>
<BaseDemo>
<>
<TDemoHeader
title="PullDownRefresh 下拉刷新"
summary="用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。"
/>
<TDemoBlock>
<div className="tdesign-mobile-block">拖拽该区域演示 顶部下拉刷新</div>
yuanmeda marked this conversation as resolved.
Show resolved Hide resolved
<div style={{ display: 'flex', padding: '0 16px 140px 16px' }}>
{Array.from(Array(2), (_, key) => (
<div className="tdesign-mobile-item" key={key}>
<Skeleton theme="text" rowCol={rowCols} />
</div>
))}
</div>
</TDemoBlock>
</>
</BaseDemo>
</div>
);
}
12 changes: 4 additions & 8 deletions src/pull-down-refresh/_example/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,24 @@
.tdesign-mobile-demo {
background: #fff;

.tdesign-mobile-wrapper {
padding: 0 12px;
}

.tdesign-mobile-block {
box-sizing: border-box;
background-color: #eee;
border-radius: 8px;
width: 100%;
background-color: rgba(243, 243, 243, 1);;
border-radius: 12px;
height: 171px;
font-size: 16px;
color: rgba(0, 0, 0, 0.26);
line-height: 171px;
text-align: center;
margin-bottom: 12px;
margin: 16px;
}

.tdesign-mobile-item {
width: 48%;

&:last-child {
margin-left: 4%;
margin-bottom: 16px;
}
}
}
1 change: 1 addition & 0 deletions src/skeleton/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
'size',
'background',
'backgroundColor',
'borderRadius',
];

return styleName.reduce((style, currentStyle) => {
Expand Down