siam-ui-utils 3.1.0 → 3.1.2
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/dist/CustomBootstrap.js +9 -9
- package/dist/_virtual/_commonjsHelpers.js +7 -7
- package/dist/_virtual/events.js +6 -6
- package/dist/_virtual/events2.js +5 -5
- package/dist/_virtual/index.js +8 -8
- package/dist/_virtual/index2.js +5 -5
- package/dist/assets/img/copiar.png.js +5 -5
- package/dist/assets/img/take-photo.jpg.js +5 -5
- package/dist/constants.js +9 -9
- package/dist/copy-link/index.js +60 -60
- package/dist/copy-link/styles.css +37 -37
- package/dist/custom-input/CustomInputCheckbox.js +37 -37
- package/dist/custom-input/CustomInputCurrency.js +84 -84
- package/dist/custom-input/CustomInputFile.js +47 -47
- package/dist/custom-input/CustomInputRadio.js +68 -68
- package/dist/custom-input/constant.js +5 -5
- package/dist/custom-input/index.js +12 -12
- package/dist/drag-and-dropzone/DropzoneComponent.js +83 -83
- package/dist/drag-and-dropzone/config.js +59 -59
- package/dist/drag-and-dropzone/index.js +39 -39
- package/dist/dropzone/Input.js +77 -77
- package/dist/dropzone/Layout.js +50 -50
- package/dist/dropzone/Preview.js +117 -117
- package/dist/dropzone/SubmitButton.js +34 -34
- package/dist/dropzone/assets/cancel.svg.js +5 -5
- package/dist/dropzone/assets/remove.svg.js +5 -5
- package/dist/dropzone/assets/restart.svg.js +5 -5
- package/dist/dropzone/index.js +514 -514
- package/dist/dropzone/utils.js +93 -93
- package/dist/dropzone-uploader/base/index.js +135 -135
- package/dist/dropzone-uploader/index.js +7 -7
- package/dist/dropzone-uploader/styled/index.js +148 -148
- package/dist/iconos/constants-svg.js +666 -666
- package/dist/iconos/icon-button-svg.js +50 -50
- package/dist/iconos/index.js +24 -24
- package/dist/iconos/styled-icon.js +26 -26
- package/dist/index.js +4 -4
- package/dist/intl-messages/index.js +11 -11
- package/dist/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js +8 -8
- package/dist/node_modules/@babel/runtime/helpers/esm/extends.js +13 -13
- package/dist/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js +8 -8
- package/dist/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js +13 -13
- package/dist/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js +9 -9
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Badge.js +77 -0
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Badge.js.map +1 -0
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Button.js +111 -111
- package/dist/node_modules/@neolution-ch/reactstrap/esm/CloseButton.js +106 -106
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Col.js +125 -125
- package/dist/node_modules/@neolution-ch/reactstrap/esm/FormGroup.js +75 -75
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Input.js +225 -225
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Label.js +122 -122
- package/dist/node_modules/@neolution-ch/reactstrap/esm/Row.js +83 -83
- package/dist/node_modules/@neolution-ch/reactstrap/esm/utils.js +68 -68
- package/dist/node_modules/classnames/index.js +62 -62
- package/dist/node_modules/dom-helpers/esm/addClass.js +10 -10
- package/dist/node_modules/dom-helpers/esm/hasClass.js +8 -8
- package/dist/node_modules/dom-helpers/esm/removeClass.js +16 -16
- package/dist/node_modules/dropzone/dist/dropzone.js +1968 -1968
- package/dist/node_modules/events/events.js +372 -372
- package/dist/node_modules/just-extend/index.esm.js +43 -43
- package/dist/node_modules/react-transition-group/esm/CSSTransition.js +275 -275
- package/dist/node_modules/react-transition-group/esm/Transition.js +441 -441
- package/dist/node_modules/react-transition-group/esm/TransitionGroup.js +146 -146
- package/dist/node_modules/react-transition-group/esm/TransitionGroupContext.js +6 -6
- package/dist/node_modules/react-transition-group/esm/config.js +7 -7
- package/dist/node_modules/react-transition-group/esm/utils/ChildMapping.js +100 -100
- package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js +24 -24
- package/dist/node_modules/react-transition-group/esm/utils/reflow.js +7 -7
- package/dist/react-notifications/Notification.js +73 -73
- package/dist/react-notifications/NotificationContainer.js +59 -59
- package/dist/react-notifications/NotificationManager.js +174 -174
- package/dist/react-notifications/Notifications.js +72 -72
- package/dist/react-notifications/constants.js +26 -26
- package/dist/react-notifications/index.js +11 -11
- package/dist/select/custom-select/constants.js +8 -8
- package/dist/select/custom-select/index.js +89 -89
- package/dist/select/custom-select-input/index.js +12 -12
- package/dist/select/index.js +9 -9
- package/dist/select/multi-select/badge-label-multi-select.js +29 -29
- package/dist/select/multi-select/index.css +36 -36
- package/dist/select/multi-select/index.js +171 -171
- package/dist/select/multi-select/index.js.map +1 -1
- package/dist/select/multi-select/styled-component.js +23 -23
- package/dist/select/multi-select/styled-component.js.map +1 -1
- package/dist/timer/index.js +60 -60
- package/dist/timer/styles.css +58 -58
- package/dist/tomar-foto/index.js +62 -62
- package/dist/view-layout/button-editor.js +14 -14
- package/dist/view-layout/constants.js +11 -11
- package/dist/view-layout/editor-layer.js +28 -28
- package/dist/view-layout/index.js +53 -53
- package/dist/view-layout/slot-wrapper.js +39 -39
- package/dist/view-layout/styles.css +126 -126
- package/dist/where-by-room/index.js +20 -20
- package/dist/where-by-room/room.js +78 -78
- package/package.json +1 -4
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Component, createRef } from "react";
|
|
3
|
-
import PropTypes from "prop-types";
|
|
4
|
-
import classnames from "../_virtual/index.js";
|
|
5
|
-
import Notification from "./Notification.js";
|
|
6
|
-
import TransitionGroup from "../node_modules/react-transition-group/esm/TransitionGroup.js";
|
|
7
|
-
import CSSTransition from "../node_modules/react-transition-group/esm/CSSTransition.js";
|
|
8
|
-
class Notifications extends Component {
|
|
9
|
-
constructor(props) {
|
|
10
|
-
super(props);
|
|
11
|
-
this.nodeRefs = {};
|
|
12
|
-
}
|
|
13
|
-
handleRequestHide = (notification) => () => {
|
|
14
|
-
const { onRequestHide } = this.props;
|
|
15
|
-
if (onRequestHide) {
|
|
16
|
-
onRequestHide(notification);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
getNodeRef = (key) => {
|
|
20
|
-
if (!this.nodeRefs[key]) {
|
|
21
|
-
this.nodeRefs[key] = createRef();
|
|
22
|
-
}
|
|
23
|
-
return this.nodeRefs[key];
|
|
24
|
-
};
|
|
25
|
-
render() {
|
|
26
|
-
const {
|
|
27
|
-
notifications = [],
|
|
28
|
-
enterTimeout = 400,
|
|
29
|
-
leaveTimeout = 400
|
|
30
|
-
} = this.props;
|
|
31
|
-
const className = classnames("notification-container", {
|
|
32
|
-
"notification-container-empty": notifications.length === 0
|
|
33
|
-
});
|
|
34
|
-
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TransitionGroup, { children: notifications.map((notification) => {
|
|
35
|
-
const key = notification.id || (/* @__PURE__ */ new Date()).getTime();
|
|
36
|
-
const nodeRef = this.getNodeRef(key);
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
-
CSSTransition,
|
|
39
|
-
{
|
|
40
|
-
classNames: "notification",
|
|
41
|
-
timeout: { exit: leaveTimeout, enter: enterTimeout },
|
|
42
|
-
nodeRef,
|
|
43
|
-
children: /* @__PURE__ */ jsx(
|
|
44
|
-
Notification,
|
|
45
|
-
{
|
|
46
|
-
ref: nodeRef,
|
|
47
|
-
type: notification.type,
|
|
48
|
-
title: notification.title,
|
|
49
|
-
message: notification.message,
|
|
50
|
-
timeOut: notification.timeOut,
|
|
51
|
-
onClick: notification.onClick,
|
|
52
|
-
onRequestHide: this.handleRequestHide(notification),
|
|
53
|
-
customClassName: notification.customClassName
|
|
54
|
-
},
|
|
55
|
-
key
|
|
56
|
-
)
|
|
57
|
-
},
|
|
58
|
-
key
|
|
59
|
-
);
|
|
60
|
-
}) }) });
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
Notifications.propTypes = {
|
|
64
|
-
notifications: PropTypes.array,
|
|
65
|
-
onRequestHide: PropTypes.func,
|
|
66
|
-
enterTimeout: PropTypes.number,
|
|
67
|
-
leaveTimeout: PropTypes.number
|
|
68
|
-
};
|
|
69
|
-
export {
|
|
70
|
-
Notifications as default
|
|
71
|
-
};
|
|
72
|
-
//# sourceMappingURL=Notifications.js.map
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Component, createRef } from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import classnames from "../_virtual/index.js";
|
|
5
|
+
import Notification from "./Notification.js";
|
|
6
|
+
import TransitionGroup from "../node_modules/react-transition-group/esm/TransitionGroup.js";
|
|
7
|
+
import CSSTransition from "../node_modules/react-transition-group/esm/CSSTransition.js";
|
|
8
|
+
class Notifications extends Component {
|
|
9
|
+
constructor(props) {
|
|
10
|
+
super(props);
|
|
11
|
+
this.nodeRefs = {};
|
|
12
|
+
}
|
|
13
|
+
handleRequestHide = (notification) => () => {
|
|
14
|
+
const { onRequestHide } = this.props;
|
|
15
|
+
if (onRequestHide) {
|
|
16
|
+
onRequestHide(notification);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
getNodeRef = (key) => {
|
|
20
|
+
if (!this.nodeRefs[key]) {
|
|
21
|
+
this.nodeRefs[key] = createRef();
|
|
22
|
+
}
|
|
23
|
+
return this.nodeRefs[key];
|
|
24
|
+
};
|
|
25
|
+
render() {
|
|
26
|
+
const {
|
|
27
|
+
notifications = [],
|
|
28
|
+
enterTimeout = 400,
|
|
29
|
+
leaveTimeout = 400
|
|
30
|
+
} = this.props;
|
|
31
|
+
const className = classnames("notification-container", {
|
|
32
|
+
"notification-container-empty": notifications.length === 0
|
|
33
|
+
});
|
|
34
|
+
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TransitionGroup, { children: notifications.map((notification) => {
|
|
35
|
+
const key = notification.id || (/* @__PURE__ */ new Date()).getTime();
|
|
36
|
+
const nodeRef = this.getNodeRef(key);
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
CSSTransition,
|
|
39
|
+
{
|
|
40
|
+
classNames: "notification",
|
|
41
|
+
timeout: { exit: leaveTimeout, enter: enterTimeout },
|
|
42
|
+
nodeRef,
|
|
43
|
+
children: /* @__PURE__ */ jsx(
|
|
44
|
+
Notification,
|
|
45
|
+
{
|
|
46
|
+
ref: nodeRef,
|
|
47
|
+
type: notification.type,
|
|
48
|
+
title: notification.title,
|
|
49
|
+
message: notification.message,
|
|
50
|
+
timeOut: notification.timeOut,
|
|
51
|
+
onClick: notification.onClick,
|
|
52
|
+
onRequestHide: this.handleRequestHide(notification),
|
|
53
|
+
customClassName: notification.customClassName
|
|
54
|
+
},
|
|
55
|
+
key
|
|
56
|
+
)
|
|
57
|
+
},
|
|
58
|
+
key
|
|
59
|
+
);
|
|
60
|
+
}) }) });
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
Notifications.propTypes = {
|
|
64
|
+
notifications: PropTypes.array,
|
|
65
|
+
onRequestHide: PropTypes.func,
|
|
66
|
+
enterTimeout: PropTypes.number,
|
|
67
|
+
leaveTimeout: PropTypes.number
|
|
68
|
+
};
|
|
69
|
+
export {
|
|
70
|
+
Notifications as default
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=Notifications.js.map
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
const TYPES = {
|
|
2
|
-
CHANGE: "change",
|
|
3
|
-
ERROR: "error",
|
|
4
|
-
INFO: "info",
|
|
5
|
-
PRIMARY: "primary",
|
|
6
|
-
SECONDARY: "secondary",
|
|
7
|
-
SUCCESS: "success",
|
|
8
|
-
WARNING: "warning"
|
|
9
|
-
};
|
|
10
|
-
const TITLES = {
|
|
11
|
-
AVISO: "AVISO",
|
|
12
|
-
ERROR: "ERROR",
|
|
13
|
-
EXITO: "EXITO",
|
|
14
|
-
INFORMACION: "INFORMACION",
|
|
15
|
-
PRIMARIO: "PRIMARIO",
|
|
16
|
-
SECUNDARIO: "SECUNDARIO"
|
|
17
|
-
};
|
|
18
|
-
const DEFAULT_VALUES = {
|
|
19
|
-
TIMEOUT: 5e3
|
|
20
|
-
};
|
|
21
|
-
export {
|
|
22
|
-
DEFAULT_VALUES,
|
|
23
|
-
TITLES,
|
|
24
|
-
TYPES
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=constants.js.map
|
|
1
|
+
const TYPES = {
|
|
2
|
+
CHANGE: "change",
|
|
3
|
+
ERROR: "error",
|
|
4
|
+
INFO: "info",
|
|
5
|
+
PRIMARY: "primary",
|
|
6
|
+
SECONDARY: "secondary",
|
|
7
|
+
SUCCESS: "success",
|
|
8
|
+
WARNING: "warning"
|
|
9
|
+
};
|
|
10
|
+
const TITLES = {
|
|
11
|
+
AVISO: "AVISO",
|
|
12
|
+
ERROR: "ERROR",
|
|
13
|
+
EXITO: "EXITO",
|
|
14
|
+
INFORMACION: "INFORMACION",
|
|
15
|
+
PRIMARIO: "PRIMARIO",
|
|
16
|
+
SECUNDARIO: "SECUNDARIO"
|
|
17
|
+
};
|
|
18
|
+
const DEFAULT_VALUES = {
|
|
19
|
+
TIMEOUT: 5e3
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
DEFAULT_VALUES,
|
|
23
|
+
TITLES,
|
|
24
|
+
TYPES
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import "./notifications.css";
|
|
2
|
-
import Notifications from "./Notifications.js";
|
|
3
|
-
import { default as default2 } from "./NotificationContainer.js";
|
|
4
|
-
import { default as default3 } from "./NotificationManager.js";
|
|
5
|
-
export {
|
|
6
|
-
default2 as NotificationContainer,
|
|
7
|
-
default3 as NotificationManager,
|
|
8
|
-
Notifications,
|
|
9
|
-
Notifications as default
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import "./notifications.css";
|
|
2
|
+
import Notifications from "./Notifications.js";
|
|
3
|
+
import { default as default2 } from "./NotificationContainer.js";
|
|
4
|
+
import { default as default3 } from "./NotificationManager.js";
|
|
5
|
+
export {
|
|
6
|
+
default2 as NotificationContainer,
|
|
7
|
+
default3 as NotificationManager,
|
|
8
|
+
Notifications,
|
|
9
|
+
Notifications as default
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const LABELS = {
|
|
2
|
-
SIN_DATOS: "SIN DATOS",
|
|
3
|
-
SELECCIONE: "SELECCIONE..."
|
|
4
|
-
};
|
|
5
|
-
export {
|
|
6
|
-
LABELS
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=constants.js.map
|
|
1
|
+
const LABELS = {
|
|
2
|
+
SIN_DATOS: "SIN DATOS",
|
|
3
|
+
SELECCIONE: "SELECCIONE..."
|
|
4
|
+
};
|
|
5
|
+
export {
|
|
6
|
+
LABELS
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useEffect } from "react";
|
|
3
|
-
import Select from "react-select";
|
|
4
|
-
import Label from "../../node_modules/@neolution-ch/reactstrap/esm/Label.js";
|
|
5
|
-
import { CustomSelectInput } from "../custom-select-input/index.js";
|
|
6
|
-
import { LABELS } from "./constants.js";
|
|
7
|
-
const { SIN_DATOS, SELECCIONE } = LABELS;
|
|
8
|
-
const CustomSelect = (props) => {
|
|
9
|
-
const [firstElement] = useState(props.firstElement);
|
|
10
|
-
const [newItem] = useState(props.newItem);
|
|
11
|
-
const [selectedIoption, setIoption] = useState({});
|
|
12
|
-
const [customStylesOption] = useState(props.customStylesOption);
|
|
13
|
-
const [customStyles, setCustomStyles] = useState({});
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
if (newItem) {
|
|
16
|
-
props.options.push(newItem);
|
|
17
|
-
}
|
|
18
|
-
}, [newItem, props.options]);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const { options = [] } = props;
|
|
21
|
-
if (firstElement && Number(options?.length) > 1) {
|
|
22
|
-
const propIOption = options.filter((item) => item === firstElement);
|
|
23
|
-
if (propIOption?.length === 0) {
|
|
24
|
-
props.options.unshift(firstElement);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}, [firstElement, props.options]);
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
const { selectedValue } = props;
|
|
30
|
-
const errorProp = { value: null };
|
|
31
|
-
if (selectedValue || firstElement && firstElement.value === selectedValue) {
|
|
32
|
-
const propIOption = props.options.filter(({ value }) => {
|
|
33
|
-
return JSON.stringify(value) === JSON.stringify(selectedValue);
|
|
34
|
-
});
|
|
35
|
-
if (propIOption[0]) {
|
|
36
|
-
setIoption(propIOption[0]);
|
|
37
|
-
if (!Object.getOwnPropertyDescriptor(selectedIoption, "label")) {
|
|
38
|
-
props.onChange(propIOption[0]);
|
|
39
|
-
}
|
|
40
|
-
} else {
|
|
41
|
-
setIoption(errorProp);
|
|
42
|
-
props.onChange(errorProp);
|
|
43
|
-
}
|
|
44
|
-
} else if (props.options.length > 0) {
|
|
45
|
-
setIoption(errorProp);
|
|
46
|
-
props.onChange(errorProp);
|
|
47
|
-
}
|
|
48
|
-
}, [props.selectedValue, props.options, firstElement]);
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (customStylesOption) {
|
|
51
|
-
const stylesOption = {
|
|
52
|
-
option: (base, { data }) => {
|
|
53
|
-
return {
|
|
54
|
-
...base,
|
|
55
|
-
color: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "blue !important" : "",
|
|
56
|
-
fontWeight: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "bold" : ""
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
setCustomStyles(stylesOption);
|
|
61
|
-
}
|
|
62
|
-
}, [customStylesOption]);
|
|
63
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
64
|
-
props.label && props.label !== "" && /* @__PURE__ */ jsxs(Label, { className: "mb-0", children: [
|
|
65
|
-
props.label,
|
|
66
|
-
":"
|
|
67
|
-
] }),
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
69
|
-
Select,
|
|
70
|
-
{
|
|
71
|
-
...props,
|
|
72
|
-
components: { Input: CustomSelectInput },
|
|
73
|
-
className: "react-select",
|
|
74
|
-
classNamePrefix: "react-select",
|
|
75
|
-
name: "form-field-name",
|
|
76
|
-
value: Object.getOwnPropertyDescriptor(selectedIoption, "label") ? selectedIoption : "",
|
|
77
|
-
onChange: props.onChange,
|
|
78
|
-
options: props.options,
|
|
79
|
-
placeholder: Number(props.options.length) === 0 ? SIN_DATOS : props.placeholder || SELECCIONE,
|
|
80
|
-
isDisabled: props.disabled,
|
|
81
|
-
styles: customStyles
|
|
82
|
-
}
|
|
83
|
-
)
|
|
84
|
-
] });
|
|
85
|
-
};
|
|
86
|
-
export {
|
|
87
|
-
CustomSelect
|
|
88
|
-
};
|
|
89
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import Select from "react-select";
|
|
4
|
+
import Label from "../../node_modules/@neolution-ch/reactstrap/esm/Label.js";
|
|
5
|
+
import { CustomSelectInput } from "../custom-select-input/index.js";
|
|
6
|
+
import { LABELS } from "./constants.js";
|
|
7
|
+
const { SIN_DATOS, SELECCIONE } = LABELS;
|
|
8
|
+
const CustomSelect = (props) => {
|
|
9
|
+
const [firstElement] = useState(props.firstElement);
|
|
10
|
+
const [newItem] = useState(props.newItem);
|
|
11
|
+
const [selectedIoption, setIoption] = useState({});
|
|
12
|
+
const [customStylesOption] = useState(props.customStylesOption);
|
|
13
|
+
const [customStyles, setCustomStyles] = useState({});
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (newItem) {
|
|
16
|
+
props.options.push(newItem);
|
|
17
|
+
}
|
|
18
|
+
}, [newItem, props.options]);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const { options = [] } = props;
|
|
21
|
+
if (firstElement && Number(options?.length) > 1) {
|
|
22
|
+
const propIOption = options.filter((item) => item === firstElement);
|
|
23
|
+
if (propIOption?.length === 0) {
|
|
24
|
+
props.options.unshift(firstElement);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}, [firstElement, props.options]);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const { selectedValue } = props;
|
|
30
|
+
const errorProp = { value: null };
|
|
31
|
+
if (selectedValue || firstElement && firstElement.value === selectedValue) {
|
|
32
|
+
const propIOption = props.options.filter(({ value }) => {
|
|
33
|
+
return JSON.stringify(value) === JSON.stringify(selectedValue);
|
|
34
|
+
});
|
|
35
|
+
if (propIOption[0]) {
|
|
36
|
+
setIoption(propIOption[0]);
|
|
37
|
+
if (!Object.getOwnPropertyDescriptor(selectedIoption, "label")) {
|
|
38
|
+
props.onChange(propIOption[0]);
|
|
39
|
+
}
|
|
40
|
+
} else {
|
|
41
|
+
setIoption(errorProp);
|
|
42
|
+
props.onChange(errorProp);
|
|
43
|
+
}
|
|
44
|
+
} else if (props.options.length > 0) {
|
|
45
|
+
setIoption(errorProp);
|
|
46
|
+
props.onChange(errorProp);
|
|
47
|
+
}
|
|
48
|
+
}, [props.selectedValue, props.options, firstElement]);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (customStylesOption) {
|
|
51
|
+
const stylesOption = {
|
|
52
|
+
option: (base, { data }) => {
|
|
53
|
+
return {
|
|
54
|
+
...base,
|
|
55
|
+
color: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "blue !important" : "",
|
|
56
|
+
fontWeight: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "bold" : ""
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
setCustomStyles(stylesOption);
|
|
61
|
+
}
|
|
62
|
+
}, [customStylesOption]);
|
|
63
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
64
|
+
props.label && props.label !== "" && /* @__PURE__ */ jsxs(Label, { className: "mb-0", children: [
|
|
65
|
+
props.label,
|
|
66
|
+
":"
|
|
67
|
+
] }),
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
Select,
|
|
70
|
+
{
|
|
71
|
+
...props,
|
|
72
|
+
components: { Input: CustomSelectInput },
|
|
73
|
+
className: "react-select",
|
|
74
|
+
classNamePrefix: "react-select",
|
|
75
|
+
name: "form-field-name",
|
|
76
|
+
value: Object.getOwnPropertyDescriptor(selectedIoption, "label") ? selectedIoption : "",
|
|
77
|
+
onChange: props.onChange,
|
|
78
|
+
options: props.options,
|
|
79
|
+
placeholder: Number(props.options.length) === 0 ? SIN_DATOS : props.placeholder || SELECCIONE,
|
|
80
|
+
isDisabled: props.disabled,
|
|
81
|
+
styles: customStyles
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
] });
|
|
85
|
+
};
|
|
86
|
+
export {
|
|
87
|
+
CustomSelect
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { components } from "react-select";
|
|
3
|
-
const CustomSelectInput = (props) => {
|
|
4
|
-
const customProps = { ...props };
|
|
5
|
-
delete customProps.autoCorrect;
|
|
6
|
-
delete customProps.autoCapitalize;
|
|
7
|
-
return /* @__PURE__ */ jsx(components.Input, { ...customProps });
|
|
8
|
-
};
|
|
9
|
-
export {
|
|
10
|
-
CustomSelectInput
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { components } from "react-select";
|
|
3
|
+
const CustomSelectInput = (props) => {
|
|
4
|
+
const customProps = { ...props };
|
|
5
|
+
delete customProps.autoCorrect;
|
|
6
|
+
delete customProps.autoCapitalize;
|
|
7
|
+
return /* @__PURE__ */ jsx(components.Input, { ...customProps });
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
CustomSelectInput
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
package/dist/select/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { CustomSelect } from "./custom-select/index.js";
|
|
2
|
-
import { CustomMultiSelect } from "./multi-select/index.js";
|
|
3
|
-
import { CustomSelectInput } from "./custom-select-input/index.js";
|
|
4
|
-
export {
|
|
5
|
-
CustomMultiSelect,
|
|
6
|
-
CustomSelect,
|
|
7
|
-
CustomSelectInput
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { CustomSelect } from "./custom-select/index.js";
|
|
2
|
+
import { CustomMultiSelect } from "./multi-select/index.js";
|
|
3
|
+
import { CustomSelectInput } from "./custom-select-input/index.js";
|
|
4
|
+
export {
|
|
5
|
+
CustomMultiSelect,
|
|
6
|
+
CustomSelect,
|
|
7
|
+
CustomSelectInput
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { toCamelCase } from "siam-utils";
|
|
3
|
-
import { ClickableBadge } from "./styled-component.js";
|
|
4
|
-
const BadgeLabelMultiSelect = ({
|
|
5
|
-
descripcionLabel = [],
|
|
6
|
-
onRemove = () => {
|
|
7
|
-
}
|
|
8
|
-
}) => {
|
|
9
|
-
const getBadgeColor = (value) => {
|
|
10
|
-
return value.color || "dark";
|
|
11
|
-
};
|
|
12
|
-
return /* @__PURE__ */ jsx(Fragment, { children: descripcionLabel.map((item) => /* @__PURE__ */ jsxs(
|
|
13
|
-
ClickableBadge,
|
|
14
|
-
{
|
|
15
|
-
color: getBadgeColor(item),
|
|
16
|
-
pill: true,
|
|
17
|
-
onClick: () => onRemove(item.value),
|
|
18
|
-
children: [
|
|
19
|
-
toCamelCase(item.label),
|
|
20
|
-
" ×"
|
|
21
|
-
]
|
|
22
|
-
},
|
|
23
|
-
item.value
|
|
24
|
-
)) });
|
|
25
|
-
};
|
|
26
|
-
export {
|
|
27
|
-
BadgeLabelMultiSelect as default
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=badge-label-multi-select.js.map
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { toCamelCase } from "siam-utils";
|
|
3
|
+
import { ClickableBadge } from "./styled-component.js";
|
|
4
|
+
const BadgeLabelMultiSelect = ({
|
|
5
|
+
descripcionLabel = [],
|
|
6
|
+
onRemove = () => {
|
|
7
|
+
}
|
|
8
|
+
}) => {
|
|
9
|
+
const getBadgeColor = (value) => {
|
|
10
|
+
return value.color || "dark";
|
|
11
|
+
};
|
|
12
|
+
return /* @__PURE__ */ jsx(Fragment, { children: descripcionLabel.map((item) => /* @__PURE__ */ jsxs(
|
|
13
|
+
ClickableBadge,
|
|
14
|
+
{
|
|
15
|
+
color: getBadgeColor(item),
|
|
16
|
+
pill: true,
|
|
17
|
+
onClick: () => onRemove(item.value),
|
|
18
|
+
children: [
|
|
19
|
+
toCamelCase(item.label),
|
|
20
|
+
" ×"
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
item.value
|
|
24
|
+
)) });
|
|
25
|
+
};
|
|
26
|
+
export {
|
|
27
|
+
BadgeLabelMultiSelect as default
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=badge-label-multi-select.js.map
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
.multiselect-checkbox-option .custom-checkbox {
|
|
2
|
-
margin-bottom: 0;
|
|
3
|
-
}
|
|
4
|
-
.multiselect-checkbox-option .custom-checkbox input[type=checkbox] + label {
|
|
5
|
-
line-height: 1.2 !important;
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
padding-left: 1.75rem;
|
|
9
|
-
}
|
|
10
|
-
.multiselect-checkbox-option .custom-checkbox input[type=checkbox] + label::before {
|
|
11
|
-
top: 50%;
|
|
12
|
-
transform: translateY(-50%);
|
|
13
|
-
}
|
|
14
|
-
.multiselect-checkbox-option .custom-checkbox input[type=checkbox]:checked + label::after {
|
|
15
|
-
top: 50%;
|
|
16
|
-
transform: translateY(-65%) rotate(45deg);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.custom-multiselect__control {
|
|
20
|
-
min-height: 38px;
|
|
21
|
-
border-color: #ccc;
|
|
22
|
-
}
|
|
23
|
-
.custom-multiselect__control:hover {
|
|
24
|
-
border-color: #900604;
|
|
25
|
-
}
|
|
26
|
-
.custom-multiselect__control--is-focused {
|
|
27
|
-
border-color: #900604;
|
|
28
|
-
box-shadow: 0 0 0 1px #900604;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.dropdown-heading-value {
|
|
32
|
-
color: green;
|
|
33
|
-
height: 2rem;
|
|
34
|
-
display: inline;
|
|
35
|
-
font-weight: bold;
|
|
36
|
-
padding: 0.4rem;
|
|
1
|
+
.multiselect-checkbox-option .custom-checkbox {
|
|
2
|
+
margin-bottom: 0;
|
|
3
|
+
}
|
|
4
|
+
.multiselect-checkbox-option .custom-checkbox input[type=checkbox] + label {
|
|
5
|
+
line-height: 1.2 !important;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
padding-left: 1.75rem;
|
|
9
|
+
}
|
|
10
|
+
.multiselect-checkbox-option .custom-checkbox input[type=checkbox] + label::before {
|
|
11
|
+
top: 50%;
|
|
12
|
+
transform: translateY(-50%);
|
|
13
|
+
}
|
|
14
|
+
.multiselect-checkbox-option .custom-checkbox input[type=checkbox]:checked + label::after {
|
|
15
|
+
top: 50%;
|
|
16
|
+
transform: translateY(-65%) rotate(45deg);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.custom-multiselect__control {
|
|
20
|
+
min-height: 38px;
|
|
21
|
+
border-color: #ccc;
|
|
22
|
+
}
|
|
23
|
+
.custom-multiselect__control:hover {
|
|
24
|
+
border-color: #900604;
|
|
25
|
+
}
|
|
26
|
+
.custom-multiselect__control--is-focused {
|
|
27
|
+
border-color: #900604;
|
|
28
|
+
box-shadow: 0 0 0 1px #900604;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dropdown-heading-value {
|
|
32
|
+
color: green;
|
|
33
|
+
height: 2rem;
|
|
34
|
+
display: inline;
|
|
35
|
+
font-weight: bold;
|
|
36
|
+
padding: 0.4rem;
|
|
37
37
|
}
|