@tenancy.nz/ui 1.2.4 → 1.2.5

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 (5) hide show
  1. package/dist/cjs/components/AvatarCropDialog.cjs +21 -9
  2. package/dist/cjs/components/AvatarInput.cjs +11 -2
  3. package/dist/esm/components/AvatarCropDialog.js +22 -10
  4. package/dist/esm/components/AvatarInput.js +11 -2
  5. package/package.json +1 -1
package/dist/cjs/components/AvatarCropDialog.cjs CHANGED
@@ -32,8 +32,8 @@ function AvatarCropDialog(_ref) {
32
32
  } : _ref$onDelete,
33
33
  _ref$droppedFile = _ref.droppedFile,
34
34
  droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
35
- var isNotMobile = useMediaQuery(function (theme) {
36
- return theme.breakpoints.up("md");
35
+ var isMobile = useMediaQuery(function (theme) {
36
+ return theme.breakpoints.down("md");
37
37
  });
38
38
  var _useState = React.useState({
39
39
  aspect: 1,
@@ -75,9 +75,13 @@ function AvatarCropDialog(_ref) {
75
75
  });
76
76
  };
77
77
  var handleCropChange = function handleCropChange(newCrop) {
78
- return setCrop(newCrop);
78
+ setCrop(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newCrop), {}, {
79
+ height: newCrop.width,
80
+ aspect: 1
81
+ }));
79
82
  };
