@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
533 lines (532 loc) • 21.4 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WarnIcon = exports.MarketingIcon = exports.InfoIcon = exports.ErrorIcon = void 0;
exports.setMaxWidthToElement = setMaxWidthToElement;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _useTheme5 = _interopRequireDefault(require("../../shared/useTheme.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation.js"));
var _SpacingHelper = require("../space/SpacingHelper.js");
var _Icon = _interopRequireDefault(require("../icon/Icon.js"));
var _GlobalStatusProvider = _interopRequireDefault(require("../global-status/GlobalStatusProvider.js"));
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _properties = _interopRequireDefault(require("../../style/themes/theme-ui/properties.js"));
var _properties2 = _interopRequireDefault(require("../../style/themes/theme-sbanken/properties.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const properties = {
ui: _properties.default,
sbanken: _properties2.default
};
class FormStatus extends _react.default.PureComponent {
static getContent(props) {
if (props.text) {
if ((0, _componentHelper.isTrue)(props.text)) {
return null;
}
return props.text;
}
return (0, _componentHelper.processChildren)(props);
}
static correctStatus(state) {
switch (state) {
case 'information':
state = 'info';
break;
case 'warning':
state = 'warn';
break;
}
return state;
}
static getIcon({
state,
icon,
icon_size
}) {
if (typeof icon !== 'string') {
return icon;
}
let IconToLoad = icon;
switch (FormStatus.correctStatus(state)) {
case 'info':
case 'success':
IconToLoad = InfoIcon;
break;
case 'warn':
IconToLoad = WarnIcon;
break;
case 'marketing':
IconToLoad = MarketingIcon;
break;
case 'error':
default:
IconToLoad = ErrorIcon;
}
return _react.default.createElement(_Icon.default, {
icon: _react.default.createElement(IconToLoad, {
title: null,
state: state
}),
size: icon_size,
inheritColor: false
});
}
static getDerivedStateFromProps(props, state) {
if (state._id !== props.id && props.id) {
state.id = props.id;
}
state._id = props.id;
return state;
}
constructor(props, context) {
var _props$globalStatus, _context$FormStatus, _context$FormRow, _context$formElement;
super(props);
_defineProperty(this, "state", {
id: null
});
_defineProperty(this, "init", () => {
if (this._isMounted) {
this._globalStatus.isReady();
this.updateWidth();
this.fillCache();
}
});
_defineProperty(this, "updateWidth", () => {
if (this._ref.current) {
const {
width_element,
width_selector
} = this.props;
setMaxWidthToElement({
element: this._ref.current,
widthElement: width_element && width_element.current,
widthSelector: width_selector
});
}
});
this.state.id = props.id || (0, _componentHelper.makeUniqueId)();
this._globalStatus = _GlobalStatusProvider.default.init((props === null || props === void 0 || (_props$globalStatus = props.globalStatus) === null || _props$globalStatus === void 0 ? void 0 : _props$globalStatus.id) || (context === null || context === void 0 || (_context$FormStatus = context.FormStatus) === null || _context$FormStatus === void 0 || (_context$FormStatus = _context$FormStatus.globalStatus) === null || _context$FormStatus === void 0 ? void 0 : _context$FormStatus.id) || (context === null || context === void 0 || (_context$FormRow = context.FormRow) === null || _context$FormRow === void 0 || (_context$FormRow = _context$FormRow.globalStatus) === null || _context$FormRow === void 0 ? void 0 : _context$FormRow.id) || (context === null || context === void 0 || (_context$formElement = context.formElement) === null || _context$formElement === void 0 || (_context$formElement = _context$formElement.globalStatus) === null || _context$formElement === void 0 ? void 0 : _context$formElement.id) || 'main', provider => {
if (this.props.state === 'error' && this.isReadyToGetVisible()) {
const {
state,
text,
children,
globalStatus,
label
} = this.getProps(context);
provider.add({
state,
status_id: this.getStatusId(),
item: {
item_id: this.state.id,
text: (globalStatus === null || globalStatus === void 0 ? void 0 : globalStatus.message) || text || children,
status_anchor_label: label,
status_anchor_url: true
},
...globalStatus
});
}
});
this._ref = _react.default.createRef();
}
componentDidMount() {
this._isMounted = true;
if (document.readyState === 'complete') {
this.init();
} else if (typeof window !== 'undefined') {
window.addEventListener('load', this.init);
}
if (typeof window !== 'undefined') {
window.addEventListener('resize', this.updateWidth);
}
}
fillCache() {
const shouldAnimate = this.shouldAnimate();
const content = shouldAnimate && FormStatus.getContent(this.props);
if (content && content !== this.contentCache) {
this.contentCache = content;
}
const state = shouldAnimate && FormStatus.correctStatus(this.props.state);
if (state) {
this.stateCache = state;
}
}
componentWillUnmount() {
this._isMounted = false;
const status_id = this.getStatusId();
this._globalStatus.remove(status_id);
if (typeof window !== 'undefined') {
window.removeEventListener('load', this.init);
window.removeEventListener('resize', this.updateWidth);
}
}
componentDidUpdate(prevProps) {
var _prevProps$globalStat;
const {
state,
show,
text,
globalStatus,
children,
label
} = this.getProps();
if (prevProps.text !== text || prevProps.children !== children || prevProps.show !== show || ((_prevProps$globalStat = prevProps.globalStatus) === null || _prevProps$globalStat === void 0 ? void 0 : _prevProps$globalStat.show) !== (globalStatus === null || globalStatus === void 0 ? void 0 : globalStatus.show) || prevProps.state !== state) {
this.fillCache();
if (state === 'error') {
const status_id = this.getStatusId();
if ((0, _componentHelper.isTrue)(show)) {
this._globalStatus.update(status_id, {
state,
status_id,
item: {
item_id: this.state.id,
text: (globalStatus === null || globalStatus === void 0 ? void 0 : globalStatus.message) || text || children,
status_anchor_label: label,
status_anchor_url: true
},
...globalStatus
}, {
preventRestack: true
});
} else if (!FormStatus.getContent(this.props)) {
const status_id = this.getStatusId();
this._globalStatus.remove(status_id);
}
}
if (this.isReadyToGetVisible()) {
this.updateWidth();
}
}
}
getProps(context = this.context) {
return (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, FormStatus.defaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow), (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context === null || context === void 0 ? void 0 : context.FormStatus);
}
getStatusId() {
return `${this.state.id}-gs`;
}
shouldAnimate() {
return this.props.no_animation === false;
}
isReadyToGetVisible(props = this.props) {
return (0, _componentHelper.isTrue)(props.show) && FormStatus.getContent(props) ? true : false;
}
render() {
const props = this.getProps();
const {
title,
state: rawState,
size,
variant,
className,
stretch,
shellSpace,
text_id,
show,
no_animation,
label,
status_id,
globalStatus,
id,
text,
icon,
icon_size,
skeleton,
children,
role,
...rest
} = props;
const state = FormStatus.correctStatus(rawState) || this.stateCache;
const iconToRender = FormStatus.getIcon({
state,
icon,
icon_size
});
const contentToRender = FormStatus.getContent(this.props);
const hasStringContent = typeof contentToRender === 'string' && contentToRender.length > 0;
const params = {
className: (0, _classnames.default)(`dnb-form-status dnb-form-status__size--${size}`, (0, _SpacingHelper.createSpacingClasses)(props), className, state && `dnb-form-status--${state}`, variant && `dnb-form-status__variant--${variant}`, stretch && 'dnb-form-status--stretch', hasStringContent && 'dnb-form-status--has-content'),
id: !String(id).startsWith('null') ? this.state.id : null,
title,
role,
...rest
};
if (!role) {
switch (state) {
case 'info':
params.role = 'status';
break;
default:
params.role = 'alert';
}
}
const textParams = {
className: (0, _classnames.default)('dnb-form-status__text', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, this.context)),
id: !String(text_id).startsWith('null') ? text_id : null
};
const shellParams = {
className: (0, _classnames.default)('dnb-form-status__shell', (0, _SpacingHelper.createSpacingClasses)({
space: shellSpace
}))
};
(0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, this.context);
(0, _componentHelper.validateDOMAttributes)(this.props, params);
(0, _componentHelper.validateDOMAttributes)(null, textParams);
return _react.default.createElement(_HeightAnimation.default, _extends({
element: "span",
open: this.isReadyToGetVisible(),
animate: this.shouldAnimate(),
duration: 600
}, params, {
innerRef: this._ref
}), _react.default.createElement("span", shellParams, iconToRender, _react.default.createElement("span", textParams, contentToRender || this.contentCache)));
}
}
exports.default = FormStatus;
_defineProperty(FormStatus, "contextType", _Context.default);
_defineProperty(FormStatus, "defaultProps", {
id: null,
title: null,
show: true,
text: null,
globalStatus: null,
label: null,
icon: 'error',
icon_size: 'medium',
size: 'default',
variant: null,
state: 'error',
attributes: null,
text_id: null,
width_selector: null,
width_element: null,
no_animation: null,
skeleton: null,
stretch: null,
role: null,
className: null,
children: null
});
process.env.NODE_ENV !== "production" ? FormStatus.propTypes = {
id: _propTypes.default.string,
title: _propTypes.default.string,
show: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
label: _propTypes.default.node,
icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
icon_size: _propTypes.default.string,
state: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.oneOf(['error', 'warn', 'info', 'marketing'])]),
variant: _propTypes.default.oneOf(['flat', 'outlined']),
size: _propTypes.default.oneOf(['default', 'large']),
globalStatus: _propTypes.default.shape({
id: _propTypes.default.string,
message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
}),
attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
text_id: _propTypes.default.string,
width_selector: _propTypes.default.string,
width_element: _propTypes.default.object,
no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
role: _propTypes.default.string,
..._SpacingHelper.spacingPropTypes,
className: _propTypes.default.string,
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node])
} : void 0;
const ErrorIcon = props => {
var _useTheme;
const {
title = 'error'
} = props || {};
const isSbankenTheme = ((_useTheme = (0, _useTheme5.default)()) === null || _useTheme === void 0 ? void 0 : _useTheme.name) === 'sbanken';
const fill = isSbankenTheme ? properties.sbanken['--sb-color-magenta'] : properties.ui['--color-fire-red'];
const line = isSbankenTheme ? properties.sbanken['--sb-color-magenta-light-2'] : properties.ui['--color-white'];
return _react.default.createElement("svg", _extends({
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none"
}, props), _react.default.createElement("title", null, title), _react.default.createElement("path", {
d: "M23.625 17.864A3.547 3.547 0 0120.45 23H3.548a3.546 3.546 0 01-3.172-5.136l8.45-14.902a3.548 3.548 0 016.347 0l8.452 14.902z",
fill: fill
}), _react.default.createElement("path", {
d: "M12 16.286a1.286 1.286 0 100 2.572 1.286 1.286 0 000-2.572z",
fill: line
}), _react.default.createElement("path", {
d: "M12 13.818v-5",
stroke: line,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}));
};
exports.ErrorIcon = ErrorIcon;
process.env.NODE_ENV !== "production" ? ErrorIcon.propTypes = {
title: _propTypes.default.string
} : void 0;
const WarnIcon = props => {
var _useTheme2;
const {
title = 'error'
} = props || {};
const isSbankenTheme = ((_useTheme2 = (0, _useTheme5.default)()) === null || _useTheme2 === void 0 ? void 0 : _useTheme2.name) === 'sbanken';
const fill = isSbankenTheme ? properties.sbanken['--sb-color-yellow-dark'] : properties.ui['--color-accent-yellow'];
const line = isSbankenTheme ? properties.sbanken['--sb-color-black'] : properties.ui['--color-black-80'];
return _react.default.createElement("svg", _extends({
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none"
}, props), _react.default.createElement("title", null, title), _react.default.createElement("path", {
d: "M23.625 17.864A3.547 3.547 0 0120.45 23H3.548a3.546 3.546 0 01-3.172-5.136l8.45-14.902a3.548 3.548 0 016.347 0l8.452 14.902z",
fill: fill
}), _react.default.createElement("path", {
d: "M12 16.286a1.286 1.286 0 100 2.572 1.286 1.286 0 000-2.572z",
fill: line
}), _react.default.createElement("path", {
d: "M12 13.818v-5",
stroke: line,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}));
};
exports.WarnIcon = WarnIcon;
process.env.NODE_ENV !== "production" ? WarnIcon.propTypes = {
title: _propTypes.default.string
} : void 0;
const InfoIcon = props => {
var _useTheme3;
const {
title = 'info'
} = props || {};
const isSbankenTheme = ((_useTheme3 = (0, _useTheme5.default)()) === null || _useTheme3 === void 0 ? void 0 : _useTheme3.name) === 'sbanken';
let fill = isSbankenTheme ? properties.sbanken['--sb-color-green-dark-2'] : properties.ui['--color-sea-green'];
if (props && (props === null || props === void 0 ? void 0 : props.state) === 'success') {
fill = isSbankenTheme ? properties.sbanken['--sb-color-green-dark-3'] : properties.ui['--color-summer-green'];
}
const line = isSbankenTheme ? properties.sbanken['--sb-color-green-light-2'] : properties.ui['--color-white'];
return _react.default.createElement("svg", _extends({
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none"
}, props), _react.default.createElement("title", null, title), _react.default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M11.268 0a11.25 11.25 0 105.566 21.017l6.112 2.91a.75.75 0 001-1l-2.911-6.112A11.234 11.234 0 0011.268 0z",
fill: fill
}), _react.default.createElement("circle", {
cx: "11",
cy: "6.5",
r: ".5",
fill: "#fff",
stroke: line
}), _react.default.createElement("path", {
d: "M13.75 16H13a1.5 1.5 0 01-1.5-1.5v-3.75a.75.75 0 00-.75-.75H10",
stroke: line,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}));
};
exports.InfoIcon = InfoIcon;
process.env.NODE_ENV !== "production" ? InfoIcon.propTypes = {
title: _propTypes.default.string
} : void 0;
const MarketingIcon = props => {
var _useTheme4;
const {
title = 'marketing'
} = props || {};
const isSbankenTheme = ((_useTheme4 = (0, _useTheme5.default)()) === null || _useTheme4 === void 0 ? void 0 : _useTheme4.name) === 'sbanken';
const fill = isSbankenTheme ? properties.sbanken['--sb-color-violet-light'] : properties.ui['--color-black-80'];
return _react.default.createElement("svg", _extends({
width: "24",
height: "24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, props), _react.default.createElement("title", null, title), _react.default.createElement("path", {
d: "M6 15.25H4.5c-2.042 0-3.75-1.707-3.75-3.75S2.458 7.75 4.5 7.75H6v7.5ZM7.5 15.25c4.801 0 8.846 1.897 12.75 4.5V3.25c-3.904 2.603-7.949 4.5-12.75 4.5v7.5ZM23.25 10a.75.75 0 0 0-1.5 0h1.5Zm-1.5 3a.75.75 0 0 0 1.5 0h-1.5ZM8.483 21.043a.75.75 0 1 0 1.034-1.086l-1.034 1.086ZM21.75 10v3h1.5v-3h-1.5ZM6 15.25a8.058 8.058 0 0 0 2.483 5.793l1.034-1.086A6.559 6.559 0 0 1 7.5 15.25H6Z",
fill: fill
}));
};
exports.MarketingIcon = MarketingIcon;
process.env.NODE_ENV !== "production" ? MarketingIcon.propTypes = {
title: _propTypes.default.string
} : void 0;
function setMaxWidthToElement({
element,
id = null,
widthElement = null,
widthSelector = null
}) {
if (!(element && typeof window !== 'undefined')) {
return;
}
try {
var _id;
if (!id && !widthSelector) {
id = element.getAttribute('id');
}
widthSelector = widthSelector || ((_id = id) === null || _id === void 0 ? void 0 : _id.replace('-form-status', '')) || id;
let width = sumElementWidth({
widthElement,
widthSelector
});
if (width > 40) {
const maxWidth = 30 * 16;
if (width < maxWidth) {
width = maxWidth;
}
const remWidth = `${width / 16}rem`;
const style = window.getComputedStyle(element);
const hasCustomWidth = element.style.maxWidth ? false : style.minWidth !== '' && style.minWidth !== 'auto' || style.maxWidth !== '' && style.maxWidth !== 'none';
if (!hasCustomWidth) {
element.style.maxWidth = remWidth;
}
}
} catch (e) {}
}
function sumElementWidth({
widthElement,
widthSelector
}) {
let width = 0;
if (typeof document === 'undefined') {
return width;
}
try {
const ids = widthElement ? [widthElement] : widthSelector.split(/, |,/g);
width = ids.reduce((acc, cur) => {
const elem = typeof cur === 'string' ? cur[0] === '.' ? document.querySelector(cur) : document.getElementById(cur) : cur;
let width = elem && elem.offsetWidth || window.getComputedStyle(elem).width;
if (/em|rem/.test(width)) {
width = parseFloat(width) * 16;
}
if (width > 0) {
if (acc > 0) {
acc += 16;
}
acc += width;
}
return acc;
}, width);
} catch (e) {}
return width;
}
FormStatus._supportsSpacingProps = true;
//# sourceMappingURL=FormStatus.js.map