@weareconceptstudio/form 0.0.8 → 0.1.0

package/dist/form/BaseForm.js

@@ -40,6 +40,8 @@ const BaseForm = forwardRef(({ initialValues: defaultValues, values, children, o
     }, [methods, onSubmit]);
     useImperativeHandle(ref, () => ({
         ...methods,
+        isValid: methods.formState.isValid,
+        isFormTouched: Object.keys(methods.formState.touchedFields).length > 0,
         submit: () => methods.handleSubmit(handleSubmit)(),
     }));
     return (React.createElement(FormProvider, { ...methods },

package/dist/input/BaseInput/index.js

@@ -2,7 +2,7 @@ import React, { useRef, cloneElement } from 'react';
 import classNames from 'classnames';
 import { hasPrefixSuffix, hasAddon } from './utils';
 const BaseInput = (props) => {
-    const { inputElement: inputEl, addonBefore, addonAfter, prefix, suffix, allowClear, disabled, readOnly, components, value, className, children } = props;
+    const { inputElement: inputEl, addonBefore, addonAfter, prefix, suffix, allowClear, disabled, readOnly, components, value, containerClassName, children } = props;
     const inputElement = children ?? inputEl;
     // ======================== Components ======================== //
     const AffixWrapperComponent = components?.affixWrapper || 'div';
@@ -52,7 +52,7 @@ const BaseInput = (props) => {
                 addonAfter && React.createElement(GroupAddonComponent, null, addonAfter))));
     }
     const classString = classNames('base-input-container', {
-        [`${className}-container`]: className,
+        [containerClassName]: containerClassName,
     });
     return (React.createElement("div", { className: classString }, cloneElement(element, {
         className: classNames({

package/dist/input/TextArea/index.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import BaseInput from '../BaseInput';
 import { useInput } from '../../form/hooks/useInput';
+import { useTranslation } from '@weareconceptstudio/core';
 const TextArea = (props) => {
-    const { field } = useInput({
-        name: props.name,
-    });
+    const { translate } = useTranslation();
+    const { name, placeholder, rows = 5, onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, autoComplete } = props;
+    const input = name ? useInput({ name, onChange, onBlur }) : null;
+    const field = input?.field || {
+        onChange: onChange,
+        onBlur: onBlur,
+    };
     return (React.createElement(BaseInput, { ...props },
-        React.createElement("textarea", { ...field, rows: 5 })));
+        React.createElement("textarea", { ...field, rows: rows, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, autoComplete: autoComplete, placeholder: translate(placeholder) })));
 };
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';

package/dist/select/index.js

@@ -52,6 +52,13 @@ const Select = (props) => {
             select_empty || empty,
             React.createElement("p", { className: `no-options` }, 'No Data')));
     };
+    //! Custom Styles
+    const customStyles = {
+        menuList: (provided) => ({
+            ...provided,
+            maxHeight: '144px',
+        }),
+    };
     const options = useMemo(() => {
         const newOptions = [];
         const labelKey = optionKey ?? 'name';
@@ -82,7 +89,7 @@ const Select = (props) => {
     return (React.createElement(ReactSelect
     // unstyled
     // menuIsOpen={true}
-    , { ...selectProps, options: options, isMulti: multiple, isLoading: loading, isDisabled: disabled, className: classString, isClearable: allowClear, isSearchable: allowSearch, components: customComponents, classNamePrefix: 'react-select', noOptionsMessage: customNoOptionsMessage, value: options.filter((opt) => (multiple ? selectProps.value.includes(opt.value) : opt.value === selectProps.value)) }));
+    , { ...selectProps, options: options, isMulti: multiple, isLoading: loading, styles: customStyles, isDisabled: disabled, className: classString, isClearable: allowClear, isSearchable: allowSearch, components: customComponents, classNamePrefix: 'react-select', noOptionsMessage: customNoOptionsMessage, value: options.filter((opt) => (multiple ? selectProps.value.includes(opt.value) : opt.value === selectProps.value)) }));
 };
 if (process.env.NODE_ENV !== 'production') {
     Select.displayName = 'Select';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/form",
-	"version": "0.0.8",
+	"version": "0.1.0",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",