react95-native/dist/commonjs/components/SwitchBase/SwitchBase.js

Refreshed Windows 95 style UI components for your React Native app

"use strict";

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

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

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

var _theming = require("../../core/theming");

var _styles = require("../../styles/styles");

var _styleElements = require("../../styles/styleElements");

var _ = require("../..");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const checkboxSize = 20;
const radioSize = 20;

// TODO: see if ref is passed
const SwitchBase = ({
  component,
  disabled = false,
  label = '',
  variant = 'default',
  onPress = () => {},
  status,
  style = {},
  theme,
  ...rest
}) => {
  const [isPressed, setIsPressed] = _react.default.useState(false);

  const isRadio = component === 'radio';
  const switchSize = !isRadio ? checkboxSize : radioSize;
  const boxSize = variant === 'flat' ? switchSize - 4 : switchSize;
  const borderRadius = isRadio ? boxSize / 2 : 0;
  const checked = status === 'checked';
  const borders = (0, _styles.buildBorderStyles)(theme);

  const renderCheckmark = () => {
    if (checked) {
      return isRadio ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: {
          borderRadius: 6,
          height: 6,
          width: 6,
          backgroundColor: disabled ? theme.checkmarkDisabled : theme.checkmark
        }
      }) : /*#__PURE__*/_react.default.createElement(_.CheckmarkIcon, {
        disabled: disabled
      });
    }

    if (status === 'indeterminate') {
      return /*#__PURE__*/_react.default.createElement(_reactNative.ImageBackground, {
        style: [{
          width: '100%',
          height: '100%'
        }],
        imageStyle: {
          resizeMode: 'repeat'
        },
        source: {
          uri: {
            default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
            disabled: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC'
          }[disabled ? 'disabled' : 'default']
        }
      });
    }

    return /*#__PURE__*/_react.default.createElement(_.Text, null, " ");
  };

  const getBackgroundColor = () => {
    if (variant === 'flat') {
      return disabled ? theme.flatLight : theme.canvas;
    }

    return disabled ? theme.material : theme.canvas;
  };

  const getAccessibilityComponentType = () => {
    if (isRadio) {
      return checked ? 'radiobutton_checked' : 'radiobutton_unchecked';
    }

    return 'button';
  };

  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, _extends({
    style: [styles.wrapper],
    onPress: onPress,
    activeOpacity: 1,
    disabled: disabled,
    onHideUnderlay: () => setIsPressed(false),
    onShowUnderlay: () => setIsPressed(true) // TODO: check if those accessibility properties are correct
    ,
    accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
    accessibilityComponentType: getAccessibilityComponentType(),
    accessibilityRole: component,
    accessibilityState: {
      disabled,
      checked
    },
    accessibilityLiveRegion: "polite",
    underlayColor: "none"
  }, rest), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.content, style]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.switchSymbol, {
      width: boxSize,
      height: boxSize,
      backgroundColor: getBackgroundColor(),
      borderRadius,
      overflow: 'hidden'
    }]
  }, renderCheckmark(), /*#__PURE__*/_react.default.createElement(_styleElements.Border, {
    variant: variant === 'flat' ? 'flat' : 'cutout',
    radius: borderRadius
  })), Boolean(label) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.labelWrapper, !disabled && isPressed ? borders.focusOutline : {
      borderWidth: 2,
      borderColor: 'transparent'
    }]
  }, /*#__PURE__*/_react.default.createElement(_.Text, {
    disabled: disabled,
    style: [styles.label]
  }, label))));
};

const styles = _reactNative.StyleSheet.create({
  wrapper: {
    width: 'auto',
    alignSelf: 'flex-start',
    padding: 4
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    width: 'auto'
  },
  switchSymbol: {
    marginRight: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  labelWrapper: {
    paddingHorizontal: 4
  },
  label: {
    fontSize: 16
  }
});

const SwitchBaseWithTheme = (0, _theming.withTheme)(SwitchBase);
exports.SwitchBase = SwitchBaseWithTheme;
//# sourceMappingURL=SwitchBase.js.map