refactor(comp: alert): use IxPagination component (#929)

IDuxFE · May 26, 2022 · 764529c · 764529c
1 parent 2955e7f
commit 764529c
Show file tree

Hide file tree

Showing 20 changed files with 94 additions and 173 deletions.
diff --git a/packages/components/_private/footer/__tests__/__snapshots__/footer.spec.ts.snap b/packages/components/_private/footer/__tests__/__snapshots__/footer.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`Footer > render work 1`] = `"<div><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>ok</span></button><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>cancel</span></button></div>"`;
+exports[`Footer > render work 1`] = `"<div><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>ok</span></button><button class=\\"ix-button ix-button-default ix-button-md\\" type=\\"button\\"><span>cancel</span></button></div>"`;
diff --git a/packages/components/alert/__tests__/alert.spec.ts b/packages/components/alert/__tests__/alert.spec.ts
@@ -91,22 +91,21 @@ describe('Alert', () => {
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1message2')
 
     await wrapper.setProps({ pagination: true })
-    const [leftIcon, rightIcon] = wrapper.findAll('.ix-alert-pagination-icon')
 
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
-    expect(leftIcon.classes()).toContain('ix-alert-pagination-disabled')
-    expect(rightIcon.classes()).not.toContain('ix-alert-pagination-disabled')
+    expect(wrapper.findAll('button')[0].classes()).toContain('ix-button-disabled')
+    expect(wrapper.findAll('button')[1].classes()).not.toContain('ix-button-disabled')
 
     await wrapper.trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
 
-    await rightIcon.trigger('click')
+    await wrapper.findAll('button')[1].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await rightIcon.trigger('click')
+    await wrapper.findAll('button')[1].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await leftIcon.trigger('click')
+    await wrapper.findAll('button')[0].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
   })
 })
diff --git a/packages/components/alert/src/Alert.tsx b/packages/components/alert/src/Alert.tsx
@@ -5,16 +5,17 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { Transition, computed, defineComponent, normalizeClass } from 'vue'
+import { Transition, computed, defineComponent, normalizeClass, watchEffect } from 'vue'
 
-import { isObject } from 'lodash-es'
+import { isNil, isObject } from 'lodash-es'
 
-import { convertArray, flattenNode } from '@idux/cdk/utils'
+import { convertArray, flattenNode, useState } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { IxIcon } from '@idux/components/icon'
+import { IxPagination } from '@idux/components/pagination'
+import { convertStringVNode } from '@idux/components/utils'
 
 import { useCloseable } from './composables/useCloseable'
