Enscript Reusables

This library is a collection of convenient and often reused React components and utilities. To use this library, please make sure you have Bootstrap 4.3, or greater configured in your web page.

Installation

To add this library to your dependencies, use:

npm install --save-dev enscript-reusables

Peer Dependencies

In summary, peer dependencies are those which the library depends on but are not bundled with it. This is because you might also be using those same dependencies in your main application. Peer dependencies are ignored because your main app might be using a version different from the library's version and this can cause a whole lot of issues. Read more about peer dependencies here.

This library marks the following as peer dependencies, which must exist in your main application:

Dependency	Min version	Install command
`moment`	2.22.2	`npm i -D moment`
`react`	16.8.6	`npm i -D react`
`react-dom`	16.8.6	`npm i -D react-dom`
`react-redux`	7.1.0	`npm i -D react-redux`
`react-router-dom`	5.0.1	`npm i -D react-router-dom`
`redux-form`	8.2.4	`npm i -D redux-form`

Components

Breadcrumbs

Renders a breadcrumbs navigation component on the page. This helps a user know their current location within your application.

Props

Name	Type	Description
`crumbs`	`Array<BreadcrumbItem>`	The list of crumbs to display

BreadcrumbItem is an object having the syntax below:

{
    text: string,
    link: string
}

The text is what is rendered in each section of the breadcrumb. The link is the URL redirected to when the crumb is clicked.

Usage

import React from "react";
import { Breadcrumbs } from "enscript-reusables";

export const BreadcrumbsUsageComponent = () => {
    return (
        <Breadcrumbs 
            crumbs={[
                { text: "Root", link: "/path/to/root" },
                { text: "Group 1", link: "/path/to/group-1" },
                { text: "Item 1", link: "/path/to/item-1" }
            ]}
        />
    );
};

CheckGroup

A controlled component that allows you to select multiple values using a list of check boxes.

Props

Name	Type	Description
`label`	`string`	The label of the check group
`options`	`Array<CheckableItem>`	The checkable options for the check group
`values`	`Array<string>`	The selected values of the check group
`orientation`	`string`	The orientation of the check group. It can either be horizontal or vertical
`onChange`	`Function`	A function which is called when the field is selected. It receives the values list of the field

CheckableItem is an object having the syntax below:

{
    label: string,
    value: any
}

Usage

import React, { useState } from "react";
import { CheckGroup } from "enscript-reusables";

export const CheckGroupUsageComponent = () => {
    const [checkGroupValue, setCheckGroupValue] = useState([]);
    // Remember that the CheckGroup is an array of check boxes, hence it's value is an array
    
    return (
        <CheckGroup 
        	label="Label",
            options={[
                { label: "A", value: "A" },
                { label: "B", value: "B" },
                { label: "C", value: "C" },
                { label: "D", value: "D" },
            ]}
            values={checkGroupValue}
            orientation="horizontal"
            onChange={setCheckGroupValue}
        />
    );
};

ConfirmModal

An in-line modal that is used for action confirmation. In the default state, a trigger button is shown. When the trigger button is clicked, the the confirm and cancel buttons are revealed for the user to click. When the user clicks the confirm button, the callback is invoked.

States

Default:

Trigger button clicked: or

Action confirmed: or

Props

Name	Type	Description
`classes`	`Array<string>`	A list of CSS classes for each button. The class names are assigned in the order of; trigger button, confirm button and cancel button
`content`	`Array<string>`	A list of texts for each button. The texts are assigned in the order of; trigger button, confirm button and cancel button
`isLoading`	`boolean`	When true, the confirm button is disabled and a loading indicator appears within it
`expandOnRender`	`boolean`	If true, the modal is expanded when the modal when initially rendered
`asDialog`	`boolean`	If true, the modal will show up as a dialog instead on being in-line
`onConfirm`	`Function`	The function that is called when the confirm button is clicked

Usage

import { ConfirmModal } from "enscript-reusables";

