Skip to content

Commit

Permalink
refactor(progress):重构进度条(#826)
Browse files Browse the repository at this point in the history
  • Loading branch information
SunLxy committed May 20, 2022
1 parent d21ce40 commit aeeb02f
Show file tree
Hide file tree
Showing 6 changed files with 294 additions and 22 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"watch:uiw": "lerna exec --scope uiw -- tsbb watch",
"watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
"watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
"watch": "lerna exec --scope @uiw/react-loader -- tsbb watch",
"watch": "lerna exec --scope @uiw/react-progress -- tsbb watch",
"//-----------": "//-----------",
"build": "npm run b:uiw && npm run b:css && npm run b:css:dist",
"start": "lerna exec --scope website -- npm run start",
Expand Down
5 changes: 3 additions & 2 deletions packages/react-progress/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,11 @@
],
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
"react-dom": ">=18.0.0",
"styled-components": "~5.3.5"
},
"dependencies": {
"@uiw/react-icon": "^4.21.2",
"@uiw/utils": "^4.21.2"
}
}
}
30 changes: 22 additions & 8 deletions packages/react-progress/src/Circle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import React from 'react';
import { IconProps } from '@uiw/react-icon';
import { IProps, HTMLDivProps } from '@uiw/utils';
import { IconProgress } from './utils';
import './style/index.less';
import './style/circle.less';
// import './style/index.less';
// import './style/circle.less';
import { ProgressText, ProgressWarp, ProgressPath } from './style';

export type Status = 'success' | 'active' | 'exception';

Expand Down Expand Up @@ -75,24 +76,37 @@ export default class Circle<T> extends React.Component<ProgressCircleProps<T>> {
percentView = <IconProgress type="check" />;
}
progressInfo = (
<span className={`${prefixCls}-text`} style={{ fontSize: (width as number) * 0.16 + 6 }}>
<ProgressText
isCircle={true}
status={status}
className={`${prefixCls}-text`}
style={{ fontSize: (width as number) * 0.16 + 6 }}
>
{format ? format(percent as number) : percentView}
</span>
</ProgressText>
);
}
return (
<div className={cls} style={style} {...resetProps}>
<ProgressWarp className={cls} style={style} {...resetProps}>
<svg viewBox="0 0 100 100" width={`${width}`}>
<path ref={this.relativeStrokeWidth.bind(this, 'bg')} className={`${prefixCls}-trail`} fill="none" />
<path
<ProgressPath
status={status}
isTrail
ref={this.relativeStrokeWidth.bind(this, 'bg')}
className={`${prefixCls}-trail`}
fill="none"
/>
<ProgressPath
ref={this.relativeStrokeWidth.bind(this, 'track')}
strokeLinecap="round"
className={`${prefixCls}-stroke`}
isStroke
status={status}
fill="none"
/>
</svg>
{progressInfo}
</div>
</ProgressWarp>
);
}
}
Expand Down
26 changes: 15 additions & 11 deletions packages/react-progress/src/Line.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { IconProgress } from './utils';
import { ProgressCircleProps } from './Circle';
import './style/index.less';
import './style/line.less';

// import './style/index.less';
// import './style/line.less';
import { ProgressWarp, ProgressText, ProgressBar, ProgressInner, ProgressBg } from './style';
export interface ProgressLineProp<T> extends ProgressCircleProps<T> {}

