apps.websight-package-manager.web-resources.components.modals.PackageDependencyRow.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of websight-package-manager-view Show documentation
Package Manager View module is responsible for view part of Package Manager.
The newest version!
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 React from "/apps/websight-atlaskit-esm/web-resources/react.js";
import Button from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/button.js";
import styled from "/apps/websight-atlaskit-esm/web-resources/styled-components.js";
import { Draggable } from "/apps/websight-atlaskit-esm/web-resources/react-beautiful-dnd.js";
import InlineInput from "/apps/websight-admin/web-resources/components/InlineInput.js";
import { colors } from "/apps/websight-admin/web-resources/theme.js";
const RemoveDependencyButtonContainer = styled.div`
    padding-top: 12px;
`;
const RemoveDependencyIconContainer = styled.i`
    font-size: 20px;
    margin-top: 6px;
`;
const DependencyRowContainer = styled.div`
    display: flex;
`;
const DependencyInlineTextFieldContainer = styled.div`
    margin-right: 20px;
    flex: 1 1 auto;
`;
const MoveDependencyIcon = styled.i`
    margin-top: 8px;
    padding: 4px 0;
    color: ${colors.grey};
    visibility: hidden;
`;
const removeDependencyButtonStyle = {
  backgroundColor: 'white',
  padding: 0
};
export default class PackageDependencyRow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mouseOverRow: false
    };
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
  }

  onMouseEnter() {
    if (!this.state.mouseOverRow) {
      this.setState({
        mouseOverRow: true
      });
    }
  }

  onMouseLeave() {
    if (this.state.mouseOverRow) {
      this.setState({
        mouseOverRow: false
      });
    }
  }

  render() {
    const {
      dependency,
      dependencyIndex
    } = this.props;
    return /*#__PURE__*/React.createElement(Draggable, {
      key: `dependency-${dependencyIndex}`,
      draggableId: `dependency-${dependencyIndex}`,
      index: dependencyIndex
    }, (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
      ref: provided.innerRef
    }, provided.draggableProps), /*#__PURE__*/React.createElement(DependencyRowContainer, {
      onMouseEnter: this.onMouseEnter,
      onMouseLeave: this.onMouseLeave
    }, /*#__PURE__*/React.createElement(MoveDependencyIcon, _extends({}, provided.dragHandleProps, {
      className: "material-icons",
      style: snapshot.isDragging ? {
        visibility: 'visible'
      } : this.state.mouseOverRow ? {
        visibility: 'visible'
      } : {
        visibility: 'hidden'
      }
    }), "swap_vert"), /*#__PURE__*/React.createElement(DependencyInlineTextFieldContainer, null, /*#__PURE__*/React.createElement(InlineInput, {
      value: dependency,
      onValueChange: this.props.onChange,
      placeholder: "Pattern: group:name:version",
      maxWidth: "540px"
    })), /*#__PURE__*/React.createElement(RemoveDependencyButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
      style: removeDependencyButtonStyle,
      appearance: "subtle",
      spacing: "compact",
      onClick: this.props.onRemove,
      title: "remove"
    }, /*#__PURE__*/React.createElement(RemoveDependencyIconContainer, {
      className: "material-icons"
    }, "close")))), provided.placeholder));
  }

}