suomifi-ui-components
Version:
Suomi.fi UI component library
200 lines (197 loc) • 8.44 kB
JavaScript
import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { Component } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { IconSearch } from 'suomifi-icons';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import '../../theme/SpacingProvider/SpacingProvider.js';
import { getConditionalAriaProp } from '../../../utils/aria/aria.js';
import '../../../reset/HtmlA/HtmlA.js';
import { HtmlButton } from '../../../reset/HtmlButton/HtmlButton.js';
import { HtmlDiv } from '../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../reset/HtmlH/HtmlH.js';
import { HtmlInput } from '../../../reset/HtmlInput/HtmlInput.js';
import '../../../reset/HtmlLabel/HtmlLabel.js';
import '../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../reset/HtmlLi/HtmlLi.js';
import '../../../reset/HtmlNav/HtmlNav.js';
import '../../../reset/HtmlOl/HtmlOl.js';
import { HtmlSpan } from '../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../reset/HtmlUl/HtmlUl.js';
import '../../../reset/HtmlTable/HtmlTable.js';
import '../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../reset/HtmlTable/HtmlTableCell.js';
import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
import { StatusText } from '../../Form/StatusText/StatusText.js';
import { Label } from '../../Form/Label/Label.js';
import { baseStyles } from './PageInput.baseStyles.js';
var baseClassName = 'fi-page-input';
var pageInputClassNames = {
error: "".concat(baseClassName, "--error"),
notEmpty: "".concat(baseClassName, "--not-empty"),
styleWrapper: "".concat(baseClassName, "_wrapper"),
inputElement: "".concat(baseClassName, "_input"),
inputElementContainer: "".concat(baseClassName, "_input-element-container"),
functionalityContainer: "".concat(baseClassName, "_functionality-container"),
statusTextHasContent: "".concat(baseClassName, "_statusText--has-content"),
button: "".concat(baseClassName, "_button"),
pageInputIcon: "".concat(baseClassName, "_button-icon")
};
var BasePageInput = function (_super) {
__extends(BasePageInput, _super);
function BasePageInput() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
value: '',
status: 'default',
inputValue: undefined
};
_this.inputRef = /*#__PURE__*/React.createRef();
return _this;
}
BasePageInput.prototype.render = function () {
var _a, _b;
var _this = this;
var _c = this.props,
className = _c.className,
labelText = _c.labelText,
pageInputButtonLabel = _c.pageInputButtonLabel,
propOnPageChange = _c.onPageChange,
statusText = _c.statusText,
visualPlaceholder = _c.visualPlaceholder,
id = _c.id;
_c.theme;
var maxValue = _c.maxValue,
invalidValueErrorText = _c.invalidValueErrorText,
ariaDescribedBy = _c["aria-describedby"],
_d = _c.statusTextAriaLiveMode,
statusTextAriaLiveMode = _d === void 0 ? 'assertive' : _d,
passProps = __rest(_c, ["className", "labelText", "pageInputButtonLabel", "onPageChange", "statusText", "visualPlaceholder", "id", "theme", "maxValue", "invalidValueErrorText", 'aria-describedby', "statusTextAriaLiveMode"]);
var statusTextId = "".concat(id, "-statusText");
var setValue = function setValue(newValue) {
_this.setState({
value: newValue
});
};
var onPageChange = function onPageChange() {
if (!!propOnPageChange) {
propOnPageChange(_this.state.value);
}
setValue('');
};
var onChange = function onChange(event) {
if (event.target.value === '' || !event.target.value) {
_this.setState({
status: 'default'
});
}
_this.setState({
inputValue: event.target.value
});
setValue(event.target.value);
var parsedValue = parseInt(event.target.value, 10) || null;
var verifiedValue = parsedValue && parsedValue > 0 && parsedValue <= maxValue ? parsedValue : null;
if (event.target.value !== '' && (verifiedValue === null || verifiedValue.toString().length !== event.target.value.length)) {
_this.setState({
status: 'error'
});
} else {
_this.setState({
status: 'default'
});
}
};
var onKeyPress = function onKeyPress(event) {
if (!!_this.state.value && _this.state.status !== 'error' && (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
onPageChange();
}
};
var onKeyDown = function onKeyDown(event) {
if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
event.preventDefault();
}
};
var buttonClick = function buttonClick() {
var tempValue = _this.state.value;
setValue('');
setTimeout(function () {
if (_this.inputRef.current) {
_this.inputRef.current.focus();
}
}, 100);
setTimeout(function () {
if (!!propOnPageChange) {
propOnPageChange(tempValue);
}
}, 200);
};
var pageInputButtonDerivedProps = __assign({
className: pageInputClassNames.button
}, !!this.state.value && this.state.status !== 'error' ? {
onClick: buttonClick
} : {
tabIndex: -1,
hidden: true
});
return /*#__PURE__*/React.createElement(HtmlDiv, {
className: classnames(className, baseClassName, (_a = {}, _a[pageInputClassNames.error] = this.state.status === 'error', _a[pageInputClassNames.notEmpty] = !!this.state.value && this.state.status !== 'error', _a))
}, /*#__PURE__*/React.createElement(HtmlSpan, {
className: pageInputClassNames.styleWrapper
}, /*#__PURE__*/React.createElement(Label, {
htmlFor: id,
labelMode: "hidden"
}, labelText), /*#__PURE__*/React.createElement(HtmlDiv, {
className: pageInputClassNames.functionalityContainer
}, /*#__PURE__*/React.createElement(HtmlDiv, {
className: pageInputClassNames.inputElementContainer
}, /*#__PURE__*/React.createElement(HtmlInput, __assign({}, passProps, getConditionalAriaProp('aria-describedby', [!!statusText ? statusTextId : undefined, ariaDescribedBy]), {
size: 6,
"aria-invalid": this.state.status === 'error',
id: id,
forwardedRef: this.inputRef,
className: pageInputClassNames.inputElement,
value: this.state.value,
placeholder: visualPlaceholder,
onChange: onChange,
onKeyPress: onKeyPress,
onKeyDown: onKeyDown,
type: "text",
inputMode: "numeric",
pattern: "[0-9]*"
}))), /*#__PURE__*/React.createElement(HtmlButton, __assign({}, pageInputButtonDerivedProps), /*#__PURE__*/React.createElement(VisuallyHidden, null, pageInputButtonLabel), /*#__PURE__*/React.createElement(IconSearch, {
"aria-hidden": true,
className: pageInputClassNames.pageInputIcon
}))), /*#__PURE__*/React.createElement(StatusText, {
id: statusTextId,
className: classnames((_b = {}, _b[pageInputClassNames.statusTextHasContent] = !!this.state.status, _b)),
status: this.state.status,
ariaLiveMode: statusTextAriaLiveMode
}, this.state.status === 'error' ? invalidValueErrorText(this.state.inputValue) : '')));
};
return BasePageInput;
}(Component);
var StyledPageInput = styled(BasePageInput).withConfig({
componentId: "sc-4ldkoz-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return baseStyles(theme);
});
var PageInput = function PageInput(props) {
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(StyledPageInput, __assign({
theme: suomifiTheme
}, props));
});
};
PageInput.displayName = 'PageInput';
var templateObject_1;
export { PageInput };
//# sourceMappingURL=PageInput.js.map