@rio-cloud/rio-uikit 0.16.0-beta-3 → 0.16.0-beta-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/components/filepicker/FilePicker.js +1 -1
  2. package/lib/components/table/TableViewToggles.js +98 -104
  3. package/lib/style/css/components/TableToolbar.less +1 -1
  4. package/lib/style/fonts/rioglyph/rioglyph.svg +102 -96
  5. package/lib/style/fonts/rioglyph/rioglyph.ttf +0 -0
  6. package/lib/types.ts +10 -6
  7. package/lib/version.json +1 -1
  8. package/package.json +1 -1
package/lib/components/filepicker/FilePicker.js CHANGED
@@ -73,7 +73,7 @@ var FilePicker = function FilePicker(props) {
73
73
  var getRootProps = _ref.getRootProps,
74
74
  getInputProps = _ref.getInputProps,
75
75
  isDragActive = _ref.isDragActive;
76
- return showDropzone && /*#__PURE__*/_react.default.createElement("div", getRootProps(), /*#__PURE__*/_react.default.createElement("input", getInputProps()), children && children({
76
+ return /*#__PURE__*/_react.default.createElement("div", getRootProps(), /*#__PURE__*/_react.default.createElement("input", getInputProps()), showDropzone && children && children({
77
77
  isDragActive: isDragActive
78
78
  }));
79
79
  }));
package/lib/components/table/TableViewToggles.js CHANGED
@@ -9,17 +9,11 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.default = void 0;
11
11
 
12
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
13
 
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
 
16
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
17
-
18
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19
-
20
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
21
-
22
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
16
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
23
17
 
24
18
  var _react = _interopRequireWildcard(require("react"));
25
19
 
@@ -27,106 +21,103 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
27
21
 
28
22
  var _classnames = _interopRequireDefault(require("classnames"));
29
23
 
30
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
24
+ var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"));
31
25
 
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
26
+ var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
27
+
28
+ var _excluded = ["viewType", "initialViewType", "onViewTypeChange", "className", "disabledViewTypes", "disabled", "tableViewTooltipContent", "singleCardViewTooltipContent", "multiCardsViewTooltipContent"];
33
29
 
34
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
31
 
36
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
37
33
 
38
34
  // TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
39
- var TableViewToggles = /*#__PURE__*/function (_Component) {
40
- (0, _inherits2.default)(TableViewToggles, _Component);
41
-
42
- var _super = _createSuper(TableViewToggles);
43
-
44
- function TableViewToggles(props) {
45
- var _this;
46
-
47
- (0, _classCallCheck2.default)(this, TableViewToggles);
48
- _this = _super.call(this, props);
49
- _this.state = {
50
- viewType: _this.props.initialViewType
51
- };
52
- _this.handleSetTableView = _this.handleSetTableView.bind((0, _assertThisInitialized2.default)(_this));
53
- _this.handleSetSingleCardsView = _this.handleSetSingleCardsView.bind((0, _assertThisInitialized2.default)(_this));
54
- _this.handleSetMultiCardsView = _this.handleSetMultiCardsView.bind((0, _assertThisInitialized2.default)(_this));
55
- return _this;
56
- } // eslint-disable-next-line camelcase
57
-
58
-
59
- (0, _createClass2.default)(TableViewToggles, [{
60
- key: "UNSAFE_componentWillReceiveProps",
61
- value: function UNSAFE_componentWillReceiveProps(nextProps) {
62
- if (this.props.viewType !== nextProps.viewType) {
63
- this.setState({
64
- viewType: nextProps.viewType
65
- });
66
- }
67
- }
68
- }, {
69
- key: "handleSetTableView",
70
- value: function handleSetTableView() {
71
- this.setState({
72
- viewType: TableViewToggles.VIEW_TYPE_TABLE
73
- });
74
- this.props.onViewTypeChange(TableViewToggles.VIEW_TYPE_TABLE);
75
- }
76
- }, {
77
- key: "handleSetSingleCardsView",
78
- value: function handleSetSingleCardsView() {
79
- this.setState({
80
- viewType: TableViewToggles.VIEW_TYPE_SINGLE_CARD
81
- });
82
- this.props.onViewTypeChange(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
83
- }
84
- }, {
85
- key: "handleSetMultiCardsView",
86
- value: function handleSetMultiCardsView() {
87
- this.setState({
88
- viewType: TableViewToggles.VIEW_TYPE_MULTI_CARDS
89
- });
90
- this.props.onViewTypeChange(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
91
- }
92
- }, {
93
- key: "render",
94
- value: function render() {
95
- var viewType = this.state.viewType;
96
- var _this$props = this.props,
97
- className = _this$props.className,
98
- disabledViewTypes = _this$props.disabledViewTypes,
99
- disabled = _this$props.disabled;
100
- var wrapperClassNames = (0, _classnames.default)('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
101
- var buttonClassNames = (0, _classnames.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none');
102
- var tableViewActiveClasses = (0, _classnames.default)(buttonClassNames, viewType === TableViewToggles.VIEW_TYPE_TABLE && 'active');
103
- var cardViewActiveClasses = (0, _classnames.default)(buttonClassNames, viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'active');
104
- var multiCardsViewActiveClasses = (0, _classnames.default)(buttonClassNames, viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'active');
105
- return /*#__PURE__*/_react.default.createElement("div", {
106
- className: wrapperClassNames
107
- }, !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_TABLE) && /*#__PURE__*/_react.default.createElement("button", {
108
- className: tableViewActiveClasses,
109
- type: "button",
110
- onClick: this.handleSetTableView
111
- }, /*#__PURE__*/_react.default.createElement("span", {
112
- className: "rioglyph rioglyph-table-view"
113
- })), !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_SINGLE_CARD) && /*#__PURE__*/_react.default.createElement("button", {
114
- className: cardViewActiveClasses,
115
- type: "button",
116
- onClick: this.handleSetSingleCardsView
117
- }, /*#__PURE__*/_react.default.createElement("span", {
118
- className: "rioglyph rioglyph-th-list"
119
- })), !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_MULTI_CARDS) && /*#__PURE__*/_react.default.createElement("button", {
120
- className: multiCardsViewActiveClasses,
121
- type: "button",
122
- onClick: this.handleSetMultiCardsView
123
- }, /*#__PURE__*/_react.default.createElement("span", {
124
- className: "rioglyph rioglyph-split-view"
125
- })));
35
+ var wrapWithTooltip = function wrapWithTooltip(tooltipContent, element) {
36
+ return /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, {
37
+ placement: "bottom",
38
+ overlay: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
39
+ id: "tooltip",
40
+ allowOnTouch: true
41
+ }, tooltipContent)
42
+ }, element);
43
+ };
44
+
45
+ var TableViewToggles = function TableViewToggles(props) {
46
+ var viewType = props.viewType,
47
+ initialViewType = props.initialViewType,
48
+ onViewTypeChange = props.onViewTypeChange,
49
+ className = props.className,
50
+ disabledViewTypes = props.disabledViewTypes,
51
+ disabled = props.disabled,
52
+ tableViewTooltipContent = props.tableViewTooltipContent,
53
+ singleCardViewTooltipContent = props.singleCardViewTooltipContent,
54
+ multiCardsViewTooltipContent = props.multiCardsViewTooltipContent,
55
+ remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
56
+
57
+ var _useState = (0, _react.useState)(initialViewType),
58
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
59
+ internaViewType = _useState2[0],
60
+ setInternalViewType = _useState2[1]; // update internal state when external state changes - controlled component case
61
+
62
+
63
+ (0, _react.useEffect)(function () {
64
+ if (viewType) {
65
+ setInternalViewType(viewType);
126
66
  }
127
- }]);
128
- return TableViewToggles;
129
- }(_react.Component);
67
+ }, [viewType]);
68
+
69
+ var handleSetTableView = function handleSetTableView() {
70
+ setInternalViewType(TableViewToggles.VIEW_TYPE_TABLE);
71
+ onViewTypeChange(TableViewToggles.VIEW_TYPE_TABLE);
72
+ };
73
+
74
+ var handleSetSingleCardsView = function handleSetSingleCardsView() {
75
+ setInternalViewType(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
76
+ onViewTypeChange(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
77
+ };
78
+
79
+ var handleSetMultiCardsView = function handleSetMultiCardsView() {
80
+ setInternalViewType(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
81
+ onViewTypeChange(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
82
+ };
83
+
84
+ var wrapperClassNames = (0, _classnames.default)('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
85
+ var buttonClassNames = (0, _classnames.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none');
86
+ var tableViewActiveClasses = (0, _classnames.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_TABLE && 'active');
87
+ var cardViewActiveClasses = (0, _classnames.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'active');
88
+ var multiCardsViewActiveClasses = (0, _classnames.default)(buttonClassNames, internaViewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'active');
89
+
90
+ var tableViewButton = /*#__PURE__*/_react.default.createElement("button", {
91
+ className: tableViewActiveClasses,
92
+ type: "button",
93
+ onClick: handleSetTableView
94
+ }, /*#__PURE__*/_react.default.createElement("span", {
95
+ className: "rioglyph rioglyph-table-view"
96
+ }));
97
+
98
+ var singleCardViewButton = /*#__PURE__*/_react.default.createElement("button", {
99
+ className: cardViewActiveClasses,
100
+ type: "button",
101
+ onClick: handleSetSingleCardsView
102
+ }, /*#__PURE__*/_react.default.createElement("span", {
103
+ className: "rioglyph rioglyph-th-list"
104
+ }));
105
+
106
+ var multiCardViewButton = /*#__PURE__*/_react.default.createElement("button", {
107
+ className: multiCardsViewActiveClasses,
108
+ type: "button",
109
+ onClick: handleSetMultiCardsView
110
+ }, /*#__PURE__*/_react.default.createElement("span", {
111
+ className: "rioglyph rioglyph-split-view"
112
+ }));
113
+
114
+ var showTableViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_TABLE);
115
+ var showSingleCardViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_SINGLE_CARD);
116
+ var showMultiCardViewButton = !disabledViewTypes.includes(TableViewToggles.VIEW_TYPE_MULTI_CARDS);
117
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
118
+ className: wrapperClassNames
119
+ }), showTableViewButton && (tableViewTooltipContent ? wrapWithTooltip(tableViewTooltipContent, tableViewButton) : tableViewButton), showSingleCardViewButton && (singleCardViewTooltipContent ? wrapWithTooltip(singleCardViewTooltipContent, singleCardViewButton) : singleCardViewButton), showMultiCardViewButton && (multiCardsViewTooltipContent ? wrapWithTooltip(multiCardsViewTooltipContent, multiCardViewButton) : multiCardViewButton));
120
+ };
130
121
 
131
122
  TableViewToggles.VIEW_TYPE_TABLE = 'TABLE';
132
123
  TableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD';
@@ -143,7 +134,10 @@ TableViewToggles.propTypes = {
143
134
  disabledViewTypes: _propTypes.default.arrayOf(_propTypes.default.oneOf([TableViewToggles.VIEW_TYPE_TABLE, TableViewToggles.VIEW_TYPE_SINGLE_CARD, TableViewToggles.VIEW_TYPE_MULTI_CARDS])),
144
135
  onViewTypeChange: _propTypes.default.func,
145
136
  disabled: _propTypes.default.bool,
146
- className: _propTypes.default.string
137
+ className: _propTypes.default.string,
138
+ tableViewTooltipContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
139
+ singleCardViewTooltipContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
140
+ multiCardsViewTooltipContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
147
141
  };
148
142
  var _default = TableViewToggles;
149
143
  exports.default = _default;
package/lib/style/css/components/TableToolbar.less CHANGED
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  .table-toolbar-column,
56
- .form-group {
56
+ .form-group:not(.DatePicker) {
57
57
  .form-group;
58
58
  display: flex;
59
59
  flex-direction: column;