@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
337 lines (336 loc) • 16.5 kB
JavaScript
"use strict";
"use client";
require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _componentHelper = require("../../shared/component-helper");
var _helpers = require("../../shared/helpers");
var _SpacingHelper = require("../space/SpacingHelper");
var _SkeletonHelper = require("../skeleton/SkeletonHelper");
var _Tooltip = _interopRequireWildcard(require("../tooltip/Tooltip"));
var _NumberUtils = require("./NumberUtils");
const _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "compact", "ban", "nin", "phone", "org", "percent", "link", "monospace", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "srLabel", "element", "className"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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); }
class NumberFormat extends _react.default.PureComponent {
constructor(props) {
super(props);
_defineProperty(this, "shortcutHandler", () => {
var _this$context$getTran, _this$context$getTran2;
(0, _NumberUtils.showSelectionNotice)({
value: this.cleanedValue,
label: (_this$context$getTran = this.context.getTranslation(this.props)) === null || _this$context$getTran === void 0 ? void 0 : (_this$context$getTran2 = _this$context$getTran.NumberFormat) === null || _this$context$getTran2 === void 0 ? void 0 : _this$context$getTran2.clipboard_copy
}).run(this._ref.current);
});
_defineProperty(this, "onBlurHandler", () => {
this.setState({
selected: false
});
});
_defineProperty(this, "onContextMenuHandler", () => {
if (!(0, _helpers.hasSelectedText)()) {
clearTimeout(this._selectAllTimeout);
this._selectAllTimeout = setTimeout(() => {
this.setFocus();
}, 1);
}
});
_defineProperty(this, "onClickHandler", () => {
if (((0, _componentHelper.isTrue)(this.props.selectall) || (0, _componentHelper.isTrue)(this.props.always_selectall)) && !(0, _helpers.hasSelectedText)()) {
this.setFocus();
}
});
_defineProperty(this, "onMouseEnter", () => {
this.setState({
hover: true
});
});
_defineProperty(this, "onMouseLeave", () => {
this.setState({
hover: false
});
});
this._ref = _react.default.createRef();
this._selectionRef = _react.default.createRef();
this._id = props.tooltip ? props.id || (0, _componentHelper.makeUniqueId)() : undefined;
this.state = {
selected: false,
omitCurrencySign: false,
hover: false
};
}
componentDidMount() {
clearTimeout(this._selectAllTimeout);
if (_helpers.IS_IOS && !hasiOSFix) {
hasiOSFix = true;
(0, _NumberUtils.runIOSSelectionFix)();
}
}
componentWillUnmount() {
var _this$outsideClick;
(_this$outsideClick = this.outsideClick) === null || _this$outsideClick === void 0 ? void 0 : _this$outsideClick.remove();
}
setFocus() {
this.setState({
selected: true
}, () => {
var _this$_selectionRef$c;
(_this$_selectionRef$c = this._selectionRef.current) === null || _this$_selectionRef$c === void 0 ? void 0 : _this$_selectionRef$c.focus();
this.selectAll();
if (!(0, _componentHelper.isTrue)(this.props.copy_selection)) {
this.outsideClick = (0, _componentHelper.detectOutsideClick)(this._ref.current, this.onBlurHandler);
}
});
}
selectAll() {
try {
const elem = this._selectionRef.current || this._ref.current;
if (elem) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(elem);
selection.removeAllRanges();
selection.addRange(range);
}
} catch (e) {
(0, _componentHelper.warn)(e);
}
}
runFix(comp, className) {
if (typeof comp === 'function') {
comp = comp();
}
if (_react.default.isValidElement(comp)) {
return _react.default.cloneElement(comp, {
className: (0, _classnames.default)(comp.props.className, className)
});
}
return _react.default.createElement("span", {
className: className
}, comp);
}
render() {
const translations = this.context.getTranslation(this.props).NumberFormat;
const props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, NumberFormat.defaultProps, translations, this.context.NumberFormat);
const {
id,
value: _value,
prefix,
suffix,
children,
currency,
currency_display,
currency_position,
compact,
ban,
nin,
phone,
org,
percent,
link: _link,
monospace,
tooltip,
skeleton,
options,
locale,
decimals,
omit_rounding,
rounding,
clean,
selectall,
copy_selection,
clean_copy_value,
srLabel,
element,
className
} = props,
_rest = _objectWithoutProperties(props, _excluded);
let rest = _rest;
let link = _link;
let value = _value;
if (value === null && children !== null) {
value = children;
}
const formatOptions = {
locale,
currency,
currency_display,
currency_position,
omit_currency_sign: this.state.omitCurrencySign,
compact,
ban,
nin,
phone,
org,
percent,
decimals,
omit_rounding: (0, _componentHelper.isTrue)(omit_rounding),
rounding,
options,
clean: (0, _componentHelper.isTrue)(clean),
clean_copy_value: (0, _componentHelper.isTrue)(clean_copy_value),
returnAria: true,
invalidAriaText: locale && locale !== this.context.locale ? null : translations === null || translations === void 0 ? void 0 : translations.not_available
};
const useContext = (0, _componentHelper.extendDeep)({
locale: null,
currency: null
}, this.context);
if (useContext) {
if (useContext.locale && !locale) {
formatOptions.locale = useContext.locale;
}
if (useContext.currency && (0, _componentHelper.isTrue)(currency)) {
formatOptions.options = formatOptions.options ? _objectSpread({}, formatOptions.options) : {};
formatOptions.options.currency = useContext.currency;
}
}
let {
cleanedValue,
number: display,
aria,
locale: lang
} = (0, _NumberUtils.format)(value, formatOptions);
this.cleanedValue = cleanedValue;
if (prefix) {
display = _react.default.createElement(_react.default.Fragment, null, this.runFix(prefix, 'dnb-number-format__prefix'), " ", display);
aria = String(`${(0, _componentHelper.convertJsxToString)(this.runFix(prefix, 'dnb-number-format__prefix'))} ${aria}`);
}
if (suffix) {
display = _react.default.createElement(_react.default.Fragment, null, display, " ", this.runFix(suffix, 'dnb-number-format__suffix'));
aria = `${aria} ${(0, _componentHelper.convertJsxToString)(this.runFix(suffix, 'dnb-number-format__suffix'))}`;
}
if (tooltip) {
rest = (0, _Tooltip.injectTooltipSemantic)(rest);
}
const attributes = _objectSpread({
lang,
ref: this._ref,
className: (0, _classnames.default)('dnb-number-format', className, ((0, _componentHelper.isTrue)(currency) || typeof currency === 'string') && 'dnb-number-format--currency', (0, _SpacingHelper.createSpacingClasses)(this.props), (0, _componentHelper.isTrue)(selectall) && 'dnb-number-format--selectall', this.state.selected && 'dnb-number-format--selected', link && 'dnb-anchor', monospace && 'dnb-number-format--monospace'),
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave
}, rest);
attributes['role'] = 'text';
const displayParams = {};
if ((0, _componentHelper.isTrue)(selectall) || (0, _componentHelper.isTrue)(copy_selection)) {
displayParams.onClick = this.onClickHandler;
displayParams.onContextMenu = this.onContextMenuHandler;
}
(0, _componentHelper.validateDOMAttributes)(this.props, attributes);
(0, _SkeletonHelper.skeletonDOMAttributes)(attributes, skeleton, this.context);
if (link) {
if ((0, _componentHelper.isTrue)(link)) {
link = 'tel';
}
return _react.default.createElement("a", _extends({
href: `${link}:${display}`
}, attributes), display);
}
const Element = element;
return _react.default.createElement(Element, attributes, _react.default.createElement("span", _extends({
className: (0, _classnames.default)('dnb-number-format__visible', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, this.context)),
"aria-hidden": !this.state.hover
}, displayParams), display), _react.default.createElement("span", {
className: "dnb-sr-only",
"data-text": srLabel ? `${(0, _componentHelper.convertJsxToString)(srLabel)}${' '}${aria}` : aria
}), (0, _componentHelper.isTrue)(copy_selection) && _react.default.createElement("span", {
className: "dnb-number-format__selection dnb-no-focus",
ref: this._selectionRef,
tabIndex: -1,
onBlur: this.onBlurHandler,
onCopy: this.shortcutHandler,
"aria-hidden": true
}, this.state.selected && cleanedValue), tooltip && _react.default.createElement(_Tooltip.default, {
id: this._id + '-tooltip',
targetElement: this._ref,
tooltip: tooltip
}));
}
}
exports.default = NumberFormat;
_defineProperty(NumberFormat, "contextType", _Context.default);
_defineProperty(NumberFormat, "defaultProps", {
id: null,
value: null,
locale: null,
prefix: null,
suffix: null,
currency: null,
currency_display: null,
currency_position: null,
compact: null,
ban: null,
nin: null,
phone: null,
org: null,
percent: null,
link: null,
monospace: false,
options: null,
decimals: null,
selectall: true,
always_selectall: false,
copy_selection: true,
clean_copy_value: false,
omit_rounding: null,
rounding: null,
clean: null,
srLabel: null,
element: 'span',
tooltip: null,
skeleton: null,
className: null,
children: null
});
process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_objectSpread({
id: _propTypes.default.string,
value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
locale: _propTypes.default.string,
prefix: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
suffix: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
currency: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
currency_display: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['code', 'name', 'symbol', 'narrowSymbol', ''])]),
currency_position: _propTypes.default.oneOf(['auto', 'before', 'after']),
compact: _propTypes.default.oneOfType([_propTypes.default.oneOf(['short', 'long']), _propTypes.default.bool]),
ban: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
nin: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
phone: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
org: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
percent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
link: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
monospace: _propTypes.default.bool,
options: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
decimals: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
selectall: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
always_selectall: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
copy_selection: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
clean_copy_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
omit_rounding: _propTypes.default.bool,
rounding: _propTypes.default.oneOf(['omit', 'half-even', 'half-up']),
clean: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
srLabel: _propTypes.default.node,
element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
}, _SpacingHelper.spacingPropTypes), {}, {
className: _propTypes.default.string,
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
}) : void 0;
let hasiOSFix = false;
NumberFormat._supportsSpacingProps = true;
//# sourceMappingURL=NumberFormat.js.map