From 0a5fb912a7741e14f66f213470cd2de070421ddc Mon Sep 17 00:00:00 2001
From: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com>
Date: Thu, 20 Jan 2022 17:54:33 +0530
Subject: [PATCH] Feature - 1D Barcode generate component (#9)

* Added: jsbarcode package

* Added: barcode component

* Added: proptypes

* Added: usage comments

* Added: Option to hide text, add custom text

* Update: package line endings

* Fix: minor rendering issue

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>
---
 package.json                    |  1 +
 src/components/Barcode/index.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/Barcode/index.js

diff --git a/package.json b/package.json
index b71c40b..b39cce8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "dropzone": "5.9.2",
     "flatpickr": "4.6.9",
     "formik": "^2.2.9",
+    "jsbarcode": "^3.11.5",
     "moment": "^2.29.1",
     "prop-types": "15.7.2",
     "ramda": "^0.27.2",
diff --git a/src/components/Barcode/index.js b/src/components/Barcode/index.js
new file mode 100644
index 0000000..9a8dfc4
--- /dev/null
+++ b/src/components/Barcode/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import JsBarcode from 'jsbarcode';
+import PropTypes from 'prop-types';
+
+/**
+ * Generates a barcode with the payload
+ * Ref for options: https://github.com/lindell/JsBarcode
+ * @param {{payload: string}}
+ */
+export default function Barcode({ payload, showText, text, options }) {
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    const canvas = document.createElement('canvas');
+    JsBarcode(canvas, payload, { displayValue: showText, text, ...options });
+    ref.current?.replaceChildren(canvas);
+  }, [ref, payload, text, options]);
+
+  return <div ref={ref}></div>;
+}
+
+Barcode.defaultProps = {
+  showText: true,
+  options: {}
+};
+
+// Typechecking props for the Breadcrumbs
+Barcode.propTypes = {
+  payload: PropTypes.string.isRequired,
+  showText: PropTypes.bool,
+  text: PropTypes.string,
+  options: PropTypes.object
+};