@xhsreds/reds-rn-next 0.1.2 → 0.1.4

package/lib/cjs/components/Picker/index.js

@@ -19,7 +19,7 @@ require('react-native-svg');
 require('../PickerView/styles.js');
 require('../PickerView/Wheel.js');
 require('../Sheets/Sheets.js');
-require('../../_chunks/DIhBCUjt.js');
+require('../../_chunks/bwo-gq0b.js');
 require('../Portal/core/Portal.js');
 require('../Portal/core/hooks/usePortal.js');
 require('../../_chunks/D__AUDOo.js');
@@ -28,6 +28,11 @@ require('../Portal/core/PortalHost.js');
 require('../Portal/core/hooks/usePortalState.js');
 require('../Portal/core/PortalProvider.js');
 require('../Sheets/styles.js');
+require('../Button/Button.js');
+require('../../_chunks/DLNitpMY.js');
+require('../Button/styleMap.js');
+require('../Icon/Icon.js');
+require('@xhs/reder-icon-svg');
 
 
 

package/lib/cjs/components/Picker/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/cjs/components/Sheets/Sheets.js

@@ -2,70 +2,222 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_chunks/ShnnCuH9.js');
 var React = require('react');
+var redsTokenNext = require('@xhsreds/reds-token-next');
 var reactNative = require('react-native');
-var components_Sheets_interface_index = require('../../_chunks/DIhBCUjt.js');
+var components_Sheets_interface_index = require('../../_chunks/bwo-gq0b.js');
 var components_Portal_core_Portal = require('../Portal/core/Portal.js');
 require('../Portal/core/PortalHost.js');
 require('../Portal/core/PortalProvider.js');
 require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');
 var components_ConfigProvider_hooks_themeToken_useThemeToken = require('../ConfigProvider/hooks/themeToken/useThemeToken.js');
 var components_Sheets_styles = require('./styles.js');
+var components_Button_Button = require('../Button/Button.js');
+var components_Icon_Icon = require('../Icon/Icon.js');
+var rederIconSvg = require('@xhs/reder-icon-svg');
 require('../Portal/core/hooks/usePortal.js');
 require('../../_chunks/D__AUDOo.js');
 require('../Portal/core/PortalContext.js');
 require('../Portal/core/hooks/usePortalState.js');
-require('../../_chunks/ShnnCuH9.js');
-require('@xhsreds/reds-token-next');
 require('../ConfigProvider/hooks/ConfigContext/ConfigContext.js');
+require('../../_chunks/DLNitpMY.js');
+require('../Button/styleMap.js');
+require('react-native-svg');
 
 var Sheets = function Sheets(props) {
   var visible = props.visible,
     onCancel = props.onCancel,
     onConfirm = props.onConfirm,
     children = props.children,
-    label = props.label;
+    label = props.label,
+    mask = props.mask,
+    maskMode = props.maskMode,
+    cancelType = props.cancelType,
+    closeType = props.closeType,
+    cancelText = props.cancelText,
+    closeText = props.closeText,
+    sheetsType = props.sheetsType,
+    cancel = props.cancel,
+    close = props.close,
+    iconType = props.iconType,
+    size = props.size;
+  console.log("visible", visible);
   var themeColor = components_ConfigProvider_hooks_themeToken_useThemeToken.useThemeColor();
+  var _useState = React.useState(new reactNative.Animated.Value(0)),
+    _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 1),
+    sheetsHeight = _useState2[0];
+  var childHeightRef = React.useRef(0);
+  var _useState3 = React.useState(0),
+    _useState4 = _rollupPluginBabelHelpers._slicedToArray(_useState3, 2),
+    actionHeight = _useState4[0],
+    setActionHeight = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _rollupPluginBabelHelpers._slicedToArray(_useState5, 2),
+    labelHeight = _useState6[0],
+    setLabelHeight = _useState6[1];
+  var _useState7 = React.useState(0),
+    _useState8 = _rollupPluginBabelHelpers._slicedToArray(_useState7, 2),
+    childHeight = _useState8[0],
+    setChildHeight = _useState8[1];
+  var showLabel = React.useMemo(function () {
+    return sheetsType === components_Sheets_interface_index.SheetsType.normal && (cancel || close || label);
+  }, [sheetsType, cancel, close, label]);
+  var showAction = React.useMemo(function () {
+    return sheetsType === components_Sheets_interface_index.SheetsType.action && (cancel || close);
+  }, [sheetsType, cancel, close]);
   var handleMask = function handleMask() {
+    handleClose();
     onCancel === null || onCancel === void 0 || onCancel();
   };
   var handleConfirm = function handleConfirm() {
+    handleClose();
     onConfirm === null || onConfirm === void 0 || onConfirm();
   };
   var handleCancel = function handleCancel() {
+    handleClose();
     onCancel === null || onCancel === void 0 || onCancel();
   };
