@etsoo/materialui 1.2.52 → 1.2.54

package/lib/ListChooser.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
-import { ListItemButtonProps, ListProps } from '@mui/material';
-import React from 'react';
+import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
+import { ListItemButtonProps, ListProps } from "@mui/material";
+import React from "react";
 type QueryData = {
     title?: string;
 };
@@ -46,6 +46,10 @@ export type ListChooserProps<T extends object, D extends DataTypes.Keys<T>, Q ex
      * Title
      */
     title: string;
+    /**
+     * Double click enabled
+     */
+    doubleClickEnabled?: boolean;
 };
 /**
  * List chooser

package/lib/ListChooser.js

@@ -1,7 +1,8 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { List, ListItem, ListItemButton, ListItemText, TextField } from '@mui/material';
-import React from 'react';
-import { VBox } from './FlexBox';
+import { useDelayedExecutor } from "@etsoo/react";
+import { List, ListItem, ListItemButton, ListItemText, TextField } from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { VBox } from "./FlexBox";
 /**
  * List chooser
  * @param props Props
@@ -29,19 +30,20 @@ export function ListChooser(props) {
     });
     // Destruct
     const { conditionRenderer = (rq, delayed) => (React.createElement(TextField, { autoFocus: true, margin: "dense", name: "title", label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
-            Reflect.set(rq, 'title', event.target.value);
+            Reflect.set(rq, "title", event.target.value);
             delayed.call();
         } })), itemRenderer = (item, selectProps) => {
         const id = item[idField];
-        const label = typeof labelField === 'function'
+        const sp = selectProps(id);
+        const label = typeof labelField === "function"
             ? labelField(item)
             : Reflect.get(item, labelField);
-        return (React.createElement(ListItem, { disableGutters: true, key: `${id}` },
-            React.createElement(ListItemButton, { ...selectProps(id) },
+        return (React.createElement(ListItem, { disableGutters: true, key: `${id}`, secondaryAction: sp.selected ? React.createElement(CheckBoxIcon, { fontSize: "small" }) : undefined },
+            React.createElement(ListItemButton, { ...sp },
                 React.createElement(ListItemText, { primary: label }))));
-    }, idField = 'id', labelField = 'label', loadData, multiple = false, onItemChange, title, ...rest } = props;
+    }, idField = "id", labelField = "label", loadData, multiple = false, onItemChange, title, doubleClickEnabled = false, onDoubleClick, ...rest } = props;
     // Default minimum height
-    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: '220px' });
+    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: "220px" });
     // State
     const [items, setItems] = React.useState([]);
     // Query request data
@@ -72,8 +74,20 @@ export function ListChooser(props) {
             delayed.clear();
         };
     }, [delayed]);
+    const onDoubleClickLocal = (event) => {
+        var _a;
+        if (onDoubleClick)
+            onDoubleClick(event);
+        if (doubleClickEnabled) {
+            const button = (_a = event.currentTarget
+                .closest("form")) === null || _a === void 0 ? void 0 : _a.elements.namedItem("okButton");
+            if (button) {
+                button.click();
+            }
+        }
+    };
     // Layout
     return (React.createElement(VBox, null,
         conditionRenderer(rq.current, delayed),
-        React.createElement(List, { disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
+        React.createElement(List, { onDoubleClick: onDoubleClickLocal, disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
 }

package/lib/UserAvatarEditor.d.ts

@@ -9,7 +9,7 @@ export interface UserAvatarEditorToBlob {
  * User avatar editor on done handler
  */
 export interface UserAvatarEditorOnDoneHandler {
-    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob): void;
+    (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob, type: string): void;
 }
 /**
  * User avatar editor props
@@ -43,6 +43,10 @@ export interface UserAvatarEditorProps {
      * Height of the editor
      */
     height?: number;
+    /**
+     * Value range
+     */
+    range?: [number, number, number];
 }
 /**
  * User avatar editor

package/lib/UserAvatarEditor.js

@@ -1,10 +1,12 @@
-import { Button, ButtonGroup, Skeleton, Slider, Stack } from "@mui/material";
+import { Button, ButtonGroup, IconButton, Skeleton, Slider, Stack } from "@mui/material";
 import React from "react";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import ComputerIcon from "@mui/icons-material/Computer";
 import DoneIcon from "@mui/icons-material/Done";
+import RemoveIcon from "@mui/icons-material/Remove";
+import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 const defaultState = {
     scale: 1,
@@ -18,7 +20,7 @@ const defaultState = {
  */
 export function UserAvatarEditor(props) {
     // Destruct
-    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = 200, height = 200 } = props;
+    const { border = 30, image, maxWidth, onDone, scaledResult = false, width = 200, height = 200, range = [0.1, 2, 0.1] } = props;
     // Container width
     const containerWidth = width + 2 * border + 44 + 4;
     // Calculated max width
