@portnet/ui 0.1.24 → 0.2.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 (3) hide show
  1. package/dist/components/inputs/PuiDateTimeField.js +201 -63
  2. package/dist/components/table/PuiTable.js +6 -6
  3. package/package.json +1 -1
package/dist/components/inputs/PuiDateTimeField.js CHANGED
@@ -7,14 +7,18 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  require("core-js/modules/web.dom-collections.iterator.js");
9
9
  require("core-js/modules/es.symbol.description.js");
10
+ var _material = require("@mui/material");
10
11
  var _styles = require("@mui/material/styles");
11
- var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
12
+ var _DatePicker = require("@mui/x-date-pickers/DatePicker");
12
13
  var _formik = require("formik");
13
14
  var _moment = _interopRequireDefault(require("moment"));
14
15
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
16
  var React = _interopRequireWildcard(require("react"));
16
17
  var _apperance = require("../../config/apperance");
18
+ var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
17
19
  var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
20
+ var _PuiDialog = _interopRequireDefault(require("../others/PuiDialog"));
21
+ var _PuiTextField = _interopRequireDefault(require("./PuiTextField"));
18
22
  var _jsxRuntime = require("react/jsx-runtime");
19
23
  const _excluded = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
20
24
  _excluded2 = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
@@ -31,22 +35,110 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
31
35
  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); }
32
36
  const StyledDateMuiTextField = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiTextField.default, _objectSpread({
33
37
  ref: ref
34
- }, props))))(() => {
35
- return {
36
- "&.MuiFormControl-root": {
37
- display: "block",
38
- "& .MuiInputAdornment-root .MuiButtonBase-root": {
39
- padding: "6px",
40
- marginRight: "-8px",
41
- "& .MuiSvgIcon-root": {
42
- width: "16px",
43
- height: "16px"
44
- }
38
+ }, props))))(() => ({
39
+ "&.MuiFormControl-root": {
40
+ display: "block",
41
+ "& .MuiInputAdornment-root .MuiButtonBase-root": {
42
+ padding: "6px",
43
+ marginRight: "-8px",
44
+ "& .MuiSvgIcon-root": {
45
+ width: "16px",
46
+ height: "16px"
45
47
  }
46
48
  }
49
+ }
50
+ }));
51
+ const TimePickerDialog = _ref => {
52
+ var _ref2, _position$top, _ref3, _ref4;
53
+ let {
54
+ open,
55
+ selectedDate,
56
+ onTimeSelected,
57
+ onClose,
58
+ position
59
+ } = _ref;
60
+ const defaultTime = (0, _moment.default)(selectedDate).isValid() ? (0, _moment.default)(selectedDate).format("HH:mm") : (0, _moment.default)().format("HH:mm");
61
+ const [selectedTime, setSelectedTime] = React.useState(defaultTime);
62
+ const handleTimeChange = event => {
63
+ setSelectedTime(event.target.value);
47
64
  };
48
- });
49
- const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
65
+ const handleOk = () => {
66
+ onTimeSelected(selectedTime);
67
+ onClose();
68
+ };
69
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiDialog.default, {
70
+ open: open,
71
+ onClose: onClose,
72
+ slotProps: {
73
+ backdrop: {
74
+ style: {
75
+ backgroundColor: "transparent",
76
+ boxShadow: "none"
77
+ }
78
+ }
79
+ },
80
+ hideBackdrop: true,
81
+ PaperProps: {
82
+ elevation: 5,
83
+ sx: {
84
+ backgroundColor: "white",
85
+ alignItems: "center",
86
+ display: "flex",
87
+ width: 340,
88
+ maxWidth: "720px!important",
89
+ position: "fixed",
90
+ height: 48,
91
+ left: (_ref2 = (position === null || position === void 0 ? void 0 : position.left) - 420 / 2) !== null && _ref2 !== void 0 ? _ref2 : 0,
92
+ top: (_position$top = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top !== void 0 ? _position$top : 0,
93
+ paddingLeft: 0
94
+ }
95
+ },
96
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
97
+ sx: {
98
+ display: "flex",
99
+ alignItems: "center",
100
+ alignContent: "center",
101
+ marginTop: 1,
102
+ gap: 2,
103
+ width: 340,
104
+ justifyContent: "center",
105
+ left: (_ref3 = (position === null || position === void 0 ? void 0 : position.left) - 380 / 2) !== null && _ref3 !== void 0 ? _ref3 : 0,
106
+ top: (_ref4 = (position === null || position === void 0 ? void 0 : position.top) + 36) !== null && _ref4 !== void 0 ? _ref4 : 36,
107
+ paddingLeft: 1.5,
108
+ position: "fixed"
109
+ },
110
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTextField.default, {
111
+ id: "time",
112
+ type: "time",
113
+ value: selectedTime,
114
+ onChange: handleTimeChange,
115
+ InputLabelProps: {
116
+ shrink: true
117
+ },
118
+ inputProps: {
119
+ step: 60
120
+ },
121
+ formik: false,
122
+ sx: {
123
+ width: 150
124
+ }
125
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
126
+ onClick: onClose,
127
+ sx: {
128
+ color: _apperance.palette.primary
129
+ },
130
+ children: "Cancel"
131
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
132
+ onClick: handleOk,
133
+ sx: {
134
+ color: _apperance.palette.primary
135
+ },
136
+ children: "OK"
137
+ })]
138
+ })
139
+ });
140
+ };
141
+ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
50
142
  let {
51
143
  id,
52
144
  className,
@@ -57,8 +149,8 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
57
149
  value,
58
150
  minDate,
59
151
  maxDate,
60
- inputFormat,
61
- format,
152
+ inputFormat = "YYYY-MM-DDTHH:mm:ss.SSSZ",
153
+ format = "YYYY-MM-DDTHH:mm:ss.SSSZ",
62
154
  disablePast,
63
155
  disableFuture,
64
156
  error,
@@ -68,50 +160,93 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
68
160
  helperText,
69
161
  onChange,
70
162
  onBlur
71
- } = _ref,
72
- rest = _objectWithoutProperties(_ref, _excluded);
73
- const handleChange = value => {
74
- const formattedValue = format ? value.format(format) : value.toISOString();
75
- onChange(formattedValue);
163
+ } = _ref5,
164
+ rest = _objectWithoutProperties(_ref5, _excluded);
165
+ const textFieldRef = React.useRef(null);
166
+ const [dateTime, setDateTime] = React.useState(value || null);
167
+ const minDateObj = minDate ? (0, _moment.default)(minDate, format).toDate() : undefined;
168
+ const maxDateObj = maxDate ? (0, _moment.default)(maxDate, format).toDate() : undefined;
169
+ const [displayedDateTime, setDisplayedDateTime] = React.useState(value || null);
170
+ const [openTimePicker, setOpenTimePicker] = React.useState(false);
171
+ const [dialogPosition, setDialogPosition] = React.useState();
172
+ const handleDateChange = date => {
173
+ if (date) {
174
+ setDateTime((0, _moment.default)(date).format(format));
175
+ setOpenTimePicker(true);
176
+ }
76
177
  };