+  var handleLayout = function handleLayout(evt) {
+    var height = evt.nativeEvent.layout.height;
+    setChildHeight(height);
+  };
+  var handleActionLayout = function handleActionLayout(evt) {
+    var height = evt.nativeEvent.layout.height;
+    setActionHeight(height);
+  };
+  var handleLabelLayout = function handleLabelLayout(evt) {
+    var height = evt.nativeEvent.layout.height;
+    setLabelHeight(height);
+  };
+  React.useEffect(function () {
+    var factHeight = actionHeight + labelHeight + childHeight + 34;
+    var fullScreenHeight = reactNative.Dimensions.get("screen").height - 34;
+    var halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;
+    var threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;
+    var calculateHeight = sheetsType !== components_Sheets_interface_index.SheetsType.dragable ? size === components_Sheets_interface_index.SheetsSize.auto ? factHeight : size === components_Sheets_interface_index.SheetsSize.half ? halfScreenHeight : size === components_Sheets_interface_index.SheetsSize.threeQuater ? threeQuaterScreenHeight : fullScreenHeight : factHeight;
+    childHeightRef.current = calculateHeight;
+    reactNative.Animated.timing(sheetsHeight, {
+      toValue: calculateHeight,
+      duration: 100,
+      // 动画持续时间 (毫秒)
+      useNativeDriver: false
+      // `height` 不支持 useNativeDriver
+    }).start();
+  }, [actionHeight, labelHeight, childHeight]);
+  var handleClose = function handleClose() {
+    reactNative.Animated.timing(sheetsHeight, {
+      toValue: 0,
+      useNativeDriver: false
+    }).start();
+    sheetsHeight.setValue(0);
+  };
+  var panResponder = React.useRef(reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
+      return true;
+    },
+    onPanResponderMove: function onPanResponderMove(event, gestureState) {
+      console.log("childHeightRef.current", childHeightRef.current);
+      var fullScreenHeight = reactNative.Dimensions.get("screen").height - 34;
+      var halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;
+      var threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;
+      var maxHeight = size === components_Sheets_interface_index.SheetsSize.auto ? fullScreenHeight : size === components_Sheets_interface_index.SheetsSize.half ? halfScreenHeight : size === components_Sheets_interface_index.SheetsSize.threeQuater ? threeQuaterScreenHeight : fullScreenHeight;
+      var newHeight = Math.min(maxHeight, Math.max(childHeightRef.current, childHeightRef.current - gestureState.dy));
+      sheetsHeight.setValue(newHeight);
+    }
+  })).current;
+  var iconWrapper = function iconWrapper(type) {
+    return iconType === components_Sheets_interface_index.SheetsIconType.bg ? /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
+      onPress: handleCancel
+    }, /* @__PURE__ */React.createElement(reactNative.View, {
+      style: [components_Sheets_styles.default.iconBg, {
+        backgroundColor: themeColor.Fill1
+      }]
+    }, type === "confirm" ? /* @__PURE__ */React.createElement(components_Icon_Icon.default, {
+      icon: rederIconSvg.Close,
+      fill: themeColor.Bg,
+      size: 20,
+      onClick: handleCancel
+    }) : /* @__PURE__ */React.createElement(components_Icon_Icon.default, {
+      icon: rederIconSvg.ArrowLeft,
+      fill: themeColor.Bg,
+      size: 20,
+      onClick: handleCancel
+    }))) : type === "confirm" ? /* @__PURE__ */React.createElement(components_Icon_Icon.default, {
+      icon: rederIconSvg.Close,
+      fill: themeColor.Title,
+      size: 20,
+      onClick: handleCancel
+    }) : /* @__PURE__ */React.createElement(components_Icon_Icon.default, {
+      icon: rederIconSvg.ArrowLeft,
+      fill: themeColor.Title,
+      size: 20,
+      onClick: handleCancel
+    });
+  };
+  var Block = function Block() {
+    return /* @__PURE__ */React.createElement(reactNative.View, {
+      style: components_Sheets_styles.default.block
+    });
+  };
   return visible ? /* @__PURE__ */React.createElement(components_Portal_core_Portal.Portal, null, /* @__PURE__ */React.createElement(reactNative.View, {
-    style: components_Sheets_styles.default.container
-  }, /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
+    style: components_Sheets_styles.default.wrapper
+  }, mask ? /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
     onPress: handleMask
   }, /* @__PURE__ */React.createElement(reactNative.View, {
-    style: components_Sheets_styles.default.mask
-  })), /* @__PURE__ */React.createElement(reactNative.View, {
+    style: [components_Sheets_styles.default.mask, {
+      backgroundColor: maskMode === components_Sheets_interface_index.SheetsMaskMode.light ? redsTokenNext.alwaysColor.MaskBg : "rgba(0,0,0,0.8)"
+    }]
+  })) : /* @__PURE__ */React.createElement(React.Fragment, null), /* @__PURE__ */React.createElement(reactNative.Animated.View, _rollupPluginBabelHelpers._objectSpread2({
     style: [components_Sheets_styles.default.picker, {
       backgroundColor: themeColor.Bg2
+    }, {
+      height: sheetsHeight
     }]
-  }, /* @__PURE__ */React.createElement(reactNative.View, {
+  }, panResponder.panHandlers), showLabel ? /* @__PURE__ */React.createElement(reactNative.View, {
     style: [components_Sheets_styles.default.labelContainer, {
       backgroundColor: themeColor.Bg2
-    }]
-  }, /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
+    }],
+    onLayout: handleLabelLayout
+  }, cancel ? /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
     onPress: handleCancel
-  }, /* @__PURE__ */React.createElement(reactNative.Text, {
+  }, cancelType === components_Sheets_interface_index.SheetsActionType.text ? /* @__PURE__ */React.createElement(reactNative.Text, {
     style: [components_Sheets_styles.default.cancel, {
       color: themeColor.Description
     }]
-  }, "\u53D6\u6D88")), /* @__PURE__ */React.createElement(reactNative.Text, {
+  }, cancelText) : iconWrapper("cancel")) : /* @__PURE__ */React.createElement(Block, null), label ? /* @__PURE__ */React.createElement(reactNative.Text, {
     style: [components_Sheets_styles.default.label, {
       color: themeColor.Title
     }]
-  }, label), /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
+  }, label) : /* @__PURE__ */React.createElement(React.Fragment, null), close ? /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
     onPress: handleConfirm
-  }, /* @__PURE__ */React.createElement(reactNative.Text, {
+  }, closeType === components_Sheets_interface_index.SheetsActionType.text ? /* @__PURE__ */React.createElement(reactNative.Text, {
     style: [components_Sheets_styles.default.confirm, {
       color: themeColor.Primary
     }]
-  }, "\u786E\u5B9A"))), children))) : /* @__PURE__ */React.createElement(React.Fragment, null);
+  }, closeText) : iconWrapper("confirm")) : /* @__PURE__ */React.createElement(Block, null)) : /* @__PURE__ */React.createElement(React.Fragment, null), sheetsType === components_Sheets_interface_index.SheetsType.dragable ? /* @__PURE__ */React.createElement(reactNative.Animated.View, _rollupPluginBabelHelpers._objectSpread2({
+    style: [components_Sheets_styles.default.dragableContainer]
+  }, panResponder.panHandlers), /* @__PURE__ */React.createElement(reactNative.View, {
+    style: [components_Sheets_styles.default.dragable, {
+      backgroundColor: themeColor.Fill3
+    }]
+  })) : /* @__PURE__ */React.createElement(React.Fragment, null), /* @__PURE__ */React.createElement(reactNative.View, {
+    onLayout: handleLayout
+  }, children), showAction ? /* @__PURE__ */React.createElement(reactNative.View, {
+    style: [components_Sheets_styles.default.actionContainer],
+    onLayout: handleActionLayout
+  }, cancel ? /* @__PURE__ */React.createElement(reactNative.View, {
+    style: components_Sheets_styles.default.action
+  }, /* @__PURE__ */React.createElement(components_Button_Button.default, {
+    block: true,
+    onClick: handleCancel
+  }, cancelText)) : /* @__PURE__ */React.createElement(React.Fragment, null), close ? /* @__PURE__ */React.createElement(reactNative.View, {
+    style: components_Sheets_styles.default.action
+  }, /* @__PURE__ */React.createElement(components_Button_Button.default, {
+    block: true,
+    onClick: handleConfirm,
+    type: "primary"
+  }, closeText)) : /* @__PURE__ */React.createElement(React.Fragment, null)) : /* @__PURE__ */React.createElement(React.Fragment, null)))) : /* @__PURE__ */React.createElement(React.Fragment, null);
 };
 Sheets.defaultProps = components_Sheets_interface_index.SheetsDefaultProps;
 

