@xhsreds/reds-rn-next 0.1.2 → 0.1.3

package/lib/esm/components/TabBar/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","sources":["../../../../src/components/TabBar/TabBar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport { View, Text, TouchableWithoutFeedback, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsTabBar, TabBarDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport Icon from \"../Icon\";\nimport { DataType, RedsBadge } from \"./interface\";\nimport Badge from \"../Badge\";\n/**\n * 默认icon大小\n */\nconst defaultIconSize = 20;\n\nconst TabBar = (props: RedsTabBar) => {\n  /**\n   * 计算文字class\n   * @param item\n   */\n  const getTextClass = (item: DataType) => {\n    return item?.iconProps?.icon\n      ? props.activeTab === item.key\n        ? styles.activeIconText\n        : styles.iconText\n      : props.activeTab === item.key\n        ? styles.activeText\n        : styles.text;\n  };\n\n  /**\n   * 计算文字颜色\n   * @param item\n   */\n  const getTextColor = (item: DataType) => {\n    return {\n      color: props.activeTab === item.key ? item.activeColor || \"rgba(0,0,0)\" : item.normalColor || \"rgba(0,0,0,0.45)\",\n    };\n  };\n\n  /**\n   * 计算Icon颜色\n   */\n  const getIconColor = (item: DataType) => {\n    return (props.activeTab === item.key ? item.activeColor : item.normalColor) || item?.iconProps?.fill;\n  };\n\n  /**\n   * 触发点击事件\n   */\n  const handleTabChange = (item: DataType) => {\n    props?.onChange?.(item.key);\n  };\n\n  /**\n   *  渲染的tab数据\n   */\n\n  const renderTabs = useMemo(() => {\n    if (props.customTabBar) {\n      /** 记录插入位置 */\n      const customIdx = Math.floor(props.list.length / 2);\n      /** 插入数据 */\n      return props.list.reduce((prev: DataType[], cur: DataType, index: number) => {\n        return (index === customIdx ? [...prev, props.customTabBar, cur] : [...prev, cur]) as DataType[];\n      }, [] as DataType[]);\n    } else {\n      return props.list;\n    }\n  }, [props.list, props.customTabBar]);\n\n  /**\n   * 容器\n   */\n  const Wrapper = (wrapperProps: { badgeProps: RedsBadge; children: React.ReactNode }) => {\n    return props?.badge ? (\n      <View style={styles.badgeWrapper}>\n        <Badge {...wrapperProps.badgeProps}>{wrapperProps.children}</Badge>\n      </View>\n    ) : (\n      wrapperProps.children\n    );\n  };\n\n  return (\n    <View style={[styles.TabBarContainer, props.containerStyles]}>\n      {renderTabs.map((item) => {\n        return (\n          <TouchableWithoutFeedback onPress={() => handleTabChange(item)} key={item.key}>\n            <View style={styles.TabItemContainer}>\n              <Wrapper badgeProps={item.badgeProps || {}} key={item.key}>\n                <View style={styles.flexCenter}>\n                  {item.iconProps?.icon ? (\n                    <Icon\n                      icon={item.iconProps?.icon}\n                      fill={getIconColor(item) || \"pink\"}\n                      size={item?.iconProps?.size || defaultIconSize}\n                      onClick={() => handleTabChange(item)}\n                    />\n                  ) : (\n                    <></>\n                  )}\n                  {item.text ? <Text style={[getTextClass(item), getTextColor(item)]}>{item.text}</Text> : <></>}\n                </View>\n              </Wrapper>\n            </View>\n          </TouchableWithoutFeedback>\n        );\n      })}\n    </View>\n  );\n};\n\nTabBar.defaultProps = TabBarDefaultProps;\n\nexport default TabBar;\n"],"names":["defaultIconSize","TabBar","props","getTextClass","item","_item$iconProps","iconProps","icon","activeTab","key","styles","activeIconText","iconText","activeText","text","getTextColor","color","activeColor","normalColor","getIconColor","_item$iconProps2","fill","handleTabChange","_props$onChange","onChange","call","renderTabs","useMemo","customTabBar","customIdx","Math","floor","list","length","reduce","prev","cur","index","concat","_toConsumableArray","Wrapper","wrapperProps","badge","React","createElement","View","style","badgeWrapper","Badge","_objectSpread","badgeProps","children","TabBarContainer","containerStyles","map","_item$iconProps3","_item$iconProps4","_item$iconProps5","TouchableWithoutFeedback","onPress","TabItemContainer","flexCenter","Icon","size","onClick","Text","Fragment","defaultProps","TabBarDefaultProps"],"mappings":";;;;;;;;;;;;AAUA,IAAMA,eAAkB,GAAA,EAAA,CAAA;AAExB,IAAMC,MAAA,GAAS,SAATA,MAAAA,CAAUC,KAAsB,EAAA;AAK9B,EAAA,IAAAC,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,IAAmB,EAAA;AAAA,IAAA,IAAAC,eAAA,CAAA;IACvC,OAAOD,iBAAAA,sCAAAA,KAAME,SAAW,MAAA,IAAA,IAAAD,eAAA,KAAjBA,KAAAA,CAAAA,IAAAA,eAAA,CAAiBE,IAAA,GACpBL,KAAM,CAAAM,SAAA,KAAcJ,KAAKK,GACvB,GAAAC,MAAA,CAAOC,cACP,GAAAD,MAAA,CAAOE,WACTV,KAAM,CAAAM,SAAA,KAAcJ,KAAKK,GACvB,GAAAC,MAAA,CAAOG,aACPH,MAAO,CAAAI,IAAA,CAAA;GACf,CAAA;AAMM,EAAA,IAAAC,YAAA,GAAe,SAAfA,YAAAA,CAAgBX,IAAmB,EAAA;IAChC,OAAA;AACLY,MAAAA,KAAA,EAAOd,MAAMM,SAAc,KAAAJ,IAAA,CAAKK,MAAML,IAAK,CAAAa,WAAA,IAAe,aAAgB,GAAAb,IAAA,CAAKc,WAAe,IAAA,kBAAA;KAChG,CAAA;GACF,CAAA;AAKM,EAAA,IAAAC,YAAA,GAAe,SAAfA,YAAAA,CAAgBf,IAAmB,EAAA;AAAA,IAAA,IAAAgB,gBAAA,CAAA;AAC/B,IAAA,OAAA,CAAAlB,KAAA,CAAMM,cAAcJ,IAAK,CAAAK,GAAA,GAAML,KAAKa,WAAc,GAAAb,IAAA,CAAKc,WAAgB,MAAAd,IAAA,KAAA,IAAA,IAAAA,IAAA,KAAA,KAAA,CAAA,IAAA,CAAAgB,gBAAA,GAAAhB,IAAA,CAAME,SAAW,MAAAc,IAAAA,IAAAA,gBAAA,KAAjBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAA,CAAiBC,IAAA,CAAA,CAAA;GAClG,CAAA;AAKM,EAAA,IAAAC,eAAA,GAAkB,SAAlBA,eAAAA,CAAmBlB,IAAmB,EAAA;AAAA,IAAA,IAAAmB,eAAA,CAAA;IACnCrB,KAAA,KAAA,IAAA,IAAAA,KAAA,KAAAqB,KAAAA,CAAAA,IAAAA,CAAAA,eAAA,GAAArB,KAAA,CAAAsB,QAAA,MAAAD,IAAAA,IAAAA,eAAA,eAAAA,eAAA,CAAAE,IAAA,CAAAvB,KAAA,EAAWE,KAAKK,GAAG,CAAA,CAAA;GAC5B,CAAA;AAMM,EAAA,IAAAiB,UAAA,GAAaC,QAAQ,YAAM;IAC/B,IAAIzB,MAAM0B,YAAc,EAAA;AAEtB,MAAA,IAAMC,YAAYC,IAAK,CAAAC,KAAA,CAAM7B,KAAM,CAAA8B,IAAA,CAAKC,SAAS,CAAC,CAAA,CAAA;AAElD,MAAA,OAAO/B,MAAM8B,IAAK,CAAAE,MAAA,CAAO,UAACC,IAAA,EAAkBC,KAAeC,KAAkB,EAAA;QAC3E,OAAQA,KAAU,KAAAR,SAAA,GAAA,EAAA,CAAAS,MAAA,CAAAC,kBAAA,CAAgBJ,IAAM,CAAAjC,EAAAA,CAAAA,KAAA,CAAM0B,YAAc,EAAAQ,GAAG,CAAA,CAAA,GAAA,EAAA,CAAAE,MAAA,CAAAC,kBAAA,CAAQJ,IAAA,CAAMC,EAAAA,CAAAA,GAAG,CAAA,CAAA,CAAA;OAClF,EAAG,EAAgB,CAAA,CAAA;AACrB,KAAO,MAAA;MACL,OAAOlC,KAAM,CAAA8B,IAAA,CAAA;AACf,KAAA;KACC,CAAC9B,KAAA,CAAM8B,IAAM,EAAA9B,KAAA,CAAM0B,YAAY,CAAC,CAAA,CAAA;AAK7B,EAAA,IAAAY,OAAA,GAAU,SAAVA,OAAAA,CAAWC,YAAuE,EAAA;AACtF,IAAA,OAAOvC,kBAAAA,oBAAAA,MAAOwC,KACZ,kBAAAC,cAAA,CAAAC,aAAA,CAACC,IAAK,EAAA;MAAAC,KAAA,EAAOpC,OAAOqC,YAAAA;KAClB,iBAAAJ,cAAA,CAAAC,aAAA,CAACI,KAAO,EAAAC,cAAA,CAAGR,EAAAA,EAAAA,aAAaS,UAAa,CAAA,EAAAT,YAAA,CAAaU,QAAS,CAC7D,IAEAV,YAAa,CAAAU,QAAA,CAAA;GAEjB,CAAA;AAEA,EAAA,sBACGR,cAAA,CAAAC,aAAA,CAAAC,IAAA,EAAA;IAAKC,KAAO,EAAA,CAACpC,MAAO,CAAA0C,eAAA,EAAiBlD,KAAM,CAAAmD,eAAe,CAAA;AACxD,GAAA,EAAA3B,UAAA,CAAW4B,GAAI,CAAA,UAAClD,IAAS,EAAA;AAAA,IAAA,IAAAmD,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,CAAA;AACxB,IAAA,sBACGd,cAAA,CAAAC,aAAA,CAAAc,wBAAA,EAAA;MAAyBC,OAAS,EAAA,SAATA,OAASA,GAAA;QAAA,OAAMrC,gBAAgBlB,IAAI,CAAA,CAAA;AAAA,OAAA;MAAGK,GAAK,EAAAL,IAAA,CAAKK,GAAAA;AACxE,KAAA,iBAAAkC,cAAA,CAAAC,aAAA,CAACC,IAAK,EAAA;MAAAC,KAAA,EAAOpC,OAAOkD,gBAAAA;AAClB,KAAA,iBAAAjB,cAAA,CAAAC,aAAA,CAACJ,OAAQ,EAAA;AAAAU,MAAAA,UAAA,EAAY9C,IAAK,CAAA8C,UAAA,IAAc,EAAC;MAAGzC,KAAKL,IAAK,CAAAK,GAAAA;AAAA,KAAA,iBACnDkC,cAAA,CAAAC,aAAA,CAAAC,IAAA,EAAA;MAAKC,KAAO,EAAApC,MAAA,CAAOmD,UAAAA;KACjB,EAAA,CAAAN,gBAAA,GAAAnD,IAAA,CAAKE,sDAALiD,gBAAA,CAAgBhD,IACf,kBAAAoC,cAAA,CAAAC,aAAA,CAACkB,IAAA,EAAA;MACCvD,IAAA,EAAA,CAAAiD,gBAAA,GAAMpD,KAAKE,SAAW,MAAA,IAAA,IAAAkD,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,gBAAA,CAAgBjD,IAAA;AACtBc,MAAAA,IAAA,EAAMF,YAAa,CAAAf,IAAI,CAAK,IAAA,MAAA;AAC5B2D,MAAAA,IAAA,EAAM,CAAA3D,IAAM,aAANA,IAAM,KAAA,KAAA,CAAA,IAAA,CAAAqD,gBAAA,GAANrD,IAAM,CAAAE,SAAA,cAAAmD,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,gBAAA,CAAiBM,IAAQ,KAAA/D,eAAA;MAC/BgE,OAAA,EAAS,SAATA,OAAAA,GAAA;QAAA,OAAe1C,eAAA,CAAgBlB,IAAI,CAAA,CAAA;AAAA,OAAA;KACrC,CAAA,4EAEE,CAEH,EAAAA,IAAA,CAAKU,sBAAQ6B,cAAA,CAAAC,aAAA,CAAAqB,IAAA,EAAA;MAAKnB,KAAO,EAAA,CAAC3C,YAAa,CAAAC,IAAI,GAAGW,YAAa,CAAAX,IAAI,CAAC,CAAA;KAAA,EAAIA,IAAK,CAAAU,IAAK,mBAAY6B,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAuB,QAAA,EAAA,IAAA,CAC7F,CACF,CACF,CACF,CAAA,CAAA;AAEJ,GAAC,CACH,CAAA,CAAA;AAEJ,EAAA;AAEAjE,MAAA,CAAOkE,YAAe,GAAAC,kBAAA;;;;"}
+{"version":3,"file":"TabBar.js","sources":["../../../../src/components/TabBar/TabBar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport { View, Text, TouchableWithoutFeedback, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsTabBar, TabBarDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport Icon from \"../Icon\";\nimport { DataType, RedsBadge } from \"./interface\";\nimport Badge from \"../Badge\";\n/**\n * 默认icon大小\n */\nconst defaultIconSize = 20;\n\nconst TabBar = (props: RedsTabBar) => {\n  /**\n   *  渲染的tab数据\n   */\n\n  const renderTabs = useMemo(() => {\n    if (props.customTabBar) {\n      /** 记录插入位置 */\n      const customIdx = Math.floor(props.list.length / 2);\n      /** 插入数据 */\n      return props.list.reduce((prev: DataType[], cur: DataType, index: number) => {\n        return (index === customIdx ? [...prev, props.customTabBar, cur] : [...prev, cur]) as DataType[];\n      }, [] as DataType[]);\n    } else {\n      return props.list;\n    }\n  }, [props.list, props.customTabBar]);\n\n  /**\n   * 计算文字class\n   * @param item\n   */\n  const getTextClass = (item: DataType) => {\n    return item?.iconProps?.icon\n      ? props.activeTab === item.key\n        ? styles.activeIconText\n        : styles.iconText\n      : props.activeTab === item.key\n        ? styles.activeText\n        : styles.text;\n  };\n\n  /**\n   * 计算文字颜色\n   * @param item\n   */\n  const getTextColor = (item: DataType) => {\n    return {\n      color: props.activeTab === item.key ? item.activeColor || \"rgba(0,0,0)\" : item.normalColor || \"rgba(0,0,0,0.45)\",\n    };\n  };\n\n  /**\n   * 计算Icon颜色\n   */\n  const getIconColor = (item: DataType) => {\n    return (props.activeTab === item.key ? item.activeColor : item.normalColor) || item?.iconProps?.fill;\n  };\n\n  /**\n   * 触发点击事件\n   */\n  const handleTabChange = (item: DataType) => {\n    props?.onChange?.(item.key);\n  };\n\n  /**\n   * 容器\n   */\n  const Wrapper = (wrapperProps: { badgeProps: RedsBadge; children: React.ReactNode }) => {\n    return props?.badge ? (\n      <View style={styles.badgeWrapper}>\n        <Badge {...wrapperProps.badgeProps}>{wrapperProps.children}</Badge>\n      </View>\n    ) : (\n      wrapperProps.children\n    );\n  };\n\n  return (\n    <View style={[styles.TabBarContainer, props.containerStyles]}>\n      {renderTabs.map((item) => {\n        return (\n          <TouchableWithoutFeedback onPress={() => handleTabChange(item)} key={item.key}>\n            <View style={styles.TabItemContainer}>\n              <Wrapper badgeProps={item.badgeProps || {}} key={item.key}>\n                <View style={styles.flexCenter}>\n                  {item.iconProps?.icon ? (\n                    <Icon\n                      icon={item.iconProps?.icon}\n                      fill={getIconColor(item) || \"pink\"}\n                      size={item?.iconProps?.size || defaultIconSize}\n                      onClick={() => handleTabChange(item)}\n                    />\n                  ) : (\n                    <></>\n                  )}\n                  {item.text ? <Text style={[getTextClass(item), getTextColor(item)]}>{item.text}</Text> : <></>}\n                </View>\n              </Wrapper>\n            </View>\n          </TouchableWithoutFeedback>\n        );\n      })}\n    </View>\n  );\n};\n\nTabBar.defaultProps = TabBarDefaultProps;\n\nexport default TabBar;\n"],"names":["defaultIconSize","TabBar","props","renderTabs","useMemo","customTabBar","customIdx","Math","floor","list","length","reduce","prev","cur","index","concat","_toConsumableArray","getTextClass","item","_item$iconProps","iconProps","icon","activeTab","key","styles","activeIconText","iconText","activeText","text","getTextColor","color","activeColor","normalColor","getIconColor","_item$iconProps2","fill","handleTabChange","_props$onChange","onChange","call","Wrapper","wrapperProps","badge","React","createElement","View","style","badgeWrapper","Badge","_objectSpread","badgeProps","children","TabBarContainer","containerStyles","map","_item$iconProps3","_item$iconProps4","_item$iconProps5","TouchableWithoutFeedback","onPress","TabItemContainer","flexCenter","Icon","size","onClick","Text","Fragment","defaultProps","TabBarDefaultProps"],"mappings":";;;;;;;;;;;;AAUA,IAAMA,eAAkB,GAAA,EAAA,CAAA;AAExB,IAAMC,MAAA,GAAS,SAATA,MAAAA,CAAUC,KAAsB,EAAA;AAK9B,EAAA,IAAAC,UAAA,GAAaC,QAAQ,YAAM;IAC/B,IAAIF,MAAMG,YAAc,EAAA;AAEtB,MAAA,IAAMC,YAAYC,IAAK,CAAAC,KAAA,CAAMN,KAAM,CAAAO,IAAA,CAAKC,SAAS,CAAC,CAAA,CAAA;AAElD,MAAA,OAAOR,MAAMO,IAAK,CAAAE,MAAA,CAAO,UAACC,IAAA,EAAkBC,KAAeC,KAAkB,EAAA;QAC3E,OAAQA,KAAU,KAAAR,SAAA,GAAA,EAAA,CAAAS,MAAA,CAAAC,kBAAA,CAAgBJ,IAAM,CAAAV,EAAAA,CAAAA,KAAA,CAAMG,YAAc,EAAAQ,GAAG,CAAA,CAAA,GAAA,EAAA,CAAAE,MAAA,CAAAC,kBAAA,CAAQJ,IAAA,CAAMC,EAAAA,CAAAA,GAAG,CAAA,CAAA,CAAA;OAClF,EAAG,EAAgB,CAAA,CAAA;AACrB,KAAO,MAAA;MACL,OAAOX,KAAM,CAAAO,IAAA,CAAA;AACf,KAAA;KACC,CAACP,KAAA,CAAMO,IAAM,EAAAP,KAAA,CAAMG,YAAY,CAAC,CAAA,CAAA;AAM7B,EAAA,IAAAY,YAAA,GAAe,SAAfA,YAAAA,CAAgBC,IAAmB,EAAA;AAAA,IAAA,IAAAC,eAAA,CAAA;IACvC,OAAOD,iBAAAA,sCAAAA,KAAME,SAAW,MAAA,IAAA,IAAAD,eAAA,KAAjBA,KAAAA,CAAAA,IAAAA,eAAA,CAAiBE,IAAA,GACpBnB,KAAM,CAAAoB,SAAA,KAAcJ,KAAKK,GACvB,GAAAC,MAAA,CAAOC,cACP,GAAAD,MAAA,CAAOE,WACTxB,KAAM,CAAAoB,SAAA,KAAcJ,KAAKK,GACvB,GAAAC,MAAA,CAAOG,aACPH,MAAO,CAAAI,IAAA,CAAA;GACf,CAAA;AAMM,EAAA,IAAAC,YAAA,GAAe,SAAfA,YAAAA,CAAgBX,IAAmB,EAAA;IAChC,OAAA;AACLY,MAAAA,KAAA,EAAO5B,MAAMoB,SAAc,KAAAJ,IAAA,CAAKK,MAAML,IAAK,CAAAa,WAAA,IAAe,aAAgB,GAAAb,IAAA,CAAKc,WAAe,IAAA,kBAAA;KAChG,CAAA;GACF,CAAA;AAKM,EAAA,IAAAC,YAAA,GAAe,SAAfA,YAAAA,CAAgBf,IAAmB,EAAA;AAAA,IAAA,IAAAgB,gBAAA,CAAA;AAC/B,IAAA,OAAA,CAAAhC,KAAA,CAAMoB,cAAcJ,IAAK,CAAAK,GAAA,GAAML,KAAKa,WAAc,GAAAb,IAAA,CAAKc,WAAgB,MAAAd,IAAA,KAAA,IAAA,IAAAA,IAAA,KAAA,KAAA,CAAA,IAAA,CAAAgB,gBAAA,GAAAhB,IAAA,CAAME,SAAW,MAAAc,IAAAA,IAAAA,gBAAA,KAAjBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAA,CAAiBC,IAAA,CAAA,CAAA;GAClG,CAAA;AAKM,EAAA,IAAAC,eAAA,GAAkB,SAAlBA,eAAAA,CAAmBlB,IAAmB,EAAA;AAAA,IAAA,IAAAmB,eAAA,CAAA;IACnCnC,KAAA,KAAA,IAAA,IAAAA,KAAA,KAAAmC,KAAAA,CAAAA,IAAAA,CAAAA,eAAA,GAAAnC,KAAA,CAAAoC,QAAA,MAAAD,IAAAA,IAAAA,eAAA,eAAAA,eAAA,CAAAE,IAAA,CAAArC,KAAA,EAAWgB,KAAKK,GAAG,CAAA,CAAA;GAC5B,CAAA;AAKM,EAAA,IAAAiB,OAAA,GAAU,SAAVA,OAAAA,CAAWC,YAAuE,EAAA;AACtF,IAAA,OAAOvC,kBAAAA,oBAAAA,MAAOwC,KACZ,kBAAAC,cAAA,CAAAC,aAAA,CAACC,IAAK,EAAA;MAAAC,KAAA,EAAOtB,OAAOuB,YAAAA;KAClB,iBAAAJ,cAAA,CAAAC,aAAA,CAACI,KAAO,EAAAC,cAAA,CAAGR,EAAAA,EAAAA,aAAaS,UAAa,CAAA,EAAAT,YAAA,CAAaU,QAAS,CAC7D,IAEAV,YAAa,CAAAU,QAAA,CAAA;GAEjB,CAAA;AAEA,EAAA,sBACGR,cAAA,CAAAC,aAAA,CAAAC,IAAA,EAAA;IAAKC,KAAO,EAAA,CAACtB,MAAO,CAAA4B,eAAA,EAAiBlD,KAAM,CAAAmD,eAAe,CAAA;AACxD,GAAA,EAAAlD,UAAA,CAAWmD,GAAI,CAAA,UAACpC,IAAS,EAAA;AAAA,IAAA,IAAAqC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,CAAA;AACxB,IAAA,sBACGd,cAAA,CAAAC,aAAA,CAAAc,wBAAA,EAAA;MAAyBC,OAAS,EAAA,SAATA,OAASA,GAAA;QAAA,OAAMvB,gBAAgBlB,IAAI,CAAA,CAAA;AAAA,OAAA;MAAGK,GAAK,EAAAL,IAAA,CAAKK,GAAAA;AACxE,KAAA,iBAAAoB,cAAA,CAAAC,aAAA,CAACC,IAAK,EAAA;MAAAC,KAAA,EAAOtB,OAAOoC,gBAAAA;AAClB,KAAA,iBAAAjB,cAAA,CAAAC,aAAA,CAACJ,OAAQ,EAAA;AAAAU,MAAAA,UAAA,EAAYhC,IAAK,CAAAgC,UAAA,IAAc,EAAC;MAAG3B,KAAKL,IAAK,CAAAK,GAAAA;AAAA,KAAA,iBACnDoB,cAAA,CAAAC,aAAA,CAAAC,IAAA,EAAA;MAAKC,KAAO,EAAAtB,MAAA,CAAOqC,UAAAA;KACjB,EAAA,CAAAN,gBAAA,GAAArC,IAAA,CAAKE,sDAALmC,gBAAA,CAAgBlC,IACf,kBAAAsB,cAAA,CAAAC,aAAA,CAACkB,IAAA,EAAA;MACCzC,IAAA,EAAA,CAAAmC,gBAAA,GAAMtC,KAAKE,SAAW,MAAA,IAAA,IAAAoC,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,gBAAA,CAAgBnC,IAAA;AACtBc,MAAAA,IAAA,EAAMF,YAAa,CAAAf,IAAI,CAAK,IAAA,MAAA;AAC5B6C,MAAAA,IAAA,EAAM,CAAA7C,IAAM,aAANA,IAAM,KAAA,KAAA,CAAA,IAAA,CAAAuC,gBAAA,GAANvC,IAAM,CAAAE,SAAA,cAAAqC,gBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,gBAAA,CAAiBM,IAAQ,KAAA/D,eAAA;MAC/BgE,OAAA,EAAS,SAATA,OAAAA,GAAA;QAAA,OAAe5B,eAAA,CAAgBlB,IAAI,CAAA,CAAA;AAAA,OAAA;KACrC,CAAA,4EAEE,CAEH,EAAAA,IAAA,CAAKU,sBAAQe,cAAA,CAAAC,aAAA,CAAAqB,IAAA,EAAA;MAAKnB,KAAO,EAAA,CAAC7B,YAAa,CAAAC,IAAI,GAAGW,YAAa,CAAAX,IAAI,CAAC,CAAA;KAAA,EAAIA,IAAK,CAAAU,IAAK,mBAAYe,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAuB,QAAA,EAAA,IAAA,CAC7F,CACF,CACF,CACF,CAAA,CAAA;AAEJ,GAAC,CACH,CAAA,CAAA;AAEJ,EAAA;AAEAjE,MAAA,CAAOkE,YAAe,GAAAC,kBAAA;;;;"}

