suomifi-ui-components
Version:
Suomi.fi UI component library
189 lines (183 loc) • 8.66 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
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');
var Debounce = require('../../utils/Debounce/Debounce.js');
var aria = require('../../../utils/aria/aria.js');
var common = require('../../../utils/common/common.js');
var spacing = require('../../theme/utils/spacing.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');
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 Label = require('../Label/Label.js');
var StatusText = require('../StatusText/StatusText.js');
var HintText = require('../HintText/HintText.js');
var TimeInput_baseStyles = require('./TimeInput.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-time-input';
var timeInputClassNames = {
baseClassName: baseClassName,
disabled: "".concat(baseClassName, "--disabled"),
error: "".concat(baseClassName, "--error"),
success: "".concat(baseClassName, "--success"),
labelIsVisible: "".concat(baseClassName, "_label--visible"),
inputElementContainer: "".concat(baseClassName, "_input-element-container"),
inputElement: "".concat(baseClassName, "_input"),
styleWrapper: "".concat(baseClassName, "_wrapper"),
statusTextHasContent: "".concat(baseClassName, "_statusText--has-content")
};
var BaseTimeInput = function BaseTimeInput(props) {
var _a, _b, _c;
var className = props.className,
labelText = props.labelText,
labelMode = props.labelMode,
visualPlaceholder = props.visualPlaceholder,
propOnChange = props.onChange,
propOnBlur = props.onBlur,
style = props.style,
optionalText = props.optionalText,
status = props.status,
statusText = props.statusText,
hintText = props.hintText,
id = props.id,
controlledValue = props.value,
defaultValue = props.defaultValue,
forwardedRef = props.forwardedRef,
debounce = props.debounce,
_d = props.statusTextAriaLiveMode,
statusTextAriaLiveMode = _d === void 0 ? 'assertive' : _d,
ariaDescribedBy = props["aria-describedby"],
tooltipComponent = props.tooltipComponent,
rest = tslib.__rest(props, ["className", "labelText", "labelMode", "visualPlaceholder", "onChange", "onBlur", "style", "optionalText", "status", "statusText", "hintText", "id", "value", "defaultValue", "forwardedRef", "debounce", "statusTextAriaLiveMode", 'aria-describedby', "tooltipComponent"]);
var _e = spacing.separateMarginProps(rest),
passProps = _e[1];
var _f = React.useState(defaultValue || ''),
inputValue = _f[0],
setInputValue = _f[1];
var inputRef = React.useRef(null);
var definedRef = forwardedRef || null;
var handleOnBlur = function handleOnBlur() {
if (!controlledValue) {
var adjustedValue = common.autocompleteTimeString(inputValue);
if (adjustedValue) {
setInputValue(adjustedValue);
}
if (!!propOnBlur) {
propOnBlur(adjustedValue || inputValue);
}
} else if (!!propOnBlur) {
propOnBlur(null);
}
};
var hintTextId = "".concat(id, "-hintText");
var statusTextId = "".concat(id, "-statusText");
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(baseClassName, className, (_a = {}, _a[timeInputClassNames.disabled] = !!passProps.disabled, _a[timeInputClassNames.error] = status === 'error', _a[timeInputClassNames.success] = status === 'success', _a)),
style: style
}, /*#__PURE__*/React__default.default.createElement(HtmlSpan.HtmlSpan, {
className: timeInputClassNames.styleWrapper
}, /*#__PURE__*/React__default.default.createElement(Label.Label, {
htmlFor: id,
labelMode: labelMode,
optionalText: optionalText,
className: classnames__default.default((_b = {}, _b[timeInputClassNames.labelIsVisible] = labelMode !== 'hidden', _b)),
tooltipComponent: tooltipComponent
}, labelText), /*#__PURE__*/React__default.default.createElement(HintText.HintText, {
id: hintTextId
}, hintText), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: timeInputClassNames.inputElementContainer
}, /*#__PURE__*/React__default.default.createElement(Debounce.Debounce, {
waitFor: debounce
}, function (debouncer) {
return /*#__PURE__*/React__default.default.createElement(HtmlInput.HtmlInput, tslib.__assign({}, passProps, {
id: id,
className: timeInputClassNames.inputElement,
placeholder: visualPlaceholder,
forwardedRef: common.forkRefs(inputRef, definedRef),
maxLength: 5
}, {
'aria-invalid': status === 'error'
}, aria.getConditionalAriaProp('aria-describedby', [statusText ? statusTextId : undefined, hintText ? hintTextId : undefined, ariaDescribedBy]), {
onChange: function onChange(event) {
if (propOnChange) {
debouncer(propOnChange, event.currentTarget.value);
}
setInputValue(event.currentTarget.value);
},
onBlur: handleOnBlur,
value: controlledValue || inputValue
}));
})), /*#__PURE__*/React__default.default.createElement(StatusText.StatusText, {
id: statusTextId,
className: classnames__default.default((_c = {}, _c[timeInputClassNames.statusTextHasContent] = !!statusText, _c)),
status: status,
ariaLiveMode: statusTextAriaLiveMode,
disabled: passProps.disabled
}, statusText)));
};
var StyledTimeInput = styled.styled(function (_a) {
_a.theme;
_a.globalMargins;
var passProps = tslib.__rest(_a, ["theme", "globalMargins"]);
return /*#__PURE__*/React__default.default.createElement(BaseTimeInput, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-jwuh9o-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.timeInput, marginProps);
return TimeInput_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var TimeInput = /*#__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(StyledTimeInput, tslib.__assign({
theme: suomifiTheme,
id: id,
globalMargins: margins,
forwardedRef: ref
}, passProps));
});
});
});
});
TimeInput.displayName = 'TimeInput';
var templateObject_1;
exports.TimeInput = TimeInput;
exports.timeInputClassNames = timeInputClassNames;
//# sourceMappingURL=TimeInput.js.map