taro-react-uilib 1.3.0-9 → 1.3.1

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 } 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 *\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}\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  } = props;\n\n  const [selectIndex, setSelectIndex] = useState(initIndex);\n  const [tabWdith, setTabWdith] = useState(0);\n  const [tabContentHeight, setTabContentHeight] = 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\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        const height: number = res[1][selectIndex].height;\n        setTabContentHeight(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.exec(res => {\n      if (!res[0][index]) return;\n      const height: number = res[0][index].height;\n      setTabContentHeight(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: tabContentHeight ? `${tabContentHeight}px` : \"auto\",\n        }}\n      >\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","_g","__read","useState","selectIndex","setSelectIndex","_h","tabWdith","setTabWdith","_j","tabContentHeight","setTabContentHeight","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":"qQAiCM,IAAAA,EAAkC,SAAAC,GAEpC,IAAAC,EAOED,EAAKE,SAPPA,OAAW,IAAAD,EAAA,GAAEA,EACbE,EAMEH,EANcI,SAAhBA,OAAQ,IAAAD,GAAQA,EAChBE,EAKEL,EAAKM,UALPA,OAAY,IAAAD,EAAA,EAACA,EACbE,EAIEP,YAJFQ,OAAY,IAAAD,EAAA,UAASA,EACrBE,EAGET,EAHuBU,iBAAzBA,OAAgB,IAAAD,EAAG,OAAMA,EACzBE,EAEEX,EAAKY,kBAFPA,OAAoB,IAAAD,EAAA,OAAMA,EAC1BE,EACEb,EAAKa,SAEHC,EAAAC,EAAgCC,EAASV,GAAU,GAAlDW,EAAWH,EAAA,GAAEI,OACdC,EAAAJ,EAA0BC,EAAS,GAAE,GAApCI,EAAQD,EAAA,GAAEE,OACXC,EAAAP,EAA0CC,EAAS,GAAE,GAApDO,EAAgBD,EAAA,GAAEE,OAEzBC,GAAU,WACR,IAAMC,EAAQC,YAAW,WACvB,IAAMC,EAAQC,IACdD,EAAME,UAAU,uBAAuBC,qBACvCH,EAAME,UAAU,2BAA2BC,qBAE3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGhB,GAAZ,CACA,IAAMiB,EAAgBD,EAAI,GAAGhB,GAAaiB,MAG1C,GAFAb,EAAYa,GAEPD,EAAI,GAAGhB,GAAZ,CACA,IAAMkB,EAAiBF,EAAI,GAAGhB,GAAakB,OAC3CX,EAAoBW,GACpBC,aAAaV,EAHoB,CAJA,CAQnC,GACD,GAAE,IAEL,GAAG,CAACT,EAAaf,IAEjB,IAcQmC,EAeR,OACEC,EAACC,cAAAC,EAAK,CAAAC,UAAU,aACdH,EAAAC,cAACC,EAAI,CAACC,UAAU,iBACbvC,EAASwC,KAAI,SAACC,EAAOC,GAAU,OAC9BN,EAAAC,cAACC,EACC,CAAAK,IAAKD,EACLH,UAAU,qBACVK,MAAO,CACLC,MACE9B,IAAgB2B,EAAQlC,EAAmBE,GAE/CoC,QAAS,WAAM,OAxCL,SAACJ,GACnB1B,EAAe0B,GACf,IAAMhB,EAAQC,IACdD,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGW,GAAZ,CACA,IAAMT,EAAiBF,EAAI,GAAGW,GAAOT,OACrCX,EAAoBW,EAFO,CAG7B,IAEAtB,GAAYA,EAAS+B,EACvB,CA6ByBK,CAAYL,KAE1BD,EAAM3C,MAAMkD,iBACTP,EAAM3C,MAAMkD,iBACZP,EAAM3C,MAAMmD,WA9BlBd,EAAejB,EAAW,EAAIH,EAAcG,EAEhDkB,EACEC,cAAA,MAAA,CAAAE,UAAWW,EAAW,qBAAsB,CAC1C,4BAA6BhD,IAE/B0C,MAAO,CACLO,WAAY,GAAGC,OAAA9C,GACf+C,UAAW,cAAcD,OAAAjB,EAA+B,6BACxDmB,gBAAiB,cAAcF,OAAAjB,EAA+B,kCA0BlEC,EAAAC,cAACC,EACC,CAAAC,UAAU,oBACVK,MAAO,CACLZ,MAAO,GAAGoB,OAAkB,IAAlBpD,EAASuD,OAAe,KAClCtB,OAAQZ,EAAmB,GAAG+B,OAAA/B,EAAoB,MAAG,SAGtDrB,EAASwC,KAAI,SAACC,EAAOC,GAAU,OAC9BN,gBAACE,EAAI,CACHK,IAAKD,EACLH,UAAWW,EAAW,yBAA0B,CAC9C,iCACEnC,IAAgB2B,IAAUxC,EAC5B,gCAAiCa,IAAgB2B,IAEnDE,MAAO,CACLS,UAAWnD,EAAW,eAAAkD,OAA6B,IAAdrC,EAAiB,MAAO,KAG9D0B,EAAM3C,MAAME,SAEhB,KAIT,EAEAH,EAAO2D,KAAOA"}
+{"version":3,"file":"Tabbar.js","sources":["../../../../src/components/Tabbar/tabbar/Tabbar.tsx"],"sourcesContent":["import React, { FC, ReactElement, useEffect, useState } from \"react\";\nimport { createSelectorQuery } from \"@tarojs/taro\";\nimport { View } from \"@tarojs/components\";\nimport classNames from \"classnames\";\nimport Item from \"./TabItem\";\n\nimport \"./index.scss\";\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 *\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}\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  } = props;\n\n  const [selectIndex, setSelectIndex] = useState(initIndex);\n  const [tabWdith, setTabWdith] = useState(0);\n  const [tabContentHeight, setTabContentHeight] = 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\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        const height: number = res[1][selectIndex].height;\n        setTabContentHeight(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.exec(res => {\n      if (!res[0][index]) return;\n      const height: number = res[0][index].height;\n      setTabContentHeight(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: tabContentHeight ? `${tabContentHeight}px` : \"auto\",\n        }}\n      >\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","_g","__read","useState","selectIndex","setSelectIndex","_h","tabWdith","setTabWdith","_j","tabContentHeight","setTabContentHeight","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":"qQAmCM,IAAAA,EAAkC,SAAAC,GAEpC,IAAAC,EAOED,EAAKE,SAPPA,OAAW,IAAAD,EAAA,GAAEA,EACbE,EAMEH,EANcI,SAAhBA,OAAQ,IAAAD,GAAQA,EAChBE,EAKEL,EAAKM,UALPA,OAAY,IAAAD,EAAA,EAACA,EACbE,EAIEP,YAJFQ,OAAY,IAAAD,EAAA,UAASA,EACrBE,EAGET,EAHuBU,iBAAzBA,OAAgB,IAAAD,EAAG,OAAMA,EACzBE,EAEEX,EAAKY,kBAFPA,OAAoB,IAAAD,EAAA,OAAMA,EAC1BE,EACEb,EAAKa,SAEHC,EAAAC,EAAgCC,EAASV,GAAU,GAAlDW,EAAWH,EAAA,GAAEI,OACdC,EAAAJ,EAA0BC,EAAS,GAAE,GAApCI,EAAQD,EAAA,GAAEE,OACXC,EAAAP,EAA0CC,EAAS,GAAE,GAApDO,EAAgBD,EAAA,GAAEE,OAEzBC,GAAU,WACR,IAAMC,EAAQC,YAAW,WACvB,IAAMC,EAAQC,IACdD,EAAME,UAAU,uBAAuBC,qBACvCH,EAAME,UAAU,2BAA2BC,qBAE3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGhB,GAAZ,CACA,IAAMiB,EAAgBD,EAAI,GAAGhB,GAAaiB,MAG1C,GAFAb,EAAYa,GAEPD,EAAI,GAAGhB,GAAZ,CACA,IAAMkB,EAAiBF,EAAI,GAAGhB,GAAakB,OAC3CX,EAAoBW,GACpBC,aAAaV,EAHoB,CAJA,CAQnC,GACD,GAAE,IAEL,GAAG,CAACT,EAAaf,IAEjB,IAcQmC,EAeR,OACEC,EAACC,cAAAC,EAAK,CAAAC,UAAU,aACdH,EAAAC,cAACC,EAAI,CAACC,UAAU,iBACbvC,EAASwC,KAAI,SAACC,EAAOC,GAAU,OAC9BN,EAAAC,cAACC,EACC,CAAAK,IAAKD,EACLH,UAAU,qBACVK,MAAO,CACLC,MACE9B,IAAgB2B,EAAQlC,EAAmBE,GAE/CoC,QAAS,WAAM,OAxCL,SAACJ,GACnB1B,EAAe0B,GACf,IAAMhB,EAAQC,IACdD,EAAME,UAAU,2BAA2BC,qBAC3CH,EAAMI,MAAK,SAAAC,GACT,GAAKA,EAAI,GAAGW,GAAZ,CACA,IAAMT,EAAiBF,EAAI,GAAGW,GAAOT,OACrCX,EAAoBW,EAFO,CAG7B,IAEAtB,GAAYA,EAAS+B,EACvB,CA6ByBK,CAAYL,KAE1BD,EAAM3C,MAAMkD,iBACTP,EAAM3C,MAAMkD,iBACZP,EAAM3C,MAAMmD,WA9BlBd,EAAejB,EAAW,EAAIH,EAAcG,EAEhDkB,EACEC,cAAA,MAAA,CAAAE,UAAWW,EAAW,qBAAsB,CAC1C,4BAA6BhD,IAE/B0C,MAAO,CACLO,WAAY,GAAGC,OAAA9C,GACf+C,UAAW,cAAcD,OAAAjB,EAA+B,6BACxDmB,gBAAiB,cAAcF,OAAAjB,EAA+B,kCA0BlEC,EAAAC,cAACC,EACC,CAAAC,UAAU,oBACVK,MAAO,CACLZ,MAAO,GAAGoB,OAAkB,IAAlBpD,EAASuD,OAAe,KAClCtB,OAAQZ,EAAmB,GAAG+B,OAAA/B,EAAoB,MAAG,SAGtDrB,EAASwC,KAAI,SAACC,EAAOC,GAAU,OAC9BN,gBAACE,EAAI,CACHK,IAAKD,EACLH,UAAWW,EAAW,yBAA0B,CAC9C,iCACEnC,IAAgB2B,IAAUxC,EAC5B,gCAAiCa,IAAgB2B,IAEnDE,MAAO,CACLS,UAAWnD,EAAW,eAAAkD,OAA6B,IAAdrC,EAAiB,MAAO,KAG9D0B,EAAM3C,MAAME,SAEhB,KAIT,EAEAH,EAAO2D,KAAOA"}

package/dist/components/src/index.js

@@ -1,2 +1,2 @@
-export{default as XHButton}from"../Button/index.js";export{default as XHPage}from"../Page/index.js";export{default as XHLoading}from"../Loading/index.js";export{default as XHBankIcon}from"../BankIcon/index.js";export{default as XHCaptcha}from"../Captcha/index.js";export{default as XHFormInput}from"../FormInput/index.js";export{default as XHList}from"../List/index.js";export{default as XHMask}from"../Mask/index.js";export{default as XHImage}from"../Image/index.js";export{default as XHDialog}from"../Dialog/index.js";export{default as XHNumberKeyboard}from"../NumberKeyboard/index.js";export{default as XHPasswordInput}from"../PasswordInput/index.js";export{default as XHProgress}from"../Progress/index.js";export{default as XHToast}from"../Toast/index.js";export{default as XHDialogRef}from"../DialogRef/index.js";export{default as XHTabbar}from"../Tabbar/index.js";export{default as XHPopup}from"../Popup/index.js";export{default as XHPicker}from"../Picker/index.js";export{default as XHSpace}from"../Space/index.js";export{default as ThemeProvider}from"../ThemeProvider/index.js";export{default as XHCheckbox}from"../Checkbox/index.js";export{default as XHRadio}from"../Radio/index.js";export{default as XHStep}from"../Step/index.js";export{default as XHBadge}from"../Badge/index.js";export{default as XHAmountInput}from"../AmountInput/index.js";export{default as XHAmountKeyboard}from"../AmountKeyboard/index.js";export{default as XHCollapse}from"../Collapse/index.js";export{default as XHNavBar}from"../NavBar/index.js";export{default as XHIcon}from"../Icon/index.js";export{default as XHActionSheet}from"../ActionSheet/index.js";export{default as XHRank}from"../Rank/index.js";
+export{default as XHButton}from"../Button/index.js";export{default as XHPage}from"../Page/index.js";export{default as XHLoading}from"../Loading/index.js";export{default as XHBankIcon}from"../BankIcon/index.js";export{default as XHCaptcha}from"../Captcha/index.js";export{default as XHFormInput}from"../FormInput/index.js";export{default as XHList}from"../List/index.js";export{default as XHMask}from"../Mask/index.js";export{default as XHImage}from"../Image/index.js";export{default as XHDialog}from"../Dialog/index.js";export{default as XHNumberKeyboard}from"../NumberKeyboard/index.js";export{default as XHPasswordInput}from"../PasswordInput/index.js";export{default as XHProgress}from"../Progress/index.js";export{default as XHToast}from"../Toast/index.js";export{default as XHDialogRef}from"../DialogRef/index.js";export{default as XHTabbar}from"../Tabbar/index.js";export{default as XHPopup}from"../Popup/index.js";export{default as XHPicker}from"../Picker/index.js";export{default as XHSpace}from"../Space/index.js";export{default as ThemeProvider}from"../ThemeProvider/index.js";export{default as XHCheckbox}from"../Checkbox/index.js";export{default as XHRadio}from"../Radio/index.js";export{default as XHStep}from"../Step/index.js";export{default as XHBadge}from"../Badge/index.js";export{default as XHAmountInput}from"../AmountInput/index.js";export{default as XHAmountKeyboard}from"../AmountKeyboard/index.js";export{default as XHCollapse}from"../Collapse/index.js";export{default as XHNavBar}from"../NavBar/index.js";
 //# sourceMappingURL=index.js.map