@tarojsx/ui/dist/Steps.js

We reinvents the UI for Taro3+

import React from 'react';
import classNames from 'classnames';
import { View, Text } from '@tarojs/components';
import '../style/Steps.scss';
export const Steps = props => {
    const { className, style = {}, items, current = 0, onChange } = props;
    return (React.createElement(View, { className: classNames('at-steps', className), style: style }, items === null || items === void 0 ? void 0 : items.map((item, i) => (React.createElement(View, { key: `${item.title}${i}`, className: classNames({
            'at-steps__item': true,
            'at-steps__item--active': i === current,
            'at-steps__item--inactive': i !== current,
        }), onClick: e => onChange === null || onChange === void 0 ? void 0 : onChange(i, e) },
        React.createElement(View, { className: "at-steps__circular-wrap" },
            i !== 0 && React.createElement(View, { className: "at-steps__left-line" }),
            item.status ? (React.createElement(View, { className: classNames('at-icon', 'at-steps__single-icon', {
                    'at-icon-check-circle': item.status === 'success',
                    'at-icon-close-circle': item.status === 'error',
                    'at-steps__single-icon--success': item.status === 'success',
                    'at-steps__single-icon--error': item.status === 'error',
                }) })) : (React.createElement(View, { className: "at-steps__circular" }, item.icon ? (React.createElement(Text, { className: classNames('at-icon', 'at-steps__circle-icon', {
                    [`at-icon-${item.icon.value}`]: item.icon.value,
                }) })) : (React.createElement(Text, { className: "at-steps__num" }, i + 1)))),
            i !== items.length - 1 && React.createElement(View, { className: "at-steps__right-line" })),
        React.createElement(View, { className: "at-steps__title" }, item.title),
        React.createElement(View, { className: "at-steps__desc" }, item.desc))))));
};
//# sourceMappingURL=Steps.js.map