@papillonarts/components 0.10.0 → 0.11.0

package/build/primer/Grid/FlexGrid/FlexGrid.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexGrid = FlexGrid;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _string = require("@papillonarts/library/string");
+var _sort = require("@papillonarts/library/sort");
+var _visibilityDisplay = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/visibility-display.scss"));
+var _flexbox = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/flexbox.scss"));
+var _borders = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/borders.scss"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
+var _margin = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/margin.scss"));
+var _typography = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/typography.scss"));
+var _layout = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/layout.scss"));
+var _colors = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/colors.scss"));
+var _index = _interopRequireDefault(require("@papillonarts/css/build/primer/truncate/index.scss"));
+var _grid = _interopRequireDefault(require("../../Layout/grid.scss"));
+var _FlexGrid = require("./FlexGrid.prop");
+var _FlexGrid2 = _interopRequireDefault(require("./FlexGrid.scss"));
+var _Radio = require("../../Form/Radio");
+var _Checkbox = require("../../Form/Checkbox");
+var _Icon = require("../../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function FlexGrid(_ref) {
+  var _items$;
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _FlexGrid.defaultProps.className : _ref$className,
+    items = _ref.items,
+    _ref$idIndex = _ref.idIndex,
+    idIndex = _ref$idIndex === void 0 ? _FlexGrid.defaultProps.idIndex : _ref$idIndex,
+    _ref$isSelectedIndex = _ref.isSelectedIndex,
+    isSelectedIndex = _ref$isSelectedIndex === void 0 ? _FlexGrid.defaultProps.isSelectedIndex : _ref$isSelectedIndex,
+    _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? _FlexGrid.defaultProps.selection : _ref$selection,
+    sort = _ref.sort,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? _FlexGrid.defaultProps.onChange : _ref$onChange,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? _FlexGrid.defaultProps.onClick : _ref$onClick,
+    _ref$onDoubleClick = _ref.onDoubleClick,
+    _onDoubleClick = _ref$onDoubleClick === void 0 ? _FlexGrid.defaultProps.onDoubleClick : _ref$onDoubleClick,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? _FlexGrid.defaultProps.iconColor : _ref$iconColor,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _FlexGrid.defaultProps.state : _ref$state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _FlexGrid2["default"]['flexGrid-inactive'], state === _FlexGrid.flexGridState.inactive)),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _colors["default"]['bg-blue-light'], (0, _defineProperty2["default"])({}, _borders["default"].border, items === null || items === void 0 ? void 0 : items[0])),
+      children: items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 || (_items$ = _items$.names) === null || _items$ === void 0 ? void 0 : _items$.map(function (name, nameIndex) {
+        var _items$2;
+        var isIdColumn = nameIndex === idIndex;
+        var isSelectedColumn = nameIndex === isSelectedIndex;
+        var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+          ariaAttr: {
+            describedBy: name.toString()
+          },
+          isChecked: items.map(function (item) {
+            return item.values[1];
+          }).every(function (isSelected) {
+            return isSelected === true;
+          }),
+          onChange: function onChange(event) {
+            var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref2) {
+              var values = _ref2.values;
+              return values === null || values === void 0 ? void 0 : values.map(function (value, valueIndex) {
+                return valueIndex === isSelectedIndex ? event.target.checked : value;
+              });
+            }).map(function (newItem) {
+              return {
+                id: newItem[idIndex],
+                isSelected: newItem[isSelectedIndex]
+              };
+            });
+            // @ts-ignore
+            _onChange(newItems);
+          }
+        });
+        var sortComponent;
+        if (sort.index === nameIndex && sort.value === name) {
+          if (sort.order === _sort.sortOrder.ascending) {
+            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: _Icon.iconName.TriangleUp16,
+              size: _Icon.iconSize.small,
+              fill: iconColor.sort
+            });
+          } else {
+            sortComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              icon: _Icon.iconName.TriangleDown16,
+              size: _Icon.iconSize.small,
+              fill: iconColor.sort
+            });
+          }
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames["default"])(_typography["default"].h6, _visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _FlexGrid2["default"].item, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-between'], !isSelectedColumn)),
+            onClick: function onClick() {
+              if (!isSelectedColumn) {
+                // @ts-ignore
+                _onClick({
+                  index: nameIndex,
+                  value: name,
+                  order: sort.order
+                });
+              }
+            },
+            onKeyPress: function onKeyPress() {},
+            role: "button",
+            tabIndex: 0,
+            children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _layout["default"]['width-full']),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
+                children: (0, _string.getCapizalizedString)({
+                  string: name
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
+                children: [sortComponent, nameIndex < (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
+                /*#__PURE__*/
+                // eslint-disable-line no-unsafe-optional-chaining
+                (0, _jsxRuntime.jsx)("span", {
+                  className: (0, _classnames["default"])(_margin["default"]['ml-1'], _colors["default"]['text-gray-light']),
+                  children: " |"
+                }) : null]
+              })]
+            })
+          })
+        }, (0, _uuid.v1)());
+      })
+    }), items === null || items === void 0 ? void 0 : items.map(function (item, itemIndex) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _borders["default"].border, _FlexGrid2["default"].item, _FlexGrid2["default"].row),
+        onClick: function onClick() {
+          var bubleUpNewItems = true;
+          var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref3, newItemIndex) {
+            var values = _ref3.values;
+            return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
+              if ((0, _typeof2["default"])(newValue) === 'object' && ['FileDirectory16', 'File16'].includes(newValue === null || newValue === void 0 ? void 0 : newValue.icon)) {
+                bubleUpNewItems = false;
+              }
+              return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue;
+            });
+          }).map(function (newItem) {
+            return {
+              id: newItem[idIndex],
+              isSelected: newItem[isSelectedIndex]
+            };
+          });
+          if (bubleUpNewItems) {
+            // @ts-ignore
+            _onChange(newItems);
+          }
+        },
+        onKeyPress: function onKeyPress() {},
+        role: "button",
+        tabIndex: 0,
+        onDoubleClick: function onDoubleClick() {
+          // @ts-ignore
+          _onDoubleClick(itemIndex);
+        },
+        children: item.values.map(function (value, valueIndex) {
+          var isIdColumn = valueIndex === idIndex;
+          var isSelectedColumn = valueIndex === isSelectedIndex;
+          var isSelectedComponent = selection === _FlexGrid.flexGridSelection.radio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.Radio, {
+            name: "isSelected",
+            isChecked: item.values[isSelectedIndex] === true,
+            onChange: function onChange(event) {
+              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref4, newItemIndex) {
+                var names = _ref4.names,
+                  values = _ref4.values;
+                return {
+                  names: names,
+                  values: values.map(function (newValue, newValueIndex) {
+                    if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
+                      return event.target.checked;
+                    }
+                    if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
+                      return newValue;
+                    }
+                    if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
+                      return false;
+                    }
+                    if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
+                      return newValue;
+                    }
+                    return newValue;
+                  })
+                };
+              });
+              // @ts-ignore
+              _onChange(newItems);
+            }
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+            ariaAttr: {
+              describedBy: 'isSelected'
+            },
+            isChecked: item.values[isSelectedIndex] === true,
+            onChange: function onChange(event) {
+              var newItems = items === null || items === void 0 ? void 0 : items.map(function (_ref5, newItemIndex) {
+                var values = _ref5.values;
+                return values === null || values === void 0 ? void 0 : values.map(function (newValue, newValueIndex) {
+                  return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue;
+                });
+              }).map(function (newItem) {
+                return {
+                  id: newItem[idIndex],
+                  isSelected: newItem[isSelectedIndex]
+                };
+              });
+              // @ts-ignore
+              _onChange(newItems);
+            }
+          });
+          var iconComponent = value !== null && value !== void 0 && value.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: _Icon.iconName[value.icon],
+            size: _Icon.iconSize.small,
+            fill: iconColor.object
+          }) : null;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+            children: !isIdColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _padding["default"]['p-2'], _index["default"]['css-truncate'], _index["default"]['css-truncate-overflow'], _typography["default"]['no-wrap'], (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _grid["default"]['col-2'], isSelectedColumn), _grid["default"]['col-12'], !isSelectedColumn), _flexbox["default"]['flex-justify-center'], isSelectedColumn), _flexbox["default"]['flex-justify-start'], !isSelectedColumn)),
+              children: isSelectedColumn ? isSelectedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(_index["default"]['css-truncate'], _index["default"]['css-truncate-overflow']),
+                children: [(value === null || value === void 0 ? void 0 : value.icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+                  children: [iconComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: _margin["default"]['ml-2'],
+                    children: value.value
+                  })]
+                }), value instanceof Date && "".concat(value.toLocaleDateString(), " ").concat(value.toLocaleTimeString()), Array.isArray(value) && value.find(function (_ref6) {
+                  var isSelected = _ref6.isSelected;
+                  return isSelected === true;
+                }).text, !(value !== null && value !== void 0 && value.icon) && !(value instanceof Date) && !Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.toString())]
+              })
+            }, (0, _uuid.v1)())
+          }, (0, _uuid.v1)());
+        })
+      }, (0, _uuid.v1)());
+    })]
+  });
+}