package/lib/cjs/components/Sheets/Sheets.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sheets.js","sources":["../../../../src/components/Sheets/Sheets.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { View, TouchableWithoutFeedback, Text } from \"react-native\";\nimport { RedsSheets, SheetsDefaultProps } from \"./interface/index\";\nimport { Portal } from \"../Portal\";\nimport { useThemeColor } from \"../ConfigProvider\";\nimport styles from \"./styles\";\n\nconst Sheets = (props: RedsSheets) => {\n  const { visible, onCancel, onConfirm, children, label } = props;\n\n  const themeColor = useThemeColor();\n\n  const handleMask = () => {\n    onCancel?.();\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n  };\n\n  return visible ? (\n    <Portal>\n      <View style={styles.container}>\n        <TouchableWithoutFeedback onPress={handleMask}>\n          <View style={styles.mask}></View>\n        </TouchableWithoutFeedback>\n        <View style={[styles.picker, { backgroundColor: themeColor.Bg2 }]}>\n          <View style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }]}>\n            <TouchableWithoutFeedback onPress={handleCancel}>\n              <Text style={[styles.cancel, { color: themeColor.Description }]}>取消</Text>\n            </TouchableWithoutFeedback>\n            <Text style={[styles.label, { color: themeColor.Title }]}>{label}</Text>\n            <TouchableWithoutFeedback onPress={handleConfirm}>\n              <Text style={[styles.confirm, { color: themeColor.Primary }]}>确定</Text>\n            </TouchableWithoutFeedback>\n          </View>\n          {children}\n        </View>\n      </View>\n    </Portal>\n  ) : (\n    <></>\n  );\n};\n\nSheets.defaultProps = SheetsDefaultProps;\n\nexport default Sheets;\n"],"names":["Sheets","props","visible","onCancel","onConfirm","children","label","themeColor","useThemeColor","handleMask","handleConfirm","handleCancel","Portal","React","createElement","View","style","styles","container","TouchableWithoutFeedback","onPress","mask","picker","backgroundColor","Bg2","labelContainer","Text","cancel","color","Description","Title","confirm","Primary","Fragment","defaultProps","SheetsDefaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,MAAA,GAAS,SAATA,MAAAA,CAAUC,KAAsB,EAAA;AACpC,EAAA,IAAQC,OAAS,GAAyCD,KAAA,CAAlDC,OAAS;IAAAC,QAAA,GAAyCF,KAAA,CAAzCE,QAAA;IAAUC,SAAW,GAAoBH,KAAA,CAA/BG,SAAW;IAAAC,QAAA,GAAoBJ,KAAA,CAApBI,QAAA;IAAUC,QAAUL,KAAA,CAAVK;AAEhD,EAAA,IAAMC,aAAaC,sEAAc,EAAA,CAAA;AAEjC,EAAA,IAAMC,aAAa,SAAbA,aAAmB;AACZN,IAAAA,QAAA,KAAAA,IAAAA,IAAAA,QAAA,KAAAA,KAAAA,CAAAA,IAAAA,QAAA,EAAA,CAAA;GACb,CAAA;AAEA,EAAA,IAAMO,gBAAgB,SAAhBA,gBAAsB;AACdN,IAAAA,SAAA,KAAAA,IAAAA,IAAAA,SAAA,KAAAA,KAAAA,CAAAA,IAAAA,SAAA,EAAA,CAAA;GACd,CAAA;AAEA,EAAA,IAAMO,eAAe,SAAfA,eAAqB;AACdR,IAAAA,QAAA,KAAAA,IAAAA,IAAAA,QAAA,KAAAA,KAAAA,CAAAA,IAAAA,QAAA,EAAA,CAAA;GACb,CAAA;AAEO,EAAA,OAAAD,OAAA,sCACJU,oCACC,EAAA,IAAA,iBAAAC,KAAA,CAAAC,aAAA,CAACC;IAAKC,KAAO,EAAAC,gCAAA,CAAOC,SAAAA;AAClB,GAAA,iBAAAL,KAAA,CAAAC,aAAA,CAACK,oCAAyB,EAAA;AAAAC,IAAAA,OAAA,EAASX,UAAAA;oBAChCI,KAAA,CAAAC,aAAA,CAAAC,gBAAA,EAAA;IAAKC,OAAOC,gCAAO,CAAAI,IAAAA;GAAM,CAC5B,CACA,iBAAAR,KAAA,CAAAC,aAAA,CAACC,gBAAK,EAAA;AAAAC,IAAAA,KAAA,EAAO,CAACC,gCAAA,CAAOK,QAAQ;MAAEC,eAAA,EAAiBhB,WAAWiB,GAAAA;KAAK,CAAA;oBAC7DX,KAAA,CAAAC,aAAA,CAAAC,gBAAA,EAAA;AAAKC,IAAAA,KAAO,EAAA,CAACC,gCAAO,CAAAQ,cAAA,EAAgB;MAAEF,eAAiB,EAAAhB,UAAA,CAAWiB,GAAAA;KAAK,CAAA;AAAA,GAAA,qCACrEL,oCAAyB,EAAA;AAAAC,IAAAA,OAAA,EAAST,YAAAA;AACjC,GAAA,iBAAAE,KAAA,CAAAC,aAAA,CAACY,gBAAK,EAAA;AAAAV,IAAAA,KAAA,EAAO,CAACC,gCAAO,CAAAU,MAAA,EAAQ;MAAEC,KAAO,EAAArB,UAAA,CAAWsB,WAAAA;KAAa,CAAA;GAAA,EAAG,cAAE,CACrE,CACA,iBAAAhB,KAAA,CAAAC,aAAA,CAACY;AAAKV,IAAAA,KAAO,EAAA,CAACC,iCAAOX,KAAO,EAAA;MAAEsB,OAAOrB,UAAW,CAAAuB,KAAAA;KAAO,CAAA;GAAA,EAAIxB,KAAM,CAAA,qCAChEa,oCAAyB,EAAA;AAAAC,IAAAA,OAAA,EAASV,aAAAA;oBAChCG,KAAA,CAAAC,aAAA,CAAAY,gBAAA,EAAA;AAAKV,IAAAA,OAAO,CAACC,gCAAA,CAAOc,OAAS,EAAA;MAAEH,KAAO,EAAArB,UAAA,CAAWyB,OAAAA;KAAS,CAAA;GAAA,EAAG,cAAE,CAClE,CACF,GACC3B,QACH,CACF,CACF,CAAA,kBAEEQ,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAoB,QAAA,EAAA,IAAA,CAAA,CAAA;AAEN,EAAA;AAEAjC,MAAA,CAAOkC,YAAe,GAAAC,oDAAA;;;;"}
+{"version":3,"file":"Sheets.js","sources":["../../../../src/components/Sheets/Sheets.tsx"],"sourcesContent":["import React, { useState, useRef, useMemo, useEffect } from \"react\";\nimport { alwaysColor } from \"@xhsreds/reds-token-next\";\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Text,\n  Animated,\n  LayoutChangeEvent,\n  PanResponder,\n  Dimensions,\n} from \"react-native\";\nimport {\n  RedsSheets,\n  SheetsDefaultProps,\n  SheetsMaskMode,\n  SheetsType,\n  SheetsIconType,\n  SheetsActionType,\n  SheetsSize,\n} from \"./interface/index\";\nimport { Portal } from \"../Portal\";\nimport { useThemeColor } from \"../ConfigProvider\";\nimport styles from \"./styles\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Close, ArrowLeft } from \"@xhs/reder-icon-svg\";\n\nconst Sheets = (props: RedsSheets) => {\n  const {\n    visible,\n    onCancel,\n    onConfirm,\n    children,\n    label,\n    mask,\n    maskMode,\n    cancelType,\n    closeType,\n    cancelText,\n    closeText,\n    sheetsType,\n    cancel,\n    close,\n    iconType,\n    size,\n  } = props;\n\n  console.log(\"visible\", visible);\n\n  const themeColor = useThemeColor();\n\n  /**\n   * Sheets容器高度动画\n   */\n  const [sheetsHeight] = useState(new Animated.Value(0));\n\n  /**\n   * Sheets容器child内容高度\n   */\n  const childHeightRef = useRef(0);\n\n  /**\n   * 底部操作区高度\n   */\n  const [actionHeight, setActionHeight] = useState(0);\n\n  /**\n   * 标题区域高度\n   */\n  const [labelHeight, setLabelHeight] = useState(0);\n\n  /**\n   * child高度\n   */\n  const [childHeight, setChildHeight] = useState(0);\n\n  /**\n   * 是否展示标题\n   */\n  const showLabel = useMemo(() => {\n    return sheetsType === SheetsType.normal && (cancel || close || label);\n  }, [sheetsType, cancel, close, label]);\n\n  /**\n   * 是否展示底部操作栏\n   */\n  const showAction = useMemo(() => {\n    return sheetsType === SheetsType.action && (cancel || close);\n  }, [sheetsType, cancel, close]);\n\n  /**\n   * 关闭Sheets\n   */\n  const handleMask = () => {\n    handleClose();\n    onCancel?.();\n  };\n\n  /**\n   * 确定 or 完成\n   */\n  const handleConfirm = () => {\n    handleClose();\n    onConfirm?.();\n  };\n\n  /**\n   * 返回 or 取消\n   */\n  const handleCancel = () => {\n    handleClose();\n    onCancel?.();\n  };\n\n  /**\n   * 计算子容器高度\n   * @param evt LayoutChangeEvent\n   */\n  const handleLayout = (evt: LayoutChangeEvent) => {\n    const { height } = evt.nativeEvent.layout;\n    setChildHeight(height);\n  };\n\n  /**\n   * 计算底部操作区高度\n   * @param evt\n   */\n  const handleActionLayout = (evt: LayoutChangeEvent) => {\n    const { height } = evt.nativeEvent.layout;\n    setActionHeight(height);\n  };\n\n  /**\n   * 计算标题高度\n   * @param evt\n   */\n  const handleLabelLayout = (evt: LayoutChangeEvent) => {\n    const { height } = evt.nativeEvent.layout;\n    setLabelHeight(height);\n  };\n\n  /**\n   * 外层容器高度变化\n   */\n  useEffect(() => {\n    const factHeight = actionHeight + labelHeight + childHeight + 34;\n    const fullScreenHeight = Dimensions.get(\"screen\").height - 34;\n    const halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;\n    const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;\n    const calculateHeight =\n      sheetsType !== SheetsType.dragable\n        ? size === SheetsSize.auto\n          ? factHeight\n          : size === SheetsSize.half\n            ? halfScreenHeight\n            : size === SheetsSize.threeQuater\n              ? threeQuaterScreenHeight\n              : fullScreenHeight\n        : factHeight;\n    childHeightRef.current = calculateHeight;\n    Animated.timing(sheetsHeight, {\n      toValue: calculateHeight,\n      duration: 100, // 动画持续时间 (毫秒)\n      useNativeDriver: false, // `height` 不支持 useNativeDriver\n    }).start();\n  }, [actionHeight, labelHeight, childHeight]);\n\n  /**\n   * 关闭容器取消动画\n   * @param evt LayoutChangeEvent\n   */\n  const handleClose = () => {\n    Animated.timing(sheetsHeight, { toValue: 0, useNativeDriver: false }).start();\n    sheetsHeight.setValue(0);\n  };\n\n  /**\n   * 手势监听\n   */\n  const panResponder = useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderMove: (event, gestureState) => {\n        console.log(\"childHeightRef.current\", childHeightRef.current);\n        const fullScreenHeight = Dimensions.get(\"screen\").height - 34;\n        const halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;\n        const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;\n        const maxHeight =\n          size === SheetsSize.auto\n            ? fullScreenHeight\n            : size === SheetsSize.half\n              ? halfScreenHeight\n              : size === SheetsSize.threeQuater\n                ? threeQuaterScreenHeight\n                : fullScreenHeight;\n        const newHeight = Math.min(\n          maxHeight,\n          Math.max(childHeightRef.current, childHeightRef.current - gestureState.dy),\n        );\n        sheetsHeight.setValue(newHeight);\n      },\n    }),\n  ).current;\n\n  /** icon wrapper */\n  const iconWrapper = (type: string) => {\n    return iconType === SheetsIconType.bg ? (\n      <TouchableWithoutFeedback onPress={handleCancel}>\n        <View style={[styles.iconBg, { backgroundColor: themeColor.Fill1 }]}>\n          {type === \"confirm\" ? (\n            <Icon icon={Close} fill={themeColor.Bg} size={20} onClick={handleCancel} />\n          ) : (\n            <Icon icon={ArrowLeft} fill={themeColor.Bg} size={20} onClick={handleCancel} />\n          )}\n        </View>\n      </TouchableWithoutFeedback>\n    ) : type === \"confirm\" ? (\n      <Icon icon={Close} fill={themeColor.Title} size={20} onClick={handleCancel} />\n    ) : (\n      <Icon icon={ArrowLeft} fill={themeColor.Title} size={20} onClick={handleCancel} />\n    );\n  };\n\n  /** block占位 */\n  const Block = () => {\n    return <View style={styles.block} />;\n  };\n\n  return visible ? (\n    <Portal>\n      <View style={styles.wrapper}>\n        {mask ? (\n          <TouchableWithoutFeedback onPress={handleMask}>\n            <View\n              style={[\n                styles.mask,\n                { backgroundColor: maskMode === SheetsMaskMode.light ? alwaysColor.MaskBg : \"rgba(0,0,0,0.8)\" },\n              ]}\n            ></View>\n          </TouchableWithoutFeedback>\n        ) : (\n          <></>\n        )}\n        <Animated.View\n          style={[styles.picker, { backgroundColor: themeColor.Bg2 }, { height: sheetsHeight }]}\n          {...panResponder.panHandlers}\n        >\n          {/** normal */}\n          {showLabel ? (\n            <View style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }]} onLayout={handleLabelLayout}>\n              {cancel ? (\n                <TouchableWithoutFeedback onPress={handleCancel}>\n                  {cancelType === SheetsActionType.text ? (\n                    <Text style={[styles.cancel, { color: themeColor.Description }]}>{cancelText}</Text>\n                  ) : (\n                    iconWrapper(\"cancel\")\n                  )}\n                </TouchableWithoutFeedback>\n              ) : (\n                <Block />\n              )}\n              {label ? <Text style={[styles.label, { color: themeColor.Title }]}>{label}</Text> : <></>}\n              {close ? (\n                <TouchableWithoutFeedback onPress={handleConfirm}>\n                  {closeType === SheetsActionType.text ? (\n                    <Text style={[styles.confirm, { color: themeColor.Primary }]}>{closeText}</Text>\n                  ) : (\n                    iconWrapper(\"confirm\")\n                  )}\n                </TouchableWithoutFeedback>\n              ) : (\n                <Block />\n              )}\n            </View>\n          ) : (\n            <></>\n          )}\n\n          {/** 拖拽按钮 */}\n          {sheetsType === SheetsType.dragable ? (\n            <Animated.View style={[styles.dragableContainer]} {...panResponder.panHandlers}>\n              <View style={[styles.dragable, { backgroundColor: themeColor.Fill3 }]} />\n            </Animated.View>\n          ) : (\n            <></>\n          )}\n\n          <View onLayout={handleLayout}>{children}</View>\n\n          {/** action */}\n          {showAction ? (\n            <View style={[styles.actionContainer]} onLayout={handleActionLayout}>\n              {cancel ? (\n                <View style={styles.action}>\n                  <Button block onClick={handleCancel}>\n                    {cancelText}\n                  </Button>\n                </View>\n              ) : (\n                <></>\n              )}\n              {close ? (\n                <View style={styles.action}>\n                  <Button block onClick={handleConfirm} type=\"primary\">\n                    {closeText}\n                  </Button>\n                </View>\n              ) : (\n                <></>\n              )}\n            </View>\n          ) : (\n            <></>\n          )}\n        </Animated.View>\n      </View>\n    </Portal>\n  ) : (\n    <></>\n  );\n};\n\nSheets.defaultProps = SheetsDefaultProps;\n\nexport default Sheets;\n"],"names":["Sheets","props","visible","onCancel","onConfirm","children","label","mask","maskMode","cancelType","closeType","cancelText","closeText","sheetsType","cancel","close","iconType","size","console","log","themeColor","useThemeColor","_useState","useState","Animated","Value","_useState2","_slicedToArray","sheetsHeight","childHeightRef","useRef","_useState3","_useState4","actionHeight","setActionHeight","_useState5","_useState6","labelHeight","setLabelHeight","_useState7","_useState8","childHeight","setChildHeight","showLabel","useMemo","SheetsType","normal","showAction","action","handleMask","handleClose","handleConfirm","handleCancel","handleLayout","evt","height","nativeEvent","layout","handleActionLayout","handleLabelLayout","useEffect","factHeight","fullScreenHeight","Dimensions","get","halfScreenHeight","Math","floor","threeQuaterScreenHeight","calculateHeight","dragable","SheetsSize","auto","half","threeQuater","current","timing","toValue","duration","useNativeDriver","start","setValue","panResponder","PanResponder","create","onMoveShouldSetPanResponder","onPanResponderMove","event","gestureState","maxHeight","newHeight","min","max","dy","iconWrapper","type","SheetsIconType","bg","React","createElement","TouchableWithoutFeedback","onPress","View","style","styles","iconBg","backgroundColor","Fill1","Icon","icon","Close","fill","Bg","onClick","ArrowLeft","Title","Block","block","Portal","wrapper","SheetsMaskMode","light","alwaysColor","MaskBg","Fragment","_objectSpread","picker","Bg2","panHandlers","labelContainer","onLayout","SheetsActionType","text","Text","color","Description","confirm","Primary","dragableContainer","Fill3","actionContainer","Button","defaultProps","SheetsDefaultProps"],"mappings":"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"}