export default class Line<T> extends React.Component<ProgressLineProp<T>> {
Expand Down Expand Up @@ -38,21 +38,25 @@ export default class Line<T> extends React.Component<ProgressLineProp<T>> {
} else if (progressStatus === 'success') {
percentView = <IconProgress type="circle-check" />;
}
progressInfo = <span className={`${prefixCls}-text`}>{format ? format(percent as number) : percentView}</span>;
progressInfo = (
<ProgressText status={status} className={`${prefixCls}-text`}>
{format ? format(percent as number) : percentView}
</ProgressText>
);
}
const percentStyle = {
width: `${percent}%`,
height: strokeWidth,
};
return (
<div className={cls} style={style} {...resetProps}>
<div className={`${prefixCls}-bar`}>
<div className={`${prefixCls}-inner`}>
<div className={`${prefixCls}-bg`} style={percentStyle} />
</div>
</div>
<ProgressWarp className={cls} style={style} {...resetProps} isLine={true}>
<ProgressBar showText={showText} className={`${prefixCls}-bar`}>
<ProgressInner className={`${prefixCls}-inner`}>
<ProgressBg status={status} className={`${prefixCls}-bg`} style={percentStyle} />
</ProgressInner>
</ProgressBar>
{progressInfo}
</div>
</ProgressWarp>
);
}
}
Expand Down
232 changes: 232 additions & 0 deletions packages/react-progress/src/style/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
import styled, { css, keyframes } from 'styled-components';
import { getThemeVariantValue, HTMLSpanProps, HTMLDivProps, ThemeVariantValueOptions } from '@uiw/utils';
import { Status } from '..';
import React from 'react';

export const progressDefaultTheme = {
fontSizeSmall: '12px',
fontSizeDefault: '14px',
fontSizeLarge: '16px',

strokeProgressPathSuccess: '#28a745',
strokeProgressPathException: '#dc3545',
strokeProgressPath: '#20a0ff',
strokeProgressPathTrail: '#e5e9f2',

colorProgresTextSuccess: '#28a745',
colorProgresTextException: '#dc3545',
colorProgresText: '#48576a',

backgroundColorProgressBgSuccess: '#28a745',
backgroundColorProgressBgException: '#dc3545',
backgroundColorProgressBg: '#108ee9',

backgroundColorProgressInner: '#e5e9f2',

backgroundProgressBgActiveBefore: '#fff',
backgroundImageProgressBgActive:
'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent)',
};

const progressBarStripes = keyframes`
from {
background-position: 0 0;
}
to {
background-position: 24px 0;
}
`;

const progressActive = keyframes`
0% {
opacity: 0.1;
width: 0;
}
20% {
opacity: 0.5;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
`;

export interface ProgressWarpProps extends HTMLDivProps, ThemeVariantValueOptions {
isLine?: Boolean;
}

export const ProgressWarp = styled.div<ProgressWarpProps>`
position: relative;
line-height: 1;
display: inline-block;
${(props) =>
props.isLine &&
css`
& {
width: 100%;
font-size: ${(props) => getThemeVariantValue(props, 'fontSizeSmall')};
}
`}
`;
ProgressWarp.defaultProps = { defaultTheme: progressDefaultTheme };

export interface ProgressTextProps extends HTMLSpanProps, ThemeVariantValueOptions {
status?: Status;
isCircle?: boolean;
}

export const ProgressText = styled.span<ProgressTextProps>`
color: ${(props) => getThemeVariantValue(props, 'colorProgresText')};
display: inline-block;
vertical-align: middle;
margin-left: 10px;
line-height: 1;
box-sizing: border-box;
${(props) =>
props.status === 'exception' &&
css`
color: ${(props) => getThemeVariantValue(props, 'colorProgresTextException')};
`}
${(props) =>
props.status === 'success' &&
css`
color: ${(props) => getThemeVariantValue(props, 'colorProgresTextSuccess')};
`}
${(props) =>
props.isCircle &&
css`
& {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
margin: 0;
transform: translate(0, -50%);
font-size: ${(props) => getThemeVariantValue(props, 'fontSizeLarge')};
}
`}
`;

ProgressText.defaultProps = { defaultTheme: progressDefaultTheme };

export interface ProgressBarProps extends HTMLDivProps, ThemeVariantValueOptions {
showText?: boolean;
style?: React.CSSProperties;
}

export const ProgressBar = styled.div<ProgressBarProps>`
box-sizing: border-box;
display: inline-block;
width: 100%;
vertical-align: middle;
${(props) =>
props.showText &&
css`
& {
margin-right: -50px;
padding-right: 50px;
}
`}
`;
export interface ProgressInnerProps extends HTMLDivProps, ThemeVariantValueOptions {}

