suomifi-ui-components
Version:
Suomi.fi UI component library
185 lines (179 loc) • 8.05 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
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');
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 SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../../theme/SpacingProvider/SpacingProvider.js');
var spacing = require('../../theme/utils/spacing.js');
var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
var ExpanderGroup_baseStyles = require('./ExpanderGroup.baseStyles.js');
var common = require('../../../utils/common/common.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-expander-group';
var openClassName = "".concat(baseClassName, "--open");
var expandersContainerClassName = "".concat(baseClassName, "_expanders");
var openAllButtonClassName = "".concat(baseClassName, "_all-button");
var defaultProviderValue = {
onExpanderOpenChange: function onExpanderOpenChange() {
return null;
},
expanderGroupOpenState: {
targetOpenState: false
}
};
var _a = /*#__PURE__*/React__default.default.createContext(defaultProviderValue),
Provider = _a.Provider,
ExpanderGroupConsumer = _a.Consumer;
var BaseExpanderGroup = function (_super) {
tslib.__extends(BaseExpanderGroup, _super);
function BaseExpanderGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
allOpen: undefined,
expanderGroupOpenState: {
targetOpenState: false
}
};
_this.expanders = {};
_this.openExpanderCount = 0;
_this.expanderCount = 0;
_this.handleExpanderOpenChange = function (id, newState) {
if (newState !== undefined) {
if (_this.expanders[id] !== undefined && _this.expanders[id] !== newState) {
if (newState === true) {
_this.openExpanderCount += 1;
} else {
_this.openExpanderCount -= 1;
}
}
if (_this.expanders[id] === undefined) {
_this.expanderCount += 1;
if (newState === true) {
_this.openExpanderCount += 1;
}
}
_this.expanders[id] = newState;
} else {
if (_this.expanders[id] === true) {
_this.openExpanderCount -= 1;
}
_this.expanderCount -= 1;
delete _this.expanders[id];
}
var allOpen = _this.openExpanderCount === _this.expanderCount;
if (_this.state.allOpen !== allOpen) {
_this.setState({
allOpen: allOpen
});
}
};
_this.handleAllToggleClick = function () {
_this.setState(function (prevState) {
return {
expanderGroupOpenState: {
targetOpenState: !prevState.allOpen
}
};
});
};
return _this;
}
BaseExpanderGroup.prototype.render = function () {
var _a;
var _b = this.props,
className = _b.className;
_b.theme;
var children = _b.children,
openAllText = _b.openAllText,
ariaOpenAllText = _b.ariaOpenAllText,
closeAllText = _b.closeAllText,
ariaCloseAllText = _b.ariaCloseAllText,
_c = _b.showToggleAllButton,
showToggleAllButton = _c === void 0 ? true : _c,
toggleAllButtonProps = _b.toggleAllButtonProps,
forwardedRef = _b.forwardedRef,
style = _b.style,
rest = tslib.__rest(_b, ["className", "theme", "children", "openAllText", "ariaOpenAllText", "closeAllText", "ariaCloseAllText", "showToggleAllButton", "toggleAllButtonProps", "forwardedRef", "style"]);
var _d = spacing.separateMarginProps(rest),
passProps = _d[1];
var _e = this.state,
expanderGroupOpenState = _e.expanderGroupOpenState,
allOpen = _e.allOpen;
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, tslib.__assign({}, passProps, {
className: classnames__default.default(className, baseClassName, (_a = {}, _a[openClassName] = this.openExpanderCount > 0, _a)),
style: style
}), !!showToggleAllButton && ( /*#__PURE__*/React__default.default.createElement(HtmlButton.HtmlButton, tslib.__assign({}, toggleAllButtonProps, {
onClick: this.handleAllToggleClick,
className: classnames__default.default(toggleAllButtonProps === null || toggleAllButtonProps === void 0 ? void 0 : toggleAllButtonProps.className, openAllButtonClassName),
forwardedRef: forwardedRef
}), /*#__PURE__*/React__default.default.createElement(HtmlSpan.HtmlSpan, {
"aria-hidden": true
}, allOpen ? closeAllText : openAllText), /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, allOpen ? ariaCloseAllText || closeAllText : ariaOpenAllText || openAllText))), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: expandersContainerClassName
}, /*#__PURE__*/React__default.default.createElement(Provider, {
value: {
onExpanderOpenChange: this.handleExpanderOpenChange,
expanderGroupOpenState: expanderGroupOpenState
}
}, children)));
};
return BaseExpanderGroup;
}(React.Component);
var StyledExpanderGroup = styled.styled(function (props) {
props.globalMargins;
var passProps = tslib.__rest(props, ["globalMargins"]);
return /*#__PURE__*/React__default.default.createElement(BaseExpanderGroup, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1nicijb-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.expanderGroup, marginProps);
return ExpanderGroup_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var ExpanderGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
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(StyledExpanderGroup, tslib.__assign({
theme: suomifiTheme,
globalMargins: margins,
forwardedRef: ref
}, props));
});
});
});
ExpanderGroup.displayName = 'ExpanderGroup';
var templateObject_1;
exports.ExpanderGroup = ExpanderGroup;
exports.ExpanderGroupConsumer = ExpanderGroupConsumer;
//# sourceMappingURL=ExpanderGroup.js.map