@sikka/hawa 0.0.30 → 0.0.31

package/src/elements/HawaRange.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Slider from "@mui/material/Slider";
+import Stack from "@mui/material/Stack";
+import PropTypes from "prop-types";
+
+export const HawaRange = (props) => {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      {props.startElement}
+      <Slider
+        size="small"
+        aria-label="Volume"
+        value={props.value}
+        onChange={props.handleChange}
+      />
+      {props.endElement}
+    </Stack>
+  );
+};
+HawaRange.propTypes = {
+  startElement: PropTypes.element,
+  endElement: PropTypes.element,
+  defaultValue: PropTypes.string,
+  handleChange: PropTypes.func,
+  location: PropTypes.string
+};

package/src/elements/HawaSettingsRow.js

@@ -7,6 +7,7 @@ import { HawaTextField } from "./HawaTextField";
 import { HawaRadio } from "./HawaRadio";
 import { HawaSwitch } from "./HawaSwitch";
 import { HawaColorPicker } from "./HawaColorPicker";
+import { HawaRange } from "./HawaRange";
 
 export const HawaSettingsRow = (props) => {
   return (
@@ -15,6 +16,7 @@ export const HawaSettingsRow = (props) => {
       {props.settingsType === "checkbox" && <Checkbox {...props} />}
       {props.settingsType === "text" && <HawaTextField {...props} />}
       {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+      {props.settingsType === "range" && <HawaRange {...props} />}
       {props.settingsType === "color" && <HawaColorPicker {...props} />}
       {props.settingsType === "radio" && (
         <HawaRadio location="inSettings" {...props} />

package/src/elements/HawaTable.js

@@ -6,6 +6,7 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import PropTypes from "prop-types";
+import { Button } from "@mui/material";
 
 export const HawaTable = (props) => {
   let isArabic = props.lang === "ar";
@@ -26,31 +27,66 @@ export const HawaTable = (props) => {
                 {col}
               </TableCell>
             ))}
+            {props.actions && (
+              <TableCell
+                align={isArabic ? "right" : "left"}
+                style={{ fontWeight: 700 }}
+                variant={isArabic ? "borderedRight" : "borderedLeft"}
+              >
+                Actions
+              </TableCell>
+            )}
           </TableRow>
         </TableHead>
 
         <TableBody>
-          {props.rows.map((singleRow, j) => (
-            <TableRow key={j}>
-              {singleRow.map((r, i) => (
-                <TableCell
-                  align={isArabic ? "right" : "left"}
-                  key={i}
-                  component="th"
-                  scope="row"
-                  variant={
-                    i > 0
-                      ? isArabic
-                        ? "borderedRight"
-                        : "borderedLeft"
-                      : "body"
-                  }
-                >
-                  {r}
-                </TableCell>
-              ))}
+          {props.rows ? (
+            props.rows.map((singleRow, j) => (
+              <TableRow key={j}>
+                {singleRow.map((r, i) => (
+                  <TableCell
+                    align={isArabic ? "right" : "left"}
+                    key={i}
+                    component="th"
+                    scope="row"
+                    variant={
+                      i > 0
+                        ? isArabic
+                          ? "borderedRight"
+                          : "borderedLeft"
+                        : "body"
+                    }
+                  >
+                    {r}
+                  </TableCell>
+                ))}
+                {props.actions && (
+                  <TableCell
+                    align={isArabic ? "right" : "left"}
+                    style={{ fontWeight: 700 }}
+                    variant={isArabic ? "borderedRight" : "borderedLeft"}
+                  >
+                    {props.actions.map((act) => (
+                      <Button
+                        style={{ margin: 2 }}
+                        variant="outlined"
+                        size="small"
+                        onClick={() => props.handleActionClick(singleRow)}
+                      >
+                        {act}
+                      </Button>
+                    ))}
+                  </TableCell>
+                )}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow align="center">
+              <TableCell align={"center"} component="th" colSpan={6}>
+                {props.noDataText}
+              </TableCell>
             </TableRow>
-          ))}
+          )}
         </TableBody>
         {props.end && (
           <TableRow>
@@ -75,6 +111,8 @@ export const HawaTable = (props) => {
   );
 };
 HawaTable.propTypes = {
+  handleActionClick: PropTypes.func,
+  noDataText: PropTypes.string,
   lang: PropTypes.string,
   columns: PropTypes.array,
   rows: PropTypes.array,

package/src/elements/index.js

@@ -9,6 +9,7 @@ export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
 export * from "./HawaSelect";
+export * from "./HawaRange";
 export * from "./HawaTextField";
 export * from "./HawaTextArea";
 export * from "./HawaInputLabel";

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.8ffaa38a.iframe.bundle.js"></script><script src="main.cbf6de78.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.6c796c97.iframe.bundle.js"></script><script src="main.4bd34158.iframe.bundle.js"></script></body></html>