@portnet/ui 3.1.6 → 4.0.1

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.
Files changed (27) hide show
  1. package/dist/components/buttons/PuiButton.js +96 -103
  2. package/dist/components/common/StyledMuiButton.js +3 -5
  3. package/dist/components/common/StyledMuiTextField.js +103 -59
  4. package/dist/components/inputs/PuiDateField.js +176 -52
  5. package/dist/components/inputs/PuiDateTimeField.js +204 -195
  6. package/dist/components/inputs/PuiSelect.js +124 -82
  7. package/dist/components/others/DateTimePickerField.js +210 -0
  8. package/dist/components/others/PuiSection.js +88 -31
  9. package/dist/components/referentiel/components/PuiSpecificReferentielField.js +6 -24
  10. package/dist/components/table/PuiTable.js +124 -50
  11. package/dist/components/table/PuiTableAction.js +12 -2
  12. package/dist/components/typography/PuiMainTitle.js +124 -35
  13. package/dist/components/ui/pages/general/PuiSearchPage.js +56 -34
  14. package/dist/config/apperance.js +13 -95
  15. package/dist/index.js +0 -42
  16. package/package.json +20 -25
  17. package/dist/components/providers/PuiAntdProvider.js +0 -70
  18. package/dist/components/providers/PuiThemeProvider.js +0 -230
  19. package/dist/components/stepper/PuiStepContent.js +0 -66
  20. package/dist/components/stepper/PuiStepper.js +0 -184
  21. package/dist/components/stepper/PuiStepperActions.js +0 -105
  22. package/dist/components/table/PuiModernTable.js +0 -541
  23. package/dist/components-antd-optional/PuiAntdForm.js +0 -328
  24. package/dist/components-antd-optional/PuiAntdStepper.js +0 -317
  25. package/dist/components-antd-optional/PuiAntdTable.js +0 -352
  26. package/dist/config/antdTheme.js +0 -227
  27. package/dist/hooks/useCustomAxios.js +0 -36