@@ -27,6 +29,8 @@ export function UserAvatarEditor(props) {
     const labels = Labels.UserAvatarEditor;
     // Ref
     const ref = React.createRef();
+    // Image type
+    const type = React.useRef("image/jpeg");
     // Button ref
     const buttonRef = React.createRef();
     // Preview image state
@@ -35,12 +39,33 @@ export function UserAvatarEditor(props) {
     const [ready, setReady] = React.useState(false);
     // Editor states
     const [editorState, setEditorState] = React.useState(defaultState);
+    // Range
+    const [min, max, step] = range;
+    const marks = [
+        {
+            value: min,
+            label: min.toString()
+        },
+        {
+            value: max,
+            label: max.toString()
+        }
+    ];
+    if (min < 1) {
+        marks.splice(1, 0, { value: 1, label: "1" });
+    }
     // Handle zoom
     const handleZoom = (_event, value, _activeThumb) => {
         const scale = typeof value === "number" ? value : value[0];
+        setScale(scale);
+    };
+    const setScale = (scale) => {
         const newState = { ...editorState, scale };
         setEditorState(newState);
     };
+    const adjustScale = (isAdd) => {
+        setScale(editorState.scale + (isAdd ? step : -step));
+    };
     // Handle image load
     const handleLoad = () => {
         setReady(true);
@@ -54,7 +79,9 @@ export function UserAvatarEditor(props) {
         // Reset all settings
         handleReset();
         // Set new preview image
-        setPreviewImage(files[0]);
+        const file = files[0];
+        type.current = file.type;
+        setPreviewImage(file);
         // Set ready state
         setReady(false);
         // Make the submit button visible
@@ -86,7 +113,7 @@ export function UserAvatarEditor(props) {
         const picaInstance = pica();
         // toBlob helper
         // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
-        const toBlob = (canvas, mimeType = "image/jpeg", quality = 1) => {
+        const toBlob = (canvas, mimeType = type.current, quality = 1) => {
             return picaInstance.toBlob(canvas, mimeType, quality);
         };
         if (data.width > maxWidthCalculated) {
@@ -104,10 +131,10 @@ export function UserAvatarEditor(props) {
                 unsharpRadius: 0.6,
                 unsharpThreshold: 1
             })
-                .then((result) => onDone(result, toBlob));
+                .then((result) => onDone(result, toBlob, type.current));
         }
         else {
-            onDone(data, toBlob);
+            onDone(data, toBlob, type.current);
         }
     };
     // Load the component
@@ -126,6 +153,11 @@ export function UserAvatarEditor(props) {
                     React.createElement(RotateLeftIcon, null)),
                 React.createElement(Button, { onClick: handleReset, title: labels.reset },
                     React.createElement(ClearAllIcon, null)))),
-        React.createElement(Slider, { title: labels.zoom, disabled: !ready, min: 1, max: 5, step: 0.01, value: editorState.scale, onChange: handleZoom }),
+        React.createElement(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center" },
+            React.createElement(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false) },
+                React.createElement(RemoveIcon, null)),
+            React.createElement(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }),
+            React.createElement(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true) },
+                React.createElement(AddIcon, null))),
         React.createElement(Button, { ref: buttonRef, variant: "contained", startIcon: React.createElement(DoneIcon, null), disabled: !ready, onClick: handleDone }, labels.done)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.52",
+  "version": "1.2.54",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -59,7 +59,7 @@
     "@mui/x-data-grid": "^6.7.0",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.2.9",
+    "@types/react": "^18.2.11",
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.2.4",
     "@types/react-input-mask": "^3.0.2",

package/src/ListChooser.tsx

@@ -1,84 +1,90 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
+import { useDelayedExecutor } from "@etsoo/react";
+import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
 import {
-    List,
-    ListItem,
-    ListItemButton,
-    ListItemButtonProps,
-    ListItemText,
-    ListProps,
-    TextField
-} from '@mui/material';
-import React from 'react';
-import { VBox } from './FlexBox';
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemButtonProps,
+  ListItemText,
+  ListProps,
+  TextField
+} from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { VBox } from "./FlexBox";
 
 type QueryData = {
-    title?: string;
+  title?: string;
 };
 
 /**
  * List chooser button props
  */
 export interface ListChooserButtonProps<