package/lib/esm/index.js

@@ -1,5 +1,9 @@
+export { default as ActionSheets } from './components/ActionSheets/ActionSheets.js';
+export { i as ActionSheetsType } from './_chunks/DHJk9lIr.js';
+export { default as Silder } from './components/Silder/Silder.js';
+export { i as SilderType } from './_chunks/RRfNwNcs.js';
 export { default as Sheets } from './components/Sheets/Sheets.js';
-export { i as SheetsType } from './_chunks/B3_9dzWY.js';
+export { i as SheetsType } from './_chunks/BJ2Kj1Vd.js';
 export { default as PickerView } from './components/PickerView/PickerView.js';
 export { i as PickerViewType } from './_chunks/BCi0K_XP.js';
 export { default as Picker } from './components/Picker/Picker.js';
@@ -73,15 +77,17 @@ export { default as Tab } from './components/Tab/Tab.js';
 export { i as TabType } from './_chunks/5aBuaARv.js';
 import 'react';
 import 'react-native';
+import './components/ActionSheets/styles.js';
 import './components/ConfigProvider/hooks/ConfigCache/ConfigCache.js';
 import './_chunks/D-HreRcG.js';
 import '@xhsreds/reds-token-next';
+import './components/Silder/styles.js';
 import './components/Sheets/styles.js';