@@ -1,328 +0,0 @@
1
- "use strict";
2
-
3
- require("core-js/modules/esnext.iterator.filter.js");
4
- require("core-js/modules/esnext.iterator.for-each.js");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.FormTextArea = exports.FormSwitch = exports.FormSelect = exports.FormItem = exports.FormInput = exports.FormDatePicker = void 0;
9
- require("core-js/modules/esnext.iterator.constructor.js");
10
- require("core-js/modules/esnext.iterator.map.js");
11
- var _react = _interopRequireDefault(require("react"));
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
- var _antd = require("antd");
14
- var _material = require("@mui/material");
15
- var _styles = require("@mui/material/styles");
16
- var _apperance = require("../../config/apperance");
17
- var _jsxRuntime = require("react/jsx-runtime");
18
- const _excluded = ["title", "subtitle", "form", "onFinish", "onFinishFailed", "initialValues", "layout", "size", "children", "submitText", "cancelText", "onCancel", "loading", "disabled", "showActions", "actionAlign"],
19
- _excluded2 = ["placeholder"],
20
- _excluded3 = ["placeholder", "rows"],
21
- _excluded4 = ["placeholder", "children", "options"],
22
- _excluded5 = ["placeholder"];
23
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
24
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
25
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
26
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
27
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
28
- function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
29
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
30
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
31
- const {
32
- TextArea
33
- } = _antd.Input;
34
- const {
35
- Option
36
- } = _antd.Select;
37
-
38
- // Container avec style moderne
39
- const FormContainer = (0, _styles.styled)(_antd.Card)(() => ({
40
- backgroundColor: _apperance.palette.background.paper,
41
- border: "1px solid ".concat(_apperance.palette.border.light),
42
- borderRadius: '12px',
43
- boxShadow: _apperance.palette.shadow.card,
44
- '& .ant-card-body': {
45
- padding: '32px'
46
- },
47
- // Styles personnalisés pour les champs Ant Design
48
- '& .ant-form-item': {
49
- marginBottom: '24px',
50
- '& .ant-form-item-label': {
51
- paddingBottom: '8px',
52
- '& label': {
53
- fontSize: '14px',
54
- fontWeight: 600,
55
- color: _apperance.palette.gray[700],
56
- height: 'auto',
57
- '&.ant-form-item-required': {
58
- '&::before': {
59
- display: 'none'
60
- },
61
- '&::after': {
62
- content: '"*"',
63
- color: _apperance.palette.error,
64
- marginLeft: '4px'
65
- }
66
- }
67
- }
68
- },
69
- '& .ant-input': {
70
- borderRadius: '8px',
71
- border: "2px solid ".concat(_apperance.palette.border.light),
72
- fontSize: '14px',
73
- padding: '10px 14px',
74
- backgroundColor: _apperance.palette.background.paper,
75
- transition: 'all 0.2s ease',
76
- '&:hover': {
77
- borderColor: _apperance.palette.gray[400],
78
- boxShadow: "0 0 0 2px ".concat(_apperance.palette.primary, "10")
79
- },
80
- '&:focus, &.ant-input-focused': {
81
- borderColor: _apperance.palette.primary,
82
- boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
83
- outline: 'none'
84
- },
85
- '&::placeholder': {
86
- color: _apperance.palette.gray[400],
87
- fontStyle: 'italic'
88
- }
89
- },
90
- '& .ant-select': {
91
- '& .ant-select-selector': {
92
- borderRadius: '8px !important',
93
- border: "2px solid ".concat(_apperance.palette.border.light, " !important"),
94
- backgroundColor: "".concat(_apperance.palette.background.paper, " !important"),
95
- '&:hover': {
96
- borderColor: "".concat(_apperance.palette.gray[400], " !important")
97
- }
98
- },
99
- '&.ant-select-focused .ant-select-selector': {
100
- borderColor: "".concat(_apperance.palette.primary, " !important"),
101
- boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20 !important")
102
- }
103
- },
104
- '& .ant-picker': {
105
- borderRadius: '8px',
106
- border: "2px solid ".concat(_apperance.palette.border.light),
107
- width: '100%',
108
- padding: '10px 14px',
109
- '&:hover': {
110
- borderColor: _apperance.palette.gray[400]
111
- },
112
- '&.ant-picker-focused': {
113
- borderColor: _apperance.palette.primary,
114
- boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20")
115
- }
116
- },
117
- '& .ant-switch': {
118
- backgroundColor: _apperance.palette.gray[300],
119
- '&.ant-switch-checked': {
120
- backgroundColor: _apperance.palette.primary
121
- }
122
- }
123
- },
124
- '& .ant-form-item-has-error': {
125
- '& .ant-input, & .ant-select-selector, & .ant-picker': {
126
- borderColor: "".concat(_apperance.palette.error, " !important"),
127
- backgroundColor: "".concat(_apperance.palette.background.error, " !important")
128
- }
129
- },
130
- '& .ant-form-item-explain-error': {
131
- color: _apperance.palette.error,
132
- fontSize: '12px',
133
- marginTop: '4px',
134
- fontWeight: 500
135
- }
136
- }));
137
-
138
- /**
139
- * Composant de formulaire moderne utilisant Ant Design avec les styles des maquettes
140
- */
141
- const PuiAntdForm = _ref => {
142
- let {
143
- title,
144
- subtitle,
145
- form,
146
- onFinish,
147
- onFinishFailed,
148
- initialValues,
149
- layout = 'vertical',
150
- size = 'middle',
151
- children,
152
- submitText = 'Valider',
153
- cancelText = 'Annuler',
154
- onCancel,
155
- loading = false,
156
- disabled = false,
157
- showActions = true,
158
- actionAlign = 'right'
159
- } = _ref,
160
- props = _objectWithoutProperties(_ref, _excluded);
161
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormContainer, {
162
- children: [(title || subtitle) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
163
- sx: {
164
- mb: 4
165
- },
166
- children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
167
- variant: "h4",
168
- sx: {
169
- mb: 1,
170
- fontWeight: 600,
171
- color: _apperance.palette.gray[800],
172
- fontSize: '24px'
173
- },
174
- children: title
175
- }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
176
- variant: "body1",
177
- sx: {
178
- color: _apperance.palette.gray[600],
179
- fontSize: '16px',
180
- lineHeight: 1.5
181
- },
182
- children: subtitle
183
- }), (title || subtitle) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {
184
- style: {
185
- margin: '24px 0'
186
- }
187
- })]
188
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, _objectSpread(_objectSpread({
189
- form: form,
190
- layout: layout,
191
- size: size,
192
- initialValues: initialValues,
193
- onFinish: onFinish,
194
- onFinishFailed: onFinishFailed,
195
- disabled: disabled,
196
- autoComplete: "off"
197
- }, props), {}, {
198
- children: [children, showActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
199
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {
200
- style: {
201
- margin: '32px 0 24px 0'
202
- }
203
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
204
- sx: {
205
- display: 'flex',
206
- justifyContent: actionAlign === 'center' ? 'center' : actionAlign === 'left' ? 'flex-start' : 'flex-end',
207
- gap: 2
208
- },
209
- children: [onCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
210
- size: "large",
211
- onClick: onCancel,
212
- disabled: loading,
213
- style: {
214
- borderRadius: '8px',
215
- height: '48px',
216
- padding: '0 24px',
217
- fontWeight: 500
218
- },
219
- children: cancelText
220
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
221
- type: "primary",
222
- size: "large",
223
- htmlType: "submit",
224
- loading: loading,
225
- disabled: disabled,
226
- style: {
227
- borderRadius: '8px',
228
- height: '48px',
229
- padding: '0 24px',
230
- fontWeight: 500,
231
- backgroundColor: _apperance.palette.primary,
232
- borderColor: _apperance.palette.primary
233
- },
234
- children: submitText
235
- })]
236
- })]
237
- })]
238
- }))]
239
- });
240
- };
241
-
242
- // Composants de champs pré-stylés
243
- const FormItem = exports.FormItem = _antd.Form.Item;
244
- const FormInput = _ref2 => {
245
- let {
246
- placeholder
247
- } = _ref2,
248
- props = _objectWithoutProperties(_ref2, _excluded2);
249
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, _objectSpread({
250
- placeholder: placeholder,
251
- style: {
252
- height: '40px'
253
- }
254
- }, props));
255
- };
256
- exports.FormInput = FormInput;
257
- const FormTextArea = _ref3 => {
258
- let {
259
- placeholder,
260
- rows = 4
261
- } = _ref3,
262
- props = _objectWithoutProperties(_ref3, _excluded3);
263
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, _objectSpread({
264
- placeholder: placeholder,
265
- rows: rows,
266
- style: {
267
- borderRadius: '8px'
268
- }
269
- }, props));
270
- };
271
- exports.FormTextArea = FormTextArea;
272
- const FormSelect = _ref4 => {
273
- let {
274
- placeholder,
275
- children,
276
- options
277
- } = _ref4,
278
- props = _objectWithoutProperties(_ref4, _excluded4);
279
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select, _objectSpread(_objectSpread({
280
- placeholder: placeholder,
281
- style: {
282
- height: '40px'
283
- },
284
- dropdownStyle: {
285
- borderRadius: '8px'
286
- }
287
- }, props), {}, {
288
- children: options ? options.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
289
- value: option.value,
290
- children: option.label
291
- }, option.value)) : children
292
- }));
293
- };
294
- exports.FormSelect = FormSelect;
295
- const FormDatePicker = _ref5 => {
296
- let {
297
- placeholder
298
- } = _ref5,
299
- props = _objectWithoutProperties(_ref5, _excluded5);
300
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, _objectSpread({
301
- placeholder: placeholder,
302
- style: {
303
- height: '40px'
304
- }
305
- }, props));
306
- };
307
- exports.FormDatePicker = FormDatePicker;
308
- const FormSwitch = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Switch, _objectSpread({}, props));
309
- exports.FormSwitch = FormSwitch;
310
- PuiAntdForm.propTypes = {
311
- title: _propTypes.default.string,
312
- subtitle: _propTypes.default.string,
313
- form: _propTypes.default.object,
314
- onFinish: _propTypes.default.func,
315
- onFinishFailed: _propTypes.default.func,
316
- initialValues: _propTypes.default.object,
317
- layout: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
318
- size: _propTypes.default.oneOf(['small', 'middle', 'large']),
319
- children: _propTypes.default.node,
320
- submitText: _propTypes.default.string,
321
- cancelText: _propTypes.default.string,
322
- onCancel: _propTypes.default.func,
323
- loading: _propTypes.default.bool,
324
- disabled: _propTypes.default.bool,
325
- showActions: _propTypes.default.bool,
326
- actionAlign: _propTypes.default.oneOf(['left', 'center', 'right'])
327
- };
328
- var _default = exports.default = PuiAntdForm;
@@ -1,317 +0,0 @@
1
- "use strict";
2
-
3
- require("core-js/modules/esnext.iterator.filter.js");
4
- require("core-js/modules/esnext.iterator.for-each.js");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- require("core-js/modules/es.symbol.description.js");
10
- require("core-js/modules/esnext.iterator.constructor.js");
11
- require("core-js/modules/esnext.iterator.map.js");
12
- var _react = _interopRequireDefault(require("react"));
13
- var _propTypes = _interopRequireDefault(require("prop-types"));
14
- var _antd = require("antd");
15
- var _icons = require("@ant-design/icons");
16
- var _material = require("@mui/material");
17
- var _styles = require("@mui/material/styles");
18
- var _apperance = require("../../config/apperance");
19
- var _jsxRuntime = require("react/jsx-runtime");
20
- const _excluded = ["steps", "current", "status", "direction", "size", "showContent", "showActions", "onPrevious", "onNext", "onFinish", "previousText", "nextText", "finishText", "loading", "disabled", "allowPreviousSteps", "children"];
21
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
22
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
25
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
26
- function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
27
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
28
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
29
- const {
30
- Step
31
- } = _antd.Steps;
32
-
33
- // Container avec style moderne basé sur les maquettes de parcours
34
- const StepperContainer = (0, _styles.styled)(_material.Box)(() => ({
35
- backgroundColor: _apperance.palette.background.default,
36
- padding: '32px',
37
- borderRadius: '12px',
38
- // Styles personnalisés pour les Steps Ant Design
39
- '& .ant-steps': {
40
- '& .ant-steps-item': {
41
- '& .ant-steps-item-icon': {
42
- borderRadius: '50%',
43
- width: '40px',
44
- height: '40px',
45
- lineHeight: '40px',
46
- border: "2px solid ".concat(_apperance.palette.border.main),
47
- backgroundColor: _apperance.palette.background.paper,
48
- '& .ant-steps-icon': {
49
- fontSize: '16px',
50
- color: _apperance.palette.gray[500]
51
- }
52
- },
53
- '&.ant-steps-item-wait': {
54
- '& .ant-steps-item-icon': {
55
- borderColor: _apperance.palette.border.main,
56
- backgroundColor: _apperance.palette.background.paper,
57
- '& .ant-steps-icon': {
58
- color: _apperance.palette.gray[400]
59
- }
60
- },
61
- '& .ant-steps-item-title': {
62
- color: _apperance.palette.gray[500],
63
- fontWeight: 400
64
- },
65
- '& .ant-steps-item-description': {
66
- color: _apperance.palette.gray[400]
67
- }
68
- },
69
- '&.ant-steps-item-process': {
70
- '& .ant-steps-item-icon': {
71
- borderColor: _apperance.palette.primary,
72
- backgroundColor: _apperance.palette.primary,
73
- '& .ant-steps-icon': {
74
- color: _apperance.palette.white
75
- }
76
- },
77
- '& .ant-steps-item-title': {
78
- color: _apperance.palette.primary,
79
- fontWeight: 600
80
- },
81
- '& .ant-steps-item-description': {
82
- color: _apperance.palette.gray[600]
83
- }
84
- },
85
- '&.ant-steps-item-finish': {
86
- '& .ant-steps-item-icon': {
87
- borderColor: _apperance.palette.success,
88
- backgroundColor: _apperance.palette.success,
89
- '& .ant-steps-icon': {
90
- color: _apperance.palette.white
91
- }
92
- },
93
- '& .ant-steps-item-title': {
94
- color: _apperance.palette.success,
95
- fontWeight: 500
96
- },
97
- '& .ant-steps-item-description': {
98
- color: _apperance.palette.gray[600]
99
- }
100
- },
101
- '&.ant-steps-item-error': {
102
- '& .ant-steps-item-icon': {
103
- borderColor: _apperance.palette.error,
104
- backgroundColor: _apperance.palette.error,
105
- '& .ant-steps-icon': {
106
- color: _apperance.palette.white
107
- }
108
- },
109
- '& .ant-steps-item-title': {
110
- color: _apperance.palette.error,
111
- fontWeight: 500
112
- },
113
- '& .ant-steps-item-description': {
114
- color: _apperance.palette.error
115
- }
116
- },
117
- '& .ant-steps-item-title': {
118
- fontSize: '16px',
119
- fontWeight: 500,
120
- lineHeight: 1.4,
121
- marginBottom: '4px'
122
- },
123
- '& .ant-steps-item-description': {
124
- fontSize: '14px',
125
- lineHeight: 1.4
126
- },
127
- '&:not(:last-child)': {
128
- '& .ant-steps-item-tail': {
129
- '&::after': {
130
- backgroundColor: _apperance.palette.border.light,
131
- height: '2px',
132
- top: '20px'
133
- }
134
- },
135
- '&.ant-steps-item-finish .ant-steps-item-tail::after': {
136
- backgroundColor: _apperance.palette.success
137
- }
138
- }
139
- }
140
- }
141
- }));
142
-
143
- // Card pour le contenu de l'étape
144
- const StepContent = (0, _styles.styled)(_antd.Card)(() => ({
145
- marginTop: '32px',
146
- backgroundColor: _apperance.palette.background.paper,
147
- border: "1px solid ".concat(_apperance.palette.border.light),
148
- borderRadius: '12px',
149
- boxShadow: _apperance.palette.shadow.card,
150
- '& .ant-card-head': {
151
- borderBottom: "1px solid ".concat(_apperance.palette.border.light),
152
- padding: '20px 24px',
153
- '& .ant-card-head-title': {
154
- fontSize: '20px',
155
- fontWeight: 600,
156
- color: _apperance.palette.gray[800]
157
- }
158
- },
159
- '& .ant-card-body': {
160
- padding: '32px'
161
- }
162
- }));
163
-
164
- // Actions du stepper
165
- const StepperActions = (0, _styles.styled)(_material.Box)(() => ({
166
- marginTop: '32px',
167
- display: 'flex',
168
- justifyContent: 'space-between',
169
- alignItems: 'center',
170
- '& .ant-btn': {
171
- height: '48px',
172
- padding: '0 24px',
173
- borderRadius: '8px',
174
- fontWeight: 500,
175
- fontSize: '14px',
176
- '&.ant-btn-primary': {
177
- backgroundColor: _apperance.palette.primary,
178
- borderColor: _apperance.palette.primary,
179
- '&:hover': {
180
- backgroundColor: _apperance.palette.blue.dark,
181
- borderColor: _apperance.palette.blue.dark
182
- }
183
- },
184
- '&:not(.ant-btn-primary)': {
185
- borderColor: _apperance.palette.border.main,
186
- color: _apperance.palette.gray[700],
187
- '&:hover': {
188
- borderColor: _apperance.palette.primary,
189
- color: _apperance.palette.primary
190
- }
191
- }
192
- }
193
- }));
194
-
195
- /**
196
- * Composant de stepper moderne basé sur les maquettes de parcours
197
- */
198
- const PuiAntdStepper = _ref => {
199
- let {
200
- steps = [],
201
- current = 0,
202
- status = 'process',
203
- direction = 'horizontal',
204
- size = 'default',
205
- showContent = true,
206
- showActions = true,
207
- onPrevious,
208
- onNext,
209
- onFinish,
210
- previousText = 'Précédent',
211
- nextText = 'Suivant',
212
- finishText = 'Terminer',
213
- loading = false,
214
- disabled = false,
215
- allowPreviousSteps = true,
216
- children
217
- } = _ref,
218
- props = _objectWithoutProperties(_ref, _excluded);
219
- const isLastStep = current === steps.length - 1;
220
- const isFirstStep = current === 0;
221
- const currentStep = steps[current];
222
- const handleStepClick = stepIndex => {
223
- if (!allowPreviousSteps || stepIndex > current || disabled) return;
224
- // Permet de revenir aux étapes précédentes
225
- if (stepIndex < current && onPrevious) {
226
- const diff = current - stepIndex;
227
- for (let i = 0; i < diff; i++) {
228
- onPrevious();
229
- }
230
- }
231
- };
232
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepperContainer, {
233
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Steps, _objectSpread(_objectSpread({
234
- current: current,
235
- status: status,
236
- direction: direction,
237
- size: size
238
- }, props), {}, {
239
- children: steps.map((step, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
240
- title: step.title,
241
- description: step.description,
242
- icon: step.icon,
243
- disabled: step.disabled,
244
- onClick: () => handleStepClick(index),
245
- style: {
246
- cursor: allowPreviousSteps && index < current && !disabled ? 'pointer' : 'default'
247
- }
248
- }, step.key || index))
249
- })), showContent && currentStep && /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContent, {
250
- title: currentStep.contentTitle || currentStep.title,
251
- bordered: false,
252
- children: currentStep.content || children
253
- }), showActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepperActions, {
254
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
255
- children: !isFirstStep && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
256
- onClick: onPrevious,
257
- disabled: disabled || loading,
258
- size: "large",
259
- children: previousText
260
- })
261
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
262
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
263
- variant: "body2",
264
- sx: {
265
- color: _apperance.palette.gray[600],
266
- fontSize: '14px'
267
- },
268
- children: ["\xC9tape ", current + 1, " sur ", steps.length]
269
- }), isLastStep ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
270
- type: "primary",
271
- onClick: onFinish,
272
- loading: loading,
273
- disabled: disabled,
274
- size: "large",
275
- icon: !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}),
276
- children: finishText
277
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
278
- type: "primary",
279
- onClick: onNext,
280
- loading: loading,
281
- disabled: disabled,
282
- size: "large",
283
- icon: loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}),
284
- children: nextText
285
- })]
286
- })]
287
- })]
288
- });
289
- };
290
- PuiAntdStepper.propTypes = {
291
- steps: _propTypes.default.arrayOf(_propTypes.default.shape({
292
- key: _propTypes.default.string,
293
- title: _propTypes.default.string.isRequired,
294
- description: _propTypes.default.string,
295
- content: _propTypes.default.node,
296
- contentTitle: _propTypes.default.string,
297
- icon: _propTypes.default.node,
298
- disabled: _propTypes.default.bool
299
- })).isRequired,
300
- current: _propTypes.default.number,
301
- status: _propTypes.default.oneOf(['wait', 'process', 'finish', 'error']),
302
- direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
303
- size: _propTypes.default.oneOf(['small', 'default']),
304
- showContent: _propTypes.default.bool,
305
- showActions: _propTypes.default.bool,
306
- onPrevious: _propTypes.default.func,
307
- onNext: _propTypes.default.func,
308
- onFinish: _propTypes.default.func,
309
- previousText: _propTypes.default.string,
310
- nextText: _propTypes.default.string,
311
- finishText: _propTypes.default.string,
312
- loading: _propTypes.default.bool,
313
- disabled: _propTypes.default.bool,
314
- allowPreviousSteps: _propTypes.default.bool,
315
- children: _propTypes.default.node
316
- };
317
- var _default = exports.default = PuiAntdStepper;