suomifi-ui-components
Version:
Suomi.fi UI component library
250 lines (247 loc) • 10.8 kB
JavaScript
import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { createRef, Component, forwardRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { AutoId } from '../../utils/AutoId/AutoId.js';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import { SpacingConsumer } from '../../theme/SpacingProvider/SpacingProvider.js';
import { separateMarginProps } from '../../theme/utils/spacing.js';
import { getConditionalAriaProp } from '../../../utils/aria/aria.js';
import { Debounce } from '../../utils/Debounce/Debounce.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 '../StatusText/StatusText.js';
import { Label } from '../Label/Label.js';
import { IconSearch } from 'suomifi-icons';
import { baseStyles } from './SearchInput.baseStyles.js';
import { InputClearButton } from '../InputClearButton/InputClearButton.js';
import { filterDuplicateKeys } from '../../../utils/common/common.js';
var baseClassName = 'fi-search-input';
var searchInputClassNames = {
fullWidth: "".concat(baseClassName, "--full-width"),
error: "".concat(baseClassName, "--error"),
notEmpty: "".concat(baseClassName, "--not-empty"),
labelIsVisible: "".concat(baseClassName, "_label--visible"),
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"),
searchButton: "".concat(baseClassName, "_button-search"),
searchIcon: "".concat(baseClassName, "_button-search-icon"),
clearButton: "".concat(baseClassName, "_button-clear"),
clearIcon: "".concat(baseClassName, "_button-clear-icon")
};
var BaseSearchInput = function (_super) {
__extends(BaseSearchInput, _super);
function BaseSearchInput() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
value: _this.props.value || _this.props.defaultValue || ''
};
_this.inputRef = _this.props.forwardedRef || /*#__PURE__*/createRef();
return _this;
}
BaseSearchInput.getDerivedStateFromProps = function (nextProps, prevState) {
var value = nextProps.value;
if ('value' in nextProps && value !== prevState.value) {
return {
value: value
};
}
return null;
};
BaseSearchInput.prototype.render = function () {
var _a, _b, _c;
var _this = this;
var _d = this.props;
_d.value;
_d.defaultValue;
var className = _d.className,
labelText = _d.labelText,
labelMode = _d.labelMode,
clearButtonLabel = _d.clearButtonLabel,
searchButtonLabel = _d.searchButtonLabel,
searchButtonProps = _d.searchButtonProps,
style = _d.style,
propOnChange = _d.onChange,
propOnSearch = _d.onSearch;
_d.children;
var status = _d.status,
statusText = _d.statusText,
visualPlaceholder = _d.visualPlaceholder,
id = _d.id,
fullWidth = _d.fullWidth,
debounce = _d.debounce;
_d.theme;
_d.forwardedRef;
var ariaDescribedBy = _d["aria-describedby"],
_e = _d.statusTextAriaLiveMode,
statusTextAriaLiveMode = _e === void 0 ? 'assertive' : _e,
rest = __rest(_d, ["value", "defaultValue", "className", "labelText", "labelMode", "clearButtonLabel", "searchButtonLabel", "searchButtonProps", "style", "onChange", "onSearch", "children", "status", "statusText", "visualPlaceholder", "id", "fullWidth", "debounce", "theme", "forwardedRef", 'aria-describedby', "statusTextAriaLiveMode"]);
var _f = separateMarginProps(rest),
passProps = _f[1];
var statusTextId = "".concat(id, "-statusText");
var conditionalSetState = function conditionalSetState(newValue) {
if (!('value' in _this.props)) {
_this.setState({
value: newValue
});
}
};
var onSearch = function onSearch() {
if (!!propOnSearch) {
propOnSearch(_this.state.value);
}
};
var onClear = function onClear() {
conditionalSetState('');
if (propOnChange) {
propOnChange('');
}
setTimeout(function () {
if (_this.inputRef.current) {
_this.inputRef.current.focus();
}
}, 100);
};
var onKeyPress = function onKeyPress(event) {
if (!!_this.state.value && (event === null || event === void 0 ? void 0 : event.key) === 'Enter') {
onSearch();
}
};
var onKeyDown = function onKeyDown(event) {
if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
event.preventDefault();
}
};
var searchButtonDerivedProps = __assign(__assign(__assign({}, searchButtonProps), {
className: classnames(searchButtonProps === null || searchButtonProps === void 0 ? void 0 : searchButtonProps.className, searchInputClassNames.button, searchInputClassNames.searchButton)
}), !!this.state.value ? {
onClick: onSearch
} : {
tabIndex: -1,
hidden: true
});
var clearButtonProps = __assign({
className: classnames(searchInputClassNames.button, searchInputClassNames.clearButton)
}, !!this.state.value ? {
onClick: onClear
} : {
tabIndex: -1,
hidden: true
});
return /*#__PURE__*/React.createElement(HtmlDiv, {
className: classnames(className, baseClassName, (_a = {}, _a[searchInputClassNames.error] = status === 'error', _a[searchInputClassNames.notEmpty] = !!this.state.value, _a[searchInputClassNames.fullWidth] = fullWidth, _a)),
style: style
}, /*#__PURE__*/React.createElement(HtmlSpan, {
className: searchInputClassNames.styleWrapper
}, /*#__PURE__*/React.createElement(Label, {
htmlFor: id,
labelMode: labelMode,
className: classnames((_b = {}, _b[searchInputClassNames.labelIsVisible] = labelMode !== 'hidden', _b))
}, labelText), /*#__PURE__*/React.createElement(Debounce, {
waitFor: debounce
}, function (debouncer, cancelDebounce) {
return /*#__PURE__*/React.createElement(HtmlDiv, {
className: searchInputClassNames.functionalityContainer
}, /*#__PURE__*/React.createElement(HtmlDiv, {
className: searchInputClassNames.inputElementContainer
}, /*#__PURE__*/React.createElement(HtmlInput, __assign({}, passProps, getConditionalAriaProp('aria-describedby', [!!statusText ? statusTextId : undefined, ariaDescribedBy]), {
forwardedRef: _this.inputRef,
"aria-invalid": status === 'error',
id: id,
className: searchInputClassNames.inputElement,
type: "search",
role: "searchbox",
value: _this.state.value,
placeholder: visualPlaceholder,
onChange: function onChange(event) {
var eventValue = event.currentTarget.value;
conditionalSetState(eventValue);
if (propOnChange) {
debouncer(propOnChange, eventValue);
}
},
onKeyPress: onKeyPress,
onKeyDown: onKeyDown
}))), /*#__PURE__*/React.createElement(InputClearButton, __assign({}, clearButtonProps, {
label: clearButtonLabel,
onClick: function onClick() {
onClear();
cancelDebounce();
}
})), /*#__PURE__*/React.createElement(HtmlButton, __assign({}, searchButtonDerivedProps), /*#__PURE__*/React.createElement(VisuallyHidden, null, searchButtonLabel), /*#__PURE__*/React.createElement(IconSearch, {
"aria-hidden": true,
className: searchInputClassNames.searchIcon
})));
}), /*#__PURE__*/React.createElement(StatusText, {
id: statusTextId,
className: classnames((_c = {}, _c[searchInputClassNames.statusTextHasContent] = !!statusText, _c)),
status: status,
ariaLiveMode: statusTextAriaLiveMode
}, statusText)));
};
return BaseSearchInput;
}(Component);
var StyledSearchInput = styled(function (_a) {
_a.globalMargins;
var passProps = __rest(_a, ["globalMargins"]);
return /*#__PURE__*/React.createElement(BaseSearchInput, __assign({}, passProps));
}).withConfig({
componentId: "sc-15b5myw-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = __rest(_a, ["theme", "globalMargins"]);
var _b = separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.searchInput, marginProps);
return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var SearchInput = /*#__PURE__*/forwardRef(function (props, ref) {
var propId = props.id,
passProps = __rest(props, ["id"]);
return /*#__PURE__*/React.createElement(SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React.createElement(StyledSearchInput, __assign({
theme: suomifiTheme,
id: id,
globalMargins: margins,
forwardedRef: ref
}, passProps));
});
});
});
});
SearchInput.displayName = 'SearchInput';
var templateObject_1;
export { SearchInput };
//# sourceMappingURL=SearchInput.js.map