ReactJS: Dropdown with no windows listener

This entry is part 28 of 35 in the series React JS

See the Pen React Dropdown – No Window Listener by daryl (@darylw) on CodePen.0

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      value: "Donuts"
    };
  }

  expand() {
    this.setState({ expanded: true });
  }

  collapse() {
    this.setState({ expanded: false });
  }

  handleItemClick(e) {
    this.setState({
      expanded: false,
      value: e.target.innerText
    });
  }

  handleTriggerClick() {
    this.setState({ expanded: !this.state.expanded });
  }

  render() {
    let dropdown = undefined;
    if (this.state.expanded) {
      dropdown = (
        <div className="content">
          {this.props.options.map(item => {
            return (
              <div
                onClick={e => {
                  this.handleItemClick(e);
                }}
                className="item"
              >
                {item}
              </div>
            );
          })}
        </div>
      );
    }

    return (
      <div
        className={'dropdown ${this.state.expanded ? "active" : ""}'}
        tabIndex="0"
        onBlur={() => {
          this.collapse();
        }}
      >
        <div
          className="trigger"
          onClick={() => {
            this.handleTriggerClick();
          }}
        >
          {this.state.value}
        </div>
        {dropdown}
      </div>
    );
  }
}

ReactDOM.render(
  <Dropdown
    options={["Strawberry Cream", "Chocolate Flakes", "Marshmallow Sprinkles"]}
  />,
  document.getElementById("app")
);

ReactJS: Dropdown

This entry is part 27 of 35 in the series React JS

See the Pen React Dropdown by daryl (@darylw) on CodePen.0

class DropdownItem extends React.Component{
  render() {
    return (<li className="dropdown-option" 
              onClick={this.props.click}>
                {this.props.label}
          </li>);
  }
}

class DropdownMenu extends React.Component {
  render() {
    let className="dropdown-select";
    if (this.props.toggled) {
      className += " open";
    }
    
    return <ul className={className}>
          {this.props.children}
        </ul>
  }
}

class Dropdown extends React.Component {
  constructor (){
    super();
    
    this.state = {
      toggled: false,
      selected: "Default"
    };
  }
  
  toggleDropdown () {
    this.setState({toggled: !this.state.toggled});
  }

  handleClick(value) {
    this.setState({selected: value});
    
    this.closeDropdown();
  }

  render () {
    var className="dropdown-container";
    
    if (this.props.className) {
      className += " " + this.props.className;
    }

    var dropdown = React.Children.map(
      this.props.children, (child, i) => {
      
      var clonedProps = {};
      clonedProps.click = this.handleClick.bind(this, i);

      return React.cloneElement(child, clonedProps);
    });

    return (
      <div className={className} 
        onClick={this.toggleDropdown.bind(this)}>
        <div className="dropdown-label">
          {this.props.label}
        </div>
        <div className="dropdown-active">
          {this.props.children[this.state.selected]}
        </div>
        <DropdownMenu toggled={this.state.toggled} >
          {dropdown}
        </DropdownMenu>
      </div>
    );
  }
}

React.render(
    <Dropdown label="Dropdown Label">
      <DropdownItem label="Choice 1" value="Number 1" />
      <DropdownItem label="Choice 2" value="2" />
    </Dropdown>,
  document.getElementById('app')
);

ReactJS: Checkbox

This entry is part 26 of 35 in the series React JS

See the Pen Stateful React checkbox component by daryl (@darylw) on CodePen.0

/**
* www.devhamsters.com
*/

class Checkbox extends React.Component {
  static propTypes = {
    checked: React.PropTypes.bool,
    disabled: React.PropTypes.bool,
  };
  static defaultProps = {
    checked: false,
    disabled: false,
  };
  constructor(props) {
    super(props);
    this.state = {
      checked: props.checked,
    };
  };

  _handleChange = () => {
    this.setState({
      checked: !this.state.checked,
    });
  };

  render() {
    const { disabled } = this.props;
    const { checked } = this.state;
    return (
      <div className="React__checkbox">
        <label>
          <input 
            type="checkbox"
            className="React__checkbox--input"
            checked={checked}
            disabled={disabled}
            onChange={this._handleChange}
          />
          <span 
            className="React__checkbox--span"
          />
        </label>
      </div>
    );
  }
}

const App = (
  <div className="App">
    <Checkbox />
    <Checkbox checked />
    <Checkbox disabled />
    <Checkbox checked disabled />
  </div>
);
      
ReactDOM.render(
  App, 
  document.getElementById('app')
);

ReactJS: Circle

This entry is part 25 of 35 in the series React JS

See the Pen React: Circle by Pete (@peterbenoit) on CodePen.0

var Circle = React.createClass({

  styler: {
    width: "100px",
    height: "100px",
    mozBorderRadius: "50%",
    webkitBorderRadius: "50%",
    borderRadius: "50%",
    background: "red"
  },

  render: function() {
    return (
      <div style = {this.styler}></div>
    );
  }
});
 
React.render(
  <Circle />, 
  document.getElementById('mount-point'));

ReactJS: Button

This entry is part 24 of 35 in the series React JS

See the Pen React Button by Trenton (@trentontri) on CodePen.0

/*
 * A simple React component
 * Properties include: href, icon, disabled, and className
 */
class Button extends React.Component {

  render() {
    const { children, className, href, icon, ...others } = this.props;
    const props = { ...others, href, className, ref: 'button', disabled: this.props.disabled };
    const element = href ? 'a' : 'button';

    return React.createElement(
      element, props, icon ? <i className={this.props.icon} /> : null, children
    );
  }
}

/*
 * Render the above component into the div#react-button
 */
ReactDOM.render(
  <div>
    <Button className="btn-primary">click me</Button>
    <Button className="btn-success" icon="fa fa-phone">success </Button>
    <Button className="btn-success" disabled={true}>disabled </Button>
  </div>, 
  document.getElementById('react-button')
);