@fruits-chain/react-native-xiaoshu/lib/commonjs/switch/index.js

🌈 React Native UI library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _helpers = require("../helpers");

var _hooks = require("../hooks");

var _loadingCircular = _interopRequireDefault(require("../loading/loading-circular"));

var _style = require("../loading/style");

var _theme = _interopRequireDefault(require("../theme"));

var _style2 = require("./style");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Switch 开关
 * @description 用于在打开和关闭状态之间进行切换。
 */
function Switch(_ref) {
  let {
    size,
    disabled = false,
    loading = false,
    activeValue = true,
    inactiveValue = false,
    inactiveColor,
    activeColor,
    onPress,
    beforeChange,
    ...restProps
  } = _ref;
  const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(0));
  const [value, onChange] = (0, _hooks.useControllableValue)(restProps, {
    defaultValue: inactiveValue
  });

  const TOKENS = _theme.default.useThemeTokens();

  const CV = _theme.default.createVar(TOKENS, _style2.varCreator);

  const CV_LOADING = _theme.default.createVar(TOKENS, _style.varCreator);

  const STYLES = _theme.default.createStyle(CV, _style2.styleCreator);

  const [switchWidth, switchHeight, nodeSize, translateXValueEnd, translateXValueStart] = (0, _react.useMemo)(() => {
    const _innerMiniPadding = 2;

    const _unitSize = (0, _helpers.getDefaultValue)(size, CV.switch_size);

    const _switchWidth = _unitSize * CV.switch_width_ratio;

    const _switchHeight = _unitSize * CV.switch_height_ratio;

    const _nodeSize = _unitSize * CV.switch_node_size_ratio;

    const _isInnerNode = _switchHeight - _nodeSize < _innerMiniPadding * 2;

    const _nodeRealSize = _isInnerNode ? _nodeSize - _innerMiniPadding * 2 : _nodeSize;

    const _innerPadding = _isInnerNode ? _innerMiniPadding : (_switchHeight - _nodeSize) / 2;

    const _translateXValueEnd = _switchWidth - _nodeRealSize - _innerPadding;

    const _translateXValueStart = _innerPadding;
    return [_switchWidth, _switchHeight, _nodeRealSize, _translateXValueEnd, _translateXValueStart];
  }, [CV.switch_height_ratio, CV.switch_node_size_ratio, CV.switch_size, CV.switch_width_ratio, size]);
  const active = value === activeValue;

  const onPressTouchable = () => {
    onPress === null || onPress === void 0 ? void 0 : onPress();

    if (!disabled && !loading) {
      const newValue = active ? inactiveValue : activeValue;
      (0, _helpers.callInterceptor)(beforeChange, {
        args: [newValue],
        done: () => {
          onChange(newValue);
        }
      });
    }
  };

  (0, _react.useEffect)(() => {
    const actionValue = _reactNative.Animated.timing(translateX.current, // 动画中的变量值
    {
      toValue: active ? translateXValueEnd : translateXValueStart,
      duration: CV.switch_transition_duration,
      useNativeDriver: false
    });

    actionValue.start();
    return () => {
      // 停止动画
      if (actionValue) {
        actionValue.stop();
      }
    };
  }, [active, translateXValueStart, translateXValueEnd, CV.switch_transition_duration]);
  const switchStyles = [STYLES.switch, {
    width: switchWidth,
    height: switchHeight,
    borderRadius: switchHeight / 2,
    // 当前过渡不支持 color/backgroundColor
    // 参考：https://stackoverflow.com/a/60586628
    backgroundColor: active ? activeColor || CV.switch_on_background_color : inactiveColor || CV.switch_background_color
  }, disabled ? STYLES.disabled : null];
  const nodeStyleSummary = [STYLES.node, {
    width: nodeSize,
    height: nodeSize,
    borderRadius: nodeSize / 2,
    transform: [{
      translateX: translateX.current
    }]
  }];
  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
    onPress: onPressTouchable
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: switchStyles
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: nodeStyleSummary
  }, loading ? /*#__PURE__*/_react.default.createElement(_loadingCircular.default, {
    size: nodeSize / 4 * 3,
    color: active ? !(0, _isUndefined.default)(activeColor) ? activeColor : CV.switch_on_background_color : !(0, _isUndefined.default)(inactiveColor) ? inactiveColor : CV_LOADING.loading_text_color
  }) : null)));
}

var _default = /*#__PURE__*/(0, _react.memo)(Switch);

exports.default = _default;
//# sourceMappingURL=index.js.map