rc-steps - npm Package Compare versions

Comparing version 5.0.0 to 6.0.0-alpha.0

es/Step.d.ts

@@ -25,2 +25,3 @@ import * as React from 'react';
     stepIcon?: StepIconRender;
+    render?: (stepItem: React.ReactNode) => React.ReactNode;
 }
@@ -30,3 +31,3 @@ export default class Step extends React.Component<StepProps> {
     renderIconNode(): any;
-    render(): JSX.Element;
+    render(): {} | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }

es/Step.js

@@ -10,3 +10,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["className", "prefixCls", "style", "active", "status", "iconPrefix", "icon", "wrapperStyle", "stepNumber", "disabled", "description", "title", "subTitle", "progressDot", "stepIcon", "tailContent", "icons", "stepIndex", "onStepClick", "onClick"];
+var _excluded = ["className", "prefixCls", "style", "active", "status", "iconPrefix", "icon", "wrapperStyle", "stepNumber", "disabled", "description", "title", "subTitle", "progressDot", "stepIcon", "tailContent", "icons", "stepIndex", "onStepClick", "onClick", "render"];
 
@@ -151,2 +151,3 @@ /* eslint react/prop-types: 0 */
           onClick = _this$props3.onClick,
+          render = _this$props3.render,
           restProps = _objectWithoutProperties(_this$props3, _excluded);
@@ -166,3 +167,3 @@
 
-      return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      var stepNode = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
         className: classString,
@@ -188,2 +189,8 @@ style: stepItemStyle
       }, description))));
+
+      if (render) {
+        stepNode = render(stepNode) || null;
+      }
+
+      return stepNode;
     }
@@ -190,0 +197,0 @@ }]);

es/Steps.d.ts

@@ -24,3 +24,3 @@ import React from 'react';
     direction?: 'horizontal' | 'vertical';
-    type?: 'default' | 'navigation';
+    type?: 'default' | 'navigation' | 'inline';
     labelPlacement?: 'horizontal' | 'vertical';
@@ -36,2 +36,3 @@ iconPrefix?: string;
     items?: StepProps[];
+    itemRender?: (item: StepProps, stepItem: React.ReactNode) => React.ReactNode;
     onChange?: (current: number) => void;
@@ -38,0 +39,0 @@ }

es/Steps.js

@@ -10,3 +10,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "stepIcon", "initial", "icons", "onChange", "items"];
+var _excluded = ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "stepIcon", "initial", "icons", "onChange", "itemRender", "items"];
 
@@ -71,2 +71,3 @@ /* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
           onChange = _this$props2.onChange,
+          itemRender = _this$props2.itemRender,
           _this$props2$items = _this$props2.items,
@@ -77,4 +78,9 @@ items = _this$props2$items === void 0 ? [] : _this$props2$items,
       var isNav = type === 'navigation';
-      var adjustedLabelPlacement = progressDot ? 'vertical' : labelPlacement;
-      var classString = classNames(prefixCls, "".concat(prefixCls, "-").concat(direction), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedLabelPlacement), direction === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNav), _classNames));
+      var isInline = type === 'inline'; // inline type requires fixed progressDot direction size.
+
+      var mergedProgressDot = isInline || progressDot;
+      var mergedDirection = isInline ? 'horizontal' : direction;
+      var mergedSize = isInline ? undefined : size;
+      var adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
+      var classString = classNames(prefixCls, "".concat(prefixCls, "-").concat(mergedDirection), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(mergedSize), mergedSize), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedLabelPlacement), mergedDirection === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!mergedProgressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNav), _defineProperty(_classNames, "".concat(prefixCls, "-inline"), isInline), _classNames));
       return /*#__PURE__*/React.createElement("div", _extends({
@@ -104,2 +110,13 @@ className: classString,
 
+        if (isInline) {
+          mergedItem.icon = undefined;
+          mergedItem.subTitle = undefined;
+        }
+
+        if (!mergedItem.render && itemRender) {
+          mergedItem.render = function (stepItem) {
+            return itemRender(mergedItem, stepItem);
+          };
+        }
+
         return /*#__PURE__*/React.createElement(Step, _extends({}, mergedItem, {
@@ -113,3 +130,3 @@ active: stepNumber === current,
           wrapperStyle: style,
-          progressDot: progressDot,
+          progressDot: mergedProgressDot,
           stepIcon: stepIcon,
@@ -116,0 +133,0 @@ icons: icons,

lib/Step.d.ts

@@ -25,2 +25,3 @@ import * as React from 'react';
     stepIcon?: StepIconRender;
+    render?: (stepItem: React.ReactNode) => React.ReactNode;
 }
@@ -30,3 +31,3 @@ export default class Step extends React.Component<StepProps> {
     renderIconNode(): any;
-    render(): JSX.Element;
+    render(): {} | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }

lib/Step.js

@@ -34,3 +34,3 @@ "use strict";
 
-var _excluded = ["className", "prefixCls", "style", "active", "status", "iconPrefix", "icon", "wrapperStyle", "stepNumber", "disabled", "description", "title", "subTitle", "progressDot", "stepIcon", "tailContent", "icons", "stepIndex", "onStepClick", "onClick"];
+var _excluded = ["className", "prefixCls", "style", "active", "status", "iconPrefix", "icon", "wrapperStyle", "stepNumber", "disabled", "description", "title", "subTitle", "progressDot", "stepIcon", "tailContent", "icons", "stepIndex", "onStepClick", "onClick", "render"];
 
@@ -169,2 +169,3 @@ function isString(str) {
           onClick = _this$props3.onClick,
+          render = _this$props3.render,
           restProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
@@ -181,3 +182,3 @@ var classString = (0, _classnames.default)("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(status), className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-item-custom"), icon), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-item-active"), active), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled === true), _classNames2));
 
-      return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
+      var stepNode = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
         className: classString,
@@ -203,2 +204,8 @@ style: stepItemStyle
       }, description))));
