1
This commit is contained in:
+58
@@ -0,0 +1,58 @@
|
||||
import * as React from 'react';
|
||||
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
|
||||
import type { GetProp, LiteralUnion } from '../_util/type';
|
||||
import type { StepsProps, StepsSemanticClassNames, StepsSemanticName, StepsSemanticStyles } from '../steps';
|
||||
export type ItemPosition = 'left' | 'right' | 'start' | 'end';
|
||||
export type ItemPlacement = 'start' | 'end';
|
||||
export type TimelineMode = ItemPosition | 'alternate';
|
||||
type Color = 'blue' | 'red' | 'green' | 'gray';
|
||||
export interface TimelineItemType {
|
||||
color?: LiteralUnion<Color>;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
classNames?: GetProp<StepsProps, 'items'>[number]['classNames'];
|
||||
styles?: GetProp<StepsProps, 'items'>[number]['styles'];
|
||||
placement?: ItemPlacement;
|
||||
/** @deprecated please use `placement` instead */
|
||||
position?: ItemPosition;
|
||||
loading?: boolean;
|
||||
key?: React.Key;
|
||||
title?: React.ReactNode;
|
||||
content?: React.ReactNode;
|
||||
/** @deprecated Please use `title` instead */
|
||||
label?: React.ReactNode;
|
||||
/** @deprecated Please use `content` instead */
|
||||
children?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
/** @deprecated Please use `icon` instead */
|
||||
dot?: React.ReactNode;
|
||||
}
|
||||
export type TimelineSemanticName = StepsSemanticName;
|
||||
export type TimelineSemanticClassNames = StepsSemanticClassNames;
|
||||
export type TimelineSemanticStyles = StepsSemanticStyles;
|
||||
export type TimelineClassNamesType = SemanticClassNamesType<TimelineProps, TimelineSemanticClassNames>;
|
||||
export type TimelineStylesType = SemanticStylesType<TimelineProps, TimelineSemanticStyles>;
|
||||
export interface TimelineProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
classNames?: TimelineClassNamesType;
|
||||
styles?: TimelineStylesType;
|
||||
rootClassName?: string;
|
||||
variant?: StepsProps['variant'];
|
||||
mode?: TimelineMode;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
titleSpan?: string | number;
|
||||
items?: TimelineItemType[];
|
||||
children?: React.ReactNode;
|
||||
/** @deprecated Please add pending item in `items` directly */
|
||||
pending?: React.ReactNode;
|
||||
/** @deprecated Please add pending item in `items` directly */
|
||||
pendingDot?: React.ReactNode;
|
||||
reverse?: boolean;
|
||||
}
|
||||
type CompoundedComponent = React.FC<TimelineProps> & {
|
||||
Item: React.FC<TimelineItemType>;
|
||||
};
|
||||
declare const Timeline: CompoundedComponent;
|
||||
export default Timeline;
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _steps = require("@rc-component/steps");
|
||||
var _clsx = require("clsx");
|
||||
var _hooks = require("../_util/hooks");
|
||||
var _is = require("../_util/is");
|
||||
var _warning = require("../_util/warning");
|
||||
var _context = require("../config-provider/context");
|
||||
var _steps2 = _interopRequireDefault(require("../steps"));
|
||||
var _context2 = require("../steps/context");
|
||||
var _genStyleUtils = require("../theme/util/genStyleUtils");
|
||||
var _style = _interopRequireDefault(require("./style"));
|
||||
var _useItems = _interopRequireDefault(require("./useItems"));
|
||||
const stepInternalContext = {
|
||||
rootComponent: 'ol',
|
||||
itemComponent: 'li'
|
||||
};
|
||||
const Timeline = props => {
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
className: contextClassName,
|
||||
style: contextStyle,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles
|
||||
} = (0, _context.useComponentConfig)('timeline');
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
// Style
|
||||
className,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
// Design
|
||||
variant = 'outlined',
|
||||
mode,
|
||||
orientation = 'vertical',
|
||||
titleSpan,
|
||||
// Data
|
||||
items,
|
||||
children,
|
||||
reverse,
|
||||
// Legacy Pending
|
||||
pending,
|
||||
pendingDot,
|
||||
...restProps
|
||||
} = props;
|
||||
// ===================== MISC =======================
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
|
||||
// ==================== Styles ======================
|
||||
// This will be duplicated with Steps's hashId & cssVarCls when they have same token
|
||||
// But this is safe to keep here since web will do nothing
|
||||
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
|
||||
const [varName] = (0, _genStyleUtils.genCssVar)(rootPrefixCls, 'timeline');
|
||||
const stepsClassNames = React.useMemo(() => ({
|
||||
item: `${prefixCls}-item`,
|
||||
itemTitle: `${prefixCls}-item-title`,
|
||||
itemIcon: `${prefixCls}-item-icon`,
|
||||
itemContent: `${prefixCls}-item-content`,
|
||||
itemRail: `${prefixCls}-item-rail`,
|
||||
itemWrapper: `${prefixCls}-item-wrapper`,
|
||||
itemSection: `${prefixCls}-item-section`,
|
||||
itemHeader: `${prefixCls}-item-header`
|
||||
}), [prefixCls]);
|
||||
// ===================== Mode =======================
|
||||
const mergedMode = React.useMemo(() => {
|
||||
// Deprecated
|
||||
if (mode === 'left') {
|
||||
return 'start';
|
||||
}
|
||||
if (mode === 'right') {
|
||||
return 'end';
|
||||
}
|
||||
// Fill
|
||||
const modeList = ['alternate', 'start', 'end'];
|
||||
return modeList.includes(mode) ? mode : 'start';
|
||||
}, [mode]);
|
||||
// ===================== Data =======================
|
||||
const rawItems = (0, _useItems.default)(rootPrefixCls, prefixCls, mergedMode, items, children, pending, pendingDot);
|
||||
const mergedItems = React.useMemo(() => reverse ? (0, _toConsumableArray2.default)(rawItems).reverse() : rawItems, [reverse, rawItems]);
|
||||
// =========== Merged Props for Semantic ===========
|
||||
const mergedProps = {
|
||||
...props,
|
||||
variant,
|
||||
mode: mergedMode,
|
||||
orientation,
|
||||
items: mergedItems
|
||||
};
|
||||
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([stepsClassNames, contextClassNames, classNames], [contextStyles, styles], {
|
||||
props: mergedProps
|
||||
});
|
||||
const stepContext = React.useMemo(() => ({
|
||||
railFollowPrevStatus: reverse
|
||||
}), [reverse]);
|
||||
// ==================== Design ======================
|
||||
const layoutAlternate = React.useMemo(() => mergedMode === 'alternate' || orientation === 'vertical' && mergedItems.some(item => item.title), [mergedItems, mergedMode, orientation]);
|
||||
// ===================== Warn =======================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('Timeline');
|
||||
// Item
|
||||
warning.deprecated(!children, 'Timeline.Item', 'items');
|
||||
// Pending
|
||||
const pendingWarning = 'You can create a `item` as pending node directly.';
|
||||
warning.deprecated(!pending, 'pending', 'items', pendingWarning);
|
||||
warning.deprecated(!pendingDot, 'pendingDot', 'items', pendingWarning);
|
||||
// Mode
|
||||
warning.deprecated(mode !== 'left' && mode !== 'right', 'mode=left|right', 'mode=start|end');
|
||||
// Item Props
|
||||
const warnItems = items || [];
|
||||
[['label', 'title'], ['children', 'content'], ['dot', 'icon'], ['position', 'placement']].forEach(([oldProp, newProp]) => {
|
||||
warning.deprecated(warnItems.every(item => !item[oldProp]), `items.${oldProp}`, `items.${newProp}`);
|
||||
});
|
||||
}
|
||||
// ==================== Render ======================
|
||||
const stepStyle = {
|
||||
...contextStyle,
|
||||
...style
|
||||
};
|
||||
if ((0, _is.isNonNullable)(titleSpan) && mergedMode !== 'alternate') {
|
||||
if ((0, _is.isNumber)(titleSpan)) {
|
||||
stepStyle[varName('head-span')] = titleSpan;
|
||||
} else {
|
||||
stepStyle[varName('head-span-ptg')] = titleSpan;
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(_context2.InternalContext.Provider, {
|
||||
value: stepInternalContext
|
||||
}, /*#__PURE__*/React.createElement(_steps.UnstableContext.Provider, {
|
||||
value: stepContext
|
||||
}, /*#__PURE__*/React.createElement(_steps2.default, {
|
||||
...restProps,
|
||||
// Style
|
||||
className: (0, _clsx.clsx)(prefixCls, contextClassName, className, hashId, cssVarCls, {
|
||||
[`${prefixCls}-${orientation}`]: orientation === 'horizontal',
|
||||
[`${prefixCls}-layout-alternate`]: layoutAlternate,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl'
|
||||
}),
|
||||
style: stepStyle,
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles,
|
||||
// Design
|
||||
variant: variant,
|
||||
orientation: orientation,
|
||||
// Layout
|
||||
type: "dot",
|
||||
items: mergedItems,
|
||||
current: mergedItems.length - 1
|
||||
})));
|
||||
};
|
||||
Timeline.Item = () => {};
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Timeline.displayName = 'Timeline';
|
||||
}
|
||||
var _default = exports.default = Timeline;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import Timeline from './Timeline';
|
||||
export type { TimelineItemType as TimelineItemProps, TimelineProps, TimelineSemanticClassNames, TimelineSemanticName, TimelineSemanticStyles, } from './Timeline';
|
||||
export default Timeline;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _Timeline = _interopRequireDefault(require("./Timeline"));
|
||||
var _default = exports.default = _Timeline.default;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { TimelineToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
declare const genHorizontalStyle: GenerateStyle<TimelineToken, CSSObject>;
|
||||
export default genHorizontalStyle;
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
||||
const genHorizontalStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
fontHeight,
|
||||
antCls,
|
||||
paddingXS
|
||||
} = token;
|
||||
const [stepsVarName, stepsVarRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
|
||||
const [timelineVarName, timelineVarRef] = (0, _genStyleUtils.genCssVar)(antCls, 'timeline');
|
||||
const itemCls = `${componentCls}-item`;
|
||||
return {
|
||||
[`${componentCls}-horizontal`]: {
|
||||
[stepsVarName('title-vertical-row-gap')]: paddingXS,
|
||||
[timelineVarName('content-height')]: (0, _cssinjs.unit)(fontHeight),
|
||||
// =============================================================
|
||||
// == Share ==
|
||||
// =============================================================
|
||||
alignItems: 'stretch',
|
||||
// =============================================================
|
||||
// == Alternate ==
|
||||
// =============================================================
|
||||
[`&${componentCls}-layout-alternate`]: {
|
||||
[itemCls]: {
|
||||
[`${itemCls}-wrapper`]: {
|
||||
[timelineVarName('alternate-content-offset')]: `calc(${timelineVarRef('content-height')} + ${stepsVarRef('title-vertical-row-gap')} * 2 + ${stepsVarRef('icon-size-max')})`,
|
||||
height: `calc(${timelineVarRef('content-height')} * 2 + ${stepsVarRef('title-vertical-row-gap')} * 2 + ${stepsVarRef('icon-size-max')})`
|
||||
},
|
||||
// Icon
|
||||
[`${itemCls}-icon`]: {
|
||||
position: 'absolute'
|
||||
},
|
||||
// Icon & Rail
|
||||
[`${itemCls}-icon, ${itemCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
margin: 0
|
||||
},
|
||||
// Title & Content
|
||||
[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: 'unset'
|
||||
},
|
||||
// Title
|
||||
[`${itemCls}-title`]: {
|
||||
position: 'absolute',
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: '50%'
|
||||
},
|
||||
transform: 'translateX(-50%)'
|
||||
},
|
||||
// Content
|
||||
[`${itemCls}-content`]: {
|
||||
position: 'absolute',
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: '50%'
|
||||
},
|
||||
transform: 'translateX(-50%)'
|
||||
},
|
||||
// Placement
|
||||
'&-placement-start': {
|
||||
[`${itemCls}-title`]: {
|
||||
bottom: timelineVarRef('alternate-content-offset')
|
||||
},
|
||||
[`${itemCls}-content`]: {
|
||||
top: timelineVarRef('alternate-content-offset')
|
||||
}
|
||||
},
|
||||
'&-placement-end': {
|
||||
[`${itemCls}-title`]: {
|
||||
top: timelineVarRef('alternate-content-offset')
|
||||
},
|
||||
[`${itemCls}-content`]: {
|
||||
bottom: timelineVarRef('alternate-content-offset')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// =============================================================
|
||||
// == Same Side ==
|
||||
// =============================================================
|
||||
[`&:not(${componentCls}-layout-alternate)`]: {
|
||||
[`${itemCls}-placement-end`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
[`${itemCls}-wrapper`]: {
|
||||
flex: 'auto',
|
||||
flexDirection: 'column-reverse'
|
||||
},
|
||||
[`${itemCls}-rail`]: {
|
||||
top: 'auto',
|
||||
bottom: stepsVarRef('horizontal-rail-margin'),
|
||||
transform: 'translateY(50%)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
var _default = exports.default = genHorizontalStyle;
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import type { FullToken, GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 轨迹颜色
|
||||
* @descEN Line color
|
||||
*/
|
||||
tailColor?: string;
|
||||
/**
|
||||
* @desc 轨迹宽度
|
||||
* @descEN Line width
|
||||
*/
|
||||
tailWidth?: number | string;
|
||||
/**
|
||||
* @desc 节点边框宽度
|
||||
* @descEN Border width of node
|
||||
*/
|
||||
dotBorderWidth?: number | string;
|
||||
/**
|
||||
* @desc 节点大小
|
||||
* @descEN Node size
|
||||
*/
|
||||
dotSize?: number | string;
|
||||
/**
|
||||
* @desc 节点背景色
|
||||
* @descEN Background color of node
|
||||
*/
|
||||
dotBg?: string;
|
||||
/**
|
||||
* @desc 时间项下间距
|
||||
* @descEN Bottom padding of item
|
||||
*/
|
||||
itemPaddingBottom?: number;
|
||||
}
|
||||
export interface TimelineToken extends FullToken<'Timeline'> {
|
||||
itemHeadSize: number;
|
||||
customHeadPaddingVertical: number;
|
||||
paddingInlineEnd: number;
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Timeline'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+197
@@ -0,0 +1,197 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.prepareComponentToken = exports.default = void 0;
|
||||
var _style = require("../../style");
|
||||
var _internal = require("../../theme/internal");
|
||||
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
||||
var _horizontal = _interopRequireDefault(require("./horizontal"));
|
||||
const genTimelineStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
tailColor,
|
||||
fontHeight,
|
||||
dotSize,
|
||||
dotBg,
|
||||
dotBorderWidth,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
colorText,
|
||||
tailWidth,
|
||||
colorPrimary,
|
||||
colorError,
|
||||
colorSuccess,
|
||||
colorTextDisabled,
|
||||
antCls
|
||||
} = token;
|
||||
const itemCls = `${componentCls}-item`;
|
||||
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
|
||||
return {
|
||||
[componentCls]: [
|
||||
// ==============================================================
|
||||
// == Item ==
|
||||
// ==============================================================
|
||||
{
|
||||
...(0, _style.resetComponent)(token),
|
||||
[itemCls]: {
|
||||
[varName('title-horizontal-title-height')]: fontHeight,
|
||||
[varName('vertical-rail-margin')]: '0px',
|
||||
[varName('title-horizontal-rail-gap')]: '0px',
|
||||
// Root Level: Record Steps icon size and support fallback
|
||||
[varName('icon-dot-size-origin')]: varRef('icon-size-active'),
|
||||
[varName('icon-dot-size-custom')]: dotSize,
|
||||
// Item Level: Record Steps icon color and support fallback
|
||||
[varName('item-icon-dot-bg-color-origin')]: varRef('item-icon-dot-bg-color'),
|
||||
[varName('item-icon-dot-bg-color-custom')]: dotBg,
|
||||
[varName('icon-size')]: varRef('icon-dot-size-custom', varRef('icon-dot-size-origin')),
|
||||
// Icon
|
||||
[`${itemCls}-icon`]: {
|
||||
[varName('dot-icon-border-width')]: dotBorderWidth,
|
||||
[varName('dot-icon-size')]: varRef('icon-size'),
|
||||
[varName('item-icon-dot-bg-color')]: varRef('item-icon-dot-bg-color-custom', varRef('item-icon-dot-bg-color-origin'))
|
||||
},
|
||||
// Title
|
||||
[`${itemCls}-title`]: {
|
||||
fontSize,
|
||||
lineHeight
|
||||
},
|
||||
// Content
|
||||
[`${itemCls}-content`]: {
|
||||
color: colorText
|
||||
},
|
||||
// Rail
|
||||
[`${itemCls}-rail`]: {
|
||||
[varName('item-solid-line-color')]: tailColor,
|
||||
[varName('rail-size')]: tailWidth
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==============================================================
|
||||
// == Status ==
|
||||
// ==============================================================
|
||||
{
|
||||
[itemCls]: {
|
||||
[varName('item-process-rail-line-style')]: 'dotted'
|
||||
},
|
||||
[`${itemCls}${itemCls}${itemCls}-color`]: {
|
||||
'&-blue': {
|
||||
[varName('item-icon-dot-color')]: colorPrimary
|
||||
},
|
||||
'&-red': {
|
||||
[varName('item-icon-dot-color')]: colorError
|
||||
},
|
||||
'&-green': {
|
||||
[varName('item-icon-dot-color')]: colorSuccess
|
||||
},
|
||||
'&-gray': {
|
||||
[varName('item-icon-dot-color')]: colorTextDisabled
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
};
|
||||
const genVerticalStyle = token => {
|
||||
const {
|
||||
calc,
|
||||
componentCls,
|
||||
itemPaddingBottom,
|
||||
margin,
|
||||
antCls
|
||||
} = token;
|
||||
const itemCls = `${componentCls}-item`;
|
||||
const [, stepsVarRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
|
||||
const [timelineVarName, timelineVarRef] = (0, _genStyleUtils.genCssVar)(antCls, 'timeline');
|
||||
return {
|
||||
[`${componentCls}:not(${componentCls}-horizontal)`]: {
|
||||
[timelineVarName('head-span')]: '12',
|
||||
[timelineVarName('head-span-ptg')]: `calc(${timelineVarRef('head-span')} / 24 * 100%)`,
|
||||
// =============================================================
|
||||
// == Alternate ==
|
||||
// =============================================================
|
||||
[`&${componentCls}-layout-alternate`]: {
|
||||
[itemCls]: {
|
||||
[timelineVarName('alternate-gap')]: calc(margin).mul(2).add(stepsVarRef('dot-icon-size')).equal(),
|
||||
minHeight: 'auto',
|
||||
paddingBottom: itemPaddingBottom,
|
||||
// Icon & Rail
|
||||
[`${itemCls}-icon, ${itemCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
insetInlineStart: timelineVarRef('head-span-ptg')
|
||||
},
|
||||
// Icon
|
||||
[`${itemCls}-icon`]: {
|
||||
marginInlineStart: `calc(${stepsVarRef('icon-size')} / -2)`
|
||||
},
|
||||
// Section
|
||||
[`${itemCls}-section`]: {
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
gap: timelineVarRef('alternate-gap')
|
||||
},
|
||||
// >>> Header
|
||||
[`${itemCls}-header`]: {
|
||||
textAlign: 'end',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
flex: `1 1 calc(${timelineVarRef('head-span-ptg')} - ${timelineVarRef('alternate-gap')} / 2)`
|
||||
},
|
||||
// >>> Content
|
||||
[`${itemCls}-content`]: {
|
||||
textAlign: 'start',
|
||||
flex: `1 1 calc(100% - ${timelineVarRef('head-span-ptg')} - ${timelineVarRef('alternate-gap')} / 2)`
|
||||
},
|
||||
// Placement
|
||||
'&-placement-end': {
|
||||
[`${itemCls}-header`]: {
|
||||
textAlign: 'start',
|
||||
order: 1
|
||||
},
|
||||
[`${itemCls}-content`]: {
|
||||
textAlign: 'end'
|
||||
},
|
||||
[`${itemCls}-icon, ${itemCls}-rail`]: {
|
||||
insetInlineStart: `calc(100% - ${timelineVarRef('head-span-ptg')})`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// =============================================================
|
||||
// == Same Side ==
|
||||
// =============================================================
|
||||
[`&:not(${componentCls}-layout-alternate)`]: {
|
||||
[`${itemCls}-placement-end`]: {
|
||||
textAlign: 'end',
|
||||
[`${itemCls}-icon`]: {
|
||||
order: 1
|
||||
},
|
||||
[`${itemCls}-rail`]: {
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: `calc(${stepsVarRef('icon-size')} / 2)`,
|
||||
marginInlineEnd: `calc(${stepsVarRef('rail-size')} / -2)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
const prepareComponentToken = token => ({
|
||||
tailColor: token.colorSplit,
|
||||
tailWidth: token.lineWidthBold,
|
||||
dotBorderWidth: token.lineWidthBold,
|
||||
dotBg: undefined,
|
||||
dotSize: undefined,
|
||||
itemPaddingBottom: token.padding * 1.25
|
||||
});
|
||||
exports.prepareComponentToken = prepareComponentToken;
|
||||
var _default = exports.default = (0, _internal.genStyleHooks)('Timeline', token => {
|
||||
const timeLineToken = (0, _internal.mergeToken)(token, {
|
||||
itemHeadSize: 10,
|
||||
customHeadPaddingVertical: token.paddingXXS,
|
||||
paddingInlineEnd: 2
|
||||
});
|
||||
return [genTimelineStyle(timeLineToken), genVerticalStyle(timeLineToken), (0, _horizontal.default)(timeLineToken)];
|
||||
}, prepareComponentToken);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import type { TimelineItemType, TimelineMode, TimelineProps } from './Timeline';
|
||||
declare const useItems: (rootPrefixCls: string, prefixCls: string, mode: TimelineMode, items?: TimelineItemType[], children?: React.ReactNode, pending?: TimelineProps["pending"], pendingDot?: TimelineProps["pendingDot"]) => TimelineItemType[];
|
||||
export default useItems;
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
"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 _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
|
||||
var _util = require("@rc-component/util");
|
||||
var _clsx = require("clsx");
|
||||
var _genStyleUtils = require("../theme/util/genStyleUtils");
|
||||
const useItems = (rootPrefixCls, prefixCls, mode, items, children, pending, pendingDot) => {
|
||||
const itemCls = `${prefixCls}-item`;
|
||||
const [varName] = (0, _genStyleUtils.genCssVar)(rootPrefixCls, 'cmp-steps');
|
||||
// Merge items and children
|
||||
const parseItems = React.useMemo(() => {
|
||||
return Array.isArray(items) ? items : (0, _util.toArray)(children).map(ele => ({
|
||||
...ele.props
|
||||
}));
|
||||
}, [items, children]);
|
||||
// convert legacy type
|
||||
return React.useMemo(() => {
|
||||
const mergedItems = parseItems.map((item, index) => {
|
||||
const {
|
||||
label,
|
||||
children,
|
||||
title,
|
||||
content,
|
||||
color,
|
||||
className,
|
||||
style,
|
||||
icon,
|
||||
dot,
|
||||
placement,
|
||||
position,
|
||||
loading,
|
||||
...restProps
|
||||
} = item;
|
||||
let mergedStyle = style;
|
||||
let mergedClassName = className;
|
||||
if (color) {
|
||||
if (['blue', 'red', 'green', 'gray'].includes(color)) {
|
||||
mergedClassName = (0, _clsx.clsx)(className, `${itemCls}-color-${color}`);
|
||||
} else {
|
||||
mergedStyle = {
|
||||
[varName('item-icon-dot-color')]: color,
|
||||
...style
|
||||
};
|
||||
}
|
||||
}
|
||||
// Placement
|
||||
const mergedPlacement = placement ?? position ?? (mode === 'alternate' ? index % 2 === 0 ? 'start' : 'end' : mode);
|
||||
mergedClassName = (0, _clsx.clsx)(mergedClassName, `${itemCls}-placement-${mergedPlacement}`);
|
||||
// Icon
|
||||
let mergedIcon = icon ?? dot;
|
||||
if (!mergedIcon && loading) {
|
||||
mergedIcon = /*#__PURE__*/React.createElement(_LoadingOutlined.default, null);
|
||||
}
|
||||
return {
|
||||
...restProps,
|
||||
title: title ?? label,
|
||||
content: content ?? children,
|
||||
style: mergedStyle,
|
||||
className: mergedClassName,
|
||||
icon: mergedIcon,
|
||||
status: loading ? 'process' : 'finish'
|
||||
};
|
||||
});
|
||||
if (pending) {
|
||||
mergedItems.push({
|
||||
icon: pendingDot ?? /*#__PURE__*/React.createElement(_LoadingOutlined.default, null),
|
||||
content: pending,
|
||||
status: 'process'
|
||||
});
|
||||
}
|
||||
return mergedItems;
|
||||
}, [parseItems, pending, mode, itemCls, varName, pendingDot]);
|
||||
};
|
||||
var _default = exports.default = useItems;
|
||||
Reference in New Issue
Block a user