@xaypay/tui 0.0.29 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/checkbox/index.js

@@ -62,6 +62,7 @@ export const Checkbox = ({
               id={keyNames.id ? element[keyNames.id] : ''}
               onChange={handleChange}
               onClick={onClick ? onClick: ()=>{}}
+              defaultChecked = {element.checked}
               {...props}
             />
             <span className={styles["checkmark"]} />

package/src/components/table/index.js

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from "react";
+import PropTypes, { bool, checkPropTypes, func } from "prop-types";
+import classnames from "classnames";
+import styles from "./table.module.css";
+import { Checkbox } from "../checkbox";
+
+export const Table = ({
+    className,
+    onChange,
+    config,
+    jsonData,
+    hearderData,
+    keyNames,
+    actions,
+    ...props
+}) => {
+    const classProps = classnames(className);
+    let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
+
+    useEffect(()=>{
+        tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
+    },[jsonData])
+
+    const [checked,setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
+
+
+    config.isCheckbox && config.isCheckbox.showCheckbox == undefined
+        ? (config.isCheckbox.showCheckbox = () => {
+              return true;
+          })
+        : "";
+
+    return (
+        <div className={styles["table-wrap"]}>
+            {config.isHeader &&
+                hearderData.map((header, key) => {
+                    return (
+                        <div className={styles["table-top"]} key={key}>
+                            <div className={styles["table-items"]}>
+                                {header}
+                            </div>
+                        </div>
+                    );
+                })}
+            <div className={styles["table-bottom"]}>
+                {tbodyData.map((item, key) => {
+                    return (
+                        <div className={styles["table-bottom-inner"]} key={key}>
+                            {keyNames.map((keyName, keyNameKey) => {
+                                return (
+                                    <div
+                                        className={styles["table-items"]}
+                                        key={keyNameKey}
+                                    >
+                                        {config.isCheckbox &&
+                                            config.isCheckbox.showCheckbox &&
+                                            config.isCheckbox.showCheckbox(
+                                                item
+                                            ) &&
+                                            keyNameKey == 0 && (
+                                                <Checkbox
+                                                    onClick={(e) => {
+                                                        const id = e.target.id;
+                                                        const checkedValue = e.target.checked;
+                                                        let ch = [...checked]
+                                                        checkedValue ? ch.push(Number(id)) : ch.splice(ch.indexOf(id), 1);
+                                                        setChecked(ch);
+                                                        config.isCheckbox.onChange(ch);
+                                                    }}
+                                                    jsonData={`[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false }}]`}
+                                                />
+                                            )}
+                                        {typeof keyName === "string" ? (
+                                            item[keyName]
+                                        ) : (
+                                            <>
+                                                <i className={keyName.icon} />
+                                                {item[keyName.name]}
+                                            </>
+                                        )}
+                                    </div>
+                                );
+                            })}
+
+                            {actions && (
+                                <div className={styles["table-items"]}>
+                                    {actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
+                                            return (<div key={key}>
+                                                <i className={action.icon} onClick={action.click? action.click : ()=>{}}>
+                                                    {action.icon}
+                                                </i>
+                                            </div>)
+                                    })}
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+Table.propTypes = {
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    config: PropTypes.object,
+    actions: PropTypes.arrayOf(PropTypes.object),
+    jsonData: PropTypes.string,
+    keyNames: PropTypes.arrayOf(
+        PropTypes.oneOf([PropTypes.string, PropTypes.object])
+    ),
+    hearderData: PropTypes.array,
+};
+
+Table.defaultProps = {
+    className: "",
+    onChange: undefined,
+    errorMesage: "",
+    config: { isHeader: true, isCheckbox: {checked:[]} },
+    actions: [],
+    jsonData: "",
+    keyNames: [],
+    hearderData: [],
+};

package/src/components/table/table.module.css

@@ -0,0 +1,80 @@
+.table-wrap {
+    width: 100%;
+    background: #fff;
+    box-shadow: 0 10px 30px rgba(0,35,106,.06);
+    border-radius: 14px 14px 0 0;
+    overflow: hidden
+}
+
+.table-wrap:not(:first-child) {
+    margin-top: 30px
+}
+
+.table-bottom-inner .table-items:first-child,.table-top .table-items:first-child {
+    flex: 0 0 auto;
+    width: 60px
+}
+
+.table-bottom-inner .table-items:nth-child(2),.table-top .table-items:nth-child(2) {
+    flex: 0 0 auto;
+    width: 120px
+}
+
+.table-bottom-inner .table-items:nth-child(3),.table-top .table-items:nth-child(3) {
+    flex: 0 0 auto;
+    width: 170px
+}
+
+.table-bottom-inner .table-items:nth-child(4),.table-top .table-items:nth-child(4) {
+    flex: 0 0 auto;
+    width: 126px
+}
+
+.table-bottom-inner .table-items:nth-child(5),.table-bottom-inner .table-items:nth-child(6),.table-bottom-inner .table-items:nth-child(8),.table-top .table-items:nth-child(5),.table-top .table-items:nth-child(6),.table-top .table-items:nth-child(8) {
+    flex: 0 0 auto;
+    width: 100px
+}
+
+.table-bottom-inner .table-items:last-child,.table-top .table-items:last-child {
+    flex: 0 0 auto;
+    width: 104px
+}
+
+.table-top {
+    width: 100%;
+    height: 44px;
+    background: #00236a
+}
+
+.table-top .table-items {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #fff;
+    font-size: 15px;
+    line-height: 17px
+}
+
+.table-bottom-inner {
+    width: 100%;
+    min-height: 40px;
+    background: #fff
+}
+
+.table-bottom-inner .table-items {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 14px;
+    line-height: 16px;
+    border-bottom: 1px solid #eee;
+    padding: 4px
+}
+
+.table-bottom-inner .table-items:not(:last-child) {
+    border-right: 1px solid #eee
+}

package/src/components/table/table.stories.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Table } from "./index";
+
+export default {
+  component: Table,
+  title: "Components/Table",
+};
+
+const Template = (args) => <Table {...args} />;
+
+export const Default = Template.bind({});
+
+const showCheckbox = (item) => {
+  return true;
+  // return item.id === 2;
+}
+
+const onChange = (checked) => {
+  console.log("project",checked);
+}
+
+const show = () => {
+  return true
+}
+
+const action = (id) => {
+  console.log('action from project',id);
+}
+
+Default.args = {
+  config: {isHeader: true, isCheckbox: {showCheckbox: showCheckbox, checked: [], onChange: onChange }},
+  jsonData: JSON.stringify([{id:1,name:'Item 1',name2:'Item 1'},{id:2, name:'Item 2',name2:'Item 2'}]),
+  actions: [{icon: 'icon-1',show: show, click: action},{icon: 'icon-2'},{icon: 'icon-3'},{icon: 'icon-4'}],
+  keyNames: ['name',{name: 'name2', icon: 'icon-temp'}],
+  hearderData: ['first Name', 'Last Name']
+};

package/src/index.js

@@ -10,4 +10,5 @@ export * from './components/captcha';
 export * from './components/stepper';
 export * from './components/select';
 export * from './components/file';
-export * from './components/modal';
+export * from './components/modal';
+export * from './components/table';