react-shine-api

This is a react component that allows users to browse the SHINE API. It allows selection of files, and passes the selected files through to your app. View a demo here. This project was created using create-react-library

Installation

$ npm install --save react-shine-api

Usage

You will need to whitelist the IP address this app will be at with MPIWG before it will be allowed to connect to the SHINE API. To do this, please contact [e-mail]

import React, { Component } from "react";
import ShineBrowser from "react-shine-api";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showShine: true
    };
  }

  close() {
    this.setState({ showShine: false });
  }

  handleFileUpload(files){
    console.log('Files: ', files);
  }

  render() {
    return (
      <div>
        <div style={{
            maxWidth: 1000,
            height: 700,
            margin: "auto",
            boxShadow: "0 .5rem 1rem rgba(0,0,0,.15)"
        }}>
          {this.state.showShine ? (
            <ShineBrowser
              styles={{
                primary: "#427af4"
              }}
              close={this.close.bind(this)}
              handleFileUpload={this.handleFileUpload.bind(this)}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

Props for

Props
styles	customizable styles object (see below for details)
close	optional. function that gets called when the user attempts to close the SHINE window. Setting this prop will display an X button in the upper corner
handleFileUpload	function that is called when the user is ready to upload their files, once all the content for the files is ready. passes a files array (see below).

File Array

An array of objects with the following structure

{
    id: "54d1dsf4-8bc9-4ee3-9abd-9256fe684cd",
    name: "孝義",
    parentUuid: "743711b7-c294-4619-90b3-963792248de4",
    uri: "https://urlname.com/4risesections/5379669",
    uuid: "54d174f4-8bc9-4ee3-9abd-924239e684cd",
    content: "all content comes through here as a string"
}

Styling

This component will take 100% height and width of its container. You can customize the styles by supplying the styles object detailed below to the component.

Styles
borderRadius	border-radius of buttons, boxes, inputs, etc. throughout the app
primary	primary color used for buttons and actionable items throughout the app
headerBG	main header background color
lightBG	light background color
text	main text color
lightText	secondary text color
fontFamily	font family used throughout - default is "Calibri"
selectedItemsBackgroundColor	background color of the expandable header in the search screen

Development

Run the below command to start the server for the react-shine-api module

$ cd react-shine-api
$ npm link
$ npm start

Next, (in a seperate terminal) run the below commands to start the example project that wraps the component. When you make changes, you will see them updated in this project.

$ cd react-shine-api/example
$ npm link react-shine-api
$ npm start

Deployment

rollup will automatically bundle the module and publish it on the below command

$ npm publish

License

This project is licensed under the MIT License - see the LICENSE.txt file for details