suomifi-ui-components
Version:
Suomi.fi UI component library
215 lines (209 loc) • 10.5 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var aria = require('../../../utils/aria/aria.js');
var AutoId = require('../../utils/AutoId/AutoId.js');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../../theme/SpacingProvider/SpacingProvider.js');
require('../../../reset/HtmlA/HtmlA.js');
require('../../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
require('../../../reset/HtmlInput/HtmlInput.js');
require('../../../reset/HtmlLabel/HtmlLabel.js');
require('../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../reset/HtmlLi/HtmlLi.js');
require('../../../reset/HtmlNav/HtmlNav.js');
require('../../../reset/HtmlOl/HtmlOl.js');
require('../../../reset/HtmlSpan/HtmlSpan.js');
var HtmlTextarea = require('../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../reset/HtmlUl/HtmlUl.js');
require('../../../reset/HtmlTable/HtmlTable.js');
require('../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../reset/HtmlTable/HtmlTableCell.js');
var common = require('../../../utils/common/common.js');
var Label = require('../Label/Label.js');
var HintText = require('../HintText/HintText.js');
var StatusText = require('../StatusText/StatusText.js');
var Textarea_baseStyles = require('./Textarea.baseStyles.js');
var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
var spacing = require('../../theme/utils/spacing.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var baseClassName = 'fi-textarea';
var textareaClassNames = {
fullWidth: "".concat(baseClassName, "--full-width"),
textareaContainer: "".concat(baseClassName, "_textarea-element-container"),
textarea: "".concat(baseClassName, "_textarea"),
resizeHorizontal: "".concat(baseClassName, "_textarea-resize--horizontal"),
resizeBoth: "".concat(baseClassName, "_textarea-resize--both"),
resizeNone: "".concat(baseClassName, "_textarea-resize--none"),
disabled: "".concat(baseClassName, "--disabled"),
error: "".concat(baseClassName, "--error"),
statusTextHasContent: "".concat(baseClassName, "_statusText--has-content"),
bottomWrapper: "".concat(baseClassName, "_bottom-wrapper"),
characterCounter: "".concat(baseClassName, "_character-counter"),
characterCounterError: "".concat(baseClassName, "_character-counter--error")
};
var BaseTextarea = function BaseTextarea(props) {
var _a, _b, _c, _d;
var id = props.id,
className = props.className,
_e = props.disabled,
disabled = _e === void 0 ? false : _e,
children = props.children,
onClick = props.onClick,
onChangeProp = props.onChange,
labelMode = props.labelMode,
labelText = props.labelText,
hintText = props.hintText,
status = props.status,
statusText = props.statusText,
visualPlaceholder = props.visualPlaceholder,
resize = props.resize,
optionalText = props.optionalText,
ariaDescribedBy = props["aria-describedby"],
fullWidth = props.fullWidth,
style = props.style,
forwardedRef = props.forwardedRef,
_f = props.statusTextAriaLiveMode,
statusTextAriaLiveMode = _f === void 0 ? 'assertive' : _f,
tooltipComponent = props.tooltipComponent,
characterLimit = props.characterLimit,
ariaCharactersRemainingText = props.ariaCharactersRemainingText,
ariaCharactersExceededText = props.ariaCharactersExceededText,
rest = tslib.__rest(props, ["id", "className", "disabled", "children", "onClick", "onChange", "labelMode", "labelText", "hintText", "status", "statusText", "visualPlaceholder", "resize", "optionalText", 'aria-describedby', "fullWidth", "style", "forwardedRef", "statusTextAriaLiveMode", "tooltipComponent", "characterLimit", "ariaCharactersRemainingText", "ariaCharactersExceededText"]);
var _g = spacing.separateMarginProps(rest),
passProps = _g[1];
var _h = React.useState(0),
charCount = _h[0],
setCharCount = _h[1];
var _j = React.useState(''),
characterCounterAriaText = _j[0],
setCharacterCounterAriaText = _j[1];
var _k = React.useState(null),
typingTimer = _k[0],
setTypingTimer = _k[1];
var _l = React.useState(false),
isMounted = _l[0],
setIsMounted = _l[1];
React.useEffect(function () {
setIsMounted(true);
return function () {
setIsMounted(false);
};
}, []);
var inputRef = React.useRef(null);
var onClickProps = !!disabled ? {} : {
onMouseDown: onClick
};
var statusTextId = statusText ? "".concat(id, "-statusText") : undefined;
var hintTextId = hintText ? "".concat(id, "-hintText") : undefined;
React.useEffect(function () {
var _a, _b;
if (characterLimit !== undefined && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length)) {
setCharCount((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.length);
}
}, []);
var handleOnChange = function handleOnChange(event) {
if (typingTimer) {
clearTimeout(typingTimer);
}
if (characterLimit !== undefined && ariaCharactersRemainingText && ariaCharactersExceededText) {
var charCountInInput_1 = event.target.value.length;
setCharCount(charCountInInput_1);
var newTypingTimer = setTimeout(function () {
if (isMounted) {
setCharacterCounterAriaText(charCountInInput_1 <= characterLimit ? ariaCharactersRemainingText(characterLimit - charCountInInput_1) : ariaCharactersExceededText(charCountInInput_1 - characterLimit));
}
}, 1500);
setTypingTimer(newTypingTimer);
}
if (!!onChangeProp) {
onChangeProp(event);
}
};
var definedRef = forwardedRef || null;
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(baseClassName, className, (_a = {}, _a[textareaClassNames.disabled] = !!disabled, _a[textareaClassNames.error] = status === 'error' && !disabled, _a[textareaClassNames.fullWidth] = fullWidth, _a)),
style: style
}, /*#__PURE__*/React__default.default.createElement(Label.Label, {
htmlFor: id,
labelMode: labelMode,
optionalText: optionalText,
tooltipComponent: tooltipComponent
}, labelText), /*#__PURE__*/React__default.default.createElement(HintText.HintText, {
id: hintTextId
}, hintText), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: textareaClassNames.textareaContainer
}, /*#__PURE__*/React__default.default.createElement(HtmlTextarea.HtmlTextarea, tslib.__assign({
id: id,
className: classnames__default.default(textareaClassNames.textarea, (_b = {}, _b[textareaClassNames.resizeBoth] = resize === 'both', _b[textareaClassNames.resizeHorizontal] = resize === 'horizontal', _b[textareaClassNames.resizeNone] = resize === 'none', _b)),
disabled: disabled,
defaultValue: children,
forwardedRef: common.forkRefs(inputRef, definedRef),
placeholder: visualPlaceholder,
"aria-invalid": status === 'error'
}, aria.getConditionalAriaProp('aria-describedby', [statusTextId, hintTextId, ariaDescribedBy]), {
onChange: handleOnChange
}, passProps, onClickProps))), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: textareaClassNames.bottomWrapper
}, /*#__PURE__*/React__default.default.createElement(StatusText.StatusText, {
id: statusTextId,
className: classnames__default.default((_c = {}, _c[textareaClassNames.statusTextHasContent] = !!statusText, _c)),
status: status,
disabled: disabled,
ariaLiveMode: statusTextAriaLiveMode
}, characterLimit && ( /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, characterCounterAriaText)), statusText), characterLimit && ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(textareaClassNames.characterCounter, (_d = {}, _d[textareaClassNames.characterCounterError] = charCount > characterLimit, _d))
}, "".concat(charCount, "/").concat(characterLimit)))));
};
var StyledTextarea = styled.styled(function (_a) {
_a.theme;
_a.globalMargins;
var passProps = tslib.__rest(_a, ["theme", "globalMargins"]);
return /*#__PURE__*/React__default.default.createElement(BaseTextarea, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-fz1c6p-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = tslib.__rest(_a, ["theme", "globalMargins"]);
var _b = spacing.separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.textarea, marginProps);
return Textarea_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
var propId = props.id,
passProps = tslib.__rest(props, ["id"]);
return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React__default.default.createElement(StyledTextarea, tslib.__assign({
theme: suomifiTheme,
id: id,
globalMargins: margins,
forwardedRef: ref
}, passProps));
});
});
});
});
Textarea.displayName = 'Textarea';
var templateObject_1;
exports.Textarea = Textarea;
//# sourceMappingURL=Textarea.js.map