-import { usePagination } from './composables/usePagination'
 import { alertProps } from './types'
 
 export default defineComponent({
@@ -25,24 +26,26 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-alert`)
 
     const config = useGlobalConfig('alert')
+    const [pageIndex, setPageIndex] = useState(1)
     const mergedIcon = computed(() => {
       if (props.icon !== undefined) {
         return props.icon
       }
       const iconConfig = config.icon
       return isObject(iconConfig) ? iconConfig[props.type] : iconConfig
     })
-    const titleChildren = computed(() => {
-      if (slots.default) {
-        return flattenNode(slots.default())
+    const { closeable, visible, handleClose } = useCloseable(props, config)
+
+    const handlePageChange = (index: number) => {
+      setPageIndex(index)
+    }
+
+    watchEffect(() => {
+      const { pagination } = props
+      if (isObject(pagination) && !isNil(pagination.pageIndex)) {
+        setPageIndex(pagination.pageIndex)
       }
-      return convertArray(props.title)
     })
-    const { pageIndex, pageText, isPagination, leftDisabled, rightDisabled, offsetPageIndex } = usePagination(
-      props,
-      titleChildren,
-    )
-    const { closeable, visible, handleClose } = useCloseable(props, config)
 
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
@@ -53,29 +56,16 @@ export default defineComponent({
       })
     })
 
-    const paginationLeftIconClass = computed(() => {
-      const prefixCls = mergedPrefixCls.value
-      return normalizeClass({
-        [`${prefixCls}-pagination-icon`]: true,
-        [`${prefixCls}-pagination-disabled`]: leftDisabled.value,
-      })
-    })
-
-    const paginationRightIconClass = computed(() => {
-      const prefixCls = mergedPrefixCls.value
-      return normalizeClass({
-        [`${prefixCls}-pagination-icon`]: true,
-        [`${prefixCls}-pagination-disabled`]: rightDisabled.value,
-      })
-    })
-
     return () => {
+      const { title, pagination } = props
+
       // TODO: TransitionGroup with pagination
-      const pagination = isPagination.value
-      const titleNodes = pagination ? titleChildren.value[pageIndex.value - 1] : titleChildren.value
+      const titleChildren = slots.default ? flattenNode(slots.default()) : convertArray(title)
+      const isPagination = pagination && titleChildren.length > 1
+      const titleNodes = isPagination ? titleChildren[pageIndex.value - 1] : titleChildren
 
       const iconNode = slots.icon ? slots.icon() : mergedIcon.value && <IxIcon name={mergedIcon.value} />
-      const descriptionNode = slots.description?.() ?? props.description
+      const descriptionNode = convertStringVNode(slots, props, 'description')
 
       const prefixCls = mergedPrefixCls.value
       return (
@@ -87,16 +77,17 @@ export default defineComponent({
                 <div class={`${prefixCls}-title`}>{titleNodes}</div>
                 {descriptionNode && <div class={`${prefixCls}-description`}>{descriptionNode}</div>}
               </div>
-              {pagination && (
-                <div class={`${prefixCls}-pagination`}>
-                  <span class={paginationLeftIconClass.value} onClick={() => offsetPageIndex(-1)}>
-                    <IxIcon name="left" />
-                  </span>
-                  <span class={`${prefixCls}-pagination-text`}>{pageText.value}</span>
-                  <span class={paginationRightIconClass.value} onClick={() => offsetPageIndex(1)}>
-                    <IxIcon name="right" />
-                  </span>
-                </div>
+              {isPagination && (
+                <IxPagination
+                  class={`${prefixCls}-pagination`}
+                  total={titleChildren.length}
+                  simple
+                  pageIndex={pageIndex.value}
+                  showTotal={false}
+                  showQuickJumper={false}
+                  pageSize={1}
+                  onChange={handlePageChange}
+                />
               )}
               {closeable.value && (
                 <span class={`${prefixCls}-close-icon`} onClick={handleClose}>

diff --git a/packages/components/alert/src/composables/usePagination.ts b/packages/components/alert/src/composables/usePagination.ts
diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
@@ -46,24 +46,30 @@
   }
 
   &-pagination {
-    margin-left: @alert-action-margin-left;
-    line-height: @alert-icon-font-size;
-    color: @alert-color-secondary;
-
-    &-text {
-      padding: @alert-pagination-text-padding;
-    }
-
-    &-icon {
-      cursor: pointer;
-      vertical-align: middle;
-      &:hover {
-        color: @alert-color;
-      }
-
-      &.@{alert-prefix}-pagination-disabled {
-        cursor: not-allowed;
-        color: @alert-disabled-color;
+    &.@{pagination-prefix} {
+      margin-left: @alert-action-margin-left;
+      color: @alert-color-secondary;
+
+      .@{pagination-prefix} {
+        &-item-slash {
+          margin: @alert-pagination-text-margin;
+        }
+
+        &-item {
+          margin-right: 0;
+
+          &-button {
+            .@{button-prefix}:not(.@{button-prefix}-disabled):hover {
+              background-color: transparent;
+            }
+
+            .@{button-prefix}-text:not(.@{button-prefix}-disabled):not(:hover):not(:focus):not(:active) {
+              .@{icon-prefix} {
+                 color: @alert-color-secondary;
+              }
+            }
+          }
+        }
       }
     }
   }

diff --git a/packages/components/alert/style/themes/default.ts b/packages/components/alert/style/themes/default.ts
@@ -1,5 +1,6 @@
 // style dependencies
 import '@idux/components/style/core/default'
 import '@idux/components/icon/style/themes/default'
+import '@idux/components/pagination/style/themes/default'
 
 import './default.less'
diff --git a/packages/components/alert/style/themes/default.variable.less b/packages/components/alert/style/themes/default.variable.less
@@ -9,7 +9,6 @@
 
 @alert-color: @text-color;
 @alert-color-secondary: @text-color-secondary;
-@alert-disabled-color: @disabled-color;
 
 @alert-font-size: @font-size-md;
 
@@ -25,7 +24,7 @@
 @alert-title-font-size-with-description: @font-size-lg;
 @alert-title-margin-bottom-with-description: @spacing-xs;
 
-@alert-pagination-text-padding: 0 @spacing-xs;
+@alert-pagination-text-margin: 0 @spacing-xs;
 @alert-action-margin-left: @spacing-lg;
 
 @alert-icon-font-size: @font-size-lg;
diff --git a/packages/components/alert/style/themes/seer.ts b/packages/components/alert/style/themes/seer.ts
@@ -1,5 +1,6 @@
 // style dependencies
 import '@idux/components/style/core/seer'
 import '@idux/components/icon/style/themes/seer'
+import '@idux/components/pagination/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/alert/style/themes/seer.variable.less b/packages/components/alert/style/themes/seer.variable.less
@@ -7,3 +7,5 @@
 @alert-padding: @spacing-xs @spacing-lg;
 
 @alert-line-height: @font-size-2xl;
+
+@alert-pagination-text-margin: 0 2px;
diff --git a/packages/components/button/__tests__/__snapshots__/button.spec.ts.snap b/packages/components/button/__tests__/__snapshots__/button.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`Button > render work 1`] = `"<button class=\\"ix-button ix-button-md\\" type=\\"button\\"></button>"`;
+exports[`Button > render work 1`] = `"<button class=\\"ix-button ix-button-default ix-button-md\\" type=\\"button\\"></button>"`;
diff --git a/packages/components/button/__tests__/__snapshots__/buttonGroup.spec.ts.snap b/packages/components/button/__tests__/__snapshots__/buttonGroup.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`ButtonGroup > render work 1`] = `"<div class=\\"ix-button-group\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>default</span></button><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>primary</span></button><button class=\\"ix-button ix-button-lg\\" type=\\"button\\"><span>large</span></button><button class=\\"ix-button ix-button-circle ix-button-md\\" type=\\"button\\"><span>circle</span></button></div>"`;
+exports[`ButtonGroup > render work 1`] = `"<div class=\\"ix-button-group\\"><button class=\\"ix-button ix-button-default ix-button-md\\" type=\\"button\\"><span>default</span></button><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>primary</span></button><button class=\\"ix-button ix-button-default ix-button-lg\\" type=\\"button\\"><span>large</span></button><button class=\\"ix-button ix-button-default ix-button-circle ix-button-md\\" type=\\"button\\"><span>circle</span></button></div>"`;
diff --git a/packages/components/button/__tests__/button.spec.ts b/packages/components/button/__tests__/button.spec.ts
@@ -11,7 +11,12 @@ describe('Button', () => {
   renderWork(IxButton)
 
   test('mode work', async () => {
-    const wrapper = ButtonMount({ props: { mode: 'primary' } })
+    const wrapper = ButtonMount()
+
+    expect(wrapper.classes()).toContain('ix-button-default')
+    expect(wrapper.element.tagName).toEqual('BUTTON')
+
+    await wrapper.setProps({ mode: 'primary' })
 
     expect(wrapper.classes()).toContain('ix-button-primary')
     expect(wrapper.element.tagName).toEqual('BUTTON')

diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
@@ -40,7 +40,7 @@ export default defineComponent({
         [`${prefixCls}-ghost`]: ghost,
         [`${prefixCls}-loading`]: loading,
         [`${prefixCls}-icon-only`]: !slots.default && (icon || loading),
-        [`${prefixCls}-${mode.value}`]: mode.value !== 'default',
+        [`${prefixCls}-${mode.value}`]: mode.value,
         [`${prefixCls}-${shape}`]: !!shape,
         [`${prefixCls}-${size.value}`]: true,
       })

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -124,7 +124,7 @@
     position: relative;
   }
 
-  &:not(&-disabled):not(&-danger):not(&-primary):not(&-link):not(:hover):not(:focus):not(:active) {
+  &-default:not(&-disabled):not(:hover):not(:focus):not(:active) {
     .@{icon-prefix} {
       color: @button-icon-color;
     }

diff --git a/packages/components/form/__tests__/__snapshots__/form.spec.ts.snap b/packages/components/form/__tests__/__snapshots__/form.spec.ts.snap
@@ -51,7 +51,7 @@ exports[`Form > basic work > render work 1`] = `
     <!---->
     <div class=\\"ix-col ix-form-item-control\\">
       <div class=\\"ix-form-item-control-input\\">
-        <div class=\\"ix-form-item-control-input-content\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Click</span></button></div>
+        <div class=\\"ix-form-item-control-input-content\\"><button class=\\"ix-button ix-button-default ix-button-md\\" type=\\"button\\"><span>Click</span></button></div>
         <!---->
         <!---->
       </div>

diff --git a/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap b/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap
@@ -4,6 +4,6 @@ exports[`Space > render work 1`] = `
 "<div class=\\"ix-space\\" style=\\"margin-bottom: -16px;\\">
   <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\">Space</div>
   <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
-  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
+  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-default ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
 </div>"
 `;
diff --git a/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap b/packages/components/transfer/__tests__/__snapshots__/transfer.spec.ts.snap
@@ -102,7 +102,7 @@ exports[`Transfer > render work 1`] = `
     <!---->
   </div>
   <div class=\\"ix-transfer-operations\\">
-    <div class=\\"ix-transfer-operations-inner\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right-double\\" role=\\"img\\" aria-label=\\"right-double\\"></i></button><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-md ix-transfer-operations-btn\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left-double\\" role=\\"img\\" aria-label=\\"left-double\\"></i></button></div>
+    <div class=\\"ix-transfer-operations-inner\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-default ix-button-md ix-transfer-operations-btn\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right-double\\" role=\\"img\\" aria-label=\\"right-double\\"></i></button><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-default ix-button-md ix-transfer-operations-btn\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left-double\\" role=\\"img\\" aria-label=\\"left-double\\"></i></button></div>
   </div>
   <div class=\\"ix-transfer-list ix-transfer-list-target\\">
     <div class=\\"ix-transfer-list-header\\">