suomifi-ui-components
Version:
Suomi.fi UI component library
155 lines (152 loc) • 6.42 kB
JavaScript
import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { Component, forwardRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { AutoId } from '../../../utils/AutoId/AutoId.js';
import { getConditionalAriaProp } from '../../../../utils/aria/aria.js';
import { Text } from '../../../Text/Text.js';
import '../../../../reset/HtmlA/HtmlA.js';
import { HtmlButton } from '../../../../reset/HtmlButton/HtmlButton.js';
import '../../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../../reset/HtmlH/HtmlH.js';
import '../../../../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 { baseClassName } from '../ToggleBase/ToggleBase.js';
import { ToggleIcon } from '../ToggleBase/ToggleIcon.js';
import { baseStyles } from './ToggeButton.baseStyles.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 { filterDuplicateKeys } from '../../../../utils/common/common.js';
var toggleClassNames = {
disabled: "".concat(baseClassName, "--disabled"),
button: "".concat(baseClassName, "--button"),
label: "".concat(baseClassName, "_label"),
iconContainer: "".concat(baseClassName, "_icon-container")
};
var BaseToggleButton = function (_super) {
__extends(BaseToggleButton, _super);
function BaseToggleButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
toggleState: !!_this.props.checked || !!_this.props.defaultChecked
};
_this.handleClick = function () {
var _a = _this.props,
checked = _a.checked,
onClick = _a.onClick;
var toggleState = _this.state.toggleState;
if (checked === undefined) {
_this.setState({
toggleState: !toggleState
});
}
if (!!onClick) {
onClick(!toggleState);
}
};
return _this;
}
BaseToggleButton.getDerivedStateFromProps = function (nextProps, prevState) {
var checked = nextProps.checked;
if (checked !== undefined && checked !== prevState.toggleState) {
return {
toggleState: checked
};
}
return null;
};
BaseToggleButton.prototype.render = function () {
var _a;
var _b = this.props,
children = _b.children,
_c = _b.disabled,
disabled = _c === void 0 ? false : _c;
_b.onClick;
var id = _b.id,
className = _b.className,
ariaLabel = _b["aria-label"],
ariaLabelledBy = _b["aria-labelledby"];
_b.checked;
_b.defaultChecked;
var style = _b.style,
rest = __rest(_b, ["children", "disabled", "onClick", "id", "className", 'aria-label', 'aria-labelledby', "checked", "defaultChecked", "style"]);
var _d = separateMarginProps(rest),
passProps = _d[1];
var toggleState = this.state.toggleState;
return /*#__PURE__*/React.createElement(HtmlSpan, {
className: classnames(className, baseClassName, toggleClassNames.button, (_a = {}, _a[toggleClassNames.disabled] = !!disabled, _a), toggleClassNames.label),
style: style
}, /*#__PURE__*/React.createElement(HtmlButton, __assign({}, passProps, {
onClick: this.handleClick,
"aria-pressed": !!toggleState,
disabled: disabled,
id: id,
tabIndex: 0
}, getConditionalAriaProp('aria-label', [ariaLabel]), getConditionalAriaProp('aria-labelledby', [ariaLabelledBy])), /*#__PURE__*/React.createElement(HtmlSpan, {
className: toggleClassNames.iconContainer
}, /*#__PURE__*/React.createElement(ToggleIcon, {
disabled: disabled,
checked: toggleState
})), /*#__PURE__*/React.createElement(Text, {
color: !!disabled ? 'depthBase' : 'blackBase'
}, children)));
};
return BaseToggleButton;
}(Component);
var StyledToggleButton = styled(function (props) {
props.theme;
props.globalMargins;
var passProps = __rest(props, ["theme", "globalMargins"]);
return /*#__PURE__*/React.createElement(BaseToggleButton, __assign({}, passProps));
}).withConfig({
componentId: "sc-jih7r4-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.toggleButton, marginProps);
return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var ToggleButton = /*#__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(StyledToggleButton, __assign({
theme: suomifiTheme,
id: id,
globalMargins: margins,
forwardedRef: ref
}, passProps));
});
});
});
});
ToggleButton.displayName = 'ToggleButton';
var templateObject_1;
export { ToggleButton };
//# sourceMappingURL=ToggleButton.js.map