suomifi-ui-components
Version:
Suomi.fi UI component library
207 lines (201 loc) • 9.09 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var suomifiIcons = require('suomifi-icons');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
require('../../theme/SpacingProvider/SpacingProvider.js');
var aria = require('../../../utils/aria/aria.js');
require('../../../reset/HtmlA/HtmlA.js');
var HtmlButton = require('../../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
var HtmlInput = 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');
var HtmlSpan = require('../../../reset/HtmlSpan/HtmlSpan.js');
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 VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
var StatusText = require('../../Form/StatusText/StatusText.js');
var Label = require('../../Form/Label/Label.js');
var PageInput_baseStyles = require('./PageInput.baseStyles.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-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) {
tslib.__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__default.default.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 = tslib.__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 = tslib.__assign({
className: pageInputClassNames.button
}, !!this.state.value && this.state.status !== 'error' ? {
onClick: buttonClick
} : {
tabIndex: -1,
hidden: true
});
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(className, baseClassName, (_a = {}, _a[pageInputClassNames.error] = this.state.status === 'error', _a[pageInputClassNames.notEmpty] = !!this.state.value && this.state.status !== 'error', _a))
}, /*#__PURE__*/React__default.default.createElement(HtmlSpan.HtmlSpan, {
className: pageInputClassNames.styleWrapper
}, /*#__PURE__*/React__default.default.createElement(Label.Label, {
htmlFor: id,
labelMode: "hidden"
}, labelText), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: pageInputClassNames.functionalityContainer
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: pageInputClassNames.inputElementContainer
}, /*#__PURE__*/React__default.default.createElement(HtmlInput.HtmlInput, tslib.__assign({}, passProps, aria.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__default.default.createElement(HtmlButton.HtmlButton, tslib.__assign({}, pageInputButtonDerivedProps), /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, pageInputButtonLabel), /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconSearch, {
"aria-hidden": true,
className: pageInputClassNames.pageInputIcon
}))), /*#__PURE__*/React__default.default.createElement(StatusText.StatusText, {
id: statusTextId,
className: classnames__default.default((_b = {}, _b[pageInputClassNames.statusTextHasContent] = !!this.state.status, _b)),
status: this.state.status,
ariaLiveMode: statusTextAriaLiveMode
}, this.state.status === 'error' ? invalidValueErrorText(this.state.inputValue) : '')));
};
return BasePageInput;
}(React.Component);
var StyledPageInput = styled.styled(BasePageInput).withConfig({
componentId: "sc-4ldkoz-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return PageInput_baseStyles.baseStyles(theme);
});
var PageInput = function PageInput(props) {
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(StyledPageInput, tslib.__assign({
theme: suomifiTheme
}, props));
});
};
PageInput.displayName = 'PageInput';
var templateObject_1;
exports.PageInput = PageInput;
//# sourceMappingURL=PageInput.js.map