@portnet/ui 2.0.2 → 2.0.4
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/dist/components/buttons/PuiButton.js +80 -72
- package/dist/components/common/StyledMuiTextField.js +53 -18
- package/dist/components/inputs/PuiFileField.js +82 -10
- package/dist/components/others/PuiDialog.js +18 -9
- package/dist/components/others/PuiSection.js +11 -11
- package/dist/components/table/PuiTable.js +220 -481
- package/dist/components/ui/pages/general/PuiSearchPage.js +172 -142
- package/dist/config/ThemeProvider.js +32 -0
- package/dist/config/styleUtils.js +135 -0
- package/dist/config/theme.js +183 -0
- package/dist/index.js +63 -0
- package/package.json +2 -1
|
@@ -9,79 +9,57 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
value: true
|
|
10
10
|
});
|
|
11
11
|
exports.default = void 0;
|
|
12
|
-
var _styles = require("@mui/material/styles");
|
|
13
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
13
|
var React = _interopRequireWildcard(require("react"));
|
|
15
14
|
var _apperance = require("../../config/apperance");
|
|
16
|
-
var
|
|
15
|
+
var _antd = require("antd");
|
|
16
|
+
var _icons = require("@ant-design/icons");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
const _excluded = ["id", "className", "sx", "color", "disabled", "loading", "loadingPosition", "startIcon", "endIcon", "fullWidth", "children", "type", "onClick"];
|
|
18
|
+
const _excluded = ["id", "className", "sx", "color", "disabled", "loading", "loadingPosition", "startIcon", "endIcon", "fullWidth", "children", "type", "onClick", "title"]; // Fonction utilitaire pour obtenir le type de bouton Ant Design en fonction de la couleur
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
20
|
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; }
|
|
21
21
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
22
|
-
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; }
|
|
23
|
-
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; }
|
|
24
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; }
|
|
25
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; }
|
|
26
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; }
|
|
27
25
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
28
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); }
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return {
|
|
33
|
-
"&.MuiButton-root": {
|
|
34
|
-
boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
});
|
|
38
|
-
const PrimaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
|
|
39
|
-
ref: ref,
|
|
40
|
-
variant: "outlined"
|
|
41
|
-
}, props))))(() => {
|
|
42
|
-
return {
|
|
43
|
-
"&.MuiButton-root": {
|
|
44
|
-
backgroundColor: _apperance.palette.primary,
|
|
45
|
-
border: "2px solid ".concat(_apperance.palette.primary),
|
|
46
|
-
color: _apperance.palette.white
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
});
|
|
50
|
-
const SecondaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
|
|
51
|
-
ref: ref,
|
|
52
|
-
variant: "outlined"
|
|
53
|
-
}, props))))(() => {
|
|
54
|
-
return {
|
|
55
|
-
"&.MuiButton-root": {
|
|
56
|
-
backgroundColor: _apperance.palette.secondary,
|
|
57
|
-
border: "2px solid ".concat(_apperance.palette.gray.dark),
|
|
58
|
-
color: _apperance.palette.gray.darker
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
});
|
|
62
|
-
const TertiaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
|
|
63
|
-
ref: ref,
|
|
64
|
-
variant: "outlined"
|
|
65
|
-
}, props))))(() => {
|
|
66
|
-
return {
|
|
67
|
-
"&.MuiButton-root": {
|
|
68
|
-
backgroundColor: _apperance.palette.white,
|
|
69
|
-
border: "2px solid ".concat(_apperance.palette.primary),
|
|
70
|
-
color: _apperance.palette.primary
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
});
|
|
74
|
-
const getButtonByColor = color => {
|
|
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 getButtonType = color => {
|
|
75
30
|
switch (color) {
|
|
76
|
-
case "
|
|
77
|
-
return
|
|
31
|
+
case "primary":
|
|
32
|
+
return "primary";
|
|
78
33
|
case "tertiary":
|
|
79
|
-
return
|
|
34
|
+
return "default";
|
|
35
|
+
case "secondary":
|
|
36
|
+
default:
|
|
37
|
+
return "default";
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// Fonction utilitaire pour obtenir le style du bouton en fonction de la couleur
|
|
42
|
+
const getButtonStyle = color => {
|
|
43
|
+
switch (color) {
|
|
80
44
|
case "primary":
|
|
45
|
+
return {};
|
|
46
|
+
case "tertiary":
|
|
47
|
+
return {
|
|
48
|
+
color: _apperance.palette.primary,
|
|
49
|
+
borderColor: _apperance.palette.primary
|
|
50
|
+
};
|
|
51
|
+
case "secondary":
|
|
52
|
+
return {
|
|
53
|
+
backgroundColor: _apperance.palette.secondary,
|
|
54
|
+
borderColor: _apperance.palette.gray.dark,
|
|
55
|
+
color: _apperance.palette.gray.darker
|
|
56
|
+
};
|
|
81
57
|
default:
|
|
82
|
-
return
|
|
58
|
+
return {};
|
|
83
59
|
}
|
|
84
60
|
};
|
|
61
|
+
|
|
62
|
+
// Composant PuiButton avec Ant Design
|
|
85
63
|
const PuiButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
86
64
|
let {
|
|
87
65
|
id,
|
|
@@ -96,24 +74,53 @@ const PuiButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
96
74
|
fullWidth,
|
|
97
75
|
children,
|
|
98
76
|
type,
|
|
99
|
-
onClick
|
|
77
|
+
onClick,
|
|
78
|
+
title
|
|
100
79
|
} = _ref,
|
|
101
80
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
81
|
+
// Déterminer le type de bouton pour Ant Design
|
|
82
|
+
const buttonType = getButtonType(color);
|
|
83
|
+
|
|
84
|
+
// Obtenir le style spécifique pour ce type de bouton
|
|
85
|
+
const buttonStyle = getButtonStyle(color);
|
|
86
|
+
|
|
87
|
+
// Configurer les icônes en fonction de loadingPosition
|
|
88
|
+
let icon = null;
|
|
89
|
+
if (loading) {
|
|
90
|
+
icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {});
|
|
91
|
+
} else if (startIcon) {
|
|
92
|
+
icon = startIcon;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Préparer les styles du bouton
|
|
96
|
+
const buttonSx = _objectSpread(_objectSpread(_objectSpread({}, fullWidth ? {
|
|
97
|
+
width: '100%'
|
|
98
|
+
} : {}), buttonStyle), sx);
|
|
99
|
+
|
|
100
|
+
// Créer le bouton avec ou sans tooltip
|
|
101
|
+
const button = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, _objectSpread(_objectSpread({
|
|
102
|
+
ref: ref,
|
|
103
|
+
id: id,
|
|
104
|
+
className: className,
|
|
105
|
+
type: buttonType,
|
|
106
|
+
disabled: disabled,
|
|
107
|
+
loading: loading,
|
|
108
|
+
icon: icon,
|
|
109
|
+
style: buttonSx,
|
|
110
|
+
onClick: onClick,
|
|
111
|
+
htmlType: type
|
|
112
|
+
}, rest), {}, {
|
|
113
|
+
children: [children, endIcon && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
114
|
+
className: "ant-btn-icon-end",
|
|
115
|
+
children: endIcon
|
|
116
|
+
})]
|
|
117
|
+
}));
|
|
118
|
+
|
|
119
|
+
// Si un titre est fourni, envelopper le bouton dans un Tooltip
|
|
120
|
+
return title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
|
|
121
|
+
title: title,
|
|
122
|
+
children: button
|
|
123
|
+
}) : button;
|
|
117
124
|
});
|
|
118
125
|
PuiButton.propTypes = {
|
|
119
126
|
id: _propTypes.default.string,
|
|
@@ -127,7 +134,8 @@ PuiButton.propTypes = {
|
|
|
127
134
|
startIcon: _propTypes.default.element,
|
|
128
135
|
endIcon: _propTypes.default.element,
|
|
129
136
|
fullWidth: _propTypes.default.bool,
|
|
130
|
-
onClick: _propTypes.default.func
|
|
137
|
+
onClick: _propTypes.default.func,
|
|
138
|
+
title: _propTypes.default.string // Pour le tooltip
|
|
131
139
|
};
|
|
132
140
|
PuiButton.defaultProps = {
|
|
133
141
|
type: "button",
|
|
@@ -59,19 +59,22 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
|
|
|
59
59
|
}))(() => {
|
|
60
60
|
return {
|
|
61
61
|
"&.MuiFormControl-root": {
|
|
62
|
+
marginBottom: "16px",
|
|
63
|
+
transition: "all 0.2s ease",
|
|
62
64
|
"&.required .MuiInputBase-root": {
|
|
63
|
-
backgroundColor: _apperance.palette.background.required
|
|
65
|
+
backgroundColor: "".concat(_apperance.palette.background.required)
|
|
64
66
|
},
|
|
65
67
|
"& .MuiFormLabel-root": {
|
|
66
68
|
zIndex: 0,
|
|
67
69
|
lineSpacing: "-0.03em",
|
|
68
70
|
position: "initial",
|
|
69
71
|
transform: "none",
|
|
70
|
-
fontSize: "0.
|
|
72
|
+
fontSize: "0.85rem",
|
|
71
73
|
fontWeight: "600",
|
|
72
|
-
marginBottom: "
|
|
74
|
+
marginBottom: "6px",
|
|
73
75
|
color: _apperance.palette.gray.darker,
|
|
74
|
-
"
|
|
76
|
+
transition: "color 0.2s ease",
|
|
77
|
+
"&.Mui-focused": {
|
|
75
78
|
color: _apperance.palette.primary
|
|
76
79
|
},
|
|
77
80
|
"&.Mui-disabled": {
|
|
@@ -83,19 +86,29 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
|
|
|
83
86
|
},
|
|
84
87
|
"& .MuiInputBase-root": {
|
|
85
88
|
backgroundColor: _apperance.palette.white,
|
|
86
|
-
border: "
|
|
87
|
-
borderRadius: "
|
|
89
|
+
border: "1px solid ".concat(_apperance.palette.gray.dark),
|
|
90
|
+
borderRadius: "8px",
|
|
91
|
+
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
|
|
92
|
+
transition: "all 0.3s ease",
|
|
93
|
+
"&:hover:not(.Mui-disabled):not(.Mui-error)": {
|
|
94
|
+
borderColor: "".concat(_apperance.palette.primary, "80"),
|
|
95
|
+
boxShadow: "0 3px 6px rgba(0, 0, 0, 0.08)"
|
|
96
|
+
},
|
|
88
97
|
"&.MuiInputBase-multiline": {
|
|
89
|
-
padding: "
|
|
98
|
+
padding: "10px 0"
|
|
90
99
|
},
|
|
91
|
-
"&.Mui-focused
|
|
92
|
-
border: "2px solid ".concat(_apperance.palette.primary)
|
|
100
|
+
"&.Mui-focused": {
|
|
101
|
+
border: "2px solid ".concat(_apperance.palette.primary),
|
|
102
|
+
boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20")
|
|
93
103
|
},
|
|
94
|
-
"&.Mui-error
|
|
104
|
+
"&.Mui-error": {
|
|
95
105
|
border: "2px solid ".concat(_apperance.palette.error),
|
|
96
|
-
backgroundColor: _apperance.palette.background.error
|
|
106
|
+
backgroundColor: _apperance.palette.background.error,
|
|
107
|
+
boxShadow: "0 0 0 3px ".concat(_apperance.palette.error, "20")
|
|
97
108
|
},
|
|
98
|
-
"&.Mui-disabled
|
|
109
|
+
"&.Mui-disabled": {
|
|
110
|
+
opacity: 0.7,
|
|
111
|
+
border: "1px solid ".concat(_apperance.palette.gray.main),
|
|
99
112
|
"& input": {
|
|
100
113
|
color: "".concat(_apperance.palette.gray.darker),
|
|
101
114
|
WebkitTextFillColor: "".concat(_apperance.palette.gray.darker)
|
|
@@ -103,15 +116,37 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
|
|
|
103
116
|
backgroundColor: "".concat(_apperance.palette.secondary)
|
|
104
117
|
},
|
|
105
118
|
"& .MuiInputBase-input": {
|
|
106
|
-
lineHeight: "1",
|
|
107
|
-
padding: "
|
|
108
|
-
fontSize: "0.
|
|
119
|
+
lineHeight: "1.5",
|
|
120
|
+
padding: "12px 14px",
|
|
121
|
+
fontSize: "0.9rem",
|
|
122
|
+
fontWeight: 400,
|
|
123
|
+
color: "rgba(0, 0, 0, 0.85)",
|
|
124
|
+
"&::placeholder": {
|
|
125
|
+
color: "rgba(0, 0, 0, 0.45)",
|
|
126
|
+
opacity: 1
|
|
127
|
+
},
|
|
128
|
+
"&:focus": {
|
|
129
|
+
boxShadow: "none"
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
"& .MuiInputAdornment-root": {
|
|
133
|
+
margin: "0 8px",
|
|
134
|
+
"& .MuiSvgIcon-root": {
|
|
135
|
+
fontSize: "1.2rem",
|
|
136
|
+
color: _apperance.palette.gray.dark
|
|
137
|
+
}
|
|
109
138
|
}
|
|
110
139
|
},
|
|
111
140
|
"& .MuiFormHelperText-root": {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
141
|
+
marginTop: "6px",
|
|
142
|
+
marginLeft: "4px",
|
|
143
|
+
fontWeight: "500",
|
|
144
|
+
fontSize: "0.75rem",
|
|
145
|
+
color: _apperance.palette.gray.darker,
|
|
146
|
+
transition: "color 0.2s ease",
|
|
147
|
+
"&.Mui-error": {
|
|
148
|
+
color: _apperance.palette.error
|
|
149
|
+
}
|
|
115
150
|
},
|
|
116
151
|
"& fieldset": {
|
|
117
152
|
display: "none"
|
|
@@ -38,13 +38,55 @@ const StyledFileMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef
|
|
|
38
38
|
"& .MuiInputBase-root": {
|
|
39
39
|
alignItems: "stretch",
|
|
40
40
|
padding: 0,
|
|
41
|
+
borderRadius: "8px",
|
|
42
|
+
transition: "all 0.3s ease",
|
|
43
|
+
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
|
|
44
|
+
"&:hover": {
|
|
45
|
+
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)"
|
|
46
|
+
},
|
|
41
47
|
"& .MuiButtonBase-root": {
|
|
42
48
|
minWidth: "fit-content",
|
|
43
|
-
fontSize: ".
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
49
|
+
fontSize: ".8rem",
|
|
50
|
+
fontWeight: 500,
|
|
51
|
+
paddingRight: "20px",
|
|
52
|
+
paddingLeft: "20px",
|
|
53
|
+
margin: "-1px",
|
|
54
|
+
borderTopRightRadius: "8px",
|
|
55
|
+
borderBottomRightRadius: "8px",
|
|
56
|
+
transition: "all 0.2s ease",
|
|
57
|
+
"&:hover": {
|
|
58
|
+
backgroundColor: "#1890ff",
|
|
59
|
+
color: "#fff"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"& .MuiInputBase-input": {
|
|
63
|
+
padding: "12px 14px",
|
|
64
|
+
fontSize: "0.9rem",
|
|
65
|
+
fontWeight: 400,
|
|
66
|
+
color: "rgba(0, 0, 0, 0.85)",
|
|
67
|
+
"&::placeholder": {
|
|
68
|
+
color: "rgba(0, 0, 0, 0.45)",
|
|
69
|
+
opacity: 1
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
"& .MuiFormLabel-root": {
|
|
74
|
+
fontSize: "0.9rem",
|
|
75
|
+
fontWeight: 500,
|
|
76
|
+
color: "rgba(0, 0, 0, 0.65)",
|
|
77
|
+
"&.Mui-focused": {
|
|
78
|
+
color: "#1890ff"
|
|
47
79
|
}
|
|
80
|
+
},
|
|
81
|
+
"& .MuiFormHelperText-root": {
|
|
82
|
+
marginLeft: "4px",
|
|
83
|
+
fontSize: "0.75rem"
|
|
84
|
+
},
|
|
85
|
+
"&.Mui-focused .MuiInputBase-root": {
|
|
86
|
+
boxShadow: "0 0 0 2px rgba(24, 144, 255, 0.2)"
|
|
87
|
+
},
|
|
88
|
+
"&.Mui-error .MuiInputBase-root": {
|
|
89
|
+
boxShadow: "0 0 0 2px rgba(255, 77, 79, 0.2)"
|
|
48
90
|
}
|
|
49
91
|
};
|
|
50
92
|
});
|
|
@@ -72,29 +114,56 @@ const PuiStandardFileField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
72
114
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
73
115
|
const fileInputRef = React.useRef();
|
|
74
116
|
const [innerFileDescription, setInnerFileDecription] = React.useState("");
|
|
117
|
+
const [isDragOver, setIsDragOver] = React.useState(false);
|
|
75
118
|
const fileChangeHandler = async event => {
|
|
76
119
|
const files = event.target.files;
|
|
77
120
|
const filesCount = files.length;
|
|
78
121
|
if (filesCount > 1) {
|
|
79
|
-
setInnerFileDecription("".concat(filesCount, " Fichiers charg\
|
|
80
|
-
} else {
|
|
122
|
+
setInnerFileDecription("".concat(filesCount, " Fichiers charg\xE9s"));
|
|
123
|
+
} else if (filesCount === 1) {
|
|
81
124
|
setInnerFileDecription(files[0].name);
|
|
82
125
|
}
|
|
83
126
|
onChange(files);
|
|
84
127
|
};
|
|
128
|
+
const handleDragOver = e => {
|
|
129
|
+
e.preventDefault();
|
|
130
|
+
setIsDragOver(true);
|
|
131
|
+
};
|
|
132
|
+
const handleDragLeave = () => {
|
|
133
|
+
setIsDragOver(false);
|
|
134
|
+
};
|
|
135
|
+
const handleDrop = e => {
|
|
136
|
+
e.preventDefault();
|
|
137
|
+
setIsDragOver(false);
|
|
138
|
+
const files = e.dataTransfer.files;
|
|
139
|
+
if (files.length > 0) {
|
|
140
|
+
fileInputRef.current.files = files;
|
|
141
|
+
const event = {
|
|
142
|
+
target: {
|
|
143
|
+
files
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
fileChangeHandler(event);
|
|
147
|
+
}
|
|
148
|
+
};
|
|
85
149
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
86
150
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFileMuiTextField, _objectSpread(_objectSpread({
|
|
87
151
|
ref: ref,
|
|
88
152
|
id: id,
|
|
89
|
-
className: className,
|
|
90
|
-
sx: sx,
|
|
153
|
+
className: "".concat(className, " ").concat(isDragOver ? 'drag-over' : ''),
|
|
154
|
+
sx: _objectSpread(_objectSpread({}, sx), {}, {
|
|
155
|
+
'& .MuiInputBase-root': _objectSpread({}, isDragOver && {
|
|
156
|
+
backgroundColor: 'rgba(24, 144, 255, 0.05)',
|
|
157
|
+
boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.3)'
|
|
158
|
+
})
|
|
159
|
+
}),
|
|
91
160
|
label: label,
|
|
92
161
|
value: fileDescription !== null && fileDescription !== void 0 ? fileDescription : innerFileDescription,
|
|
93
162
|
required: required,
|
|
94
163
|
disabled: disabled,
|
|
95
164
|
type: "text",
|
|
96
165
|
error: error,
|
|
97
|
-
focused: focused,
|
|
166
|
+
focused: focused || isDragOver,
|
|
98
167
|
fullWidth: fullWidth,
|
|
99
168
|
helperText: helperText,
|
|
100
169
|
inputProps: {
|
|
@@ -109,7 +178,10 @@ const PuiStandardFileField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
109
178
|
}, rest), {}, {
|
|
110
179
|
onClick: () => {
|
|
111
180
|
fileInputRef.current.click();
|
|
112
|
-
}
|
|
181
|
+
},
|
|
182
|
+
onDragOver: handleDragOver,
|
|
183
|
+
onDragLeave: handleDragLeave,
|
|
184
|
+
onDrop: handleDrop
|
|
113
185
|
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Input, {
|
|
114
186
|
type: "file",
|
|
115
187
|
inputRef: fileInputRef,
|
|
@@ -14,6 +14,7 @@ var _material = require("@mui/material");
|
|
|
14
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
15
|
var React = _interopRequireWildcard(require("react"));
|
|
16
16
|
var _apperance = require("../../config/apperance");
|
|
17
|
+
var _styleUtils = require("../../config/styleUtils");
|
|
17
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
19
|
const _excluded = ["id", "className", "sx", "open", "title", "maxWidth", "fullWidth", "scroll", "onClose", "children"];
|
|
19
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -48,35 +49,43 @@ const PuiDialog = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
48
49
|
open: open,
|
|
49
50
|
scroll: scroll,
|
|
50
51
|
maxWidth: maxWidth,
|
|
51
|
-
fullWidth: fullWidth
|
|
52
|
+
fullWidth: fullWidth,
|
|
53
|
+
PaperProps: {
|
|
54
|
+
sx: _objectSpread({}, (0, _styleUtils.getContainerStyles)({
|
|
55
|
+
overflow: 'hidden'
|
|
56
|
+
}))
|
|
57
|
+
}
|
|
52
58
|
}, rest), {}, {
|
|
53
59
|
children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
|
|
54
|
-
sx: {
|
|
55
|
-
fontSize: "1.
|
|
60
|
+
sx: _objectSpread({}, (0, _styleUtils.getHeaderStyles)({
|
|
61
|
+
fontSize: "1.3rem",
|
|
56
62
|
position: "relative",
|
|
57
63
|
backgroundColor: _apperance.palette.secondary,
|
|
58
64
|
color: _apperance.palette.primary,
|
|
65
|
+
padding: '16px 24px',
|
|
66
|
+
lineHeight: '1.5',
|
|
59
67
|
fontWeight: "600"
|
|
60
|
-
},
|
|
68
|
+
})),
|
|
61
69
|
onClose: onClose,
|
|
62
70
|
children: [title, onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
|
|
63
71
|
title: "Fermer",
|
|
64
72
|
size: "small",
|
|
65
73
|
onClick: onClose,
|
|
66
|
-
sx: {
|
|
74
|
+
sx: _objectSpread({}, (0, _styleUtils.getActionStyles)({
|
|
67
75
|
color: _apperance.palette.primary,
|
|
68
76
|
position: "absolute",
|
|
69
77
|
right: 16,
|
|
70
78
|
top: "50%",
|
|
71
|
-
transform: "translate(0,-50%)"
|
|
72
|
-
|
|
79
|
+
transform: "translate(0,-50%)",
|
|
80
|
+
padding: '4px'
|
|
81
|
+
})),
|
|
73
82
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
|
|
74
83
|
}) : null]
|
|
75
84
|
}), open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
|
|
76
85
|
sx: _objectSpread({
|
|
77
|
-
padding:
|
|
86
|
+
padding: 3,
|
|
78
87
|
"&.MuiDialogContent-root": {
|
|
79
|
-
paddingTop:
|
|
88
|
+
paddingTop: 3
|
|
80
89
|
}
|
|
81
90
|
}, sx),
|
|
82
91
|
children: children
|
|
@@ -14,6 +14,7 @@ var _styles = require("@mui/material/styles");
|
|
|
14
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
15
|
var React = _interopRequireWildcard(require("react"));
|
|
16
16
|
var _apperance = require("../../config/apperance");
|
|
17
|
+
var _styleUtils = require("../../config/styleUtils");
|
|
17
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
20
|
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; }
|
|
@@ -27,12 +28,10 @@ const StyledMuiPaper = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
|
|
|
27
28
|
ref: ref
|
|
28
29
|
}, props))))(() => {
|
|
29
30
|
return {
|
|
30
|
-
"&.MuiPaper-root": {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
position: "relative"
|
|
35
|
-
}
|
|
31
|
+
"&.MuiPaper-root": _objectSpread({}, (0, _styleUtils.getContainerStyles)({
|
|
32
|
+
position: "relative",
|
|
33
|
+
backgroundColor: _apperance.palette.gray.light
|
|
34
|
+
}))
|
|
36
35
|
};
|
|
37
36
|
});
|
|
38
37
|
const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
@@ -71,14 +70,15 @@ const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
71
70
|
}
|
|
72
71
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
73
72
|
variant: titleVariant,
|
|
74
|
-
sx: {
|
|
73
|
+
sx: _objectSpread({}, (0, _styleUtils.getHeaderStyles)({
|
|
75
74
|
textAlign: "center",
|
|
76
75
|
paddingX: 1,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
backgroundColor: "transparent",
|
|
77
|
+
borderBottom: "none",
|
|
78
|
+
minHeight: "auto",
|
|
79
|
+
textTransform: "none",
|
|
80
80
|
fontSize: "1.2rem"
|
|
81
|
-
},
|
|
81
|
+
})),
|
|
82
82
|
children: title
|
|
83
83
|
})]
|
|
84
84
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|