# react-uis
> React.js ui component

[![npm version](https://img.shields.io/npm/v/react-uis.svg)](https://www.npmjs.com/package/react-uis)
[![npm downloads](https://img.shields.io/npm/dm/react-uis.svg)](https://www.npmjs.com/package/react-uis)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/blackzhuo/react-uis/blob/master/LICENSE)
[![Build Status](https://travis-ci.org/blackzhuo/react-uis.svg?branch=master)](https://travis-ci.org/blackzhuo/react-uis)

#### Component list
* Upload
* Guide

#### Installation

```sh
$ npm install react-uis --save
#or
$ yarn add react-uis
```

#### How to use

* Upload

##### code
```js
// ES6
import { Upload } from 'react-uis'

<Upload
    action='/xxx/xxx'
    limit={8}
    maxSize={1024 * 1024 * 10}
    accept="image/png, image/jpg, image/jpeg"
    beforeUpload={async (file) => {
       
    }}
    onSuccess={async (file = {}, res) => {
        
    }}
    onRemove={(index) => {
        
    }}
    onError={(file = {}, res) => {
        
    }}
/>

```

##### Prop Types

|property	|propType	|required	|default description|
|:---------------------------|:------------------|:-----------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|value		|-|	{null}	|
|defaultValue		|-|	{null}	|
|sign		|-|	"upload"	|
|action		|-|	""	|
|accept		|-|	"image/png, image/jpg, image/jpeg, image/gif, image/bmp"	|
|name		|-|	"file"	|
|headers		|-|	{null}	|
|withCredentials		|-|	{true}	|
|disabled		|-|	{false}	|
|limit		|-|	{8}	|
|maxSize		|-|	{10485760}	|
|hasThumbnail		|-|	{true}	|
|hasDelete		|-|	{true}	|
|dropZoneProps		|-|	{{}}	|
|cropGetBase64Type		|-|	"load"	|
|cropDisabled		|-|	{false}	|
|cropMinWidth		|-|	{500}	|
|cropMinHeight		|-|	{500}	|
|cropList		|-|	{[]}	|
|cropProps		|-|	{{}}	|
|sortDisabled		|-|	{false}	|
|sortableContainerProps		|-|	{{}}	|
|sortableElementProps		|-|	{{}}	|
|locale		|-|	{{title: "upload", width: "width",height: "height",saveClose: "save and close",addPicture: "Add Picture",thumbnail: "Thumbnail",uploadError: "Upload Error",cropError: "Image clipping failed",duplicate: "Duplicate Pictures",uploadTips: ["Drag and drop pictures below to upload. Maximum 8 pictures, size between 500*500 and 2000*2000 px."],}}	|
|formatter		|-|	{null}	|
|beforeUpload		|-|	{null}	|
|onSuccess		|-|	{null}	|
|onError		|-|	{null}	|
|onRemove		|-|	{null}	|
|onChange		|-|	{null}	|
|onShowUploadError		|-|	{null}	|
|onSortEnd		|-|	{null}	|
|onCrop		|-|	{null}	|
|onCropError		|-|	{null}	|
|onCropGetBase64Data		|-|	{null}	|
|onShowCrop		|-|	{null}	|
|onUploadClick		|-|	{null}	|


* Guide

##### code
```js
// ES6
import { Guide } from 'react-uis'

<div style={{marginLeft: '100px'}}>
    <div className="step-guide-1" style={{margin: '10px'}}>step1</div>
    <div className="step-guide-3" style={{margin: '10px'}}>step3</div>
    <div className="step-guide-2" style={{margin: '10px', float: 'left'}}>step2</div>
    <div className="step-guide-5" style={{margin: '10px', float: 'left'}}>step5</div>
    <div className="step-guide-4" style={{margin: '10px', float: 'left'}}>step4</div>
    <div className="step-guide-7" style={{margin: '10px', float: 'left'}}>step7</div>
    <div className="step-guide-6" style={{marginTop: '1000px', marginBotton: '400px'}}>step6</div>
    <Guide 
        guideCloseCondition={2000}
        guideData={[
            {
                selector: '.step-guide-1',
                guideContent: '<div><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div><div>2</div><div>3</div></div>',
            },
            {
                selector: '.step-guide-2',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-3',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-4',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-5',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-6',
                guideContent: 'Content',
            },
            {
                selector: '.step-guide-7',
                guideContent: 'Content',
            }
        ]}/>
</div>

```

##### Prop Types

|property	|propType	|required	|default description|
|:---------------------------|:------------------|:-----------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|guideCloseCondition		|-|	{1}	|
|guideData		|-|	{[]}	|


#### [Demo](https://blackzhuo.github.io/react-uis/)

#### Contributions
Yes please! Feature requests / pull requests are welcome.