@dilicorp/ui 0.0.57 → 0.0.59
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/atoms/button.js +2 -2
- package/dist/atoms/checkbox.js +2 -2
- package/dist/atoms/col.js +2 -2
- package/dist/atoms/container.js +2 -2
- package/dist/atoms/icon.js +2 -2
- package/dist/atoms/image.js +2 -2
- package/dist/atoms/input-datepicker.js +2 -3
- package/dist/atoms/input.js +2 -2
- package/dist/atoms/label.js +2 -2
- package/dist/atoms/link.js +3 -3
- package/dist/atoms/radio.js +2 -2
- package/dist/atoms/row.js +2 -2
- package/dist/atoms/separator.js +2 -2
- package/dist/atoms/spinner.js +2 -2
- package/dist/atoms/typography.js +2 -2
- package/dist/components/accordion/accordion-body.js +3 -2
- package/dist/components/accordion/accordion-header.js +4 -2
- package/dist/components/accordion/accordion-item.js +2 -2
- package/dist/components/accordion/accordion.js +7 -5
- package/dist/components/alert-template/alert-provider.js +2 -2
- package/dist/components/alert-template/alert-template.js +6 -2
- package/dist/components/form-builder/_partials/form-group.js +8 -3
- package/dist/components/form-builder/components/button.js +5 -4
- package/dist/components/form-builder/components/checkbox.js +4 -2
- package/dist/components/form-builder/components/datepicker.js +2 -2
- package/dist/components/form-builder/components/dropzone.js +19 -4
- package/dist/components/form-builder/components/input-currency.js +2 -2
- package/dist/components/form-builder/components/input-mask.js +2 -2
- package/dist/components/form-builder/components/input-prefix-suffix.js +11 -8
- package/dist/components/form-builder/components/input.js +6 -6
- package/dist/components/form-builder/components/password.js +3 -2
- package/dist/components/form-builder/components/radio.js +4 -2
- package/dist/components/form-builder/components/select.js +2 -3
- package/dist/components/form-builder/form-builder-element.js +3 -2
- package/dist/components/form-builder/form-builder.js +12 -7
- package/dist/components/navbar/navbar.js +8 -4
- package/dist/components/page-create/page-create.js +12 -2
- package/dist/components/page-list/column-management-components/button-config.js +3 -3
- package/dist/components/page-list/column-management-components/container-drag-drop.js +2 -3
- package/dist/components/page-list/column-management-components/item-drag-drop.js +4 -2
- package/dist/components/page-list/column-management-components/modal-config.js +34 -5
- package/dist/components/page-list/filter-components/button-filter-clear.js +3 -2
- package/dist/components/page-list/filter-components/button-filter.js +4 -2
- package/dist/components/page-list/filter-components/button-filters.js +4 -2
- package/dist/components/page-list/filter-components/filter-form.js +3 -3
- package/dist/components/page-list/filters/filter-datepicker.js +6 -2
- package/dist/components/page-list/filters/filter-input.js +11 -3
- package/dist/components/page-list/filters/filter-select.js +5 -2
- package/dist/components/page-list/page-list-filters.js +2 -2
- package/dist/components/page-list/page-list-get-filters.js +22 -3
- package/dist/components/page-list/page-list.js +16 -3
- package/dist/components/page-show/page-show.js +13 -3
- package/dist/components/side-navigation-bar/side-navigation-bar-item.js +8 -3
- package/dist/components/side-navigation-bar/side-navigation-bar.js +15 -8
- package/dist/components/tabs/tab-list.js +2 -2
- package/dist/components/tabs/tab-panel.js +2 -2
- package/dist/components/tabs/tab.js +2 -2
- package/dist/components/tabs/tabs.js +10 -8
- package/dist/molecules/alert.js +8 -4
- package/dist/molecules/breadcrumb.js +6 -4
- package/dist/molecules/card.js +7 -2
- package/dist/molecules/dropdown/dropdown-item.js +4 -4
- package/dist/molecules/dropdown/dropdown.js +13 -12
- package/dist/molecules/field.js +4 -2
- package/dist/molecules/paginate.js +4 -2
- package/dist/molecules/table.js +16 -13
- package/package.json +5 -5
- package/tsconfig.json +1 -1
package/dist/atoms/button.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
export const Button = (_a) => {
|
|
15
15
|
var { children, active, block, className, color = 'primary', disabled, small = false, href, outline, innerRef, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "active", "block", "className", "color", "disabled", "small", "href", "outline", "innerRef", 'aria-label']);
|
|
@@ -27,5 +27,5 @@ export const Button = (_a) => {
|
|
|
27
27
|
if (href && Tag === 'button') {
|
|
28
28
|
Tag = 'a';
|
|
29
29
|
}
|
|
30
|
-
return (
|
|
30
|
+
return (React.createElement(Tag, Object.assign({}, (Tag === 'button' && props.onClick && { type: 'button' }), props, (href && { href }), { className: classes, ref: innerRef, onClick: handleClick, "aria-label": ariaLabel }), children));
|
|
31
31
|
};
|
package/dist/atoms/checkbox.js
CHANGED
|
@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
12
|
import { Input } from './input';
|
|
13
|
+
import React from 'react';
|
|
14
14
|
export const Checkout = (_a) => {
|
|
15
15
|
var { name, id } = _a, props = __rest(_a, ["name", "id"]);
|
|
16
|
-
return (
|
|
16
|
+
return (React.createElement(Input, Object.assign({ type: "checkbox" }, props, { id: id || name, name: name })));
|
|
17
17
|
};
|
package/dist/atoms/col.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
const RESPONSIVE_FLAGS = ['', 'sm-', 'md-', 'lg-', 'xl-', 'xxl-'];
|
|
15
15
|
const sanitizeByNone = (value) => {
|
|
@@ -24,5 +24,5 @@ export const Col = (_a) => {
|
|
|
24
24
|
? (typeof size === 'boolean' ? 'col-auto' : `col-${size}`)
|
|
25
25
|
: size.map((value, key) => sanitizeByNone(`col-${RESPONSIVE_FLAGS[key]}${value}`)).join(' ');
|
|
26
26
|
const classes = classNames(className, columns);
|
|
27
|
-
return (
|
|
27
|
+
return (React.createElement("div", Object.assign({}, props, { className: classes }), children));
|
|
28
28
|
};
|
package/dist/atoms/container.js
CHANGED
|
@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
export const Container = (_a) => {
|
|
15
15
|
var { children, className, type } = _a, props = __rest(_a, ["children", "className", "type"]);
|
|
16
16
|
const classes = classNames((!!className && className), `container${type ? '-' + type : ''}`);
|
|
17
|
-
return (
|
|
17
|
+
return (React.createElement("div", Object.assign({}, props, { className: classes }), children));
|
|
18
18
|
};
|
package/dist/atoms/icon.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
3
2
|
import * as fab from '@fortawesome/free-brands-svg-icons';
|
|
4
3
|
import * as fa from '@fortawesome/free-solid-svg-icons';
|
|
5
4
|
import stringHelper from '../utils/string-helper';
|
|
5
|
+
import React from 'react';
|
|
6
6
|
export const Icon = ({ icon, brand, className = '' }) => {
|
|
7
7
|
const sanitize = stringHelper.toCamelCase(icon);
|
|
8
8
|
const ico = brand ? fab[sanitize] : fa[sanitize];
|
|
9
|
-
return
|
|
9
|
+
return React.createElement(FontAwesomeIcon, { icon: ico, className: className });
|
|
10
10
|
};
|
package/dist/atoms/image.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
function alignValue(align) {
|
|
15
15
|
if (align === 'start')
|
|
@@ -45,5 +45,5 @@ export const Image = (props) => {
|
|
|
45
45
|
height
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
return (
|
|
48
|
+
return (React.createElement("img", Object.assign({ src: src, alt: alt }, attrs, styleOptions, { ref: innerRef, className: classes, loading: lazy ? 'lazy' : 'eager' })));
|
|
49
49
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import ReactDatePicker, { registerLocale } from 'react-datepicker';
|
|
4
3
|
import dateHelper from '../utils/date-helper';
|
|
@@ -21,8 +20,8 @@ export const InputDatepicker = (props) => {
|
|
|
21
20
|
setDate(currentDate);
|
|
22
21
|
};
|
|
23
22
|
const mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
|
|
24
|
-
return (
|
|
23
|
+
return (React.createElement(ReactDatePicker, { name: name, id: id, locale: locale, dateFormat: dateFormat, className: "form-control", selected: date, onChange: handleDateSelect, placeholderText: placeholder, autoComplete: "off",
|
|
25
24
|
// showMonthDropdown
|
|
26
25
|
// useShortMonthInDropdown
|
|
27
|
-
showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, customInput:
|
|
26
|
+
showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }) }));
|
|
28
27
|
};
|
package/dist/atoms/input.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
export const Input = (_a) => {
|
|
15
15
|
var { className, type, tag, addon, valid, invalid, innerRef } = _a, props = __rest(_a, ["className", "type", "tag", "addon", "valid", "invalid", "innerRef"]);
|
|
@@ -44,5 +44,5 @@ export const Input = (_a) => {
|
|
|
44
44
|
Reflect.deleteProperty(props, 'children');
|
|
45
45
|
}
|
|
46
46
|
// @ts-ignore
|
|
47
|
-
return
|
|
47
|
+
return React.createElement(Tag, Object.assign({}, props, { className: classes, ref: innerRef, type: type }));
|
|
48
48
|
};
|
package/dist/atoms/label.js
CHANGED
|
@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
export const Label = (_a) => {
|
|
15
15
|
var { htmlFor, inline, innerRef, children, className } = _a, props = __rest(_a, ["htmlFor", "inline", "innerRef", "children", "className"]);
|
|
16
16
|
const classes = classNames(className, 'form-label', inline ? 'd-inline-block' : 'd-block');
|
|
17
|
-
return (
|
|
17
|
+
return (React.createElement("label", Object.assign({}, props, { htmlFor: htmlFor, ref: innerRef, className: classes }), children));
|
|
18
18
|
};
|
package/dist/atoms/link.js
CHANGED
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { Link as RouterLink } from 'react-router-dom';
|
|
14
14
|
import { validationsHelper } from '../index';
|
|
15
15
|
export const Link = (props) => {
|
|
@@ -21,7 +21,7 @@ export const Link = (props) => {
|
|
|
21
21
|
};
|
|
22
22
|
const isLink = validationsHelper.isUrl(href);
|
|
23
23
|
if (isLink) {
|
|
24
|
-
return (
|
|
24
|
+
return (React.createElement("a", Object.assign({}, validOptions, { href: href, target: target || '_blank', rel: "noopener noreferrer" }), children));
|
|
25
25
|
}
|
|
26
|
-
return (
|
|
26
|
+
return (React.createElement(RouterLink, Object.assign({}, validOptions, { to: href, target: target || '_self' }), children));
|
|
27
27
|
};
|
package/dist/atoms/radio.js
CHANGED
|
@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
12
|
import { Input } from './input';
|
|
13
|
+
import React from 'react';
|
|
14
14
|
export const Radio = (_a) => {
|
|
15
15
|
var { name, id } = _a, props = __rest(_a, ["name", "id"]);
|
|
16
|
-
return (
|
|
16
|
+
return (React.createElement(Input, Object.assign({ type: "radio" }, props, { id: id || name, name: name })));
|
|
17
17
|
};
|
package/dist/atoms/row.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
export const Row = (props) => {
|
|
4
4
|
const { children, className, justifyContent, alignItems, alignContent, alignSelf } = props;
|
|
5
5
|
const classes = classNames('row', !!className && className, !!justifyContent && `justify-content-${justifyContent}`, !!alignItems && `align-items-${alignItems}`, !!alignContent && `align-content-${alignContent}`, !!alignSelf && `align-self-${alignSelf}`);
|
|
6
|
-
return (
|
|
6
|
+
return (React.createElement("div", Object.assign({}, props, { className: classes }), children));
|
|
7
7
|
};
|
package/dist/atoms/separator.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
export const Separator = ({ color = 'default' }) => {
|
|
4
4
|
const classes = classNames('line-separator', color);
|
|
5
|
-
return (
|
|
5
|
+
return (React.createElement("div", { className: classes }));
|
|
6
6
|
};
|
package/dist/atoms/spinner.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export const Spinner = (props) => {
|
|
3
3
|
const { color = 'primary' } = props;
|
|
4
|
-
return
|
|
4
|
+
return React.createElement("div", { className: `spinner spinner-${color}` });
|
|
5
5
|
};
|
package/dist/atoms/typography.js
CHANGED
|
@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
export const Typography = (_a) => {
|
|
15
15
|
var { variant = 'h1', lineBottom, full, children, tag: Tag = variant, innerRef, className } = _a, props = __rest(_a, ["variant", "lineBottom", "full", "children", "tag", "innerRef", "className"]);
|
|
16
16
|
const classes = classNames(className, variant, lineBottom && (full ? 'line-bottom-full' : 'line-bottom'), full && 'w-100');
|
|
17
|
-
return (
|
|
17
|
+
return (React.createElement(Tag, Object.assign({}, props, { className: classes, ref: innerRef }), children));
|
|
18
18
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
export const AccordionBody = ({ className, children }) => {
|
|
3
|
-
return (
|
|
3
|
+
return (React.createElement("div", { className: `accordion-body ${className}` },
|
|
4
|
+
React.createElement("div", null, children)));
|
|
4
5
|
};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
export const AccordionHeader = ({ className, children }) => {
|
|
3
|
-
return (
|
|
3
|
+
return (React.createElement("div", null,
|
|
4
|
+
React.createElement("div", { className: `accordion-header ${className}` },
|
|
5
|
+
React.createElement("span", null, children))));
|
|
4
6
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
export const AccordionItem = ({ children }) => {
|
|
3
|
-
return (
|
|
3
|
+
return (React.createElement("div", { className: "accordion-item" }, children));
|
|
4
4
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
import React, { useState } from "react";
|
|
3
2
|
import { AccordionBody } from "./accordion-body";
|
|
4
3
|
import { AccordionHeader } from "./accordion-header";
|
|
@@ -8,11 +7,14 @@ export const Accordion = ({ children }) => {
|
|
|
8
7
|
const childrenWithProps = React.Children.map(children, (child, index) => {
|
|
9
8
|
if (React.isValidElement(child)) {
|
|
10
9
|
const [header, body] = child.props.children;
|
|
11
|
-
return (
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
return (React.createElement(AccordionItem, null,
|
|
11
|
+
React.createElement("div", { style: { cursor: 'pointer' }, onClick: () => {
|
|
12
|
+
setCurrentItem(prev => prev === index ? -1 : index);
|
|
13
|
+
} },
|
|
14
|
+
React.createElement(AccordionHeader, { className: currentItem === index ? 'active' : '' }, header.props.children)),
|
|
15
|
+
React.createElement(AccordionBody, { className: currentItem === index ? 'active' : '' }, body.props.children)));
|
|
14
16
|
}
|
|
15
17
|
return child;
|
|
16
18
|
});
|
|
17
|
-
return (
|
|
19
|
+
return (React.createElement("div", null, childrenWithProps));
|
|
18
20
|
};
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { positions, Provider } from 'react-alert';
|
|
14
14
|
import { AlertTemplate } from './alert-template';
|
|
15
15
|
const options = {
|
|
@@ -18,5 +18,5 @@ const options = {
|
|
|
18
18
|
};
|
|
19
19
|
export const AlertProvider = (_a) => {
|
|
20
20
|
var { children } = _a, props = __rest(_a, ["children"]);
|
|
21
|
-
return (
|
|
21
|
+
return (React.createElement(Provider, Object.assign({}, options, props, { template: AlertTemplate }), children));
|
|
22
22
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { Button } from '../../atoms/button';
|
|
3
3
|
import { Icon } from '../../atoms/icon';
|
|
4
4
|
const style = {
|
|
@@ -24,5 +24,9 @@ export const AlertTemplate = (props) => {
|
|
|
24
24
|
const { message, close
|
|
25
25
|
// options
|
|
26
26
|
} = props;
|
|
27
|
-
return (
|
|
27
|
+
return (React.createElement("div", { style: style.content },
|
|
28
|
+
message === 'string' ? React.createElement("div", { dangerouslySetInnerHTML: { __html: message } }) : React.createElement("div", null, message),
|
|
29
|
+
React.createElement("div", null,
|
|
30
|
+
React.createElement(Button, { onClick: close, style: style.close },
|
|
31
|
+
React.createElement(Icon, { icon: "fa-times" })))));
|
|
28
32
|
};
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ErrorMessage } from 'formik';
|
|
3
3
|
import { FormBuilderItemHelper } from '../utils/form-builder-item-helper';
|
|
4
4
|
export const FormGroup = (props) => {
|
|
5
5
|
const { name, title, children, validations } = props;
|
|
6
|
-
const required = FormBuilderItemHelper.init(validations).isRequired() ?
|
|
7
|
-
return (
|
|
6
|
+
const required = FormBuilderItemHelper.init(validations).isRequired() ? React.createElement("span", null, "*") : null;
|
|
7
|
+
return (React.createElement("div", { className: "form-group" },
|
|
8
|
+
React.createElement("label", { className: "form-label", htmlFor: name },
|
|
9
|
+
title,
|
|
10
|
+
required),
|
|
11
|
+
children,
|
|
12
|
+
React.createElement(ErrorMessage, { name: name, component: ({ children }) => React.createElement("div", { className: "invalid-feedback" }, children) })));
|
|
8
13
|
};
|
|
@@ -9,11 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { Button } from '../../../atoms/button';
|
|
14
14
|
export default function Input(props) {
|
|
15
15
|
const { type = 'button', actions, color = 'primary', label, labelLoading = label, className } = props, elements = __rest(props, ["type", "actions", "color", "label", "labelLoading", "className"]);
|
|
16
|
-
return (
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
return (React.createElement("div", null,
|
|
17
|
+
React.createElement(Button, Object.assign({}, elements, { className: className, type: type, color: color }), actions.isSubmitting
|
|
18
|
+
? labelLoading
|
|
19
|
+
: label)));
|
|
19
20
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { FastField } from 'formik';
|
|
3
3
|
export default function Checkbox(props) {
|
|
4
4
|
const { name, actions, value = [], options, id = name, tabIndex = 0, disabled } = props;
|
|
@@ -11,5 +11,7 @@ export default function Checkbox(props) {
|
|
|
11
11
|
checked: sanitized.includes((option.value).toString())
|
|
12
12
|
});
|
|
13
13
|
};
|
|
14
|
-
return options.map((option, index) => (
|
|
14
|
+
return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
|
|
15
|
+
React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}` }, isChecked(option), { disabled }, { className: "form-check-input", type: "checkbox", tabIndex: tabIndex })),
|
|
16
|
+
React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
|
|
15
17
|
}
|
|
@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { InputDatepicker } from '../../../atoms/input-datepicker';
|
|
14
14
|
export default function DatePicker(props) {
|
|
15
15
|
const { name, actions, value } = props, rest = __rest(props, ["name", "actions", "value"]);
|
|
16
|
-
return (
|
|
16
|
+
return (React.createElement(InputDatepicker, Object.assign({ value: value || '', name: name }, rest, { onChange: actions.setFieldValue })));
|
|
17
17
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import { useDropzone } from 'react-dropzone';
|
|
4
3
|
export default function DropZone(props) {
|
|
@@ -10,7 +9,23 @@ export default function DropZone(props) {
|
|
|
10
9
|
}
|
|
11
10
|
}, []);
|
|
12
11
|
const { acceptedFiles, fileRejections, getRootProps, getInputProps, isDragActive } = useDropzone(Object.assign(Object.assign({}, dropzoneOptions), { onDrop, multiple: (dropzoneOptions === null || dropzoneOptions === void 0 ? void 0 : dropzoneOptions.multiple) || false }));
|
|
13
|
-
return (
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
return (React.createElement("div", { className: "dropzone-container" },
|
|
13
|
+
React.createElement("div", Object.assign({}, getRootProps({ className: 'dropzone' })),
|
|
14
|
+
React.createElement("input", Object.assign({}, getInputProps({ name, id }))),
|
|
15
|
+
isDragActive
|
|
16
|
+
? React.createElement("p", null, textFileSelect)
|
|
17
|
+
: React.createElement("p", null, textFileSelected)),
|
|
18
|
+
!!acceptedFiles.length && (React.createElement("ul", null, acceptedFiles.map(file => (React.createElement("li", { key: file.path },
|
|
19
|
+
file.path,
|
|
20
|
+
" - ",
|
|
21
|
+
file.size,
|
|
22
|
+
" bytes"))))),
|
|
23
|
+
!!fileRejections.length && (React.createElement(React.Fragment, null,
|
|
24
|
+
React.createElement("h3", null, labelFileRejection),
|
|
25
|
+
React.createElement("ul", null, fileRejections.map(({ file, errors }) => (React.createElement("li", { key: file.path },
|
|
26
|
+
file.path,
|
|
27
|
+
" - ",
|
|
28
|
+
file.size,
|
|
29
|
+
" bytes",
|
|
30
|
+
React.createElement("ul", null, errors.map(e => (React.createElement("li", { key: e.code }, e.message))))))))))));
|
|
16
31
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { FastField } from 'formik';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import numberHelper from '../../../utils/number-helper';
|
|
4
4
|
export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
|
|
5
5
|
const handleChangeCurrency = (event) => {
|
|
@@ -12,5 +12,5 @@ export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
|
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
14
|
};
|
|
15
|
-
return (
|
|
15
|
+
return (React.createElement(FastField, { name: name }, ({ field }) => React.createElement("input", Object.assign({}, field, attrs, { onChange: handleChangeCurrency, min: "0", maxLength: 20 }))));
|
|
16
16
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { FastField } from 'formik';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import ReactInputMask from 'react-input-mask';
|
|
4
4
|
export const InputMask = ({ attrs, mask, name }) => {
|
|
5
|
-
return (
|
|
5
|
+
return (React.createElement(FastField, { name: name }, ({ field }) => React.createElement(ReactInputMask, Object.assign({}, field, attrs, { mask: mask }))));
|
|
6
6
|
};
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { FastField } from 'formik';
|
|
3
3
|
export const InputPrefixSuffix = ({ attrs, suffix, prefix }) => {
|
|
4
4
|
var _a;
|
|
5
|
-
return (
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
return (React.createElement("div", { className: "position-relative" },
|
|
6
|
+
prefix && React.createElement("div", { className: "input-prefix" }, prefix),
|
|
7
|
+
React.createElement(FastField, Object.assign({}, attrs, { readOnly: true, onFocus: (event) => {
|
|
8
|
+
event.currentTarget.readOnly = false;
|
|
9
|
+
} }, (prefix && {
|
|
10
|
+
style: {
|
|
11
|
+
paddingLeft: (((_a = prefix === null || prefix === void 0 ? void 0 : prefix.length) !== null && _a !== void 0 ? _a : 0) * 8) + 10
|
|
12
|
+
}
|
|
13
|
+
}))),
|
|
14
|
+
suffix && React.createElement("div", { className: "input-suffix" }, suffix)));
|
|
12
15
|
};
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { FastField } from 'formik';
|
|
14
14
|
import classNames from 'classnames';
|
|
15
15
|
import { InputCurrency } from './input-currency';
|
|
@@ -53,12 +53,12 @@ export default function Input(props) {
|
|
|
53
53
|
type,
|
|
54
54
|
tabIndex, autoComplete: 'none', onChange: handleChange });
|
|
55
55
|
if (currency)
|
|
56
|
-
return
|
|
56
|
+
return React.createElement(InputCurrency, Object.assign({}, { name, attrs, currency, handleChange }));
|
|
57
57
|
if (mask)
|
|
58
|
-
return
|
|
58
|
+
return React.createElement(InputMask, Object.assign({}, { name, attrs, mask }));
|
|
59
59
|
if (prefix || suffix)
|
|
60
|
-
return
|
|
61
|
-
return (
|
|
60
|
+
return React.createElement(InputPrefixSuffix, Object.assign({}, { attrs, suffix, prefix }));
|
|
61
|
+
return (React.createElement(FastField, Object.assign({}, attrs, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
|
|
62
62
|
event.currentTarget.readOnly = false;
|
|
63
|
-
} })
|
|
63
|
+
} })));
|
|
64
64
|
}
|
|
@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
12
|
import React from 'react';
|
|
14
13
|
import { Field } from 'formik';
|
|
15
14
|
export default function Password(props) {
|
|
@@ -41,5 +40,7 @@ export default function Password(props) {
|
|
|
41
40
|
const handleFocus = (event) => {
|
|
42
41
|
event.currentTarget.readOnly = false;
|
|
43
42
|
};
|
|
44
|
-
return (
|
|
43
|
+
return (React.createElement("div", { className: "position-relative" },
|
|
44
|
+
React.createElement("div", { role: "button", className: `form-password-button${visible ? ' visible' : ''}`, onClick: handleVisible }, labelButton),
|
|
45
|
+
React.createElement(Field, Object.assign({}, validOptions, { type: visible ? 'text' : 'password', className: "form-control", name: name, id: id, tabIndex: tabIndex, onChange: handleChange, readOnly: true, autoComplete: "off", onFocus: handleFocus }))));
|
|
45
46
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { FastField } from 'formik';
|
|
3
3
|
export default function Radio(props) {
|
|
4
4
|
const { name, actions, value, options, id = name, tabIndex = 0, disabled } = props;
|
|
@@ -18,5 +18,7 @@ export default function Radio(props) {
|
|
|
18
18
|
actions.setFieldValue(name, event.currentTarget.value);
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
|
-
return options.map((option, index) => (
|
|
21
|
+
return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
|
|
22
|
+
React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
|
|
23
|
+
React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
|
|
22
24
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
3
2
|
import ReactSelect from 'react-select';
|
|
4
3
|
export default function Select(props) {
|
|
5
4
|
const { actions, options = [], name, id = name, value = null, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, onChange } = props;
|
|
@@ -22,5 +21,5 @@ export default function Select(props) {
|
|
|
22
21
|
actions.setFieldValue(name, JSON.stringify(newValue));
|
|
23
22
|
setValue(newValue);
|
|
24
23
|
}, []);
|
|
25
|
-
return (
|
|
24
|
+
return (React.createElement(ReactSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, name: name, id: id, defaultValue: currValue, value: currValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, onChange: handleChange }));
|
|
26
25
|
}
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { FormBuilderComponentsList } from './form-builder-components-list';
|
|
14
14
|
import { FormGroup } from './_partials/form-group';
|
|
15
15
|
export const FormBuilderElement = (props) => {
|
|
@@ -21,5 +21,6 @@ export const FormBuilderElement = (props) => {
|
|
|
21
21
|
: null);
|
|
22
22
|
if (!Component)
|
|
23
23
|
return null;
|
|
24
|
-
return (
|
|
24
|
+
return (React.createElement(FormGroup, { name: props.name, title: props.title, validations: props.validations },
|
|
25
|
+
React.createElement(Component, Object.assign({}, elements, { value: value || '', actions: actions }))));
|
|
25
26
|
};
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import
|
|
12
|
+
import React from 'react';
|
|
13
13
|
import { Form, Formik } from 'formik';
|
|
14
14
|
import { Row, Col, Typography } from '../../';
|
|
15
15
|
import { FormBuilderElement } from './form-builder-element';
|
|
@@ -17,10 +17,15 @@ import { FormBuilderHelper } from './utils/form-builder-helper';
|
|
|
17
17
|
export const FormBuilder = (props) => {
|
|
18
18
|
const { data, onSubmit, className } = props;
|
|
19
19
|
const options = Object.assign(Object.assign({ enableReinitialize: true }, FormBuilderHelper.init(data).build()), { onSubmit });
|
|
20
|
-
return (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
return (React.createElement("div", { className: "w-100" },
|
|
21
|
+
React.createElement(Formik, Object.assign({}, options), (actions) => (React.createElement(Form, { className: `form-builder${className ? ' ' + className : ''}` }, data.map(({ name, customComponent: Component, items, classes }, index) => (React.createElement("div", { key: index, className: `so-form-group${(classes === null || classes === void 0 ? void 0 : classes.soFormGroup) ? ' ' + (classes === null || classes === void 0 ? void 0 : classes.soFormGroup) : ''}` },
|
|
22
|
+
name && React.createElement(Typography, { tag: "h2", variant: "h5" }, name),
|
|
23
|
+
Boolean(Component) && Component,
|
|
24
|
+
React.createElement(Row, null, items
|
|
25
|
+
.filter(item => item === null || item === void 0 ? void 0 : item.component)
|
|
26
|
+
.map((_a) => {
|
|
27
|
+
var { column, columnClassName } = _a, item = __rest(_a, ["column", "columnClassName"]);
|
|
28
|
+
return (React.createElement(Col, { key: item.name, size: column || 12, className: columnClassName },
|
|
29
|
+
React.createElement(FormBuilderElement, Object.assign({}, item, { actions: actions }))));
|
|
30
|
+
}))))))))));
|
|
26
31
|
};
|