respond-framework/dist/modules/replayTools/widgets/Dropdown.js

create as fast you think

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var React = _react;
var _reactNative = require("react-native");
var _Pressable = require("./Pressable.js");
var _styles = require("../styles.js");
var _Caret = require("../icons/Caret.js");
var _findSelectedOption = require("../helpers/findSelectedOption.js");
var _useClickOut = require("../hooks/useClickOut.js");
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(({
  event,
  name,
  value,
  options = [],
  disabled,
  createLabel = o => name + ': ' + (o?.label || o?.value || 'none'),
  selectedOption = _findSelectedOption.default,
  style,
  styleLabel,
  styleMenu,
  styleOption,
  styleOptionLabel,
  styleDefaultOption,
  styleDisabled,
  zIndex = style?.zIndex ?? 1
}) => {
  const [open, set] = (0, _react.useState)(false);
  const toggle = (0, _react.useCallback)(() => set(open => !open), [set]);
  const selected = selectedOption(options, value);
  const label = createLabel(selected);
  const styles = [s.c, style, disabled && s.disabled, disabled && styleDisabled, {
    zIndex
  }];
  const stylesLabel = [s.label, styleLabel, !selected && styleDefaultOption];
  const ref = (0, _useClickOut.default)(set, open); // close menu on click out

  return /*#__PURE__*/React.createElement(_Pressable.default, {
    onPress: toggle,
    style: styles,
    disabled: disabled,
    ref: ref
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: stylesLabel,
    numberOfLines: 1
  }, label), /*#__PURE__*/React.createElement(_Caret.default, null), open && /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
    style: [s.menu, styleMenu, {
      zIndex
    }]
  }, options.map((o, i) => /*#__PURE__*/React.createElement(Option, _extends({}, o, {
    key: i,
    last: i === options.length - 1,
    name: name,
    onPress: toggle,
    event: event,
    styleOption: styleOption,
    styleOptionLabel: styleOptionLabel
  })))));
});
const Option = ({
  name,
  value,
  label = value,
  onPress,
  event,
  last,
  styleOption,
  styleOptionLabel
}) => {
  const styles = [s.option, styleOption, last && {
    borderBottomWidth: 0
  }];
  const stylesLabel = [s.optionLabel, styleOptionLabel];
  const arg = {
    [name]: value
  };
  return /*#__PURE__*/React.createElement(_Pressable.default, {
    style: styles,
    event: event,
    arg: arg,
    onPress: onPress,
    name: name
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: stylesLabel
  }, label));
};
const s = _reactNative.StyleSheet.create({
  c: {
    position: 'relative',
    height: 35,
    marginTop: 9,
    paddingHorizontal: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 5,
    backgroundColor: 'rgb(34, 39, 47)'
  },
  menu: {
    position: 'absolute',
    zIndex: 1,
    top: 35,
    left: 0,
    width: '100%',
    maxHeight: 35 * 4,
    backgroundColor: _styles.colors.blackLight,
    borderColor: _styles.colors.grey,
    borderWidth: _reactNative.StyleSheet.hairlineWidth,
    borderTopWidth: 0,
    borderBottomRightRadius: 5,
    borderBottomLeftRadius: 5,
    opacity: 1
  },
  option: {
    width: '100%',
    height: 35,
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: 12,
    backgroundColor: _styles.colors.greyDark,
    borderColor: _styles.colors.grey,
    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
  },
  label: {
    fontSize: 15,
    color: _styles.colors.tan
  },
  optionLabel: {
    fontSize: 15,
    color: _styles.colors.turqoise
  },
  disabled: {
    backgroundColor: _styles.colors.grey
  }
});