forked from IDuxFE/idux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(comp:list): rebuild with tsx (IDuxFE#187)
- Loading branch information
1 parent
24f173e
commit b8aedc5
Showing
13 changed files
with
216 additions
and
258 deletions.
There are no files selected for viewing
29 changes: 11 additions & 18 deletions
29
packages/components/list/__tests__/__snapshots__/list.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,36 @@ | ||
| // Vitest Snapshot v1 | ||
|
|
||
| exports[`List > render work 1`] = ` | ||
| "<div class=\\"ix-list ix-list-md ix-list-border\\"> | ||
| <!--v-if--> | ||
| "<div class=\\"ix-list ix-list-split ix-list-md ix-list-border\\"> | ||
| <!----> | ||
| <div class=\\"ix-spin\\"> | ||
| <!----> | ||
| <div class=\\"ix-spin-container\\"> | ||
| <div> | ||
| <div class=\\"ix-list-item\\"> | ||
| <div class=\\"ix-list-item-title\\"></div> | ||
| <!----> | ||
| <div class=\\"ix-list-item-content\\">default</div> | ||
| <div class=\\"ix-list-item-extra\\"></div> | ||
| <!----> | ||
| </div> | ||
| <div class=\\"ix-list-item\\"> | ||
| <div class=\\"ix-list-item-title\\"></div> | ||
| <!----> | ||
| <div class=\\"ix-list-item-content\\">default</div> | ||
| <div class=\\"ix-list-item-extra\\"></div> | ||
| <!----> | ||
| </div> | ||
| <div class=\\"ix-list-item\\"> | ||
| <div class=\\"ix-list-item-title\\"></div> | ||
| <!----> | ||
| <div class=\\"ix-list-item-content\\">default</div> | ||
| <div class=\\"ix-list-item-extra\\"></div> | ||
| <!----> | ||
| </div> | ||
| <div class=\\"ix-list-item\\"> | ||
| <div class=\\"ix-list-item-title\\"></div> | ||
| <!----> | ||
| <div class=\\"ix-list-item-content\\">default</div> | ||
| <div class=\\"ix-list-item-extra\\"></div> | ||
| </div> | ||
| </div> | ||
| <div class=\\"ix-list-empty\\" style=\\"display: none;\\"> | ||
| <div class=\\"ix-empty\\"> | ||
| <div class=\\"ix-empty-image\\"><i class=\\"ix-icon ix-icon-empty\\" role=\\"img\\" aria-label=\\"empty\\"></i></div> | ||
| <div class=\\"ix-empty-description\\">暂无数据</div> | ||
| <!----> | ||
| </div> | ||
| </div> | ||
| <!--v-if--> | ||
| <!----> | ||
| </div> | ||
| </div> | ||
| <!--v-if--> | ||
| <!----> | ||
| </div>" | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
| */ | ||
|
|
||
| import type { ListGridProps } from './types' | ||
|
|
||
| import { defineComponent, inject } from 'vue' | ||
|
|
||
| import { IxCol } from '@idux/components/grid' | ||
|
|
||
| import { listToken } from './token' | ||
| import { listItemProps } from './types' | ||
|
|
||
| export default defineComponent({ | ||
| name: 'IxListItem', | ||
| props: listItemProps, | ||
| setup(props, { slots }) { | ||
| const listGrid = inject(listToken, null) | ||
|
|
||
| const getGrid = <T, K extends keyof T>(grid: T, dim: K) => { | ||
| const v = grid[dim] | ||
| if (typeof v === 'number') { | ||
| return Math.floor(24 / v) | ||
| } | ||
|
|
||
| return undefined | ||
| } | ||
|
|
||
| const useGrid = (grid: ListGridProps) => { | ||
| const defaultSpan = getGrid(grid, 'column') | ||
| const xsSpan = getGrid(grid, 'xs') | ||
| const smSpan = getGrid(grid, 'sm') | ||
| const mdSpan = getGrid(grid, 'md') | ||
| const lgSpan = getGrid(grid, 'lg') | ||
| const xlSpan = getGrid(grid, 'xl') | ||
| return { | ||
| xs: xsSpan || defaultSpan, | ||
| sm: smSpan || defaultSpan, | ||
| md: mdSpan || defaultSpan, | ||
| ld: lgSpan || defaultSpan, | ||
| xl: xlSpan || defaultSpan, | ||
| } | ||
| } | ||
|
|
||
| return () => { | ||
| const grid = listGrid?.value && useGrid(listGrid?.value) | ||
| const title = props.title ?? slots.title?.() | ||
| const content = props.content ?? slots.default?.() | ||
| const extra = slots.extra?.() | ||
| const renderContent = ( | ||
| <> | ||
| {title && <div class="ix-list-item-title">{title}</div>} | ||
| <div class="ix-list-item-content">{content}</div> | ||
| {extra && <div class="ix-list-item-extra">{extra}</div>} | ||
| </> | ||
| ) | ||
| return grid ? <IxCol {...grid}>{renderContent}</IxCol> : <div class="ix-list-item">{renderContent}</div> | ||
| } | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
| */ | ||
|
|
||
| import { computed, defineComponent, provide, ref } from 'vue' | ||
|
|
||
| import { getFirstValidNode } from '@idux/cdk/utils' | ||
| import { IxButton } from '@idux/components/button' | ||
| import { ListConfig, useGlobalConfig } from '@idux/components/config' | ||
| import { IxEmpty } from '@idux/components/empty' | ||
| import { IxRow } from '@idux/components/grid' | ||
| import { IxSpin } from '@idux/components/spin' | ||
|
|
||
| import { listToken } from './token' | ||
| import { ListProps, listProps } from './types' | ||
|
|
||
| export default defineComponent({ | ||
| name: 'IxList', | ||
| components: { | ||
| IxSpin, | ||
| IxButton, | ||
| IxEmpty, | ||
| }, | ||
| props: listProps, | ||
| emits: ['loadMore'], | ||
| setup(props: ListProps, { slots, emit }) { | ||
| provide( | ||
| listToken, | ||
| computed(() => props.grid), | ||
| ) | ||
|
|
||
| const listConfig = useGlobalConfig('list') | ||
|
|
||
| const loadingProp = computed(() => { | ||
| if (typeof props.loading === 'boolean') { | ||
| return { | ||
| spinning: props.loading, | ||
| } | ||
| } | ||
| return props.loading | ||
| }) | ||
| const loadMoreLoading = ref(false) | ||
| const loadMoreHandleClick = () => { | ||
| loadMoreLoading.value = true | ||
| const done = () => { | ||
| loadMoreLoading.value = false | ||
| } | ||
| emit('loadMore', done) | ||
| } | ||
|
|
||
| const useClasses = (props: ListProps, listConfig: ListConfig) => { | ||
| return computed(() => { | ||
| const borderless = props.borderless ?? listConfig.borderless | ||
| const size = props.size ?? listConfig.size | ||
| return [ | ||
| 'ix-list', | ||
| 'ix-list-split', | ||
| `ix-list-${size}`, | ||
| { | ||
| 'ix-list-border': !borderless, | ||
| }, | ||
| ] | ||
| }) | ||
| } | ||
|
|
||
| return () => { | ||
| const classesProps = useClasses(props, listConfig) | ||
| const header = props.header ?? slots.header?.() | ||
| const footer = props.footer ?? slots.footer?.() | ||
| const content = getFirstValidNode(slots.default?.()) | ||
| ? slots.default?.() | ||
| : slots.empty?.() ?? <IxEmpty description={props.empty} /> | ||
| const loadMore = props.loadMore ?? slots.loadMore?.() | ||
|
|
||
| const renderContent = () => { | ||
| if (props.grid) { | ||
| return <IxRow gutter={props.grid.gutter}>{content}</IxRow> | ||
| } | ||
| return <div>{content}</div> | ||
| } | ||
|
|
||
| const renderLoadMore = () => { | ||
| return ( | ||
| loadMore && ( | ||
| <div class="ix-list-loadMore"> | ||
| <IxButton loading={loadMoreLoading.value} onClick={loadMoreHandleClick}> | ||
| {loadMore} | ||
| </IxButton> | ||
| </div> | ||
| ) | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div class={classesProps.value}> | ||
| {header && <div class="ix-list-header">{header}</div>} | ||
| <IxSpin {...loadingProp.value}> | ||
| {renderContent()} | ||
| {renderLoadMore()} | ||
| </IxSpin> | ||
| {footer && <div class="ix-list-footer">{footer}</div>} | ||
| </div> | ||
| ) | ||
| } | ||
| }, | ||
| }) |
Oops, something went wrong.