chakra-ui-bottom-navigation/dist/chakra-ui-bottom-navigation.esm.js

Bottom navigation component built for chakra

import { forwardRef, useMultiStyleConfig, omitThemingProps, chakra, Icon, createStylesContext, mergeThemeOverride } from '@chakra-ui/react';
import { createContext, mergeRefs } from '@chakra-ui/react-utils';
import { cx, __DEV__, ariaAttr, dataAttr } from '@chakra-ui/utils';
import React from 'react';
import { createDescendantContext } from '@chakra-ui/descendant';
import { mode } from '@chakra-ui/theme-tools';

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

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var _createDescendantCont = /*#__PURE__*/createDescendantContext(),
    BottomNavigationDescendantsProvider = _createDescendantCont[0],
    useBottomNavigationDescendantsContext = _createDescendantCont[1],
    useBottomNavigationDescendants = _createDescendantCont[2],
    useBottomNavigationDescendant = _createDescendantCont[3];

var _createContext = /*#__PURE__*/createContext({
  name: 'BottomNavigationContext',
  errorMessage: 'useBottomNavigationContext: `context` is undefined. Seems you forgot to wrap the accordion components in `<BottomNavigation />`'
}),
    BottomNavigationProvider = _createContext[0],
    useBottomNavigationContext = _createContext[1];

var _createContext2 = /*#__PURE__*/createContext({
  name: 'BottomNavigationItemContext',
  errorMessage: 'useBottomNavigationItemContext: `context` is undefined. Seems you forgot to wrap the accordion components in `<BottomNavigationItem />`'
}),
    BottomNavigationItemProvider = _createContext2[0],
    useBottomNavigationItemContext = _createContext2[1];

var _excluded = ["value", "onChange", "showLabel"],
    _excluded2 = ["value", "onClick"];

var _createStylesContext = /*#__PURE__*/createStylesContext('BottomNavigation'),
    StylesProvider = _createStylesContext[0],
    useStyles = _createStylesContext[1];

var BottomNavigation = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var value = _ref.value,
      onChange = _ref.onChange,
      showLabel = _ref.showLabel,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  var styles = useMultiStyleConfig('BottomNavigation', props);
  var ownProps = omitThemingProps(props);
  var descendants = useBottomNavigationDescendants();
  var ctx = React.useMemo(function () {
    return {
      value: value,
      onChange: onChange,
      showLabel: showLabel
    };
  }, [value, onChange, showLabel]);
  return React.createElement(BottomNavigationProvider, {
    value: ctx
  }, React.createElement(BottomNavigationDescendantsProvider, {
    value: descendants
  }, React.createElement(StylesProvider, {
    value: styles
  }, React.createElement(chakra.nav, Object.assign({
    ref: ref,
    className: cx('chakra-bottom-navigation', props.className),
    __css: styles.container
  }, ownProps)))));
});

if (__DEV__) {
  BottomNavigation.displayName = 'BottomNavigation';
}

BottomNavigation.defaultProps = {
  showLabel: 'always'
};
var BottomNavigationItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var value = _ref2.value,
      onClick = _ref2.onClick,
      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);

  var isDisabled = props.disabled || false;
  var styles = useStyles();
  var context = useBottomNavigationContext();

  var _useBottomNavigationD = useBottomNavigationDescendant({
    disabled: isDisabled
  }),
      index = _useBottomNavigationD.index,
      register = _useBottomNavigationD.register;

  var itemValue = value || index;
  var isSelected = itemValue === context.value;
  var handleClick = React.useCallback(function (e) {
    onClick == null ? void 0 : onClick(e);
    context.onChange(itemValue);
  }, [itemValue, context.onChange]);

  var itemStyles = _extends({
    opacity: isDisabled || !isSelected ? 0.4 : 1
  }, styles.item);

  var ctx = React.useMemo(function () {
    return {
      isDisabled: isDisabled,
      isSelected: isSelected
    };
  }, [isDisabled, isSelected]);
  return React.createElement(BottomNavigationItemProvider, {
    value: ctx
  }, React.createElement(chakra.button, Object.assign({
    ref: mergeRefs(register, ref),
    className: cx('chakra-bottom-navigation__item', props.className),
    __css: itemStyles,
    "aria-selected": ariaAttr(isSelected),
    onClick: handleClick
  }, props)));
});

