@pisell/layout/es/fixed-container.js

基于 Fusion 设计系统的自然布局体系

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, Children, useContext } from 'react';
import classNames from 'classnames';
import useFlexClassNames from "./hooks/use-flex-class-names";
import Context from "./common/context";
/**
 * 自由容器
 */
var FixedContainer = function FixedContainer(props, ref) {
  var _props$children = props.children,
    children = _props$children === void 0 ? [] : _props$children,
    style = props.style,
    _props$items = props.items,
    items = _props$items === void 0 ? [] : _props$items;
  var _useContext = useContext(Context),
    prefix = _useContext.prefix;
  var clsPrefix = prefix + "fixed-container";
  var flexClassNames = useFlexClassNames(props);
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    style: _extends({
      position: 'relative',
      width: '100%'
    }, style),
    className: classNames(clsPrefix, flexClassNames)
  }, Children.map(children, function (child, idx) {
    return /*#__PURE__*/React.createElement("div", {
      style: _extends({
        position: 'absolute',
        zIndex: idx
      }, items[idx])
    }, child);
  }));
};
FixedContainer.displayName = 'FixedContainer';
export default /*#__PURE__*/forwardRef(FixedContainer);