Skip to content

Commit 9b7899e

Browse files
zombieJzombieJ
authored
feat: Circle support semantic structure (#303)
* feat: init semantic structure * test: add test case * test: update snapshot
1 parent 27a7aab commit 9b7899e

20 files changed

+133
-94
lines changed

‎.dumirc.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { defineConfig } from 'dumi';
44
export default defineConfig({
55
favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
66
themeConfig: {
7-
name: 'rc-progress',
7+
name: '@rc-component/progress',
88
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
99
},
1010
exportStatic: {},

‎README.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
# rc-progress
1+
# @rc-component/progress
22

33
Progress Bar.
44

55
[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
66

7-
[npm-image]: http://img.shields.io/npm/v/rc-progress.svg?style=flat-square
8-
[npm-url]: http://npmjs.org/package/rc-progress
7+
[npm-image]: http://img.shields.io/npm/v/@rc-component/progress.svg?style=flat-square
8+
[npm-url]: http://npmjs.org/package/@rc-component/progress
99
[github-actions-image]: https://github.com/react-component/progress/workflows/CI/badge.svg
1010
[github-actions-url]: https://github.com/react-component/progress/actions
1111
[circleci-image]: https://img.shields.io/circleci/react-component/progress/master?style=flat-square
@@ -16,10 +16,10 @@ Progress Bar.
1616
[david-image]: https://david-dm.org/react-component/progress/status.svg?style=flat-square
1717
[david-dev-url]: https://david-dm.org/react-component/progress?type=dev
1818
[david-dev-image]: https://david-dm.org/react-component/progress/dev-status.svg?style=flat-square
19-
[download-image]: https://img.shields.io/npm/dm/rc-progress.svg?style=flat-square
20-
[download-url]: https://npmjs.org/package/rc-progress
21-
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-progress
22-
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-progress
19+
[download-image]: https://img.shields.io/npm/dm/@rc-component/progress.svg?style=flat-square
20+
[download-url]: https://npmjs.org/package/@rc-component/progress
21+
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/progress
22+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/progress
2323

2424
## Example
2525

@@ -35,12 +35,12 @@ https://progress.react-component.vercel.app/
3535

3636
## Install
3737

38-
[![rc-progress](https://nodei.co/npm/rc-progress.png)](https://npmjs.org/package/rc-progress)
38+
[![@rc-component/progress](https://nodei.co/npm/@rc-component/progress.png)](https://npmjs.org/package/@rc-component/progress)
3939

4040
## Usage
4141

4242
```js
43-
import { Line, Circle } from 'rc-progress';
43+
import { Line, Circle } from '@rc-component/progress';
4444

4545
export default () => (
4646
<>
@@ -148,7 +148,7 @@ export default () => (
148148
## Installation
149149

150150
```
151-
npm install --save rc-progress
151+
npm install --save @rc-component/progress
152152
```
153153

154154
## Development
@@ -160,4 +160,4 @@ npm start
160160

161161
## License
162162

163-
rc-progress is released under the MIT license.
163+
@rc-component/progress is released under the MIT license.

‎docs/examples/fast-progress.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Line, Circle } from 'rc-progress';
3-
import type { ProgressProps } from 'rc-progress';
2+
import { Line, Circle } from '@rc-component/progress';
3+
import type { ProgressProps } from '@rc-component/progress';
44

55
class App extends React.Component<ProgressProps, any> {
66
constructor(props: ProgressProps) {

‎docs/examples/gap.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Circle } from 'rc-progress';
3-
import type { ProgressProps } from 'rc-progress';
2+
import { Circle } from '@rc-component/progress';
3+
import type { ProgressProps } from '@rc-component/progress';
44

55
const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A', '#FF5959', '#BC3FFA'];
66

‎docs/examples/gradient-circle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Circle } from 'rc-progress';
2+
import { Circle } from '@rc-component/progress';
33

44
const circleContainerStyle: React.CSSProperties = {
55
width: 250,

‎docs/examples/loading.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Line, Circle } from 'rc-progress';
2+
import { Line, Circle } from '@rc-component/progress';
33

44
const Loading = () => {
55
return (

‎docs/examples/simple.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Line, Circle } from 'rc-progress';
3-
import type { ProgressProps } from 'rc-progress';
2+
import { Line, Circle } from '@rc-component/progress';
3+
import type { ProgressProps } from '@rc-component/progress';
44

55
class Example extends React.Component<ProgressProps, any> {
66
constructor(props: ProgressProps) {

‎docs/examples/steps.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Circle } from 'rc-progress';
2+
import { Circle } from '@rc-component/progress';
33

44
const Example: React.FC = () => {
55
const [percent, setPercent] = useState<number>(30);

‎docs/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
hero:
3-
title: rc-progress
3+
title: '@rc-component/progress'
44
description: React Progress Component
55
---
66

‎now.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"version": 2,
3-
"name": "rc-progress",
3+
"name": "@rc-component/progress",
44
"builds": [
55
{
66
"src": "package.json",

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "rc-progress",
3-
"version": "4.0.0",
2+
"name": "@rc-component/progress",
3+
"version": "1.0.0",
44
"description": "progress ui component for react",
55
"keywords": [
66
"react",

‎src/Circle/PtgCircle.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import type { ProgressProps } from '..';
33
import type { StrokeColorObject } from '../interface';
4+
import classNames from 'classnames';
45

56
interface BlockProps {
67
bg: string;
@@ -22,6 +23,7 @@ function getPtgColors(color: Record<string, string | boolean>, scale: number) {
2223

2324
export interface ColorGradientProps {
2425
prefixCls: string;
26+
className?: string;
2527
gradientId: string;
2628
style: React.CSSProperties;
2729
ptg: number;
@@ -39,6 +41,7 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
3941
color,
4042
gradientId,
4143
radius,
44+
className,
4245
style: circleStyleForStack,
4346
ptg,
4447
strokeLinecap,
@@ -56,7 +59,7 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
5659

5760
const circleNode = (
5861
<circle
59-
className={`${prefixCls}-circle-path`}
62+
className={classNames(`${prefixCls}-circle-path`, className)}
6063
r={radius}
6164
cx={halfSize}
6265
cy={halfSize}

‎src/Circle/index.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
2-
import classNames from 'classnames';
2+
import cls from 'classnames';
33
import { defaultProps, useTransitionDuration } from '../common';
44
import type { ProgressProps } from '../interface';
5-
import useId from '../hooks/useId';
5+
import useId from '@rc-component/util/lib/hooks/useId';
66
import PtgCircle from './PtgCircle';
77
import { VIEW_BOX_SIZE, getCircleStyle } from './util';
88
import getIndeterminateCircle from '../utils/getIndeterminateCircle';
@@ -16,6 +16,8 @@ const Circle: React.FC<ProgressProps> = (props) => {
1616
const {
1717
id,
1818
prefixCls,
19+
classNames = {},
20+
styles = {},
1921
steps,
2022
strokeWidth,
2123
trailWidth,
@@ -100,7 +102,8 @@ const Circle: React.FC<ProgressProps> = (props) => {
100102
radius={radius}
101103
prefixCls={prefixCls}
102104
gradientId={gradientId}
103-
style={{ ...circleStyleForStack, ...indeterminateStyleProps }}
105+
className={classNames.track}
106+
style={{ ...circleStyleForStack, ...indeterminateStyleProps, ...styles.track }}
104107
strokeLinecap={mergedStrokeLinecap}
105108
strokeWidth={strokeWidth}
106109
gapDegree={gapDegree}
@@ -148,14 +151,14 @@ const Circle: React.FC<ProgressProps> = (props) => {
148151
return (
149152
<circle
150153
key={index}
151-
className={`${prefixCls}-circle-path`}
154+
className={cls(`${prefixCls}-circle-path`, classNames.track)}
152155
r={radius}
153156
cx={halfSize}
154157
cy={halfSize}
155158
stroke={stroke}
156159
strokeWidth={strokeWidth}
157160
opacity={1}
158-
style={circleStyleForStack}
161+
style={{ ...circleStyleForStack, ...styles.track }}
159162
ref={(elem) => {
160163
paths[index] = elem;
161164
}}
@@ -166,23 +169,29 @@ const Circle: React.FC<ProgressProps> = (props) => {
166169

167170
return (
168171
<svg
169-
className={classNames(`${prefixCls}-circle`, className)}
172+
className={cls(`${prefixCls}-circle`, classNames.root, className)}
170173
viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
171-
style={style}
174+
style={{
175+
...styles.root,
176+
...style,
177+
}}
172178
id={id}
173179
role="presentation"
174180
{...restProps}
175181
>
176182
{!stepCount && (
177183
<circle
178-
className={`${prefixCls}-circle-trail`}
184+
className={cls(`${prefixCls}-circle-trail`, classNames.rail)}
179185
r={radius}
180186
cx={halfSize}
181187
cy={halfSize}
182188
stroke={trailColor}
183189
strokeLinecap={mergedStrokeLinecap}
184190
strokeWidth={trailWidth || strokeWidth}
185-
style={circleStyle}
191+
style={{
192+
...circleStyle,
193+
...styles.rail,
194+
}}
186195
/>
187196
)}
188197
{stepCount ? getStepStokeList() : getStokeList()}

‎src/Line.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import classNames from 'classnames';
33
import { useTransitionDuration, defaultProps } from './common';
44
import type { ProgressProps } from './interface';
55
import getIndeterminateLine from './utils/getIndeterminateLine';
6-
import useId from './hooks/useId';
6+
import useId from '@rc-component/util/lib/hooks/useId';
77

88
const Line: React.FC<ProgressProps> = (props) => {
99
const {

‎src/hooks/useId.ts

-32
This file was deleted.

‎src/interface.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
export type SemanticName = 'root' | 'rail' | 'track';
2+
13
export interface ProgressProps {
24
id?: string;
35
strokeWidth?: number;
46
trailWidth?: number;
57
className?: string;
8+
classNames?: Partial<Record<SemanticName, string>>;
9+
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
610
percent?: number | number[];
711
strokeColor?: StrokeColorType;
812
trailColor?: string;

‎tests/__snapshots__/conic.spec.tsx.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`Circle.conic gapDegree 1`] = `
1818
style="stroke: #D9D9D9; stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
1919
/>
2020
<mask
21-
id="rc_progress_TEST_OR_SSR-gradient-conic"
21+
id="test-id-gradient-conic"
2222
>
2323
<circle
2424
class="rc-progress-circle-path"
@@ -29,12 +29,12 @@ exports[`Circle.conic gapDegree 1`] = `
2929
stroke="#FFF"
3030
stroke-linecap="butt"
3131
stroke-width="6"
32-
style="stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
32+
style="stroke-dasharray: 237.88837704682715px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;"
3333
/>
3434
</mask>
3535
<foreignobject
3636
height="100"
37-
mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
37+
mask="url(#test-id-gradient-conic)"
3838
width="100"
3939
x="0"
4040
y="0"
@@ -69,7 +69,7 @@ exports[`Circle.conic should work 1`] = `
6969
style="stroke: #D9D9D9; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
7070
/>
7171
<mask
72-
id="rc_progress_TEST_OR_SSR-gradient-conic"
72+
id="test-id-gradient-conic"
7373
>
7474
<circle
7575
class="rc-progress-circle-path"
@@ -80,12 +80,12 @@ exports[`Circle.conic should work 1`] = `
8080
stroke="#FFF"
8181
stroke-linecap="butt"
8282
stroke-width="6"
83-
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
83+
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: .3s, .3s, .3s, .06s;"
8484
/>
8585
</mask>
8686
<foreignobject
8787
height="100"
88-
mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
88+
mask="url(#test-id-gradient-conic)"
8989
width="100"
9090
x="0"
9191
y="0"

0 commit comments

Comments
 (0)