package/lib/cjs/components/Sheets/index.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_Sheets_Sheets = require('./Sheets.js');
-var components_Sheets_interface_index = require('../../_chunks/DIhBCUjt.js');
+var components_Sheets_interface_index = require('../../_chunks/bwo-gq0b.js');
+require('../../_chunks/ShnnCuH9.js');
 require('react');
+require('@xhsreds/reds-token-next');
 require('react-native');
 require('../Portal/core/Portal.js');
 require('../Portal/core/hooks/usePortal.js');
@@ -13,12 +15,16 @@ require('../Portal/core/PortalContext.js');
 require('../Portal/core/PortalHost.js');
 require('../Portal/core/hooks/usePortalState.js');
 require('../Portal/core/PortalProvider.js');
-require('../../_chunks/ShnnCuH9.js');
 require('../ConfigProvider/hooks/ConfigCache/ConfigCache.js');
-require('@xhsreds/reds-token-next');
 require('../ConfigProvider/hooks/themeToken/useThemeToken.js');
 require('../ConfigProvider/hooks/ConfigContext/ConfigContext.js');
 require('./styles.js');
+require('../Button/Button.js');
+require('../../_chunks/DLNitpMY.js');
+require('../Button/styleMap.js');
+require('../Icon/Icon.js');
+require('react-native-svg');
+require('@xhs/reder-icon-svg');
 
 
 

