@arquimedes.co/eureka-forms 2.0.61-test → 2.0.62-test

package/dist/Shared/RoundedTimePicker/RoundedTimePicker.js

@@ -0,0 +1,293 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import Select from '@material-ui/core/Select';
+import { ClickAwayListener, FormHelperText, MenuItem, Popper, } from '@material-ui/core';
+import ScheduleRoundedIcon from '@material-ui/icons/ScheduleRounded';
+import styles from './RoundedTimePicker.module.css';
+import RoundedTextField from '../RoundedTextField/RoundedTextField';
+import Toggle from '../Toggle/Toggle';
+var useStyles = makeStyles(function (theme) { return ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}); });
+var useOutlinedInputStyles = function (props) {
+    var _a;
+    return makeStyles({
+        root: {
+            cursor: props.cantEdit ? 'default' : 'default',
+            height: props.height,
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
+            fontSize: props.fontSize,
+            '& $notchedOutline': {
+                borderColor: props.outlineColor,
+                '& legend': {
+                    fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                },
+            },
+            '&:hover $notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& .Mui-disabled': {
+                cursor: 'default',
+                color: props.color,
+                pointerEvents: 'none',
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '&.Mui-disabled .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '& .EF-MuiSelect-root': {
+                paddingLeft: props.paddingLeft,
+                paddingRight: props.paddingRight,
+            },
+            '&$focused $notchedOutline': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiSelect-icon': {
+                color: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '8a'
+                    : props.color,
+            },
+            '& .EF-MuiSelect-icon.Mui-disabled': {
+                color: props.outlineColor,
+            },
+            '& .EF-MuiSelect-icon.iconOutlined': {
+                right: 8,
+            },
+            '& .EF-MuiSelect-iconOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
+            color: props.color,
+        },
+        focused: {},
+        notchedOutline: {},
+    });
+};
+var useLabelInputStyles = function (props) {
+    return makeStyles(function () {
+        var _a;
+        return ({
+            focused: {
+                color: props.focusColor + ' !important',
+            },
+            root: {
+                color: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '8a'
+                    : props.color,
+                fontWeight: props.fontWeight,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                maxWidth: 'calc(100% - 45px)',
+                textOverflow: 'ellipsis',
+                marginTop: props.height != '40px' ? '-4px' : '0px',
+                '&.EF-MuiInputLabel-shrink': {
+                    marginTop: '0px',
+                    maxWidth: 'calc(100% - 5px)',
+                },
+                '& .Mui-error': {
+                    color: props.errorColor,
+                },
+                '&.Mui-error': {
+                    color: props.errorColor,
+                },
+            },
+        });
+    });
+};
+var useHelperTextStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            color: props.helperTextColor,
+            '&.Mui-error': {
+                color: props.errorColor,
+            },
+        },
+    }); });
+};
+var useMenuStyles = function () {
+    return makeStyles(function () { return ({
+        root: {
+            '& .EF-MuiPaper-root': {
+                opacity: '0 !important',
+            },
+        },
+    }); });
+};
+function CustomSelect(_a) {
+    var _b, _c, _d;
+    var value = _a.value, onChange = _a.onChange, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _e = _a.color, color = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.focusColor, focusColor = _g === void 0 ? '#3d5a7f' : _g, _h = _a.outlineColor, outlineColor = _h === void 0 ? '#0000003b' : _h, _j = _a.helperTextColor, helperTextColor = _j === void 0 ? '#989898' : _j, _k = _a.backgroundColor, backgroundColor = _k === void 0 ? '#ffffff' : _k, _l = _a.readOnly, readOnly = _l === void 0 ? false : _l, _m = _a.borderRadius, borderRadius = _m === void 0 ? 10 : _m, _o = _a.paddingLeft, paddingLeft = _o === void 0 ? 14 : _o, _p = _a.paddingRight, paddingRight = _p === void 0 ? 32 : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, _r = _a.containerMargin, containerMargin = _r === void 0 ? '8px' : _r, _s = _a.height, height = _s === void 0 ? '40px' : _s, _t = _a.fontSize, fontSize = _t === void 0 ? '1rem' : _t, required = _a.required, error = _a.error, pickDays = _a.pickDays, pickMinutes = _a.pickMinutes, pickHours = _a.pickHours, working = _a.working, others = __rest(_a, ["value", "onChange", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "paddingLeft", "paddingRight", "cantEdit", "containerMargin", "height", "fontSize", "required", "error", "pickDays", "pickMinutes", "pickHours", "working"]);
+    var StyleProps = {
+        color: color,
+        height: height,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        cantEdit: cantEdit,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        paddingLeft: paddingLeft,
+        paddingRight: paddingRight,
+        outlineColor: outlineColor,
+        borderRadius: borderRadius,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        showIcon: true,
+    };
+    var classes = useStyles();
+    var outlinedInputClasses = useOutlinedInputStyles(StyleProps)();
+    var labelClasses = useLabelInputStyles(StyleProps)();
+    var helperTextClasses = useHelperTextStyles(StyleProps)();
+    var menuClasses = useMenuStyles()();
+    var _u = useState(false), open = _u[0], setOpen = _u[1];
+    var ref = React.useRef(null);
+    var handleChange = useCallback(function (value) {
+        if (value.days === 0) {
+            delete value.days;
+        }
+        if (value.hours === 0) {
+            delete value.hours;
+        }
+        if (value.minutes === 0) {
+            delete value.minutes;
+        }
+        if (working !== undefined) {
+            value.working = working;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, []);
+    var calcLabel = function () {
+        var parts = [label];
+        if (working === true)
+            parts.push('(Hábil)');
+        if (required)
+            parts.push('*');
+        return parts.join(' ');
+    };
+    return (_jsxs(React.Fragment, { children: [open && (_jsx(ClickAwayListener, __assign({ mouseEvent: "onMouseDown", onClickAway: function () { return setOpen(false); } }, { children: _jsx(Popper, __assign({ open: true, anchorEl: ref.current, placement: 'bottom-start', modifiers: {
+                        preventOverflow: {
+                            enabled: true,
+                            priority: ['top', 'bottom', 'left', 'right'],
+                            boundariesElement: 'window',
+                            padding: 20,
+                        },
+                    }, style: { zIndex: 1301 } }, { children: _jsxs("div", __assign({ className: styles.container }, { children: [pickDays && (_jsx("div", __assign({ className: styles.numberPickerContainer }, { children: _jsx(RoundedTextField, { label: "D\u00EDas", type: "number", inputProps: { min: 0 }, value: ((_b = value === null || value === void 0 ? void 0 : value.days) !== null && _b !== void 0 ? _b : '0') + '', onChange: function (e) {
+                                        handleChange(__assign(__assign({}, value), { days: parseInt(e.target.value) }));
+                                    } }) }))), pickHours && (_jsx("div", __assign({ className: styles.numberPickerContainer }, { children: _jsx(RoundedTextField, { label: "Horas", type: "number", inputProps: { min: 0 }, value: ((_c = value === null || value === void 0 ? void 0 : value.hours) !== null && _c !== void 0 ? _c : '0') + '', onChange: function (e) {
+                                        handleChange(__assign(__assign({}, value), { hours: parseInt(e.target.value) }));
+                                    } }) }))), pickMinutes && (_jsx("div", __assign({ className: styles.numberPickerContainer }, { children: _jsx(RoundedTextField, { label: "Minutos", type: "number", inputProps: { min: 0 }, value: ((_d = value === null || value === void 0 ? void 0 : value.minutes) !== null && _d !== void 0 ? _d : '0') + '', onChange: function (e) {
+                                        handleChange(__assign(__assign({}, value), { minutes: parseInt(e.target.value) }));
+                                    } }) }))), working === undefined && (_jsxs("div", __assign({ className: styles.workingContainer }, { children: ["H\u00E1biles:", _jsx(Toggle, { checked: !!(value === null || value === void 0 ? void 0 : value.working), disabled: working !== undefined, onChange: function (working) {
+                                            handleChange(__assign(__assign({}, value), { working: working }));
+                                        } })] })))] })) })) }))), _jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
+                    ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
+                    : {
+                        margin: containerMargin,
+                    }, fullWidth: true, required: required, error: error }, { children: [label && (_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }))), _jsx(Select, __assign({}, others, { innerRef: ref, title: calcTimeString(value), value: value ? 0 : '', IconComponent: ScheduleRoundedIcon, onClose: function () {
+                            setOpen(false);
+                        }, onOpen: function () {
+                            setOpen(true);
+                        }, onFocus: function (e) {
+                            var _a;
+                            if (!((_a = e.relatedTarget) === null || _a === void 0 ? void 0 : _a.closest('.EF-MuiPaper-root'))) {
+                                setOpen(true);
+                            }
+                        }, onBlur: function () {
+                            setOpen(false);
+                        }, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? calcLabel() : undefined, classes: outlinedInputClasses }), renderValue: function () {
+                            return calcTimeString(value);
+                        }, MenuProps: {
+                            PopoverClasses: menuClasses,
+                        } }, { children: _jsx(MenuItem, { value: 0 }) })), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText })))] }))] }));
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+var RoundedTimePicker = /** @class */ (function (_super) {
+    __extends(RoundedTimePicker, _super);
+    function RoundedTimePicker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RoundedTimePicker.prototype.render = function () {
+        return _jsx(CustomSelect, __assign({}, this.props));
+    };
+    return RoundedTimePicker;
+}(React.Component));
+export default RoundedTimePicker;
+function calcTimeString(value) {
+    if (!value)
+        return undefined;
+    var parts = [];
+    if (value.days) {
+        parts.push("".concat(value.days, " D\u00EDa").concat(value.days > 1 ? 's' : ''));
+    }
+    if (value.hours) {
+        parts.push("".concat(value.hours, " Hora").concat(value.hours > 1 ? 's' : ''));
+    }
+    if (value.minutes) {
+        parts.push("".concat(value.minutes, " Minuto").concat(value.minutes > 1 ? 's' : ''));
+    }
+    if (parts.length === 0)
+        return value.working ? 'Horario Hábil Más Cercano' : 'Inmediatamente';
+    if (value.working) {
+        var isMultiple = parts.length > 1 || parts[0].includes('s');
+        return parts.join(', ') + (isMultiple ? ' Hábiles' : ' Hábil');
+    }
+    return parts.join(', ');
+}

