respond-framework/dist/modules/replayTools/components/SearchInputForm.js

create as fast you think

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.s = exports.default = void 0;
var _react2 = require("react");
var React = _react2;
var _respond = require("respond-framework/modules/replayTools/respond.js");
var _reactNative = require("react-native");
var _Radio = require("../widgets/Radio.js");
var _Input = require("../widgets/Input.js");
var _Remove = require("../icons/Remove.js");
var _Pressable = require("../widgets/Pressable.js");
const SearchInputForm = (0, _react2.forwardRef)(function SearchInputForm(props, ref) {
  return ((props, {
    events,
    searched,
    filter
  }, ref) => /*#__PURE__*/React.createElement(_reactNative.View, {
    style: s.c
  }, /*#__PURE__*/React.createElement(_Input.default, {
    event: events.searchTests,
    value: searched,
    style: s.input,
    placeholder: filter === 'tests' ? 'search tests' : 'search snaps /regex/',
    ref: ref
  }), !!searched && /*#__PURE__*/React.createElement(_Pressable.default, {
    style: s.remove,
    event: events.searchTests,
    arg: {
      value: ''
    }
  }, /*#__PURE__*/React.createElement(_Remove.default, {
    color: "rgba(255, 255, 255, .65)"
  })), /*#__PURE__*/React.createElement(_Radio.default, {
    options: filterOptions,
    event: events.toggleFilter,
    name: "filter",
    value: filter,
    style: s.radios,
    styleLeft: s.left,
    styleRight: s.right
  })))(props, (0, _respond.useRespond)(), ref);
});
var _default = exports.default = SearchInputForm;
const filterOptions = [{
  value: 'tests',
  text: 'Tests'
}, {
  value: 'snaps',
  text: 'Snaps'
}];
const s = exports.s = _reactNative.StyleSheet.create({
  c: {
    marginHorizontal: 10,
    height: 35,
    marginBottom: 2,
    zIndex: -1
  },
  input: {
    marginTop: 0,
    paddingRight: 144
  },
  remove: {
    position: 'absolute',
    top: 7,
    right: 122,
    width: 23,
    height: 23,
    zIndex: 1
  },
  radios: {
    position: 'absolute',
    right: 0,
    top: 0,
    justifyContent: 'flex-end',
    height: '100%',
    marginTop: 0
  },
  left: {
    width: 56,
    borderTopLeftRadius: 2,
    borderBottomLeftRadius: 2
  },
  right: {
    width: 60,
    borderTopRightRadius: 3,
    borderBottomRightRadius: 3
  }
});