-    T extends object,
-    D extends DataTypes.Keys<T>
+  T extends object,
+  D extends DataTypes.Keys<T>
 > {
-    (id: T[D]): ListItemButtonProps;
+  (id: T[D]): ListItemButtonProps;
 }
 
 /**
  * List chooser props
  */
 export type ListChooserProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    Q extends object
+  T extends object,
+  D extends DataTypes.Keys<T>,
+  Q extends object
 > = ListProps & {
-    /**
-     * Condition renderer
-     */
-    conditionRenderer?: (
-        rq: Partial<Q>,
-        delayed: DelayedExecutorType
-    ) => React.ReactNode;
-
-    /**
-     * List item renderer
-     */
-    itemRenderer?: (
-        data: T,
-        props: ListChooserButtonProps<T, D>
-    ) => React.ReactNode;
-
-    /**
-     * Label field
-     */
-    labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
-
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Load data callback
-     */
-    loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
-
-    /**
-     * Multiple selected
-     */
-    multiple?: boolean;
-
-    /**
-     * Item onchange callback
-     */
-    onItemChange: (items: T[], ids: T[D][]) => void;
-
-    /**
-     * Title
-     */
-    title: string;
+  /**
+   * Condition renderer
+   */
+  conditionRenderer?: (
+    rq: Partial<Q>,
+    delayed: DelayedExecutorType
+  ) => React.ReactNode;
+
+  /**
+   * List item renderer
+   */
+  itemRenderer?: (
+    data: T,
+    props: ListChooserButtonProps<T, D>
+  ) => React.ReactNode;
+
+  /**
+   * Label field
+   */
+  labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
+
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Load data callback
+   */
+  loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
+
+  /**
+   * Multiple selected
+   */
+  multiple?: boolean;
+
+  /**
+   * Item onchange callback
+   */
+  onItemChange: (items: T[], ids: T[D][]) => void;
+
+  /**
+   * Title
+   */
+  title: string;
+
+  /**
+   * Double click enabled
+   */
+  doubleClickEnabled?: boolean;
 };
 
 /**
@@ -87,118 +93,139 @@ export type ListChooserProps<
  * @returns Component
  */
 export function ListChooser<
-    T extends object,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    Q extends object = QueryData
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>,
+  Q extends object = QueryData
 >(props: ListChooserProps<T, D, Q>) {
-    // Selected ids state
-    const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
-
-    const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
-        selected: selectedIds.includes(id),
-        onClick: () => {
-            if (multiple) {
-                const index = selectedIds.indexOf(id);
-                if (index === -1) selectedIds.push(id);
-                else selectedIds.splice(index, 1);
-                setSelectedIds([...selectedIds]);
-            } else {
-                setSelectedIds([id]);
-            }
-        }
-    });
-
-    // Destruct
-    const {
-        conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
-            <TextField
-                autoFocus
-                margin="dense"
-                name="title"
-                label={title}
-                fullWidth
-                variant="standard"
-                inputProps={{ maxLength: 128 }}
-                onChange={(event) => {
-                    Reflect.set(rq, 'title', event.target.value);
-                    delayed.call();
-                }}
-            />
-        ),
-        itemRenderer = (item, selectProps) => {
-            const id = item[idField];
-            const label =
-                typeof labelField === 'function'
-                    ? labelField(item)
-                    : (Reflect.get(item, labelField) as React.ReactNode);
-
-            return (
-                <ListItem disableGutters key={`${id}`}>
-                    <ListItemButton {...selectProps(id)}>
-                        <ListItemText primary={label} />
-                    </ListItemButton>
-                </ListItem>
-            );
-        },
-        idField = 'id' as D,
-        labelField = 'label',
-        loadData,
-        multiple = false,
-        onItemChange,
-        title,
-        ...rest
-    } = props;
-
-    // Default minimum height
-    rest.sx ??= { minHeight: '220px' };
-
-    // State
-    const [items, setItems] = React.useState<T[]>([]);
-
-    // Query request data
-    const mounted = React.useRef<boolean>(false);
-    const rq = React.useRef<Partial<Q>>({});
-
-    // Delayed execution
-    const delayed = useDelayedExecutor(async () => {
-        const result = await loadData(rq.current);
-        if (result == null || !mounted.current) return;
-
-        if (
-            !multiple &&
-            selectedIds.length > 0 &&
-            !result.some((item) => selectedIds.includes(item[idField]))
-        ) {
-            setSelectedIds([]);
-        }
-
-        setItems(result);
-    }, 480);
-
-    React.useEffect(() => {
-        if (!mounted.current) return;
-        onItemChange(
-            items.filter((item) => selectedIds.includes(item[idField])),
-            selectedIds
-        );
-    }, [selectedIds]);
-
-    React.useEffect(() => {
-        mounted.current = true;
-        delayed.call(0);
-        return () => {
-            mounted.current = false;
-            delayed.clear();
-        };
-    }, [delayed]);
-
-    // Layout
-    return (
-        <VBox>
-            {conditionRenderer(rq.current, delayed)}
-            <List disablePadding dense {...rest}>
-                {items.map((item) => itemRenderer(item, selectProps))}
-            </List>
-        </VBox>
+  // Selected ids state
+  const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
+
+  const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
+    selected: selectedIds.includes(id),
+    onClick: () => {
+      if (multiple) {
+        const index = selectedIds.indexOf(id);
+        if (index === -1) selectedIds.push(id);
+        else selectedIds.splice(index, 1);
+        setSelectedIds([...selectedIds]);
+      } else {
+        setSelectedIds([id]);
+      }
+    }
+  });
+
+  // Destruct
+  const {
+    conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
+      <TextField
+        autoFocus
+        margin="dense"
+        name="title"
+        label={title}
+        fullWidth
+        variant="standard"
+        inputProps={{ maxLength: 128 }}
+        onChange={(event) => {
+          Reflect.set(rq, "title", event.target.value);
+          delayed.call();
+        }}
+      />
+    ),
+    itemRenderer = (item, selectProps) => {
+      const id = item[idField];
+      const sp = selectProps(id);
+      const label =
+        typeof labelField === "function"
+          ? labelField(item)
+          : (Reflect.get(item, labelField) as React.ReactNode);
+
+      return (
+        <ListItem
+          disableGutters
+          key={`${id}`}
+          secondaryAction={
+            sp.selected ? <CheckBoxIcon fontSize="small" /> : undefined
+          }
+        >
+          <ListItemButton {...sp}>
+            <ListItemText primary={label} />
+          </ListItemButton>
+        </ListItem>
+      );
+    },
+    idField = "id" as D,
+    labelField = "label",
+    loadData,
+    multiple = false,
+    onItemChange,
+    title,
+    doubleClickEnabled = false,
+    onDoubleClick,
+    ...rest
+  } = props;
+
+  // Default minimum height
+  rest.sx ??= { minHeight: "220px" };
+
+  // State
+  const [items, setItems] = React.useState<T[]>([]);
+
+  // Query request data
+  const mounted = React.useRef<boolean>(false);
+  const rq = React.useRef<Partial<Q>>({});
+
+  // Delayed execution
+  const delayed = useDelayedExecutor(async () => {
+    const result = await loadData(rq.current);
+    if (result == null || !mounted.current) return;
+
+    if (
+      !multiple &&
+      selectedIds.length > 0 &&
+      !result.some((item) => selectedIds.includes(item[idField]))
+    ) {
+      setSelectedIds([]);
+    }
+
+    setItems(result);
+  }, 480);
+
+  React.useEffect(() => {
+    if (!mounted.current) return;
+    onItemChange(
+      items.filter((item) => selectedIds.includes(item[idField])),
+      selectedIds
     );
+  }, [selectedIds]);
+
+  React.useEffect(() => {
+    mounted.current = true;
+    delayed.call(0);
+    return () => {
+      mounted.current = false;
+      delayed.clear();
+    };
+  }, [delayed]);
+
+  const onDoubleClickLocal = (event: React.MouseEvent<HTMLUListElement>) => {
+    if (onDoubleClick) onDoubleClick(event);
+    if (doubleClickEnabled) {
+      const button = event.currentTarget
+        .closest("form")
+        ?.elements.namedItem("okButton") as HTMLButtonElement | undefined;
+      if (button) {
+        button.click();
+      }
+    }
+  };
+
+  // Layout
+  return (
+    <VBox>
+      {conditionRenderer(rq.current, delayed)}
+      <List onDoubleClick={onDoubleClickLocal} disablePadding dense {...rest}>
+        {items.map((item) => itemRenderer(item, selectProps))}
+      </List>
+    </VBox>
+  );
 }

package/src/UserAvatarEditor.tsx

@@ -1,4 +1,11 @@
-import { Button, ButtonGroup, Skeleton, Slider, Stack } from "@mui/material";
+import {
+  Button,
+  ButtonGroup,
+  IconButton,
+  Skeleton,
+  Slider,
+  Stack
+} from "@mui/material";
 import React from "react";
 import type AvatarEditor from "react-avatar-editor";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
@@ -6,6 +13,8 @@ import RotateRightIcon from "@mui/icons-material/RotateRight";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import ComputerIcon from "@mui/icons-material/Computer";
 import DoneIcon from "@mui/icons-material/Done";