export const ConfirmModalUsageComponent = () => {
    const launchRocket = () => {
        console.log("Rocket launch sequence initiated...")
    };
    
    return (
        <div>
        	<label>Launch the missile</label>
            <ConfirmModal
                classes={["btn btn-primary btn-sm", "btn btn-primary btn-sm", "btn btn-secondary btn-sm"]}
    			content={["Start", "Confirm start", "Cancel"]}
    			isLoading={true}
    			onConfirm={launchRocket}
			/>
        </div>
    );
};

DatePicker

A responsive date picker component. This component is based on the MomentJS library.

Props

Name	Type	Description
`className`	`string`	The class name for the component's toggle form
`dateFormat`	`string`	A date format to be used internally by the component. Default is `YYYY-MM-DD`. See moment#string for more information
`displayDateFormat`	`string`	The date format to use in displaying the selected date in the toggle component. Default is `YYYY-MM-DD.` See moment#string for more information
`value`	`string`	The date value of the component. This value must be of the same format as `dateFormat`
`onChange`	`Function`	The function that is called when a date is selected. If the date is cleared, the function is passed a null value.

Usage

import React, { useState } from "react";
import { DatePicker } from "enscript-reusables";

export const DatePickerUsageComponent = () => {
    const [datePickerValue, setDatePickerValue] = useState("2019-01-01");
    
    return (
        <DatePicker 
            className="form-control"
            dateFormat="YYYY-MM-DD"
            displayDateFormat="YYYY-MM-DD"
            value={datePickerValue}
            onChange={setCheckGroupValue}
        />
    );
};

FileField

A file input that supports drag and drop functionality

Props

Name	Type	Description
`className`	`string`	The class name for the component
`maxFileSize`	`number`	An optional file size in bytes (E.g. 1048576 = 1MB). If greater than 0 and the uploaded file's size exceeds it, onChange will not be triggered
`accept`	`Array<string>`	A list of acceptable file extensions. Eg `["pdf", "doc"]`. Do not add any preceding period to the extension
`onChange`	`Function`	The function to call when a file is dropped or selected

Usage

import React, { useState } from "react";
import { FileField } from "enscript-reusables";

export const FileFieldUsageComponent = () => {
    const [file, setFile] = useState("2019-01-01");
    
    return (
        <FileField 
            className="form-control"
            maxFileSize={8192}// I.e. 8KB
            accept={["pdf", "doc"]}// Note that the extensions are not preceeded by a period. It's "pdf" not ".pdf"
            onChange={setCheckGroupValue}
        />
    );
};

Flash

Renders a flash messages on the page. A flash message is a message that pops up in the page an dissappears after some time.

This component only handles the flash message rendering. It DOES NOT connect to your applications state to access the flash messages. You'll need to wrap this component in another component which performs the actual fetching of the messages from the applications state.

Props

Name	Type	Description
`items`	`Array<FlashItem>`	The list of crumbs to display
`onRemoveFlash`	`Function`	The function to call when the close button on a flash message is clicked. The function is passed the id of the flash

FlashItem is an object having the syntax below:

{
    id: string
    level: string,
    message: string
}

id is a unique identifier for the flash message. This is useful when you have to target a specific flash message to delete it. level is the severity of the flash message. Possible values are success, info, warning and danger. Each level has a different color code. message is the text to be rendered in the flash.

Usage

import React from "react";
import { connect } from "react-redux";
// This import is this Flash component
import { Flash } from "enscript-reusables";
// This import is your flash removal function
import { removeFlash } from ...;

const ApplicationFlashComponent = ({ flashMessages, removeFlash }) => {
    // This function is called when the close button of a flash is clicked.
    // The function is passed the id of the flash clicked
    const onRemoveFlash = id => {
        removeFlash(id);
    };

    return <Flash items={flashMessages} onRemoveFlash={onRemoveFlash} />
};

// This is where your component connects to your redux state and fetches the flash messages
// If you store your flash differently in your state, you need to replace "state.flash" with the state object containing the flash messages
// If you use a different state management scheme or library, please update accordingly
export default ApplicationFlash = connect(
    state => ({ flashMessages: state.flash }),
    { removeFlash }
) (ApplicationFlashComponent);

ReduxForm Components

The components in the table below have been built to work with the ReduxForm to make form building very easy.

