ui-soxo-bootstrap-core 2.4.24

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -0,0 +1,61 @@
+import React, { useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
+
+const ItemTypes = { PANEL: "panel" };
+
+export default function DraggableWrapper({ id, index, movePanel, title, dragEnabled = true }) {
+  const ref = useRef(null);
+
+  const [, drop] = useDrop({
+    accept: ItemTypes.PANEL,
+    hover(item, monitor) {
+      if (!dragEnabled) return; // ignore hover if dragging is disabled
+      if (!ref.current) return;
+
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      if (dragIndex === hoverIndex) return;
+
+      const hoverBoundingRect = ref.current.getBoundingClientRect();
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
+
+      movePanel(dragIndex, hoverIndex);
+      item.index = hoverIndex;
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.PANEL,
+    item: { id, index },
+    canDrag: dragEnabled, // only allow dragging if dragEnabled
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  drag(drop(ref));
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        display: "flex",
+        width: "100%",
+        cursor: dragEnabled ? "grab" : "default", // show cursor only if draggable
+        opacity: isDragging ? 0.6 : 1,
+        transition: "transform 0.2s ease, opacity 0.2s ease",
+        transform: isDragging ? "scale(1.05)" : "scale(1)",
+        boxShadow: isDragging ? "0px 5px 10px rgba(0,0,0,0.15)" : "none",
+        padding: "5px 0",
+      }}
+    >
+      {title}
+    </div>
+  );
+}

package/core/lib/elements/basic/empty/empty.js

@@ -0,0 +1,15 @@
+/**
+ * 
+ * Component fro antd empty
+ */
+
+import React from "react";
+
+
+import { Empty as AntdEmpty } from 'antd';
+
+export default function Empty({ }) {
+    return (
+        <AntdEmpty />
+    )
+}

package/core/lib/elements/basic/fingerprint-protrected/fingerprint-protected.js

@@ -0,0 +1,118 @@
+/**
+ * This is one different level of component moulding that has added 
+ * for his 
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { Route, Redirect } from 'react-router-dom';
+
+import { Typography } from 'antd';
+
+import FingerPrintReader from './../../../components/finger-print-reader/finger-print-reader';
+
+import './fingerprint-protected.scss';
+
+import { Button } from './../../../elements/'
+
+const { Title } = Typography;
+
+export default function FingerprintProtected({ children, template, menu, onVerification, authorized, completed, ...rest }) {
+
+  const [loading, setLoading] = useState(false);
+
+  const [access, setAccess] = useState(null);
+
+  useEffect(() => {
+
+  }, [])
+
+  /**
+   * On Update of result from reader
+   */
+  const onUpdate = async (json) => {
+
+    setLoading(true);
+
+    await onVerification(json);
+
+    setAccess(json);
+
+    setLoading(false);
+
+    // onVerification(json)
+  }
+
+  let enableReader = false;
+
+  if (menu.finger_print_protected && !access) {
+
+    enableReader = true;
+
+  }
+
+  if (completed) {
+    enableReader = false;
+  }
+
+  if (authorized) {
+    enableReader = false;
+  }
+
+  /**
+   * Override the 
+   */
+  const override = async () => {
+
+    setLoading(true);
+
+    await onVerification({})
+
+    setAccess({});
+
+    setLoading(false);
+
+  }
+
+  return (
+    <Route
+      {...rest}
+      render={(props) => {
+
+        return !enableReader
+          ?
+
+          React.cloneElement(children,
+            {
+              access,
+              ...props
+            })
+          :
+          <>
+
+            <Title level={3}>
+              {menu.name}
+            </Title>
+
+            <p>
+              You are trying to access a fingerprint protected page .
+            </p>
+
+
+            <div className='fingerprint-protected card'>
+
+              <FingerPrintReader template={template} onChange={onUpdate} scanMode={true} />
+
+              {/* Override the FingerPrint */}
+              <Button loading={loading} className={'override-button'} onClick={override}>
+                Override
+              </Button>
+              {/* Override the FingerPrint */}
+
+            </div>
+          </>
+
+      }}
+    />
+  )
+}

package/core/lib/elements/basic/fingerprint-protrected/fingerprint-protected.scss

@@ -0,0 +1,10 @@
+.fingerprint-protected {
+    margin: 10px 0px;
+    
+    position: relative;
+    .override-button {
+        position: absolute;
+        right: 0px;
+        bottom: 30px;
+    }
+}

package/core/lib/elements/basic/form/form.js

