mm-react-reusable

Reusable Components built with AntD 4.0 and used by Managed Methods

• Install
• Example Simple Button
• Example Main Filter Options
• Example Main Filter
• Example Quick Filter Options
• Example Quick Filter
• Example Basic Table Options
• Example Basic Table
• Example Sort Options
• Example Sort
• Example Bulk Action Modal Options
• Example Regular Search Options
• Example Regular Search
• License

Install

npm install --save mm-react-reusable

Import

import {
  BulkActionModal,
  QuickFilter,
  SimpleButton,
  MainFilter,
  Sort
} from "mm-react-reusable";

Example Simple Button

<SimpleButton
  disabled={isRestoreButtonDisabled()}
  type="primary"
  size="small"
  icon={<SafetyCertificateOutlined />}
  text="Restore"
  key="restore"
  textBold={true}
/>

Example Main Filter Options

import React from "react";
import moment from "moment";
import { Checkbox, Input, DatePicker, Select } from "antd";
const { Option } = Select;
const { RangePicker } = DatePicker;

const disabledDate = current => {
  return current && current > moment().endOf("day");
};

const mainFilterOptions = [
  {
    label: "Color",
    value: "color",
    rules: [
      {
        type: "array",
        required: false
      }
    ],
    component: (
      <Checkbox.Group options={["Red", "Blue", "Green", "Purple", "Brown"]} />
    )
  },
  {
    label: "Icon",
    value: "icon",
    rules: [
      {
        required: true
      }
    ],
    component: (
      <Select style={{ width: 100, textAlign: "center", borderLeft: 0 }}>
        {[
          "Android",
          "Apple",
          "Github",
          "Google",
          "Twitter",
          "Instagram",
          "Amazon",
          "Reddit"
        ].map(option => {
          return (
            <Option key={option} value={option}>
              {option}
            </Option>
          );
        })}
      </Select>
    )
  },
  {
    label: "Size",
    value: "size",
    component: <Input></Input>,
    options: null
  },
  {
    label: "Release Date",
    value: "date",
    component: (
      <RangePicker
        showTime={{ format: "HH:mm" }}
        format="YYYY-MM-DD HH:mm"
        placeholder={["Start Time", "End Time"]}
        disabledDate={disabledDate}
      ></RangePicker>
    ),
    options: null
  },
  {
    label: "Price Range",
    value: "price",
    component: "Custom Range",
    options: null
  }
];

export default mainFilterOptions;

Example Main Filter

mainFilter is a function which receives all the form values from inside of the filter drawer

<MainFilter
  mainFilterOptions={mainFilterOptions}
  filter={mainFilter}
></MainFilter>

Example Quick Filter Options

const quickFilterOptions = [
  "Android",
  "Apple",
  "Github",
  "Google",
  "Twitter",
  "Instagram",
  "Amazon",
  "Reddit"
];

export default quickFilterOptions;

Example Quick Filter

quickFilter is a function which receives the chosen filter

quickFilterReset is a boolean

<QuickFilter
  quickFilterOptions={quickFilterOptions}
  quickFilter={quickFilter}
  reset={quickFilterReset}
/>

Example Basic Table Options

const tableDataOptions = {
  columns: ["subject", "attachments", "sender", "mailbox", "sent_date"],
  data: [
    {
      key: "1",
      subject: "Updated Hire Info",
      attachments: 10,
      mailbox: "[email protected]",
      sent_date: "Apr 27, 2020, 7:03:14 AM",
      sender: "james"
    },
    {
      key: "2",
      subject: "Updated Hire Info",
      attachments: 1,
      mailbox: "[email protected]",
      sent_date: "Apr 27, 2020, 7:03:13 AM",
      sender: "emma"
    },
    {
      key: "3",
      subject: "Managed Methods | SaaS Files and Folders",
      attachments: 1,
      mailbox: "[email protected]",
      sent_date: "Apr 27, 2020, 7:03:11 AM",
      sender: "john"
    },
    {
      key: "4",
      subject: "Managed Methods | SaaS Files and Folders",
      attachments: 7,
      mailbox: "[email protected]",
      sent_date: "Apr 27, 2020, 7:03:09 AM",
      sender: "sophia"
    },
    {
      key: "5",
      subject: "Managed Methods | SaaS Files and Folders",
      attachments: 2,
      mailbox: "[email protected]",
      sent_date: "Apr 27, 2020, 7:03:07 AM",
      sender: "olivia"
    }
  ]
};

Example Basic Table

<BasicTable
  type="checkbox" //checkbox or radio
  paginationPosition="bottomRight" //topLeft | topCenter | topRight |bottomLeft | bottomCenter | bottomRight
  tableDataOptions={tableDataOptions}
  loading={false} //true or false
  size="small" //default | middle | small
/>

Example Sort Options

const sortOptions = [
  "Subject",
  "Attachments",
  "Sender",
  "Mailbox",
  "Sent Date"
];

export default sortOptions;

Example Sort

sort is a function which receives both "ascend"/"descend" values and the field which to sort by

<Sort
  buttonStyle={{ float: "right", margin: 10 }}
  sortButtonOptions={sortOptions}
  sort={sort}
/>

Example Bulk Action Modal Options

const bulkActionModalOptions = {
  message: {
    title: "Are you sure you want to delete 1 record(s)?",
    content: "This action will permanently delete the email from the user",
    bulkActionCancel: "Cancel",
    bulkActionSubmit: "Ok"
  },
  form: {
    layout: "vertical",
    title: "Share Entities via Email",
    description:
      "Please enter the following details in order to share the selected emails.",
    toggleButtonText: "Mask the Risk",
    toggleButtonChecked: true,
    bulkActionCancel: "Cancel",
    bulkActionSubmit: "Share",
    fields: [
      {
        name: "recipient",
        label: "Recipient(s)",
        tooltipPresent: "yes",
        tooltipMessage: "Seperate multiple addresses with commas",
        input: "input",
        required: true,
        errorMessage: "Please provide recipient(s)",
        whitespaceAllowed: true
      },
      {
        name: "subject",
        label: "Subject",
        tooltipPresent: "no",
        input: "input",
        required: true,
        errorMessage: "Please provide subject",
        whitespaceAllowed: true
      },
      {
        name: "comment",
        label: "Comment",
        tooltipPresent: "no",
        input: "textarea"
      }
    ]
  }
};

Example Regular Search Options

const searchOptions = {
  options: ["subject", "attachments", "sender", "mailbox", "sent_date"]
};

Example Regular Search

<RegularSearch searchOnKey={true} searchOptions={searchOptions.options} />

License

MIT ©