fix(ui): snackbar index.ts重构

affects: @varlet/ui
varletjs · Dec 10, 2020 · a76a0be · a76a0be
1 parent 520cf47
commit a76a0be
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 128 deletions.
diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less
@@ -21,14 +21,14 @@
   line-height: 1.2;
   border-radius: @button-border-radius;
   user-select: none;
-  transition: box-shadow .2s;
+  transition: box-shadow .2s linear;
   will-change: box-shadow;
 
   &:active {
     box-shadow:
-      0 3px 3px -2px @shadow-key-umbra-opacity,
-      0 3px 4px 0 @shadow-key-penumbra-opacity,
-      0 6px 8px 0 rgba(0, 0, 0, 0.24);
+      0 6px 6px -3px @shadow-key-umbra-opacity,
+      0 10px 14px 1px @shadow-key-penumbra-opacity,
+      0 4px 18px 3px @shadow-key-ambient-opacity
   }
 
   &--plain {

diff --git a/packages/varlet-ui/src/dialog/index.ts b/packages/varlet-ui/src/dialog/index.ts
@@ -27,7 +27,7 @@ type DialogResolveState = 'confirm' | 'cancel' | 'close'
 
 function Dialog(options: DialogOptions | string): Promise<DialogResolveState> {
   return new Promise((resolve) => {
-    const dialogOptions: DialogOptions = (isString(options) ? { message: options } : options)
+    const dialogOptions: DialogOptions = isString(options) ? { message: options } : options
     const reactiveDialogOptions: DialogOptions = reactive<DialogOptions>(dialogOptions)
 
     const { unmountInstance } = mountInstance(

diff --git a/packages/varlet-ui/src/skeleton/Skeleton.vue b/packages/varlet-ui/src/skeleton/Skeleton.vue
@@ -44,57 +44,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { props } from './propsEmits'
 
 export default defineComponent({
 	name: 'VarSkeleton',
-	props: {
-		// 加载状态
-		loading: {
-			type: Boolean,
-			default: true,
-		},
-		// 段落行数
-		row: {
-			type: Number,
-			default: 0,
-		},
-		rowWidth: {
-			type: Array,
-			default: () => [],
-		},
-		// 是否全屏
-		fullscreen: {
-			type: Boolean,
-			default: false,
-		},
-		// 是否显示标题
-		title: {
-			type: Boolean,
-			default: false,
-		},
-		// 标题宽度
-		titleWidth: {
-			type: String,
-		},
-		// 是否显示卡片
-		card: {
-			type: Boolean,
-			default: false,
-		},
-		// 卡片高度
-		cardHeight: {
-			type: String,
-		},
-		// 是否显示头像
-		avatar: {
-			type: Boolean,
-			default: false,
-		},
-		// 头像大小
-		avatarSize: {
-			type: String,
-		},
-	},
+	props
 })
 </script>
 

diff --git a/packages/varlet-ui/src/skeleton/propsEmits.ts b/packages/varlet-ui/src/skeleton/propsEmits.ts
@@ -0,0 +1,48 @@
+export const props = {
+  // 加载状态
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  // 段落行数
+  row: {
+    type: Number,
+    default: 0,
+  },
+  rowWidth: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否全屏
+  fullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示标题
+  title: {
+    type: Boolean,
+    default: false,
+  },
+  // 标题宽度
+  titleWidth: {
+    type: String,
+  },
+  // 是否显示卡片
+  card: {
+    type: Boolean,
+    default: false,
+  },
+  // 卡片高度
+  cardHeight: {
+    type: String,
+  },
+  // 是否显示头像
+  avatar: {
+    type: Boolean,
+    default: false,
+  },
+  // 头像大小
+  avatarSize: {
+    type: String,
+  }
+}
diff --git a/packages/varlet-ui/src/snackbar/index.ts b/packages/varlet-ui/src/snackbar/index.ts
@@ -23,92 +23,91 @@ interface SnackbarOptions {
 	onClosed?: () => void
 }
 
+const TransitionGroupHost = {
+  setup() {
+    return () => {
+      const snackbarList = Snackbar.instances.map(
+        ({ id, reactiveSnackOptions, _update }: any) => {
+          if (reactiveSnackOptions.forbidClick) {
+            const transitionGroupEl = document.querySelector(
+              '.var-transition-group'
+              )
+            ;(transitionGroupEl as HTMLElement).classList.add(
+              'var-pointer-auto'
+            )
+          }
+          return h(VarSnackbarCore, {
+            ...reactiveSnackOptions,
+            ...{
+              key: id,
+              style: {
+                position: 'relative',
+                top: getTop(reactiveSnackOptions.position),
+              },
+              _update,
+              'onUpdate:show': (value: boolean) => {
+                reactiveSnackOptions.show = value
+              },
+            },
+          })
+        }
+      )
+
+      return h(
+        TransitionGroup,
+        {
+          ...transitionGroupProps,
+          onAfterLeave: removeInstance,
+        },
+        snackbarList
+      )
+    }
+  },
+}
+
 const Snackbar: any = function (options: SnackbarOptions): any {
 	const snackOptions: SnackbarOptions = isBasicObject(options) ? options : {}
 	const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>(
 		snackOptions
 	)
-	let snackbarList: any[] = reactive([])
-	const Host = {
-		setup() {
-			return () => {
-				snackbarList = Snackbar.instances.map(
-					({ id, reactiveSnackOptions, _update }: any) => {
-						if (reactiveSnackOptions.forbidClick) {
-							const transitionGroupEl = document.querySelector(
-								'.var-transition-group'
-							)
-							;(transitionGroupEl as HTMLElement).classList.add(
-								'var-pointer-auto'
-							)
-						}
-						return h(VarSnackbarCore, {
-							...reactiveSnackOptions,
-							...{
-								key: id,
-								style: {
-									position: 'relative',
-									top: getTop(reactiveSnackOptions.position),
-								},
-								_update,
-								'onUpdate:show': (value: boolean) => {
-									reactiveSnackOptions.show = value
-								},
-							},
-						})
-					}
-				)
-
-				return h(
-					TransitionGroup,
-					{
-						...transitionGroupProps,
-						onAfterLeave: removeInstance,
-					},
-					snackbarList
-				)
-			}
-		},
-	}
+  reactiveSnackOptions.show = true
+
+  const api = {
+	  clear() {
+      reactiveSnackOptions.show = false
+    }
+  }
 
 	if (!Snackbar.isMount) {
 		Snackbar.isMount = true
-		mountInstance(Host)
+		mountInstance(TransitionGroupHost)
 	}
 
-	const id = Date.now()
-	reactiveSnackOptions.show = true
-
-	if (Snackbar.isAllowMultiple) {
-		Snackbar.instances.push({
-			id,
-			reactiveSnackOptions,
-		})
+  const id = Date.now()
+  const { length } = Snackbar.instances
+
+  if (length === 0) {
+    Snackbar.instances.push({
+      id,
+      reactiveSnackOptions,
+    })
+    return api
+  }
+
+	if (!Snackbar.isAllowMultiple) {
+    Snackbar.instances[0].reactiveSnackOptions = {
+      ...Snackbar.instances[0].reactiveSnackOptions,
+      ...reactiveSnackOptions,
+    }
+    Snackbar.instances[0]._update = `update-${id}`
 	} else {
-		const { length } = Snackbar.instances
-		if (length === 1) {
-			Snackbar.instances[0].reactiveSnackOptions = {
-				...Snackbar.instances[0].reactiveSnackOptions,
-				...reactiveSnackOptions,
-			}
-			Snackbar.instances[0]._update = `update-${id}`
-		} else {
-			Snackbar.instances.push({
-				id,
-				reactiveSnackOptions,
-				_update: `update-${id}`,
-			})
-		}
-	}
-	return {
-		clear: () => {
-			for (let i = 0; i < snackbarList.length; i++) {
-				if (snackbarList[i].key === id) {
-					snackbarList[i].component.emit('update:show', false)
-				}
-			}
-		},
-	}
+    Snackbar.instances.push({
+      id,
+      reactiveSnackOptions,
+    })
+  }
+
+	return api
 }
 
 ;['success', 'warning', 'info', 'error', 'loading'].forEach((type: any) => {