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

Refreshed Windows 95 style UI components for your React Native app

"use strict";

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

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

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

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

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

var _shadow = _interopRequireDefault(require("../../styles/shadow"));

var _SelectBase = _interopRequireDefault(require("./SelectBase"));

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

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 Select = ({
  disabled = false,
  menuMaxHeight,
  onChange,
  options = [],
  style,
  theme,
  value,
  ...rest
}) => {
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
  const [isPressed, setIsPressed] = (0, _react.useState)(false);

  function handleOptionSelect(option) {
    onChange(option.value);
    setIsOpen(false);
  }

  function getLabelContainerBackgroundColor() {
    if (disabled) {
      return theme.material;
    }

    if (isPressed) {
      return theme.hoverBackground;
    }

    return theme.canvas;
  }

  const [selectedOptions, selectOptions] = (0, _SelectBase.default)({
    options,
    values: [value],
    onChange: handleOptionSelect,
    theme
  });
  const selectedOption = selectedOptions[0]; // TODO: close dropdown when user touches outside of component
  // TODO: native prop to use native select

  const borderStyles = (0, _styles.buildBorderStyles)(theme);
  const textStyles = (0, _styles.builtTextStyles)(theme);
  return /*#__PURE__*/_react.default.createElement(_.Panel, _extends({
    theme: theme,
    variant: "cutout",
    background: disabled ? 'material' : 'canvas',
    style: [styles.wrapper, style]
  }, rest), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, {
    onPress: () => setIsOpen(currentIsOpen => !currentIsOpen),
    activeOpacity: 1,
    disabled: disabled,
    onHideUnderlay: () => setIsPressed(false),
    onShowUnderlay: () => setIsPressed(true) // TODO: accessibility
    // accessibilityTraits
    // accessibilityComponentType
    // accessibilityRole
    // accessibilityState
    ,
    underlayColor: "none"
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.inner]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.flex]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.selectValue, {
      backgroundColor: disabled ? theme.material : theme.canvas
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.center, {
      borderWidth: 2,
      borderColor: disabled ? theme.material : theme.canvas,
      backgroundColor: getLabelContainerBackgroundColor()
    }, isPressed && borderStyles.focusSecondaryOutline]
  }, /*#__PURE__*/_react.default.createElement(_.Text, {
    theme: theme,
    style: [styles.textValue, disabled ? textStyles.disabled : textStyles.default, !disabled && isPressed && {
      color: isPressed ? theme.canvasTextInvert : theme.canvasText
    }]
  }, selectedOption.label))), /*#__PURE__*/_react.default.createElement(_.Panel, {
    theme: theme,
    variant: isPressed ? 'default' : 'raised',
    invert: isPressed,
    style: [styles.fakeButton]
  }, /*#__PURE__*/_react.default.createElement(_.ArrowIcon, {
    theme: theme,
    segments: 4,
    direction: "down",
    disabled: disabled,
    style: {
      paddingTop: isPressed ? 2 : 0
    }
  }))), isOpen && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.options, {
      height: menuMaxHeight || 'auto',
      backgroundColor: theme.canvas,
      borderColor: theme.borderDarkest
    }]
  }, /*#__PURE__*/_react.default.createElement(_.ScrollView, {
    theme: theme
  }, selectOptions)))));
};

const selectHeight = _styles.blockSizes.md;

const styles = _reactNative.StyleSheet.create({
  wrapper: {
    height: selectHeight,
    alignSelf: 'flex-start',
    padding: 0
  },
  inner: {
    position: 'relative',
    padding: 4
  },
  flex: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignContent: 'center',
    alignItems: 'center',
    height: '100%'
  },
  selectValue: {
    flexGrow: 1,
    flex: 1,
    height: '100%',
    padding: 2
  },
  center: {
    flexGrow: 1,
    flex: 1,
    height: '100%',
    justifyContent: 'center'
  },
  textValue: {
    fontSize: 16,
    paddingHorizontal: 4
  },
  fakeButton: {
    position: 'relative',
    height: '100%',
    width: 30,
    padding: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  options: {
    position: 'absolute',
    top: selectHeight,
    left: 0,
    right: 0,
    borderWidth: 2,
    padding: 2,
    display: 'flex',
    ...(0, _shadow.default)(2)
  }
});

var _default = (0, _theming.withTheme)(Select);

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