77
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePicker.DateTimePicker, _objectSpread({
78
- ref: ref,
79
- sx: sx,
80
- ampm: false,
81
- label: label,
82
- inputFormat: inputFormat,
83
- value: value,
84
- onChange: handleChange,
85
- disablePast: disablePast,
86
- disableFuture: disableFuture,
87
- disabled: disabled,
88
- maxDate: maxDate,
89
- minDate: minDate,
90
- readOnly: readOnly,
91
- PopperProps: {
92
- sx: {
93
- "& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:focus, & .MuiButtonBase-root.Mui-selected:hover": {
94
- backgroundColor: _apperance.palette.primary
95
- }
96
- }
97
- },
98
- renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDateMuiTextField, _objectSpread(_objectSpread({
99
- id: id,
100
- className: className,
101
- name: name,
102
- required: required,
103
- fullWidth: fullWidth,
104
- onBlur: onBlur,
105
- helperText: helperText
106
- }, params), {}, {
107
- error: params.error || error,
108
- inputProps: {
109
- name
178
+ const handleTimeSelected = time => {
179
+ const newDateTime = (0, _moment.default)(dateTime).format("YYYY-MM-DD") + "T" + time;
180
+ const updatedDateTime = (0, _moment.default)(newDateTime, "YYYY-MM-DDTHH:mm").format(format);
181
+ setDateTime(updatedDateTime);
182
+ setDisplayedDateTime(updatedDateTime);
183
+ onChange(updatedDateTime);
184
+ };
185
+ React.useEffect(() => {
186
+ const updatePosition = () => {
187
+ if (textFieldRef.current) {
188
+ const rect = textFieldRef.current.getBoundingClientRect();
189
+ setDialogPosition({
190
+ left: rect.left + rect.width / 2 + window.scrollX,
191
+ top: rect.top > 310 ? rect.top - 80 : rect.top + 80
192
+ });
110
193
  }
111
- }))
112
- }, rest));
194
+ };
195
+ updatePosition();
196
+ window.addEventListener("resize", updatePosition);
197
+ window.addEventListener("scroll", updatePosition);
198
+ return () => {
199
+ window.removeEventListener("resize", updatePosition);
200
+ window.removeEventListener("scroll", updatePosition);
201
+ };
202
+ }, []);
203
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
204
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, _objectSpread({
205
+ ref: ref,
206
+ sx: sx,
207
+ ampm: false,
208
+ label: label,
209
+ inputFormat: "DD/MM/yyyy HH:mm",
210
+ value: displayedDateTime,
211
+ onChange: handleDateChange,
212
+ disablePast: disablePast,
213
+ disableFuture: disableFuture,
214
+ disabled: disabled,
215
+ maxDate: maxDateObj,
216
+ minDate: minDateObj,
217
+ readOnly: readOnly,
218
+ PopperProps: {
219
+ sx: {
220
+ "& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:focus, & .MuiButtonBase-root.Mui-selected:hover": {
221
+ backgroundColor: _apperance.palette.primary
222
+ }
223
+ }
224
+ },
225
+ renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDateMuiTextField, _objectSpread(_objectSpread({}, params), {}, {
226
+ ref: textFieldRef,
227
+ id: id,
228
+ className: className,
229
+ label: label,
230
+ name: name,
231
+ required: required,
232
+ fullWidth: fullWidth,
233
+ onBlur: onBlur,
234
+ helperText: helperText,
235
+ error: error,
236
+ inputProps: _objectSpread(_objectSpread({}, params.inputProps), {}, {
237
+ readOnly: readOnly
238
+ })
239
+ }))
240
+ }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePickerDialog, {
241
+ open: openTimePicker,
242
+ selectedDate: dateTime,
243
+ onTimeSelected: handleTimeSelected,
244
+ onClose: () => setOpenTimePicker(false),
245
+ position: dialogPosition
246
+ })]
247
+ });
113
248
  });
