ts-accordion

Package to render Accordion with dynamic data and styles.

Installation

ts-accordion

ts-accordion is available as an npm package.

npm:

npm i ts-accordion

yarn:

yarn add ts-accordion

Getting started with ts-accordion

Example

import React, { useState } from "react";
import TsAccordion from "ts-accordion/dist/TsAccordion";
import img from "../src/user.png";
import img1 from "../src/AddEmployeeIcon.svg";

function App() {
  //Style Properties

  const bgColor1 = "#fff";

  const bgColor2 = "#FFEDE9";

  const menuColor = "#FF0000";

  const sectionStyles = {
    keyFontFamily: "Roboto",
    keyFontSize: "19px",
    valueFontFamily: "Times New Roman",
    valueFontSize: "15px",
    keyTextColor: "#000000",
    valueTextColor: "#0000FF",
    rowGap: 4,
    iconGap: 25,
  };

  // Data Properties

  const testData = [
    {
      section1: {
        first_name: "Syam",
        last_name: "Syam",
        role: "UI-Developer",
        empId: 101,
        email: "[email protected]",
        dateOfBirth: "25-08-1998",
        location: "Hyderabad",
      },
      section2: {
        ip_address: "26.16.10.231",
        dateOfBirth: "25-08-1998",
        location: "Hyderabad",
        jobType: "FTE",
        address:
          "P No: 0000, F No: Naya Apartment, KPHB, Hyderabad - 50000, Telangana, India ",
        department: "Developer",
        department1: "Developer",
      },
      section3: {
        maritalStatus: "Single",
        bloodGroup: "A+",
        dateOfJoining: "23-08-2021",
        reportingTo: "Vinod Gadde",
        generalLeaves: "15",
        privelegeLeaves: "08",
        personalEmail: "[email protected]",
        status: "active",
        department1: "Developer",
      },
      profileImage: {
        title: "Image",
        image: img,
      },
    },
    {
      section1: {
        first_name: "Nitesh",
        last_name: "Singh",
        role: "UI Developer",
        empId: 101,
        email: "[email protected]",
        dateOfBirth: "25-08-1998",
        location: "Hyderabad",
      },
      section2: {
        ip_address: "26.16.10.231",
        dateOfBirth: "25-08-1998",
        location: "Hyderabad",
        jobType: "FTE",
        address:
          "P No: XXXX, F No: Good Apartment, Madhapur, Hyderabad - 50001, Telangana, India ",
        department: "Developer",
      },
      section3: {
        maritalStatus: "Single",
        bloodGroup: "B+",
        dateOfJoining: "23-08-2021",
        reportingTo: "Santosh",
        generalLeaves: "15",
        privelegeLeaves: "08",
        personalEmail: "[email protected]",
        status: "inActive",
      },
      profileImage: {
        title: "Image",
        image: img1,
      },
    },
  ];

  const actions = [
    {
      actionId: "view",
      actionName: "View",
    },
    {
      actionId: "edit",
      actionName: "Edit",
    },
    {
      actionId: "deactivate",
      actionName: "Deactivate",
    },
  ];

  const handleActionClick = (event, row, id) => {
    event.preventDefault();
    event.stopPropagation();
    console.log("row", row);
    console.log("id", id);
  };

  const handleProfileImageClick = (event) => {
    event.preventDefault();
    event.stopPropagation();
    console.log(event);
  };

  return (
    <>
      <TsAccordion
        rowData={testData}
        actions={actions}
        handleActionClick={handleActionClick}
        handleProfileImageClick={handleProfileImageClick}
        bgColor1={bgColor1}
        bgColor2={bgColor2}
        menuColor={menuColor}
        sectionStyles={sectionStyles}
      />
    </>
  );
}

export default App;

rowData must be a list of Object in a array, where each object consists of: section1 (key value pairs) section2 (key value pairs) section3 (key value pairs) profileImage(title: title of image, image: variable path of image imported)

handleActionClick (handler function passed to handle onClick of each action) which returns row (row data clicked), event(onClick event details), id (actionId passed in actions array)

handleProfileImageClick (handler function passed to handle onclick of profile image in accordion)

actions is a array of objects consistes actionId and actionName. Which allows you to render Menu items in Accordion.

sectionStyles consists of style elements of section keyFontFamily (key font family) keyFontSize (key font size) valueFontFamily (value font family) valueFontSize (value font size) keyTextColor (key text color) valueTextColor (value text color) rowGap: (gap between each elements in sections) iconGap: (gap between elements in section and actions Icon)

Please refer above example to pass this style properties.

bgColor1 (background color for section1 of accordion)

bgColor2 (background color for section2 and section3 of accordion)

menuColor (actions icon color and menu items)

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.