1
This commit is contained in:
+283
@@ -0,0 +1,283 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons/CheckOutlined"));
|
||||
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
|
||||
var _steps = _interopRequireDefault(require("@rc-component/steps"));
|
||||
var _clsx = require("clsx");
|
||||
var _hooks = require("../_util/hooks");
|
||||
var _warning = require("../_util/warning");
|
||||
var _wave = _interopRequireDefault(require("../_util/wave"));
|
||||
var _interface = require("../_util/wave/interface");
|
||||
var _context = require("../config-provider/context");
|
||||
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
|
||||
var _useBreakpoint = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
|
||||
var _genStyleUtils = require("../theme/util/genStyleUtils");
|
||||
var _tooltip = _interopRequireDefault(require("../tooltip"));
|
||||
var _context2 = require("./context");
|
||||
var _PanelArrow = _interopRequireDefault(require("./PanelArrow"));
|
||||
var _ProgressIcon = _interopRequireDefault(require("./ProgressIcon"));
|
||||
var _style = _interopRequireDefault(require("./style"));
|
||||
const waveEffectClassNames = {
|
||||
itemIcon: _interface.TARGET_CLS
|
||||
};
|
||||
const Steps = props => {
|
||||
const {
|
||||
// Style
|
||||
size,
|
||||
className,
|
||||
rootClassName,
|
||||
style,
|
||||
variant = 'filled',
|
||||
type,
|
||||
classNames,
|
||||
styles,
|
||||
// Layout
|
||||
direction,
|
||||
orientation,
|
||||
responsive = true,
|
||||
progressDot,
|
||||
labelPlacement,
|
||||
titlePlacement,
|
||||
ellipsis,
|
||||
offset = 0,
|
||||
// Data
|
||||
items,
|
||||
percent,
|
||||
current = 0,
|
||||
onChange,
|
||||
// Render
|
||||
iconRender,
|
||||
// MISC
|
||||
...restProps
|
||||
} = props;
|
||||
const internalContent = React.useContext(_context2.InternalContext);
|
||||
const contextContent = (0, _context.useComponentConfig)('steps');
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction: rtlDirection,
|
||||
className: contextClassName,
|
||||
style: contextStyle
|
||||
} = contextContent;
|
||||
let contextClassNames;
|
||||
let contextStyles;
|
||||
let components = {};
|
||||
if (internalContent) {
|
||||
components = {
|
||||
root: internalContent.rootComponent,
|
||||
item: internalContent.itemComponent
|
||||
};
|
||||
} else {
|
||||
({
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles
|
||||
} = contextContent);
|
||||
}
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const prefixCls = getPrefixCls('steps', props.prefixCls);
|
||||
const itemIconCls = `${prefixCls}-item-icon`;
|
||||
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
|
||||
const [varName] = (0, _genStyleUtils.genCssVar)(rootPrefixCls, 'cmp-steps');
|
||||
// ============================= Size =============================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('Steps');
|
||||
warning.deprecated(size !== 'default', 'size="default"', 'size="medium"');
|
||||
}
|
||||
const mergedSize = (0, _useSize.default)(size);
|
||||
// ============================= Item =============================
|
||||
const mergedItems = React.useMemo(() => (items || []).filter(Boolean), [items]);
|
||||
// ============================ Layout ============================
|
||||
const {
|
||||
xs
|
||||
} = (0, _useBreakpoint.default)(responsive);
|
||||
// Type
|
||||
const mergedType = React.useMemo(() => {
|
||||
if (type && type !== 'default') {
|
||||
return type;
|
||||
}
|
||||
if (progressDot) {
|
||||
return 'dot';
|
||||
}
|
||||
return type;
|
||||
}, [progressDot, type]);
|
||||
const isInline = mergedType === 'inline';
|
||||
const isDot = mergedType === 'dot' || mergedType === 'inline';
|
||||
// Progress Dot Render function
|
||||
const legacyProgressDotRender = React.useMemo(() => {
|
||||
return mergedType === 'dot' && typeof progressDot === 'function' ? progressDot : undefined;
|
||||
}, [mergedType, progressDot]);
|
||||
const mergedOrientation = React.useMemo(() => {
|
||||
const nextOrientation = orientation || direction;
|
||||
if (mergedType === 'panel') {
|
||||
return 'horizontal';
|
||||
}
|
||||
return responsive && xs || nextOrientation === 'vertical' ? 'vertical' : 'horizontal';
|
||||
}, [orientation, direction, mergedType, responsive, xs]);
|
||||
const mergedTitlePlacement = React.useMemo(() => {
|
||||
if (isDot || mergedOrientation === 'vertical') {
|
||||
return mergedOrientation === 'vertical' ? 'horizontal' : 'vertical';
|
||||
}
|
||||
if (type === 'navigation') {
|
||||
return 'horizontal';
|
||||
}
|
||||
return titlePlacement || labelPlacement || 'horizontal';
|
||||
}, [isDot, labelPlacement, mergedOrientation, titlePlacement, type]);
|
||||
// ========================== Percentage ==========================
|
||||
const mergedPercent = isInline ? undefined : percent;
|
||||
// =========== Merged Props for Semantic ===========
|
||||
const mergedProps = {
|
||||
...props,
|
||||
variant,
|
||||
size: mergedSize,
|
||||
type: mergedType,
|
||||
orientation: mergedOrientation,
|
||||
titlePlacement: mergedTitlePlacement,
|
||||
current,
|
||||
percent: mergedPercent,
|
||||
responsive,
|
||||
offset
|
||||
};
|
||||
// ============================ Styles ============================
|
||||
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([waveEffectClassNames, contextClassNames, classNames], [contextStyles, styles], {
|
||||
props: mergedProps
|
||||
});
|
||||
// ============================= Icon =============================
|
||||
const internalIconRender = (_, info) => {
|
||||
const {
|
||||
item,
|
||||
index,
|
||||
active,
|
||||
components: {
|
||||
Icon: StepIcon
|
||||
}
|
||||
} = info;
|
||||
const {
|
||||
status,
|
||||
icon
|
||||
} = item;
|
||||
let iconContent = null;
|
||||
if (isDot || icon) {
|
||||
iconContent = icon;
|
||||
} else {
|
||||
switch (status) {
|
||||
case 'finish':
|
||||
iconContent = /*#__PURE__*/React.createElement(_CheckOutlined.default, {
|
||||
className: `${itemIconCls}-finish`
|
||||
});
|
||||
break;
|
||||
case 'error':
|
||||
iconContent = /*#__PURE__*/React.createElement(_CloseOutlined.default, {
|
||||
className: `${itemIconCls}-error`
|
||||
});
|
||||
break;
|
||||
default:
|
||||
{
|
||||
let numNode = /*#__PURE__*/React.createElement("span", {
|
||||
className: `${itemIconCls}-number`
|
||||
}, info.index + 1);
|
||||
if (status === 'process' && mergedPercent !== undefined) {
|
||||
numNode = /*#__PURE__*/React.createElement(_ProgressIcon.default, {
|
||||
prefixCls: prefixCls,
|
||||
rootPrefixCls: rootPrefixCls,
|
||||
percent: mergedPercent
|
||||
}, numNode);
|
||||
}
|
||||
iconContent = numNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
let iconNode = /*#__PURE__*/React.createElement(StepIcon, null, iconContent);
|
||||
// Custom Render Props
|
||||
if (iconRender) {
|
||||
iconNode = iconRender(iconNode, {
|
||||
index,
|
||||
active,
|
||||
item,
|
||||
components: {
|
||||
Icon: StepIcon
|
||||
}
|
||||
});
|
||||
} else if (typeof legacyProgressDotRender === 'function') {
|
||||
iconNode = legacyProgressDotRender(iconNode, {
|
||||
index,
|
||||
...item
|
||||
});
|
||||
}
|
||||
return iconNode;
|
||||
};
|
||||
// ============================ Custom ============================
|
||||
const itemRender = (itemNode, itemInfo) => {
|
||||
let content = itemNode;
|
||||
if (isInline && itemInfo.item.content) {
|
||||
content = /*#__PURE__*/React.createElement(_tooltip.default, {
|
||||
destroyOnHidden: true,
|
||||
title: itemInfo.item.content
|
||||
}, itemNode);
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(_wave.default, {
|
||||
component: "Steps",
|
||||
disabled: itemInfo.item.disabled || !onChange,
|
||||
colorSource: variant === 'filled' ? 'color' : null
|
||||
}, content);
|
||||
};
|
||||
const itemWrapperRender = mergedType === 'panel' ? itemNode => {
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null, itemNode, /*#__PURE__*/React.createElement(_PanelArrow.default, {
|
||||
prefixCls: prefixCls
|
||||
}));
|
||||
} : undefined;
|
||||
// ============================ Styles ============================
|
||||
const mergedStyle = {
|
||||
[varName('items-offset')]: `${offset}`,
|
||||
...contextStyle,
|
||||
...style
|
||||
};
|
||||
const stepsClassName = (0, _clsx.clsx)(contextClassName, `${prefixCls}-${variant}`, {
|
||||
[`${prefixCls}-${mergedType}`]: mergedType !== 'dot' ? mergedType : false,
|
||||
[`${prefixCls}-rtl`]: rtlDirection === 'rtl',
|
||||
[`${prefixCls}-dot`]: isDot,
|
||||
[`${prefixCls}-ellipsis`]: ellipsis,
|
||||
[`${prefixCls}-with-progress`]: mergedPercent !== undefined,
|
||||
[`${prefixCls}-small`]: mergedSize === 'small'
|
||||
}, className, rootClassName, hashId, cssVarCls);
|
||||
// =========================== Warning ============================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('Steps');
|
||||
warning.deprecated(!labelPlacement, 'labelPlacement', 'titlePlacement');
|
||||
warning.deprecated(!progressDot, 'progressDot', 'type="dot"');
|
||||
warning.deprecated(!direction, 'direction', 'orientation');
|
||||
warning.deprecated(mergedItems.every(item => !item.description), 'items.description', 'items.content');
|
||||
}
|
||||
// ============================ Render ============================
|
||||
return /*#__PURE__*/React.createElement(_steps.default, {
|
||||
...restProps,
|
||||
// Style
|
||||
prefixCls: prefixCls,
|
||||
className: stepsClassName,
|
||||
style: mergedStyle,
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles,
|
||||
// Layout
|
||||
orientation: mergedOrientation,
|
||||
titlePlacement: mergedTitlePlacement,
|
||||
components: components,
|
||||
// Data
|
||||
current: current,
|
||||
items: mergedItems,
|
||||
onChange: onChange,
|
||||
// Render
|
||||
iconRender: internalIconRender,
|
||||
itemRender: itemRender,
|
||||
itemWrapperRender: itemWrapperRender
|
||||
});
|
||||
};
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Steps.displayName = 'Steps';
|
||||
}
|
||||
var _default = exports.default = Steps;
|
||||
Reference in New Issue
Block a user