react-component-library
component library
Install
npm install --save mpulsemobile-react-component-library
Usage
import React, { Component } from 'react'
import { Input, SearchBar } from 'mpulsemobile-react-component-library'
export default class App extends Component {
render () {
return (
<div>
<Input
label="CITY"
name="city"
placeholder="type something here..."
value=""
onChange={ (e) => {console.log('val', e.currentTarget.value, 'name', e.currentTarget.name)} }
disabled={false}
onBlur={ (e) => {console.log('blur', e)} }
/>
<SearchBar
placeholder="Search Members..."
query=""
onSearch={ (val) => {console.log(val)} }
onChange={ (val) => {console.log(val)} }
/>
</div>
)
}
}
Style Guide
- This library is based on the mPulse Mobile official styleguide. To see images of the components listed below click on the Style Guide link.
Table of Contents
- BreadCrumbs
- ButtonPrimary
- ButtonSecondary
- ButtonTab
- ButtonToggle
- Checkbox
- CheckmarkComplete
- ConfirmLeaveModal
- DatePicker
- DropDown
- DropDownLazy
- ErrorBoundary
- EmptyTable
- FadeInOut
- Input
- LinkPrimary
- LinkSecondary
- Paginator
- PhoneNumber
- ProgressBar
- RadioButton
- SearchBar
- Spinner
BreadCrumbs
type View = {
name: string,
displayName: string,
completed: boolean,
currentView: boolean,
}
type Props = {
updateView: (view: string, confirmed: ?boolean) => void,
views: View[],
}
<BreadCrumbs
views={views}
updateView={ (view, confirmed) => {console.log('view', view)} }
/>
ButtonPrimary
type Props = {
label: string,
onClick: () => void,
disabled: boolean,
size: string, // large, medium, small
}
<ButtonPrimary
label={'CLICK ME'}
onClick={ () => {console.log('ButtonPrimary clicked')} }
disabled={false}
size="large"
/>
ButtonSecondary
type Props = {
label: string,
onClick: () => void,
disabled: boolean,
size: string, // large, medium, small
}
<ButtonSecondary
label={'CLICK ME'}
onClick={ () => {console.log('ButtonSecondary clicked')} }
disabled={false}
size="large"
/>
ButtonTab
type Props = {
label: string,
onClick: () => void,
disabled: boolean,
selected: boolean,
size: string, // large, medium, small
}
<ButtonTab
label={'CLICK ME'}
onClick={ () => {console.log('ButtonTab clicked')} }
disabled={false}
selected={true}
size="large"
/>
ButtonToggle
type Props = {
label: string,
label1: string,
label2: string,
value1: string | number,
value2: string | number,
selected: string,
name: string,
onChange: (e: SyntheticEvent<any>) => void,
};
<ButtonToggle
name={"gender"}
label="GENDER"
label1={"Male"}
label2={"Female"}
value1={"male"}
value2={"female"}
selected={"female"}
onChange={ e => {console.log('event', e.currentTarget.value)} }
/>
Checkbox
type Props = {
label: string | number,
name: string | number,
checked: boolean,
onChange: (e: SyntheticEvent<any>) => void,
disabled: boolean,
}
<Checkbox
label="Want More Info?"
name="InfoWanted"
checked={true}
onChange={ e => {console.log('event', e.currentTarget.checked)} }
disabled={false}
/>
CheckmarkComplete
type Props = {
complete: boolean,
}
<CheckmarkComplete
complete={true}
/>
ConfirmLeaveModal
type Props = {
onClick: (confirm: boolean) => void,
header: string,
body: string,
visible: boolean,
label1: string,
label2: string,
}
<ConfirmLeaveModal
onClick={ (confirm) => {console.log('confirm', confirm)} }
header="Warning"
body={"Are you sure you want to leave?"}
label1={"Yes, Leave"}
label2="Quit, Don't Save"
visible={true}
/>
DatePicker
type Props = {
label: string,
value: string, // must be ISO format YYYY-MM-DD
onDayChange: (date: string) => void,
disabled: boolean
hasError: boolean
min: string // optional, must be ISO format YYYY-MM-DD
max: string // optional, must be ISO format YYYY-MM-DD
};
<DatePicker
label={'APPOINTMENT DATE'}
value={'2019-5-13'} // must be ISO format YYYY-MM-DD
onDayChange={ (date) => { console.log('date', date) } }
disabled={false}
hasError={false}
min={'2019-05-21'} // optional, often used for selecting a date in the future like an appointment
max={'2020-01-21'} // optional, often used for selecting a date in the past like a birthdate
/>
DropDown
- Good for a short list of unique items.
type Props = {
disabled: boolean,
width: number,
label: string,
items: any[],
selectedIndex: number,
onItemClick: (itemIndex: number) => void,
}
<DropDown
width={350}
disabled={false}
label={"STATE"}
items={['California', 'Georgia', 'Arizona', 'Utah', 'Nevada', 'Colorado', 'Oregon']}
selectedIndex={4}
onItemClick={ itemIndex => {console.log('itemIndex', itemIndex)} }
/>
DropDownLazy
- Good for large lists that need to be lazy loaded and/or need a search.
- Names of values can be duplicated but ids should be unique.
type Props = {
disabled: boolean,
width: number,
label: string,
items: {id: number, name: string}[],
selectedId: number,
onItemClick: (id: number) => void,
onSearchChange: (val: string) => void,
onSearch: (val: string) => void, // val === '' if clearing search
searchQuery: string,
onScroll: (e: SyntheticEvent<any>) => void,
fetching: boolean,
}
<DropDownLazy
disabled={false}
width={400}
label={'Member'}
items={ [{id: 0, name: 'mario'}, {id: 1, name: 'ned'}] }
selectedId={1}
onItemClick={ (id) => { console.log('id', id)} }
onSearchChange={ (searchQuery) => {console.log(searchQuery)} }
onSearch={ (searchQuery) => {console.log(searchQuery)} }
searchQuery={''}
onScroll={ (e) => {console.log(e, 'scrolling')} }
fetching={false}
/>
ErrorBoundary
- Requires React 16 to be used. Wrap this around any other component to set an Error Boundary.
type Props = {
children?: React.Node,
}
<ErrorBoundary>
<MainSectionComponent />
</ErrorBoundary>
EmptyTable
- Used while data is loading. Can accept children to be placed in middle like a spinner but is not required.
type Props = {
children?: React.Node,
limit: number,
visible: boolean,
}
<EmptyTable
limit={10}
visible={true}
>
<Spinner
left={'50%'}
top={'40%'}
fontSize={'3em'}
visible={true}
/>
</EmptyTable>
FadeInOut
- Toggle visible prop to see the child component fade in/out.
type Props = {
visible: boolean,
children?: any,
}
<FadeInOut visible={false}>
<p>There has been an error.</p>
</FadeInOut>
Input
- Allows for adding additional props in case you want all the input DOM props exposed. Examples would be onBlur, onFocus, onClick, etc.
type Props = {
label: string|number,
value: string|number,
name: string|number,
placeholder: string|number,
onChange: (e: SyntheticEvent<any>) => void,
disabled: boolean,
hasError: boolean,
className?: string,
subtext?: string,
}
<Input
label="CITY"
name="city"
placeholder="type something here"
value=""
onChange={ (e) => {console.log('val', e.currentTarget.value)} }
disabled={false}
hasError={false}
subtext={'Required'}
/>
LinkPrimary
type Props = {
text: string,
disabled: boolean,
onClick: () => void,
}
<LinkPrimary
disabled={false}
text="PRIMARY LINK"
onClick={ () => {console.log('link clicked')} }
/>
LinkSecondary
type Props = {
text: string,
disabled: boolean,
onClick: () => void,
}
<LinkSecondary
disabled={false}
text="SECONDARY LINK"
onClick={ () => {console.log('link clicked')} }
/>
Paginator
- Works best with an object of pages in your state.
`
const pages = { 1: ['id to first item', 'second id'], 2: ['id to first item on second page', 'second id'] }
```jsx
type Props = {
limit: number,
total: number,
activePage: number,
onPaginatorClick: (page: number) => void,
}
<Paginator
limit={5}
activePage={1}
total={45}
onPaginatorClick={ (activePage) => console.log('page', activePage) }
/>
PhoneNumber
- Similar to Input but has a default/uneditable +1 at beginning of input.
- Allows for adding additional props in case you want all the input DOM props exposed. Examples would be onBlur, onFocus, onClick, etc.
type Props = {
label: string | number,
value: string | number,
name: string | number,
placeholder: string | number,
onChange: (e: SyntheticEvent<any>) => void,
disabled: boolean,
hasError: boolean,
};
<PhoneNumber
label="HOME PHONE NUMBER"
name='homePhoneNumber'
placeholder='8886785735'
value='5553332222'
onChange={e => {console.log('e', e)} }
disabled={false}
hasError={false}
/>
ProgressBar
type Props = {
show: boolean,
amount: number,
}
<ProgressBar
show={true}
amount={60} // change with a setInterval to see movement
/>
RadioButton
type Props = {
id: string|number, // be sure to make id unique
label: string,
name: string,
value: string|number,
checked: boolean,
onChange: (e: SyntheticEvent<any>) => void,
disabled: boolean,
}
<RadioButton
id={1}
label={'female'}
name={'gender'}
value={1}
checked={true}
onChange={e => {console.log('e', e.currentTarget.value)} }
disabled={false}
/>
SearchBar
type Props = {
placeholder: string,
query: string,
onSearch: (val: string) => void, // val === '' if clearing search
onChange: (val: string) => void,
}
<SearchBar
placeholder="Search Members"
query=""
onSearch={ (val) => {console.log('search', val)} }
onChange={ (val) => {console.log('change', val)} }
/>
Spinner
- Wrap with a parent component that has position relative.
type Props = {
left: string,
top: string,
fontSize: string,
visible: boolean,
}
<div style={{
position: 'relative', background: 'lightgrey', height: 100, width: 100
}}>
<Spinner
left={'50%'}
top={'50%'}
fontSize={'2em'}
visible={true}
/>
</div>
Local Setup
OPTION 1
Link this package locally and view changes in apps that use the package:
Within this project, create a local symlink
npm link
Install dependencies (only if this is your first time running the app or dependencies have been updated)
npm install
Run the package app locally
npm start
Within the project that depends on this package, use the local link
npm link mpulsemobile-react-component-library
Restart the app that depends on this package
NOTE: The above actions can be undone by replacing the link
command with unlink
OPTION 2:
Run the example
app and view live renderings of all the components:
- open two terminals:
npm start
cd example && npm start
- go to localhost:3000 to see a live rendering of the components
NOTE: If it's your first time running this locally, you will need to run npm install
in both the top-level and "example" directories
Publishing Changes to NPM
IMPORTANT NOTE: You must manually update the version number in package.json
before publishing changes
npm login
npm publish
License
MIT © mpulsemobile