@prosperitainova/dumbo-react-native/lib/commonjs/components/Search/index.js

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Search = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _colors = require("../../styles/colors");
var _Button = require("../Button");
var _Text = require("../Text");
var _ = _interopRequireDefault(require("@carbon/icons/es/close/20"));
var _2 = _interopRequireDefault(require("@carbon/icons/es/search/20"));
var _defaultText = require("../../constants/defaultText");
var _BaseTextInputs = require("../BaseTextInputs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for Search component */

/**
 * Search component for rendering a search input
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Search.tsx | Example code}
 */
class Search extends _react.default.Component {
  state = {
    hasFocus: false
  };
  get localStyles() {
    return _reactNative.StyleSheet.create({
      textBoxArea: {
        flexDirection: 'row'
      },
      textBoxWrapper: {
        flex: 1
      }
    });
  }
  get styles() {
    const {
      light
    } = this.props;
    return (0, _BaseTextInputs.getTextInputStyle)(light);
  }
  onFocus = event => {
    const {
      onFocus
    } = this.props;
    if (typeof onFocus === 'function') {
      onFocus(event);
    }
    this.setState({
      hasFocus: true
    });
  };
  onBlur = event => {
    const {
      onBlur
    } = this.props;
    if (typeof onBlur === 'function') {
      onBlur(event);
    }
    this.setState({
      hasFocus: false
    });
  };
  onChange = value => {
    const {
      onChangeText
    } = this.props;
    if (typeof onChangeText === 'function') {
      onChangeText(value);
    }
    this.setState({});
  };
  get clearText() {
    const {
      disabled,
      clearTextButtonText,
      value,
      onTextClearPress
    } = this.props;
    const clearTextCallback = event => {
      if (typeof onTextClearPress === 'function') {
        onTextClearPress(value, event);
      }
      this.onChange('');
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
      overrideColor: disabled ? (0, _colors.getColor)('iconDisabled') : (0, _colors.getColor)('iconSecondary'),
      disabled: disabled,
      style: this.styles.passwordRevealButton,
      iconOnlyMode: true,
      kind: "ghost",
      icon: _.default,
      text: clearTextButtonText || _defaultText.defaultText.clear,
      onPress: clearTextCallback
    });
  }
  get searchIcon() {
    const {
      disabled,
      searchIconText,
      onSubmitEditing
    } = this.props;
    const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.passwordRevealButton);
    finalStyle.right = undefined;
    finalStyle.left = 0;
    finalStyle.top = 1;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
      overrideColor: disabled ? (0, _colors.getColor)('iconDisabled') : (0, _colors.getColor)('iconSecondary'),
      disabled: disabled,
      style: finalStyle,
      iconOnlyMode: true,
      kind: "ghost",
      icon: _2.default,
      text: searchIconText || _defaultText.defaultText.search,
      onPress: onSubmitEditing
    });
  }
  render() {
    const {
      label,
      value,
      autoCorrect,
      autoCapitalize,
      placeholder,
      maxLength,
      onSubmitEditing,
      componentProps,
      style,
      disabled,
      labelBreakMode,
      buttonProps
    } = this.props;
    const {
      hasFocus
    } = this.state;
    let textBoxStyle = (0, _helpers.styleReferenceBreaker)(this.styles.textBox);
    if (disabled) {
      textBoxStyle = (0, _helpers.styleReferenceBreaker)(this.styles.textBoxDisabled);
    } else if (hasFocus) {
      textBoxStyle = (0, _helpers.styleReferenceBreaker)(this.styles.textBoxActive);
    }
    textBoxStyle.paddingLeft = 50;
    textBoxStyle.paddingRight = 50;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style || {}),
      accessibilityLabel: label,
      children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        style: this.styles.label,
        type: "label-02",
        text: label,
        breakMode: labelBreakMode
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: this.localStyles.textBoxArea,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: (0, _helpers.styleReferenceBreaker)(this.styles.textBoxWrapper, this.localStyles.textBoxWrapper),
          accessibilityLabel: label,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
            editable: !disabled,
            autoCapitalize: autoCapitalize,
            style: textBoxStyle,
            value: value,
            onSubmitEditing: onSubmitEditing,
            onChangeText: this.onChange,
            autoCorrect: autoCorrect,
            placeholder: placeholder,
            placeholderTextColor: (0, _colors.getColor)('textPlaceholder'),
            onBlur: this.onBlur,
            onFocus: this.onFocus,
            maxLength: maxLength,
            textAlignVertical: "top",
            ...(componentProps || {})
          }), this.searchIcon, !!value && this.clearText]
        }), !!buttonProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
          ...buttonProps
        })]
      })]
    });
  }
}
exports.Search = Search;
//# sourceMappingURL=index.js.map