@atlaskit/form
Version:
A form allows people to input information.
133 lines (125 loc) • 6.37 kB
JavaScript
/* character-counter-field.tsx generated by @compiled/babel-plugin v0.39.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./character-counter-field.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { Fragment } from 'react';
import CharacterCounter from './character-counter';
import Field from './field';
import { ErrorMessage, HelperMessage, MessageWrapper } from './messages';
// Override label specific margin block end to fix double spacing issue
var fieldWrapperStyles = {
root: "_14uxze3t"
};
// Override helper message margins to fix inconsistent spacing issue
var helperMessageWrapperStyles = {
root: "_6rth1b66 _6ul5ze3t"
};
/**
* __Character Counter Field__
*
* A field component that wraps the standard Field with automatic character count validation.
* Validates minimum and maximum character limits and displays a character counter.
*/
export default function CharacterCounterField(_ref) {
var maxCharacters = _ref.maxCharacters,
minCharacters = _ref.minCharacters,
children = _ref.children,
userValidate = _ref.validate,
overMaximumMessage = _ref.overMaximumMessage,
underMaximumMessage = _ref.underMaximumMessage,
underMinimumMessage = _ref.underMinimumMessage,
helperMessage = _ref.helperMessage,
defaultValue = _ref.defaultValue,
id = _ref.id,
isRequired = _ref.isRequired,
isDisabled = _ref.isDisabled,
label = _ref.label,
elementAfterLabel = _ref.elementAfterLabel,
name = _ref.name,
testId = _ref.testId;
// Default validation function for character limits
// __TOO_SHORT__ and __TOO_LONG__ are default error codes recognised by the CharacterCounter component
var validateCharacterCount = function validateCharacterCount(value) {
var stringValue = String(value || '');
var length = stringValue.length;
// Check minimum length
if (minCharacters !== undefined && length < minCharacters) {
return '__TOO_SHORT__';
}
// Check maximum length
if (maxCharacters !== undefined && length > maxCharacters) {
return '__TOO_LONG__';
}
return undefined;
};
// Combine user validation and character validation
// Any user defined validation takes priority over character validation
// If there is no user defined validation for character limits e.g. used maxLength prior to CharacterCounterField,
// use the default error codes and display the appropriate error message
var combinedValidate = function combinedValidate(value, formState, fieldState) {
// First run character validation
var characterError = validateCharacterCount(value);
// Then run user's custom validation if provided
var userError = userValidate === null || userValidate === void 0 ? void 0 : userValidate(value, formState, fieldState);
// If user validation returns a promise, handle it
if (userError instanceof Promise) {
return userError.then(function (error) {
// User error takes priority over character validation
return error || characterError;
});
}
// User error takes priority over character validation
return userError || characterError;
};
return /*#__PURE__*/React.createElement("div", {
className: ax([fieldWrapperStyles.root])
}, /*#__PURE__*/React.createElement(Field, {
defaultValue: defaultValue,
id: id,
isRequired: isRequired,
isDisabled: isDisabled,
label: label,
elementAfterLabel: elementAfterLabel,
name: name,
testId: testId,
validate: combinedValidate
}, function (_ref2) {
var extendedFieldProps = _ref2.fieldProps,
error = _ref2.error,
valid = _ref2.valid,
meta = _ref2.meta;
// Determine if error is a character count violation (handled by CharacterCounter)
// or an external validation error (needs ErrorMessage)
var isCharacterCountViolation = error === '__TOO_SHORT__' || error === '__TOO_LONG__';
var showExternalError = error && !isCharacterCountViolation;
var showCharacterCounter = (maxCharacters !== undefined || minCharacters !== undefined) && !showExternalError;
// Extend aria-describedby to reference the appropriate message component
var fieldPropsWithCounter = _objectSpread(_objectSpread({}, extendedFieldProps), {}, {
'aria-describedby': showCharacterCounter ? "".concat(extendedFieldProps['aria-describedby'], " ").concat(extendedFieldProps.id, "-character-counter").trim() : extendedFieldProps['aria-describedby']
});
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement("div", {
className: ax([helperMessageWrapperStyles.root])
}, /*#__PURE__*/React.createElement(HelperMessage, {
testId: "".concat(testId, "-helper")
}, helperMessage))), children({
fieldProps: fieldPropsWithCounter,
error: error,
valid: valid,
meta: meta
}), /*#__PURE__*/React.createElement(MessageWrapper, null, showExternalError && /*#__PURE__*/React.createElement(ErrorMessage, {
testId: "".concat(testId, "-error")
}, error)), showCharacterCounter && /*#__PURE__*/React.createElement(CharacterCounter, {
maxCharacters: maxCharacters,
minCharacters: minCharacters,
currentValue: String(extendedFieldProps.value || ''),
shouldShowAsError: isCharacterCountViolation,
overMaximumMessage: overMaximumMessage,
underMaximumMessage: underMaximumMessage,
underMinimumMessage: underMinimumMessage,
testId: "".concat(testId, "-character-counter")
}));
}));
}