+
+      if (render) {
+        stepNode = render(stepNode) || null;
+      }
+
+      return stepNode;
     }
@@ -205,0 +212,0 @@ }]);

lib/Steps.d.ts

@@ -24,3 +24,3 @@ import React from 'react';
     direction?: 'horizontal' | 'vertical';
-    type?: 'default' | 'navigation';
+    type?: 'default' | 'navigation' | 'inline';
     labelPlacement?: 'horizontal' | 'vertical';
@@ -36,2 +36,3 @@ iconPrefix?: string;
     items?: StepProps[];
+    itemRender?: (item: StepProps, stepItem: React.ReactNode) => React.ReactNode;
     onChange?: (current: number) => void;
@@ -38,0 +39,0 @@ }

lib/Steps.js

@@ -34,3 +34,3 @@ "use strict";
 
-var _excluded = ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "stepIcon", "initial", "icons", "onChange", "items"];
+var _excluded = ["prefixCls", "style", "className", "children", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "stepIcon", "initial", "icons", "onChange", "itemRender", "items"];
 
@@ -88,2 +88,3 @@ var Steps = /*#__PURE__*/function (_React$Component) {
           onChange = _this$props2.onChange,
+          itemRender = _this$props2.itemRender,
           _this$props2$items = _this$props2.items,
@@ -93,4 +94,9 @@ items = _this$props2$items === void 0 ? [] : _this$props2$items,
       var isNav = type === 'navigation';
-      var adjustedLabelPlacement = progressDot ? 'vertical' : labelPlacement;
-      var classString = (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(direction), className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-").concat(size), size), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-label-").concat(adjustedLabelPlacement), direction === 'horizontal'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-navigation"), isNav), _classNames));
+      var isInline = type === 'inline'; // inline type requires fixed progressDot direction size.
+
+      var mergedProgressDot = isInline || progressDot;
+      var mergedDirection = isInline ? 'horizontal' : direction;
+      var mergedSize = isInline ? undefined : size;
+      var adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
+      var classString = (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(mergedDirection), className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-").concat(mergedSize), mergedSize), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-label-").concat(adjustedLabelPlacement), mergedDirection === 'horizontal'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-dot"), !!mergedProgressDot), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-navigation"), isNav), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), isInline), _classNames));
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -119,2 +125,13 @@ className: classString,
 
+        if (isInline) {
+          mergedItem.icon = undefined;
+          mergedItem.subTitle = undefined;
+        }
+
+        if (!mergedItem.render && itemRender) {
+          mergedItem.render = function (stepItem) {
+            return itemRender(mergedItem, stepItem);
+          };
+        }
+
         return /*#__PURE__*/_react.default.createElement(_Step.default, (0, _extends2.default)({}, mergedItem, {
@@ -128,3 +145,3 @@ active: stepNumber === current,
           wrapperStyle: style,
-          progressDot: progressDot,
+          progressDot: mergedProgressDot,
           stepIcon: stepIcon,
@@ -131,0 +148,0 @@ icons: icons,

package.json

 {
   "name": "rc-steps",
-  "version": "5.0.0",
+  "version": "6.0.0-alpha.0",
   "description": "steps ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -64,3 +64,3 @@ # rc-steps
       <td>default</td>
-      <td>diretypetion of Steps, enum: `default` or `navigation`</td>
+      <td>diretypetion of Steps, could be `default` `navigation` `inline`</td>
     </tr>
@@ -110,2 +110,8 @@ <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>
@@ -173,2 +179,8 @@ <td>(current: number) => void</td>
     </tr>
+    <tr>
+      <td>render</td>
+      <td>(stepItem: React.ReactNode) => React.ReactNode</td>
+      <td></td>
+      <td>custom step item renderer</td>
+    </tr>
   </tbody>
@@ -175,0 +187,0 @@ </table>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

862754

increased by0.5%

Lines of code

1334

increased by9.17%

Number of lines in readme file

196

increased by6.52%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes