feat: this feature allows users to disable the image rotation (XiongA…

…mao#62) This feature allows users to disable the image rotation using the rotateDisabled (rotate-disabled) prop
qburst · Feb 20, 2023 · 4c45b74 · 4c45b74
1 parent 2e74051
commit 4c45b74
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -452,6 +452,12 @@ Props
       <td>false</td>
       <td>Pass true to disable image movement and enable swipe.</td>
     </tr>
+    <tr>
+      <td>rotateDisabled (rotate-disabled)</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Pass true to disable image rotation.</td>
+    </tr>
     <tr>
       <td>maskClosable (mask-closable)</td>
       <td>Boolean</td>

diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
@@ -27,6 +27,10 @@ export const Toolbar = defineComponent({
     resize: {
       type: Function as PropType<MouseEventHandler>,
       default: voidFn
+    },
+    rotateDisabled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -35,7 +39,7 @@ export const Toolbar = defineComponent({
         <div class={`${prefixCls}-toolbar`}>
           <div
             role="button"
-            aria-label='zoom in button'
+            aria-label="zoom in button"
             class="toolbar-btn toolbar-btn__zoomin"
             onClick={props.zoomIn}
           >
@@ -44,7 +48,7 @@ export const Toolbar = defineComponent({
 
           <div
             role="button"
-            aria-label='zoom out button'
+            aria-label="zoom out button"
             class="toolbar-btn toolbar-btn__zoomout"
             onClick={props.zoomOut}
           >
@@ -53,30 +57,33 @@ export const Toolbar = defineComponent({
 
           <div
             role="button"
-            aria-label='resize image button'
+            aria-label="resize image button"
             class="toolbar-btn toolbar-btn__resize"
             onClick={props.resize}
           >
             <SvgIcon type="resize" />
           </div>
+          {!props.rotateDisabled && (
+            <>
+              <div
+                role="button"
+                aria-label="image rotate left button"
+                class="toolbar-btn toolbar-btn__rotate"
+                onClick={props.rotateLeft}
+              >
+                <SvgIcon type="rotate-left" />
+              </div>
 
-          <div
-            role="button"
-            aria-label='image rotate left button'
-            class="toolbar-btn toolbar-btn__rotate"
-            onClick={props.rotateLeft}
-          >
-            <SvgIcon type="rotate-left" />
-          </div>
-
-          <div
-            role="button"
-            aria-label='image rotate right button'
-            class="toolbar-btn toolbar-btn__rotate"
-            onClick={props.rotateRight}
-          >
-            <SvgIcon type="rotate-right" />
-          </div>
+              <div
+                role="button"
+                aria-label="image rotate right button"
+                class="toolbar-btn toolbar-btn__rotate"
+                onClick={props.rotateRight}
+              >
+                <SvgIcon type="rotate-right" />
+              </div>
+            </>
+          )}
         </div>
       )
     }

diff --git a/src/vue-easy-lightbox.tsx b/src/vue-easy-lightbox.tsx
@@ -100,6 +100,10 @@ export default defineComponent({
     minZoom: {
       type: Number,
       default: 0.1
+    },
+    rotateDisabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: {
@@ -637,6 +641,7 @@ export default defineComponent({
           resize={resize}
           rotateLeft={rotateLeft}
           rotateRight={rotateRight}
+          rotateDisabled={props.rotateDisabled}
         />
       )
     }