sccoreui 3.7.1 → 3.7.2

package/dist/App.scss

@@ -557,4 +557,10 @@ div:has(ul.date_filter) .p-datepicker-footer {
     }
   }
 
+}
+
+.customNumberField{
+  .p-inputnumber-input {
+    padding-left: 24px;
+  }
 }

package/dist/components/form/form-fields/form-fields.js

@@ -9,17 +9,18 @@ const dropdown_1 = require("primereact/dropdown");
 const multiselect_1 = require("primereact/multiselect");
 const inputtextarea_1 = require("primereact/inputtextarea");
 const max_1 = tslib_1.__importStar(require("react-phone-number-input/max"));
+const inputnumber_1 = require("primereact/inputnumber");
 const InputTextField = (props) => {
-    const { errors, touched, name, length, label, placeholder, optional, max } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: max, placeholder: placeholder }, field, { className: `'fullWidth' ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+    const { errors, touched, name, length, label, placeholder, optional, maxLength } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, placeholder: placeholder }, field, { className: `'fullWidth' ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
 };
 const InputNumberField = (props) => {
-    const { errors, touched, name, length, label, placeholder, optional, min, max } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "number" }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ type: "number", min: min, maxLength: max, placeholder: placeholder }, field, { className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+    const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "number" }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, maxLength: maxLength, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value), className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
 };
 const InputCurrencyField = (props) => {
-    const { errors, touched, name, length, label, placeholder, optional, min, max } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "number" }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ min: min, maxLength: max, type: "number", placeholder: placeholder }, field, { className: `fullWidth ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+    const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "number" }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value), maxFractionDigits: 2, placeholder: placeholder, className: `fullWidth customNumberField ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'w-18rem'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: `errorField` }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
 };
 const InputTextAreaField = (props) => {
     const [charCount, setCharCount] = (0, react_1.useState)(0);
@@ -40,7 +41,7 @@ const MultiSelectField = (props) => {
 };
 const PhoneNumberField = (props) => {
     const [defaultCountry, setDefaultCountry] = (0, react_1.useState)('US');
-    const { errors, touched, name, length, label, placeholder, optional, position } = props;
+    const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue } = props;
     const customCountry = (props) => {
         const customCountryTemplate = (options) => {
             let callCode = (0, max_1.getCountryCallingCode)(options.value);
@@ -57,6 +58,25 @@ const PhoneNumberField = (props) => {
                     setDefaultCountry(e.value);
                 } }) })));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, name: "phoneNumber", countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: defaultCountry, limitMaxLength: true, className: `fullWidth flex align-items-center ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? 'w-18rem' : 'w-18rem'}` }, field))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, name: "phoneNumber", countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: defaultCountry, limitMaxLength: true, className: `fullWidth flex align-items-center ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? 'w-18rem' : 'w-18rem'}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("small", Object.assign({ className: 'errorField' }, { children: errors[name] }))) : (0, jsx_runtime_1.jsx)("small", { children: "\u00A0" })] })));
 };
+// const InputGroupField = (props: any) => {
+//     const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue } = props;
+//     return (
+//         <div className="flex flex-column gap-1">
+//             {optional && <label className="font-medium text-base mb-1 w-full flex justify-content-between" htmlFor={name}>{label}<span className="text-base font-medium font-italic text-gray-600">Optional</span></label>}
+//             {!optional && <label className="font-medium text-base mb-1" htmlFor={name}>{label}</label>}
+//             <Field type="text" name={name}>
+//                 {
+//                     ({ field }: any) => (
+//                         <div {...field}></div>
+//                     )
+//                 }
+//             </Field>
+//             {errors[name] && touched[name] ? (
+//                 <small className='errorField'>{errors[name]}</small>
+//             ) : <small>&nbsp;</small>}
+//         </div>
+//     )
+// }
 exports.default = { InputTextField, InputNumberField, InputCurrencyField, InputTextAreaField, DropDownField, MultiSelectField, PhoneNumberField };

package/dist/components/form/form.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const formik_1 = require("formik");
 const FormComponent = (props) => {
     const { values, validations, children } = props;
-    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, Object.assign({ initialValues: values, validationSchema: validations, onSubmit: (values) => values }, { children: ({ errors, touched, isValid, values, actions }) => ((0, jsx_runtime_1.jsx)(formik_1.Form, { children: children({ errors, touched, isValid, values, actions }) })) })));
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, Object.assign({ initialValues: values, validationSchema: validations, onSubmit: (values) => values }, { children: ({ errors, touched, isValid, values, actions, resetForm, setFieldValue, submitForm }) => ((0, jsx_runtime_1.jsx)(formik_1.Form, { children: children({ errors, touched, isValid, values, actions, resetForm, submitForm, setFieldValue }) })) })));
 };
 exports.default = FormComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "3.7.1",
+  "version": "3.7.2",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",