library/js/literallycanvas/js/optionsStyles/stroke-or-fill.js

   1 'use strict';
   2
   3 var React = require('../reactGUI/React-shim');
   4
   5 var _require = require('./optionsStyles');
   6
   7 var defineOptionsStyle = _require.defineOptionsStyle;
   8
   9 var createSetStateOnEventMixin = require('../reactGUI/createSetStateOnEventMixin');
  10
  11 defineOptionsStyle('stroke-or-fill', React.createClass({
  12   displayName: 'StrokeOrFillPicker',
  13   getState: function getState() {
  14     return { strokeOrFill: 'stroke' };
  15   },
  16   getInitialState: function getInitialState() {
  17     return this.getState();
  18   },
  19   mixins: [createSetStateOnEventMixin('toolChange')],
  20
  21   onChange: function onChange(e) {
  22     if (e.target.id == 'stroke-or-fill-stroke') {
  23       this.props.lc.tool.strokeOrFill = 'stroke';
  24     } else {
  25       this.props.lc.tool.strokeOrFill = 'fill';
  26     }
  27     this.setState(this.getState());
  28   },
  29
  30   render: function render() {
  31     var lc = this.props.lc;
  32
  33     return React.createElement(
  34       'form',
  35       null,
  36       React.createElement(
  37         'span',
  38         null,
  39         'Color to change: '
  40       ),
  41       React.createElement(
  42         'span',
  43         null,
  44         React.createElement('input', { type: 'radio', name: 'stroke-or-fill', value: 'stroke',
  45           id: 'stroke-or-fill-stroke', onChange: this.onChange,
  46           checked: lc.tool.strokeOrFill == 'stroke' }),
  47         React.createElement(
  48           'label',
  49           { htmlFor: 'stroke-or-fill-stroke', className: 'label' },
  50           ' stroke'
  51         )
  52       ),
  53       React.createElement(
  54         'span',
  55         null,
  56         React.createElement('input', { type: 'radio', name: 'stroke-or-fill', value: 'fill',
  57           id: 'stroke-or-fill-fill', onChange: this.onChange,
  58           checked: lc.tool.strokeOrFill == 'fill' }),
  59         React.createElement(
  60           'label',
  61           { htmlFor: 'stroke-or-fill-fill', className: 'label' },
  62           ' fill'
  63         )
  64       )
  65     );
  66   }
  67 }));
  68
  69 module.exports = {};