+import '@xhs/reder-icon-svg';
 import './components/PickerView/styles.js';
 import './components/PickerView/Wheel.js';
 import './components/FAB/styles.js';
 import './components/Toast/Toast.js';
-import '@xhs/reder-icon-svg';
 import './components/Toast/styles.js';
 import './components/DropDown/styles.js';
 import './components/Progress/styles.js';

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/types/components/ActionSheets/ActionSheets.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { RedsActionSheets } from "./interface/index";
+declare const ActionSheets: {
+    (props: RedsActionSheets): React.JSX.Element;
+    defaultProps: {
+        data: never[];
+        visible: boolean;
+    };
+};
+export default ActionSheets;

package/lib/types/components/ActionSheets/demo/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/ActionSheets/index.d.ts

@@ -0,0 +1,4 @@
+import ActionSheets from "./ActionSheets";
+import * as ActionSheetsType from "./interface";
+export default ActionSheets;
+export { ActionSheets, ActionSheetsType };

package/lib/types/components/ActionSheets/interface/index.d.ts

@@ -0,0 +1,23 @@
+export interface ActionItem {
+    label: string;
+    value: string;
+    type?: ActionType;
+}
+export declare const enum ActionType {
+    normal = "normal",
+    invalid = "invalid",
+    primary = "primary"
+}
+export interface RedsActionSheets {
+    data: ActionItem[];
+    description?: string;
+    visible: boolean;
+    onClose: () => any;
+    onChange: (value: string) => any;
+}
+export interface RedsActionSheetsEvent {
+}
+export declare const ActionSheetsDefaultProps: {
+    data: never[];
+    visible: boolean;
+};

