1
This commit is contained in:
+9
@@ -0,0 +1,9 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014-present yiminghe
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+191
@@ -0,0 +1,191 @@
|
||||
# @rc-component/steps
|
||||
|
||||
---
|
||||
|
||||
React steps component.
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![build status][travis-image]][travis-url]
|
||||
[![Test coverage][codecov-image]][codecov-url]
|
||||
[![npm download][download-image]][download-url]
|
||||
[![bundle size][bundlephobia-image]][bundlephobia-url]
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/@rc-component/steps.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/@rc-component/steps
|
||||
[travis-image]: https://img.shields.io/travis/react-component/steps.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/react-component/steps
|
||||
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/steps/master.svg?style=flat-square
|
||||
[codecov-url]: https://codecov.io/gh/react-component/steps/branch/master
|
||||
[download-image]: https://img.shields.io/npm/dm/@rc-component/steps.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/@rc-component/steps
|
||||
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/steps
|
||||
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/steps
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
npm install @rc-component/steps
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
```jsx | pure
|
||||
<Steps current={1}>
|
||||
<Steps.Step title="first" />
|
||||
<Steps.Step title="second" />
|
||||
<Steps.Step title="third" />
|
||||
</Steps>
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
https://steps.vercel.app/
|
||||
|
||||
## API
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>string</td>
|
||||
<td>default</td>
|
||||
<td>diretypetion of Steps, could be `default` `navigation` `inline`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>direction</td>
|
||||
<td>string</td>
|
||||
<td>horizontal</td>
|
||||
<td>direction of Steps, enum: `horizontal` or `vertical`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>current</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>index of current step</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>initial</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>index initial</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td></td>
|
||||
<td>size of Steps, could be `small`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>titlePlacement</td>
|
||||
<td>string</td>
|
||||
<td></td>
|
||||
<td>placement of step title, could be `vertical`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>status</td>
|
||||
<td>string</td>
|
||||
<td>wait</td>
|
||||
<td>status of current Steps, could be `error` `process` `finish` `wait`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>icons</td>
|
||||
<td>{ finish: ReactNode, error: ReactNode }</td>
|
||||
<td></td>
|
||||
<td>specify the default finish icon and error icon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>itemRender</td>
|
||||
<td>(item: StepProps, stepItem: React.ReactNode) => React.ReactNode</td>
|
||||
<td></td>
|
||||
<td>custom step item renderer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>(current: number) => void</td>
|
||||
<td></td>
|
||||
<td>Trigger when Step changed</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Steps.Step
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>ReactNode</td>
|
||||
<td></td>
|
||||
<td>title of step item</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>subTitle</td>
|
||||
<td>ReactNode</td>
|
||||
<td></td>
|
||||
<td>subTitle of step item</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>description</td>
|
||||
<td>ReactNode</td>
|
||||
<td></td>
|
||||
<td>description of step item</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>icon</td>
|
||||
<td>ReactNode</td>
|
||||
<td></td>
|
||||
<td>set icon of step item</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>status</td>
|
||||
<td>string</td>
|
||||
<td></td>
|
||||
<td>status of current Steps, could be `error` `process` `finish` `wait`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tailContent</td>
|
||||
<td>ReactNode</td>
|
||||
<td></td>
|
||||
<td>content above tail</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>bool</td>
|
||||
<td>false</td>
|
||||
<td>disabled step when onChange exist</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>render</td>
|
||||
<td>(stepItem: React.ReactNode) => React.ReactNode</td>
|
||||
<td></td>
|
||||
<td>custom step item renderer</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
@rc-component/steps is released under the MIT license.
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
.rc-steps {
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
}
|
||||
.rc-steps,
|
||||
.rc-steps * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rc-steps-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
flex: 1;
|
||||
}
|
||||
.rc-steps-item:last-child {
|
||||
flex: none;
|
||||
}
|
||||
.rc-steps-item:last-child .rc-steps-item-title:after {
|
||||
display: none;
|
||||
}
|
||||
.rc-steps-item-icon,
|
||||
.rc-steps-item-section {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rc-steps-item-icon {
|
||||
flex: none;
|
||||
border: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.rc-steps-item-icon > .rc-steps-icon {
|
||||
line-height: 1;
|
||||
top: -1px;
|
||||
color: #108ee9;
|
||||
position: relative;
|
||||
}
|
||||
.rc-steps-item-icon > .rc-steps-icon.rcicon {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.rc-steps-item-section {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.rc-steps-item-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.rc-steps-item-subtitle {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
}
|
||||
.rc-steps-item-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.rc-steps-item-wait .rc-steps-item-icon {
|
||||
border-color: #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
.rc-steps-item-wait .rc-steps-item-icon > .rc-steps-icon {
|
||||
color: #ccc;
|
||||
}
|
||||
.rc-steps-item-wait .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
|
||||
background: #ccc;
|
||||
}
|
||||
.rc-steps-item-wait .rc-steps-item-title {
|
||||
color: rgba(0, 0, 0, 0.43);
|
||||
}
|
||||
.rc-steps-item-wait .rc-steps-item-description {
|
||||
color: rgba(0, 0, 0, 0.43);
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-icon {
|
||||
border-color: #108ee9;
|
||||
background-color: #fff;
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon {
|
||||
color: #108ee9;
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
|
||||
background: #108ee9;
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-title {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-description {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-icon {
|
||||
background: #108ee9;
|
||||
}
|
||||
.rc-steps-item-process .rc-steps-item-icon > .rc-steps-icon {
|
||||
color: #fff;
|
||||
}
|
||||
.rc-steps-item-finish .rc-steps-item-icon {
|
||||
border-color: #108ee9;
|
||||
background-color: #fff;
|
||||
}
|
||||
.rc-steps-item-finish .rc-steps-item-icon > .rc-steps-icon {
|
||||
color: #108ee9;
|
||||
}
|
||||
.rc-steps-item-finish .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
|
||||
background: #108ee9;
|
||||
}
|
||||
.rc-steps-item-finish .rc-steps-item-title {
|
||||
color: rgba(0, 0, 0, 0.43);
|
||||
}
|
||||
.rc-steps-item-finish .rc-steps-item-description {
|
||||
color: rgba(0, 0, 0, 0.43);
|
||||
}
|
||||
.rc-steps-item-error .rc-steps-item-icon {
|
||||
border-color: #f50;
|
||||
background-color: #fff;
|
||||
}
|
||||
.rc-steps-item-error .rc-steps-item-icon > .rc-steps-icon {
|
||||
color: #f50;
|
||||
}
|
||||
.rc-steps-item-error .rc-steps-item-icon > .rc-steps-icon .rc-steps-icon-dot {
|
||||
background: #f50;
|
||||
}
|
||||
.rc-steps-item-error .rc-steps-item-title {
|
||||
color: #f50;
|
||||
}
|
||||
.rc-steps-item-error .rc-steps-item-description {
|
||||
color: #f50;
|
||||
}
|
||||
.rc-steps-item.rc-steps-next-error .rc-steps-item-title:after {
|
||||
background: #f50;
|
||||
}
|
||||
.rc-steps-horizontal:not(.rc-steps-label-vertical) .rc-steps-item-description {
|
||||
max-width: 100px;
|
||||
}
|
||||
.rc-steps .rc-steps-item-section {
|
||||
min-width: 0;
|
||||
}
|
||||
.rc-steps .rc-steps-item-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.rc-steps .rc-steps-item-title,
|
||||
.rc-steps .rc-steps-item-subtitle,
|
||||
.rc-steps .rc-steps-item-description {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rc-steps-horizontal .rc-steps-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
.rc-steps-horizontal .rc-steps-item-rail {
|
||||
height: 1px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-vertical .rc-steps-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-inline: 8px;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-vertical .rc-steps-item-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-vertical .rc-steps-item-rail {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: calc(50% + 13px);
|
||||
width: 100%;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-horizontal .rc-steps-item {
|
||||
display: flex;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-horizontal .rc-steps-item:last-child {
|
||||
flex: none;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-horizontal .rc-steps-item-section {
|
||||
flex: 1;
|
||||
}
|
||||
.rc-steps-horizontal.rc-steps-label-horizontal .rc-steps-item-rail {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
import type { ComponentType, StepsProps } from './Steps';
|
||||
export interface StepsContextProps {
|
||||
prefixCls: string;
|
||||
classNames: NonNullable<StepsProps['classNames']>;
|
||||
styles: NonNullable<StepsProps['styles']>;
|
||||
ItemComponent: ComponentType;
|
||||
}
|
||||
export declare const StepsContext: React.Context<StepsContextProps>;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import * as React from 'react';
|
||||
export const StepsContext = /*#__PURE__*/React.createContext(null);
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
import type { Status } from './Steps';
|
||||
export interface RailProps {
|
||||
prefixCls: string;
|
||||
className: string;
|
||||
style: React.CSSProperties;
|
||||
status: Status;
|
||||
}
|
||||
export default function Rail(props: RailProps): React.JSX.Element;
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
export default function Rail(props) {
|
||||
const {
|
||||
prefixCls,
|
||||
className,
|
||||
style,
|
||||
status
|
||||
} = props;
|
||||
const railCls = `${prefixCls}-rail`;
|
||||
|
||||
// ============================= render =============================
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(railCls, `${railCls}-${status}`, className),
|
||||
style: style
|
||||
});
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import type { Status, StepItem, StepsProps } from './Steps';
|
||||
export interface StepProps {
|
||||
prefixCls?: string;
|
||||
classNames: StepsProps['classNames'];
|
||||
styles: StepsProps['styles'];
|
||||
data: StepItem;
|
||||
nextStatus?: Status;
|
||||
active?: boolean;
|
||||
index: number;
|
||||
last: boolean;
|
||||
iconRender?: StepsProps['iconRender'];
|
||||
icon?: React.ReactNode;
|
||||
itemRender?: StepsProps['itemRender'];
|
||||
itemWrapperRender?: StepsProps['itemWrapperRender'];
|
||||
onClick: (index: number) => void;
|
||||
}
|
||||
export default function Step(props: StepProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
/* eslint react/prop-types: 0 */
|
||||
import * as React from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
import KeyCode from "@rc-component/util/es/KeyCode";
|
||||
import Rail from "./Rail";
|
||||
import { UnstableContext } from "./UnstableContext";
|
||||
import StepIcon, { StepIconSemanticContext } from "./StepIcon";
|
||||
import { StepsContext } from "./Context";
|
||||
function hasContent(value) {
|
||||
return value !== undefined && value !== null;
|
||||
}
|
||||
export default function Step(props) {
|
||||
const {
|
||||
// style
|
||||
prefixCls,
|
||||
classNames,
|
||||
styles,
|
||||
// data
|
||||
data,
|
||||
last,
|
||||
nextStatus,
|
||||
active,
|
||||
index,
|
||||
// render
|
||||
itemRender,
|
||||
iconRender,
|
||||
itemWrapperRender,
|
||||
// events
|
||||
onClick
|
||||
} = props;
|
||||
const itemCls = `${prefixCls}-item`;
|
||||
|
||||
// ======================== Contexts ========================
|
||||
const {
|
||||
railFollowPrevStatus
|
||||
} = React.useContext(UnstableContext);
|
||||
const {
|
||||
ItemComponent
|
||||
} = React.useContext(StepsContext);
|
||||
|
||||
// ========================== Data ==========================
|
||||
const {
|
||||
onClick: onItemClick,
|
||||
title,
|
||||
subTitle,
|
||||
content,
|
||||
description,
|
||||
disabled,
|
||||
icon,
|
||||
status,
|
||||
className,
|
||||
style,
|
||||
classNames: itemClassNames = {},
|
||||
styles: itemStyles = {},
|
||||
...restItemProps
|
||||
} = data;
|
||||
const mergedContent = content ?? description;
|
||||
const renderInfo = {
|
||||
item: {
|
||||
...data,
|
||||
content: mergedContent
|
||||
},
|
||||
index,
|
||||
active
|
||||
};
|
||||
|
||||
// ========================= Click ==========================
|
||||
const clickable = !!(onClick || onItemClick) && !disabled;
|
||||
const accessibilityProps = {};
|
||||
if (clickable) {
|
||||
accessibilityProps.role = 'button';
|
||||
accessibilityProps.tabIndex = 0;
|
||||
accessibilityProps.onClick = e => {
|
||||
onItemClick?.(e);
|
||||
onClick(index);
|
||||
};
|
||||
accessibilityProps.onKeyDown = e => {
|
||||
const {
|
||||
which
|
||||
} = e;
|
||||
if (which === KeyCode.ENTER || which === KeyCode.SPACE) {
|
||||
onClick(index);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ========================= Render =========================
|
||||
const mergedStatus = status || 'wait';
|
||||
const hasTitle = hasContent(title);
|
||||
const hasSubTitle = hasContent(subTitle);
|
||||
const classString = clsx(itemCls, `${itemCls}-${mergedStatus}`, {
|
||||
[`${itemCls}-custom`]: icon,
|
||||
[`${itemCls}-active`]: active,
|
||||
[`${itemCls}-disabled`]: disabled === true,
|
||||
[`${itemCls}-empty-header`]: !hasTitle && !hasSubTitle
|
||||
}, className, classNames.item, itemClassNames.root);
|
||||
let iconNode = /*#__PURE__*/React.createElement(StepIcon, null);
|
||||
if (iconRender) {
|
||||
iconNode = iconRender(iconNode, {
|
||||
...renderInfo,
|
||||
components: {
|
||||
Icon: StepIcon
|
||||
}
|
||||
});
|
||||
}
|
||||
const wrapperNode = /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(`${itemCls}-wrapper`, classNames.itemWrapper, itemClassNames.wrapper),
|
||||
style: {
|
||||
...styles.itemWrapper,
|
||||
...itemStyles.wrapper
|
||||
}
|
||||
}, /*#__PURE__*/React.createElement(StepIconSemanticContext.Provider, {
|
||||
value: {
|
||||
className: itemClassNames.icon,
|
||||
style: itemStyles.icon
|
||||
}
|
||||
}, iconNode), /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(`${itemCls}-section`, classNames.itemSection, itemClassNames.section),
|
||||
style: {
|
||||
...styles.itemSection,
|
||||
...itemStyles.section
|
||||
}
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(`${itemCls}-header`, classNames.itemHeader, itemClassNames.header),
|
||||
style: {
|
||||
...styles.itemHeader,
|
||||
...itemStyles.header
|
||||
}
|
||||
}, hasTitle && /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(`${itemCls}-title`, classNames.itemTitle, itemClassNames.title),
|
||||
style: {
|
||||
...styles.itemTitle,
|
||||
...itemStyles.title
|
||||
}
|
||||
}, title), hasSubTitle && /*#__PURE__*/React.createElement("div", {
|
||||
title: typeof subTitle === 'string' ? subTitle : undefined,
|
||||
className: clsx(`${itemCls}-subtitle`, classNames.itemSubtitle, itemClassNames.subtitle),
|
||||
style: {
|
||||
...styles.itemSubtitle,
|
||||
...itemStyles.subtitle
|
||||
}
|
||||
}, subTitle), !last && /*#__PURE__*/React.createElement(Rail, {
|
||||
prefixCls: itemCls,
|
||||
className: clsx(classNames.itemRail, itemClassNames.rail),
|
||||
style: {
|
||||
...styles.itemRail,
|
||||
...itemStyles.rail
|
||||
},
|
||||
status: railFollowPrevStatus ? status : nextStatus
|
||||
})), hasContent(mergedContent) && /*#__PURE__*/React.createElement("div", {
|
||||
className: clsx(`${itemCls}-content`, classNames.itemContent, itemClassNames.content),
|
||||
style: {
|
||||
...styles.itemContent,
|
||||
...itemStyles.content
|
||||
}
|
||||
}, mergedContent)));
|
||||
let stepNode = /*#__PURE__*/React.createElement(ItemComponent, _extends({}, restItemProps, accessibilityProps, {
|
||||
className: classString,
|
||||
style: {
|
||||
...styles.item,
|
||||
...itemStyles.root,
|
||||
...style
|
||||
}
|
||||
}), itemWrapperRender ? itemWrapperRender(wrapperNode) : wrapperNode);
|
||||
if (itemRender) {
|
||||
stepNode = itemRender(stepNode, renderInfo) || null;
|
||||
}
|
||||
return stepNode;
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
export interface StepIconSemanticContextProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
export declare const StepIconSemanticContext: React.Context<StepIconSemanticContextProps>;
|
||||
export type StepIconProps = React.HTMLAttributes<HTMLDivElement>;
|
||||
declare const StepIcon: React.ForwardRefExoticComponent<StepIconProps & React.RefAttributes<HTMLDivElement>>;
|
||||
export default StepIcon;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
import * as React from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
import { StepsContext } from "./Context";
|
||||
import pickAttrs from "@rc-component/util/es/pickAttrs";
|
||||
export const StepIconSemanticContext = /*#__PURE__*/React.createContext({});
|
||||
const StepIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
prefixCls,
|
||||
classNames,
|
||||
styles
|
||||
} = React.useContext(StepsContext);
|
||||
const {
|
||||
className: itemClassName,
|
||||
style: itemStyle
|
||||
} = React.useContext(StepIconSemanticContext);
|
||||
const itemCls = `${prefixCls}-item`;
|
||||
return /*#__PURE__*/React.createElement("div", _extends({}, pickAttrs(restProps, false), {
|
||||
ref: ref,
|
||||
className: clsx(`${itemCls}-icon`, classNames.itemIcon, itemClassName, className),
|
||||
style: {
|
||||
...styles.itemIcon,
|
||||
...itemStyle,
|
||||
...style
|
||||
}
|
||||
}), children);
|
||||
});
|
||||
export default StepIcon;
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import type StepIcon from './StepIcon';
|
||||
export type Status = 'error' | 'process' | 'finish' | 'wait';
|
||||
export type SemanticName = 'root' | 'item' | 'itemWrapper' | 'itemHeader' | 'itemTitle' | 'itemSubtitle' | 'itemSection' | 'itemContent' | 'itemIcon' | 'itemRail';
|
||||
export type ItemSemanticName = 'root' | 'wrapper' | 'header' | 'title' | 'subtitle' | 'section' | 'content' | 'icon' | 'rail';
|
||||
export type ComponentType = React.ComponentType<any> | string;
|
||||
export type StepItem = {
|
||||
/** @deprecated Please use `content` instead. */
|
||||
description?: React.ReactNode;
|
||||
content?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
status?: Status;
|
||||
subTitle?: React.ReactNode;
|
||||
title?: React.ReactNode;
|
||||
classNames?: Partial<Record<ItemSemanticName, string>>;
|
||||
styles?: Partial<Record<ItemSemanticName, React.CSSProperties>>;
|
||||
} & Pick<React.HtmlHTMLAttributes<HTMLLIElement>, 'onClick' | 'className' | 'style'>;
|
||||
export type StepIconRender = (info: {
|
||||
index: number;
|
||||
status: Status;
|
||||
title: React.ReactNode;
|
||||
description: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
node: React.ReactNode;
|
||||
}) => React.ReactNode;
|
||||
export type RenderInfo = {
|
||||
index: number;
|
||||
active: boolean;
|
||||
item: StepItem;
|
||||
};
|
||||
export interface StepsProps {
|
||||
prefixCls?: string;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
classNames?: Partial<Record<SemanticName, string>>;
|
||||
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
||||
rootClassName?: string;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
titlePlacement?: 'horizontal' | 'vertical';
|
||||
/** Internal usage of antd. Do not deps on this. */
|
||||
components?: {
|
||||
root?: ComponentType;
|
||||
item?: ComponentType;
|
||||
};
|
||||
status?: Status;
|
||||
current?: number;
|
||||
initial?: number;
|
||||
items?: StepItem[];
|
||||
onChange?: (current: number) => void;
|
||||
iconRender?: (originNode: React.ReactElement, info: RenderInfo & {
|
||||
components: {
|
||||
Icon: typeof StepIcon;
|
||||
};
|
||||
}) => React.ReactNode;
|
||||
itemRender?: (originNode: React.ReactElement, info: RenderInfo) => React.ReactNode;
|
||||
itemWrapperRender?: (originNode: React.ReactElement) => React.ReactNode;
|
||||
}
|
||||
export default function Steps(props: StepsProps): React.JSX.Element;
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
/* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
|
||||
import { clsx } from 'clsx';
|
||||
import React from 'react';
|
||||
import Step from "./Step";
|
||||
import { StepsContext } from "./Context";
|
||||
const EmptyObject = {};
|
||||
export default function Steps(props) {
|
||||
const {
|
||||
// style
|
||||
prefixCls = 'rc-steps',
|
||||
style,
|
||||
className,
|
||||
classNames = EmptyObject,
|
||||
styles = EmptyObject,
|
||||
rootClassName,
|
||||
// layout
|
||||
orientation,
|
||||
titlePlacement,
|
||||
components,
|
||||
// data
|
||||
status = 'process',
|
||||
current = 0,
|
||||
initial = 0,
|
||||
onChange,
|
||||
items,
|
||||
// render
|
||||
iconRender,
|
||||
itemRender,
|
||||
itemWrapperRender,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
// ============================= layout =============================
|
||||
const isVertical = orientation === 'vertical';
|
||||
const mergedOrientation = isVertical ? 'vertical' : 'horizontal';
|
||||
const mergeTitlePlacement = !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal';
|
||||
|
||||
// ============================= styles =============================
|
||||
const classString = clsx(prefixCls, `${prefixCls}-${mergedOrientation}`, `${prefixCls}-title-${mergeTitlePlacement}`, rootClassName, className, classNames.root);
|
||||
|
||||
// ============================== Data ==============================
|
||||
const mergedItems = React.useMemo(() => (items || []).filter(Boolean), [items]);
|
||||
const statuses = React.useMemo(() => mergedItems.map(({
|
||||
status: itemStatus
|
||||
}, index) => {
|
||||
const stepNumber = initial + index;
|
||||
if (!itemStatus) {
|
||||
if (stepNumber === current) {
|
||||
return status;
|
||||
} else if (stepNumber < current) {
|
||||
return 'finish';
|
||||
}
|
||||
return 'wait';
|
||||
}
|
||||
return itemStatus;
|
||||
}), [mergedItems, status, current, initial]);
|
||||
|
||||
// ============================= events =============================
|
||||
const onStepClick = next => {
|
||||
if (onChange && current !== next) {
|
||||
onChange(next);
|
||||
}
|
||||
};
|
||||
|
||||
// =========================== components ===========================
|
||||
const {
|
||||
root: RootComponent = 'div',
|
||||
item: ItemComponent = 'div'
|
||||
} = components || {};
|
||||
|
||||
// ============================ contexts ============================
|
||||
const stepIconContext = React.useMemo(() => ({
|
||||
prefixCls,
|
||||
classNames,
|
||||
styles,
|
||||
ItemComponent
|
||||
}), [prefixCls, classNames, styles, ItemComponent]);
|
||||
|
||||
// ============================= render =============================
|
||||
const renderStep = (item, index) => {
|
||||
const stepIndex = initial + index;
|
||||
const itemStatus = statuses[index];
|
||||
const nextStatus = statuses[index + 1];
|
||||
const data = {
|
||||
...item,
|
||||
status: itemStatus
|
||||
};
|
||||
return /*#__PURE__*/React.createElement(Step, {
|
||||
key: stepIndex
|
||||
// Style
|
||||
,
|
||||
prefixCls: prefixCls,
|
||||
classNames: classNames,
|
||||
styles: styles
|
||||
// Data
|
||||
,
|
||||
data: data,
|
||||
nextStatus: nextStatus,
|
||||
active: stepIndex === current,
|
||||
index: stepIndex,
|
||||
last: mergedItems.length - 1 === index
|
||||
// Render
|
||||
,
|
||||
iconRender: iconRender,
|
||||
itemRender: itemRender,
|
||||
itemWrapperRender: itemWrapperRender,
|
||||
onClick: onChange && onStepClick
|
||||
});
|
||||
};
|
||||
return /*#__PURE__*/React.createElement(RootComponent, _extends({
|
||||
className: classString,
|
||||
style: {
|
||||
...style,
|
||||
...styles?.root
|
||||
}
|
||||
}, restProps), /*#__PURE__*/React.createElement(StepsContext.Provider, {
|
||||
value: stepIconContext
|
||||
}, mergedItems.map(renderStep)));
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
export interface UnstableContextProps {
|
||||
/**
|
||||
* Used for Timeline component `reverse` prop.
|
||||
* Safe to remove if refactor.
|
||||
*/
|
||||
railFollowPrevStatus?: boolean;
|
||||
}
|
||||
export declare const UnstableContext: React.Context<UnstableContextProps>;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import * as React from 'react';
|
||||
export const UnstableContext = /*#__PURE__*/React.createContext({});
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import Steps, { type StepsProps } from './Steps';
|
||||
import Step from './Step';
|
||||
export { Step };
|
||||
export type { StepsProps };
|
||||
export { UnstableContext } from './UnstableContext';
|
||||
export default Steps;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import Steps from "./Steps";
|
||||
import Step from "./Step";
|
||||
export { Step };
|
||||
export { UnstableContext } from "./UnstableContext";
|
||||
export default Steps;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
import type { ComponentType, StepsProps } from './Steps';
|
||||
export interface StepsContextProps {
|
||||
prefixCls: string;
|
||||
classNames: NonNullable<StepsProps['classNames']>;
|
||||
styles: NonNullable<StepsProps['styles']>;
|
||||
ItemComponent: ComponentType;
|
||||
}
|
||||
export declare const StepsContext: React.Context<StepsContextProps>;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.StepsContext = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
const StepsContext = exports.StepsContext = /*#__PURE__*/React.createContext(null);
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
import type { Status } from './Steps';
|
||||
export interface RailProps {
|
||||
prefixCls: string;
|
||||
className: string;
|
||||
style: React.CSSProperties;
|
||||
status: Status;
|
||||
}
|
||||
export default function Rail(props: RailProps): React.JSX.Element;
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = Rail;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _clsx = require("clsx");
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function Rail(props) {
|
||||
const {
|
||||
prefixCls,
|
||||
className,
|
||||
style,
|
||||
status
|
||||
} = props;
|
||||
const railCls = `${prefixCls}-rail`;
|
||||
|
||||
// ============================= render =============================
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.clsx)(railCls, `${railCls}-${status}`, className),
|
||||
style: style
|
||||
});
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import type { Status, StepItem, StepsProps } from './Steps';
|
||||
export interface StepProps {
|
||||
prefixCls?: string;
|
||||
classNames: StepsProps['classNames'];
|
||||
styles: StepsProps['styles'];
|
||||
data: StepItem;
|
||||
nextStatus?: Status;
|
||||
active?: boolean;
|
||||
index: number;
|
||||
last: boolean;
|
||||
iconRender?: StepsProps['iconRender'];
|
||||
icon?: React.ReactNode;
|
||||
itemRender?: StepsProps['itemRender'];
|
||||
itemWrapperRender?: StepsProps['itemWrapperRender'];
|
||||
onClick: (index: number) => void;
|
||||
}
|
||||
export default function Step(props: StepProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
||||
+178
@@ -0,0 +1,178 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = Step;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _clsx = require("clsx");
|
||||
var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
|
||||
var _Rail = _interopRequireDefault(require("./Rail"));
|
||||
var _UnstableContext = require("./UnstableContext");
|
||||
var _StepIcon = _interopRequireWildcard(require("./StepIcon"));
|
||||
var _Context = require("./Context");
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint react/prop-types: 0 */
|
||||
function hasContent(value) {
|
||||
return value !== undefined && value !== null;
|
||||
}
|
||||
function Step(props) {
|
||||
const {
|
||||
// style
|
||||
prefixCls,
|
||||
classNames,
|
||||
styles,
|
||||
// data
|
||||
data,
|
||||
last,
|
||||
nextStatus,
|
||||
active,
|
||||
index,
|
||||
// render
|
||||
itemRender,
|
||||
iconRender,
|
||||
itemWrapperRender,
|
||||
// events
|
||||
onClick
|
||||
} = props;
|
||||
const itemCls = `${prefixCls}-item`;
|
||||
|
||||
// ======================== Contexts ========================
|
||||
const {
|
||||
railFollowPrevStatus
|
||||
} = React.useContext(_UnstableContext.UnstableContext);
|
||||
const {
|
||||
ItemComponent
|
||||
} = React.useContext(_Context.StepsContext);
|
||||
|
||||
// ========================== Data ==========================
|
||||
const {
|
||||
onClick: onItemClick,
|
||||
title,
|
||||
subTitle,
|
||||
content,
|
||||
description,
|
||||
disabled,
|
||||
icon,
|
||||
status,
|
||||
className,
|
||||
style,
|
||||
classNames: itemClassNames = {},
|
||||
styles: itemStyles = {},
|
||||
...restItemProps
|
||||
} = data;
|
||||
const mergedContent = content ?? description;
|
||||
const renderInfo = {
|
||||
item: {
|
||||
...data,
|
||||
content: mergedContent
|
||||
},
|
||||
index,
|
||||
active
|
||||
};
|
||||
|
||||
// ========================= Click ==========================
|
||||
const clickable = !!(onClick || onItemClick) && !disabled;
|
||||
const accessibilityProps = {};
|
||||
if (clickable) {
|
||||
accessibilityProps.role = 'button';
|
||||
accessibilityProps.tabIndex = 0;
|
||||
accessibilityProps.onClick = e => {
|
||||
onItemClick?.(e);
|
||||
onClick(index);
|
||||
};
|
||||
accessibilityProps.onKeyDown = e => {
|
||||
const {
|
||||
which
|
||||
} = e;
|
||||
if (which === _KeyCode.default.ENTER || which === _KeyCode.default.SPACE) {
|
||||
onClick(index);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ========================= Render =========================
|
||||
const mergedStatus = status || 'wait';
|
||||
const hasTitle = hasContent(title);
|
||||
const hasSubTitle = hasContent(subTitle);
|
||||
const classString = (0, _clsx.clsx)(itemCls, `${itemCls}-${mergedStatus}`, {
|
||||
[`${itemCls}-custom`]: icon,
|
||||
[`${itemCls}-active`]: active,
|
||||
[`${itemCls}-disabled`]: disabled === true,
|
||||
[`${itemCls}-empty-header`]: !hasTitle && !hasSubTitle
|
||||
}, className, classNames.item, itemClassNames.root);
|
||||
let iconNode = /*#__PURE__*/React.createElement(_StepIcon.default, null);
|
||||
if (iconRender) {
|
||||
iconNode = iconRender(iconNode, {
|
||||
...renderInfo,
|
||||
components: {
|
||||
Icon: _StepIcon.default
|
||||
}
|
||||
});
|
||||
}
|
||||
const wrapperNode = /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.clsx)(`${itemCls}-wrapper`, classNames.itemWrapper, itemClassNames.wrapper),
|
||||
style: {
|
||||
...styles.itemWrapper,
|
||||
...itemStyles.wrapper
|
||||
}
|
||||
}, /*#__PURE__*/React.createElement(_StepIcon.StepIconSemanticContext.Provider, {
|
||||
value: {
|
||||
className: itemClassNames.icon,
|
||||
style: itemStyles.icon
|
||||
}
|
||||
}, iconNode), /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.clsx)(`${itemCls}-section`, classNames.itemSection, itemClassNames.section),
|
||||
style: {
|
||||
...styles.itemSection,
|
||||
...itemStyles.section
|
||||
}
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.clsx)(`${itemCls}-header`, classNames.itemHeader, itemClassNames.header),
|
||||
style: {
|
||||
...styles.itemHeader,
|
||||
...itemStyles.header
|
||||
}
|
||||
}, hasTitle && /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.clsx)(`${itemCls}-title`, classNames.itemTitle, itemClassNames.title),
|
||||
style: {
|
||||
...styles.itemTitle,
|
||||
...itemStyles.title
|
||||
}
|
||||
}, title), hasSubTitle && /*#__PURE__*/React.createElement("div", {
|
||||
title: typeof subTitle === 'string' ? subTitle : undefined,
|
||||
className: (0, _clsx.clsx)(`${itemCls}-subtitle`, classNames.itemSubtitle, itemClassNames.subtitle),
|
||||
style: {
|
||||
...styles.itemSubtitle,
|
||||
...itemStyles.subtitle
|
||||
}
|
||||
}, subTitle), !last && /*#__PURE__*/React.createElement(_Rail.default, {
|
||||
prefixCls: itemCls,
|
||||
className: (0, _clsx.clsx)(classNames.itemRail, itemClassNames.rail),
|
||||
style: {
|
||||
...styles.itemRail,
|
||||
...itemStyles.rail
|
||||
},
|
||||
status: railFollowPrevStatus ? status : nextStatus
|
||||
})), hasContent(mergedContent) && /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.clsx)(`${itemCls}-content`, classNames.itemContent, itemClassNames.content),
|
||||
style: {
|
||||
...styles.itemContent,
|
||||
...itemStyles.content
|
||||
}
|
||||
}, mergedContent)));
|
||||
let stepNode = /*#__PURE__*/React.createElement(ItemComponent, _extends({}, restItemProps, accessibilityProps, {
|
||||
className: classString,
|
||||
style: {
|
||||
...styles.item,
|
||||
...itemStyles.root,
|
||||
...style
|
||||
}
|
||||
}), itemWrapperRender ? itemWrapperRender(wrapperNode) : wrapperNode);
|
||||
if (itemRender) {
|
||||
stepNode = itemRender(stepNode, renderInfo) || null;
|
||||
}
|
||||
return stepNode;
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
export interface StepIconSemanticContextProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
export declare const StepIconSemanticContext: React.Context<StepIconSemanticContextProps>;
|
||||
export type StepIconProps = React.HTMLAttributes<HTMLDivElement>;
|
||||
declare const StepIcon: React.ForwardRefExoticComponent<StepIconProps & React.RefAttributes<HTMLDivElement>>;
|
||||
export default StepIcon;
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.StepIconSemanticContext = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _clsx = require("clsx");
|
||||
var _Context = require("./Context");
|
||||
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
const StepIconSemanticContext = exports.StepIconSemanticContext = /*#__PURE__*/React.createContext({});
|
||||
const StepIcon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
prefixCls,
|
||||
classNames,
|
||||
styles
|
||||
} = React.useContext(_Context.StepsContext);
|
||||
const {
|
||||
className: itemClassName,
|
||||
style: itemStyle
|
||||
} = React.useContext(StepIconSemanticContext);
|
||||
const itemCls = `${prefixCls}-item`;
|
||||
return /*#__PURE__*/React.createElement("div", _extends({}, (0, _pickAttrs.default)(restProps, false), {
|
||||
ref: ref,
|
||||
className: (0, _clsx.clsx)(`${itemCls}-icon`, classNames.itemIcon, itemClassName, className),
|
||||
style: {
|
||||
...styles.itemIcon,
|
||||
...itemStyle,
|
||||
...style
|
||||
}
|
||||
}), children);
|
||||
});
|
||||
var _default = exports.default = StepIcon;
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import type StepIcon from './StepIcon';
|
||||
export type Status = 'error' | 'process' | 'finish' | 'wait';
|
||||
export type SemanticName = 'root' | 'item' | 'itemWrapper' | 'itemHeader' | 'itemTitle' | 'itemSubtitle' | 'itemSection' | 'itemContent' | 'itemIcon' | 'itemRail';
|
||||
export type ItemSemanticName = 'root' | 'wrapper' | 'header' | 'title' | 'subtitle' | 'section' | 'content' | 'icon' | 'rail';
|
||||
export type ComponentType = React.ComponentType<any> | string;
|
||||
export type StepItem = {
|
||||
/** @deprecated Please use `content` instead. */
|
||||
description?: React.ReactNode;
|
||||
content?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
status?: Status;
|
||||
subTitle?: React.ReactNode;
|
||||
title?: React.ReactNode;
|
||||
classNames?: Partial<Record<ItemSemanticName, string>>;
|
||||
styles?: Partial<Record<ItemSemanticName, React.CSSProperties>>;
|
||||
} & Pick<React.HtmlHTMLAttributes<HTMLLIElement>, 'onClick' | 'className' | 'style'>;
|
||||
export type StepIconRender = (info: {
|
||||
index: number;
|
||||
status: Status;
|
||||
title: React.ReactNode;
|
||||
description: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
node: React.ReactNode;
|
||||
}) => React.ReactNode;
|
||||
export type RenderInfo = {
|
||||
index: number;
|
||||
active: boolean;
|
||||
item: StepItem;
|
||||
};
|
||||
export interface StepsProps {
|
||||
prefixCls?: string;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
classNames?: Partial<Record<SemanticName, string>>;
|
||||
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
|
||||
rootClassName?: string;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
titlePlacement?: 'horizontal' | 'vertical';
|
||||
/** Internal usage of antd. Do not deps on this. */
|
||||
components?: {
|
||||
root?: ComponentType;
|
||||
item?: ComponentType;
|
||||
};
|
||||
status?: Status;
|
||||
current?: number;
|
||||
initial?: number;
|
||||
items?: StepItem[];
|
||||
onChange?: (current: number) => void;
|
||||
iconRender?: (originNode: React.ReactElement, info: RenderInfo & {
|
||||
components: {
|
||||
Icon: typeof StepIcon;
|
||||
};
|
||||
}) => React.ReactNode;
|
||||
itemRender?: (originNode: React.ReactElement, info: RenderInfo) => React.ReactNode;
|
||||
itemWrapperRender?: (originNode: React.ReactElement) => React.ReactNode;
|
||||
}
|
||||
export default function Steps(props: StepsProps): React.JSX.Element;
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = Steps;
|
||||
var _clsx = require("clsx");
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
var _Step = _interopRequireDefault(require("./Step"));
|
||||
var _Context = require("./Context");
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
|
||||
const EmptyObject = {};
|
||||
function Steps(props) {
|
||||
const {
|
||||
// style
|
||||
prefixCls = 'rc-steps',
|
||||
style,
|
||||
className,
|
||||
classNames = EmptyObject,
|
||||
styles = EmptyObject,
|
||||
rootClassName,
|
||||
// layout
|
||||
orientation,
|
||||
titlePlacement,
|
||||
components,
|
||||
// data
|
||||
status = 'process',
|
||||
current = 0,
|
||||
initial = 0,
|
||||
onChange,
|
||||
items,
|
||||
// render
|
||||
iconRender,
|
||||
itemRender,
|
||||
itemWrapperRender,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
// ============================= layout =============================
|
||||
const isVertical = orientation === 'vertical';
|
||||
const mergedOrientation = isVertical ? 'vertical' : 'horizontal';
|
||||
const mergeTitlePlacement = !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal';
|
||||
|
||||
// ============================= styles =============================
|
||||
const classString = (0, _clsx.clsx)(prefixCls, `${prefixCls}-${mergedOrientation}`, `${prefixCls}-title-${mergeTitlePlacement}`, rootClassName, className, classNames.root);
|
||||
|
||||
// ============================== Data ==============================
|
||||
const mergedItems = _react.default.useMemo(() => (items || []).filter(Boolean), [items]);
|
||||
const statuses = _react.default.useMemo(() => mergedItems.map(({
|
||||
status: itemStatus
|
||||
}, index) => {
|
||||
const stepNumber = initial + index;
|
||||
if (!itemStatus) {
|
||||
if (stepNumber === current) {
|
||||
return status;
|
||||
} else if (stepNumber < current) {
|
||||
return 'finish';
|
||||
}
|
||||
return 'wait';
|
||||
}
|
||||
return itemStatus;
|
||||
}), [mergedItems, status, current, initial]);
|
||||
|
||||
// ============================= events =============================
|
||||
const onStepClick = next => {
|
||||
if (onChange && current !== next) {
|
||||
onChange(next);
|
||||
}
|
||||
};
|
||||
|
||||
// =========================== components ===========================
|
||||
const {
|
||||
root: RootComponent = 'div',
|
||||
item: ItemComponent = 'div'
|
||||
} = components || {};
|
||||
|
||||
// ============================ contexts ============================
|
||||
const stepIconContext = _react.default.useMemo(() => ({
|
||||
prefixCls,
|
||||
classNames,
|
||||
styles,
|
||||
ItemComponent
|
||||
}), [prefixCls, classNames, styles, ItemComponent]);
|
||||
|
||||
// ============================= render =============================
|
||||
const renderStep = (item, index) => {
|
||||
const stepIndex = initial + index;
|
||||
const itemStatus = statuses[index];
|
||||
const nextStatus = statuses[index + 1];
|
||||
const data = {
|
||||
...item,
|
||||
status: itemStatus
|
||||
};
|
||||
return /*#__PURE__*/_react.default.createElement(_Step.default, {
|
||||
key: stepIndex
|
||||
// Style
|
||||
,
|
||||
prefixCls: prefixCls,
|
||||
classNames: classNames,
|
||||
styles: styles
|
||||
// Data
|
||||
,
|
||||
data: data,
|
||||
nextStatus: nextStatus,
|
||||
active: stepIndex === current,
|
||||
index: stepIndex,
|
||||
last: mergedItems.length - 1 === index
|
||||
// Render
|
||||
,
|
||||
iconRender: iconRender,
|
||||
itemRender: itemRender,
|
||||
itemWrapperRender: itemWrapperRender,
|
||||
onClick: onChange && onStepClick
|
||||
});
|
||||
};
|
||||
return /*#__PURE__*/_react.default.createElement(RootComponent, _extends({
|
||||
className: classString,
|
||||
style: {
|
||||
...style,
|
||||
...styles?.root
|
||||
}
|
||||
}, restProps), /*#__PURE__*/_react.default.createElement(_Context.StepsContext.Provider, {
|
||||
value: stepIconContext
|
||||
}, mergedItems.map(renderStep)));
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
export interface UnstableContextProps {
|
||||
/**
|
||||
* Used for Timeline component `reverse` prop.
|
||||
* Safe to remove if refactor.
|
||||
*/
|
||||
railFollowPrevStatus?: boolean;
|
||||
}
|
||||
export declare const UnstableContext: React.Context<UnstableContextProps>;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.UnstableContext = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
const UnstableContext = exports.UnstableContext = /*#__PURE__*/React.createContext({});
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import Steps, { type StepsProps } from './Steps';
|
||||
import Step from './Step';
|
||||
export { Step };
|
||||
export type { StepsProps };
|
||||
export { UnstableContext } from './UnstableContext';
|
||||
export default Steps;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "Step", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _Step.default;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(exports, "UnstableContext", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _UnstableContext.UnstableContext;
|
||||
}
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _Steps = _interopRequireDefault(require("./Steps"));
|
||||
var _Step = _interopRequireDefault(require("./Step"));
|
||||
var _UnstableContext = require("./UnstableContext");
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
var _default = exports.default = _Steps.default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
"use strict";
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
{
|
||||
"name": "@rc-component/steps",
|
||||
"version": "1.2.2",
|
||||
"description": "steps ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"react-steps"
|
||||
],
|
||||
"homepage": "http://github.com/react-component/steps",
|
||||
"bugs": {
|
||||
"url": "http://github.com/react-component/steps/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": " git+ssh://git@github.com/react-component/steps.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "afc163",
|
||||
"email": "afc163@gmail.com"
|
||||
}
|
||||
],
|
||||
"main": "./lib/index",
|
||||
"module": "./es/index",
|
||||
"types": "./lib/index.d.ts",
|
||||
"files": [
|
||||
"assets/*.css",
|
||||
"es",
|
||||
"lib"
|
||||
],
|
||||
"scripts": {
|
||||
"compile": "father build && lessc assets/index.less assets/index.css",
|
||||
"coverage": "rc-test --coverage",
|
||||
"docs:build": "dumi build",
|
||||
"docs:deploy": "gh-pages -d .doc",
|
||||
"gh-pages": "npm run docs:build && npm run docs:deploy",
|
||||
"lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
|
||||
"prepare": "husky install && dumi setup",
|
||||
"prepublishOnly": "npm run compile && rc-np",
|
||||
"prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
|
||||
"postpublish": "npm run gh-pages",
|
||||
"start": "dumi dev",
|
||||
"test": "rc-test",
|
||||
"now-build": "npm run docs:build"
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*.{js,jsx,tsx,ts,md,json}": [
|
||||
"prettier --write"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@rc-component/util": "^1.2.1",
|
||||
"clsx": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rc-component/father-plugin": "^2.0.2",
|
||||
"@rc-component/np": "^1.0.0",
|
||||
"@testing-library/jest-dom": "^6.4.5",
|
||||
"@testing-library/react": "^15.0.6",
|
||||
"@types/jest": "^29.4.0",
|
||||
"@types/node": "^24.5.2",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@umijs/fabric": "^4.0.1",
|
||||
"dumi": "^2.0.0",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-plugin-jest": "^27.6.0",
|
||||
"eslint-plugin-unicorn": "^50.0.1",
|
||||
"father": "^4",
|
||||
"gh-pages": "^6.1.0",
|
||||
"glob": "^10.0.0",
|
||||
"husky": "^8.0.1",
|
||||
"less": "^4.1.3",
|
||||
"lint-staged": "^15.2.0",
|
||||
"prettier": "^3.1.0",
|
||||
"rc-test": "^7.0.9",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"typescript": "^5.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.9.0",
|
||||
"react-dom": ">=16.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.x"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user