taro-react-uilib 1.3.4-8 → 1.3.4

package/dist/components/Tabbar/tabbar/Tabbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, { FC, ReactElement, useEffect, useState, ReactNode } 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}\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  } = 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  useEffect(() => {\n    const timer = setTimeout(() => {\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][selectIndex]) return;\n      setTabSlotHeight(res[1][selectIndex].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            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 && <View className=\"xh-tabbar-content-slot\">{content}</View>}\n        {children.map((child, index) => (\n          <View\n            key={index}\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","initIndex","_d","lineColor","_e","titleActiveColor","_f","titleInctiveColor","onChange","content","_g","__read","useState","selectIndex","setSelectIndex","_h","tabWdith","setTabWdith","_j","tabContentHeight","setTabContentHeight","_k","tabSlotHeight","setTabSlotHeight","useEffect","timer","setTimeout","query","createSelectorQuery","selectAll","boundingClientRect","exec","res","width","height","clearTimeout","left","React","createElement","View","className","map","child","index","key","style","color","onClick","handleClick","TabItemComponent","title","classNames","background","concat","transform","WebkitTransform","length","Item"],"mappings":"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"}
+{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, { FC, ReactElement, useEffect, useState, ReactNode } 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  useEffect(() => {\n    const timer = setTimeout(() => {\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            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 && <View className=\"xh-tabbar-content-slot\">{content}</View>}\n        {children.map((child, index) => (\n          <View\n            key={index}\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","useEffect","timer","setTimeout","query","createSelectorQuery","selectAll","boundingClientRect","exec","res","width","height","clearTimeout","left","React","createElement","View","className","map","child","index","key","style","color","onClick","handleClick","TabItemComponent","title","classNames","background","concat","transform","WebkitTransform","length","Item"],"mappings":"qQAoCM,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,OAEtBC,GAAU,WACR,IAAMC,EAAQC,YAAW,WACvB,IAAMC,EAAQC,IACdD,EAAME,UAAU,uBAAuBC,qBACvCH,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAME,UAAU,2BAA2BC,qBAE3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGpB,GAAZ,CACA,IAAMqB,EAAgBD,EAAI,GAAGpB,GAAaqB,MAC1ChB,EAAYgB,GAEPD,EAAI,GAAGpB,KACZQ,EAAoBY,EAAI,GAAGpB,GAAasB,QAEnCF,EAAI,GAAGpB,KACZW,EAAiBS,EAAI,GAAGpB,GAAasB,QACrCC,aAAaV,IAToB,CAUnC,GACD,GAAE,IAEL,GAAG,CAACb,EAAaZ,IAEjB,IAiBQoC,EAeR,OACEC,EAACC,cAAAC,EAAK,CAAAC,UAAU,aACdH,EAAAC,cAACC,EAAI,CAACC,UAAU,iBACbxC,EAASyC,KAAI,SAACC,EAAOC,GAAU,OAC9BN,EAAAC,cAACC,EACC,CAAAK,IAAKD,EACLH,UAAU,qBACVK,MAAO,CACLC,MACElC,IAAgB+B,EAAQrC,EAAmBE,GAE/CuC,QAAS,WAAM,OA3CL,SAACJ,GAEnB,IAAMhB,EAAQC,IACdD,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGW,GAAZ,CACA,IAAMT,EAAiBF,EAAI,GAAGW,GAAOT,OACrCd,EAAoBc,GACfF,EAAI,GAAGW,IACZpB,EAAiBS,EAAI,GAAGW,GAAOT,OAJJ,CAK7B,IAEAzB,GAAYA,EAASkC,EACvB,CA6ByBK,CAAYL,KAE1BD,EAAM5C,MAAMmD,iBACTP,EAAM5C,MAAMmD,iBACZP,EAAM5C,MAAMoD,WA9BlBd,EAAepB,EAAW,EAAIJ,EAAcI,EAEhDqB,EACEC,cAAA,MAAA,CAAAE,UAAWW,EAAW,qBAAsB,CAC1C,4BAA6BjD,IAE/B2C,MAAO,CACLO,WAAY,GAAGC,OAAAjD,GACfkD,UAAW,cAAcD,OAAAjB,EAA+B,6BACxDmB,gBAAiB,cAAcF,OAAAjB,EAA+B,kCA0BlEC,EAAAC,cAACC,EACC,CAAAC,UAAU,oBACVK,MAAO,CACLZ,MAAO,GAAGoB,OAAkB,IAAlBrD,EAASwD,OAAe,KAClCtB,OACEf,EAAmBG,EACf,GAAA+B,OAAGlC,EAAmBG,EAAiB,MACvC,SAGPZ,GAAW2B,gBAACE,EAAI,CAACC,UAAU,0BAA0B9B,GACrDV,EAASyC,KAAI,SAACC,EAAOC,GAAU,OAC9BN,EAAAC,cAACC,EACC,CAAAK,IAAKD,EACLH,UAAWW,EAAW,yBAA0B,CAC9C,iCACEvC,IAAgB+B,IAAUzC,EAC5B,gCAAiCU,IAAgB+B,IAEnDE,MAAO,CACLS,UAAWpD,EAAW,eAAAmD,OAA6B,IAAdzC,EAAiB,MAAO,KAG9D8B,EAAM5C,MAAME,SAEhB,KAIT,EAEAH,EAAO4D,KAAOA"}