linear-react-components-ui 1.1.20-beta.1 → 1.1.20-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/styles/wizard.scss +122 -0
- package/lib/dialog/base/Content.d.ts +1 -1
- package/lib/dialog/base/Content.js +3 -2
- package/lib/dialog/base/index.js +3 -2
- package/lib/dialog/form/index.js +8 -3
- package/lib/dialog/types.d.ts +36 -4
- package/lib/dialog/wizard/index.d.ts +13 -0
- package/lib/dialog/wizard/index.js +64 -0
- package/lib/dialog/wizard/progressbar.d.ts +8 -0
- package/lib/dialog/wizard/progressbar.js +42 -0
- package/lib/dialog/wizard/step.d.ts +9 -0
- package/lib/dialog/wizard/step.js +22 -0
- package/lib/dialog/wizard/useWizard.d.ts +9 -0
- package/lib/dialog/wizard/useWizard.js +56 -0
- package/lib/icons/helper.d.ts +12 -0
- package/lib/icons/helper.js +12 -0
- package/package.json +1 -1
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
@import "colors.scss";
|
|
2
|
+
|
|
3
|
+
.wizard-dialog {
|
|
4
|
+
.wizard-wrapper {
|
|
5
|
+
.wizard-content {
|
|
6
|
+
display: flex !important;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
.wizard-progresbar {
|
|
9
|
+
width: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
padding: 20px;
|
|
13
|
+
margin-bottom: 20px;
|
|
14
|
+
border-bottom: 2px solid $component-border-color;
|
|
15
|
+
gap: 10px;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
> .title {
|
|
18
|
+
font-size: 16px;
|
|
19
|
+
font-weight: 600;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
position: relative;
|
|
24
|
+
flex: 1;
|
|
25
|
+
&:first-child {
|
|
26
|
+
.step {
|
|
27
|
+
align-self: flex-start;
|
|
28
|
+
}
|
|
29
|
+
.step-title {
|
|
30
|
+
align-self: flex-start;
|
|
31
|
+
}
|
|
32
|
+
&:before {
|
|
33
|
+
right: auto;
|
|
34
|
+
left: 45px;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&:last-child {
|
|
38
|
+
.step {
|
|
39
|
+
align-self: flex-end;
|
|
40
|
+
}
|
|
41
|
+
.step-title {
|
|
42
|
+
align-self: flex-end;
|
|
43
|
+
}
|
|
44
|
+
&:after {
|
|
45
|
+
left: auto;
|
|
46
|
+
right: 45px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&::after, &::before {
|
|
50
|
+
content: "";
|
|
51
|
+
position: absolute;
|
|
52
|
+
height: 2px;
|
|
53
|
+
background-color: $component-border-color;
|
|
54
|
+
top: 18px;
|
|
55
|
+
width: calc(100% - 27px);
|
|
56
|
+
transition: all 0.2s ease-in-out;
|
|
57
|
+
}
|
|
58
|
+
&::after {
|
|
59
|
+
left: calc(50% + 18px);
|
|
60
|
+
}
|
|
61
|
+
&::before {
|
|
62
|
+
right: calc(50% + 18px);
|
|
63
|
+
}
|
|
64
|
+
&[data-completed="true"] {
|
|
65
|
+
&::after {
|
|
66
|
+
background-color: $success-color !important;
|
|
67
|
+
}
|
|
68
|
+
+ .title::before {
|
|
69
|
+
background-color: $success-color !important;
|
|
70
|
+
}
|
|
71
|
+
&:first-child::before {
|
|
72
|
+
background-color: $success-color !important;
|
|
73
|
+
}
|
|
74
|
+
& + .title:after {
|
|
75
|
+
background-color: $success-color !important;
|
|
76
|
+
}
|
|
77
|
+
> .step {
|
|
78
|
+
> .number {
|
|
79
|
+
background-color: $success-color;
|
|
80
|
+
border-color: $success-color;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
&[data-disabled="true"] .step {
|
|
85
|
+
opacity: 0.3;
|
|
86
|
+
}
|
|
87
|
+
> .step {
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
width: 54px;
|
|
93
|
+
> .number {
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
justify-content: center;
|
|
97
|
+
font-size: 20px;
|
|
98
|
+
font-weight: 600;
|
|
99
|
+
width: 36px;
|
|
100
|
+
height: 36px;
|
|
101
|
+
border-radius: 100%;
|
|
102
|
+
color: #fff;
|
|
103
|
+
background-color: $color-light-dark;
|
|
104
|
+
z-index: 1;
|
|
105
|
+
transition: all 0.2s ease-in-out;
|
|
106
|
+
border: 2px solid $color-light-dark;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
> .step-title {
|
|
110
|
+
max-width: 150px;
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
text-overflow: ellipsis;
|
|
113
|
+
text-wrap: nowrap;
|
|
114
|
+
margin-top: 6px;
|
|
115
|
+
font-weight: 500;
|
|
116
|
+
color: $font-color-soft;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
@@ -4,6 +4,6 @@ import '../../@types/Align.js';
|
|
|
4
4
|
import '../../@types/Icon.js';
|
|
5
5
|
import '../../icons/helper.js';
|
|
6
6
|
|
|
7
|
-
declare const Content: ({ children, styleForContent }: IContentProps) => JSX.Element;
|
|
7
|
+
declare const Content: ({ children, styleForContent, className }: IContentProps) => JSX.Element;
|
|
8
8
|
|
|
9
9
|
export { Content as default };
|
|
@@ -10,11 +10,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
10
10
|
const Content = _ref => {
|
|
11
11
|
let {
|
|
12
12
|
children,
|
|
13
|
-
styleForContent
|
|
13
|
+
styleForContent,
|
|
14
|
+
className = ''
|
|
14
15
|
} = _ref;
|
|
15
16
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
16
17
|
id: "modal-dialog-content",
|
|
17
|
-
className: "dialog-content",
|
|
18
|
+
className: "dialog-content ".concat(className),
|
|
18
19
|
style: styleForContent
|
|
19
20
|
}, children);
|
|
20
21
|
};
|
package/lib/dialog/base/index.js
CHANGED
|
@@ -21,7 +21,8 @@ const BaseDialog = props => {
|
|
|
21
21
|
overlay = true,
|
|
22
22
|
closeOnEsc,
|
|
23
23
|
closeOnOutsideClick,
|
|
24
|
-
wrapperClassName,
|
|
24
|
+
wrapperClassName = '',
|
|
25
|
+
className = '',
|
|
25
26
|
children,
|
|
26
27
|
open: openProp,
|
|
27
28
|
onOpenChange,
|
|
@@ -112,7 +113,7 @@ const BaseDialog = props => {
|
|
|
112
113
|
className: "modal-overlay",
|
|
113
114
|
"data-testid": "modal-overlay"
|
|
114
115
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
115
|
-
className: "dialog",
|
|
116
|
+
className: "dialog ".concat(className),
|
|
116
117
|
"data-testid": "dialog-component"
|
|
117
118
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
118
119
|
className: wrapperClassName,
|
package/lib/dialog/form/index.js
CHANGED
|
@@ -29,7 +29,10 @@ const ModalForm = props => {
|
|
|
29
29
|
width = '50%',
|
|
30
30
|
height = '50%',
|
|
31
31
|
content,
|
|
32
|
-
children
|
|
32
|
+
children,
|
|
33
|
+
className = '',
|
|
34
|
+
wrapperClassName = '',
|
|
35
|
+
contentClassName = ''
|
|
33
36
|
} = props;
|
|
34
37
|
const headerRef = (0, _react.useRef)(null);
|
|
35
38
|
const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
|
|
@@ -56,7 +59,8 @@ const ModalForm = props => {
|
|
|
56
59
|
width: width,
|
|
57
60
|
height: height
|
|
58
61
|
}, props, {
|
|
59
|
-
wrapperClassName: "dialog-form-wrapper"
|
|
62
|
+
wrapperClassName: "dialog-form-wrapper ".concat(wrapperClassName),
|
|
63
|
+
className: className
|
|
60
64
|
}), props.title && /*#__PURE__*/_react.default.createElement("div", {
|
|
61
65
|
className: "header-form"
|
|
62
66
|
}, /*#__PURE__*/_react.default.createElement(_Header.default, {
|
|
@@ -64,7 +68,8 @@ const ModalForm = props => {
|
|
|
64
68
|
handlerClose: props.handlerClose,
|
|
65
69
|
icon: props.icon
|
|
66
70
|
})), /*#__PURE__*/_react.default.createElement(_Content.default, {
|
|
67
|
-
styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
|
|
71
|
+
styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle),
|
|
72
|
+
className: contentClassName
|
|
68
73
|
}, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
|
|
69
74
|
style: _objectSpread({}, overlayStyle)
|
|
70
75
|
}), _react.default.Children.toArray(props.buttons.map(button => {
|
package/lib/dialog/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode, CSSProperties, ReactElement } from 'react';
|
|
1
|
+
import { ReactNode, CSSProperties, ReactElement, Dispatch } from 'react';
|
|
2
2
|
import { TextAlign } from '../@types/Align.js';
|
|
3
3
|
import { IconNames } from '../@types/Icon.js';
|
|
4
4
|
import '../icons/helper.js';
|
|
@@ -6,6 +6,7 @@ import '../icons/helper.js';
|
|
|
6
6
|
interface IContentProps {
|
|
7
7
|
children: ReactNode | ReactNode[];
|
|
8
8
|
styleForContent?: CSSProperties;
|
|
9
|
+
className?: string;
|
|
9
10
|
}
|
|
10
11
|
interface IFooterProps {
|
|
11
12
|
children: ReactElement | ReactElement[];
|
|
@@ -18,10 +19,11 @@ interface IHeaderProps {
|
|
|
18
19
|
titleIcon?: IconNames;
|
|
19
20
|
}
|
|
20
21
|
interface IBaseProps {
|
|
21
|
-
wrapperClassName
|
|
22
|
+
wrapperClassName?: string;
|
|
22
23
|
width?: string;
|
|
23
24
|
height?: string;
|
|
24
25
|
children: ReactNode | ReactNode[];
|
|
26
|
+
className?: string;
|
|
25
27
|
closeOnEsc?: boolean;
|
|
26
28
|
closeOnOutsideClick?: boolean;
|
|
27
29
|
overlay?: boolean;
|
|
@@ -31,7 +33,7 @@ interface IBaseProps {
|
|
|
31
33
|
onOpenChange?: (open: boolean) => void;
|
|
32
34
|
handlerClose?: () => void;
|
|
33
35
|
}
|
|
34
|
-
interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'
|
|
36
|
+
interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'> {
|
|
35
37
|
buttons?: JSX.Element[];
|
|
36
38
|
styleForContent?: CSSProperties;
|
|
37
39
|
title?: string;
|
|
@@ -39,6 +41,7 @@ interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperC
|
|
|
39
41
|
isWaiting?: boolean;
|
|
40
42
|
icon?: JSX.Element;
|
|
41
43
|
content?: ReactNode;
|
|
44
|
+
contentClassName?: string;
|
|
42
45
|
}
|
|
43
46
|
interface ICommonDialogProps {
|
|
44
47
|
onConfirmClick?: () => void;
|
|
@@ -66,5 +69,34 @@ interface ICustomProps {
|
|
|
66
69
|
interface IFormDialogContext {
|
|
67
70
|
headerRef?: React.RefObject<HTMLDivElement>;
|
|
68
71
|
}
|
|
72
|
+
interface WizardComponentProps extends Omit<IFormProps, 'content'> {
|
|
73
|
+
children: React.ReactNode;
|
|
74
|
+
buttons?: JSX.Element[];
|
|
75
|
+
showProgressbar?: boolean;
|
|
76
|
+
title?: string;
|
|
77
|
+
handlerClose?: () => void;
|
|
78
|
+
controls: Omit<UseWizardReturn, 'controls'>;
|
|
79
|
+
}
|
|
80
|
+
interface WizardStepComponentProps {
|
|
81
|
+
children: React.ReactNode;
|
|
82
|
+
title: string;
|
|
83
|
+
customClass?: string;
|
|
84
|
+
customStyle?: CSSProperties;
|
|
85
|
+
}
|
|
86
|
+
interface WizardControls extends Omit<UseWizardReturn, 'controls'> {
|
|
87
|
+
}
|
|
88
|
+
interface UseWizardReturn {
|
|
89
|
+
changeStep: (nextStep: number) => void;
|
|
90
|
+
nextStep: () => void;
|
|
91
|
+
hasNextStep: boolean;
|
|
92
|
+
previousStep: () => void;
|
|
93
|
+
hasPreviousStep: boolean;
|
|
94
|
+
steps: ReactNode[];
|
|
95
|
+
currentStep: ReactElement;
|
|
96
|
+
currentStepIndex: number;
|
|
97
|
+
totalSteps: number;
|
|
98
|
+
setSteps: Dispatch<React.SetStateAction<ReactNode[]>>;
|
|
99
|
+
controls: WizardControls;
|
|
100
|
+
}
|
|
69
101
|
|
|
70
|
-
export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps };
|
|
102
|
+
export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps, UseWizardReturn, WizardComponentProps, WizardControls, WizardStepComponentProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { WizardControls, WizardComponentProps } from '../types.js';
|
|
3
|
+
export { WizardStep as Step } from './step.js';
|
|
4
|
+
export { useWizard } from './useWizard.js';
|
|
5
|
+
import '../../@types/Align.js';
|
|
6
|
+
import '../../@types/Icon.js';
|
|
7
|
+
import '../../icons/helper.js';
|
|
8
|
+
|
|
9
|
+
declare const WizardContext: React__default.Context<WizardControls | null>;
|
|
10
|
+
declare const useWizardContext: () => WizardControls | null;
|
|
11
|
+
declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Container = Wizard;
|
|
7
|
+
Object.defineProperty(exports, "Step", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _step.WizardStep;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
exports.default = exports.WizardContext = void 0;
|
|
14
|
+
Object.defineProperty(exports, "useWizard", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () {
|
|
17
|
+
return _useWizard.useWizard;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
exports.useWizardContext = void 0;
|
|
21
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
22
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
|
23
|
+
var _form = _interopRequireDefault(require("../form/"));
|
|
24
|
+
var _progressbar = require("./progressbar");
|
|
25
|
+
require("../../assets/styles/wizard.scss");
|
|
26
|
+
var _step = require("./step");
|
|
27
|
+
var _useWizard = require("./useWizard");
|
|
28
|
+
const _excluded = ["children", "controls", "showProgressbar"];
|
|
29
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
30
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
31
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
32
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
33
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
34
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
35
|
+
const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
|
|
36
|
+
const useWizardContext = () => _react.default.useContext(WizardContext);
|
|
37
|
+
exports.useWizardContext = useWizardContext;
|
|
38
|
+
function Wizard(_ref) {
|
|
39
|
+
let {
|
|
40
|
+
children,
|
|
41
|
+
controls,
|
|
42
|
+
showProgressbar = true
|
|
43
|
+
} = _ref,
|
|
44
|
+
dialogProps = _objectWithoutProperties(_ref, _excluded);
|
|
45
|
+
const {
|
|
46
|
+
setSteps,
|
|
47
|
+
currentStep
|
|
48
|
+
} = controls;
|
|
49
|
+
if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
|
|
50
|
+
const propSteps = _react.default.Children.toArray(children);
|
|
51
|
+
(0, _react.useEffect)(() => {
|
|
52
|
+
setSteps(propSteps);
|
|
53
|
+
}, []);
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
|
|
55
|
+
value: controls
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
|
|
57
|
+
className: "wizard-dialog",
|
|
58
|
+
wrapperClassName: "wizard-wrapper",
|
|
59
|
+
contentClassName: "wizard-content"
|
|
60
|
+
}, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, null), /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
+
className: "wizard-body"
|
|
62
|
+
}, currentStep)));
|
|
63
|
+
}
|
|
64
|
+
var _default = exports.default = Wizard;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Progressbar = Progressbar;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _ = require(".");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
function Progressbar(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
customClass,
|
|
13
|
+
customStyle
|
|
14
|
+
} = _ref;
|
|
15
|
+
const context = (0, _.useWizardContext)();
|
|
16
|
+
if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
|
|
17
|
+
const {
|
|
18
|
+
steps,
|
|
19
|
+
currentStepIndex
|
|
20
|
+
} = context;
|
|
21
|
+
const stepsElements = _react.default.Children.toArray(steps);
|
|
22
|
+
const stepsTitle = stepsElements.map((step, index) => ({
|
|
23
|
+
title: step.props.title,
|
|
24
|
+
number: index + 1,
|
|
25
|
+
completed: index < currentStepIndex - 1 && index !== currentStepIndex
|
|
26
|
+
}));
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
28
|
+
className: "wizard-progresbar ".concat(customClass),
|
|
29
|
+
style: customStyle
|
|
30
|
+
}, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
|
|
31
|
+
key: step.number,
|
|
32
|
+
className: "title",
|
|
33
|
+
"data-completed": step.completed,
|
|
34
|
+
"data-disabled": step.number > currentStepIndex
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
36
|
+
className: "step"
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
38
|
+
className: "number"
|
|
39
|
+
}, step.number)), /*#__PURE__*/_react.default.createElement("span", {
|
|
40
|
+
className: "step-title"
|
|
41
|
+
}, step.title))));
|
|
42
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { WizardStepComponentProps } from '../types.js';
|
|
2
|
+
import 'react';
|
|
3
|
+
import '../../@types/Align.js';
|
|
4
|
+
import '../../@types/Icon.js';
|
|
5
|
+
import '../../icons/helper.js';
|
|
6
|
+
|
|
7
|
+
declare function WizardStep({ children, customClass, customStyle }: Readonly<WizardStepComponentProps>): JSX.Element;
|
|
8
|
+
|
|
9
|
+
export { WizardStep };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.WizardStep = WizardStep;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _ = require(".");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
function WizardStep(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
children,
|
|
13
|
+
customClass = '',
|
|
14
|
+
customStyle
|
|
15
|
+
} = _ref;
|
|
16
|
+
const context = (0, _.useWizardContext)();
|
|
17
|
+
if (!context) throw new Error('WizardStep must be used within a Wizard component');
|
|
18
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
19
|
+
className: "wizard-step-component ".concat(customClass),
|
|
20
|
+
style: customStyle
|
|
21
|
+
}, children);
|
|
22
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useWizard = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
|
+
const useWizard = () => {
|
|
11
|
+
var _ref;
|
|
12
|
+
const [steps, setSteps] = (0, _react.useState)([]);
|
|
13
|
+
const totalSteps = steps.length;
|
|
14
|
+
const [step, setStep] = _react.default.useState(1);
|
|
15
|
+
const currentStep = (_ref = steps[step - 1]) !== null && _ref !== void 0 ? _ref : null;
|
|
16
|
+
const hasNextStep = step < totalSteps;
|
|
17
|
+
const hasPreviousStep = step > 1;
|
|
18
|
+
const changeStep = nextStep => {
|
|
19
|
+
setStep(state => state + nextStep);
|
|
20
|
+
};
|
|
21
|
+
const nextStep = () => {
|
|
22
|
+
if (hasNextStep) {
|
|
23
|
+
changeStep(1);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const previousStep = () => {
|
|
27
|
+
if (hasPreviousStep) {
|
|
28
|
+
changeStep(-1);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return {
|
|
32
|
+
changeStep,
|
|
33
|
+
nextStep,
|
|
34
|
+
hasNextStep,
|
|
35
|
+
previousStep,
|
|
36
|
+
hasPreviousStep,
|
|
37
|
+
steps,
|
|
38
|
+
currentStep,
|
|
39
|
+
currentStepIndex: step,
|
|
40
|
+
setSteps,
|
|
41
|
+
totalSteps,
|
|
42
|
+
controls: {
|
|
43
|
+
changeStep,
|
|
44
|
+
nextStep,
|
|
45
|
+
hasNextStep,
|
|
46
|
+
previousStep,
|
|
47
|
+
hasPreviousStep,
|
|
48
|
+
steps,
|
|
49
|
+
currentStep,
|
|
50
|
+
currentStepIndex: step,
|
|
51
|
+
setSteps,
|
|
52
|
+
totalSteps
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
exports.useWizard = useWizard;
|
package/lib/icons/helper.d.ts
CHANGED
|
@@ -607,6 +607,18 @@ declare const _default: {
|
|
|
607
607
|
viewbox: string;
|
|
608
608
|
paths: string[];
|
|
609
609
|
};
|
|
610
|
+
similarity: {
|
|
611
|
+
viewbox: string;
|
|
612
|
+
paths: string[];
|
|
613
|
+
};
|
|
614
|
+
fileStack: {
|
|
615
|
+
viewbox: string;
|
|
616
|
+
paths: string[];
|
|
617
|
+
};
|
|
618
|
+
tree: {
|
|
619
|
+
viewbox: string;
|
|
620
|
+
paths: string[];
|
|
621
|
+
};
|
|
610
622
|
};
|
|
611
623
|
|
|
612
624
|
export { _default as default };
|
package/lib/icons/helper.js
CHANGED
|
@@ -612,5 +612,17 @@ var _default = exports.default = {
|
|
|
612
612
|
user_block: {
|
|
613
613
|
viewbox: '0 0 16 16',
|
|
614
614
|
paths: ['M7.5 16h-6.977c-0.14 0-0.274-0.059-0.369-0.163s-0.141-0.242-0.129-0.382c0.11-1.22 0.585-2.363 1.373-3.305 0.697-0.832 1.59-1.452 2.602-1.809l0-0.475c-0.562-0.385-1.037-0.926-1.385-1.582-0.402-0.758-0.615-1.634-0.615-2.535 0-1.251 0.405-2.431 1.139-3.323 0.758-0.92 1.774-1.427 2.861-1.427 2.119 0 3.874 1.966 3.993 4.476 0.013 0.276-0.2 0.51-0.476 0.523s-0.51-0.2-0.523-0.476c-0.094-1.976-1.41-3.524-2.995-3.524-1.654 0-3 1.682-3 3.75 0 1.457 0.687 2.795 1.75 3.408 0.155 0.089 0.25 0.254 0.25 0.433l-0 1.116c0 0.224-0.149 0.42-0.364 0.481-0.967 0.274-1.822 0.828-2.471 1.604-0.538 0.643-0.901 1.397-1.064 2.208h6.4c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z', 'M11.5 7c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5zM8 11.5c0-1.93 1.57-3.5 3.5-3.5 0.785 0 1.511 0.26 2.095 0.698l-4.897 4.897c-0.438-0.584-0.698-1.31-0.698-2.095zM11.5 15c-0.785 0-1.511-0.26-2.095-0.698l4.897-4.897c0.438 0.584 0.698 1.31 0.698 2.095 0 1.93-1.57 3.5-3.5 3.5z']
|
|
615
|
+
},
|
|
616
|
+
similarity: {
|
|
617
|
+
viewbox: '0 0 16 16',
|
|
618
|
+
paths: ['M13 4h-3v-1l-3-3h-7v12h6v4h10v-9l-3-3zM13 5.414l1.586 1.586h-1.586v-1.586zM7 1.414l1.586 1.586h-1.586v-1.586zM1 1h5v3h3v7h-8v-10zM15 15h-8v-3h3v-7h2v3h3v7z']
|
|
619
|
+
},
|
|
620
|
+
fileStack: {
|
|
621
|
+
viewbox: '0 0 16 16',
|
|
622
|
+
paths: ['M13.75 4h-0.75v-0.75c0-0.689-0.561-1.25-1.25-1.25h-0.75v-0.75c0-0.689-0.561-1.25-1.25-1.25h-7.5c-0.689 0-1.25 0.561-1.25 1.25v9.5c0 0.689 0.561 1.25 1.25 1.25h0.75v0.75c0 0.689 0.561 1.25 1.25 1.25h0.75v0.75c0 0.689 0.561 1.25 1.25 1.25h7.5c0.689 0 1.25-0.561 1.25-1.25v-9.5c0-0.689-0.561-1.25-1.25-1.25zM2.25 11c-0.138 0-0.25-0.113-0.25-0.25v-9.5c0-0.137 0.112-0.25 0.25-0.25h7.5c0.137 0 0.25 0.113 0.25 0.25v0.75h-5.75c-0.689 0-1.25 0.561-1.25 1.25v7.75h-0.75zM4.25 13c-0.138 0-0.25-0.113-0.25-0.25v-9.5c0-0.138 0.112-0.25 0.25-0.25h7.5c0.137 0 0.25 0.112 0.25 0.25v0.75h-5.75c-0.689 0-1.25 0.561-1.25 1.25v7.75h-0.75zM14 14.75c0 0.137-0.113 0.25-0.25 0.25h-7.5c-0.138 0-0.25-0.113-0.25-0.25v-9.5c0-0.138 0.112-0.25 0.25-0.25h7.5c0.137 0 0.25 0.112 0.25 0.25v9.5z']
|
|
623
|
+
},
|
|
624
|
+
tree: {
|
|
625
|
+
viewbox: '0 0 16 16',
|
|
626
|
+
paths: ['M15.25 12h-0.25v-3.25c0-0.965-0.785-1.75-1.75-1.75h-4.25v-2h0.25c0.412 0 0.75-0.338 0.75-0.75v-2.5c0-0.413-0.338-0.75-0.75-0.75h-2.5c-0.412 0-0.75 0.337-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h0.25v2h-4.25c-0.965 0-1.75 0.785-1.75 1.75v3.25h-0.25c-0.412 0-0.75 0.338-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h2.5c0.413 0 0.75-0.338 0.75-0.75v-2.5c0-0.412-0.337-0.75-0.75-0.75h-0.25v-3h4v3h-0.25c-0.412 0-0.75 0.338-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-2.5c0-0.412-0.338-0.75-0.75-0.75h-0.25v-3h4v3h-0.25c-0.412 0-0.75 0.338-0.75 0.75v2.5c0 0.412 0.338 0.75 0.75 0.75h2.5c0.412 0 0.75-0.338 0.75-0.75v-2.5c0-0.412-0.338-0.75-0.75-0.75zM3 15h-2v-2h2v2zM9 15h-2v-2h2v2zM7 4v-2h2v2h-2zM15 15h-2v-2h2v2z']
|
|
615
627
|
}
|
|
616
628
|
};
|