package/build/primer/Grid/FlexGrid/FlexGrid.prop.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flexGridState = exports.flexGridSelection = exports.defaultProps = void 0;
+var flexGridState = exports.flexGridState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var flexGridSelection = exports.flexGridSelection = {
+  checkbox: 'checkbox',
+  radio: 'radio'
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  idIndex: -1,
+  isSelectedIndex: -1,
+  selection: flexGridSelection.checkbox,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  onDoubleClick: function onDoubleClick() {},
+  iconColor: {
+    sort: '#990000',
+    object: '#79b8ff'
+  },
+  state: flexGridState.active
+};

package/build/primer/Grid/FlexGrid/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FlexGrid", {
+  enumerable: true,
+  get: function get() {
+    return _FlexGrid.FlexGrid;
+  }
+});
+Object.defineProperty(exports, "flexGridSelection", {
+  enumerable: true,
+  get: function get() {
+    return _FlexGrid2.flexGridSelection;
+  }
+});
+Object.defineProperty(exports, "flexGridState", {
+  enumerable: true,
+  get: function get() {
+    return _FlexGrid2.flexGridState;
+  }
+});
+var _FlexGrid = require("./FlexGrid");
+var _FlexGrid2 = require("./FlexGrid.prop");

package/build/primer/Grid/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Grid = void 0;
+var _DisplayTable = require("./DisplayTable");
+var _FlexGrid = require("./FlexGrid");
+var Grid = exports.Grid = {
+  DisplayTable: _DisplayTable.DisplayTable,
+  FlexGrid: _FlexGrid.FlexGrid,
+  flexGridSelection: _FlexGrid.flexGridSelection,
+  flexGridState: _FlexGrid.flexGridState
+};

