github.com/jbendotnet/noms@v0.0.0-20190904222105-c43e4293ea92/cmd/noms/splore/src/node.js (about)

     1  // Copyright 2017 Attic Labs, Inc. All rights reserved.
     2  // Licensed under the Apache License, version 2.0:
     3  // http://www.apache.org/licenses/LICENSE-2.0
     4  
     5  // @flow
     6  
     7  import React, {Component, Element} from 'react';
     8  
     9  type Props = {
    10    hasChildren: boolean,
    11    isOpen: boolean,
    12    text: string,
    13    fromX: number,
    14    fromY: number,
    15    x: number,
    16    y: number,
    17    spaceX: number,
    18    onClick: (e: MouseEvent, s: string) => any,
    19  };
    20  
    21  type State = {
    22    x: number,
    23    y: number,
    24  };
    25  
    26  export default class Node extends Component<void, Props, State> {
    27    state: State;
    28  
    29    constructor(props: Props) {
    30      super(props);
    31  
    32      this.state = {
    33        x: this.props.fromX,
    34        y: this.props.fromY,
    35      };
    36    }
    37  
    38    render(): Element<any> {
    39      const {hasChildren, isOpen, onClick, text, x, y} = this.props;
    40  
    41      if (this.state.x !== x || this.state.y !== y) {
    42        window.requestAnimationFrame(() => this.setState({x, y}));
    43      }
    44  
    45      const gStyle = {
    46        transition: 'transform 200ms',
    47        transform: `translate3d(${this.state.x}px, ${this.state.y}px, 0)`,
    48      };
    49  
    50      const circleStyle = {
    51        cursor: hasChildren ? (isOpen ? 'zoom-out' : 'zoom-in') : 'default',
    52        fill: hasChildren && !isOpen ? 'rgb(176, 196, 222)' : 'white',
    53        stroke: 'steelblue',
    54        strokeWidth: '1.5px',
    55      };
    56  
    57      const foreignObjStyle = {
    58        overflow: 'visible', // Firefox like
    59      };
    60  
    61      const paraStyle = {
    62        fontFamily: '"Menlo", monospace',
    63        fontSize: '11px',
    64        overflow: 'hidden',
    65        textAlign: 'right',
    66        textOverflow: 'ellipsis',
    67        whiteSpace: 'nowrap',
    68      };
    69  
    70      const spanStyle = {
    71        backgroundColor: 'rgba(255, 255, 255, 0.7)',
    72      };
    73  
    74      return (
    75        <g onClick={onClick} style={gStyle}>
    76          <circle style={circleStyle} r="4.5" />
    77          <foreignObject
    78            style={foreignObjStyle}
    79            x={-this.props.spaceX + 10}
    80            y="-.35em"
    81            width={this.props.spaceX - 20}
    82            height="0.7em"
    83          >
    84            <div title={text} style={paraStyle}>
    85              <span style={spanStyle}>
    86                {text}
    87              </span>
    88            </div>
    89          </foreignObject>
    90        </g>
    91      );
    92    }
    93  }