@fruits-chain/react-native-xiaoshu/lib/module/popover/popover.js

🌈 React Native UI library

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); }

import React, { useState, useRef, useCallback, useMemo, memo, isValidElement, Children, cloneElement } from 'react';
import { ScrollView, TouchableOpacity } from 'react-native';
import RNPopoverView from 'react-native-popover-view';
import { varCreator as varCreatorButton } from '../button/style';
import { getDefaultValue } from '../helpers';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';

const defaultOnSelect = () => {};

const Popover = _ref => {
  let {
    children,
    content,
    dark = false,
    triggerStyle,
    onSelect = defaultOnSelect,
    disabled,
    renderContentComponent,
    duration,
    backgroundStyle,
    popoverStyle,
    ...restProps
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const CV_BUTTON = Theme.createVar(TOKENS, varCreatorButton);
  const STYLES = Theme.createStyle(CV, styleCreator);
  duration = getDefaultValue(duration, TOKENS.animation_duration_base);
  const touchable = useRef(null);
  const [showPopover, setShowPopover] = useState(false);
  const animationConfig = useMemo(() => ({
    duration
  }), [duration]);
  const openPopover = useCallback(() => {
    setShowPopover(true);
  }, []);
  const closePopover = useCallback(() => {
    setShowPopover(false);
  }, []);

  const _onSelect = (value, index) => {
    if (onSelect) {
      onSelect(value, index);
    }

    closePopover();
  };

  const renderContent = () => {
    const items = Children.map(content, (child, index) => {
      if (! /*#__PURE__*/isValidElement(child)) {
        return child;
      }

      return /*#__PURE__*/cloneElement(child, {
        onSelect: v => _onSelect(v, index),
        dark: dark
      });
    });

    if (typeof renderContentComponent === 'function') {
      return renderContentComponent(items, closePopover);
    }

    return /*#__PURE__*/React.createElement(ScrollView, null, items);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
    ref: touchable,
    onPress: openPopover,
    style: [STYLES.trigger, triggerStyle],
    disabled: disabled,
    activeOpacity: CV_BUTTON.button_active_opacity
  }, children), /*#__PURE__*/React.createElement(RNPopoverView, _extends({}, restProps, {
    from: touchable,
    isVisible: showPopover,
    backgroundStyle: [STYLES.background, backgroundStyle],
    popoverStyle: [STYLES.content, dark ? STYLES.content_dark : null, popoverStyle],
    onRequestClose: closePopover,
    animationConfig: animationConfig
  }), renderContent()));
};

export default /*#__PURE__*/memo(Popover);
//# sourceMappingURL=popover.js.map