@yanqirenshi/table.wbs 0.0.17 → 0.0.19

package/dist/components/ChooserColumn.js

@@ -19,6 +19,30 @@ var style = {
   }
 };
 
+function WidthInput(props) {
+  var column = props.column;
+  var key = props.name;
+  var value = column.width && column.width[key] || '';
+
+  var change = function change(e) {
+    props.callbacks.body.row.width(column.number, key, e.target.value);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("input", {
+    className: "input is-small",
+    type: "number",
+    min: "0",
+    step: "10",
+    style: {
+      width: 77
+    },
+    placeholder: key === 'min' ? 'Min' : 'Max',
+    title: key === 'min' ? '最小幅 (px)' : '最大幅 (px)',
+    value: value,
+    onChange: change
+  });
+}
+
 function ChooserColumn(props) {
   var columns = props.columns || [];
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -56,7 +80,25 @@ function ChooserColumn(props) {
     }, "\u5FC5\u9808"), d.required !== true && /*#__PURE__*/_react["default"].createElement(_ButtonVisible["default"], {
       source: d,
       callbacks: props.callbacks
-    })), /*#__PURE__*/_react["default"].createElement("td", null, d.label), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, d.leveling ? '○' : '×'), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, "--"));
+    })), /*#__PURE__*/_react["default"].createElement("td", null, d.label), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: 4,
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(WidthInput, {
+      column: d,
+      name: "min",
+      callbacks: props.callbacks
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        color: '#888'
+      }
+    }, "\u301C"), /*#__PURE__*/_react["default"].createElement(WidthInput, {
+      column: d,
+      name: "max",
+      callbacks: props.callbacks
+    }))), /*#__PURE__*/_react["default"].createElement("td", null, d.leveling ? '○' : '×'), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, "--"), /*#__PURE__*/_react["default"].createElement("td", null, "--"));
   }))));
 }
 

package/dist/components/Controller.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 
@@ -15,14 +17,109 @@ var _Style = _interopRequireDefault(require("./Style.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var style = _Style["default"].controller;
 
+function DownloadButton(props) {
+  var download = props.download;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var root = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!open) return;
+
+    var closeIfOutside = function closeIfOutside(e) {
+      if (root.current && !root.current.contains(e.target)) setOpen(false);
+    };
+
+    document.addEventListener('mousedown', closeIfOutside);
+    return function () {
+      return document.removeEventListener('mousedown', closeIfOutside);
+    };
+  }, [open]);
+
+  if (typeof download === 'function') {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      className: "button is-small",
+      onClick: download
+    }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faDownload,
+      className: "",
+      style: {
+        fontSize: 14
+      }
+    }));
+  }
+
+  var select = function select(fn) {
+    fn();
+    setOpen(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dropdown is-right" + (open ? " is-active" : ""),
+    ref: root
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dropdown-trigger"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "button is-small",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDownload,
+    className: "",
+    style: {
+      fontSize: 14
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dropdown-menu",
+    role: "menu"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dropdown-content"
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    className: "dropdown-item",
+    onClick: function onClick() {
+      return select(download.hierarchy);
+    }
+  }, "\u968E\u5C64"), /*#__PURE__*/_react["default"].createElement("a", {
+    className: "dropdown-item",
+    onClick: function onClick() {
+      return select(download.flat);
+    }
+  }, "\u30D5\u30E9\u30C3\u30C8"), /*#__PURE__*/_react["default"].createElement("a", {
+    className: "dropdown-item",
+    onClick: function onClick() {
+      return select(download.data);
+    }
+  }, "\u30C7\u30FC\u30BF"))));
+}
+
 function Controller(props) {
   var style_right = _objectSpread({}, style.center);
 
@@ -45,10 +142,6 @@ function Controller(props) {
     return callbacks.filter.clear();
   };
 
-  var xxx = function xxx() {
-    return callbacks.download();
-  };
-
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: style.root
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -87,16 +180,9 @@ function Controller(props) {
     onClick: clickColumns
   }, "Columns")), /*#__PURE__*/_react["default"].createElement("div", {
     style: style.right
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    className: "button is-small",
-    onClick: xxx
-  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDownload,
-    className: "",
-    style: {
-      fontSize: 14
-    }
-  }))));
+  }, /*#__PURE__*/_react["default"].createElement(DownloadButton, {
+    download: callbacks.download
+  })));
 }
 
 var _default = Controller;

package/dist/components/TBody.js

@@ -18,7 +18,9 @@ var makeTr = function makeTr(d, props) {
     columns: props.columns,
     max_level: props.max_level,
     callbacks: props.callbacks,
-    closed_wbs: props.closed_wbs
+    closed_wbs: props.closed_wbs,
+    selected: props.selected && props.selected[d._id] ? true : false,
+    style_selected: props.style_selected
   });
 };
 

