taro-react-uilib 1.4.25 → 1.4.26
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/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 +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +4 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__read as t}from"../../node_modules/tslib/tslib.es6.js";import e,{useState as a,useEffect as
|
|
1
|
+
import{__read as t}from"../../node_modules/tslib/tslib.es6.js";import e,{useState as n,useRef as a,useEffect as r}from"react";import{createSelectorQuery as o}from"@tarojs/taro";import{View as i}from"@tarojs/components";import c from"classnames";import l from"./TabItem.js";var s=function(l){var s=l.children,m=void 0===s?[]:s,b=l.animated,h=void 0!==b&&b,u=l.lineColor,f=void 0===u?"#F6AB00":u,v=l.titleActiveColor,d=void 0===v?"#333":v,p=l.titleInctiveColor,x=void 0===p?"#999":p,g=l.onChange,C=l.content,R=l.selectIndex,A=void 0===R?0:R,E=t(n(0),2),N=E[0],T=E[1],y=t(n(0),2),I=y[0],k=y[1],j=t(n(0),2),B=j[0],w=j[1],X=a([]),_=a([]),F=a([]);r((function(){var t=setTimeout((function(){if("h5"!==process.env.TARO_ENV){var e=o();e.selectAll(".xh-tabbar-nav-item").boundingClientRect(),e.selectAll(".xh-tabbar-content-item").boundingClientRect(),e.selectAll(".xh-tabbar-content-slot").boundingClientRect(),e.exec((function(e){if(e[0][A]){var n=e[0][A].width;T(n),e[1][A]&&(k(e[1][A].height),e[2][A]&&(w(e[2][A].height),clearTimeout(t)))}}))}else{var n=X.current[A];if(n){var a=n.getBoundingClientRect();T(a.width)}var r=F.current[0];if(r){a=r.getBoundingClientRect();w(a.height)}var i=_.current[A];if(i){a=i.getBoundingClientRect();k(a.height)}clearTimeout(t)}}),300)}),[A,m]);var O;return e.createElement(i,{className:"xh-tabbar"},e.createElement(i,{className:"xh-tabbar-nav"},m.map((function(t,n){return e.createElement(i,{key:n,ref:function(t){return X.current[n]=t},className:"xh-tabbar-nav-item",style:{color:A===n?d:x},onClick:function(){return function(t){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]&&w(e[1][t].height)}})),g&&g(t)}(n)}},t.props.TabItemComponent?t.props.TabItemComponent:t.props.title)})),(O=N/2+A*N,e.createElement("div",{className:c("xh-tabbar-nav-line",{"xh-tabbar-nav-line-active":h}),style:{background:"".concat(f),transform:"translateX(".concat(O,"px) translate(-50%, -50%)"),WebkitTransform:"translateX(".concat(O,"px) translate(-50%, -50%)")}}))),e.createElement(i,{className:"xh-tabbar-content",style:{width:"".concat(100*m.length,"%"),height:I+B?"".concat(I+B,"px"):"auto"}},C&&e.createElement(i,{className:"xh-tabbar-content-slot",ref:F},C),m.map((function(t,n){return e.createElement(i,{key:n,ref:function(t){return _.current[n]=t},className:c("xh-tabbar-content-item",{"xh-tabbar-content-item-dispaly":A!==n&&!h,"xh-tabbar-content-item-active":A===n}),style:{transform:h?"translateX(-".concat(100*A,"%)"):""}},t.props.children)}))))};s.Item=l;export{s 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, {
|
|
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 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","ref","style","color","onClick","handleClick","TabItemComponent","title","classNames","background","concat","transform","WebkitTransform","length","Item"],"mappings":"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"}
|