@yanqirenshi/table.wbs 0.0.14 → 0.0.16

package/.claude/settings.local.json

@@ -0,0 +1,17 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node -e \"console.log\\(require\\('./node_modules/react/package.json'\\).version\\)\")",
+      "Bash(npm install *)",
+      "Bash(npm test *)",
+      "Bash(git stash *)",
+      "Bash(npm view *)",
+      "Bash(npx react-scripts *)",
+      "Bash(SKIP_PREFLIGHT_CHECK=true CI=true npx react-scripts test --watchAll=false)",
+      "Bash(SKIP_PREFLIGHT_CHECK=true CI=true npx react-scripts build)",
+      "Bash(SKIP_PREFLIGHT_CHECK=true BROWSER=none npx react-scripts start)",
+      "Bash(kill %1)",
+      "Bash(wait)"
+    ]
+  }
+}

package/README.md

@@ -1,3 +1,103 @@
 # table.WBS
 
+## Usage
+
 See: examples/
+
+### (1) Code
+
+```
+import React from 'react';
+
+import WBSTable from '@yanqirenshi/table.wbs';
+
+import * as WBS_DATA from './data.js';
+
+export default function Example() {
+    const columns = [
+        {
+            label: 'Code',
+            leveling: true,
+            required: true,
+            contents: (c, d) => {
+                return <>{d._id}</>;
+            }
+        },
+        {
+            label: 'Name',
+            required: true,
+            contents: (c, d) => {
+                return <span>{d.label}</span>;
+            },
+        },
+        {
+            label: 'Description',
+            contents: (c, d) => {
+                return d.description;
+            }
+        },
+    ];
+
+    const wbs_source = {
+        projects:     WBS_DATA.PROJECTS,
+        wbs:          WBS_DATA.WBS,
+        workpackages: WBS_DATA.WORKPACKAGES,
+        edges:        WBS_DATA.EDGES,
+    };
+
+    const options = {}; // or null
+    const style_table = { fontSize: '16px' }; // or null
+    return (
+        <div style={{padding: '33px'}}>
+          <WBSTable source={wbs_source}
+                    columns={columns}
+                    options={options}
+                    style={style_table}/>
+        </div>
+    );
+}
+```
+
+### (2) Data
+
+```
+export const PROJECTS = [
+    {
+        _id: 1,
+        _class: 'PROJECT',
+        label: 'a',
+    }
+];
+export const WBS = [
+    {
+        _id: 10,
+        _class: 'WBS',
+        label: 'b',
+    }
+];
+export const WORKPACKAGES = [
+    {
+        _id: 100,
+        _class: 'WORKPACKAGE',
+        label: 'c',
+    }
+];
+
+let i = 10000000;
+export const EDGES = [
+    {
+        _id: i++,
+        from_id: 1,
+        from_class: 'PROJECT',
+        to_id: 10,
+        to_class: 'WBS',
+    },
+    {
+        _id: i++,
+        from_id: 10,
+        from_class: 'WBS',
+        to_id: 100,
+        to_class: 'WORKPACKAGE',
+    },
+];
+```

package/dist/WBSTable.js

@@ -71,6 +71,11 @@ function WBSTable(props) {
       filter_wp = _useState12[0],
       setFilterWp = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      bilding = _useState14[0],
+      setBilding = _useState14[1];
+
   var data = props.source;
   var options = props.options;
   var start_id = props.start_id;
@@ -82,14 +87,16 @@ function WBSTable(props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              setBilding(true);
               setRecords(colon.build({
                 data: data,
                 options: options,
                 start_id: start_id,
                 flatten: true
               }));
+              setBilding(false);
 
-            case 1:
+            case 3:
             case "end":
               return _context.stop();
           }
@@ -134,6 +141,13 @@ function WBSTable(props) {
       if (_download) _download();
     }
   };
+  var style_loading = {
+    width: '100%',
+    height: 333,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  };
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Comps.Controller, {
     open: chooser_column,
     visible_wp: visible_wp,
@@ -147,7 +161,14 @@ function WBSTable(props) {
   }, /*#__PURE__*/_react["default"].createElement(Comps.ChooserColumn, {
     columns: columns,
     callbacks: callbacks
-  }))), /*#__PURE__*/_react["default"].createElement("table", {
+  }))), bilding && /*#__PURE__*/_react["default"].createElement("div", {
+    style: style_loading
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      fontSize: 33,
+      color: '#888'
+    }
+  }, "Waiting for ........")), !bilding && /*#__PURE__*/_react["default"].createElement("table", {
     className: "table is-fullwidth is-striped is-narrow is-hoverable",
     style: style
   }, /*#__PURE__*/_react["default"].createElement(Comps.THead, {