react95-native/dist/module/components/Select/SelectBase.js

Refreshed Windows 95 style UI components for your React Native app

import React, { useState } from 'react';
import { StyleSheet, View, TouchableHighlight } from 'react-native';
import { withTheme } from '../../core/theming';
import { blockSizes } from '../../styles/styles';
import { Text } from '../..'; // TODO: allow for no option selected

const SelectItem = ({
  isSelected,
  onPress,
  option,
  theme
}) => {
  const [isPressed, setIsPressed] = useState(false);
  return /*#__PURE__*/React.createElement(TouchableHighlight, {
    onPress: () => onPress(option),
    onHideUnderlay: () => setIsPressed(false),
    onShowUnderlay: () => setIsPressed(true),
    underlayColor: "none" // delay to prevent item highlighting on scroll
    ,
    delayPressIn: 70,
    activeOpacity: 1
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.center, styles.optionWrapper, {
      borderColor: isPressed ? theme.focusSecondary : 'transparent',
      backgroundColor: isPressed || isSelected ? theme.hoverBackground : theme.canvas
    }]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.optionText, {
      color: isPressed || isSelected ? theme.canvasTextInvert : theme.canvasText
    }]
  }, option.label)));
};

const SelectItemWithTheme = withTheme(SelectItem);
const selectHeight = blockSizes.md + 2;
const styles = StyleSheet.create({
  center: {
    flexGrow: 1,
    flex: 1,
    height: '100%',
    justifyContent: 'center'
  },
  optionWrapper: {
    height: selectHeight - 4,
    borderWidth: 2,
    borderStyle: 'dotted'
  },
  optionText: {
    fontSize: 16,
    paddingLeft: 6
  }
});
export default function getSelectOptions({
  options,
  values,
  onChange,
  theme
}) {
  const selectedOptions = options.filter(option => values.includes(option.value));
  const optionItems = options.map(option => /*#__PURE__*/React.createElement(SelectItemWithTheme, {
    theme: theme,
    key: option.value,
    option: option,
    isSelected: selectedOptions.includes(option),
    onPress: onChange
  }));
  return [selectedOptions, optionItems];
}
//# sourceMappingURL=SelectBase.js.map