@fluent-windows/core/es/List/List.js

React components that inspired by Microsoft's Fluent Design System.

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 * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-windows/styles';
import { styles } from './List.styled';
import { ListPropTypes } from './List.type';
import { useReveal } from '@fluent-windows/hooks';
import Box from '../Box';
import Typography from '../Typography';
export const ListContext = React.createContext({
  reveal: false,
  acrylic: false
});
export const name = 'List';
const useStyles = createUseStyles(styles, {
  name
});
const List = React.forwardRef((props, ref) => {
  const {
    as = 'div',
    className: classNameProp,
    children,
    title,
    acrylic,
    reveal,
    ...rest
  } = props; // handle Reveal Effects

  const [RevealWrapper] = useReveal(66);
  const theChildren = reveal ? React.useMemo(() => React.Children.map(children, (child, i) => {
    if (child.type && child.type.displayName === 'FItem') {
      return React.createElement(RevealWrapper, {
        key: i
      }, child);
    }

    return child;
  }), [children]) : children;
  const contextValue = {
    reveal: reveal,
    acrylic: acrylic
  };
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  return React.createElement(ListContext.Provider, {
    value: contextValue
  }, React.createElement(Box, _extends({
    className: className,
    ref: ref,
    as: as,
    acrylic: acrylic
  }, rest), title && React.createElement(Typography, {
    className: classes.title,
    variant: "subtitle2"
  }, title), theChildren));
});
List.displayName = `F${name}`;
List.propTypes = ListPropTypes;
export default List;