if (__DEV__) {
  BottomNavigationItem.displayName = 'BottomNavigationItem';
}

var BottomNavigationIcon = function BottomNavigationIcon(props) {
  var styles = useStyles();
  return React.createElement(Icon, Object.assign({
    "aria-hidden": true,
    __css: styles.icon
  }, props, {
    className: cx('chakra-bottom-navigation__icon', props.className)
  }));
};

if (__DEV__) {
  BottomNavigationIcon.displayName = 'BottomNavigationIcon';
}

var BottomNavigationLabel = /*#__PURE__*/forwardRef(function (props, ref) {
  var _useBottomNavigationC = useBottomNavigationContext(),
      showLabel = _useBottomNavigationC.showLabel;

  var _useBottomNavigationI = useBottomNavigationItemContext(),
      isSelected = _useBottomNavigationI.isSelected;

  var styles = useStyles();
  var dataIsLabelHidden = React.useMemo(function () {
    return dataAttr(showLabel === 'never' || showLabel === 'if-active' && !isSelected);
  }, [showLabel, isSelected]);

  var labelStyles = _extends({
    flex: 1
  }, styles.label);

  return React.createElement(StylesProvider, {
    value: styles
  }, React.createElement(chakra.div, Object.assign({
    ref: ref,
    className: cx('chakra-bottom-navigation__label', props.className),
    __css: labelStyles,
    "data-hidden": dataIsLabelHidden
  }, props)));
});

if (__DEV__) {
  BottomNavigationLabel.displayName = 'BottomNavigationLabel';
}

var parts = ['container', 'item', 'label', 'icon'];
var baseStyle = {
  container: {
    position: 'fixed',
    display: 'flex',
    justifyContent: 'space-between',
    px: 4,
    py: 2
  },
  item: {
    flex: 1,
    mx: 4,
    opacity: 0.4,
    _selected: {
      opacity: 1
    }
  },
  label: {
    _hidden: {
      opacity: 0,
      height: 0,
      width: 0,
      overflow: 'hidden'
    }
  }
};

function variantFlat(props) {
  var c = props.colorScheme;
  return {
    container: {
      bottom: 0,
      left: 0,
      right: 0,
      color: mode(c + ".900", "#fff")(props),
      bg: mode(c + ".300", c + ".900")(props),
      boxShadow: 'lg'
    }
  };
}

function variantFloat(props) {
  var flatVariantStyles = variantFlat(props);
  return _extends({}, flatVariantStyles, {
    container: _extends({}, flatVariantStyles.container, {
      bottom: 4,
      left: 4,
      right: 4,
      borderRadius: 'base'
    })
  });
}

var variants = {
  flat: variantFlat,
  "float": variantFloat
};
var defaultProps = {
  variant: 'float',
  colorScheme: 'blue'
};
var BottomNavigationStyleConfig = {
  parts: parts,
  baseStyle: baseStyle,
  variants: variants,
  defaultProps: defaultProps
};

var withDefaultStyles = function withDefaultStyles(overrides) {
  return mergeThemeOverride(BottomNavigationStyleConfig, overrides);
};

export { BottomNavigation, BottomNavigationDescendantsProvider, BottomNavigationIcon, BottomNavigationItem, BottomNavigationItemProvider, BottomNavigationLabel, BottomNavigationProvider, BottomNavigationStyleConfig, useBottomNavigationContext, useBottomNavigationDescendant, useBottomNavigationDescendants, useBottomNavigationDescendantsContext, useBottomNavigationItemContext, withDefaultStyles };
//# sourceMappingURL=chakra-ui-bottom-navigation.esm.js.map