React AntD Styled Components

• Reuploading the 'react-antd-styled-components' library which was removed recently from the registry.
• A custom react component library built using Antd and styled components.
• Depending on your use case, pass the application string to the component. Available application strings: CRM, EVENT, ECOMMERCE, ANALYTICS, more to come... (Still under development)

Installation

npm i react-antd-styled-components2

Usage

Example 1 - Event Calendar

• AppCalendar styled component built using react-big-calendar library

import ReactComponents from "react-antd-styled-components2";
import { luxonLocalizer, Views } from "react-big-calendar";

const { AppRowContainer, AppCalendar } = ReactComponents("EVENT");

const CustomToolbar = AppCalendar.CustomToolbar;
const { StyledCalendar } = AppCalendar.Styles;

<AppRowContainer interval={120}>
  <Col xs={24}>
    <StyledCalendar
      scrollToTime={scrollToTime}
      defaultDate={new Date()}
      defaultView={Views.MONTH}
      events={eventList}
      onSelectEvent={handleSelectEvent}
      localizer={localizer}
      style={{ ... }}
      eventPropGetter={eventPropGetter}
      popup
      components={{
        month: {
          dateHeader: ({ date, label }) => {
            return (
             ......
            );
          },
        },
        event: ({ event }) => {
         .......
        },
        toolbar: CustomToolbar,
      }}
    />
  </Col>
</AppRowContainer>;

Example 2 - CRM Table

import ReactComponents from "react-antd-styled-components2";

const { AppRowContainer, AppCard, AppLoader, ListingTable } = ReactComponents("CRM");

<AppRowContainer>
  <Col xs={24} lg={24}>
    <AppCard>
      <ListingTable
        tableData={data}
        loading={loading}
        selectable={true}
        pagination={true}
        headerConfig={{
          dateRangeConfig: {
            enable: true,
            dateProperty: "date",
            buttons: ["today", "week", "month", "year"],
          },
          searchConfig: {
            enable: true,
            placeholder: "Search by Keyword",
            searchProperties: ["id", "name", "designation"],
          },
          exportConfig: {
            enable: true,
            component: (exportToExcel) => {
              return {...}
            },
            columns: [
              {
                name: "id",
                dataKey: "id",
                width: 10,
              },
              {
                name: "name",
                dataKey: "name",
                width: 30,
              },
              {
                name: "Designation",
                dataKey: "designation",
                width: 15,
              },
             ...
            ],
            taggedColumn: {
              columnNumber: 3,
              columnName: "Designation",
              color: (cellValue) => {
                return cellValue === "Manager"
                  ? "FF0000"
                  : cellValue === "Developer"
                  ? "FFFF00"

                  : "000000";
              },
            },
            fileName: "File-Export.xlsx",
            sheetData: (records) => {
              let sheetData = records?.map((e) => {
                return {
                  id: e.id,
                  name: e.name,
                  designation: e.designation,
                  ...
              });
              return sheetData;
            },
          },
          customComponents: (selectedRowKeys,
                        selectedRows,
                        mode, // view, edit, add
                        setMode,
                        setOpen, // open side drawer
                        setRecordData) => {
            return {...}
          },
        }}
        columns={[
          {
            title: "ID",
            dataIndex: "id",
            width: 100,
            value: (record) => record?.id,
            icon: {...}
            flagConfig: {
              enable: true,
              color: '#FF0000',
              condition: (record) => {
                return record?.id === 7;
              },
              tooltip: "Escalated",
            },
            starConfig: {
              enable: true,
              color: '#FF0000',
              condition: (record) => {
                return record?.id === 7;
              },
              tooltip: "Escalated",
            },
            clickable={true}
          },
          {
            title: "Name",
            dataIndex: "name",
            width: 150,
            value: (record) => record?.name,
          },
          {
            title: "Designation",
            dataIndex: "designation",
            value: (record) => {
              if(record?.designation > 3) {
                record.disableActions = true
              }
              return record?.designation;
            },
            width: 100,
            sorter: true,
            filters: [
              {
                text: "Manager",
                value: 1,
              },
              {
                text: "Developer",
                value: 2,
              },
              {
                text: "Other",
                value: 3,
              },
              ...
            ],
            tagConfig: {
              enable: true,
              color: (record) => '#ff0000',
              icon: (record) => <icon>,
            },
          },

          {
            title: "Date",
            dataIndex: "date",
            type: "date",
            value: (record) => {
             return record?.date
            },
            width: 200,
            sorter: true,
          },
        ]}
        expandableConfig={{
          enable: true,
          component: (record) => {
            return <Component>
          },
        }}
        drawerConfig={{
          enable: true,
          header: (record, mode, setMode, setOpen) => {
            return 'Drawer Title';
          },
          component: (record, mode, setMode, setOpen) => {
            return {...}
          },
        }}
      />
    </AppCard>
  </Col>
</AppRowContainer>;

CRM-Table-Example

References:

• AntD Components
• Styled Components