qt-public-ui/es/TwoColumns/index.js

新设计规范下业务组件库

import React from 'react';
import './style.less';
var getInitialStyle = function getInitialStyle(alignColumns) {
  switch (alignColumns) {
    case 'left':
      return {
        left: {
          textAlign: 'left'
        },
        right: {
          textAlign: 'left'
        }
      };
    case 'right':
      return {
        left: {
          textAlign: 'right'
        },
        right: {
          textAlign: 'right'
        }
      };
    case 'center':
      return {
        left: {
          textAlign: 'right'
        },
        right: {
          textAlign: 'left'
        }
      };
    case 'space-bewteen':
      return {
        left: {
          textAlign: 'left'
        },
        right: {
          textAlign: 'right'
        }
      };
    default:
      return {
        left: {},
        right: {}
      };
  }
};
var TwoColumns = function TwoColumns(props) {
  var _props$fixedPart = props.fixedPart,
    fixedPart = _props$fixedPart === void 0 ? 'right' : _props$fixedPart,
    fixedWidth = props.fixedWidth,
    leftRendered = props.leftRendered,
    rightRendered = props.rightRendered,
    id = props.id,
    _props$alignColumns = props.alignColumns,
    alignColumns = _props$alignColumns === void 0 ? 'space-bewteen' : _props$alignColumns;
  var style = getInitialStyle(alignColumns);
  if (fixedPart === 'left') {
    style.left.width = fixedWidth;
    style.right.width = "calc(100% - " + fixedWidth + "px)";
  } else {
    style.right.width = fixedWidth;
    style.left.width = "calc(100% - " + fixedWidth + "px)";
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "two-columns-" + fixedPart,
    id: id
  }, /*#__PURE__*/React.createElement("div", {
    style: style.left,
    className: "left-wrapper"
  }, leftRendered), /*#__PURE__*/React.createElement("div", {
    style: style.right,
    className: "right-wrapper"
  }, rightRendered));
};
TwoColumns.displayName = 'TwoColumns';
export default TwoColumns;