From 4e929f56bda8598e73b19ff083d32893e9979c7d Mon Sep 17 00:00:00 2001 From: MWang Date: Fri, 9 Dec 2022 20:00:27 +0800 Subject: [PATCH 1/2] fix(vc-slick): #6100 - Fix content responsiveness in carousel component slot. --- components/vc-slick/track.jsx | 5 ++-- components/vc-slick/utils/innerSliderUtils.js | 25 +++++++++++++++++++ 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/components/vc-slick/track.jsx b/components/vc-slick/track.jsx index 5616172d96..66bb02cd1e 100644 --- a/components/vc-slick/track.jsx +++ b/components/vc-slick/track.jsx @@ -1,8 +1,7 @@ import { createVNode } from 'vue'; import classnames from '../_util/classNames'; -import { cloneElement } from '../_util/vnode'; import { flattenChildren } from '../_util/props-util'; -import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils'; +import { lazyStartIndex, lazyEndIndex, getPreClones, cloneElement } from './utils/innerSliderUtils'; // given specifications/props for a slide, fetch all the classes that need to be applied to the slide const getSlideClasses = spec => { @@ -84,7 +83,6 @@ const renderSlides = function (spec, children) { const childrenCount = children.length; const startIndex = lazyStartIndex(spec); const endIndex = lazyEndIndex(spec); - children.forEach((elem, index) => { let child; const childOnClickOptions = { @@ -182,6 +180,7 @@ const renderSlides = function (spec, children) { const Track = (_, { attrs, slots }) => { const slides = renderSlides(attrs, flattenChildren(slots?.default())); + // const slides = renderSlides(attrs, slots?.default); const { onMouseenter, onMouseover, onMouseleave } = attrs; const mouseEvents = { onMouseenter, onMouseover, onMouseleave }; const trackProps = { diff --git a/components/vc-slick/utils/innerSliderUtils.js b/components/vc-slick/utils/innerSliderUtils.js index 0d834a71ea..fe8643be9e 100644 --- a/components/vc-slick/utils/innerSliderUtils.js +++ b/components/vc-slick/utils/innerSliderUtils.js @@ -1,4 +1,5 @@ // import supportsPassive from '../../../_util/supportsPassive'; +import { cloneElement as cloneVnode } from '../../_util/vnode'; export function clamp(number, lowerBound, upperBound) { return Math.max(lowerBound, Math.min(number, upperBound)); @@ -788,3 +789,27 @@ export const slidesOnLeft = ({ slidesToShow, centerMode, rtl, centerPadding }) = export const canUseDOM = () => !!(typeof window !== 'undefined' && window.document && window.document.createElement); + +export const cloneElement = (vnode, nodeProps) => { + const node = cloneVnode(vnode, nodeProps); + + if (!Array.isArray(vnode.children)) { + return node; + } + + const children = []; + node.children.forEach(el => { + if (Array.isArray(el)) { + const newItem = []; + el.forEach(item => { + newItem.push(cloneElement(item)); + }); + children.push(newItem); + } else { + children.push(cloneElement(el)); + } + }); + node.children = children; + + return node; +}; From 356ce486ef01f5f240a793ed71dbf6fd61da2510 Mon Sep 17 00:00:00 2001 From: "M.Wang" Date: Mon, 12 Dec 2022 17:59:59 +0800 Subject: [PATCH 2/2] feat(_util) add deepCloneElement function --- components/_util/vnode.ts | 22 ++++++++++++++-- components/vc-slick/track.jsx | 9 ++++--- components/vc-slick/utils/innerSliderUtils.js | 25 ------------------- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/components/_util/vnode.ts b/components/_util/vnode.ts index c770abc11b..505bb638d2 100644 --- a/components/_util/vnode.ts +++ b/components/_util/vnode.ts @@ -3,11 +3,12 @@ import type { VNode, VNodeProps } from 'vue'; import { cloneVNode } from 'vue'; import warning from './warning'; import type { RefObject } from './createRef'; +type NodeProps = Record & + Omit & { ref?: VNodeProps['ref'] | RefObject }; export function cloneElement( vnode: VNode | VNode[], - nodeProps: Record & - Omit & { ref?: VNodeProps['ref'] | RefObject } = {}, + nodeProps: NodeProps = {}, override = true, mergeRef = false, ): VNode { @@ -29,3 +30,20 @@ export function cloneElement( export function cloneVNodes(vnodes, nodeProps = {}, override = true) { return vnodes.map(vnode => cloneElement(vnode, nodeProps, override)); } + +export function deepCloneElement( + vnode: VNode | VNode[], + nodeProps: NodeProps = {}, + override = true, + mergeRef = false, +) { + if (Array.isArray(vnode)) { + return vnode.map(item => deepCloneElement(item, nodeProps, override, mergeRef)); + } else { + const cloned = cloneElement(vnode, nodeProps, override, mergeRef); + if (Array.isArray(cloned.children)) { + cloned.children = deepCloneElement(cloned.children as VNode[]); + } + return cloned; + } +} diff --git a/components/vc-slick/track.jsx b/components/vc-slick/track.jsx index 66bb02cd1e..a8665e4010 100644 --- a/components/vc-slick/track.jsx +++ b/components/vc-slick/track.jsx @@ -1,7 +1,8 @@ import { createVNode } from 'vue'; import classnames from '../_util/classNames'; import { flattenChildren } from '../_util/props-util'; -import { lazyStartIndex, lazyEndIndex, getPreClones, cloneElement } from './utils/innerSliderUtils'; +import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils'; +import { deepCloneElement } from '../_util/vnode'; // given specifications/props for a slide, fetch all the classes that need to be applied to the slide const getSlideClasses = spec => { @@ -103,7 +104,7 @@ const renderSlides = function (spec, children) { let slideClasses = getSlideClasses({ ...spec, index }); // push a cloned element of the desired slide slides.push( - cloneElement(child, { + deepCloneElement(child, { key: 'original' + getKey(child, index), tabindex: '-1', 'data-index': index, @@ -129,7 +130,7 @@ const renderSlides = function (spec, children) { } slideClasses = getSlideClasses({ ...spec, index: key }); preCloneSlides.push( - cloneElement(child, { + deepCloneElement(child, { key: 'precloned' + getKey(child, key), class: classnames(slideClasses, slideClass), tabindex: '-1', @@ -153,7 +154,7 @@ const renderSlides = function (spec, children) { } slideClasses = getSlideClasses({ ...spec, index: key }); postCloneSlides.push( - cloneElement(child, { + deepCloneElement(child, { key: 'postcloned' + getKey(child, key), tabindex: '-1', 'data-index': key, diff --git a/components/vc-slick/utils/innerSliderUtils.js b/components/vc-slick/utils/innerSliderUtils.js index fe8643be9e..0d834a71ea 100644 --- a/components/vc-slick/utils/innerSliderUtils.js +++ b/components/vc-slick/utils/innerSliderUtils.js @@ -1,5 +1,4 @@ // import supportsPassive from '../../../_util/supportsPassive'; -import { cloneElement as cloneVnode } from '../../_util/vnode'; export function clamp(number, lowerBound, upperBound) { return Math.max(lowerBound, Math.min(number, upperBound)); @@ -789,27 +788,3 @@ export const slidesOnLeft = ({ slidesToShow, centerMode, rtl, centerPadding }) = export const canUseDOM = () => !!(typeof window !== 'undefined' && window.document && window.document.createElement); - -export const cloneElement = (vnode, nodeProps) => { - const node = cloneVnode(vnode, nodeProps); - - if (!Array.isArray(vnode.children)) { - return node; - } - - const children = []; - node.children.forEach(el => { - if (Array.isArray(el)) { - const newItem = []; - el.forEach(item => { - newItem.push(cloneElement(item)); - }); - children.push(newItem); - } else { - children.push(cloneElement(el)); - } - }); - node.children = children; - - return node; -};