diff --git a/.dumirc.ts b/.dumirc.ts index a760b9e..229958b 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -4,7 +4,7 @@ import { defineConfig } from 'dumi'; export default defineConfig({ favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], themeConfig: { - name: 'rc-progress', + name: '@rc-component/progress', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, exportStatic: {}, diff --git a/README.md b/README.md index 276b894..2fa9834 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -# rc-progress +# @rc-component/progress Progress Bar. [![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] -[npm-image]: http://img.shields.io/npm/v/rc-progress.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-progress +[npm-image]: http://img.shields.io/npm/v/@rc-component/progress.svg?style=flat-square +[npm-url]: http://npmjs.org/package/@rc-component/progress [github-actions-image]: https://github.com/react-component/progress/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/progress/actions [circleci-image]: https://img.shields.io/circleci/react-component/progress/master?style=flat-square @@ -16,10 +16,10 @@ Progress Bar. [david-image]: https://david-dm.org/react-component/progress/status.svg?style=flat-square [david-dev-url]: https://david-dm.org/react-component/progress?type=dev [david-dev-image]: https://david-dm.org/react-component/progress/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/rc-progress.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-progress -[bundlephobia-url]: https://bundlephobia.com/result?p=rc-progress -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-progress +[download-image]: https://img.shields.io/npm/dm/@rc-component/progress.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/progress +[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/progress +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/progress ## Example @@ -35,12 +35,12 @@ https://progress.react-component.vercel.app/ ## Install -[![rc-progress](https://nodei.co/npm/rc-progress.png)](https://npmjs.org/package/rc-progress) +[![@rc-component/progress](https://nodei.co/npm/@rc-component/progress.png)](https://npmjs.org/package/@rc-component/progress) ## Usage ```js -import { Line, Circle } from 'rc-progress'; +import { Line, Circle } from '@rc-component/progress'; export default () => ( <> @@ -148,7 +148,7 @@ export default () => ( ## Installation ``` -npm install --save rc-progress +npm install --save @rc-component/progress ``` ## Development @@ -160,4 +160,4 @@ npm start ## License -rc-progress is released under the MIT license. +@rc-component/progress is released under the MIT license. diff --git a/docs/examples/fast-progress.tsx b/docs/examples/fast-progress.tsx index 2511994..f50fbe2 100644 --- a/docs/examples/fast-progress.tsx +++ b/docs/examples/fast-progress.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Line, Circle } from 'rc-progress'; -import type { ProgressProps } from 'rc-progress'; +import { Line, Circle } from '@rc-component/progress'; +import type { ProgressProps } from '@rc-component/progress'; class App extends React.Component { constructor(props: ProgressProps) { diff --git a/docs/examples/gap.tsx b/docs/examples/gap.tsx index 14a4283..45e8ac0 100644 --- a/docs/examples/gap.tsx +++ b/docs/examples/gap.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Circle } from 'rc-progress'; -import type { ProgressProps } from 'rc-progress'; +import { Circle } from '@rc-component/progress'; +import type { ProgressProps } from '@rc-component/progress'; const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A', '#FF5959', '#BC3FFA']; diff --git a/docs/examples/gradient-circle.tsx b/docs/examples/gradient-circle.tsx index 1dbc642..3d23376 100644 --- a/docs/examples/gradient-circle.tsx +++ b/docs/examples/gradient-circle.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Circle } from 'rc-progress'; +import { Circle } from '@rc-component/progress'; const circleContainerStyle: React.CSSProperties = { width: 250, diff --git a/docs/examples/loading.tsx b/docs/examples/loading.tsx index b4948d0..bd3f2b3 100644 --- a/docs/examples/loading.tsx +++ b/docs/examples/loading.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Line, Circle } from 'rc-progress'; +import { Line, Circle } from '@rc-component/progress'; const Loading = () => { return ( diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index 8e0610d..4658915 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Line, Circle } from 'rc-progress'; -import type { ProgressProps } from 'rc-progress'; +import { Line, Circle } from '@rc-component/progress'; +import type { ProgressProps } from '@rc-component/progress'; class Example extends React.Component { constructor(props: ProgressProps) { diff --git a/docs/examples/steps.tsx b/docs/examples/steps.tsx index d9e2b03..6e94b09 100644 --- a/docs/examples/steps.tsx +++ b/docs/examples/steps.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Circle } from 'rc-progress'; +import { Circle } from '@rc-component/progress'; const Example: React.FC = () => { const [percent, setPercent] = useState(30); diff --git a/docs/index.md b/docs/index.md index bc4af86..12d9f22 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,6 @@ --- hero: - title: rc-progress + title: '@rc-component/progress' description: React Progress Component --- diff --git a/now.json b/now.json index 7b242ae..093e120 100644 --- a/now.json +++ b/now.json @@ -1,6 +1,6 @@ { "version": 2, - "name": "rc-progress", + "name": "@rc-component/progress", "builds": [ { "src": "package.json", diff --git a/package.json b/package.json index d315d8c..107ec2d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "rc-progress", - "version": "4.0.0", + "name": "@rc-component/progress", + "version": "1.0.0", "description": "progress ui component for react", "keywords": [ "react", diff --git a/src/Circle/PtgCircle.tsx b/src/Circle/PtgCircle.tsx index 60cbc22..9b755b2 100644 --- a/src/Circle/PtgCircle.tsx +++ b/src/Circle/PtgCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { ProgressProps } from '..'; import type { StrokeColorObject } from '../interface'; +import classNames from 'classnames'; interface BlockProps { bg: string; @@ -22,6 +23,7 @@ function getPtgColors(color: Record, scale: number) { export interface ColorGradientProps { prefixCls: string; + className?: string; gradientId: string; style: React.CSSProperties; ptg: number; @@ -39,6 +41,7 @@ const PtgCircle = React.forwardRef((props, color, gradientId, radius, + className, style: circleStyleForStack, ptg, strokeLinecap, @@ -56,7 +59,7 @@ const PtgCircle = React.forwardRef((props, const circleNode = ( = (props) => { const { id, prefixCls, + classNames = {}, + styles = {}, steps, strokeWidth, trailWidth, @@ -100,7 +102,8 @@ const Circle: React.FC = (props) => { radius={radius} prefixCls={prefixCls} gradientId={gradientId} - style={{ ...circleStyleForStack, ...indeterminateStyleProps }} + className={classNames.track} + style={{ ...circleStyleForStack, ...indeterminateStyleProps, ...styles.track }} strokeLinecap={mergedStrokeLinecap} strokeWidth={strokeWidth} gapDegree={gapDegree} @@ -148,14 +151,14 @@ const Circle: React.FC = (props) => { return ( { paths[index] = elem; }} @@ -166,23 +169,29 @@ const Circle: React.FC = (props) => { return ( {!stepCount && ( )} {stepCount ? getStepStokeList() : getStokeList()} diff --git a/src/Line.tsx b/src/Line.tsx index 605c779..1b231bb 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { useTransitionDuration, defaultProps } from './common'; import type { ProgressProps } from './interface'; import getIndeterminateLine from './utils/getIndeterminateLine'; -import useId from './hooks/useId'; +import useId from '@rc-component/util/lib/hooks/useId'; const Line: React.FC = (props) => { const { diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts deleted file mode 100644 index 5551935..0000000 --- a/src/hooks/useId.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import canUseDom from '@rc-component/util/lib/Dom/canUseDom'; - -let uuid = 0; - -/** Is client side and not jsdom */ -export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom(); - -/** Get unique id for accessibility usage */ -function getUUID(): number | string { - let retId: string | number; - - // Test never reach - /* istanbul ignore if */ - if (isBrowserClient) { - retId = uuid; - uuid += 1; - } else { - retId = 'TEST_OR_SSR'; - } - - return retId; -} - -export default (id?: string) => { - // Inner id for accessibility usage. Only work in client side - const [innerId, setInnerId] = React.useState(); - React.useEffect(() => { - setInnerId(`rc_progress_${getUUID()}`); - }, []); - return id || innerId; -}; diff --git a/src/interface.ts b/src/interface.ts index e4b9b90..5dbe32d 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,8 +1,12 @@ +export type SemanticName = 'root' | 'rail' | 'track'; + export interface ProgressProps { id?: string; strokeWidth?: number; trailWidth?: number; className?: string; + classNames?: Partial>; + styles?: Partial>; percent?: number | number[]; strokeColor?: StrokeColorType; trailColor?: string; diff --git a/tests/__snapshots__/conic.spec.tsx.snap b/tests/__snapshots__/conic.spec.tsx.snap index b708d4d..0e474ea 100644 --- a/tests/__snapshots__/conic.spec.tsx.snap +++ b/tests/__snapshots__/conic.spec.tsx.snap @@ -18,7 +18,7 @@ exports[`Circle.conic gapDegree 1`] = ` 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;" /> `; @@ -76,7 +76,7 @@ exports[`Progress Circle should gradient works and circles have different gradie 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;" /> @@ -340,7 +340,7 @@ exports[`Progress Diff Line should match snapshot 1`] = ` stroke="#2db7f5" stroke-linecap="butt" stroke-width="1" - style="stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;" + style="stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;" />
@@ -366,7 +366,7 @@ exports[`Progress Diff Line should match snapshot 1`] = ` stroke="#2db7f5" stroke-linecap="round" stroke-width="1" - style="stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;" + style="stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;" />
@@ -392,7 +392,7 @@ exports[`Progress Diff Line should match snapshot 1`] = ` stroke="#2db7f5" stroke-linecap="square" stroke-width="1" - style="stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;" + style="stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;" /> @@ -421,7 +421,7 @@ exports[`Progress Line change with animation 1`] = ` stroke="#2db7f5" stroke-linecap="round" stroke-width="1" - style="stroke-dasharray: 0px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;" + style="stroke-dasharray: 0px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;" /> `; @@ -479,7 +479,7 @@ exports[`Progress should support percentage array changes 1`] = ` r="49.5" stroke-linecap="round" stroke-width="1" - style="stroke: #2db7f5; stroke-dasharray: 311.01767270538954px 311.01767270538954; stroke-dashoffset: 187.11060362323371; transform: rotate(54deg); 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;" + style="stroke: #2db7f5; stroke-dasharray: 311.01767270538954px 311.01767270538954; stroke-dashoffset: 187.11060362323371; transform: rotate(54deg); 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;" /> `; diff --git a/tests/semantic.spec.tsx b/tests/semantic.spec.tsx new file mode 100644 index 0000000..4429876 --- /dev/null +++ b/tests/semantic.spec.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { Circle, type ProgressProps } from '../src'; + +describe('Semantic', () => { + describe('Circle', () => { + function test( + name: string, + props: Partial = {}, + postCallback?: (cotainer: HTMLElement) => void, + ) { + it(name, () => { + const classNames: ProgressProps['classNames'] = { + root: 'my-root', + rail: 'my-rail', + track: 'my-track', + }; + const styles = { + root: { background: 'red' }, + rail: { background: 'blue' }, + track: { background: 'green' }, + }; + + const { container } = render( + , + ); + + expect(container.querySelector('.rc-progress-circle')).toHaveClass(classNames.root); + expect(container.querySelector('.rc-progress-circle-trail')).toHaveClass(classNames.rail); + expect(container.querySelector('.rc-progress-circle-path')).toHaveClass(classNames.track); + + expect(container.querySelector('.my-root')).toHaveStyle(styles.root); + expect(container.querySelector('.my-rail')).toHaveStyle(styles.rail); + expect(container.querySelector('.my-track')).toHaveStyle(styles.track); + + postCallback?.(container); + }); + } + + test('basic'); + + test( + 'gradient', + { + strokeColor: { + '0%': '#f00', + '100%': '#0f0', + }, + }, + (container) => { + expect(container.querySelector('foreignObject')).toBeTruthy(); + }, + ); + }); +}); diff --git a/tsconfig.json b/tsconfig.json index caf7907..a2ff56f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "paths": { "@/*": ["src/*"], "@@/*": [".dumi/tmp/*"], - "rc-progress": ["src/index.ts"] + "@rc-component/progress": ["src/index.ts"] } } } \ No newline at end of file