Skip to content

Commit

Permalink
feat(Stepper): document undocumented start and end options, add types…
Browse files Browse the repository at this point in the history
… & improve (#7128)
  • Loading branch information
komachi authored Sep 8, 2024
1 parent 6405fe6 commit 202b78e
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 5 deletions.
33 changes: 33 additions & 0 deletions components/doc/common/apidoc/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -47347,6 +47347,14 @@
"default": "0",
"description": "Active step index of stepper."
},
{
"name": "end",
"optional": true,
"readonly": false,
"type": "ReactNode | Function",
"default": "",
"description": "The template of end section."
},
{
"name": "headerPosition",
"optional": true,
Expand Down Expand Up @@ -47387,6 +47395,14 @@
"default": "",
"description": "Used to configure passthrough(pt) options of the component."
},
{
"name": "start",
"optional": true,
"readonly": false,
"type": "ReactNode | Function",
"default": "",
"description": "The template of start section."
},
{
"name": "unstyled",
"optional": true,
Expand Down Expand Up @@ -47470,6 +47486,20 @@
"type": "StepperPanelPassThroughOptionType",
"description": "Used to pass attributes to the end handler's DOM element."
},
{
"name": "start",
"optional": true,
"readonly": false,
"type": "StepperPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the start's DOM element."
},
{
"name": "end",
"optional": true,
"readonly": false,
"type": "StepperPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Uses to pass attributes to the right's DOM element."
},
{
"name": "hooks",
"optional": true,
Expand Down Expand Up @@ -47535,6 +47565,9 @@
"values": {
"StepperPassThroughOptionType": {
"values": "StepperPassThroughAttributes | Function | string | null | undefined"
},
"StepperPassThroughType": {
"values": "PassThroughType<T, StepperPassThroughMethodOptions>"
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions components/doc/stepper/theming/styleddoc.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,14 @@ export function StyledDoc() {
<td>p-stepper-content</td>
<td>Container element of stepper content.</td>
</tr>
<tr>
<td>p-stepper-start</td>
<td>Start content container.</td>
</tr>
<tr>
<td>p-stepper-end</td>
<td>End content container.</td>
</tr>
</tbody>
</table>
</div>
Expand Down
22 changes: 19 additions & 3 deletions components/lib/stepper/Stepper.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { CSSTransition } from '../csstransition/CSSTransition';
import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
import { UniqueComponentId, classNames } from '../utils/Utils';
import { UniqueComponentId, classNames, ObjectUtils } from '../utils/Utils';
import { StepperBase } from './StepperBase';
import { StepperContent } from './StepperContent';
import { StepperHeader } from './StepperHeader';
Expand All @@ -14,6 +14,8 @@ export const Stepper = React.memo(
const mergeProps = useMergeProps();
const context = React.useContext(PrimeReactContext);
const props = StepperBase.getProps(inProps, context);
const start = ObjectUtils.getJSXElement(props.start, props);
const end = ObjectUtils.getJSXElement(props.end, props);
const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({
props
});
Expand All @@ -23,6 +25,20 @@ export const Stepper = React.memo(

useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' });

const startProps = mergeProps(
{
className: cx('start')
},
ptm('start')
);

const endProps = mergeProps(
{
className: cx('end')
},
ptm('end')
);

useMountEffect(() => {
if (!idState) {
setIdState(UniqueComponentId());
Expand Down Expand Up @@ -326,10 +342,10 @@ export const Stepper = React.memo(

return (
<div {...rootProps}>
{props.start && props.start()}
{start && <div {...startProps}>{start}</div>}
{props.orientation === 'horizontal' && createHorizontal()}
{props.orientation === 'vertical' && createVertical()}
{props.end && props.end()}
{end && <div {...endProps}>{end}</div>}
</div>
);
})
Expand Down
8 changes: 6 additions & 2 deletions components/lib/stepper/StepperBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ const classes = {
'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
})
},
panelContainer: 'p-stepper-panels'
panelContainer: 'p-stepper-panels',
start: 'p-stepper-start',
end: 'p-stepper-end'
};

const styles = `
Expand Down Expand Up @@ -134,7 +136,9 @@ export const StepperBase = ComponentBase.extend({
orientation: 'horizontal',
headerPosition: 'right',
linear: false,
onChangeStep: null
onChangeStep: null,
start: null,
end: null
},
css: {
classes,
Expand Down
18 changes: 18 additions & 0 deletions components/lib/stepper/stepper.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { StepperPanelPassThroughOptionType } from '../stepperpanel/stepperpanel';
import { PassThroughType } from '../utils';

export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
export declare type StepperPassThroughType<T> = PassThroughType<T, StepperPassThroughMethodOptions>;

/**
* Custom passthrough(pt) option method.
Expand Down Expand Up @@ -43,6 +45,14 @@ export interface StepperPassThroughOptions {
* Used to pass attributes to the end handler's DOM element.
*/
stepperpanel?: StepperPanelPassThroughOptionType;
/**
* Uses to pass attributes to the start's DOM element.
*/
start?: StepperPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the right's DOM element.
*/
end?: StepperPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
Expand Down Expand Up @@ -122,6 +132,14 @@ export interface StepperProps {
* Callback to invoke when an active panel is changed.
*/
onChangeStep?(event: StepperChangeEvent): void;
/**
* The template of start section.
*/
start?: React.ReactNode | ((props: StepperProps) => React.ReactNode);
/**
* The template of end section.
*/
end?: React.ReactNode | ((props: StepperProps) => React.ReactNode);
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {StepperPassThroughOptions}
Expand Down

0 comments on commit 202b78e

Please sign in to comment.