taro-react-uilib 1.4.32 → 1.4.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Collapse/index.js.map +1 -1
- package/dist/components/Tabbar/tabbar/Tabbar.js +1 -1
- package/dist/components/Tabbar/tabbar/Tabbar.js.map +1 -1
- package/dist/index.esm.js +6 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +4 -4
- package/dist/index.umd.js.map +1 -1
- package/dist/styles/components/tabbar.scss +33 -9
- package/package.json +1 -1
- package/types/components/Tabbar/tabbar/Tabbar.d.ts +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useRef, useState } from \"react\";\nimport List from \"@/components/List\";\nimport { View } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport type { XHListProps } from \"../List\";\n\nimport \"./index.scss\";\n\nexport type CollapseProps = {\n summary?: string | ReactNode;\n open?: boolean;\n style?: React.CSSProperties;\n onToggle?: (open: boolean) => void;\n dataTrackId?: string;\n} & XHListProps;\n\nconst Collapse: React.FC<CollapseProps> = props => {\n const {\n summary = \"\",\n children,\n open = false,\n arrow,\n className,\n style,\n onToggle,\n dataTrackId = \"collapse\",\n ...rest\n } = props;\n const detailRef = useRef<HTMLDivElement>(null);\n const [innerOpen, setInneropen] = useState(open);\n const handleOnchange = () => {\n setInneropen(old => !old);\n };\n\n const detailStyle = useMemo(() => {\n const style: React.CSSProperties = { height: 0 };\n if (innerOpen)\n style.height =\n process.env.TARO_ENV === \"h5\"\n ? `${detailRef.current?.scrollHeight}px`\n : \"auto\";\n process.env.TARO_ENV === \"h5\" &&\n innerOpen &&\n detailRef.current?.scrollIntoView({\n behavior: \"smooth\",\n block: \"end\",\n inline: \"nearest\",\n });\n onToggle?.(innerOpen);\n return style;\n }, [innerOpen]);\n\n return (\n <View\n className={classNames(\"xh-collapse\", className)}\n style={style}\n // @ts-ignore\n dataTrackId={dataTrackId}\n >\n <View\n // @ts-ignore\n dataTrackId={`${dataTrackId}_summary`}\n className={classNames(\"xh-collapse-summary\", { open: innerOpen })}\n onClick={handleOnchange}\n >\n {summary || <List {...rest} arrow dataTrackId={`${dataTrackId}_summary_list`}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useRef, useState } from \"react\";\nimport List from \"@/components/List\";\nimport { View } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport type { XHListProps } from \"../List\";\n\nimport \"./index.scss\";\n\nexport type CollapseProps = {\n summary?: string | ReactNode;\n open?: boolean;\n style?: React.CSSProperties;\n onToggle?: (open: boolean) => void;\n dataTrackId?: string;\n} & XHListProps;\n\nconst Collapse: React.FC<CollapseProps> = props => {\n const {\n summary = \"\",\n children,\n open = false,\n arrow,\n className,\n style,\n onToggle,\n dataTrackId = \"collapse\",\n ...rest\n } = props;\n const detailRef = useRef<HTMLDivElement>(null);\n const [innerOpen, setInneropen] = useState(open);\n const handleOnchange = () => {\n setInneropen(old => !old);\n };\n\n const detailStyle = useMemo(() => {\n const style: React.CSSProperties = { height: 0 };\n if (innerOpen)\n style.height =\n process.env.TARO_ENV === \"h5\"\n ? `${detailRef.current?.scrollHeight}px`\n : \"auto\";\n process.env.TARO_ENV === \"h5\" &&\n innerOpen &&\n detailRef.current?.scrollIntoView({\n behavior: \"smooth\",\n block: \"end\",\n inline: \"nearest\",\n });\n onToggle?.(innerOpen);\n return style;\n }, [innerOpen]);\n\n return (\n <View\n className={classNames(\"xh-collapse\", className)}\n style={style}\n // @ts-ignore\n dataTrackId={dataTrackId}\n >\n <View\n // @ts-ignore\n dataTrackId={`${dataTrackId}_summary`}\n className={classNames(\"xh-collapse-summary\", { open: innerOpen })}\n onClick={handleOnchange}\n >\n {summary || (\n <List {...rest} arrow dataTrackId={`${dataTrackId}_summary_list`} />\n )}\n </View>\n <View\n className={classNames(\"xh-collapse-detail\")}\n ref={detailRef}\n style={detailStyle}\n >\n {children}\n </View>\n </View>\n );\n};\n\nexport default Collapse;\n"],"names":["Collapse","props","_a","summary","children","_b","open","arrow","className","style","onToggle","_c","dataTrackId","rest","__rest","detailRef","useRef","_d","__read","useState","innerOpen","setInneropen","detailStyle","useMemo","height","process","env","TARO_ENV","current","scrollHeight","scrollIntoView","behavior","block","inline","React","createElement","View","classNames","concat","onClick","old","List","ref"],"mappings":"uPAgBM,IAAAA,EAAoC,SAAAC,GAEtC,IAAAC,EASED,EAAKE,QATPA,OAAU,IAAAD,EAAA,GAAEA,EACZE,EAQEH,EAAKG,SAPPC,EAOEJ,EAAKK,KAPPA,OAAO,IAAAD,GAAKA,EAOVJ,EAAKM,MALP,IAAAC,EAKEP,EAAKO,UAJPC,EAIER,EAJGQ,MACLC,EAGET,EAAKS,SAFPC,EAEEV,EAAKW,YAFPA,OAAc,IAAAD,EAAA,WAAUA,EACrBE,EAAIC,EACLb,EAVE,CAUL,UAAA,WAAA,OAAA,QAAA,YAAA,QAAA,WAAA,gBACKc,EAAYC,EAAuB,MACnCC,EAAAC,EAA4BC,EAASb,GAAK,GAAzCc,EAASH,EAAA,GAAEI,OAKZC,EAAcC,GAAQ,mBACpBd,EAA6B,CAAEe,OAAQ,GAc7C,OAbIJ,IACFX,EAAMe,OACqB,OAAzBC,QAAQC,IAAIC,SACR,UAAoB,QAAjBzB,EAAAa,EAAUa,eAAO,IAAA1B,OAAA,EAAAA,EAAE2B,aAAgB,MACtC,QACiB,OAAzBJ,QAAQC,IAAIC,UACVP,IACiB,QAAjBf,EAAAU,EAAUa,eAAO,IAAAvB,GAAAA,EAAEyB,eAAe,CAChCC,SAAU,SACVC,MAAO,MACPC,OAAQ,aAEZvB,SAAAA,EAAWU,GACJX,CACT,GAAG,CAACW,IAEJ,OACEc,EAAAC,cAACC,EAAI,CACH5B,UAAW6B,EAAW,cAAe7B,GACrCC,MAAOA,EAEPG,YAAaA,GAEbsB,EAAAC,cAACC,GAECxB,YAAa,GAAG0B,OAAA1B,EAAqB,YACrCJ,UAAW6B,EAAW,sBAAuB,CAAE/B,KAAMc,IACrDmB,QAjCiB,WACrBlB,GAAa,SAAAmB,GAAO,OAACA,CAAG,GAC1B,GAiCOrC,GACC+B,EAACC,cAAAM,OAAS5B,EAAI,CAAEN,OAAK,EAACK,YAAa,GAAA0B,OAAG1B,EAA0B,qBAGpEsB,EAACC,cAAAC,GACC5B,UAAW6B,EAAW,sBACtBK,IAAK3B,EACLN,MAAOa,GAENlB,GAIT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__read as t}from"../../node_modules/tslib/tslib.es6.js";import e,{useState as n,useRef as a,useEffect as
|
|
1
|
+
import{__read as t}from"../../node_modules/tslib/tslib.es6.js";import e,{useState as n,useRef as a,useCallback as r,useEffect as i}from"react";import{createSelectorQuery as o}from"@tarojs/taro";import{View as l,ScrollView as c}from"@tarojs/components";import s from"classnames";import m from"./TabItem.js";var f=function(m){var f=m.children,u=void 0===f?[]:f,h=m.lineColor,b=void 0===h?"#FE5E00":h,d=m.titleActiveColor,v=void 0===d?"#333":d,x=m.titleInctiveColor,g=void 0===x?"#999":x,p=m.onChange,C=m.content,R=m.selectIndex,E=void 0===R?0:R,N=m.isOverflowNav,T=void 0!==N&&N,w=t(n(0),2),A=w[0],k=w[1],y=t(n(0),2),I=y[0],B=y[1],j=t(n(0),2),M=j[0],O=j[1],X=t(n(0),2),_=X[0],V=X[1],W=a([]),F=a([]),L=a([]),q=a(null),z=a(null),D=a(null),G=function(t,e,n,a){if(!e||!T)return 0;var r=t.left-n-(e.width-t.width)/2,i=Math.max(0,a-e.width);return Math.max(0,Math.min(r,i))},H=r((function(e){var n=u.filter(Boolean);if(!(e<0||e>=n.length))if("h5"!==process.env.TARO_ENV)D.current=setTimeout((function(){var n=o();n.selectAll(".xh-tabbar-nav-item").boundingClientRect(),n.select(".xh-tabbar-nav").boundingClientRect(),n.selectAll(".xh-tabbar-content-item").boundingClientRect(),n.selectAll(".xh-tabbar-content-slot").boundingClientRect(),n.select(".xh-tabbar-nav-scroll").boundingClientRect(),n.exec((function(n){var a=t(n,5),r=a[0],i=a[1],o=a[2],l=a[3],c=a[4],s=(null==i?void 0:i.node)||i;if(r[e]&&s&&c){var m=r[e],f=i,u=m.left+m.width/2-f.left;if(O(u),T){var h=G(m,c,i.left,i.width);V(h)}}o[e]&&k(o[e].height),l[0]&&B(l[0].height)}))}),50);else{var a=W.current[e],r=L.current[0],i=F.current[e],l=null==a?void 0:a.parentElement,c=q.current;if(a&&l&&c){var s=a.getBoundingClientRect(),m=l.getBoundingClientRect(),f=c.getBoundingClientRect(),h=s.left+s.width/2-m.left;if(O(h),T){var b=G(s,f,m.left,l.offsetWidth);c.scrollTo({left:b})}}if(r){var d=r.getBoundingClientRect();B(d.height)}if(i){var v=i.getBoundingClientRect();k(v.height)}}}),[u,T]);i((function(){return H(E),function(){D.current&&clearTimeout(D.current)}}),[E,H]);return e.createElement(l,{className:"xh-tabbar"},e.createElement(c,{scrollX:!0,scrollLeft:_,className:"xh-tabbar-nav-scroll",ref:q},e.createElement(l,{className:"xh-tabbar-nav",ref:z,style:{width:T?"fit-content":"100%"}},u.map((function(t,n){return e.createElement(l,{key:n,"data-index":n,dataTrackId:t.props.dataTrackId||"xh-tabbar-nav-item-".concat(n),ref:function(t){return W.current[n]=t},className:s("xh-tabbar-nav-item",{"more-item":T}),style:{color:E===n?v:g,flex:T?"none":"1"},onClick:function(){return function(t){if(t!==E&&(H(t),p&&p(t),"h5"===process.env.TARO_ENV)){var e=o();e.selectAll(".xh-tabbar-content-item").boundingClientRect(),e.selectAll(".xh-tabbar-content-slot").boundingClientRect(),e.exec((function(e){if(e[0][t]){var n=e[0][t].height;k(n),e[1][t]&&B(e[1][t].height)}}))}}(n)}},t.props.TabItemComponent||t.props.title)})),e.createElement("div",{className:"xh-tabbar-nav-line",style:{background:"".concat(b),transform:"translateX(".concat(M,"px) translate(-50%, -50%)"),WebkitTransform:"translateX(".concat(M,"px) translate(-50%, -50%)"),transition:"transform 0.3s ease"}}))),e.createElement(l,{className:"xh-tabbar-content",style:{width:"".concat(100*u.length,"%"),height:A+I?"".concat(A+I,"px"):"auto"}},C&&e.createElement(l,{className:"xh-tabbar-content-slot",ref:L},C),u.map((function(t,n){return e.createElement(l,{key:n,ref:function(t){return F.current[n]=t},className:s("xh-tabbar-content-item",{"xh-tabbar-content-item-dispaly":E!==n,"xh-tabbar-content-item-active":E===n})},t.props.children)}))))};f.Item=m;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Tabbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useEffect,\n useState,\n ReactNode,\n useRef,\n} from \"react\";\nimport { createSelectorQuery } from \"@tarojs/taro\";\nimport { View } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport Item from \"./TabItem\";\n\n/**\n * Tab切换\n *\n * @param children //子组件\n * @param animated //是否开启转场动画\n * @param selectIndex //默认选中第几个\n * @param lineColor //下划线颜色\n * @param titleActiveColor //标题选中态颜色\n * @param titleInctiveColor //标题默认态颜色\n * @param onChange //切换回调事件\n * @param content //item公共节点\n *\n */\n\nexport interface TabProps {\n children: ReactElement[];\n animated?: boolean;\n // initIndex?: number;\n lineColor?: string;\n titleActiveColor?: string;\n titleInctiveColor?: string;\n onChange?: (index: number) => void;\n content?: string | ReactNode;\n selectIndex: number;\n}\n\nexport interface TabsComponent<P = {}> extends FC<P> {\n Item: typeof Item;\n}\n\nconst XHTabs: TabsComponent<TabProps> = props => {\n const {\n children = [],\n animated = false,\n // initIndex = 0,\n lineColor = \"#F6AB00\",\n titleActiveColor = \"#333\",\n titleInctiveColor = \"#999\",\n onChange,\n content,\n selectIndex = 0,\n } = props;\n\n // const [selectIndex, setSelectIndex] = useState(initIndex);\n const [tabWdith, setTabWdith] = useState(0);\n const [tabContentHeight, setTabContentHeight] = useState(0);\n const [tabSlotHeight, setTabSlotHeight] = useState(0);\n\n const itemNavRef = useRef<(HTMLLIElement | null)[]>([]);\n const itemContentRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemSlotRef = useRef<(HTMLDivElement | null)[]>([]);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n if (process.env.TARO_ENV === \"h5\") {\n const el = itemNavRef.current[selectIndex];\n if (el) {\n const rect = el.getBoundingClientRect();\n console.log(\"el\", rect);\n setTabWdith(rect.width);\n }\n const elSlot = itemSlotRef.current[0];\n if (elSlot) {\n const rect = elSlot.getBoundingClientRect();\n console.log(\"elSlot\", rect);\n setTabSlotHeight(rect.height);\n }\n\n const elitem = itemContentRef.current[selectIndex];\n if (elitem) {\n const rect = elitem.getBoundingClientRect();\n console.log(\"elitem\", rect);\n setTabContentHeight(rect.height);\n }\n clearTimeout(timer);\n return;\n }\n\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-nav-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n\n query.exec(res => {\n if (!res[0][selectIndex]) return;\n const width: number = res[0][selectIndex].width;\n setTabWdith(width);\n\n if (!res[1][selectIndex]) return;\n setTabContentHeight(res[1][selectIndex].height);\n\n if (!res[2][selectIndex]) return;\n setTabSlotHeight(res[2][selectIndex].height);\n clearTimeout(timer);\n });\n }, 300);\n console.log(children.length);\n }, [selectIndex, children]);\n\n const handleClick = (index: number): void => {\n // setSelectIndex(index);\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.exec(res => {\n if (!res[0][index]) return;\n const height: number = res[0][index].height;\n setTabContentHeight(height);\n if (!res[1][index]) return;\n setTabSlotHeight(res[1][index].height);\n });\n\n onChange && onChange(index);\n };\n\n function renderLine(): ReactElement | null {\n const left: number = tabWdith / 2 + selectIndex * tabWdith;\n return (\n <div\n className={classNames(\"xh-tabbar-nav-line\", {\n \"xh-tabbar-nav-line-active\": animated,\n })}\n style={{\n background: `${lineColor}`,\n transform: `translateX(${left}px) translate(-50%, -50%)`,\n WebkitTransform: `translateX(${left}px) translate(-50%, -50%)`,\n }}\n />\n );\n }\n\n return (\n <View className=\"xh-tabbar\">\n <View className=\"xh-tabbar-nav\">\n {children.map((child, index) => (\n <View\n key={index}\n // @ts-ignore\n dataTrackId={\n child.props.dataTrackId || `xh-tabbar-nav-item-${index}`\n }\n ref={el => (itemNavRef.current[index] = el)}\n className=\"xh-tabbar-nav-item\"\n style={{\n color:\n selectIndex === index ? titleActiveColor : titleInctiveColor,\n }}\n onClick={() => handleClick(index)}\n >\n {child.props.TabItemComponent\n ? child.props.TabItemComponent\n : child.props.title}\n </View>\n ))}\n {renderLine()}\n </View>\n <View\n className=\"xh-tabbar-content\"\n style={{\n width: `${children.length * 100}%`,\n height:\n tabContentHeight + tabSlotHeight\n ? `${tabContentHeight + tabSlotHeight}px`\n : \"auto\",\n }}\n >\n {content && (\n <View className=\"xh-tabbar-content-slot\" ref={itemSlotRef}>\n {content}\n </View>\n )}\n {children.map((child, index) => (\n <View\n key={index}\n ref={el => (itemContentRef.current[index] = el)}\n className={classNames(\"xh-tabbar-content-item\", {\n \"xh-tabbar-content-item-dispaly\":\n selectIndex !== index && !animated,\n \"xh-tabbar-content-item-active\": selectIndex === index,\n })}\n style={{\n transform: animated ? `translateX(-${selectIndex * 100}%)` : \"\",\n }}\n >\n {child.props.children}\n </View>\n ))}\n </View>\n </View>\n );\n};\n\nXHTabs.Item = Item;\n\nexport default XHTabs;\nexport const TabItem = Item;\n"],"names":["XHTabs","props","_a","children","_b","animated","_c","lineColor","_d","titleActiveColor","_e","titleInctiveColor","onChange","content","_f","selectIndex","_g","__read","useState","tabWdith","setTabWdith","_h","tabContentHeight","setTabContentHeight","_j","tabSlotHeight","setTabSlotHeight","itemNavRef","useRef","itemContentRef","itemSlotRef","useEffect","timer","setTimeout","process","env","TARO_ENV","query","createSelectorQuery","selectAll","boundingClientRect","exec","res","width","height","clearTimeout","el","current","rect","getBoundingClientRect","elSlot","elitem","left","React","createElement","View","className","map","child","index","key","dataTrackId","concat","ref","style","color","onClick","handleClick","TabItemComponent","title","classNames","background","transform","WebkitTransform","length","Item"],"mappings":"iRA2CM,IAAAA,EAAkC,SAAAC,GAEpC,IAAAC,EASED,EAAKE,SATPA,aAAW,GAAED,EACbE,EAQEH,EARcI,SAAhBA,OAAQ,IAAAD,GAAQA,EAEhBE,EAMEL,EANmBM,UAArBA,aAAY,UAASD,EACrBE,EAKEP,mBALFQ,OAAmB,IAAAD,EAAA,SACnBE,EAIET,EAJwBU,kBAA1BA,OAAoB,IAAAD,EAAA,OAAMA,EAC1BE,EAGEX,WAFFY,EAEEZ,EAAKY,QADPC,EACEb,EADac,YAAfA,OAAc,IAAAD,EAAA,IAIVE,EAAAC,EAA0BC,EAAS,GAAE,GAApCC,EAAQH,EAAA,GAAEI,OACXC,EAAAJ,EAA0CC,EAAS,GAAE,GAApDI,EAAgBD,EAAA,GAAEE,OACnBC,EAAAP,EAAoCC,EAAS,GAAE,GAA9CO,EAAaD,EAAA,GAAEE,OAEhBC,EAAaC,EAAiC,IAC9CC,EAAiBD,EAAkC,IACnDE,EAAcF,EAAkC,IAEtDG,GAAU,WACR,IAAMC,EAAQC,YAAW,WACvB,GAA6B,OAAzBC,QAAQC,IAAIC,SAAhB,CAwBA,IAAMC,EAAQC,IACdD,EAAME,UAAU,uBAAuBC,qBACvCH,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAME,UAAU,2BAA2BC,qBAE3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAG3B,GAAZ,CACA,IAAM4B,EAAgBD,EAAI,GAAG3B,GAAa4B,MAC1CvB,EAAYuB,GAEPD,EAAI,GAAG3B,KACZQ,EAAoBmB,EAAI,GAAG3B,GAAa6B,QAEnCF,EAAI,GAAG3B,KACZW,EAAiBgB,EAAI,GAAG3B,GAAa6B,QACrCC,aAAab,IAToB,CAUnC,GAlBC,KAtBD,CACE,IAAMc,EAAKnB,EAAWoB,QAAQhC,GAC9B,GAAI+B,EAAI,CACN,IAAME,EAAOF,EAAGG,wBAEhB7B,EAAY4B,EAAKL,MAClB,CACD,IAAMO,EAASpB,EAAYiB,QAAQ,GACnC,GAAIG,EAAQ,CACJF,EAAOE,EAAOD,wBAEpBvB,EAAiBsB,EAAKJ,OACvB,CAED,IAAMO,EAAStB,EAAekB,QAAQhC,GACtC,GAAIoC,EAAQ,CACJH,EAAOG,EAAOF,wBAEpB1B,EAAoByB,EAAKJ,OAC1B,CACDC,aAAab,EAEd,CAmBF,GAAE,IAEL,GAAG,CAACjB,EAAaZ,IAEjB,IAiBQiD,EAeR,OACEC,EAACC,cAAAC,EAAK,CAAAC,UAAU,aACdH,EAAAC,cAACC,EAAI,CAACC,UAAU,iBACbrD,EAASsD,KAAI,SAACC,EAAOC,GAAU,OAC9BN,EAACC,cAAAC,EACC,CAAAK,IAAKD,EAELE,YACEH,EAAMzD,MAAM4D,aAAe,sBAAsBC,OAAAH,GAEnDI,IAAK,SAAAjB,GAAM,OAACnB,EAAWoB,QAAQY,GAASb,GACxCU,UAAU,qBACVQ,MAAO,CACLC,MACElD,IAAgB4C,EAAQlD,EAAmBE,GAE/CuD,QAAS,WAAM,OAhDL,SAACP,GAEnB,IAAMtB,EAAQC,IACdD,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGiB,GAAZ,CACA,IAAMf,EAAiBF,EAAI,GAAGiB,GAAOf,OACrCrB,EAAoBqB,GACfF,EAAI,GAAGiB,IACZjC,EAAiBgB,EAAI,GAAGiB,GAAOf,OAJJ,CAK7B,IAEAhC,GAAYA,EAAS+C,EACvB,CAkCyBQ,CAAYR,KAE1BD,EAAMzD,MAAMmE,iBACTV,EAAMzD,MAAMmE,iBACZV,EAAMzD,MAAMoE,WAnClBjB,EAAejC,EAAW,EAAIJ,EAAcI,EAEhDkC,EACEC,cAAA,MAAA,CAAAE,UAAWc,EAAW,qBAAsB,CAC1C,4BAA6BjE,IAE/B2D,MAAO,CACLO,WAAY,GAAGT,OAAAvD,GACfiE,UAAW,cAAcV,OAAAV,EAA+B,6BACxDqB,gBAAiB,cAAcX,OAAAV,EAA+B,kCA+BlEC,EAAAC,cAACC,EACC,CAAAC,UAAU,oBACVQ,MAAO,CACLrB,MAAO,GAAGmB,OAAkB,IAAlB3D,EAASuE,OAAe,KAClC9B,OACEtB,EAAmBG,EACf,GAAAqC,OAAGxC,EAAmBG,EAAiB,MACvC,SAGPZ,GACCwC,EAACC,cAAAC,GAAKC,UAAU,yBAAyBO,IAAKjC,GAC3CjB,GAGJV,EAASsD,KAAI,SAACC,EAAOC,GAAU,OAC9BN,EAAAC,cAACC,EACC,CAAAK,IAAKD,EACLI,IAAK,SAAAjB,GAAM,OAACjB,EAAekB,QAAQY,GAASb,CAAG,EAC/CU,UAAWc,EAAW,yBAA0B,CAC9C,iCACEvD,IAAgB4C,IAAUtD,EAC5B,gCAAiCU,IAAgB4C,IAEnDK,MAAO,CACLQ,UAAWnE,EAAW,eAAAyD,OAA6B,IAAd/C,EAAiB,MAAO,KAG9D2C,EAAMzD,MAAME,SAEhB,KAIT,EAEAH,EAAO2E,KAAOA"}
|
|
1
|
+
{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useEffect,\n useState,\n ReactNode,\n useRef,\n useCallback,\n} from \"react\";\nimport { createSelectorQuery } from \"@tarojs/taro\";\nimport { View, ScrollView } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport Item from \"./TabItem\";\n\n/**\n * Tab切换\n *\n * @param children //子组件\n * @param animated //是否开启转场动画\n * @param selectIndex //默认选中第几个\n * @param lineColor //下划线颜色\n * @param titleActiveColor //标题选中态颜色\n * @param titleInctiveColor //标题默认态颜色\n * @param onChange //切换回调事件\n * @param content //item公共节点\n * @param isOverflowNav //是否超宽导航（超过屏幕宽度，自动滚动）\n *\n */\n\nexport interface TabProps {\n children: ReactElement[];\n animated?: boolean;\n lineColor?: string;\n titleActiveColor?: string;\n titleInctiveColor?: string;\n onChange?: (index: number) => void;\n content?: string | ReactNode;\n selectIndex: number;\n isOverflowNav?: boolean;\n}\n\nexport interface TabsComponent<P = {}> extends FC<P> {\n Item: typeof Item;\n}\n\nconst XHTabs: TabsComponent<TabProps> = props => {\n const {\n children = [],\n // animated = false,\n lineColor = \"#FE5E00\",\n titleActiveColor = \"#333\",\n titleInctiveColor = \"#999\",\n onChange,\n content,\n selectIndex = 0,\n isOverflowNav = false,\n } = props;\n\n const [tabContentHeight, setTabContentHeight] = useState(0);\n const [tabSlotHeight, setTabSlotHeight] = useState(0);\n const [lineLeft, setLineLeft] = useState(0); // 下划线左偏移，核心：通过状态控制下划线位置，确保同步更新和动画过渡\n const [navLeft, setNavLeft] = useState(0); // 导航滚动位置，核心：通过状态控制滚动位置，适配超宽导航\n // Ref定义\n const itemNavRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemContentRef = useRef<(HTMLDivElement | null)[]>([]);\n const itemSlotRef = useRef<(HTMLDivElement | null)[]>([]);\n const navScrollRef = useRef<HTMLDivElement | null>(null); // 滚动容器ref\n const navContainerRef = useRef<HTMLDivElement | null>(null);\n const timerRef = useRef<NodeJS.Timeout | null>(null); // 定时器ref，避免闭包丢失\n\n // 统一滚动计算逻辑：H5/小程序通用\n const computeScroll = (\n itemRect: any,\n scrollRect: any,\n containerLeft: number,\n containerWidth: number\n ) => {\n if (!scrollRect || !isOverflowNav) return 0;\n // 元素在导航容器内的绝对偏移（视口坐标转容器坐标）\n const itemOffsetInNav = itemRect.left - containerLeft;\n // 居中滚动值：让选中项尽量居中显示\n let targetScroll =\n itemOffsetInNav - (scrollRect.width - itemRect.width) / 2;\n // 最大可滚动距离：总导航宽度 - 可视区域宽度\n const maxScroll = Math.max(0, containerWidth - scrollRect.width);\n // 边界处理：不小于0，不大于最大可滚动距离\n return Math.max(0, Math.min(targetScroll, maxScroll));\n };\n\n // 抽离位置/尺寸计算逻辑，复用（初始化+切换都调用）\n const calculateTabInfo = useCallback(\n (targetIndex: number) => {\n // 过滤空children，避免索引越界\n const validChildren = children.filter(Boolean);\n if (targetIndex < 0 || targetIndex >= validChildren.length) return;\n\n // H5端：直接通过ref获取元素信息，核心：同步更新，无需等待DOM渲染\n if (process.env.TARO_ENV === \"h5\") {\n const navItem = itemNavRef.current[targetIndex];\n const slotItem = itemSlotRef.current[0];\n const contentItem = itemContentRef.current[targetIndex];\n const navContainer = navItem?.parentElement as HTMLDivElement;\n const scrollContainer = navScrollRef.current;\n\n // 计算下划线位置\n if (navItem && navContainer && scrollContainer) {\n const itemRect = navItem.getBoundingClientRect();\n const containerRect = navContainer.getBoundingClientRect();\n const scrollRect = scrollContainer.getBoundingClientRect();\n const centerX =\n itemRect.left + itemRect.width / 2 - containerRect.left;\n setLineLeft(centerX);\n\n if (isOverflowNav) {\n const targetScroll = computeScroll(\n itemRect,\n scrollRect,\n containerRect.left,\n navContainer.offsetWidth\n );\n scrollContainer.scrollTo({\n left: targetScroll,\n // behavior: \"instant\",\n });\n }\n }\n\n if (slotItem) {\n const slotRect = slotItem.getBoundingClientRect();\n setTabSlotHeight(slotRect.height);\n }\n if (contentItem) {\n const contentRect = contentItem.getBoundingClientRect();\n setTabContentHeight(contentRect.height);\n }\n return;\n }\n\n // 小程序端：必须用createSelectorQuery，保留极短延迟（50ms），适配小程序DOM渲染时机\n timerRef.current = setTimeout(() => {\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-nav-item\").boundingClientRect();\n query.select(\".xh-tabbar-nav\").boundingClientRect(); // 导航容器（下划线定位基准）\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.select(\".xh-tabbar-nav-scroll\").boundingClientRect(); // 滚动容器\n query.exec(res => {\n const [\n navRects,\n navContainerRect,\n contentRects,\n slotRects,\n scrollRect,\n ] = res;\n const navContainer = navContainerRect?.node || navContainerRect;\n // 下划线宽度+内容高度\n if (navRects[targetIndex] && navContainer && scrollRect) {\n const itemRect = navRects[targetIndex];\n const containerRect = navContainerRect;\n const centerX =\n itemRect.left + itemRect.width / 2 - containerRect.left;\n setLineLeft(centerX);\n\n // 计算ScrollView滚动距离（选中项居中）\n if (isOverflowNav) {\n const targetScroll = computeScroll(\n itemRect,\n scrollRect,\n navContainerRect.left,\n navContainerRect.width\n );\n setNavLeft(targetScroll);\n }\n }\n // 内容高度计算（保持不变）\n if (contentRects[targetIndex]) {\n setTabContentHeight(contentRects[targetIndex].height);\n }\n // Slot高度查询取[0]，因为Slot只有一个节点\n if (slotRects[0]) {\n setTabSlotHeight(slotRects[0].height);\n }\n });\n }, 50);\n },\n [children, isOverflowNav]\n );\n\n useEffect(() => {\n calculateTabInfo(selectIndex);\n // 清理定时器，防止内存泄漏\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, [selectIndex, calculateTabInfo]);\n\n // 点击导航项\n const handleClick = (index: number): void => {\n if (index === selectIndex) return; // 点击当前选中项，不做处理\n // 同步计算目标项位置，下划线立即更新\n calculateTabInfo(index);\n // 触发切换回调\n onChange && onChange(index);\n\n // 小程序端单独处理内容高度（H5已在calculateTabInfo中处理）\n if (process.env.TARO_ENV === \"h5\") {\n // 点击导航获取内容高度和slot高度\n const query = createSelectorQuery();\n query.selectAll(\".xh-tabbar-content-item\").boundingClientRect();\n query.selectAll(\".xh-tabbar-content-slot\").boundingClientRect();\n query.exec(res => {\n if (!res[0][index]) return;\n const height: number = res[0][index].height;\n\n setTabContentHeight(height);\n if (!res[1][index]) return;\n setTabSlotHeight(res[1][index].height);\n });\n }\n };\n\n // 下划线\n function renderLine(): ReactElement | null {\n return (\n <div\n className=\"xh-tabbar-nav-line\"\n style={{\n background: `${lineColor}`,\n transform: `translateX(${lineLeft}px) translate(-50%, -50%)`,\n WebkitTransform: `translateX(${lineLeft}px) translate(-50%, -50%)`,\n transition: \"transform 0.3s ease\", // 小程序端动画过渡\n }}\n />\n );\n }\n\n // 导航栏\n function renderNav() {\n return (\n <ScrollView\n scrollX\n scrollLeft={navLeft}\n className=\"xh-tabbar-nav-scroll\"\n ref={navScrollRef}\n >\n <View\n className=\"xh-tabbar-nav\"\n ref={navContainerRef}\n style={{ width: isOverflowNav ? \"fit-content\" : \"100%\" }}\n >\n {children.map((child, index) => (\n <View\n key={index}\n data-index={index}\n // @ts-ignore\n dataTrackId={\n child.props.dataTrackId || `xh-tabbar-nav-item-${index}`\n }\n ref={el => (itemNavRef.current[index] = el)}\n className={classNames(\"xh-tabbar-nav-item\", {\n \"more-item\": isOverflowNav,\n })}\n style={{\n color:\n selectIndex === index ? titleActiveColor : titleInctiveColor,\n flex: isOverflowNav ? \"none\" : \"1\",\n }}\n onClick={() => handleClick(index)}\n >\n {child.props.TabItemComponent || child.props.title}\n </View>\n ))}\n {renderLine()}\n </View>\n </ScrollView>\n );\n }\n\n return (\n <View className=\"xh-tabbar\">\n {renderNav()}\n <View\n className=\"xh-tabbar-content\"\n style={{\n width: `${children.length * 100}%`,\n height:\n tabContentHeight + tabSlotHeight\n ? `${tabContentHeight + tabSlotHeight}px`\n : \"auto\",\n }}\n >\n {content && (\n <View className=\"xh-tabbar-content-slot\" ref={itemSlotRef}>\n {content}\n </View>\n )}\n {children.map((child, index) => (\n <View\n key={index}\n ref={el => (itemContentRef.current[index] = el)}\n className={classNames(\"xh-tabbar-content-item\", {\n \"xh-tabbar-content-item-dispaly\": selectIndex !== index,\n \"xh-tabbar-content-item-active\": selectIndex === index,\n })}\n >\n {child.props.children}\n </View>\n ))}\n </View>\n </View>\n );\n};\n\nXHTabs.Item = Item;\n\nexport default XHTabs;\nexport const TabItem = Item;\n"],"names":["XHTabs","props","_a","children","_b","lineColor","_c","titleActiveColor","_d","titleInctiveColor","onChange","content","_e","selectIndex","_f","isOverflowNav","_g","__read","useState","tabContentHeight","setTabContentHeight","_h","tabSlotHeight","setTabSlotHeight","_j","lineLeft","setLineLeft","_k","navLeft","setNavLeft","itemNavRef","useRef","itemContentRef","itemSlotRef","navScrollRef","navContainerRef","timerRef","computeScroll","itemRect","scrollRect","containerLeft","containerWidth","targetScroll","left","width","maxScroll","Math","max","min","calculateTabInfo","useCallback","targetIndex","validChildren","filter","Boolean","length","process","env","TARO_ENV","current","setTimeout","query","createSelectorQuery","selectAll","boundingClientRect","select","exec","res","navRects","navContainerRect","contentRects","slotRects","navContainer","node","containerRect","centerX","height","navItem","slotItem","contentItem","parentElement","scrollContainer","getBoundingClientRect","offsetWidth","scrollTo","slotRect","contentRect","useEffect","clearTimeout","React","createElement","View","className","ScrollView","scrollX","scrollLeft","ref","style","map","child","index","key","dataTrackId","concat","el","classNames","color","flex","onClick","handleClick","TabItemComponent","title","background","transform","WebkitTransform","transition","Item"],"mappings":"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"}
|