package/dist/Shared/RoundedTimePicker/RoundedTimePicker.module.css

@@ -0,0 +1,30 @@
+.container {
+    box-shadow:
+        0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+    background-color: white;
+    width: 130px;
+    padding: 30px 35px 30px 30px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.numberPickerContainer {
+    width: 130px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.workingContainer {
+    display: flex;
+    font-size: 1.1em;
+    margin-left: 5px;
+    flex-direction: row;
+    column-gap: 5px;
+    align-items: center;
+}

package/dist/Shared/Toggle/Toggle.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { SwitchProps } from '@material-ui/core';
+interface StyleProps {
+    /** The color of the toggle */
+    color?: string;
+    /** The color of the toggle when unchecked */
+    baseColor?: string;
+}
+interface RoundedToggleProps extends Omit<SwitchProps, 'color' | 'onChange'>, StyleProps {
+    /** If the toggle is checked */
+    checked?: boolean;
+    /** Function to call when the toggle is clicked on */
+    onChange: (checked: boolean) => void;
+    /** If the Toggle is disabled */
+    disabled?: boolean;
+}
+declare function RoundedToggle({ color, baseColor, checked, onChange, disabled, size, }: RoundedToggleProps): JSX.Element;
+export default RoundedToggle;

package/dist/Shared/Toggle/Toggle.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, Switch } from '@material-ui/core';
+var useStyles = function (props) {
+    var _a;
+    return makeStyles({
+        switchBase: {
+            color: props.baseColor + ' !important',
+            '&$checked': {
+                color: props.color + ' !important',
+            },
+            '&$checked + $track': {
+                backgroundColor: props.color + ' !important',
+            },
+            '&:hover': {
+                backgroundColor: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '40'
+                    : props.color,
+            },
+        },
+        checked: {},
+        track: {},
+    });
+};
+function RoundedToggle(_a) {
+    var _b = _a.color, color = _b === void 0 ? '#3d5a7f' : _b, _c = _a.baseColor, baseColor = _c === void 0 ? '#b8b8b8' : _c, _d = _a.checked, checked = _d === void 0 ? true : _d, onChange = _a.onChange, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f;
+    var classes = useStyles({ color: color, baseColor: baseColor })();
+    return (_jsx(Switch, { size: size, classes: classes, checked: checked, disabled: disabled, onChange: function (event) {
+            onChange(event.target.checked);
+        } }));
+}
+export default RoundedToggle;

package/dist/constants/EntityPropertyTypes.d.ts

@@ -2,6 +2,7 @@ export declare enum EntityPropertyTypes {
     NAME = "NAME",
     TEXTAREA = "TEXTAREA",
     DATEPICKER = "DATEPICKER",
+    TIMEPICKER = "TIMEPICKER",
     TEXTINPUT = "TEXTINPUT",
     SELECTOR = "SELECTOR",
     CHECKBOX = "CHECKBOX"

package/dist/constants/EntityPropertyTypes.js

@@ -3,6 +3,7 @@ export var EntityPropertyTypes;
     EntityPropertyTypes["NAME"] = "NAME";
     EntityPropertyTypes["TEXTAREA"] = "TEXTAREA";
     EntityPropertyTypes["DATEPICKER"] = "DATEPICKER";
+    EntityPropertyTypes["TIMEPICKER"] = "TIMEPICKER";
     EntityPropertyTypes["TEXTINPUT"] = "TEXTINPUT";
     EntityPropertyTypes["SELECTOR"] = "SELECTOR";
     EntityPropertyTypes["CHECKBOX"] = "CHECKBOX";

package/dist/constants/FormStepTypes.d.ts

@@ -5,7 +5,8 @@ export declare enum FormTypes {
 export declare enum FormStyleTypes {
     MATERIAL = "MATERIAL"
 }
-export declare enum StepTypes {
+export declare enum FormStepTypes {
+    TIMEPICKER = "TIMEPICKER",
     TITLE = "TITLE",
     RATING = "RATING",
     CHECKBOX = "CHECKBOX",
@@ -46,7 +47,7 @@ export declare enum RatingTypes {
     SATISFACTION = "SATISFACTION",
     LIKE = "LIKE"
 }
-export default StepTypes;
+export default FormStepTypes;
 export declare enum MapperStyleTypes {
     PILL = "PILL",
     LIST = "LIST",

package/dist/constants/FormStepTypes.js

@@ -7,23 +7,24 @@ export var FormStyleTypes;
 (function (FormStyleTypes) {
     FormStyleTypes["MATERIAL"] = "MATERIAL";
 })(FormStyleTypes || (FormStyleTypes = {}));
-export var StepTypes;
-(function (StepTypes) {
-    StepTypes["TITLE"] = "TITLE";
-    StepTypes["RATING"] = "RATING";
-    StepTypes["CHECKBOX"] = "CHECKBOX";
-    StepTypes["TEXTAREA"] = "TEXTAREA";
-    StepTypes["DATEPICKER"] = "DATEPICKER";
-    StepTypes["FILEUPLOAD"] = "FILEUPLOAD";
-    StepTypes["TEXTINPUT"] = "TEXTINPUT";
-    StepTypes["SEPARATOR"] = "SEPARATOR";
-    StepTypes["SELECTOR"] = "SELECTOR";
-    StepTypes["CLASSIFIER_SELECTOR"] = "CLASSIFIER_SELECTOR";
-    StepTypes["COLLAPSIBLE"] = "COLLAPSIBLE";
-    StepTypes["MAPPER"] = "MAPPER";
-    StepTypes["ENTITYVALUEPICKER"] = "ENTITYVALUEPICKER";
-    StepTypes["API_SELECTOR"] = "API_SELECTOR";
-})(StepTypes || (StepTypes = {}));
+export var FormStepTypes;
+(function (FormStepTypes) {
+    FormStepTypes["TIMEPICKER"] = "TIMEPICKER";
+    FormStepTypes["TITLE"] = "TITLE";
+    FormStepTypes["RATING"] = "RATING";
+    FormStepTypes["CHECKBOX"] = "CHECKBOX";
+    FormStepTypes["TEXTAREA"] = "TEXTAREA";
+    FormStepTypes["DATEPICKER"] = "DATEPICKER";
+    FormStepTypes["FILEUPLOAD"] = "FILEUPLOAD";
+    FormStepTypes["TEXTINPUT"] = "TEXTINPUT";
+    FormStepTypes["SEPARATOR"] = "SEPARATOR";
+    FormStepTypes["SELECTOR"] = "SELECTOR";
+    FormStepTypes["CLASSIFIER_SELECTOR"] = "CLASSIFIER_SELECTOR";
+    FormStepTypes["COLLAPSIBLE"] = "COLLAPSIBLE";
+    FormStepTypes["MAPPER"] = "MAPPER";
+    FormStepTypes["ENTITYVALUEPICKER"] = "ENTITYVALUEPICKER";
+    FormStepTypes["API_SELECTOR"] = "API_SELECTOR";
+})(FormStepTypes || (FormStepTypes = {}));
 export var OptionTypes;
 (function (OptionTypes) {
     OptionTypes["DEFAULT"] = "DEFAULT";
@@ -54,7 +55,7 @@ export var RatingTypes;
     RatingTypes["SATISFACTION"] = "SATISFACTION";
     RatingTypes["LIKE"] = "LIKE";
 })(RatingTypes || (RatingTypes = {}));
-export default StepTypes;
+export default FormStepTypes;
 export var MapperStyleTypes;
 (function (MapperStyleTypes) {
     MapperStyleTypes["PILL"] = "PILL";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"2.0.61-test",
+    "version":"2.0.62-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",