@wordpress/components/build/mobile/picker/index.android.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _element = require("@wordpress/element");

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

var _i18n = require("@wordpress/i18n");

var _compose = require("@wordpress/compose");

var _components = require("@wordpress/components");

var _bottomSheet = _interopRequireDefault(require("../bottom-sheet"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function Separator() {
  const separatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.separator, _styles.default.separatorDark);
  return (0, _element.createElement)(_reactNative.View, {
    style: separatorStyle
  });
}

class Picker extends _element.Component {
  constructor() {
    super(...arguments);
    this.onClose = this.onClose.bind(this);
    this.onCellPress = this.onCellPress.bind(this);
    this.state = {
      isVisible: false
    };
  }

  presentPicker() {
    this.setState({
      isVisible: true
    });
  }

  onClose() {
    this.setState({
      isVisible: false
    });
  }

  onCellPress(value) {
    const {
      onChange
    } = this.props;
    onChange(value);
    this.onClose();
  }

  getOptions() {
    const {
      options,
      leftAlign
    } = this.props;
    return options.map(option => (0, _element.createElement)(_reactNative.View, {
      key: `${option.label}-${option.value}`
    }, options.length > 1 && option.separated && (0, _element.createElement)(Separator, null), (0, _element.createElement)(_bottomSheet.default.Cell, {
      icon: option.icon,
      leftAlign: leftAlign,
      label: option.label,
      separatorType: 'none',
      onPress: () => this.onCellPress(option.value),
      disabled: option.disabled,
      style: option.disabled && _styles.default.disabled
    })));
  }

  render() {
    const {
      hideCancelButton,
      title
    } = this.props;
    const {
      isVisible
    } = this.state;
    return (0, _element.createElement)(_bottomSheet.default, {
      isVisible: isVisible,
      onClose: this.onClose,
      style: {
        paddingBottom: 20
      },
      hideHeader: true
    }, (0, _element.createElement)(_components.PanelBody, {
      title: title,
      style: _styles.default.panelBody
    }, this.getOptions(), !hideCancelButton && (0, _element.createElement)(_components.TextControl, {
      label: (0, _i18n.__)('Cancel'),
      onPress: this.onClose,
      separatorType: 'none'
    })));
  }

}

exports.default = Picker;
//# sourceMappingURL=index.android.js.map