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

Refreshed Windows 95 style UI components for your React Native app

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); }

import React from 'react';
import { StyleSheet, TouchableHighlight, ImageBackground, View } from 'react-native';
import { withTheme } from '../../core/theming';
import { buildBorderStyles } from '../../styles/styles';
import { Border } from '../../styles/styleElements';
import { Text, CheckmarkIcon } from '../..';
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.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 = buildBorderStyles(theme);

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

    if (status === 'indeterminate') {
      return /*#__PURE__*/React.createElement(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.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.createElement(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.createElement(View, {
    style: [styles.content, style]
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.switchSymbol, {
      width: boxSize,
      height: boxSize,
      backgroundColor: getBackgroundColor(),
      borderRadius,
      overflow: 'hidden'
    }]
  }, renderCheckmark(), /*#__PURE__*/React.createElement(Border, {
    variant: variant === 'flat' ? 'flat' : 'cutout',
    radius: borderRadius
  })), Boolean(label) && /*#__PURE__*/React.createElement(View, {
    style: [styles.labelWrapper, !disabled && isPressed ? borders.focusOutline : {
      borderWidth: 2,
      borderColor: 'transparent'
    }]
  }, /*#__PURE__*/React.createElement(Text, {
    disabled: disabled,
    style: [styles.label]
  }, label))));
};

const styles = 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 = withTheme(SwitchBase);
export { SwitchBaseWithTheme as SwitchBase };
//# sourceMappingURL=SwitchBase.js.map