@streetscape.gl/monochrome/dist/es6/float-panel/stories.js

A toolkit of React components for streetscape.gl

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { Component } from 'react';
import { boolean } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { withReadme } from 'storybook-readme';
import README from './README.md';
import FloatPanel from './index';
import { AutoSizer } from '../shared';

class FloatPanelExample extends Component {
  constructor() {
    super(...arguments);

    _defineProperty(this, "state", {
      x: 0,
      y: 0,
      size: 200,
      minimized: false
    });

    _defineProperty(this, "_onUpdatePanel", _ref => {
      let {
        x,
        y,
        width,
        minimized
      } = _ref;
      width = Math.min(400, Math.max(50, width));
      this.setState({
        x,
        y,
        minimized,
        size: width
      });
    });
  }

  render() {
    const {
      x,
      y,
      size,
      minimized
    } = this.state;
    return React.createElement("div", {
      style: {
        height: '100vh'
      }
    }, React.createElement(AutoSizer, null, _ref2 => {
      let {
        width,
        height
      } = _ref2;
      return React.createElement(FloatPanel, {
        title: 'My Photo',
        parentWidth: width,
        parentHeight: height,
        x: x,
        y: y,
        width: size,
        height: size,
        minimized: minimized,
        movable: boolean('movable', true),
        resizable: boolean('resizable', true),
        minimizable: boolean('minimizable', true),
        onUpdate: this._onUpdatePanel
      }, React.createElement("img", {
        src: "https://avatars2.githubusercontent.com/u/2059298?v=3&s=460",
        width: "100%"
      }));
    }));
  }

}

storiesOf('FloatPanel', module).addDecorator(withReadme(README)).add('Basic example', () => React.createElement(FloatPanelExample, null));
//# sourceMappingURL=stories.js.map