From e021a01691d5586b119cbb658a4c3f4b6c42138b Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Nov 2022 21:05:26 +0800 Subject: [PATCH 1/3] chore: add gh-pages in devDeps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d5aac98..b91c224 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,7 @@ }, "lint-staged": { "**/*.{js,jsx,tsx,ts,md,json}": [ - "prettier --write", - "git add" + "prettier --write" ] }, "dependencies": { @@ -71,6 +70,7 @@ "enzyme-to-json": "^3.1.2", "eslint": "^7.1.0", "father": "^4", + "gh-pages": "^4.0.0", "husky": "^8.0.1", "less": "^3.11.2", "lint-staged": "^13.0.3", From c0bc1b31b2a0fa064c9b2b05cc98d9f44c304c9c Mon Sep 17 00:00:00 2001 From: JarvisArt <38420763+JarvisArt@users.noreply.github.com> Date: Sat, 5 Nov 2022 19:13:40 +0800 Subject: [PATCH 2/3] chore: Component to FC (#275) --- src/Step.tsx | 156 +++++++++++++++++++--------------------- src/Steps.tsx | 195 +++++++++++++++++++++++--------------------------- 2 files changed, 164 insertions(+), 187 deletions(-) diff --git a/src/Step.tsx b/src/Step.tsx index 3354232..75c710b 100644 --- a/src/Step.tsx +++ b/src/Step.tsx @@ -32,9 +32,33 @@ export interface StepProps { render?: (stepItem: React.ReactNode) => React.ReactNode; } -export default class Step extends React.Component { - onClick: React.MouseEventHandler = (...args) => { - const { onClick, onStepClick, stepIndex } = this.props; +function Step(props: StepProps) { + const { + className, + prefixCls, + style, + active, + status, + iconPrefix, + icon, + wrapperStyle, + stepNumber, + disabled, + description, + title, + subTitle, + progressDot, + stepIcon, + tailContent, + icons, + stepIndex, + onStepClick, + onClick, + render, + ...restProps + } = props; + + const onInternalClick: React.MouseEventHandler = (...args) => { if (onClick) { onClick(...args); } @@ -42,19 +66,7 @@ export default class Step extends React.Component { onStepClick(stepIndex); }; - renderIconNode() { - const { - prefixCls, - progressDot, - stepIcon, - stepNumber, - status, - title, - description, - icon, - iconPrefix, - icons, - } = this.props; + const renderIconNode = () => { let iconNode; const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, { [`${iconPrefix}icon-${icon}`]: icon && isString(icon), @@ -103,79 +115,57 @@ export default class Step extends React.Component { } return iconNode; - } + }; - render() { - const { - className, - prefixCls, - style, - active, - status = 'wait', - iconPrefix, - icon, - wrapperStyle, - stepNumber, - disabled, - description, - title, - subTitle, - progressDot, - stepIcon, - tailContent, - icons, - stepIndex, - onStepClick, - onClick, - render, - ...restProps - } = this.props; - - const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${status}`, className, { - [`${prefixCls}-item-custom`]: icon, - [`${prefixCls}-item-active`]: active, - [`${prefixCls}-item-disabled`]: disabled === true, - }); - const stepItemStyle = { ...style }; - - const accessibilityProps: { - role?: string; - tabIndex?: number; - onClick?: React.MouseEventHandler; - } = {}; - if (onStepClick && !disabled) { - accessibilityProps.role = 'button'; - accessibilityProps.tabIndex = 0; - accessibilityProps.onClick = this.onClick; - } + const mergedStatus = status || 'wait'; + + const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, className, { + [`${prefixCls}-item-custom`]: icon, + [`${prefixCls}-item-active`]: active, + [`${prefixCls}-item-disabled`]: disabled === true, + }); + const stepItemStyle = { ...style }; - let stepNode: React.ReactNode = ( -
-
-
{tailContent}
-
{this.renderIconNode()}
-
-
- {title} - {subTitle && ( -
- {subTitle} -
- )} -
- {description &&
{description}
} + const accessibilityProps: { + role?: string; + tabIndex?: number; + onClick?: React.MouseEventHandler; + } = {}; + if (onStepClick && !disabled) { + accessibilityProps.role = 'button'; + accessibilityProps.tabIndex = 0; + accessibilityProps.onClick = onInternalClick; + } + + let stepNode: React.ReactNode = ( +
+
+
{tailContent}
+
{renderIconNode()}
+
+
+ {title} + {subTitle && ( +
+ {subTitle} +
+ )}
+ {description &&
{description}
}
- ); +
+ ); - if (render) { - stepNode = render(stepNode) || null; - } - return stepNode as React.ReactElement; + if (render) { + stepNode = render(stepNode) || null; } + + return stepNode as React.ReactElement; } + +export default Step; diff --git a/src/Steps.tsx b/src/Steps.tsx index 57eb8d5..5ea4416 100644 --- a/src/Steps.tsx +++ b/src/Steps.tsx @@ -44,117 +44,104 @@ export interface StepsProps { onChange?: (current: number) => void; } -export default class Steps extends React.Component { - static Step = Step; - - static defaultProps = { - type: 'default', - prefixCls: 'rc-steps', - iconPrefix: 'rc', - direction: 'horizontal', - labelPlacement: 'horizontal', - initial: 0, - current: 0, - status: 'process', - size: '', - progressDot: false, - }; +function Steps(props: StepsProps) { + const { + prefixCls = 'rc-steps', + style = {}, + className, + children, + direction = 'horizontal', + type = 'default', + labelPlacement = 'horizontal', + iconPrefix = 'rc', + status = 'process', + size, + current = 0, + progressDot = false, + stepIcon, + initial = 0, + icons, + onChange, + itemRender, + items = [], + ...restProps + } = props; + + const isNav = type === 'navigation'; + const isInline = type === 'inline'; + + // inline type requires fixed progressDot direction size. + const mergedProgressDot = isInline || progressDot; + const mergedDirection = isInline ? 'horizontal' : direction; + const mergedSize = isInline ? undefined : size; + + const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement; + const classString = classNames(prefixCls, `${prefixCls}-${mergedDirection}`, className, { + [`${prefixCls}-${mergedSize}`]: mergedSize, + [`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal', + [`${prefixCls}-dot`]: !!mergedProgressDot, + [`${prefixCls}-navigation`]: isNav, + [`${prefixCls}-inline`]: isInline, + }); - onStepClick = (next: number) => { - const { onChange, current } = this.props; + const onStepClick = (next: number) => { if (onChange && current !== next) { onChange(next); } }; - render() { - const { - prefixCls, - style = {}, - className, - children, - direction, - type, - labelPlacement, - iconPrefix, - status, - size, - current, - progressDot, - stepIcon, - initial, - icons, - onChange, - itemRender, - items = [], - ...restProps - } = this.props; - const isNav = type === 'navigation'; - const isInline = type === 'inline'; - - // inline type requires fixed progressDot direction size. - const mergedProgressDot = isInline || progressDot; - const mergedDirection = isInline ? 'horizontal' : direction; - const mergedSize = isInline ? undefined : size; - - const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement; - const classString = classNames(prefixCls, `${prefixCls}-${mergedDirection}`, className, { - [`${prefixCls}-${mergedSize}`]: mergedSize, - [`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal', - [`${prefixCls}-dot`]: !!mergedProgressDot, - [`${prefixCls}-navigation`]: isNav, - [`${prefixCls}-inline`]: isInline, - }); + const renderStep = (item: StepProps, index: number) => { + const mergedItem = { ...item }; + const stepNumber = initial + index; + // fix tail color + if (status === 'error' && index === current - 1) { + mergedItem.className = `${prefixCls}-next-error`; + } + + if (!mergedItem.status) { + if (stepNumber === current) { + mergedItem.status = status; + } else if (stepNumber < current) { + mergedItem.status = 'finish'; + } else { + mergedItem.status = 'wait'; + } + } + + if (isInline) { + mergedItem.icon = undefined; + mergedItem.subTitle = undefined; + } + + if (!mergedItem.render && itemRender) { + mergedItem.render = (stepItem) => itemRender(mergedItem, stepItem); + } return ( -
- {items - .filter((item) => item) - .map((item, index) => { - const mergedItem = { ...item }; - const stepNumber = initial + index; - // fix tail color - if (status === 'error' && index === current - 1) { - mergedItem.className = `${prefixCls}-next-error`; - } - - if (!mergedItem.status) { - if (stepNumber === current) { - mergedItem.status = status; - } else if (stepNumber < current) { - mergedItem.status = 'finish'; - } else { - mergedItem.status = 'wait'; - } - } - - if (isInline) { - mergedItem.icon = undefined; - mergedItem.subTitle = undefined; - } - - if (!mergedItem.render && itemRender) { - mergedItem.render = (stepItem) => itemRender(mergedItem, stepItem); - } - - return ( - - ); - })} -
+ ); - } + }; + + return ( +
+ {items.filter((item) => item).map(renderStep)} +
+ ); } + +Steps.Step = Step; + +export default Steps; From af03ff8504629de89a7bb29318183d48f07f761c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 5 Nov 2022 19:15:01 +0800 Subject: [PATCH 3/3] 6.0.0-alpha.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b91c224..c0fdf05 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-steps", - "version": "6.0.0-alpha.1", + "version": "6.0.0-alpha.2", "description": "steps ui component for react", "keywords": [ "react",