feat(uploader): rework angular default props

lumapps · Nov 6, 2019 · 14398ed · 14398ed
1 parent f40773a
commit 14398ed
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 29 deletions.
diff --git a/demo/angularjs/components/uploader/doc.md b/demo/angularjs/components/uploader/doc.md
@@ -1,3 +1,9 @@
 # Uploader
 
+## Default
+
 <demo-block component="uploader" partial="default"></demo-block>
+
+## Circle
+
+<demo-block component="uploader" partial="circle"></demo-block>
diff --git a/demo/angularjs/components/uploader/partials/circle.html b/demo/angularjs/components/uploader/partials/circle.html
@@ -0,0 +1,8 @@
+<lumx-uploader
+    lumx-aspect-ratio="square"
+    lumx-icon="{{ vm.icons.mdiImagePlus }}"
+    lumx-label="Add profile picture"
+    lumx-size="xl"
+    lumx-theme="{{ demoBlock.theme }}"
+    lumx-variant="circle"
+></lumx-uploader>
diff --git a/demo/angularjs/components/uploader/partials/default.html b/demo/angularjs/components/uploader/partials/default.html
@@ -1,8 +1,5 @@
 <lumx-uploader
-    lumx-aspect-ratio="square"
     lumx-icon="{{ vm.icons.mdiImagePlus }}"
     lumx-label="Add profile picture"
-    lumx-size="xl"
     lumx-theme="{{ demoBlock.theme }}"
-    lumx-variant="circle"
 ></lumx-uploader>
diff --git a/src/components/uploader/angularjs/uploader_directive.js b/src/components/uploader/angularjs/uploader_directive.js
@@ -26,6 +26,7 @@ function UploaderController() {
      */
     const _DEFAULT_PROPS = {
         aspectRatio: 'horizontal',
+        size: 'xl',
         theme: 'light',
         variant: 'squared',
     };
@@ -42,31 +43,20 @@ function UploaderController() {
      * @return {Array} The list of button classes.
      */
     function getClasses() {
-        const classes = [];
-
-        if (angular.isDefined(lumx.aspectRatio) && lumx.aspectRatio) {
-            classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${lumx.aspectRatio}`);
-        } else {
-            classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${_DEFAULT_PROPS.aspectRatio}`);
-        }
-
-        if (angular.isDefined(lumx.size) && lumx.size) {
-            classes.push(`${CSS_PREFIX}-uploader--size-${lumx.size}`);
-        }
-
-        if (angular.isDefined(lumx.theme) && lumx.theme) {
-            classes.push(`${CSS_PREFIX}-uploader--theme-${lumx.theme}`);
-        } else {
-            classes.push(`${CSS_PREFIX}-uploader--theme-${_DEFAULT_PROPS.theme}`);
-        }
-
-        if (angular.isDefined(lumx.variant) && lumx.variant) {
-            classes.push(`${CSS_PREFIX}-uploader--variant-${lumx.variant}`);
-        } else {
-            classes.push(`${CSS_PREFIX}-uploader--variant-${_DEFAULT_PROPS.variant}`);
-        }
-
-        return classes;
+        const aspectRatio = lumx.aspectRatio ? lumx.aspectRatio : _DEFAULT_PROPS.aspectRatio;
+        const size = lumx.size ? lumx.size : _DEFAULT_PROPS.size;
+        const theme = lumx.theme ? lumx.theme : _DEFAULT_PROPS.theme;
+        const variant = lumx.variant ? lumx.variant : _DEFAULT_PROPS.variant;
+
+        // Adjust to square aspect ratio when using circle variants.
+        const adjustedAspectRatio = variant === 'circle' ? 'square' : aspectRatio;
+
+        return [
+            `${CSS_PREFIX}-uploader--aspect-ratio-${adjustedAspectRatio}`,
+            `${CSS_PREFIX}-uploader--size-${size}`,
+            `${CSS_PREFIX}-uploader--theme-${theme}`,
+            `${CSS_PREFIX}-uploader--variant-${variant}`,
+        ];
     }
 
     /////////////////////////////

diff --git a/src/components/uploader/react/Uploader.tsx b/src/components/uploader/react/Uploader.tsx
@@ -99,7 +99,7 @@ const Uploader: React.FC<UploaderProps> = (props: UploaderProps): ReactElement =
         ...forwardedProps
     } = props;
 
-    // Square aspect ratio for circle variants.
+    // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
 
     return (