@softledger/components NPM

Examples

Installation

Most of these components rely on Reactstrap

To add to your project:

yarn add reactstrap 
yarn add @softledger/components

Then just import the component:

import { LoadingButton } from '@softledger/components';

Components:

BoolDropDownMenuItem

From src/BoolDropDownMenuItem.jsx

Drop Down Menu Item which is toggled as either on/off on click Component is stateless, so toggle is handled up

prop	type	required	description
onToggle	`Function`	:white_check_mark:	Function to toggles the value
text	`String`	:white_check_mark:	Menu Item Text
toggle	`Boolean`	:x:	If false, will not toggle wrapped dropdown
value	`Boolean`	:x:	Current value

ButtonBar

From src/ButtonBar.jsx

Displays a Row a buttons, propertly spaced

prop	type	default	required	description
buttons	`Array`		:white_check_mark:	Array of buttons to show, in order
style	`Object`		:x:	Additional styles on the containing component

CardValue

From src/CardValue.jsx

Displays a Card with a header and body

prop	type	default	required	description
Body	`Union<String \\| Object>`		:x:	Text or JSX to display in the body
Header	`Union<String \\| Object>`		:x:	Text or JSX to display in the heaader
big	`Boolean`	`false`	:x:	Set true will pad header and body with extra space
style	`Object`		:x:	Extra styles to apply to container

ChipButton

From src/ChipButton.jsx

Displays a Pill shaped Button with text and an Icon

prop	type	required	description
iconClass	`String`	:x:	FontAwesome Icon class name (make sure font awesome library is loaded)
onClick	`Function`	:x:	Function to call when clicked
style	`Object`	:x:	Additional styles to add to container
text	`Union<String \\| Object>`	:white_check_mark:	Can be text or jsx

ConfirmButton

From src/ConfirmButton.jsx

Button which, when clicked, displays a confirm modal

prop	type	default	required	description
buttonClass	`String`	`'btn-primary'`	:x:	Classes to apply to button "space separated" example: 'btn-success'
buttonText	`String`	`'Submit'`	:x:	Text to display on the button
confirmBody	`Union<String \\| Object>`	`'Please Confirm'`	:x:	Text or JSX to show in modal body
confirmTitle	`Union<String \\| Object>`	`'Are you sure?'`	:x:	Text or JSX to show in modal header
disabled	`Boolean`	`false`	:x:	Whether the button is disabled
onConfirm	`Function`		:white_check_mark:	Callback when modal is confirmed
style	`Object`		:x:	Additional styles to apply to the button

DateFormat

From src/DateFormat.jsx

Formats a date value consistently

prop	type	default	required	description
date	`Union<Object \\| String>`		:white_check_mark:	Can be a string, Date() or moment()
format	`String`	`'MM/DD/YYYY'`	:x:	Moment format specifier

DropDownMenu

From src/DropDownMenu.jsx

Thin wrapper on reactstrap DropdownMenu Toggle tag defaults to a font aweseom bars Controls toggle state

prop	type	default	required	description
class	`String`		:x:	className to apply to DropDown container
openRight	`Boolean`	`false`	:x:	Should open on the right
toggleTag	`Object`	`<FontAwesomeIcon icon='bars' />`	:x:	Custom Tag

LoadingButton

From src/LoadingButton.jsx

Multi-purpose button shows loading icon if onSubmit is promise based controls loading state

prop	type	default	required	description
buttonClass	`String`	`'btn-primary'`	:x:	Optional classNames to apply to the button
buttonText	`String`		:x:	Text to display on the button required if iconClass is not set
disabled	`Boolean`	`false`	:x:	Set to true to disable the button
iconClass	`String`		:x:	Font Awesome icon name to be used *if set buttonText is ignored
notPromise	`Boolean`	`false`	:x:	Specifies that the onClick function does not return a Promise
onClick	`Function`		:white_check_mark:	Callback for when the button is clicked *if it does not return a promise, set prop 'notPromise'={true}
toolTip	`String`		:x:	Text to display as a tooltip when the button is hovered
toolTipPlacement	`Enum('left','right','top','bottom','topLeft','topRight','bottomLeft','bottomRight')`	`'top'`	:x:	Location the tooltip should appear

SLLoadingIcon

From src/SLLoadingIcon.jsx

Loading Icon which displays the SoftLedger Log spinning

prop	type	default	required	description

SLLogo

From src/SLLogo.jsx

SVG generated SoftLedger Logo

prop	type	default	required	description

TabView

From src/TabView.jsx

Thin wrapper on reactstrap's Tabs

prop	type	required	description
tabs	`Array[]<Shape>`	:white_check_mark:	Array of tabs to display
tabs[].Body	`Object`	:white_check_mark:	JSX to display as the tab content
tabs[].Header	`String`	:white_check_mark:	Tab Navigation Header Text
tabs[].onClick	`Function`	:x:	Optional callback when the tab is clicked useful for loading content