80
- var handleImageLoaded = function handleImageLoaded(image) {
83
+ var handleImageLoaded = function handleImageLoaded(e) {
84
+ var image = e.target;
81
85
  var width = image.width;
82
86
  if (window.innerHeight * 0.7 < image.height) {
83
87
  width = image.width * (window.innerHeight * 0.7 / image.height);
@@ -147,21 +151,29 @@ function AvatarCropDialog(_ref) {
147
151
  },
148
152
  circularCrop: true,
149
153
  onChange: handleCropChange,
150
- onImageLoaded: handleImageLoaded,
151
154
  keepSelection: true
152
155
  }, /* @__PURE__ */React.createElement("img", {
153
- src: droppedFile
154
- })))), /* @__PURE__ */React.createElement(ModalActions.default, null, /* @__PURE__ */React.createElement(Button.default, {
156
+ src: droppedFile,
157
+ onLoad: handleImageLoaded
158
+ })))), /* @__PURE__ */React.createElement(ModalActions.default, {
159
+ sx: {
160
+ flexDirection: {
161
+ xs: "column",
162
+ md: "row",
163
+ gap: "16px"
164
+ }
165
+ }
166
+ }, /* @__PURE__ */React.createElement(Button.default, {
155
167
  onClick: handleCancel,
156
168
  variant: "outlined",
157
169
  loading: cancelling,
158
170
  color: "primaryAlt",
159
- fullWidth: !isNotMobile
171
+ fill: isMobile
160
172
  }, "Cancel"), /* @__PURE__ */React.createElement(Button.default, {
161
173
  onClick: handleImageSave,
162
174
  loading: saving,
163
175
  color: "primaryAlt",
164
- fullWidth: !isNotMobile
176
+ fill: isMobile
165
177
  }, "Save")), /* @__PURE__ */React.createElement(Confirmation.default, {
166
178
  open: confirmDelete,
167
179
  onCancel: function onCancel() {
package/dist/cjs/components/AvatarInput.cjs CHANGED
@@ -169,12 +169,21 @@ function AvatarInput(_ref) {
169
169
  align: isNotMobile ? "left" : "center",
170
170
  weight: "500",
171
171
  color: "textPrimary"
172
- }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(IconButton.default, {
172
+ }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(Box, {
173
+ sx: {
174
+ position: "absolute",
175
+ top: "50%",
176
+ right: "25px",
177
+ zIndex: 9,
178
+ transform: "translateY(-50%)"
179
+ }
180
+ }, /* @__PURE__ */React.createElement(IconButton.default, {
173
181
  color: "error",
182
+ size: "large",
174
183
  onClick: function onClick() {
175
184
  return setConfirmDelete(true);
176
185
  }
177
- }, /* @__PURE__ */React.createElement(DeleteIcon, null))), droppedFile && /* @__PURE__ */React.createElement(Modal.default, {
186
+ }, /* @__PURE__ */React.createElement(DeleteIcon, null)))), droppedFile && /* @__PURE__ */React.createElement(Modal.default, {
178
187
  open: open,
179
188
  onClose: function onClose() {
180
189
  return setOpen(false);
package/dist/esm/components/AvatarCropDialog.js CHANGED
@@ -1,4 +1,4 @@
1
- import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
1
+ import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
2
  import React, { useState } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import useMediaQuery from '@mui/material/useMediaQuery';
@@ -28,8 +28,8 @@ function AvatarCropDialog(_ref) {
28
28
  } : _ref$onDelete,
29
29
  _ref$droppedFile = _ref.droppedFile,
30
30
  droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
31
- var isNotMobile = useMediaQuery(function (theme) {
32
- return theme.breakpoints.up("md");
31
+ var isMobile = useMediaQuery(function (theme) {
32
+ return theme.breakpoints.down("md");
33
33
  });
34
34
  var _useState = useState({
35
35
  aspect: 1,
@@ -71,9 +71,13 @@ function AvatarCropDialog(_ref) {
71
71
  });
72
72
  };
73
73
  var handleCropChange = function handleCropChange(newCrop) {
74
- return setCrop(newCrop);
74
+ setCrop(_objectSpread2(_objectSpread2({}, newCrop), {}, {
75
+ height: newCrop.width,
76
+ aspect: 1
77
+ }));
75
78
  };
76
- var handleImageLoaded = function handleImageLoaded(image) {
79
+ var handleImageLoaded = function handleImageLoaded(e) {
80
+ var image = e.target;
77
81
  var width = image.width;
78
82
  if (window.innerHeight * 0.7 < image.height) {
79
83
  width = image.width * (window.innerHeight * 0.7 / image.height);
@@ -143,21 +147,29 @@ function AvatarCropDialog(_ref) {
143
147
  },
144
148
  circularCrop: true,
145
149
  onChange: handleCropChange,
146
- onImageLoaded: handleImageLoaded,
147
150
  keepSelection: true
148
151
  }, /* @__PURE__ */React.createElement("img", {
149
- src: droppedFile
150
- })))), /* @__PURE__ */React.createElement(ModalActions, null, /* @__PURE__ */React.createElement(Button, {
152
+ src: droppedFile,
153
+ onLoad: handleImageLoaded
154
+ })))), /* @__PURE__ */React.createElement(ModalActions, {
155
+ sx: {
156
+ flexDirection: {
157
+ xs: "column",
158
+ md: "row",
159
+ gap: "16px"
160
+ }
161
+ }
162
+ }, /* @__PURE__ */React.createElement(Button, {
151
163
  onClick: handleCancel,
152
164
  variant: "outlined",
153
165
  loading: cancelling,
154
166
  color: "primaryAlt",
155
- fullWidth: !isNotMobile
167
+ fill: isMobile
156
168
  }, "Cancel"), /* @__PURE__ */React.createElement(Button, {
157
169
  onClick: handleImageSave,
158
170
  loading: saving,
159
171
  color: "primaryAlt",
160
- fullWidth: !isNotMobile
172
+ fill: isMobile
161
173
  }, "Save")), /* @__PURE__ */React.createElement(Confirmation, {
162
174
  open: confirmDelete,
163
175
  onCancel: function onCancel() {
package/dist/esm/components/AvatarInput.js CHANGED
@@ -165,12 +165,21 @@ function AvatarInput(_ref) {
165
165
  align: isNotMobile ? "left" : "center",
166
166
  weight: "500",
167
167
  color: "textPrimary"
168
- }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(IconButton, {
168
+ }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(Box, {
169
+ sx: {
170
+ position: "absolute",
171
+ top: "50%",
172
+ right: "25px",
173
+ zIndex: 9,
174
+ transform: "translateY(-50%)"
175
+ }
176
+ }, /* @__PURE__ */React.createElement(IconButton, {
169
177
  color: "error",
178
+ size: "large",
170
179
  onClick: function onClick() {
171
180
  return setConfirmDelete(true);
172
181
  }
173
- }, /* @__PURE__ */React.createElement(DeleteIcon, null))), droppedFile && /* @__PURE__ */React.createElement(Modal, {
182
+ }, /* @__PURE__ */React.createElement(DeleteIcon, null)))), droppedFile && /* @__PURE__ */React.createElement(Modal, {
174
183
  open: open,
175
184
  onClose: function onClose() {
176
185
  return setOpen(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tenancy.nz/ui",
3
- "version": "1.2.4",
3
+ "version": "1.2.5",
4
4
  "description": "Library of React UI components for tenancy.co.nz apps.",
5
5
  "author": "Tenancy.co.nz <monty@tenancy.co.nz>",
6
6
  "keywords": [