Skip to content

Add a more eye-catching indicator #117

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add a more eye-catching indicator #117

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a24f5c
Add a more eye-catching indicator
lingengyan Jun 3, 2021
342a009
update DotType
lingengyan Jun 3, 2021
cd551c0
update test cases of dot and snap of jest
lingengyan Jun 4, 2021
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
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,12 @@ export default () => (
<td>top</td>
<td>the gap position, value: top, bottom, left, right. </td>
</tr>
<tr>
<td>dot</td>
<td>Boolean | Object</td>
<td>false</td>
<td>within dot or not, value: true, false, { size: Number }</td>
</tr>
</tbody>
</table>

Expand Down
5 changes: 5 additions & 0 deletions docs/examples/gap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ class Example extends React.Component<ProgressProps, any> {
const circleContainerStyle = {
width: '200px',
height: '200px',
marginBottom: '60px'
};
const { percent, colorIndex } = this.state;
const color = getColor(colorIndex);
Expand All @@ -48,6 +49,7 @@ class Example extends React.Component<ProgressProps, any> {
strokeWidth={6}
strokeLinecap="square"
strokeColor={color}
dot={{ size: 10 }}
/>
</div>
<div style={circleContainerStyle}>
Expand All @@ -59,6 +61,7 @@ class Example extends React.Component<ProgressProps, any> {
trailWidth={6}
strokeLinecap="round"
strokeColor={[color, getColor(colorIndex + 1), getColor(colorIndex + 2)]}
dot={true}
/>
</div>

Expand All @@ -70,6 +73,7 @@ class Example extends React.Component<ProgressProps, any> {
strokeWidth={6}
strokeLinecap="square"
strokeColor={color}
dot={{ size: 'p' }}
/>
</div>
<div style={circleContainerStyle}>
Expand All @@ -80,6 +84,7 @@ class Example extends React.Component<ProgressProps, any> {
strokeWidth={6}
strokeLinecap="square"
strokeColor={color}
dot={{ size: [] }}
Copy link
Member

@yoyo837 yoyo837 Jun 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lint 应该会报错吧？

Copy link
Author

@lingengyan lingengyan Jun 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

没有哦，lint不通过好像都没法提交commit，lint只有两个warning在我没改过的代码那边

Copy link
Author

@lingengyan lingengyan Jun 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PS C:\Users\xxx\progress> npm run lint

rc-progress@3.1.4 lint
eslint src/ --ext .ts,.tsx,.jsx,.js

C:\Users\xxx\progress\src\Line.tsx
4:1 warning All imports in the declaration are only used as types. Use import type @typescript-eslint/consistent-type-imports

C:\Users\xxx\progress\src\interface.ts
19:51 warning Don't use object as a type. The object type is currently hard to use (see this issue).
Consider using Record<string, unknown> instead, as it allows you to more easily inspect and use the keys @typescript-eslint/ban-types

✖ 2 problems (0 errors, 2 warnings)
0 errors and 1 warning potentially fixable with the --fix option.

以上是lint的执行结果，所以那两个错误参数的情况要去掉嘛

Copy link
Member

@yoyo837 yoyo837 Jun 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

按正常写，不用写错误的demo；
但代码还是应该为非ts场景判断size为number；
添加用例；

/>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions docs/examples/gradient-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const Example = () => {
'0%': '#108ee9',
'100%': '#87d068',
}}
dot={{ size: '10' }}
/>
</div>
<h3>Circle Progress {100}%</h3>
Expand All @@ -32,6 +33,7 @@ const Example = () => {
'100%': '#108ee9',
'0%': '#87d068',
}}
dot={{}}
/>
</div>
<h3>Circle With Success Percent {65}%</h3>
Expand Down
83 changes: 59 additions & 24 deletions src/Circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import type { ProgressProps, GapPositionType } from './interface';

let gradientSeed = 0;

function pxToNumber(px: string) {
return parseInt(px.slice(0, px.indexOf('p')), 10);
}

function stripPercentToNumber(percent: string) {
return +percent.replace('%', '');
}
Expand Down Expand Up @@ -76,6 +80,7 @@ const Circle: React.FC<ProgressProps> = ({
className,
strokeColor,
percent,
dot,
...restProps
}) => {
const gradientId = React.useMemo(() => {
Expand All @@ -98,31 +103,61 @@ const Circle: React.FC<ProgressProps> = ({

const [paths] = useTransitionDuration(percentList);

const getDotList = (pathDoms) => {
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
if (dot) {
return pathDoms.map((pathDom, index) => {
const strokeDasharrayTemp = pathDom.props.style.strokeDasharray;
const strokeLength =
pxToNumber(strokeDasharrayTemp.slice(0, strokeDasharrayTemp.indexOf(' '))) +
Math.abs(pxToNumber(pathDom.props.style.strokeDashoffset)) +
strokeWidth / 2;

path.setAttribute('d', pathDom.props.d);
const dotPoint = path.getPointAtLength(strokeLength);
return (
<circle
key={index + 10}
className={`${prefixCls}-circle-dot`}
cx={dotPoint.x}
cy={dotPoint.y}
r={typeof dot === 'object' ? dot.size : strokeWidth}
fill={pathDom.props.stroke ? pathDom.props.stroke : pathDom.props.style.stroke}
/>
);
});
}
return [];
};

const getStokeList = () => {
let stackPtg = 0;
return percentList.map((ptg, index) => {
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
const stroke =
Object.prototype.toString.call(color) === '[object Object]'
? `url(#${prefixCls}-gradient-${gradientId})`
: '';
const pathStyles = getPathStyles(stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition);
stackPtg += ptg;
return (
<path
key={index}
className={`${prefixCls}-circle-path`}
d={pathStyles.pathString}
stroke={stroke}
strokeLinecap={strokeLinecap}
strokeWidth={strokeWidth}
opacity={ptg === 0 ? 0 : 1}
fillOpacity="0"
style={pathStyles.pathStyle}
ref={paths[index]}
/>
);
});
const pathDoms = percentList
.map((ptg, index) => {
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
const stroke =
Object.prototype.toString.call(color) === '[object Object]'
? `url(#${prefixCls}-gradient-${gradientId})`
: '';
const pathStyles = getPathStyles(stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition);
stackPtg += ptg;
return (
<path
key={index}
className={`${prefixCls}-circle-path`}
d={pathStyles.pathString}
stroke={stroke}
strokeLinecap={strokeLinecap}
strokeWidth={strokeWidth}
opacity={ptg === 0 ? 0 : 1}
fillOpacity="0"
style={pathStyles.pathStyle}
ref={paths[index]}
/>
);
})
.reverse();
return pathDoms.concat(getDotList(pathDoms));
};

return (
Expand Down Expand Up @@ -158,7 +193,7 @@ const Circle: React.FC<ProgressProps> = ({
fillOpacity="0"
style={pathStyle}
/>
{getStokeList().reverse()}
{getStokeList()}
</svg>
);
};
Expand Down
6 changes: 3 additions & 3 deletions src/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useRef, useEffect } from 'react';
import { ProgressProps } from './interface';
import type { ProgressProps } from './interface';

export const defaultProps: Partial<ProgressProps> = {
className: '',
Expand All @@ -8,7 +8,7 @@ export const defaultProps: Partial<ProgressProps> = {
strokeColor: '#2db7f5',
strokeLinecap: 'round',
strokeWidth: 1,
style: {},
style: { overflow: 'visible' },
trailColor: '#D9D9D9',
trailWidth: 1,
};
Expand All @@ -21,7 +21,7 @@ export const useTransitionDuration = (percentList: number[]) => {
const now = Date.now();
let updated = false;

Object.keys(paths).forEach(key => {
Object.keys(paths).forEach((key) => {
const path = paths[key].current;
if (!path) {
return;
Expand Down
5 changes: 4 additions & 1 deletion src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as React from 'react';
import type * as React from 'react';

export interface ProgressProps {
strokeWidth?: number;
Expand All @@ -13,10 +13,13 @@ export interface ProgressProps {
gapDegree?: number;
gapPosition?: GapPositionType;
transition?: string;
dot?: DotType;
}

export type StrokeColorType = string | string[] | object;

export type GapPositionType = 'top' | 'right' | 'bottom' | 'left';

export type StrokeLinecapType = 'round' | 'butt' | 'square';

export type DotType = boolean | { size: number };