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

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
require("./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% - ".concat(fixedWidth, "px)");
  } else {
    style.right.width = fixedWidth;
    style.left.width = "calc(100% - ".concat(fixedWidth, "px)");
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "two-columns-".concat(fixedPart),
    id: id
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: style.left,
    className: "left-wrapper"
  }, leftRendered), /*#__PURE__*/_react["default"].createElement("div", {
    style: style.right,
    className: "right-wrapper"
  }, rightRendered));
};
TwoColumns.displayName = 'TwoColumns';
var _default = exports["default"] = TwoColumns;