@fluent-windows/core/es/FormLabel/FormLabel.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 './FormLabel.styled';
import { FormLabelPropTypes } from './FormLabel.type';
import Typography from '../Typography';
export const name = 'FormLabel';
const useStyles = createUseStyles(styles, {
  name
});
const FormLabel = React.forwardRef((props, ref) => {
  const {
    as = 'label',
    className: classNameProp,
    label,
    children,
    position = 'right',
    ...rest
  } = props;
  const classes = useStyles(props);
  const className = classNames(classes.root, {
    [classes.positionTop]: position === 'top',
    [classes.positionBottom]: position === 'bottom',
    [classes.positionLeft]: position === 'left',
    [classes.positionRight]: position === 'right'
  }, classNameProp);
  const gap = React.useMemo(() => {
    switch (position) {
      case 'top':
        return {
          marginTop: '8px'
        };

      case 'bottom':
        return {
          marginBottom: '8px'
        };

      case 'left':
        return {
          marginLeft: '8px'
        };

      case 'right':
        return {
          marginRight: '8px'
        };
    }
  }, [position]);
  return React.createElement(Typography, _extends({
    className: className,
    variant: "body2",
    as: as,
    ref: ref
  }, rest), React.createElement("span", {
    className: classes.text
  }, label), React.cloneElement(children, {
    style: gap
  }));
});
FormLabel.displayName = `F${name}`;
FormLabel.propTypes = FormLabelPropTypes;
FormLabel.defaultProps = {
  position: 'right'
};
export default FormLabel;