@@ -0,0 +1,70 @@
+// <<<<<<< HEAD
+// import React from 'react'
+
+// import { Form as AntdForm } from 'antd'
+
+// // import './button.scss'
+
+// export default class Form extends React.Component {
+
+//     render() {
+
+//         const { children, ...props } = this.props;
+
+//         return (<>
+
+//             <AntdForm {...props}>
+
+//                 {children}
+
+//             </AntdForm >
+
+//         </>)
+
+//     }
+
+// }
+
+// export const Item = AntdForm.Item;
+// =======
+/**
+ *
+ * @author Sameena Ammed
+ * This component exports antd form.
+ * Here the components needed for antd form are all imported and form along with all those components are exported
+ * This gives a custom form to be used in development
+ *
+ */
+
+import React from "react";
+
+
+// Import all the needed components from antd library
+import InternalForm, { useForm } from "antd/lib/form/Form";
+
+import Item from "antd/lib/form/FormItem";
+
+import ErrorList from "antd/lib/form/ErrorList";
+
+import List from "antd/lib/form/FormList";
+
+import { FormProvider } from "antd/lib/form/context";
+
+import "./form.scss";
+
+// import 'antd/dist/antd.css';
+
+// Assign all the imported components and form so that it can be exported
+const Form = Object.assign(InternalForm, {
+  useForm,
+  Item,
+  List,
+  ErrorList,
+  Provider: FormProvider,
+  create: () => {
+    console.warn("This method is deprecated and should not be used.");
+  },
+});
+
+export default Form;
+// >>>>>>> 64a2e254065eded31111b89ea538c10bb23a4cd3

package/core/lib/elements/basic/form/form.scss

@@ -0,0 +1,4 @@
+.ant-form-item-label {
+          color: #2c0606;
+          // font-weight: bold;
+}

package/core/lib/elements/basic/image/image.js

@@ -0,0 +1,45 @@
+/**
+ * Image Component
+ */
+
+import React from "react";
+
+import "./image.scss";
+
+import { Image } from "antd";
+
+import PropTypes from "prop-types";
+
+// import 'antd/dist/antd.css';
+// import { src } from './../../rc-image-lib/image';
+
+/**
+ * Use `Image` for Image you need to keep.
+ */
+export default function ImageWrapper({ src, className, width = 150 }) {
+  return (
+    <div className={`image-box ${className}`}>
+      <Image width={width} src={src} />
+    </div>
+  );
+}
+
+ImageWrapper.propTypes = {
+  /** The source URL of the image. */
+  src: PropTypes.string.isRequired,
+  
+  /** A custom class name for the image wrapper component. */
+  className: PropTypes.string,
+
+  /** The width of the image, in pixels. */
+  width: PropTypes.number,
+
+  /**  An optional click handler function that will be called when the image wrapper is clicked. */
+  onClick: PropTypes.func,
+};
+
+ImageWrapper.defaultProps = {
+  className: "",
+  width: 150,
+  onClick: null,
+};

package/core/lib/elements/basic/image/image.scss

@@ -0,0 +1,17 @@
+.image-box {
+    // padding: 10px;
+
+    .ant-image {
+        min-height: 115px;
+    }
+
+    img {
+        min-height: 115px;
+
+        // margin: 0px 10px;
+        width: 150px;
+        border: 1px solid #c5c5c5;
+        padding: 4px;
+        border-radius: 4px;
+    }
+}

package/core/lib/elements/basic/image/readme.md

@@ -0,0 +1,26 @@
+## Usage
+
+You can use the HTML <img> tag to display images in your React application. Simply add the <img> tag to your JSX code, and specify the source (src) of the image as the value of the "src" attribute. For example:
+
+```jsx
+import ImageWrapper from "./image";
+
+<ImageWrapper />;
+```
+
+```sh
+import React from "react";
+import "./image.scss";
+import { Image } from "antd";
+
+/**
+ * Use `Image` for Image you need to keep.
+ */
+export default function ImageWrapper({  src, className, width = 150 }) {
+  return (
+    <div className={`image-box ${className}`}>
+      <Image width={width} src={src} />
+    </div>
+  );
+}
+```

package/core/lib/elements/basic/image-viewer/image-viewer.js