package/dist/components/TBodyTr.js

@@ -11,14 +11,24 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
 
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 
+var _Core = _interopRequireDefault(require("../Core.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+var core = new _Core["default"]();
+
 function makeLevelingSpace(level) {
   var out = [];
   if (level > 0) for (var i = 0; i < level; i++) {
@@ -45,7 +55,7 @@ function opener(row, column, closed_wbs, callback) {
       display: 'inline-block'
     },
     onClick: callback,
-    action: x ? "open" : "close",
+    "data-action": x ? "open" : "close",
     data_id: row._id
   }, x && /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
     style: {
@@ -121,7 +131,9 @@ function cells(props, clickOpner) {
         colSpan: colSpan(column.leveling, level, max_level),
         callbacks: callbacks,
         nowrap: column.nowrap ? 'true' : null
-      }, opener(row, column, props.closed_wbs, clickOpner), column.contents(column, row, key)));
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: core.widthStyle(column)
+      }, opener(row, column, props.closed_wbs, clickOpner), column.contents(column, row, key))));
     }
   } catch (err) {
     _iterator.e(err);
@@ -132,34 +144,51 @@ function cells(props, clickOpner) {
   return out;
 }
 
-;
+; // 選択行の既定スタイル。文字色は変えず背景だけ変える。
+// WBSTable の style.selected で上書きできる。
+
+var SELECTED_STYLE = {
+  backgroundColor: '#F2F2B0'
+};
 
-function trStyle(props) {
-  if (props.source._class === "WORKPACKAGE") return {}; // return  { fontWeight: 'bold' };
+function trStyle(props, selectable) {
+  var style = selectable ? {
+    cursor: 'pointer'
+  } : {};
+  if (props.selected) style = _objectSpread(_objectSpread(_objectSpread({}, style), SELECTED_STYLE), props.style_selected || {});
+  if (props.source._class === "WORKPACKAGE") return style; // return  { fontWeight: 'bold' };
 
   var x = props.max_level + 1 - props.source._level;
-  return {
+  return _objectSpread(_objectSpread({}, style), {}, {
     fontSize: 14 + x * 2
-  };
+  });
 }
 
 function TBodyTr(props) {
-  trStyle(props);
+  var select = props.callbacks.body.row.select;
+  var clickRow = select ? function () {
+    return select(props.source);
+  } : null;
 
   var clickOpner = function clickOpner(e) {
+    // 折りたたみの矢印をクリックしたときは行の選択を発火させない。
+    e.stopPropagation();
+
     var span = function span(element) {
       if (element.tagName === 'SPAN') return element;
       return span(element.parentNode);
     };
 
     var element = span(e.target);
-    var action = element.getAttribute('action');
+    var action = element.getAttribute('data-action');
     var data_id = element.getAttribute('data_id') * 1;
     props.callbacks.body.wbs["switch"](action, data_id);
   };
 
   return /*#__PURE__*/_react["default"].createElement("tr", {
-    style: trStyle(props)
+    style: trStyle(props, !!select),
+    className: props.selected ? 'wbs-selected' : null,
+    onClick: clickRow
   }, cells(props, clickOpner));
 }
 

package/dist/components/THead.js

@@ -7,8 +7,18 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Core = _interopRequireDefault(require("../Core.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var core = new _Core["default"]();
+
 var colSpan = function colSpan(leveling, max_level) {
   if (!leveling) return 1;
   return max_level + 1;
@@ -22,8 +32,10 @@ function THead(props) {
     return /*#__PURE__*/_react["default"].createElement("th", {
       key: i,
       colSpan: colSpan(d.leveling, max_level),
-      style: style
-    }, d.label);
+      style: _objectSpread(_objectSpread({}, style), core.widthCellStyle(d))
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: core.widthStyle(d)
+    }, d.label));
   })));
 }
 

package/dist/index.js

@@ -9,12 +9,20 @@ Object.defineProperty(exports, "Core", {
     return _Core["default"];
   }
 });
+Object.defineProperty(exports, "Supporter", {
+  enumerable: true,
+  get: function get() {
+    return _Supporter["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _WBSTable = _interopRequireDefault(require("./WBSTable.js"));
 
 var _Core = _interopRequireDefault(require("./Core.js"));
 
+var _Supporter = _interopRequireDefault(require("./Supporter.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = _WBSTable["default"];

package/example/.env

@@ -0,0 +1,4 @@
+PORT=3002
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=none
+CI=true