gdx-ui 1.15.3 → 2.0.1
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.
- package/base.css +1 -1
- package/components/autocomplete/Autocomplete.js +64 -53
- package/components/badge/Badge.js +2 -2
- package/components/box/Box.js +34 -31
- package/components/dialog/Dialog.js +15 -26
- package/components/editable/Editable.js +105 -95
- package/components/editable/EditableArea.js +3 -0
- package/components/flex/Flex.js +51 -22
- package/components/forms/LabelInput.js +13 -4
- package/components/forms/LabelValue.js +13 -4
- package/components/images/CarouselImages.js +11 -12
- package/components/images/Img.js +14 -26
- package/components/images/Thumb.js +16 -40
- package/components/images/{ImageZoom.js → ZoomImage.js} +74 -111
- package/components/images/{PictureZoomBtns.js → ZoomImageButtons.js} +50 -63
- package/components/images/{Picture.js → ZoomImageSquare.js} +3 -3
- package/components/images/index.js +33 -11
- package/components/images/useImageLoader.js +76 -0
- package/components/list/ScrollableList.js +1 -1
- package/components/snackbar/Snackbar.js +1 -1
- package/components/table/Table.js +14 -1
- package/components/util/Note.js +14 -5
- package/components/util/Text.js +41 -9
- package/components/util/Title.js +35 -8
- package/components/util/index.js +0 -11
- package/components/widget/Widget.js +16 -5
- package/hooks/index.js +11 -0
- package/hooks/useAutocomplete.js +103 -0
- package/package.json +1 -1
- package/stories/box/Box.stories.js +32 -0
- package/stories/editable/Editable.stories.js +26 -0
- package/stories/editable/Editor.stories.js +33 -0
- package/stories/forms/Autocomplete.stories.js +101 -0
- package/stories/images/CarouselImages.stories.js +31 -0
- package/stories/images/{images.stories.js → Images.stories.js} +1 -1
- package/stories/images/ZoomImage.stories.js +24 -0
- package/stories/images/ZoomImageButtons.stories.js +23 -0
- package/stories/images/ZoomImageSquare.stories.js +23 -0
- package/stories/layout/Flex.stories.js +180 -0
- package/stories/list/ScrollableList.stories.js +37 -8
- package/stories/utils/Badge.stories.js +29 -0
- package/stories/utils/Expanded.stories.js +18 -7
- package/stories/utils/Loader.stories.js +32 -0
- package/stories/utils/Note.stories.js +38 -0
- package/stories/utils/Snackbar.stories.js +46 -0
- package/stories/utils/Text.stories.js +40 -0
- package/stories/utils/Tooltip.stories.js +22 -0
- package/stories/widget/Widget.stories.js +59 -0
- package/components/images/PictureZoomSquare.js +0 -60
- package/components/list/SortableList.js +0 -138
- package/components/list/SortableListOLD.js +0 -121
- package/components/scroller/ListScroller.js +0 -113
- package/components/util/Anchor.js +0 -30
- package/stories/flex/Flex.stories.js +0 -35
- package/stories/list/SorteableList.stories.js +0 -45
- /package/stories/images/{thumb.stories.js → Thumb.stories.js} +0 -0
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.useImageLoader = void 0;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
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; }
|
|
10
|
+
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) { _defineProperty(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; }
|
|
11
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
12
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
13
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
14
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
15
|
+
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."); }
|
|
16
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
17
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
18
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
19
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
20
|
+
var useImageLoader = exports.useImageLoader = function useImageLoader(src) {
|
|
21
|
+
var _useState = (0, _react.useState)({
|
|
22
|
+
isLoading: Boolean(src),
|
|
23
|
+
hasError: false,
|
|
24
|
+
width: 0,
|
|
25
|
+
height: 0
|
|
26
|
+
}),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
state = _useState2[0],
|
|
29
|
+
setState = _useState2[1];
|
|
30
|
+
(0, _react.useEffect)(function () {
|
|
31
|
+
if (!src) {
|
|
32
|
+
setState({
|
|
33
|
+
isLoading: false,
|
|
34
|
+
hasError: true,
|
|
35
|
+
width: 0,
|
|
36
|
+
height: 0
|
|
37
|
+
});
|
|
38
|
+
return undefined;
|
|
39
|
+
}
|
|
40
|
+
var isCancelled = false;
|
|
41
|
+
var image = new Image();
|
|
42
|
+
setState(function (prev) {
|
|
43
|
+
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
44
|
+
isLoading: true,
|
|
45
|
+
hasError: false
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
image.onload = function () {
|
|
49
|
+
if (isCancelled) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
setState({
|
|
53
|
+
isLoading: false,
|
|
54
|
+
hasError: false,
|
|
55
|
+
width: image.width,
|
|
56
|
+
height: image.height
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
image.onerror = function () {
|
|
60
|
+
if (isCancelled) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
setState({
|
|
64
|
+
isLoading: false,
|
|
65
|
+
hasError: true,
|
|
66
|
+
width: 0,
|
|
67
|
+
height: 0
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
image.src = src;
|
|
71
|
+
return function () {
|
|
72
|
+
isCancelled = true;
|
|
73
|
+
};
|
|
74
|
+
}, [src]);
|
|
75
|
+
return state;
|
|
76
|
+
};
|
|
@@ -36,7 +36,7 @@ var ScrollableList = exports.ScrollableList = function ScrollableList(_ref) {
|
|
|
36
36
|
canScrollRight = _useState4[0],
|
|
37
37
|
setCanScrollRight = _useState4[1];
|
|
38
38
|
|
|
39
|
-
//
|
|
39
|
+
// Update scroll buttons state
|
|
40
40
|
var updateScrollButtons = function updateScrollButtons() {
|
|
41
41
|
var el = containerRef.current;
|
|
42
42
|
if (!el) return;
|
|
@@ -15,7 +15,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
15
15
|
var Snackbar = exports.Snackbar = function Snackbar(_ref) {
|
|
16
16
|
var children = _ref.children,
|
|
17
17
|
_ref$color = _ref.color,
|
|
18
|
-
color = _ref$color === void 0 ? '
|
|
18
|
+
color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
19
19
|
onClose = _ref.onClose,
|
|
20
20
|
_ref$timer = _ref.timer,
|
|
21
21
|
timer = _ref$timer === void 0 ? 5 : _ref$timer;
|
|
@@ -116,7 +116,20 @@ Table.propTypes = {
|
|
|
116
116
|
hover: _propTypes["default"].bool
|
|
117
117
|
};
|
|
118
118
|
TableHeader.propTypes = {
|
|
119
|
-
headers: _propTypes["default"].
|
|
119
|
+
headers: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
120
|
+
/** Texto a mostrar en el header */
|
|
121
|
+
text: _propTypes["default"].string.isRequired,
|
|
122
|
+
/** Ancho de la columna (número para porcentaje relativo o string para valores fijos) */
|
|
123
|
+
width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
|
|
124
|
+
/** Alineación del texto */
|
|
125
|
+
align: _propTypes["default"].oneOf(['left', 'center', 'right']),
|
|
126
|
+
/** Campo usado para ordenar (debe coincidir con el nombre del campo en los datos) */
|
|
127
|
+
field: _propTypes["default"].string,
|
|
128
|
+
/** Tipo de orden actual: ascendente o descendente */
|
|
129
|
+
orderType: _propTypes["default"].oneOf(['ASC', 'DESC']),
|
|
130
|
+
/** Función callback que se ejecuta al hacer click en el header para ordenar */
|
|
131
|
+
onOrder: _propTypes["default"].func
|
|
132
|
+
})).isRequired
|
|
120
133
|
};
|
|
121
134
|
TableBody.propTypes = {
|
|
122
135
|
children: _propTypes["default"].any
|
package/components/util/Note.js
CHANGED
|
@@ -6,20 +6,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.Note = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _Text = require("./Text");
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
11
|
var Note = exports.Note = function Note(_ref) {
|
|
11
12
|
var children = _ref.children,
|
|
12
13
|
_ref$className = _ref.className,
|
|
13
14
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
15
|
+
as = _ref.as,
|
|
14
16
|
_ref$inline = _ref.inline,
|
|
15
|
-
inline = _ref$inline === void 0 ? false : _ref$inline
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
inline = _ref$inline === void 0 ? false : _ref$inline,
|
|
18
|
+
_ref$textWrap = _ref.textWrap,
|
|
19
|
+
textWrap = _ref$textWrap === void 0 ? false : _ref$textWrap;
|
|
20
|
+
return /*#__PURE__*/_react["default"].createElement(_Text.Text, {
|
|
21
|
+
as: as,
|
|
22
|
+
inline: inline,
|
|
23
|
+
size: "small",
|
|
24
|
+
className: "note ".concat(className),
|
|
25
|
+
textWrap: textWrap
|
|
19
26
|
}, children);
|
|
20
27
|
};
|
|
21
28
|
Note.propTypes = {
|
|
22
29
|
children: _propTypes["default"].any,
|
|
23
30
|
className: _propTypes["default"].string,
|
|
24
|
-
|
|
31
|
+
as: _propTypes["default"].oneOf(['div', 'span', 'p']),
|
|
32
|
+
inline: _propTypes["default"].bool,
|
|
33
|
+
textWrap: _propTypes["default"].bool
|
|
25
34
|
};
|
package/components/util/Text.js
CHANGED
|
@@ -1,40 +1,72 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.Text = void 0;
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _excluded = ["children", "className", "size", "inline", "bold"];
|
|
10
|
+
var _excluded = ["children", "html", "className", "size", "as", "inline", "bold", "textWrap", "style"];
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
12
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
|
+
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; }
|
|
14
|
+
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) { _defineProperty(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; }
|
|
15
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
17
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
12
18
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
13
19
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
14
20
|
var Text = exports.Text = function Text(_ref) {
|
|
15
21
|
var children = _ref.children,
|
|
22
|
+
html = _ref.html,
|
|
16
23
|
_ref$className = _ref.className,
|
|
17
24
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
18
25
|
_ref$size = _ref.size,
|
|
19
26
|
size = _ref$size === void 0 ? 'normal' : _ref$size,
|
|
27
|
+
as = _ref.as,
|
|
20
28
|
_ref$inline = _ref.inline,
|
|
21
29
|
inline = _ref$inline === void 0 ? false : _ref$inline,
|
|
22
30
|
_ref$bold = _ref.bold,
|
|
23
31
|
bold = _ref$bold === void 0 ? false : _ref$bold,
|
|
32
|
+
_ref$textWrap = _ref.textWrap,
|
|
33
|
+
textWrap = _ref$textWrap === void 0 ? false : _ref$textWrap,
|
|
34
|
+
style = _ref.style,
|
|
24
35
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
-
var Tag = inline ? 'span' : 'div';
|
|
36
|
+
var Tag = as || (inline ? 'span' : 'div');
|
|
37
|
+
var isInlineTag = Tag === 'span';
|
|
38
|
+
var isHeadingTag = /^h[1-6]$/.test(Tag);
|
|
39
|
+
var addBottomMargin = !isInlineTag && Tag !== 'p' && !isHeadingTag;
|
|
40
|
+
var mergedStyle = _objectSpread({
|
|
41
|
+
whiteSpace: textWrap ? 'nowrap' : 'normal',
|
|
42
|
+
overflow: textWrap ? 'hidden' : undefined,
|
|
43
|
+
textOverflow: textWrap ? 'ellipsis' : undefined,
|
|
44
|
+
width: textWrap && !isInlineTag ? '100%' : undefined,
|
|
45
|
+
display: textWrap && isInlineTag ? 'inline-block' : undefined
|
|
46
|
+
}, style);
|
|
47
|
+
if (html !== undefined && html !== null) {
|
|
48
|
+
return /*#__PURE__*/_react["default"].createElement(Tag, _extends({
|
|
49
|
+
className: "\n text-size-".concat(size, " \n ").concat(addBottomMargin ? 'margin-bottom' : '', " \n ").concat(bold ? 'strong' : '', "\n ").concat(className),
|
|
50
|
+
style: mergedStyle
|
|
51
|
+
}, props, {
|
|
52
|
+
dangerouslySetInnerHTML: {
|
|
53
|
+
__html: html
|
|
54
|
+
}
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
26
57
|
return /*#__PURE__*/_react["default"].createElement(Tag, _extends({
|
|
27
|
-
className: "\n text-size-".concat(size, " \n ").concat(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
__html: children
|
|
31
|
-
}
|
|
32
|
-
}));
|
|
58
|
+
className: "\n text-content\n text-size-".concat(size, " \n ").concat(addBottomMargin ? 'margin-bottom' : '', " \n ").concat(bold ? 'strong' : '', "\n ").concat(className),
|
|
59
|
+
style: mergedStyle
|
|
60
|
+
}, props), children);
|
|
33
61
|
};
|
|
34
62
|
Text.propTypes = {
|
|
35
63
|
className: _propTypes["default"].string,
|
|
64
|
+
as: _propTypes["default"].oneOf(['div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
|
|
36
65
|
inline: _propTypes["default"].bool,
|
|
37
66
|
bold: _propTypes["default"].bool,
|
|
38
67
|
size: _propTypes["default"].oneOf(['small', 'normal', 'large']),
|
|
39
|
-
children: _propTypes["default"].
|
|
68
|
+
children: _propTypes["default"].any,
|
|
69
|
+
html: _propTypes["default"].string,
|
|
70
|
+
textWrap: _propTypes["default"].bool,
|
|
71
|
+
style: _propTypes["default"].object
|
|
40
72
|
};
|
package/components/util/Title.js
CHANGED
|
@@ -1,23 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.Title = void 0;
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _Text = require("./Text");
|
|
11
|
+
var _excluded = ["children", "className", "as", "fullWidth", "textWrap", "style"];
|
|
9
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
|
+
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; }
|
|
15
|
+
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) { _defineProperty(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; }
|
|
16
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
19
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
21
|
var Title = exports.Title = function Title(_ref) {
|
|
11
|
-
var
|
|
12
|
-
children = _ref.children,
|
|
22
|
+
var children = _ref.children,
|
|
13
23
|
_ref$className = _ref.className,
|
|
14
|
-
className = _ref$className === void 0 ? '' : _ref$className
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
24
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
25
|
+
_ref$as = _ref.as,
|
|
26
|
+
as = _ref$as === void 0 ? 'h1' : _ref$as,
|
|
27
|
+
_ref$fullWidth = _ref.fullWidth,
|
|
28
|
+
fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
|
|
29
|
+
_ref$textWrap = _ref.textWrap,
|
|
30
|
+
textWrap = _ref$textWrap === void 0 ? false : _ref$textWrap,
|
|
31
|
+
style = _ref.style,
|
|
32
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
+
var mergedStyle = _objectSpread({
|
|
34
|
+
width: fullWidth ? '100%' : undefined
|
|
35
|
+
}, style);
|
|
36
|
+
return /*#__PURE__*/_react["default"].createElement(_Text.Text, _extends({
|
|
37
|
+
as: as,
|
|
38
|
+
className: className,
|
|
39
|
+
textWrap: textWrap,
|
|
40
|
+
style: mergedStyle
|
|
41
|
+
}, props), children);
|
|
19
42
|
};
|
|
20
43
|
Title.propTypes = {
|
|
21
44
|
children: _propTypes["default"].any.isRequired,
|
|
22
|
-
|
|
45
|
+
className: _propTypes["default"].string,
|
|
46
|
+
as: _propTypes["default"].oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
|
|
47
|
+
fullWidth: _propTypes["default"].bool,
|
|
48
|
+
textWrap: _propTypes["default"].bool,
|
|
49
|
+
style: _propTypes["default"].object
|
|
23
50
|
};
|
package/components/util/index.js
CHANGED
|
@@ -3,17 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
var _Anchor = require("./Anchor");
|
|
7
|
-
Object.keys(_Anchor).forEach(function (key) {
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _Anchor[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _Anchor[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
6
|
var _List = require("./List");
|
|
18
7
|
Object.keys(_List).forEach(function (key) {
|
|
19
8
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -6,18 +6,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.Widget = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _excluded = ["children", "className", "bordered", "spacing", "hover"];
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
13
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
14
|
var Widget = exports.Widget = function Widget(_ref) {
|
|
11
15
|
var children = _ref.children,
|
|
12
16
|
className = _ref.className,
|
|
17
|
+
_ref$bordered = _ref.bordered,
|
|
18
|
+
bordered = _ref$bordered === void 0 ? false : _ref$bordered,
|
|
13
19
|
_ref$spacing = _ref.spacing,
|
|
14
|
-
spacing = _ref$spacing === void 0 ? true : _ref$spacing
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
20
|
+
spacing = _ref$spacing === void 0 ? true : _ref$spacing,
|
|
21
|
+
_ref$hover = _ref.hover,
|
|
22
|
+
hover = _ref$hover === void 0 ? false : _ref$hover,
|
|
23
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
24
|
+
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
25
|
+
className: "widget ".concat(bordered ? 'bordered' : '', " ").concat(spacing ? 'content' : '', " ").concat(hover ? 'widget-hover' : '', " ").concat(className ? className : '')
|
|
26
|
+
}, props), children);
|
|
18
27
|
};
|
|
19
28
|
Widget.propTypes = {
|
|
20
29
|
children: _propTypes["default"].any,
|
|
21
30
|
className: _propTypes["default"].string,
|
|
22
|
-
|
|
31
|
+
bordered: _propTypes["default"].bool,
|
|
32
|
+
spacing: _propTypes["default"].bool,
|
|
33
|
+
hover: _propTypes["default"].bool
|
|
23
34
|
};
|
package/hooks/index.js
CHANGED
|
@@ -13,4 +13,15 @@ Object.keys(_useScreenDimentions).forEach(function (key) {
|
|
|
13
13
|
return _useScreenDimentions[key];
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
|
+
});
|
|
17
|
+
var _useAutocomplete = require("./useAutocomplete");
|
|
18
|
+
Object.keys(_useAutocomplete).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _useAutocomplete[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _useAutocomplete[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
16
27
|
});
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useAutocomplete = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
9
|
+
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."); }
|
|
10
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
12
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
14
|
+
/**
|
|
15
|
+
* Hook para manejar la lógica de Autocomplete
|
|
16
|
+
* @param {Object} options
|
|
17
|
+
* @param {number} options.debounceMs - Tiempo de debounce en ms (default 300)
|
|
18
|
+
* @param {Function} options.onSearch - Callback cuando el usuario escribe (recibe el valor, debe retornar promesa con data)
|
|
19
|
+
* @param {number} options.minChars - Caracteres mínimos para disparar búsqueda (default 1)
|
|
20
|
+
* @returns {Object} - { value, setValue, data, isLoading, handleChange, handleSelect }
|
|
21
|
+
*/
|
|
22
|
+
var useAutocomplete = exports.useAutocomplete = function useAutocomplete() {
|
|
23
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
24
|
+
_ref$debounceMs = _ref.debounceMs,
|
|
25
|
+
debounceMs = _ref$debounceMs === void 0 ? 300 : _ref$debounceMs,
|
|
26
|
+
_ref$onSearch = _ref.onSearch,
|
|
27
|
+
onSearch = _ref$onSearch === void 0 ? null : _ref$onSearch,
|
|
28
|
+
_ref$minChars = _ref.minChars,
|
|
29
|
+
minChars = _ref$minChars === void 0 ? 1 : _ref$minChars;
|
|
30
|
+
var _useState = (0, _react.useState)(''),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
value = _useState2[0],
|
|
33
|
+
setValue = _useState2[1];
|
|
34
|
+
var _useState3 = (0, _react.useState)([]),
|
|
35
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
36
|
+
data = _useState4[0],
|
|
37
|
+
setData = _useState4[1];
|
|
38
|
+
var _useState5 = (0, _react.useState)(false),
|
|
39
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
40
|
+
isLoading = _useState6[0],
|
|
41
|
+
setIsLoading = _useState6[1];
|
|
42
|
+
var debounceTimerId = (0, _react.useRef)(null);
|
|
43
|
+
var handleChange = (0, _react.useCallback)(function (newValue) {
|
|
44
|
+
setValue(newValue);
|
|
45
|
+
|
|
46
|
+
// Limpiar timer anterior
|
|
47
|
+
if (debounceTimerId.current) {
|
|
48
|
+
clearTimeout(debounceTimerId.current);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Si no hay callback, no hacer nada
|
|
52
|
+
if (!onSearch) {
|
|
53
|
+
setData([]);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Si no hay suficientes caracteres, limpiar resultados
|
|
58
|
+
if (newValue.trim().length < minChars) {
|
|
59
|
+
setData([]);
|
|
60
|
+
setIsLoading(false);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Debounce: esperar antes de buscar
|
|
65
|
+
debounceTimerId.current = setTimeout(function () {
|
|
66
|
+
setIsLoading(true);
|
|
67
|
+
|
|
68
|
+
// Ejecutar búsqueda (esperamos que retorne promesa)
|
|
69
|
+
Promise.resolve(onSearch(newValue)).then(function (results) {
|
|
70
|
+
setData(Array.isArray(results) ? results : []);
|
|
71
|
+
setIsLoading(false);
|
|
72
|
+
})["catch"](function (error) {
|
|
73
|
+
console.error('Error en búsqueda de autocomplete:', error);
|
|
74
|
+
setData([]);
|
|
75
|
+
setIsLoading(false);
|
|
76
|
+
});
|
|
77
|
+
}, debounceMs);
|
|
78
|
+
}, [debounceMs, onSearch, minChars]);
|
|
79
|
+
var handleSelect = (0, _react.useCallback)(function (selectedItem) {
|
|
80
|
+
// El padre decide qué hacer con la selección
|
|
81
|
+
setValue('');
|
|
82
|
+
setData([]);
|
|
83
|
+
return selectedItem;
|
|
84
|
+
}, []);
|
|
85
|
+
|
|
86
|
+
// Limpiar timeout al desmontar
|
|
87
|
+
(0, _react.useEffect)(function () {
|
|
88
|
+
return function () {
|
|
89
|
+
if (debounceTimerId.current) {
|
|
90
|
+
clearTimeout(debounceTimerId.current);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
}, []);
|
|
94
|
+
return {
|
|
95
|
+
value: value,
|
|
96
|
+
setValue: setValue,
|
|
97
|
+
data: data,
|
|
98
|
+
setData: setData,
|
|
99
|
+
isLoading: isLoading,
|
|
100
|
+
handleChange: handleChange,
|
|
101
|
+
handleSelect: handleSelect
|
|
102
|
+
};
|
|
103
|
+
};
|
package/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.BoxDefault = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Box = require("../../components/box/Box");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var _default = exports["default"] = {
|
|
11
|
+
title: 'Layout/Box',
|
|
12
|
+
component: _Box.Box,
|
|
13
|
+
parameters: {
|
|
14
|
+
layout: 'centered'
|
|
15
|
+
},
|
|
16
|
+
tags: ['autodocs']
|
|
17
|
+
};
|
|
18
|
+
var BoxDefault = exports.BoxDefault = {
|
|
19
|
+
args: {
|
|
20
|
+
color: 'primary',
|
|
21
|
+
open: true,
|
|
22
|
+
collapsible: true,
|
|
23
|
+
isLoading: false
|
|
24
|
+
},
|
|
25
|
+
render: function render(args) {
|
|
26
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
27
|
+
style: {
|
|
28
|
+
width: '400px'
|
|
29
|
+
}
|
|
30
|
+
}, /*#__PURE__*/_react["default"].createElement(_Box.Box, args, /*#__PURE__*/_react["default"].createElement(_Box.BoxHeader, null, "Box Header"), /*#__PURE__*/_react["default"].createElement(_Box.BoxContent, null, "The content of the box goes here. ", /*#__PURE__*/_react["default"].createElement("br", null), "The content of the box goes here. ", /*#__PURE__*/_react["default"].createElement("br", null), "The content of the box goes here. ", /*#__PURE__*/_react["default"].createElement("br", null))));
|
|
31
|
+
}
|
|
32
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.BoxDefault = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Box = require("../../components/box/Box");
|
|
9
|
+
var _components = require("../../components");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
var _default = exports["default"] = {
|
|
12
|
+
title: 'Editable/Editable',
|
|
13
|
+
component: _components.Editable,
|
|
14
|
+
parameters: {
|
|
15
|
+
layout: 'centered'
|
|
16
|
+
},
|
|
17
|
+
tags: ['autodocs']
|
|
18
|
+
};
|
|
19
|
+
var BoxDefault = exports.BoxDefault = {
|
|
20
|
+
args: {
|
|
21
|
+
placeHolder: 'Click to edit'
|
|
22
|
+
},
|
|
23
|
+
render: function render(args) {
|
|
24
|
+
return /*#__PURE__*/_react["default"].createElement(_components.Editable, args, "Hola mundo");
|
|
25
|
+
}
|
|
26
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.BoxDefault = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Box = require("../../components/box/Box");
|
|
9
|
+
var _components = require("../../components");
|
|
10
|
+
var _HTMLEditor = _interopRequireDefault(require("../../components/editor/HTMLEditor"));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
var _default = exports["default"] = {
|
|
13
|
+
title: 'Editable/HTMLEditor',
|
|
14
|
+
component: _HTMLEditor["default"],
|
|
15
|
+
parameters: {
|
|
16
|
+
layout: 'centered'
|
|
17
|
+
},
|
|
18
|
+
tags: ['autodocs']
|
|
19
|
+
};
|
|
20
|
+
var BoxDefault = exports.BoxDefault = {
|
|
21
|
+
args: {
|
|
22
|
+
content: 'Click to edit',
|
|
23
|
+
error: undefined,
|
|
24
|
+
height: 200
|
|
25
|
+
},
|
|
26
|
+
render: function render(args) {
|
|
27
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
28
|
+
style: {
|
|
29
|
+
width: '600px'
|
|
30
|
+
}
|
|
31
|
+
}, /*#__PURE__*/_react["default"].createElement(_HTMLEditor["default"], args));
|
|
32
|
+
}
|
|
33
|
+
};
|