@@ -0,0 +1,109 @@
+// import React, { Component } from 'react';
+
+// import $ from 'jquery';
+
+
+// import 'viewerjs/dist/viewer';
+// import 'viewerjs/dist/viewer.css';
+
+// import './image-viewer.scss';
+
+// export default class ImageViewer extends Component {
+
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             images: props.images
+//             // toolbar:props.toolbar
+//         }
+       
+//     }
+
+
+//     componentDidMount = () => {
+//         const { idVal = 'images' } = this.props;
+//         let $image = $(`#${idVal}`);
+
+//         $image.viewer({
+//             inline: true,
+
+//             // customToolbar: (toolbars) => {
+//             //     const customToolbar = [{
+//             //         key: 'test',
+//             //         render: <span className="custom-action" onClick={() => { this.acceptL() }}>Accept License</span>,
+//             //         onClick: (activeImage) => {
+//             //             console.log(activeImage);
+//             //         },
+//             //     }]
+
+//             //     const tools = customToolbar.concat(toolbars);
+//             //     return tools.concat([
+//             //         {
+//             //             key: 'test1',
+//             //             render: <span onClick={(e) => this.rejectL()} className="custom-action">Reject License</span>,
+
+//             //             onClick: (activeImage) => {
+//             //                 console.log(activeImage);
+//             //             },
+//             //         },
+//             //         {
+//             //             key: 'test2',
+//             //             render: <span onClick={(e) => this.deleteL()} className="custom-action">Delete License</span>,
+
+//             //             onClick: (activeImage) => {
+//             //                 console.log(activeImage);
+//             //             },
+//             //         }
+//             //     ]);
+//             // },
+
+//             // toolbar: [{
+//             //     key: 'test',
+//             //     render: <span className="custom-action" onClick={() => { this.acceptL() }}>Accept License</span>,
+//             //     onClick: (activeImage) => {
+//             //         console.log(activeImage);
+//             //     },
+//             // }, {
+//             //     key: 'test1',
+//             //     render: <span onClick={(e) => this.rejectL()} className="custom-action">Reject License</span>,
+
+//             //     onClick: (activeImage) => {
+//             //         console.log(activeImage);
+//             //     },
+//             // }],
+
+
+//             viewed: function () {
+//                 $image.viewer('zoomTo', 0.2);
+//             }
+//         });
+
+//         // Get the Viewer.js instance after initialized
+//         var viewer = $image.data('viewer');
+//         // console.log(viewer);
+
+//         // View a list of images
+//         // $('#images').viewer();
+//     }
+
+
+//     render() {
+//         const { images } = this.state;
+//         let { idVal = 'images' } = this.props;
+//         return (
+//             <div className="image-viewer ">
+//                 <ul id={idVal} style={{ display: 'none' }}>
+//                     {
+//                         images.map((image, key) => (
+//                             <li className="image-content" key={key}>
+//                                 <img src={image.image} alt="Picture 1" />
+//                             </li>
+//                         ))
+//                     }
+//                 </ul>
+
+//             </div >
+
+//         )
+//     }
+// }

package/core/lib/elements/basic/image-viewer/image-viewer.scss

@@ -0,0 +1,8 @@
+.image-viewer{
+    
+    height: 240px;
+
+    #images{
+        display: none;
+    }
+}

package/core/lib/elements/basic/input/input.js

@@ -0,0 +1,81 @@
+/**
+ * Component to be used for Input
+ * @author Hasna
+ */
+
+import React, { useState } from "react";
+
+import { Input } from "antd";
+
+import PropTypes from "prop-types";
+
+// import 'antd/dist/antd.css';
+
+export default function InputComponent({
+  className,
+  disabled,
+  onChange,
+  type,
+  maxLength,
+  placeholder,
+  readOnly,
+  value,
+  mode = "capitalize",
+}) {
+  /**
+   *  Function to transform entered value according to mode
+   *
+   * @param {*} mode
+   * @param {*} e
+   */
+  const onTransform = (mode, e) => {
+    var transformedValue;
+
+    // Transforms value according to mode selected
+    if (mode === "normal") {
+      transformedValue = e.target.value;
+    } else if (mode === "lowercase") {
+      transformedValue = e.target.value.toLowerCase();
+    } else if (mode === "uppercase") {
+      transformedValue = e.target.value.toUpperCase();
+    } else {
+      transformedValue = capitalizeFirstLetter(e.target.value);
+    }
+
+    onChange(transformedValue);
+  };
+
+  /**
+   *  To capitalize first character only
+   * @param {*} string
+   * @returns
+   */
+  function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
+  return (
+    <Input
+      type="text"
+      autocomplete="off"
+      autoComplete="off"
+      className={className}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={(e) => onTransform(mode, e)}
+      maxLength={maxLength}
+      readOnly={readOnly}
+      value={value}
+    />
+  );
+}
+
+InputComponent.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  type: PropTypes.string,
+  maxLength: PropTypes.number,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+};

package/core/lib/elements/basic/input/readme.md

@@ -0,0 +1,77 @@
+## Usage
+
+```jsx
+import InputForm from "./input";
+
+<InputForm
+  onChange={(value) => console.log(value)}
+  placeholder="Enter input"
+/>;
+```
+
+To use React input forms, you can simply add the input field inside the form tag. You want to import
+the required file from paths first.
+
+```sh
+import React, { useState } from "react";
+
+import { Input } from "antd";
+
+export default function InputComponent({
+  className,
+  disabled,
+  onChange,
+  type,
+  maxLength,
+  placeholder,
+  readOnly,
+  value,
+  mode = "capitalize",
+}) {
+  /**
+   *  Function to transform entered value according to mode
+   *
+   * @param {*} mode
+   * @param {*} e
+   */
+  const onTransform = (mode, e) => {
+    var transformedValue;
+
+    // Transforms value according to mode selected
+    if (mode === "lowercase") {
+      transformedValue = e.target.value.toLowerCase();
+    } else if (mode === "uppercase") {
+      transformedValue = e.target.value.toUpperCase();
+    } else {
+      transformedValue = capitalizeFirstLetter(e.target.value);
+    }
+
+    onChange(transformedValue);
+  };
+
+  /**
+   *  To capitalize first character only
+   * @param {*} string
+   * @returns
+   */
+
+
+  function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
+  return (
+    <Input
+      type="text"
+      autoComplete="off" // Changed "autocomplete" to "autoComplete" (camelCase)
+      className={className}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={(e) => onTransform(mode, e)}
+      maxLength={maxLength}
+      readOnly={readOnly}
+      value={value}
+    />
+  );
+
+```