package/lib/cjs/components/Sheets/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/cjs/components/Sheets/interface/index.js

@@ -1,8 +1,13 @@
 'use strict';
 
-var components_Sheets_interface_index = require('../../../_chunks/DIhBCUjt.js');
+var components_Sheets_interface_index = require('../../../_chunks/bwo-gq0b.js');
 
 
 
+exports.SheetsActionType = components_Sheets_interface_index.SheetsActionType;
 exports.SheetsDefaultProps = components_Sheets_interface_index.SheetsDefaultProps;
+exports.SheetsIconType = components_Sheets_interface_index.SheetsIconType;
+exports.SheetsMaskMode = components_Sheets_interface_index.SheetsMaskMode;
+exports.SheetsSize = components_Sheets_interface_index.SheetsSize;
+exports.SheetsType = components_Sheets_interface_index.SheetsType;
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/Sheets/interface/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/cjs/components/Sheets/styles.js

@@ -2,14 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var redsTokenNext = require('@xhsreds/reds-token-next');
 var reactNative = require('react-native');
 
 var styles = reactNative.StyleSheet.create({
-  container: {
-    width: "100%",
-    height: "100%",
-    backgroundColor: redsTokenNext.alwaysColor.MaskBg,
+  wrapper: {
     position: "absolute",
     bottom: 0,
     left: 0,
@@ -19,7 +15,6 @@ var styles = reactNative.StyleSheet.create({
   mask: {
     width: "100%",
     height: "100%",
-    backgroundColor: redsTokenNext.alwaysColor.MaskBg,
     position: "absolute",
     bottom: 0,
     left: 0,
@@ -27,14 +22,12 @@ var styles = reactNative.StyleSheet.create({
     top: 0
   },
   picker: {
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
     position: "absolute",
     bottom: 0,
     left: 0,
-    right: 0,
-    paddingTop: 4,
-    paddingBottom: 34,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12
+    right: 0
   },
   labelContainer: {
     display: "flex",
@@ -58,6 +51,41 @@ var styles = reactNative.StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "400"
+  },
+  iconBg: {
+    width: 28,
+    height: 28,
+    borderRadius: 28,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dragableContainer: {
+    width: "100%",
+    height: 20,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dragable: {
+    width: 33,
+    height: 4,
+    borderRadius: 10
+  },
+  block: {
+    width: 28,
+    height: 28
+  },
+  actionContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row",
+    width: "100%"
+  },
+  action: {
+    flex: 1,
+    marginHorizontal: 12
   }
 });
 

package/lib/cjs/components/Sheets/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Sheets/styles.ts"],"sourcesContent":["import { alwaysColor } from \"@xhsreds/reds-token-next\";\nimport { StyleSheet } from \"react-native\";\n\nconst styles = StyleSheet.create({\n  container: {\n    width: \"100%\",\n    height: \"100%\",\n    backgroundColor: alwaysColor.MaskBg,\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n  mask: {\n    width: \"100%\",\n    height: \"100%\",\n    backgroundColor: alwaysColor.MaskBg,\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n  picker: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    paddingTop: 4,\n    paddingBottom: 34,\n    borderTopLeftRadius: 12,\n    borderTopRightRadius: 12,\n  },\n  labelContainer: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    height: 44,\n    paddingLeft: 16,\n    paddingRight: 16,\n    borderTopLeftRadius: 12,\n    borderTopRightRadius: 12,\n  },\n  cancel: {\n    fontSize: 16,\n    fontWeight: \"400\",\n  },\n  confirm: {\n    fontSize: 16,\n    fontWeight: \"400\",\n  },\n  label: {\n    fontSize: 16,\n    fontWeight: \"400\",\n  },\n});\n\nexport default styles;\n"],"names":["styles","StyleSheet","create","container","width","height","backgroundColor","alwaysColor","MaskBg","position","bottom","left","right","top","mask","picker","paddingTop","paddingBottom","borderTopLeftRadius","borderTopRightRadius","labelContainer","display","justifyContent","alignItems","flexDirection","paddingLeft","paddingRight","cancel","fontSize","fontWeight","confirm","label"],"mappings":";;;;;;;AAGA,IAAMA,MAAA,GAASC,uBAAWC,MAAO,CAAA;AAC/BC,EAAAA,SAAW,EAAA;AACTC,IAAAA,KAAO,EAAA,MAAA;AACPC,IAAAA,MAAQ,EAAA,MAAA;IACRC,iBAAiBC,yBAAY,CAAAC,MAAA;AAC7BC,IAAAA,QAAU,EAAA,UAAA;AACVC,IAAAA,MAAQ,EAAA,CAAA;AACRC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,KAAO,EAAA,CAAA;AACPC,IAAAA,GAAK,EAAA,CAAA;GACP;AACAC,EAAAA,IAAM,EAAA;AACJV,IAAAA,KAAO,EAAA,MAAA;AACPC,IAAAA,MAAQ,EAAA,MAAA;IACRC,iBAAiBC,yBAAY,CAAAC,MAAA;AAC7BC,IAAAA,QAAU,EAAA,UAAA;AACVC,IAAAA,MAAQ,EAAA,CAAA;AACRC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,KAAO,EAAA,CAAA;AACPC,IAAAA,GAAK,EAAA,CAAA;GACP;AACAE,EAAAA,MAAQ,EAAA;AACNN,IAAAA,QAAU,EAAA,UAAA;AACVC,IAAAA,MAAQ,EAAA,CAAA;AACRC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,KAAO,EAAA,CAAA;AACPI,IAAAA,UAAY,EAAA,CAAA;AACZC,IAAAA,aAAe,EAAA,EAAA;AACfC,IAAAA,mBAAqB,EAAA,EAAA;AACrBC,IAAAA,oBAAsB,EAAA,EAAA;GACxB;AACAC,EAAAA,cAAgB,EAAA;AACdC,IAAAA,OAAS,EAAA,MAAA;AACTC,IAAAA,cAAgB,EAAA,eAAA;AAChBC,IAAAA,UAAY,EAAA,QAAA;AACZC,IAAAA,aAAe,EAAA,KAAA;AACfnB,IAAAA,MAAQ,EAAA,EAAA;AACRoB,IAAAA,WAAa,EAAA,EAAA;AACbC,IAAAA,YAAc,EAAA,EAAA;AACdR,IAAAA,mBAAqB,EAAA,EAAA;AACrBC,IAAAA,oBAAsB,EAAA,EAAA;GACxB;AACAQ,EAAAA,MAAQ,EAAA;AACNC,IAAAA,QAAU,EAAA,EAAA;AACVC,IAAAA,UAAY,EAAA,KAAA;GACd;AACAC,EAAAA,OAAS,EAAA;AACPF,IAAAA,QAAU,EAAA,EAAA;AACVC,IAAAA,UAAY,EAAA,KAAA;GACd;AACAE,EAAAA,KAAO,EAAA;AACLH,IAAAA,QAAU,EAAA,EAAA;AACVC,IAAAA,UAAY,EAAA,KAAA;AACd,GAAA;AACF,CAAC;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Sheets/styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n  mask: {\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n  },\n  picker: {\n    borderTopLeftRadius: 12,\n    borderTopRightRadius: 12,\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  labelContainer: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    height: 44,\n    paddingLeft: 16,\n    paddingRight: 16,\n    borderTopLeftRadius: 12,\n    borderTopRightRadius: 12,\n  },\n  cancel: {\n    fontSize: 16,\n    fontWeight: \"400\",\n  },\n  confirm: {\n    fontSize: 16,\n    fontWeight: \"400\",\n  },\n  label: {\n    fontSize: 16,\n    fontWeight: \"400\",\n  },\n  iconBg: {\n    width: 28,\n    height: 28,\n    borderRadius: 28,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  dragableContainer: {\n    width: \"100%\",\n    height: 20,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  dragable: {\n    width: 33,\n    height: 4,\n    borderRadius: 10,\n  },\n  block: {\n    width: 28,\n    height: 28,\n  },\n  actionContainer: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    width: \"100%\",\n  },\n  action: {\n    flex: 1,\n    marginHorizontal: 12,\n  },\n});\n\nexport default styles;\n"],"names":["styles","StyleSheet","create","wrapper","position","bottom","left","right","top","mask","width","height","picker","borderTopLeftRadius","borderTopRightRadius","labelContainer","display","justifyContent","alignItems","flexDirection","paddingLeft","paddingRight","cancel","fontSize","fontWeight","confirm","label","iconBg","borderRadius","dragableContainer","dragable","block","actionContainer","action","flex","marginHorizontal"],"mappings":";;;;;;AAEA,IAAMA,MAAA,GAASC,uBAAWC,MAAO,CAAA;AAC/BC,EAAAA,OAAS,EAAA;AACPC,IAAAA,QAAU,EAAA,UAAA;AACVC,IAAAA,MAAQ,EAAA,CAAA;AACRC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,KAAO,EAAA,CAAA;AACPC,IAAAA,GAAK,EAAA,CAAA;GACP;AACAC,EAAAA,IAAM,EAAA;AACJC,IAAAA,KAAO,EAAA,MAAA;AACPC,IAAAA,MAAQ,EAAA,MAAA;AACRP,IAAAA,QAAU,EAAA,UAAA;AACVC,IAAAA,MAAQ,EAAA,CAAA;AACRC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,KAAO,EAAA,CAAA;AACPC,IAAAA,GAAK,EAAA,CAAA;GACP;AACAI,EAAAA,MAAQ,EAAA;AACNC,IAAAA,mBAAqB,EAAA,EAAA;AACrBC,IAAAA,oBAAsB,EAAA,EAAA;AACtBV,IAAAA,QAAU,EAAA,UAAA;AACVC,IAAAA,MAAQ,EAAA,CAAA;AACRC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,KAAO,EAAA,CAAA;GACT;AACAQ,EAAAA,cAAgB,EAAA;AACdC,IAAAA,OAAS,EAAA,MAAA;AACTC,IAAAA,cAAgB,EAAA,eAAA;AAChBC,IAAAA,UAAY,EAAA,QAAA;AACZC,IAAAA,aAAe,EAAA,KAAA;AACfR,IAAAA,MAAQ,EAAA,EAAA;AACRS,IAAAA,WAAa,EAAA,EAAA;AACbC,IAAAA,YAAc,EAAA,EAAA;AACdR,IAAAA,mBAAqB,EAAA,EAAA;AACrBC,IAAAA,oBAAsB,EAAA,EAAA;GACxB;AACAQ,EAAAA,MAAQ,EAAA;AACNC,IAAAA,QAAU,EAAA,EAAA;AACVC,IAAAA,UAAY,EAAA,KAAA;GACd;AACAC,EAAAA,OAAS,EAAA;AACPF,IAAAA,QAAU,EAAA,EAAA;AACVC,IAAAA,UAAY,EAAA,KAAA;GACd;AACAE,EAAAA,KAAO,EAAA;AACLH,IAAAA,QAAU,EAAA,EAAA;AACVC,IAAAA,UAAY,EAAA,KAAA;GACd;AACAG,EAAAA,MAAQ,EAAA;AACNjB,IAAAA,KAAO,EAAA,EAAA;AACPC,IAAAA,MAAQ,EAAA,EAAA;AACRiB,IAAAA,YAAc,EAAA,EAAA;AACdZ,IAAAA,OAAS,EAAA,MAAA;AACTC,IAAAA,cAAgB,EAAA,QAAA;AAChBC,IAAAA,UAAY,EAAA,QAAA;GACd;AACAW,EAAAA,iBAAmB,EAAA;AACjBnB,IAAAA,KAAO,EAAA,MAAA;AACPC,IAAAA,MAAQ,EAAA,EAAA;AACRK,IAAAA,OAAS,EAAA,MAAA;AACTC,IAAAA,cAAgB,EAAA,QAAA;AAChBC,IAAAA,UAAY,EAAA,QAAA;GACd;AACAY,EAAAA,QAAU,EAAA;AACRpB,IAAAA,KAAO,EAAA,EAAA;AACPC,IAAAA,MAAQ,EAAA,CAAA;AACRiB,IAAAA,YAAc,EAAA,EAAA;GAChB;AACAG,EAAAA,KAAO,EAAA;AACLrB,IAAAA,KAAO,EAAA,EAAA;AACPC,IAAAA,MAAQ,EAAA,EAAA;GACV;AACAqB,EAAAA,eAAiB,EAAA;AACfhB,IAAAA,OAAS,EAAA,MAAA;AACTC,IAAAA,cAAgB,EAAA,eAAA;AAChBC,IAAAA,UAAY,EAAA,QAAA;AACZC,IAAAA,aAAe,EAAA,KAAA;AACfT,IAAAA,KAAO,EAAA,MAAA;GACT;AACAuB,EAAAA,MAAQ,EAAA;AACNC,IAAAA,IAAM,EAAA,CAAA;AACNC,IAAAA,gBAAkB,EAAA,EAAA;AACpB,GAAA;AACF,CAAC;;;;"}

package/lib/cjs/components/Silder/Silder.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_chunks/ShnnCuH9.js');
+var React = require('react');
+var reactNative = require('react-native');
+var components_Silder_interface_index = require('../../_chunks/RPaDcSae.js');
+var components_Silder_styles = require('./styles.js');
+require('@xhsreds/reds-token-next');
+
+var Silder = function Silder(_ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick,
+    trackOnColor = _ref.trackOnColor,
+    trackOffColor = _ref.trackOffColor;
+  var isControlled = React.useRef(value !== void 0);
+  var _useState = React.useState(defaultValue),
+    _useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
+    isOn = _useState2[0],
+    setIsOn = _useState2[1];
+  var animatedValue = React.useRef(new reactNative.Animated.Value(defaultValue ? 18 : 2)).current;
+  var thumbTranslateX = animatedValue.interpolate({
+    inputRange: [2, 18],
+    outputRange: [2, 18]
+  });
+  React.useEffect(function () {
+    onChange === null || onChange === void 0 || onChange(!!isOn);
+  }, [isOn]);
+  React.useEffect(function () {
+    isControlled.current && setIsOn(value);
+  }, [value]);
+  var toggleSilder = React.useCallback(function (e) {
+    onClick === null || onClick === void 0 || onClick(e);
+    !isControlled.current && setIsOn(function (v) {
+      return !v;
+    });
+  }, []);
+  var dynamicStyles = React.useMemo(function () {
+    reactNative.Animated.timing(animatedValue, {
+      toValue: isOn ? 18 : 2,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+    return {
+      backgroundColor: isOn ? trackOnColor : trackOffColor,
+      transform: [{
+        translateX: thumbTranslateX
+      }]
+    };
+  }, [isOn]);
+  return /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
+    onPress: function onPress(e) {
+      return toggleSilder(e);
+    }
+  }, /* @__PURE__ */React.createElement(reactNative.View, {
+    style: [components_Silder_styles.default.SilderContainer, {
+      backgroundColor: dynamicStyles.backgroundColor
+    }]
+  }, /* @__PURE__ */React.createElement(reactNative.Animated.View, {
+    style: [components_Silder_styles.default.thumb, {
+      transform: dynamicStyles.transform
+    }]
+  })));
+};
+Silder.defaultProps = components_Silder_interface_index.SilderDefaultProps;
+
+exports.default = Silder;
+//# sourceMappingURL=Silder.js.map

package/lib/cjs/components/Silder/Silder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Silder.js","sources":["../../../../src/components/Silder/Silder.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport { View, TouchableWithoutFeedback, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsSilder, SilderDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\n\nconst Silder = ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSilder) => {\n  const isControlled = useRef(value !== undefined);\n  const [isOn, setIsOn] = useState(defaultValue);\n\n  const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n  const thumbTranslateX = animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] });\n\n  useEffect(() => {\n    onChange?.(!!isOn);\n  }, [isOn]);\n\n  useEffect(() => {\n    isControlled.current && setIsOn(value);\n  }, [value]);\n\n  const toggleSilder = useCallback((e: GestureResponderEvent) => {\n    onClick?.(e);\n    !isControlled.current && setIsOn((v) => !v);\n  }, []);\n\n  const dynamicStyles = useMemo(() => {\n    Animated.timing(animatedValue, {\n      toValue: isOn ? 18 : 2,\n      duration: 200,\n      useNativeDriver: true,\n    }).start();\n    return {\n      backgroundColor: isOn ? trackOnColor : trackOffColor,\n      transform: [{ translateX: thumbTranslateX }],\n    };\n  }, [isOn]);\n\n  return (\n    <TouchableWithoutFeedback onPress={(e) => toggleSilder(e)}>\n      <View style={[styles.SilderContainer, { backgroundColor: dynamicStyles.backgroundColor }]}>\n        <Animated.View style={[styles.thumb, { transform: dynamicStyles.transform }]}></Animated.View>\n      </View>\n    </TouchableWithoutFeedback>\n  );\n};\n\nSilder.defaultProps = SilderDefaultProps;\n\nexport default Silder;\n"],"names":["Silder","_ref","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","useRef","_useState","useState","_useState2","_slicedToArray","isOn","setIsOn","animatedValue","Animated","Value","current","thumbTranslateX","interpolate","inputRange","outputRange","useEffect","toggleSilder","useCallback","e","v","dynamicStyles","useMemo","timing","toValue","duration","useNativeDriver","start","backgroundColor","transform","translateX","React","createElement","TouchableWithoutFeedback","onPress","View","style","styles","SilderContainer","thumb","defaultProps","SilderDefaultProps"],"mappings":"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"}

package/lib/cjs/components/Silder/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Silder_Silder = require('./Silder.js');
+var components_Silder_interface_index = require('../../_chunks/RPaDcSae.js');
+require('../../_chunks/ShnnCuH9.js');
+require('react');
+require('react-native');
+require('./styles.js');
+require('@xhsreds/reds-token-next');
+
+
+
+exports.Silder = components_Silder_Silder.default;
+exports.default = components_Silder_Silder.default;
+exports.SilderType = components_Silder_interface_index.index;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Silder/index.js.map

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

package/lib/cjs/components/Silder/interface/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+require('@xhsreds/reds-token-next');
+var components_Silder_interface_index = require('../../../_chunks/RPaDcSae.js');
+
+
+
+exports.SilderDefaultProps = components_Silder_interface_index.SilderDefaultProps;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Silder/interface/index.js.map

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

package/lib/cjs/components/Silder/styles.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var redsTokenNext = require('@xhsreds/reds-token-next');
+var reactNative = require('react-native');
+
+var styles = reactNative.StyleSheet.create({
+  SilderContainer: {
+    width: 40,
+    height: 24,
+    borderRadius: 15,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  thumb: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: redsTokenNext.alwaysColor.White,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    left: 0
+  }
+});
+
+exports.default = styles;
+//# sourceMappingURL=styles.js.map