114
- const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
249
+ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
115
250
  let {
116
251
  id,
117
252
  className,
@@ -133,11 +268,13 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
133
268
  helperText,
134
269
  onChange,
135
270
  onBlur
136
- } = _ref2,
137
- rest = _objectWithoutProperties(_ref2, _excluded2);
271
+ } = _ref6,
272
+ rest = _objectWithoutProperties(_ref6, _excluded2);
138
273
  const [field, meta] = (0, _formik.useField)(name);
139
274
  const formikContext = (0, _formik.useFormikContext)();
140
275
  const [hasError, setHasError] = React.useState(false);
276
+ const minDateObj = minDate ? (0, _moment.default)(minDate, format).toDate() : undefined;
277
+ const maxDateObj = maxDate ? (0, _moment.default)(maxDate, format).toDate() : undefined;
141
278
  const handleChange = value => {
142
279
  formikContext.setFieldValue(name, value);
143
280
  onChange(value);
@@ -165,7 +302,8 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
165
302
  required: required,
166
303
  value: Boolean(field.value) ? format ? _moment.default.utc(field.value, format) : _moment.default.utc(field.value) : null,
167
304
  format: format,
168
- minDate: minDate,
305
+ minDate: minDateObj,
306
+ maxDate: maxDateObj,
169
307
  inputFormat: inputFormat,
170
308
  disableFuture: disableFuture,
171
309
  disablePast: disablePast,
@@ -178,7 +316,7 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
178
316
  onBlur: handleBlur
179
317
  }, rest));
180
318
  });
181
- const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
319
+ const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
182
320
  let {
183
321
  formik,
184
322
  id,
@@ -201,8 +339,8 @@ const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
201
339
  helperText,
202
340
  onChange,
203
341
  onBlur
204
- } = _ref3,
205
- rest = _objectWithoutProperties(_ref3, _excluded3);
342
+ } = _ref7,
343
+ rest = _objectWithoutProperties(_ref7, _excluded3);
206
344
  return /*#__PURE__*/React.createElement(formik ? PuiFormikDateTimeField : PuiStandardDateTimeField, _objectSpread({
207
345
  ref,
208
346
  id,
package/dist/components/table/PuiTable.js CHANGED
@@ -314,14 +314,14 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
314
314
  sx: {
315
315
  display: 'flex',
316
316
  gap: '8px',
317
- flexWrap: 'rap',
318
- // Ensure actions stay on the same line
317
+ // Adjust the space between icons as needed
318
+ flexWrap: 'wrap',
319
+ // Keep icons on the same line; remove if you want them to wrap
319
320
  justifyContent: 'center',
321
+ // Center the icons horizontally
320
322
  alignItems: 'center',
321
- overflow: 'hidden',
322
- // Ensure content doesn't overflow
323
- textOverflow: 'ellipsis',
324
- whiteSpace: 'nowrap'
323
+ // Align icons vertically
324
+ minWidth: 0 // Prevent the flex container from stretching past its content width
325
325
  },
326
326
  children: actions.map((action, index) => /*#__PURE__*/React.cloneElement(action, {
327
327
  row,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@portnet/ui",
3
- "version": "0.1.24",
3
+ "version": "0.2.1",
4
4
  "description": "Portnet UI",
5
5
  "keywords": [
6
6
  "react",