export const ProgressInner = styled.div<ProgressInnerProps>`
height: 100%;
width: 100%;
border-radius: 100px;
background-color: ${(props) => getThemeVariantValue(props, 'backgroundColorProgressInner')};
overflow: hidden;
`;
ProgressInner.defaultProps = { defaultTheme: progressDefaultTheme };

export interface ProgressBgProps extends HTMLDivProps, ThemeVariantValueOptions {
status?: Status;
}

export const ProgressBg = styled.div<ProgressBgProps>`
height: 100%;
border-radius: 100px;
background-color: ${(props) => getThemeVariantValue(props, 'backgroundColorProgressBg')};
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
position: relative;
${(props) =>
props.status === 'active' &&
css`
& {
background-image: ${(props) => getThemeVariantValue(props, 'backgroundImageProgressBgActive')};
background-size: 12px 12px;
animation: ${progressBarStripes} 1s linear infinite;
&:before {
content: ' ';
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: ${(props) => getThemeVariantValue(props, 'backgroundProgressBgActiveBefore')};
border-radius: 10px;
animation: ${progressActive} 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
}
`}
${(props) =>
props.status === 'exception' &&
css`
& {
background-color: ${(props) => getThemeVariantValue(props, 'backgroundColorProgressBgException')};
}
`}
${(props) =>
props.status === 'success' &&
css`
background-color: ${(props) => getThemeVariantValue(props, 'backgroundColorProgressBgSuccess')};
`}
`;
ProgressBg.defaultProps = { defaultTheme: progressDefaultTheme };

export interface ProgressSvgProps extends React.SVGProps<SVGSVGElement>, ThemeVariantValueOptions {}
export const ProgressSvg = styled.svg<ProgressSvgProps>``;

export interface ProgressPathProps extends React.SVGProps<SVGPathElement>, ThemeVariantValueOptions {
isTrail?: boolean;
isStroke?: boolean;
status?: Status;
}
export const ProgressPath = styled.path<ProgressPathProps>`
${(props) =>
props.isTrail &&
css`
& {
stroke: ${(props) => getThemeVariantValue(props, 'strokeprogresspathtrail')};
}
`}
${(props) => {
if (props.isStroke) {
switch (props.status) {
case 'success':
return css`
& {
stroke: ${(props) => getThemeVariantValue(props, 'strokeProgressPathSuccess')};
}
`;
case 'exception':
return css`
& {
stroke: ${(props) => getThemeVariantValue(props, 'strokeProgressPathException')};
}
`;
default:
return css`
& {
stroke: ${(props) => getThemeVariantValue(props, 'strokeProgressPath')};
}
`;
}
}
return css``;
}}
`;
ProgressPath.defaultProps = { defaultTheme: progressDefaultTheme };
21 changes: 21 additions & 0 deletions theme/themeVariant.json5
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,27 @@
colorDescriptionsHead: 'rgba(0, 0, 0, 0.85)',
colorDescriptionsConent: 'rgba(0, 0, 0, 0.65)',
colorDescriptionsColon: 'rgba(0, 0, 0, 0.95)',

// -----------------------------Progress 进度条 -------------------------------

strokeProgressPathSuccess: '#28a745',
strokeProgressPathException: '#dc3545',
strokeProgressPath: '#20a0ff',
strokeProgressPathTrail: '#e5e9f2',

colorProgresTextSuccess: '#28a745',
colorProgresTextException: '#dc3545',
colorProgresText: '#48576a',

backgroundColorProgressBgSuccess: '#28a745',
backgroundColorProgressBgException: '#dc3545',
backgroundColorProgressBg: '#108ee9',

backgroundColorProgressInner: '#e5e9f2',

backgroundProgressBgActiveBefore: '#fff',
backgroundImageProgressBgActive: 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.15) 50%,rgba(255, 255, 255, 0.15) 75%,transparent 75%,transparent)',

// ---------------------------card 卡片 ----------------------------------------
borderColorBaseActive: '#CCCCCC',
borderColorBase: '#e9e9e9',
Expand Down

0 comments on commit aeeb02f

Please sign in to comment.