@gluestack-ui/core
Version:
Universal UI components for React Native, Expo, and Next.js
64 lines • 3.41 kB
JSX
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 React from 'react';
import { ariaAttr } from '@gluestack-ui/utils/common';
export const FormControlContext = React.createContext({});
export function useFormControlProvider(props) {
const { id: idProp, isRequired, isInvalid, isDisabled, isReadOnly } = props, htmlProps = __rest(props, ["id", "isRequired", "isInvalid", "isDisabled", "isReadOnly"]);
var idCounter = 0;
function uniqueId(prefix = '') {
var id = ++idCounter;
return prefix + id;
}
const idTemp = uniqueId();
const id = idProp || `field-${idTemp}`;
const labelId = `${id}-label`;
const feedbackId = `${id}-feedback`;
const helpTextId = `${id}-helptext`;
const [hasFeedbackText, setHasFeedbackText] = React.useState(false);
const [hasHelpText, setHasHelpText] = React.useState(false);
const context = {
isRequired: !!isRequired,
isInvalid: !!isInvalid,
isReadOnly: !!isReadOnly,
isDisabled: !!isDisabled,
hasFeedbackText,
setHasFeedbackText,
hasHelpText,
setHasHelpText,
id: id,
labelId,
feedbackId,
helpTextId,
htmlProps,
};
return context;
}
export function useFormControl(props) {
const field = useFormControlContext();
const describedBy = [];
if (field === null || field === void 0 ? void 0 : field.hasFeedbackText)
describedBy.push(field === null || field === void 0 ? void 0 : field.feedbackId);
if (field === null || field === void 0 ? void 0 : field.hasHelpText)
describedBy.push(field === null || field === void 0 ? void 0 : field.helpTextId);
const ariaDescribedBy = describedBy.join(' ');
const { isInvalid, isDisabled, isReadOnly, isRequired } = props, cleanProps = __rest(props, ["isInvalid", "isDisabled", "isReadOnly", "isRequired"]);
let id = props === null || props === void 0 ? void 0 : props.id;
if (!id && (field === null || field === void 0 ? void 0 : field.id)) {
id = `${field === null || field === void 0 ? void 0 : field.id}-input`;
}
return Object.assign(Object.assign({}, cleanProps), { 'id': id, 'disabled': isDisabled || (field === null || field === void 0 ? void 0 : field.isDisabled), 'readOnly': isReadOnly || (field === null || field === void 0 ? void 0 : field.isReadOnly), 'required': isRequired || (field === null || field === void 0 ? void 0 : field.isRequired), 'aria-invalid': ariaAttr(isInvalid || (field === null || field === void 0 ? void 0 : field.isInvalid)), 'aria-required': ariaAttr(isRequired || (field === null || field === void 0 ? void 0 : field.isRequired)), 'aria-readonly': ariaAttr(isReadOnly || (field === null || field === void 0 ? void 0 : field.isReadOnly)), 'aria-describedby': ariaDescribedBy || undefined });
}
export const useFormControlContext = () => {
return React.useContext(FormControlContext);
};
//# sourceMappingURL=useFormControl.jsx.map