@dilicorp/ui 0.2.31 → 0.2.32
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/icon.d.ts +2 -1
- package/dist/atoms/icon.js +15 -3
- package/dist/atoms/input-datepicker.d.ts +1 -0
- package/dist/atoms/input-datepicker.js +2 -2
- package/dist/atoms/pluxee-icon/base-icon.js +1 -7
- package/dist/atoms/pluxee-icon/icon-card-slashed.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-card-slashed.js +12 -0
- package/dist/atoms/pluxee-icon/icon-circle.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-circle.js +6 -0
- package/dist/atoms/pluxee-icon/icon-clock.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-clock.js +7 -0
- package/dist/atoms/pluxee-icon/icon-download.js +2 -2
- package/dist/atoms/pluxee-icon/icon-eye-closed-outline.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-eye-closed-outline.js +10 -0
- package/dist/atoms/pluxee-icon/icon-identification.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-identification.js +10 -0
- package/dist/atoms/pluxee-icon/icon-negotiation.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-negotiation.js +6 -0
- package/dist/atoms/pluxee-icon/icon-play.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-play.js +6 -0
- package/dist/atoms/pluxee-icon/icon-qrcode.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-qrcode.js +17 -0
- package/dist/atoms/pluxee-icon/icon-update-limit.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-update-limit.js +8 -0
- package/dist/atoms/pluxee-icon/icon-user-group.d.ts +6 -0
- package/dist/atoms/pluxee-icon/icon-user-group.js +6 -0
- package/dist/atoms/pluxee-icon/pluxee-icon.d.ts +8 -1
- package/dist/atoms/pluxee-icon/pluxee-icon.js +24 -3
- package/dist/components/alert-template/alert-provider.js +1 -1
- package/dist/components/form-builder/components/button.d.ts +1 -1
- package/dist/components/form-builder/components/button.js +2 -1
- package/dist/components/form-builder/components/checkbox.d.ts +1 -0
- package/dist/components/form-builder/components/checkbox.js +4 -3
- package/dist/components/form-builder/components/input-currency.js +15 -2
- package/dist/components/form-builder/components/input-mask.js +15 -2
- package/dist/components/form-builder/components/input-prefix-suffix.js +15 -2
- package/dist/components/form-builder/components/input.d.ts +1 -0
- package/dist/components/form-builder/components/input.js +6 -4
- package/dist/components/form-builder/components/radio.d.ts +1 -0
- package/dist/components/form-builder/components/radio.js +4 -3
- package/dist/components/layout/authenticated-layout/authenticated-layout.d.ts +4 -0
- package/dist/components/layout/authenticated-layout/authenticated-layout.js +6 -6
- package/dist/components/layout/layout.d.ts +4 -0
- package/dist/components/layout/pluxee-logo/pluxee-logo-card.d.ts +8 -0
- package/dist/components/layout/pluxee-logo/pluxee-logo-card.js +14 -0
- package/dist/components/page-create/page-create.d.ts +1 -1
- package/dist/components/page-create/page-create.js +1 -1
- package/dist/components/page-list/page-list.js +6 -2
- package/dist/components/side-navigation-bar/side-navigation-bar-item.d.ts +1 -0
- package/dist/components/side-navigation-bar/side-navigation-bar-item.js +38 -13
- package/dist/components/side-navigation-bar/side-navigation-bar.js +2 -2
- package/dist/css/style.min.css +2 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +5 -2
- package/dist/molecules/card-summary/card-summary-body.d.ts +12 -0
- package/dist/molecules/card-summary/card-summary-body.js +9 -0
- package/dist/molecules/card-summary/card-summary-container.d.ts +14 -0
- package/dist/molecules/card-summary/card-summary-container.js +19 -0
- package/dist/molecules/card-summary/card-summary-footer.d.ts +15 -0
- package/dist/molecules/card-summary/card-summary-footer.js +11 -0
- package/dist/molecules/card-summary/card-summary-header.d.ts +12 -0
- package/dist/molecules/card-summary/card-summary-header.js +11 -0
- package/dist/molecules/card-summary/card-summary.d.ts +40 -0
- package/dist/molecules/card-summary/card-summary.js +10 -0
- package/dist/molecules/modal/modal.d.ts +11 -0
- package/dist/molecules/modal/modal.js +15 -0
- package/dist/molecules/panel/panel-container.d.ts +12 -0
- package/dist/molecules/panel/panel-container.js +9 -0
- package/dist/molecules/panel/panel-field.d.ts +12 -0
- package/dist/molecules/panel/panel-field.js +12 -0
- package/dist/molecules/panel/panel-group.d.ts +14 -0
- package/dist/molecules/panel/panel-group.js +9 -0
- package/dist/molecules/panel/panel.d.ts +31 -0
- package/dist/molecules/panel/panel.js +8 -0
- package/dist/molecules/player-video/modal-video.d.ts +24 -0
- package/dist/molecules/player-video/modal-video.js +18 -0
- package/dist/molecules/player-video/player-video.d.ts +31 -0
- package/dist/molecules/player-video/player-video.js +8 -0
- package/dist/molecules/player-video/thumb-video.d.ts +12 -0
- package/dist/molecules/player-video/thumb-video.js +11 -0
- package/dist/molecules/table-column-management.js +6 -2
- package/package.json +1 -1
package/dist/atoms/icon.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export declare type IconProps = {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
id?: string;
|
|
8
8
|
size?: 'lg' | 'md' | 'sm';
|
|
9
|
+
title?: string;
|
|
9
10
|
};
|
|
10
|
-
export declare const Icon: ({ icon, brand,
|
|
11
|
+
export declare const Icon: ({ pluxee, icon, brand, className, id, size, ...props }: IconProps) => JSX.Element;
|
|
11
12
|
//# sourceMappingURL=icon.d.ts.map
|
package/dist/atoms/icon.js
CHANGED
|
@@ -1,14 +1,26 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
2
13
|
import * as fab from '@fortawesome/free-brands-svg-icons';
|
|
3
14
|
import * as fa from '@fortawesome/free-solid-svg-icons';
|
|
4
15
|
import stringHelper from '../utils/string-helper';
|
|
5
16
|
import React from 'react';
|
|
6
17
|
import { PluxeeIcon } from './pluxee-icon/pluxee-icon';
|
|
7
|
-
export const Icon = (
|
|
18
|
+
export const Icon = (_a) => {
|
|
19
|
+
var { pluxee, icon, brand, className = '', id, size } = _a, props = __rest(_a, ["pluxee", "icon", "brand", "className", "id", "size"]);
|
|
8
20
|
if (pluxee) {
|
|
9
|
-
return React.createElement(PluxeeIcon, { icon: icon, size: size });
|
|
21
|
+
return (React.createElement(PluxeeIcon, Object.assign({ icon: icon, size: size }, props)));
|
|
10
22
|
}
|
|
11
23
|
const sanitize = stringHelper.toCamelCase(icon);
|
|
12
24
|
const ico = brand ? fab[sanitize] : fa[sanitize];
|
|
13
|
-
return React.createElement(FontAwesomeIcon, { id: id, icon: ico, className: className });
|
|
25
|
+
return (React.createElement(FontAwesomeIcon, Object.assign({ id: id, icon: ico, className: className }, props)));
|
|
14
26
|
};
|
|
@@ -13,6 +13,7 @@ export declare type InputDatepickerProps = {
|
|
|
13
13
|
minDate?: Date | null;
|
|
14
14
|
maxDate?: Date | null;
|
|
15
15
|
currentValue?: string;
|
|
16
|
+
disabled?: boolean;
|
|
16
17
|
};
|
|
17
18
|
export declare const InputDatepicker: (props: InputDatepickerProps) => JSX.Element;
|
|
18
19
|
//# sourceMappingURL=input-datepicker.d.ts.map
|
|
@@ -11,7 +11,7 @@ registerLocale('es-CO', es);
|
|
|
11
11
|
registerLocale('en-US', en);
|
|
12
12
|
// example use https://reactdatepicker.com
|
|
13
13
|
export const InputDatepicker = (props) => {
|
|
14
|
-
const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue } = props;
|
|
14
|
+
const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue, disabled } = props;
|
|
15
15
|
const [date, setDate] = React.useState(dateHelper.stringToDate(currentValue || value));
|
|
16
16
|
const handleDateSelect = (currentDate) => {
|
|
17
17
|
if (onChange) {
|
|
@@ -29,5 +29,5 @@ export const InputDatepicker = (props) => {
|
|
|
29
29
|
return (React.createElement(ReactDatePicker, { name: name, id: id, "data-testid": id, locale: locale, dateFormat: dateFormat, className: "form-control", selected: date, onChange: handleDateSelect, placeholderText: placeholder, autoComplete: "off",
|
|
30
30
|
// showMonthDropdown
|
|
31
31
|
// useShortMonthInDropdown
|
|
32
|
-
minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }) }));
|
|
32
|
+
minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }), disabled: disabled }));
|
|
33
33
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import uuidHelper from '../../utils/uuid-helper';
|
|
3
2
|
const sizeInfo = {
|
|
4
3
|
lg: 32,
|
|
5
4
|
md: 24,
|
|
@@ -7,10 +6,5 @@ const sizeInfo = {
|
|
|
7
6
|
};
|
|
8
7
|
export const BaseIcon = ({ children, size }) => {
|
|
9
8
|
const sizeNumber = sizeInfo[size];
|
|
10
|
-
|
|
11
|
-
return (React.createElement("svg", { style: { color: 'inherit' }, width: sizeNumber, height: sizeNumber, viewBox: '0 0 32 32', fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
12
|
-
React.createElement("g", { clipPath: `url(#${id})` }, children),
|
|
13
|
-
React.createElement("defs", null,
|
|
14
|
-
React.createElement("clipPath", { id: id },
|
|
15
|
-
React.createElement("rect", { width: "32", height: "32", fill: "white" })))));
|
|
9
|
+
return (React.createElement("svg", { style: { color: 'inherit' }, width: sizeNumber, height: sizeNumber, viewBox: '0 0 32 32', fill: "none", xmlns: "http://www.w3.org/2000/svg" }, children));
|
|
16
10
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconCardSlashed = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { d: "M18.7502 18.9951H26.7502V20.9951H18.7502V18.9951Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { d: "M29.3293 2.99512L30.7435 4.40933L4.16421 30.9886L2.75 29.5744L29.3293 2.99512Z", fill: "currentColor" }),
|
|
6
|
+
React.createElement("path", { d: "M23.9152 6.99512H2.75016V26.9951H3.9152L6.9152 23.9951H5.75016V16.9951H13.9152L16.9152 13.9951H5.75016V9.99512H20.9152L23.9152 6.99512Z", fill: "currentColor" }),
|
|
7
|
+
React.createElement("path", { d: "M18.3294 13.9951L15.3294 16.9951H18.1578L21.1578 13.9951H18.3294Z", fill: "currentColor" }),
|
|
8
|
+
React.createElement("path", { d: "M25.1578 9.99512H22.3294L25.3294 6.99512H28.1578L25.1578 9.99512Z", fill: "currentColor" }),
|
|
9
|
+
React.createElement("path", { d: "M22.5721 13.9951H27.7502V9.99512H26.5721L29.5721 6.99512H30.7502V26.9951H9.57206L12.5721 23.9951H27.7502V16.9951H19.5721L22.5721 13.9951Z", fill: "currentColor" }),
|
|
10
|
+
React.createElement("path", { d: "M11.1578 23.9951H8.32941L5.32941 26.9951H8.15784L11.1578 23.9951Z", fill: "currentColor" })));
|
|
11
|
+
};
|
|
12
|
+
IconCardSlashed.displayName = 'IconCardSlashed';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconCircle = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z", fill: "currentColor" })));
|
|
5
|
+
};
|
|
6
|
+
IconCircle.displayName = 'IconCircle';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconClock = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5 27C22.5751 27 27.5 22.0751 27.5 16C27.5 9.92487 22.5751 5 16.5 5C10.4249 5 5.5 9.92487 5.5 16C5.5 22.0751 10.4249 27 16.5 27ZM16.5 30C24.232 30 30.5 23.732 30.5 16C30.5 8.26801 24.232 2 16.5 2C8.76801 2 2.5 8.26801 2.5 16C2.5 23.732 8.76801 30 16.5 30Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.5 7H17.5V15H22.5V17H15.5V7Z", fill: "currentColor" })));
|
|
6
|
+
};
|
|
7
|
+
IconClock.displayName = 'IconClock';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export const IconDownload = () => {
|
|
3
3
|
return (React.createElement(React.Fragment, null,
|
|
4
|
-
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2
|
|
5
|
-
React.createElement("path", { d: "
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 19V30H30V19H27V27H5V19H2Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { d: "M17.5 17.2576L17.5 3H14.5L14.5 17.2576L10.1212 12.8788L7.9999 15.0001L16 23.0002L24.0001 15.0001L21.8788 12.8788L17.5 17.2576Z", fill: "currentColor" })));
|
|
6
6
|
};
|
|
7
7
|
IconDownload.displayName = 'IconDownload';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconEyeClosedOutline = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { d: "M23.061 6.10699C21.1527 4.85123 18.8139 3.99609 16 3.99609C6 3.99609 2 14.7961 2 15.9961C2 17.2777 3.14055 20.6122 5.72617 23.4418L7.85006 21.3179C7.74907 21.2049 7.65062 21.0907 7.55466 20.9755C6.63325 19.8698 5.96663 18.6987 5.53796 17.7002C5.32433 17.2025 5.18035 16.7722 5.09352 16.4407C5.05907 16.3091 5.0373 16.2072 5.02355 16.1334C5.03201 16.1046 5.04189 16.072 5.05339 16.0354C5.14267 15.7513 5.29402 15.3418 5.51729 14.8453C5.96493 13.85 6.65612 12.6065 7.60465 11.405C9.50346 8.99986 12.2199 6.99609 16 6.99609C17.8803 6.99609 19.4974 7.4919 20.8817 8.28628L23.061 6.10699Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { d: "M11.0107 23.8141C12.4013 24.5406 14.0518 24.9961 16 24.9961C19.7801 24.9961 22.4965 22.9923 24.3954 20.5872C25.3439 19.3857 26.0351 18.1422 26.4827 17.1469C26.6959 16.6729 26.8435 16.2781 26.9341 15.9961C26.8435 15.7141 26.6959 15.3193 26.4827 14.8453C26.0351 13.85 25.3439 12.6065 24.3954 11.405C24.2528 11.2245 24.1057 11.0463 23.9539 10.8709L26.0794 8.74541C28.8024 11.8085 30 15.3395 30 15.9961C30 17.1961 26 27.9961 16 27.9961C13.1234 27.9961 10.7432 27.2017 8.81201 26.0128L11.0107 23.8141Z", fill: "currentColor" }),
|
|
6
|
+
React.createElement("path", { d: "M18.587 10.5809C17.8037 10.206 16.9264 9.99609 16 9.99609C12.6863 9.99609 10 12.6824 10 15.9961C10 16.9225 10.2099 17.7998 10.5848 18.5831L13.0046 16.1634C13.0015 16.108 13 16.0522 13 15.9961C13 14.3392 14.3431 12.9961 16 12.9961C16.0561 12.9961 16.1119 12.9976 16.1673 13.0007L18.587 10.5809Z", fill: "currentColor" }),
|
|
7
|
+
React.createElement("path", { d: "M15.8333 18.9915C15.8885 18.9946 15.9441 18.9961 16 18.9961C17.6569 18.9961 19 17.6529 19 15.9961C19 15.9402 18.9985 15.8846 18.9954 15.8294L21.4154 13.4095C21.7901 14.1927 22 15.0699 22 15.9961C22 19.3098 19.3137 21.9961 16 21.9961C15.0738 21.9961 14.1966 21.7862 13.4134 21.4114L15.8333 18.9915Z", fill: "currentColor" }),
|
|
8
|
+
React.createElement("path", { d: "M28.582 2L29.9962 3.41421L3.41698 29.9935L2.00277 28.5793L28.582 2Z", fill: "currentColor" })));
|
|
9
|
+
};
|
|
10
|
+
IconEyeClosedOutline.displayName = 'IconEyeClosedOutline';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconIdentification = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { d: "M8 0H0V8H3V3H8V0Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.7705 16.3235C20.6897 15.3226 22 13.3143 22 11C22 7.68629 19.3137 5 16 5C12.6863 5 10 7.68629 10 11C10 13.3143 11.3103 15.3226 13.2295 16.3235C9.40574 17.2415 6.38992 20.0542 5.3716 24C5.12925 24.9391 5.00004 25.9423 5 26.9995L27 27C27 25.9428 26.8708 24.9391 26.6284 24C25.6101 20.0541 22.5943 17.2414 18.7705 16.3235ZM19 11C19 12.6569 17.6569 14 16 14C14.3431 14 13 12.6569 13 11C13 9.34315 14.3431 8 16 8C17.6569 8 19 9.34315 19 11ZM8.51226 24C9.64125 20.9175 12.5217 19 16 19C19.4783 19 22.3588 20.9175 23.4877 24H8.51226Z", fill: "currentColor" }),
|
|
6
|
+
React.createElement("path", { d: "M32 0V8H29V3H24V0H32Z", fill: "currentColor" }),
|
|
7
|
+
React.createElement("path", { d: "M24 32H32V24H29V29H24V32Z", fill: "currentColor" }),
|
|
8
|
+
React.createElement("path", { d: "M0 32V24H3V29H8V32H0Z", fill: "currentColor" })));
|
|
9
|
+
};
|
|
10
|
+
IconIdentification.displayName = 'IconIdentification';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconNegotiation = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { d: "M17.707 4.86586L25.6471 10.066L32.0006 9.82591V7.15586L26.3938 7.36591L17.6737 1.65576L13.4703 4.53252H0V7.19924H9.57683L7.06344 8.91924L6.96346 8.9959C5.62344 10.1126 5.24344 12.0393 6.05679 13.5827C6.92347 15.2227 8.89016 15.9727 10.6302 15.326L14.6436 13.8327L16.6636 15.7727L23.4371 22.3095C23.6671 22.5429 23.6671 22.9196 23.4371 23.1529C23.2071 23.3862 22.8271 23.3862 22.5937 23.1529L15.9536 16.4627L14.0603 18.3427L20.8437 25.1695C21.0771 25.4029 21.0771 25.7795 20.8437 26.0129C20.6104 26.2462 20.2304 26.2462 19.997 26.0129L13.2479 19.1547L11.3612 21.0381L17.157 26.9429C17.277 27.0863 17.3003 27.2396 17.3003 27.3229C17.3003 27.4162 17.277 27.5929 17.1236 27.7462C16.8903 27.9796 16.5136 27.9762 16.2803 27.7462L10.4602 21.9061L8.57014 23.7895L13.2703 28.5029C13.4603 28.7629 13.4402 29.133 13.2036 29.3663C12.9436 29.6263 12.5202 29.6263 12.2602 29.3663L12.2502 29.3763L0 17.1261V20.8962L10.4002 31.2963L10.4135 31.283C11.0602 31.9097 11.8969 32.223 12.7335 32.223C13.5702 32.223 14.4403 31.8963 15.0903 31.2463C15.3403 30.9963 15.5403 30.7163 15.6936 30.4196C16.0136 30.523 16.3536 30.5796 16.7003 30.5796C17.5736 30.5796 18.3903 30.2397 19.007 29.623C19.267 29.363 19.4737 29.0663 19.6304 28.7463C19.887 28.8096 20.1537 28.8463 20.417 28.8463C21.2537 28.8463 22.0904 28.5296 22.7238 27.893C23.2604 27.3563 23.5871 26.6629 23.6638 25.9162C24.2704 25.7929 24.8471 25.4996 25.3171 25.0296C26.4338 23.9162 26.5705 22.1861 25.7304 20.9195L31.9939 20.6728V18.0061L23.2071 18.3594L15.2736 10.7426L9.69016 12.8194C9.20015 12.9994 8.64681 12.7893 8.40347 12.3293C8.18347 11.9093 8.27348 11.3893 8.62015 11.0726L17.697 4.85919L17.707 4.86586Z", fill: "currentColor" })));
|
|
5
|
+
};
|
|
6
|
+
IconNegotiation.displayName = 'IconNegotiation';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconQrcode = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 3.49691e-07H0V8H3V3H8V3.49691e-07Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 32H32V24H29V29H24V32Z", fill: "currentColor" }),
|
|
6
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32 8V3.49691e-07L24 0V3L29 3V8H32Z", fill: "currentColor" }),
|
|
7
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.04907e-06 24L0 32H8V29L3 29L3 24H1.04907e-06Z", fill: "currentColor" }),
|
|
8
|
+
React.createElement("path", { d: "M5.5 8H8.5V24H5.5V8Z", fill: "currentColor" }),
|
|
9
|
+
React.createElement("path", { d: "M10 8H13V18H10V8Z", fill: "currentColor" }),
|
|
10
|
+
React.createElement("path", { d: "M10 20H13V24H10V20Z", fill: "currentColor" }),
|
|
11
|
+
React.createElement("path", { d: "M14.5 8H17.5V24H14.5V8Z", fill: "currentColor" }),
|
|
12
|
+
React.createElement("path", { d: "M19 14H22V18H19V14Z", fill: "currentColor" }),
|
|
13
|
+
React.createElement("path", { d: "M19 8H22V12H19V8Z", fill: "currentColor" }),
|
|
14
|
+
React.createElement("path", { d: "M19 20H22V24H19V20Z", fill: "currentColor" }),
|
|
15
|
+
React.createElement("path", { d: "M23.5 8H26.5V24H23.5V8Z", fill: "currentColor" })));
|
|
16
|
+
};
|
|
17
|
+
IconQrcode.displayName = 'IconQrcode';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconUpdateLimit = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { d: "M13.75 25.9951H20.75V27.9951H13.75V25.9951Z", fill: "currentColor" }),
|
|
5
|
+
React.createElement("path", { d: "M11.75 25.9951H9.75V27.9951H11.75V25.9951Z", fill: "currentColor" }),
|
|
6
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.25 0.495117H32.75V23.4951H24.75V32.9951H0.75V14.9951H24.75V20.4951H29.75V3.49512H15.25V7.85915L17.6321 5.4771L19.7534 7.59842L13.7533 13.5985L7.75 7.59512L9.87132 5.4738L12.25 7.85248V0.495117ZM3.75 20.9951H21.75V17.9951H3.75V20.9951ZM21.75 23.9951H3.75V29.9951H21.75V23.9951Z", fill: "currentColor" })));
|
|
7
|
+
};
|
|
8
|
+
IconUpdateLimit.displayName = 'IconUpdateLimit';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const IconUserGroup = () => {
|
|
3
|
+
return (React.createElement(React.Fragment, null,
|
|
4
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.9579 11.9857C25.7687 10.8319 26.9697 8.80623 26.9697 6.5C26.9697 2.91015 24.0596 0 20.4697 0C16.8799 0 13.9697 2.91015 13.9697 6.5C13.9697 7.81512 14.3603 9.03902 15.0318 10.062C14.0087 9.39056 12.7848 9 11.4697 9C7.87988 9 4.96973 11.9101 4.96973 15.5C4.96973 17.8098 6.17446 19.8381 7.98984 20.991C4.24146 22.1046 1.32918 25.0095 0.353095 28.9997C0.12257 29.9421 4.13377e-05 30.945 0 31.9992L22.9655 31.9997C22.9654 30.9456 22.8429 29.9421 22.6124 28.9997C22.0075 26.5269 20.659 24.4709 18.8287 22.9997H31.9655C31.9654 21.9456 31.8429 20.9421 31.6124 19.9997C30.6348 16.0032 27.7148 13.0954 23.9579 11.9857ZM20.4697 10C22.4027 10 23.9697 8.433 23.9697 6.5C23.9697 4.567 22.4027 3 20.4697 3C18.5367 3 16.9697 4.567 16.9697 6.5C16.9697 8.433 18.5367 10 20.4697 10ZM16.9898 11.991C16.9623 11.9735 16.9349 11.9558 16.9077 11.938C16.9219 11.9595 16.9359 11.9812 16.9498 12.003C16.9631 11.999 16.9765 11.995 16.9898 11.991ZM17.9365 14.8383C17.9585 15.0559 17.9697 15.2766 17.9697 15.5C17.9697 17.2464 17.281 18.8319 16.1604 19.9997H28.4886C27.3396 16.6083 24.2335 14.4912 20.4828 14.4912C19.5918 14.4912 18.7371 14.6107 17.9365 14.8383ZM15 20.9587C14.986 20.9678 14.972 20.9768 14.9579 20.9857C14.9719 20.9899 14.986 20.9941 15 20.9983V20.9587ZM14.9697 15.5C14.9697 17.433 13.4027 19 11.4697 19C9.53673 19 7.96973 17.433 7.96973 15.5C7.96973 13.567 9.53673 12 11.4697 12C13.4027 12 14.9697 13.567 14.9697 15.5ZM3.47685 28.9997C4.62588 25.6083 7.73205 23.4912 11.4828 23.4912C15.2335 23.4912 18.3396 25.6083 19.4886 28.9997H3.47685Z", fill: "currentColor" })));
|
|
5
|
+
};
|
|
6
|
+
IconUserGroup.displayName = 'IconUserGroup';
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
export declare const IconsList: {
|
|
3
|
+
key: string;
|
|
4
|
+
Element: {
|
|
5
|
+
(): JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
};
|
|
8
|
+
}[];
|
|
2
9
|
export declare type PluxeeIconColors = 'primary' | 'primary-contrast' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'white';
|
|
3
10
|
declare type PluxeeIconProps = {
|
|
4
11
|
icon: string;
|
|
5
12
|
size?: 'lg' | 'md' | 'sm';
|
|
6
13
|
};
|
|
7
|
-
export declare const PluxeeIcon: ({ icon, size }: PluxeeIconProps) => JSX.Element
|
|
14
|
+
export declare const PluxeeIcon: ({ icon, size }: PluxeeIconProps) => JSX.Element;
|
|
8
15
|
export {};
|
|
9
16
|
//# sourceMappingURL=pluxee-icon.d.ts.map
|
|
@@ -27,7 +27,18 @@ import { IconSearch } from './icon-search';
|
|
|
27
27
|
import { IconPlus } from './icon-plus';
|
|
28
28
|
import { Iconlogout } from './icon-logout';
|
|
29
29
|
import { IconChevronDown } from './icon-chevron-down';
|
|
30
|
-
|
|
30
|
+
import { IconCardSlashed } from './icon-card-slashed';
|
|
31
|
+
import { IconClock } from './icon-clock';
|
|
32
|
+
import { IconUpdateLimit } from './icon-update-limit';
|
|
33
|
+
import { IconUserGroup } from './icon-user-group';
|
|
34
|
+
import { IconEyeClosedOutline } from './icon-eye-closed-outline';
|
|
35
|
+
import { IconNegotiation } from './icon-negotiation';
|
|
36
|
+
import { IconQrcode } from './icon-qrcode';
|
|
37
|
+
import { IconIdentification } from './icon-identification';
|
|
38
|
+
import { Icon } from '../icon';
|
|
39
|
+
import { IconPlay } from './icon-play';
|
|
40
|
+
import { IconCircle } from './icon-circle';
|
|
41
|
+
export const IconsList = [
|
|
31
42
|
{ key: 'fa-double-chevron-left', Element: IconDoubleChevronLeft },
|
|
32
43
|
{ key: 'fa-double-chevron-right', Element: IconDoubleChevronRight },
|
|
33
44
|
{ key: 'fa-home', Element: IconHome },
|
|
@@ -59,6 +70,7 @@ const IconsList = [
|
|
|
59
70
|
{ key: 'fa-pen', Element: IconPen },
|
|
60
71
|
{ key: 'fa-pencil-alt', Element: IconPen },
|
|
61
72
|
{ key: 'fa-eye-open-outline', Element: IconEyeOpenOutline },
|
|
73
|
+
{ key: 'fa-eye-closed-outline', Element: IconEyeClosedOutline },
|
|
62
74
|
{ key: 'fa-eye', Element: IconEyeOpenOutline },
|
|
63
75
|
{ key: 'fa-lock', Element: IconLock },
|
|
64
76
|
{ key: 'fa-unlock', Element: IconUnlock },
|
|
@@ -69,12 +81,21 @@ const IconsList = [
|
|
|
69
81
|
{ key: 'fa-search', Element: IconSearch },
|
|
70
82
|
{ key: 'fa-plus', Element: IconPlus },
|
|
71
83
|
{ key: 'fa-logout', Element: Iconlogout },
|
|
72
|
-
{ key: 'fa-chevron-down', Element: IconChevronDown }
|
|
84
|
+
{ key: 'fa-chevron-down', Element: IconChevronDown },
|
|
85
|
+
{ key: 'fa-card-slashed', Element: IconCardSlashed },
|
|
86
|
+
{ key: 'fa-clock-circle', Element: IconClock },
|
|
87
|
+
{ key: 'fa-update-limit', Element: IconUpdateLimit },
|
|
88
|
+
{ key: 'fa-user-group', Element: IconUserGroup },
|
|
89
|
+
{ key: 'fa-negotiation', Element: IconNegotiation },
|
|
90
|
+
{ key: 'fa-qrcode', Element: IconQrcode },
|
|
91
|
+
{ key: 'fa-identification', Element: IconIdentification },
|
|
92
|
+
{ key: 'fa-play', Element: IconPlay },
|
|
93
|
+
{ key: 'fa-circle', Element: IconCircle }
|
|
73
94
|
];
|
|
74
95
|
export const PluxeeIcon = ({ icon, size = 'md' }) => {
|
|
75
96
|
const item = IconsList.find(item => item.key === icon);
|
|
76
97
|
if (!item)
|
|
77
|
-
return
|
|
98
|
+
return React.createElement(Icon, { size: size, icon: icon });
|
|
78
99
|
const { Element } = item;
|
|
79
100
|
return (React.createElement(BaseIcon, { size: size },
|
|
80
101
|
React.createElement(Element, null)));
|
|
@@ -14,7 +14,7 @@ import { positions, Provider } from 'react-alert';
|
|
|
14
14
|
import { AlertTemplate } from './alert-template';
|
|
15
15
|
const options = {
|
|
16
16
|
position: positions.MIDDLE,
|
|
17
|
-
timeout:
|
|
17
|
+
timeout: 10000
|
|
18
18
|
};
|
|
19
19
|
export const AlertProvider = (_a) => {
|
|
20
20
|
var { children } = _a, props = __rest(_a, ["children"]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FormikProps } from 'formik';
|
|
3
|
-
declare type Props = React.
|
|
3
|
+
declare type Props = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
|
|
4
4
|
type?: 'submit' | 'reset' | 'button';
|
|
5
5
|
actions: FormikProps<any>;
|
|
6
6
|
color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
@@ -12,9 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { Button } from '../../../atoms/button';
|
|
14
14
|
export default function Input(props) {
|
|
15
|
+
var _a;
|
|
15
16
|
const { type = 'button', actions, color = 'primary', label, labelLoading = label, className, id } = props, elements = __rest(props, ["type", "actions", "color", "label", "labelLoading", "className", "id"]);
|
|
16
17
|
return (React.createElement("div", null,
|
|
17
|
-
React.createElement(Button, Object.assign({}, elements, { className: className, type: type, color: color }, (id && { 'data-testid': id })), actions.isSubmitting
|
|
18
|
+
React.createElement(Button, Object.assign({}, elements, { className: className, type: type, color: color, disabled: actions.isSubmitting ? true : (_a = elements.disabled) !== null && _a !== void 0 ? _a : false }, (id && { 'data-testid': id })), actions.isSubmitting
|
|
18
19
|
? labelLoading
|
|
19
20
|
: label)));
|
|
20
21
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { FastField } from 'formik';
|
|
2
|
+
import { FastField, Field } from 'formik';
|
|
3
3
|
export default function Checkbox(props) {
|
|
4
|
-
const { name, actions, value = [], options, id = name, tabIndex = 0, disabled } = props;
|
|
4
|
+
const { name, actions, value = [], options, id = name, tabIndex = 0, disabled, fastField = true } = props;
|
|
5
5
|
if (!options.length)
|
|
6
6
|
return null;
|
|
7
7
|
const curValue = actions.values[name] || value || [];
|
|
@@ -21,7 +21,8 @@ export default function Checkbox(props) {
|
|
|
21
21
|
: [...values, value]);
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
+
const Tag = fastField ? FastField : Field;
|
|
24
25
|
return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
|
|
25
|
-
React.createElement(
|
|
26
|
+
React.createElement(Tag, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}`, checked: isChecked(option) }, { disabled }, { className: "form-check-input", type: "checkbox", tabIndex: tabIndex, onChange: handleChange })),
|
|
26
27
|
React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
|
|
27
28
|
}
|
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { FastField, Field } from 'formik';
|
|
2
13
|
import React from 'react';
|
|
3
14
|
import numberHelper from '../../../utils/number-helper';
|
|
4
15
|
export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
|
|
@@ -13,5 +24,7 @@ export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
|
|
|
13
24
|
}
|
|
14
25
|
});
|
|
15
26
|
};
|
|
16
|
-
|
|
27
|
+
const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
|
|
28
|
+
const Tag = fastField ? FastField : Field;
|
|
29
|
+
return (React.createElement(Tag, { name: name }, ({ field }) => React.createElement("input", Object.assign({}, field, restAttrs, { onChange: handleChangeCurrency, min: "0", maxLength: maxLength }))));
|
|
17
30
|
};
|
|
@@ -1,6 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { FastField, Field } from 'formik';
|
|
2
13
|
import React from 'react';
|
|
3
14
|
import ReactInputMask from 'react-input-mask';
|
|
4
15
|
export const InputMask = ({ attrs, mask, name }) => {
|
|
5
|
-
|
|
16
|
+
const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
|
|
17
|
+
const Tag = fastField ? FastField : Field;
|
|
18
|
+
return (React.createElement(Tag, { name: name }, ({ field }) => React.createElement(ReactInputMask, Object.assign({}, field, restAttrs, { mask: mask }))));
|
|
6
19
|
};
|
|
@@ -1,10 +1,23 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import React from 'react';
|
|
2
|
-
import { FastField } from 'formik';
|
|
13
|
+
import { FastField, Field } from 'formik';
|
|
3
14
|
export const InputPrefixSuffix = ({ attrs, suffix, prefix }) => {
|
|
4
15
|
var _a;
|
|
16
|
+
const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
|
|
17
|
+
const Tag = fastField ? FastField : Field;
|
|
5
18
|
return (React.createElement("div", { className: "position-relative" },
|
|
6
19
|
prefix && React.createElement("div", { className: "input-prefix" }, typeof prefix === 'string' ? React.createElement("span", null, prefix) : prefix),
|
|
7
|
-
React.createElement(
|
|
20
|
+
React.createElement(Tag, Object.assign({}, restAttrs, { readOnly: true, onFocus: (event) => {
|
|
8
21
|
event.currentTarget.readOnly = false;
|
|
9
22
|
} }, ((prefix && typeof prefix === 'string') && {
|
|
10
23
|
style: {
|
|
@@ -12,6 +12,7 @@ export interface FormBuildItemInput extends Omit<FormBuilderBasicsItem, 'prefix'
|
|
|
12
12
|
};
|
|
13
13
|
suffix?: string | React.ReactNode;
|
|
14
14
|
prefix?: string | React.ReactNode;
|
|
15
|
+
fastField?: boolean;
|
|
15
16
|
}
|
|
16
17
|
declare type Props = Omit<FormBuildItemInput, 'component'> & {
|
|
17
18
|
actions: FormikProps<any>;
|
|
@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import { FastField } from 'formik';
|
|
13
|
+
import { FastField, Field } from 'formik';
|
|
14
14
|
import classNames from 'classnames';
|
|
15
15
|
import { InputCurrency } from './input-currency';
|
|
16
16
|
import { InputMask } from './input-mask';
|
|
17
17
|
import { InputPrefixSuffix } from './input-prefix-suffix';
|
|
18
18
|
export default function Input(props) {
|
|
19
|
-
const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix"]);
|
|
19
|
+
const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix", "fastField"]);
|
|
20
20
|
const validOptions = {
|
|
21
21
|
alt: elements.alt,
|
|
22
22
|
autoComplete: elements.autoComplete,
|
|
@@ -57,15 +57,17 @@ export default function Input(props) {
|
|
|
57
57
|
};
|
|
58
58
|
const curValue = actions.values[name];
|
|
59
59
|
const classes = classNames(className, 'form-control');
|
|
60
|
-
const
|
|
60
|
+
const attrsInput = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
|
|
61
61
|
id, 'data-testid': id, type: type === 'number' ? 'text' : type, tabIndex, autoComplete: 'none', onChange: handleChange });
|
|
62
|
+
const attrs = Object.assign(Object.assign({}, attrsInput), { fastField });
|
|
62
63
|
if (currency)
|
|
63
64
|
return React.createElement(InputCurrency, Object.assign({}, { name, attrs, currency, handleChange }));
|
|
64
65
|
if (mask)
|
|
65
66
|
return React.createElement(InputMask, Object.assign({}, { name, attrs, mask }));
|
|
66
67
|
if (prefix || suffix)
|
|
67
68
|
return React.createElement(InputPrefixSuffix, Object.assign({}, { attrs, suffix, prefix }));
|
|
68
|
-
|
|
69
|
+
const Tag = fastField ? FastField : Field;
|
|
70
|
+
return (React.createElement(Tag, Object.assign({}, attrsInput, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
|
|
69
71
|
event.currentTarget.readOnly = false;
|
|
70
72
|
} })));
|
|
71
73
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { FastField } from 'formik';
|
|
2
|
+
import { FastField, Field } from 'formik';
|
|
3
3
|
export default function Radio(props) {
|
|
4
|
-
const { name, actions, value, options, id = name, tabIndex = 0, disabled } = props;
|
|
4
|
+
const { name, actions, value, options, id = name, tabIndex = 0, disabled, fastField = true } = props;
|
|
5
5
|
if (!options.length)
|
|
6
6
|
return null;
|
|
7
7
|
const curValue = actions.values[name] || value;
|
|
@@ -18,7 +18,8 @@ export default function Radio(props) {
|
|
|
18
18
|
actions.setFieldValue(name, event.currentTarget.value);
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
|
+
const Tag = fastField ? FastField : Field;
|
|
21
22
|
return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
|
|
22
|
-
React.createElement(
|
|
23
|
+
React.createElement(Tag, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
|
|
23
24
|
React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
|
|
24
25
|
}
|