@td-design/react-native/lib/module/button-group/index.js

react-native UI组件库

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useEffect } from 'react';
import { Keyboard } from 'react-native';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
import Box from '../box';
import Flex from '../flex';
import ButtonItem from './Item';
const ButtonGroup = _ref => {
  let {
    disabledItems = [],
    containerStyle,
    options = [],
    activeIndex,
    itemStyle,
    size,
    activeOpacity = 0.6
  } = _ref;
  const [active, setActive] = useSafeState(activeIndex);
  useEffect(() => {
    setActive(activeIndex);
  }, [activeIndex]);
  if (options.length === 0) return null;
  const handlePress = useMemoizedFn(index => {
    Keyboard.dismiss();
    setActive(index);
  });
  return /*#__PURE__*/React.createElement(Box, {
    style: containerStyle
  }, /*#__PURE__*/React.createElement(Flex, {
    flexWrap: "nowrap"
  }, options.map((item, index, array) => /*#__PURE__*/React.createElement(ButtonItem, _extends({
    key: index
  }, item, {
    activeOpacity,
    index: index,
    size: size,
    disabled: disabledItems.includes(index),
    onItemPress: handlePress,
    itemStyle: itemStyle,
    isCurrent: active === index,
    isFirst: index === 0,
    isLast: index === array.length - 1
  })))));
};
ButtonGroup.displayName = 'ButtonGroup';
export default ButtonGroup;
//# sourceMappingURL=index.js.map