package/lib/types/components/ActionSheets/styles.d.ts

@@ -0,0 +1,51 @@
+declare const styles: {
+    ActionSheetsContainer: {
+        width: "100%";
+        overflowY: string;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    description: {
+        height: number;
+        boxSizing: string;
+        paddingLeft: number;
+        paddingRight: number;
+        width: "100%";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    descriptionText: {
+        fontSize: number;
+        fontWeight: "400";
+    };
+    action: {
+        height: number;
+        width: "100%";
+        paddingLeft: number;
+        paddingRight: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    actionText: {
+        fontSize: number;
+        fontWeight: "400";
+    };
+    cancel: {
+        height: number;
+        width: "100%";
+        paddingLeft: number;
+        paddingRight: number;
+        boxSizing: string;
+        fontSize: number;
+        fontWeight: number;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        marginTop: number;
+    };
+};
+export default styles;

package/lib/types/components/ActionSheets/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/ActionSheets/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/ActionSheets/test/paper.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/FAB/test/paper.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Sheets/Sheets.d.ts

@@ -1,9 +1,25 @@
 import React from "react";
-import { RedsSheets } from "./interface/index";
+import { RedsSheets, SheetsMaskMode, SheetsType, SheetsIconType, SheetsActionType, SheetsSize } from "./interface/index";
 declare const Sheets: {
     (props: RedsSheets): React.JSX.Element;
     defaultProps: {
         label: string;
+        mask: boolean;
+        maskMode: SheetsMaskMode; /**
+         * Sheets容器高度动画
+         */
+        sheetsType: SheetsType;
+        cancel: boolean;
+        close: boolean;
+        cancelType: SheetsActionType;
+        closeType: SheetsActionType;
+        cancelText: string;
+        /**
+         * 底部操作区高度
+         */
+        closeText: string;
+        iconType: SheetsIconType;
+        size: SheetsSize;
         onCancel: () => void;
         onConfirm: () => void;
         visible: boolean;

package/lib/types/components/Sheets/interface/index.d.ts

@@ -1,6 +1,40 @@
 import { ReactNode } from "react";
+export declare const enum SheetsMaskMode {
+    light = "light",
+    dark = "dark"
+}
+export declare const enum SheetsType {
+    normal = "narmal",
+    dragable = "dragable",
+    action = "action"
+}
+export declare const enum SheetsActionType {
+    text = "text",
+    icon = "icon"
+}
+export declare const enum SheetsIconType {
+    bg = "bg",
+    normal = "normal"
+}
+export declare const enum SheetsSize {
+    auto = "auto",
+    half = "half",
+    full = "full",
+    threeQuater = "threeQuater"
+}
 export interface RedsSheets {
     label?: string;
+    mask?: boolean;
+    maskMode?: SheetsMaskMode;
+    sheetsType?: SheetsType;
+    cancel?: boolean;
+    close?: boolean;
+    cancelType?: SheetsActionType;
+    closeType?: SheetsActionType;
+    cancelText?: string;
+    closeText?: string;
+    iconType?: SheetsIconType;
+    size?: SheetsSize;
     onCancel: () => any;
     onConfirm: () => any;
     visible: boolean;
@@ -10,6 +44,17 @@ export interface RedsSheetsEvent {
 }
 export declare const SheetsDefaultProps: {
     label: string;
+    mask: boolean;
+    maskMode: SheetsMaskMode;
+    sheetsType: SheetsType;
+    cancel: boolean;
+    close: boolean;
+    cancelType: SheetsActionType;
+    closeType: SheetsActionType;
+    cancelText: string;
+    closeText: string;
+    iconType: SheetsIconType;
+    size: SheetsSize;
     onCancel: () => void;
     onConfirm: () => void;
     visible: boolean;

package/lib/types/components/Sheets/styles.d.ts

@@ -1,8 +1,5 @@
 declare const styles: {
-    container: {
-        width: "100%";
-        height: "100%";
-        backgroundColor: string;
+    wrapper: {
         position: "absolute";
         bottom: number;
         left: number;
@@ -12,7 +9,6 @@ declare const styles: {
     mask: {
         width: "100%";
         height: "100%";
-        backgroundColor: string;
         position: "absolute";
         bottom: number;
         left: number;
@@ -20,14 +16,12 @@ declare const styles: {
         top: number;
     };
     picker: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
         position: "absolute";
         bottom: number;
         left: number;
         right: number;
-        paddingTop: number;
-        paddingBottom: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
     };
     labelContainer: {
         display: "flex";
@@ -52,5 +46,40 @@ declare const styles: {
         fontSize: number;
         fontWeight: "400";
     };
+    iconBg: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    dragableContainer: {
+        width: "100%";
+        height: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    dragable: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    block: {
+        width: number;
+        height: number;
+    };
+    actionContainer: {
+        display: "flex";
+        justifyContent: "space-between";
+        alignItems: "center";
+        flexDirection: "row";
+        width: "100%";
+    };
+    action: {
+        flex: number;
+        marginHorizontal: number;
+    };
 };
 export default styles;

package/lib/types/components/Sheets/test/index.test.d.ts

@@ -1 +1 @@
-import "@testing-library/react-native/extend-expect";
+export {};

package/lib/types/components/Silder/Silder.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { RedsSilder } from "./interface/index";
+declare const Silder: {
+    ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSilder): React.JSX.Element;
+    defaultProps: {
+        value: undefined;
+        defaultValue: boolean;
+        disabled: boolean;
+        trackOnColor: string;
+        trackOffColor: string;
+    };
+};
+export default Silder;

package/lib/types/components/Silder/demo/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/Silder/index.d.ts

@@ -0,0 +1,4 @@
+import Silder from "./Silder";
+import * as SilderType from "./interface";
+export default Silder;
+export { Silder, SilderType };

package/lib/types/components/Silder/interface/index.d.ts

@@ -0,0 +1,19 @@
+import { GestureResponderEvent } from "react-native";
+export interface RedsSilder {
+    value?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    trackOnColor?: string;
+    trackOffColor?: string;
+    onChange?: (value: boolean) => any;
+    onClick?: (value: GestureResponderEvent) => any;
+}
+export interface RedsSilderEvent {
+}
+export declare const SilderDefaultProps: {
+    value: undefined;
+    defaultValue: boolean;
+    disabled: boolean;
+    trackOnColor: string;
+    trackOffColor: string;
+};

package/lib/types/components/Silder/styles.d.ts

@@ -0,0 +1,20 @@
+declare const styles: {
+    SilderContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    thumb: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "absolute";
+        left: number;
+    };
+};
+export default styles;

package/lib/types/components/Silder/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Silder/test/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/react-native/extend-expect";

package/lib/types/index.d.ts

@@ -1,3 +1,5 @@
+export * from "./components/ActionSheets";
+export * from "./components/Silder";
 export * from "./components/Sheets";
 export * from "./components/PickerView";
 export * from "./components/Picker";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@floating-ui/react-native": "~0.10.6",
     "dayjs": "^1.10.7",
-    "@xhsreds/reds-token-next": "0.1.1"
+    "@xhsreds/reds-token-next": "0.1.2"
   },
   "peerDependencies": {
     "@xhs/reder-icon-svg": "~1.0.1",
@@ -32,7 +32,6 @@
   },
   "scripts": {
     "test": "vitest --coverage",
-    "test:update-snapshots": "vitest --update",
     "bench": "vitest bench --outputJson benchmarks/out.json",
     "clear": "rm -rf ./node_modules && rm -rf ./lib",
     "build": "rm -rf ./lib/* &&  rollup -c  && npm run build:types",

package/src/components/ActionSheets/ActionSheets.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { View, TouchableWithoutFeedback, Text } from "react-native";
+import { RedsActionSheets, ActionSheetsDefaultProps } from "./interface/index";
+import styles from "./styles";
+import { useThemeColor } from "../ConfigProvider";
+import Sheets, { SheetsType } from "../Sheets";
+import { ActionType } from "./interface";
+
+const ActionSheets = (props: RedsActionSheets) => {
+  const themeColor = useThemeColor();
+
+  const getActionStyles = (type: ActionType) => {
+    if (type === ActionType.invalid) {
+      return [styles.actionText, { color: themeColor.Disabled }];
+    } else if (type === ActionType.primary) {
+      return [styles.actionText, { color: themeColor.Primary }];
+    } else {
+      return styles.actionText;
+    }
+  };
+
+  const handleClick = (value: string) => {
+    props?.onChange?.(value);
+    props?.onClose?.();
+  };
+
+  const handleClose = () => {
+    props?.onClose?.();
+  };
+
+  return (
+    <Sheets
+      visible={props.visible}
+      cancel={false}
+      close={false}
+      sheetsType={SheetsType.SheetsType.normal}
+      onCancel={handleClose}
+    >
+      <View style={[styles.ActionSheetsContainer, { backgroundColor: themeColor.Bg1 }]}>
+        {props.description ? (
+          <View style={[styles.description, { backgroundColor: themeColor.Bg2 }]}>
+            <Text style={styles.descriptionText}>{props.description}</Text>
+          </View>
+        ) : (
+          <></>
+        )}
+        {props?.data?.map((item) => (
+          <TouchableWithoutFeedback onPress={() => handleClick(item.value)}>
+            <View style={[styles.action, { backgroundColor: themeColor.Bg2 }]}>
+              <Text style={getActionStyles(item.type as ActionType)}>{item.label}</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        ))}
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View style={[styles.cancel, { backgroundColor: themeColor.Bg2 }]}>
+            <Text style={{ color: themeColor.Title }}>取消</Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    </Sheets>
+  );
+};
+
+ActionSheets.defaultProps = ActionSheetsDefaultProps;
+
+export default ActionSheets;

package/src/components/ActionSheets/demo/index.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { ActionSheets, Button, ActionSheetsType } from "@xhs/reds-rn-next";
+
+export default function App() {
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  const list = [
+    {
+      label: "操作",
+      value: "1",
+    },
+    {
+      label: "操作",
+      value: "2",
+    },
+    {
+      label: "操作",
+      value: "3",
+    },
+    {
+      label: "操作",
+      value: "4",
+    },
+    {
+      label: "操作",
+      value: "5",
+    },
+  ];
+
+  const list1 = [
+    {
+      label: "操作",
+      value: "1",
+    },
+    {
+      label: "失效操作",
+      value: "2",
+      type: ActionSheetsType.ActionType.invalid,
+    },
+    {
+      label: "警告操作",
+      value: "3",
+      type: ActionSheetsType.ActionType.primary,
+    },
+  ];
+
+  const handleChange = (value: string) => {
+    console.log("handleChange", value);
+  };
+  return (
+    <View>
+      <Button onClick={() => setVisible1(true)}>有描述的ActionSheet</Button>
+      <ActionSheets
+        visible={visible1}
+        data={list}
+        description={"一段描述"}
+        onClose={() => setVisible1(false)}
+        onChange={handleChange}
+      />
+      <Button onClick={() => setVisible2(true)}>不同状态的ActionSheet</Button>
+      <ActionSheets visible={visible2} data={list1} onClose={() => setVisible2(false)} onChange={handleChange} />
+    </View>
+  );
+}

package/src/components/ActionSheets/doc/index.mdx

@@ -0,0 +1,24 @@
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性        | 描述         | 类型         | 默认值 |
+| ----------- | ------------ | ------------ | ------ |
+| data        | 列表数据     | ActionItem[] | `[]`   |
+| description | 描述         | string       |        |
+| visible     | 是否展示列表 | boolean      | false  |
+
+### Events
+
+| 事件     | 描述       | 类型                   | 默认值 |
+| -------- | ---------- | ---------------------- | ------ |
+| onClose  | 关闭时触发 | () => any              |        |
+| onChange | 点击时触发 | (value: string) => any |        |

package/src/components/ActionSheets/index.ts

@@ -0,0 +1,5 @@
+import ActionSheets from "./ActionSheets";
+import * as ActionSheetsType from "./interface";
+
+export default ActionSheets;
+export { ActionSheets, ActionSheetsType };

package/src/components/ActionSheets/interface/index.ts

@@ -0,0 +1,27 @@
+import { GestureResponderEvent } from "react-native";
+import { lightColor } from "@xhs/reds-token-next";
+
+export interface ActionItem {
+  label: string;
+  value: string;
+  type?: ActionType;
+}
+
+export const enum ActionType {
+  normal = "normal",
+  invalid = "invalid",
+  primary = "primary",
+}
+export interface RedsActionSheets {
+  data: ActionItem[];
+  description?: string;
+  visible: boolean;
+  onClose: () => any;
+  onChange: (value: string) => any;
+}
+
+export interface RedsActionSheetsEvent {}
+export const ActionSheetsDefaultProps = {
+  data: [],
+  visible: false,
+};