package/build/primer/Icon/Icon.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = Icon;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _Icon = require("./Icon.prop");
+var _Icon2 = require("./Icon.part");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "ariaLabel", "icon", "height", "width", "size", "fill", "verticalAlign"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultSize = [16, 16];
+function Icon(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Icon.defaultProps.className : _ref$className,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? _Icon.defaultProps.ariaLabel : _ref$ariaLabel,
+    icon = _ref.icon,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? _Icon.defaultProps.height : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? _Icon.defaultProps.width : _ref$width,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _Icon.defaultProps.size : _ref$size,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? _Icon.defaultProps.fill : _ref$fill,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? _Icon.defaultProps.verticalAlign : _ref$verticalAlign,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var widthHeight = defaultSize;
+  var attrs = {
+    className: className,
+    'aria-hidden': ariaLabel ? 'false' : 'true',
+    'aria-label': ariaLabel,
+    height: height,
+    role: 'img',
+    viewBox: [0, 0].concat((0, _toConsumableArray2["default"])(widthHeight)).join(' '),
+    style: {}
+  };
+  if (width && height) {
+    Object.assign(attrs, {
+      width: width,
+      height: height
+    });
+  } else {
+    var dims = {
+      width: widthHeight[0],
+      height: widthHeight[1]
+    };
+    var given = width ? 'width' : 'height';
+    var computed = given === 'width' ? 'height' : 'width';
+    attrs[given] = width || height || _Icon.iconSize[size] || size;
+    attrs[computed] = attrs[given] * (dims[computed] / dims[given]);
+  }
+  attrs.style = {
+    display: 'inline-block',
+    fill: fill,
+    userSelect: 'none',
+    verticalAlign: _Icon.iconAlign[verticalAlign] || verticalAlign
+  };
+  var Element = _Icon2.iconComponents[icon];
+  return Element != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, _objectSpread(_objectSpread({
+    className: className
+  }, attrs), otherProps)) : null;
+}