+import RemoveIcon from "@mui/icons-material/Remove";
+import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 
 /**
@@ -23,7 +32,11 @@ export interface UserAvatarEditorToBlob {
  * User avatar editor on done handler
  */
 export interface UserAvatarEditorOnDoneHandler {
-  (canvas: HTMLCanvasElement, toBlob: UserAvatarEditorToBlob): void;
+  (
+    canvas: HTMLCanvasElement,
+    toBlob: UserAvatarEditorToBlob,
+    type: string
+  ): void;
 }
 
 /**
@@ -64,6 +77,11 @@ export interface UserAvatarEditorProps {
    * Height of the editor
    */
   height?: number;
+
+  /**
+   * Value range
+   */
+  range?: [number, number, number];
 }
 
 interface EditorState {
@@ -91,7 +109,8 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     onDone,
     scaledResult = false,
     width = 200,
-    height = 200
+    height = 200,
+    range = [0.1, 2, 0.1]
   } = props;
 
   // Container width
@@ -107,6 +126,9 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Ref
   const ref = React.createRef<AvatarEditor>();
 
+  // Image type
+  const type = React.useRef<string>("image/jpeg");
+
   // Button ref
   const buttonRef = React.createRef<HTMLButtonElement>();
 
@@ -119,6 +141,23 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
   // Editor states
   const [editorState, setEditorState] = React.useState(defaultState);
 
+  // Range
+  const [min, max, step] = range;
+  const marks = [
+    {
+      value: min,
+      label: min.toString()
+    },
+    {
+      value: max,
+      label: max.toString()
+    }
+  ];
+
+  if (min < 1) {
+    marks.splice(1, 0, { value: 1, label: "1" });
+  }
+
   // Handle zoom
   const handleZoom = (
     _event: Event,
@@ -126,10 +165,18 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     _activeThumb: number
   ) => {
     const scale = typeof value === "number" ? value : value[0];
+    setScale(scale);
+  };
+
+  const setScale = (scale: number) => {
     const newState = { ...editorState, scale };
     setEditorState(newState);
   };
 
+  const adjustScale = (isAdd: boolean) => {
+    setScale(editorState.scale + (isAdd ? step : -step));
+  };
+
   // Handle image load
   const handleLoad = () => {
     setReady(true);
@@ -144,7 +191,9 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     handleReset();
 
     // Set new preview image
-    setPreviewImage(files[0]);
+    const file = files[0];
+    type.current = file.type;
+    setPreviewImage(file);
 
     // Set ready state
     setReady(false);
@@ -183,7 +232,7 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
     // Convenience method, similar to canvas.toBlob(), but with promise interface & polyfill for old browsers.
     const toBlob = (
       canvas: HTMLCanvasElement,
-      mimeType: string = "image/jpeg",
+      mimeType: string = type.current,
       quality: number = 1
     ) => {
       return picaInstance.toBlob(canvas, mimeType, quality);
@@ -206,9 +255,9 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
           unsharpRadius: 0.6,
           unsharpThreshold: 1
         })
-        .then((result) => onDone(result, toBlob));
+        .then((result) => onDone(result, toBlob, type.current));
     } else {
-      onDone(data, toBlob);
+      onDone(data, toBlob, type.current);
     }
   };
 
@@ -263,15 +312,39 @@ export function UserAvatarEditor(props: UserAvatarEditorProps) {
           </Button>
         </ButtonGroup>
       </Stack>
-      <Slider
-        title={labels.zoom}
-        disabled={!ready}
-        min={1}
-        max={5}
-        step={0.01}
-        value={editorState.scale}
-        onChange={handleZoom}
-      />
+      <Stack
+        spacing={0.5}
+        direction="row"
+        sx={{ paddingBottom: 2 }}
+        alignItems="center"
+      >
+        <IconButton
+          size="small"
+          disabled={!ready || editorState.scale <= min}
+          onClick={() => adjustScale(false)}
+        >
+          <RemoveIcon />
+        </IconButton>
+        <Slider
+          title={labels.zoom}
+          disabled={!ready}
+          min={min}
+          max={max}
+          step={step}
+          value={editorState.scale}
+          valueLabelDisplay="auto"
+          valueLabelFormat={(value) => `${Math.round(100 * value) / 100}`}
+          marks={marks}
+          onChange={handleZoom}
+        />
+        <IconButton
+          size="small"
+          disabled={!ready || editorState.scale >= max}
+          onClick={() => adjustScale(true)}
+        >
+          <AddIcon />
+        </IconButton>
+      </Stack>
       <Button
         ref={buttonRef}
         variant="contained"