Res-shared-components NPM

res-shared-components

RES Shared Components

Install

npm install --save res-shared-components

Components

ErrorBox

Interface

LoadingProps {
	errors: (string|JSX.Element)[];
}

Usage

import * as React from "react";
import { ErrorBox } from "res-shared-components";

class Example extends React.Component {
  errorsArray = [
    "This is an error",
    <p>
      This is an <a>error</a>
    </p>
  ];

  render() {
    return <ErrorBox errors={errorsArray} />;
  }
}

Loading

Interface

LoadingProps {
	location: string;
}

Usage

import * as React from "react";
import { Loading } from "res-shared-components";

class Example extends React.Component {
  render() {
    return <Loading location="example" />;
  }
}

Modal

Interface

ModalProps {
  action: () => void;
  children: JSX.Element; // Html to be rendered in the modal
  className?: string;
  glyph?: string; // Optional icon for closing the modal defaults to 'X'
}

Usage

import * as React from "react";
import { Modal } from "res-shared-components";

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false
    };

    this.toggleModalOpen = this.toggleModalOpen.bind(this);
  }

  toggleModalOpen() {
    this.setState(prevState => ({ modalOpen: !prevState.modalOpen }));
  }

  displayModal() {
    if (this.state.modalOpen) {
      return (
        <Modal action={this.toggleModalOpen} className='modal-classname'>
          <div>Modal Content</div>
        </Modal>
      )
    } else {
      return null;
    }
  }

  render() {
    return (
      <button onClick={this.toggleModalOpen}
      {this.displayModal()}
    )
  }
}

PmsSelect / StateSelect

PMS Select and State Select work the same except for the options in the select.

Interface

PmsSelectProps / StateSelectProps {
  blurFunction?: (value: string) => any; // Used if you want to validate on blur
  blurString?: string; // validate field state key
  selectedValue: string;
  updateFunction: any;
}

Usage

import * as React from "react";
import { PmsSelect, StateSelect } from "res-shared-components";

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      pms: "",
      state: "",
      validatePms: false,
      validatestate: false
    };

    this.update = this.update.bind(this);
    this.allowValidation = this.allowValidation.bind(this);
  }

  update(field: string): any {
    return (e: any) =>
      this.setState({
        [field]: e.currentTarget.value
      });
  }

  allowValidation(field: string): any {
    return (e: any) =>
      this.setState({
        [field]: true
      });
  }

  render() {
    return (
      <div>
        <PmsSelect
          blurFunction={this.allowValidation}
          blurString="validatePms"
          selectedValue={this.state.pms}
          updateFunction={this.update}
        />
        <StateSelect
          blurFunction={this.allowValidation}
          blurString="validateState"
          selectedValue={this.state.state}
          updateFunction={this.update}
        />
      </div>
    );
  }
}

Wizard

Interface

WizardProps {
    activePage: number;
    steps: WizardStep[];
}

WizardStep {
    title: string;
    description: string | string[]; // use array to force break string
    icon?: string; //optional ex. 'far fa-check'
    stepNum?: string; //optional
    clickFunction?: (stepNum: number) => void; //optional
}

Usage

import React, { Component } from "react";

import { IWizardStep, Wizard } from "res-shared-components";

export default class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activePage: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(activePage: number): void {
    this.setState({ activePage });
  }

  render() {
    const steps: IWizardStep = [
      {
        title: "Step 1",
        description: "User Login",
        stepNum: "1",
        clickFunction: this.handleClick
      },
      { title: "Step 2", description: "Practice Info", icon = "far fa-check" }
    ];

    return <Wizard steps={steps} activePage={this.state.activePage} />;
  }
}