Component	Based on	Description
`FormInputField`	`<input />`	An generic input form element to be used with redux-form
`FormNumberField`	`<ReactDynamicNumber />`	A numeric input form element to be used with redux-form. It automatically separates thousand digits with commas
`FormSelectField`	`<select />`	A select form element to be used with redux-form
`FormTextField`	`<textarea />`	A text area form element to be used with redux-form
`FormDatePicker`	[`<DatePicker />`](# DatePicker)	A browser agnostic date picker built on top of [DatePicker](# DatePicker)
`FormCheckGroup`	[`<CheckGroup />`](# CheckGroup)	A redux-form check group element built on top of [CheckGroup](# CheckGroup)
`FormRadioGroup`	[`<RadioGroup />`](# RadioGroup)	A redux-form check group element built on top of [RadioGroup](# RadioGroup)

Usage

The following snippet is a form using all the components in the table above:

import React from "react";
import PropTypes from "prop-types";
import { Field } from "redux-form";
import { connect } from "react-redux";
import { FormInputField, FormNumberField, FormSelectField, FormTextField, FormDatePicker, FormCheckGroup, FormRadioGroup, HOCs } from "enscript-reusables";

const ReduxComponentsForm = ({ handleSubmit }) => {
    const onSubmitForm = values => {
    	console.log(values);
        /*
        	We expect to see an object with the syntax below:
        	{ name, age, language, description, dateOfBirth, interests, gender }
        */
    };

    return (
        <form onSubmit={onSubmitForm}>
            <Field component={FormInputField} name="name" label="Name" required />
            <Field component={FormNumberField} name="age" label="Age" required />
            <Field component={FormSelectField} name="language" label="Primary language">
				<option value="EN">English</option>
                <option value="FR">French</option>
            </Field>
            <Field component={FormTextField} name="description" label="Brief intro" />
            <Field component={FormDatePicker} name="dateOfBirth" label="Date of birth" />
            <Field 
                component={FormCheckGroup} 
                name="interests" 
                label="Interests"
                orientation="horizontal"
                options={[
                    { label: "Drawing", value: "drawing" },
                    { label: "Biking", value: "biking" }
                ]}
            />
            <Field 
                component={FormRadioGroup} 
                name="gender" 
                label="Gender"
                orientation="horizontal"
                options={[
                    { label: "Male", value: "male" },
                    { label: "Female", value: "female" }
                ]}
            />

            <button>Create</button>
        </form>
    );
};

ReduxComponentsForm.propTypes = {
    handleSubmit: PropTypes.func
};

export default connect()(
    HOCs.withForm ({
        name: "ReduxComponentsForm",
        required: ["name", "age"]
    })(ReduxComponentsForm)
);

RadioGroup

A controlled component that allows you to select a single value from a list of values using radio buttons

Props

Name	Type	Description
`label`	`string`	The label of the checkbox
`options`	`Array<CheckableItem>`	The checkable options for the radio group
`value`	`any`	The value of the radio group
`orientation`	`string`	The orientation of the radio group. It can either be horizontal or vertical
`onChange`	`Function`	A function which is called when the field is selected. It receives the value of the field

CheckableItem is an object having the syntax below:

{
    label: string,
    value: any
}

Usage

import React, { useState } from "react";
import { RadioGroup } from "enscript-reusables";

export const RadioGroupUsageComponent = () => {
    const [radioGroupValue, setRadioGroupValue] = useState([]);
    
    return (
        <RadioGroup 
        	label="Order type",
            options={[
                { label: "Good till closed", value: "good_till_closed" },
                { label: "Has expiry", value: "has_expiry" },
                { label: "osnv", value: "osnv" },
                { label: "ons onk", value: "ons_onk" },
            ]}
            value={radioGroupValue}
            orientation="horizontal"
            onChange={setRadioGroupValue}
        />
    );
};

ListRenderer

A component which renders a list of items

Props

Name	Type	Description
`items`	`Array<object>`	The list of items to render
`attrs`	`Array<ItemAttr>`	The list of properties to render for each item. Each attr should have a label and value. All items must have all the values of all `attrs` specified
`renderCustomData`	`Function`	A function to render custom item attribute. If this function is present, it is called on every iteration of `attrs`. The function is passed the current "item", the value of the current attr, the index of the current "item" in the list of items and the index of the attr in the list of `attrs`. It should return custom JSX to render or null to fallback to default render
`renderCustomUI`	`Function`	By default, ListRenderer renders in a tabular form. If you would like to provide a completely custom look for the items, the `renderCustomUI` gives you that. If present, the `renderCustomData` function and redirect string and the `attrs` will be ignored. `renderCustomUI` will be called for each item in the items array '
`redirect`	`string`	A string indicating where to redirect to when the "more" button on an item is clicked. It must be of the format `/path/to/details/:attr`, where attr is a valid attribute of each item
`customUIContainerClass`	`string`	If `renderCustomUI` is defined, the elements are rendered in a `<div />`. `customUIContainerClass` is the class name for this `<div />`

ItemAttr is an object having the syntax below:

{
    label: string,
    value: string
}

Usage

import React from "react";
import moment from "moment";
import { ListRenderer } from "enscript-reusables";

export const ListRendererUsageComponent = () => {
    const itemList = [
        { id: 1, created_at: "2019-01-01", institution: "IOI" },
        { id: 2, created_at: "2019-01-01", institution: "Oasis" },
        { id: 3, created_at: "2018-11-01", institution: "Modogot" },
    ];
    
    const renderCustomData = (object, value) => {
        if (value == "id") return `Item ${object.id}`;
        if (value == "created_at") return moment(object.created_at).format("dddd DD-MMMM-YYYY");
    };
    
    return (
        <ListRenderer
        	items={itemList},
            attrs={[
                { label: "Item", value: "id" },
                { label: "Created at", value: "created_at" },
                { label: "Owner institution", value: "institution" },
            ]}
            renderCustomData={renderCustomData}
            redirect="/items/show/:id"
        />
    );
};

Loader

A loading indicator

Props

Name	Type	Description
`loaderImage`	`Object`	An image to use as the loading indicator. If not provided, the default indicator is used

Usage

import React from "react";
import { Loader } from "enscript-reusables";
import CustomLoaderImage from "../path/to/custom/loader/image";

export const LoaderUsageComponent = () => {
    return <Loader loaderImage={CustomLoaderImage}>Hello loader</Loader>;
};

LoaderButton

A button that can show a loader image.

Props

Name	Type	Description
`className`	`string`	The class name for the button
`isLoading`	`boolean`	When set to true, the button is disabled and the loader appear within it

Apart from the props listed above, LoaderButton accepts all other attributes a <button /> would.

Usage

import React from "react";
import { LoaderButton } from "enscript-reusables";

export const LoaderButtonUsageComponent = () => {
    return (
        <LoaderButton
            isLoading={true}
            className="btn btn-primary btn-sm"
        >
            Submit
        </LoaderButton>);
};

ObjectViewer

Renders specified attributes of an object in a tabular form.

Props

Name	Type	Description
`object`	`Object`	The object to render
`attrs`	`Array<ItemAttr>`	A list of properties to render for the object. Each attr must have a label and value
`renderCustomData`	`Function`	A function to render custom item attribute. The function is passed the "object" and the current "attr" and the index of the current "attr". It should return custom JSX to render or null to fallback to default render

ItemAttr is an object having the syntax below:

{
    label: string,
    value: string
}

Usage

import React from "react";
import moment from "moment";
import { ObjectViewer } from "enscript-reusables";

export const ObjectViewerUsageComponent = () => {
    const item = {
    	name: "Item 1", 
        created_at: "2019-01-01", 
        institution: "IOI"
    };
    
    const renderCustomData = (object, value) => {
        if (value == "created_at") return moment(object.created_at).format("dddd DD-MMMM-YYYY");
    };
    
    return (
        <ObjectViewer
        	object={item},
            attrs={[
                { label: "Name", value: "name" },
                { label: "Created at", value: "created_at" },
                { label: "Institution", value: "institution" },
            ]}
            renderCustomData={renderCustomData}
        />
    );
};

Overlay

Renders children in a component which overlays the page

Usage

import React from "react";
import { Overlay } from "enscript-reusables";

export const OverlayUsageComponent = () => {
	return (
        <Overlay>
    		<p>Content on overlay</p>
    	</Overlay>
    );
};

PageContainer

Wraps a page in a bootstrap container element

Props

Name	Type	Description
`noTopbar`	`boolean`	Indicates that no topbar is present. This does not render a margin on top of the page.
`asContainer`	`boolean`	If true a ".container" component is used instead of a ".container-fluid"

Usage

import React from "react";
import { PageContainer } from "enscript-reusables";

export const PageContainerUsageComponent = () => {
	return (
        <PageContainer asContainer>
    		<p>Some page content</p>
    	</PageContainer>
    );
};

PageHeader

Renders the an h2 header and a subtitle on the target page. If it has children, they would aslo be rendered directly below the subtitle

Props

Name	Type	Description
`title`	`string`	The title to display in the header
`subtitle`	`string`	The text to display as the subtitle of the page

Usage

import React from "react";
import { PageHeader } from "enscript-reusables";

export const PageHeaderUsageComponent = () => {
	return (
        <PageHeader title="My awesome page title" subtitle="My super awesome subtitle" />
    );
};

Pagination

A pagination object for list control

Props

Name	Type	Description
`total`	`number`	The total number of items
`page`	`number`	The current page
`size`	`number`	The number of items rendered in a page (I.e page size)
`onPrev`	`Function`	Called when the prev button is clicked
`onNext`	`Function`	Called when the next button is clicked

Usage

import React from "react";
import { Pagination } from "enscript-reusables";

export const PaginationUsageComponent = ({ items, page, itemsCount, pageSize }) => {
    const fetchItems = page => {
        // Fetch page of items
    };
    
	return (
        <Pagination 
            page={page} 
            size={pageSize}
            total={itemsCount}
            onPrev={() => fetchItems(page - 1)}
            onNext={() => fetchItems(page + 1)}
        />
    );
};

SearchInput

Renders a controlled input field whose value is passed to a callback provided anytime it changes

Props

Name	Type	Description
`className`	`string`	The class of the input element
`placeholder`	`string`	The placeholder text for the input element
`value`	`string`	The current value of the search input
`onChange`	`Function`	Called with the value of the input whenever it changes.

Usage

import React from "react";
import { SearchInput } from "enscript-reusables";

export const SearchInputUsageComponent = ({ searchString }) => {
    const searchWithString = str => {
        // Search for matching items to "str"
    };
    
	return (
        <SearchInput 
            className="form-control"
            placeholder="Search by name..."
            onChange={val => searchWithString(val)}
            value={searchString}
        />
    );
};

Tab

A switchable tabbed component. By default it manages its own state internally but if the props index and setIndex are provided, it becomes a controlled component

Props

Name	Type	Description
`labels`	`string`	A list of strings for the tabs
`index`	`string`	The current index to display
`setIndex`	`Function`	The function that is called when a tab label is clicked. It is passed the index of the label

Usage

import React, { useState } from "react";
import { Tab } from "enscript-reusables";

export const TabUsageComponent = ({ searchString }) => {
    const [tabIndex, setTabIndex] = useState(0);
    
	return (
        <Tab labels={["Tab #1", "Tab #2", "Tab #3"]} index={tabIndex} setIndex={setTabIndex}>
        	<div>
            	<p>Content 1</p>
            </div>
            <div>
            	<p>Content 2</p>
            </div>
            <div>
            	<p>Content 3</p>
            </div>
        </Tab>
    );
};

Utilities

withForm (from `HOCs` I.e. `import { HOCs } from "enscript-reusables"`)

A HOC that returns a reduxForm function wrapper for a component. This HOC performs basic form validation by checking if required values are empty. You can read more about React's Higher Order Component (HOC) pattern here.

Usage

...
export default withForm(params) (Component);

Note that withForm can be chained with other HOCs. An example is show below where it is chained with withRouter from "react-router-dom" and connect from "react-redux":

export default withRouter (
    connect()(
        withForm(params)(Component)
    )
);

params is an object parameter whose content is described below:

Name	Type	Description
`name`	`string`	The internal name of the form
`required`	`Array<string>`	A list of required fields in the form. If any of these fields are empty, form submission will fail
`accessible`	`Array<string>`	A list of fields whose values are passed back to your wrapped component as a prop. The values can be accessed under the `fieldValues` prop
`initialValues`	`object`	An object of initial key value pairs for the form
`validateSecondary`	`Function`	A function to perform secondary validation. It is passed the `values` and `errors` object in that order. If a field fails secondary validation, set the error by `errors[field]="Error message"`

Practical Usage

Here's a complete use case for this HOC. It's a basic form that collects a user's name, age and email. The email is only collected if the age is greater than 18. The form can also be submitted if the age is greater than 10.

import React from "react";
import PropTypes from "prop-types";
import { Field } from "redux-form";
import { connect } from "react-redux";
import { InputField, NumberField, FormHolder, HOCs } from "enscript-reusables";
import { submitFormHandler } from "..."; // import you handler here

const ExampleForm = ({ fieldValues, submitFormHandler, handleSubmit }) => {
  const submitForm = values => {
    console.log(values);
    submitFormHandler(values);
  };

  return (
    <div id="example-form">
      <FormHolder title="Example Form">
        <form onSubmit={submitForm}>
          <Field component={InputField} name="name" placeholder="Name" />
          <Field component={NumberField} name="age" placeholder="Age" />

          <!-- Remember, we only collect the email when age is greater than 18 -->
          {parseInt(fieldValues.age) > 18 &&
            <Field component={InputField} name="email" placeholder="Email" />
          }

          <button>Create</button>
        </form>
      </FormHolder>
    </div>
  );
};

ExampleForm.propTypes = {
    fieldValues: PropTypes.object,
    submitFormHandler: PropTypes.func,
    handleSubmit: PropTypes.func
};

const validateSecondary = (values, errors) => {
    // In the secondary validator, we verify the age constraint (I.e. age > 10)
    if (values.age < 10) errors.age = "Age cannot be less than 10";
}

export default connect(
    null,
    { submitFormHandler }
)(
    HOCs.withForm ({
        name: "CreateAssetClassForm",
        required: ["name", "age"],
        accessible: ["age"] // Because we want to access the value of "age"
        validateSecondary
    })(ExampleForm)
);

withQueryParams (from `HOCs` I.e. `import { HOCs } from "enscript-reusables"`)

A HOC that parses the query string in the url and passes them to the element as a qp object prop

Practical Usage

Here's a complete code sample indicating how to use the withQueryParams HOC. Let's assume this component is on a page with a url of http://locahost:3000?param1=1234&param2=hello. This HOC will parse the query string in the url and pass it to your component as the qp prop.

import PropTypes from "prop-types";
import React, { useEffect } from "react";
import { HOCs } from "enscript-reusables";

const MyComponent = ({ qp }) => {
    useEffect(() => {
        console.log(qp)
        /*
            The following should show up in the log of "qp":
            {
                param1: "1234",
                param2: "hello"
            }
        */
    }, []);

    return <div>My Component</div>;
};

MyComponent.propTypes = {
	qp: PropTypes.object,
};

export default HOCs.withQueryParams (MyComponent);

useWindowSize (from `Hooks` I.e. `import { Hooks } from "enscript-reusables"`)

A React hook that fires when the window size changes. It accepts a callback which is passed an array contianing the new window width and height.

Practical Usage

import React from "react";
import { Hooks } from "enscript-reusables";

export const MyComponent = () => {
    Hooks.useWindowSize(([newWidth, newHeight]) => {
        console.log({
            w: newWidth,
            h: newHeight
        });

        /* Execute window size dependent code */
    });

    return <div>My Component</div>;
};

useWindowSizes (from `Hooks` I.e. `import { Hooks } from "enscript-reusables"`)

Building on top of Hooks.useWindowSize, this hook fires when the window width category changes. The window width category refer to Bootstrap's window breakpoints which are defined below:

Below 576px - extra small screen size
576px to 767px - small screen size
768px to 991px - medium screen size
992px to 1199px - large screen size
Above 1200px - extra large screen size When the screen resizes beyond any of the breakpoints, the hook is triggered. The hook accepts a callback which is passed the an index representing a particular window width category which are defined below:
0 - extra small screen size
1 - small screen size
2 - medium screen size
3 - large screen size
4 - extra large screen size

Practical Usage

import React from "react";
import { Hooks } from "enscript-reusables";

export const MyComponent = () => {
    Hooks.useWindowSizes(index => {
        console.log(index);

        /* Execute window width category dependent code */
    });

    return <div>My Component</div>;
};

reduxFormInputWrapper (from `utils` I.e. `import { utils } from "enscript-reusables"`)

This utility provides a wrapper for building input components based on the ReduxForm architecture. It accepts a React component and a configuration object and returns a newly wrapped component which can be used with a ReduxForm <Field /> component.

The component is passed the value from the ReduxForm's global state, the onChange function and other attributes you may add to the <Field /> component.

Practical Usage

Let's assume we needed to build a hypothetical input component that allows the user to pick from one of three options. For the sake of this example, we'll call it MySingleSelect.

Withing the my-single-select.jsx, we'd have:

import React from "react";
import { utils } from "enscript-reusables";

const { reduxFormInputWrapper } = utils;

const MySingleSelectComponent = ({ value, onChange, ...props }) => {
    const _onChange = option => {
        onChange(option);
    };
    
    const className = option => {
        if (value == option) return "active";
        return "";
    };
    
    return (
        <div id="my-single-select-component">
    		<span className={className("first")} onClick={_onChange("first")}>First option</span>
            <span className={className("second")} onClick={_onChange("second")}>Second option</span>
            <span className={className("third")} onClick={_onChange("third")}>Third option</span>
    	</div>
    );
};

const MySingleSelect = reduxFormInputWrapper(({ input, fields }) => {
        return <MySingleSelectComponent {...fields} {...input} />;
	}, { className: "my-single-select-field" }
)

Notice how fields and input have been spread as props to the form, the value and onChange come from the input, while fields would hold any other prop you'd like to pass to your component. (In this case, oneProp and anotherProp as seen below)

The configuration object passed as the second argument must be of the form:

{
    className: string,
}

In a form usage, say my-form.jsx, you'd use the above component in the snippet below like so:

...
import { MySingleSelect } from "path/to/component";
...
<Field component={MySingleSelect} name="select" oneProp="val" anotherProp="val2" required />
...

From this, the value of the component would be present in the form values when the form is submitted.

Storybook Samples

This library is built with Storybook. The stories of each component are available to view. To run the stories, run npm install to install dependencies and then npm run storybook. When finished, a new browser window will be opened where you can view the components and interact with them

Contrubutors

Kwame Opare Asiedu

Changelog

v5.3.0
- Fixed bug in Loader causing loader image not to render
- Fixed issue in DatePicker where providing an invalid date fails to fallback to the current date
- Added reduxFormInputWrapper utility that allows for creating input components compatible with ReduxForm.
v5.2.0
- Added Overlay component
- Added asDialog prop to ConfirmModal. This allows you to choose to render the ConfirmModal as an in-line component or as an overlay dialog component
- Keyboard events in DatePicker no longer propagate outside of date select modal
- Minimum versions of peer dependencies updated. [View](# Peer Dependencies)
v5.1.0
- Added cancel button to DatePicker
- Added keyboard events to DatePicker
- Added type="button" to all DatePicker action buttons. This prevents them from triggering a submit in the case the DatePicker is used in a form
- Added display for default date in DatePicker
- Added export for RadioGroup
- Added keyboard events for CheckGroup
- Added keyboard events for RadioGroup
v5.0.0 (Breaking)
- Added utility to create redux-form components
- Removed FormHolder component
- Renamed InputField to FormInputField, SelectField to FormSelectField, NumberField to FormSelectField, TextField to FormTextField
- Create new DatePicker dialog component
- Added new form components: FormFileField, FormCheckGroup and FormRadioGroup
- Removed react-datepicker as dependency of DatePicker as well as project
- Removed all comments from source code. Comments on each component are now available on this ReadME
- Updated ReadME