react-vertical-tree-react-17/dist/styles.js

Simple & lightweight vertical tree like view.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Root = exports.Text = exports.Arrow = exports.Node = exports.Round = exports.Wrapper = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _utils = require("./utils");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  z-index: 135;\n  margin-top: 2px;\n  padding: 10px 20px;\n  color: white;\n  border-radius: 8px;\n  background-color: #1890ff;\n  box-shadow: 0 2px 0 rgba(0,0,0,0.045);\n  &:hover{ \n    cursor: pointer;\n  }\n  ", ";\n"])), function (props) {
  return props.styles ? _objectSpread({}, props.styles) : '';
});

exports.Wrapper = Wrapper;

var Round = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  border: 2px solid  ", ";\n  background-color: #fff;\n  left: calc( 50% - 5px );\n  top: -3px;\n  border-radius: 3px;\n"])), function (props) {
  return props.color || '#d6e2ea';
});

exports.Round = Round;

var Node = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  float: left;\n  text-align: center;\n  list-style-type: none;\n  position: relative;\n  padding: ", " 5px 0 5px ;\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right:  calc( 50% - ", ");\n    border-top: ", " solid ", " ;\n    width: 50%;\n    height: ", ";\n    z-index: -1;\n  }\n  ::after{\n    left: calc( 50% - ", ");\n    border-left: ", " solid ", ";\n    content: '';\n    position: absolute;\n    top: 0;\n    //right: calc( 50% - ", ");\n    border-top: ", " solid ", ";\n    width: 50%;\n    height: ", ";\n    z-index: -1;\n  }\n  &:first-child::before{\n    border: 0 none;\n  }\n  &:last-child::after{\n  border : none \n  }\n&:last-child::before{\n  border-right: ", " solid ", ";\n}\n&:only-child{\n  padding-top : 0px;\n  margin: auto auto \n}\n&:only-child::before {\n  border-right : none ;\n  left : 0px;\n  right : 0px ;\n}\n"])), function (props) {
  return props.styles ? props.styles.height : '40px';
}, function (props) {
  return (0, _utils.calcWidth)(props.styles.width);
}, function (props) {
  return props.styles.width || '2px';
}, function (props) {
  return props.styles.color || '#d6e2ea';
}, function (props) {
  return props.styles ? props.styles.height : '40px';
}, function (props) {
  return (0, _utils.calcWidth)(props.styles.width);
}, function (props) {
  return props.styles.width || '2px';
}, function (props) {
  return props.styles.color || '#d6e2ea';
}, function (props) {
  return (0, _utils.calcWidth)(props.styles.width);
}, function (props) {
  return props.styles.width || '2px';
}, function (props) {
  return props.styles.color || '#d6e2ea';
}, function (props) {
  return props.styles ? props.styles.height : '40px';
}, function (props) {
  return props.styles.width || '2px';
}, function (props) {
  return props.styles.color || '#d6e2ea';
});

exports.Node = Node;

var Arrow = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: solid  ", " ;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  left: calc( 50% - 4px );\n  margin-top: -7px;\n  position: absolute;\n\n  transform: rotate(45deg);\n"])), function (props) {
  return props.color ? props.color : '#d6e2ea';
});

exports.Arrow = Arrow;

var Text = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-family: 'Open Sans', sans-serif;\n  color: '#fff';\n  font-size: 15px;\n  ", ";\n"])), function (props) {
  return props.styles ? _objectSpread({}, props.styles) : '';
});

exports.Text = Text;

var Root = _styledComponents["default"].ul(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:not(:first-child){\n    display: flex;\n    position: relative ;\n    padding:", " 0 0 0;\n    margin: 0;\n  }\n  &:empty::before {\n    border-left : none !important;\n  }\n  &:not(:first-child)::before{\n    content: '';\n    position: absolute;\n    top: 0;\n    left: calc( 50% - ", ");\n    border-left: ", " solid ", ";\n    width: 0;\n    height: ", ";\n  }\n"])), function (props) {
  return props.styles.height;
}, function (props) {
  return (0, _utils.calcWidth)(props.styles.width);
}, function (props) {
  return props.styles.width || '2px';
}, function (props) {
  return props.styles.color || '#d6e2ea';
}, function (props) {
  return props.styles.height || '40px';
});

exports.Root = Root;