@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
307 lines (306 loc) • 14.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _handle = require("@enact/core/handle");
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _I18nDecorator = require("@enact/i18n/I18nDecorator");
var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
var _Layout = _interopRequireWildcard(require("@enact/ui/Layout"));
var _Repeater = _interopRequireDefault(require("@enact/ui/Repeater"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _react = require("react");
var _Button = _interopRequireDefault(require("../Button"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _$L = _interopRequireDefault(require("../internal/$L"));
var _Tooltip = _interopRequireDefault(require("../TooltipDecorator/Tooltip"));
var _Keypad = _interopRequireDefault(require("./Keypad"));
var _util = require("./util");
var _InputModule = _interopRequireDefault(require("./Input.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "password", "passwordIcon"],
_excluded2 = ["css", "disabled", "invalidTooltip", "maxLength", "numberInputField", "onAdd", "onRemove", "showKeypad", "submitButton", "type", "value"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var getSeparated = function getSeparated(prefer, max) {
return prefer === 'separated' || prefer === 'auto' && max <= _util.SEPARATE_DIGITS_LIMIT;
};
var normalizeValue = function normalizeValue(value, maxLength) {
return value != null ? value.toString().replace(/\D/g, '').substring(0, maxLength) : '';
};
var normalizeValueProp = function normalizeValueProp(_ref) {
var value = _ref.value,
maxLength = _ref.maxLength;
return normalizeValue(value, maxLength);
};
var NumberCell = (0, _kind["default"])({
name: 'NumberCell',
propTypes: /** @lends sandstone/Input.NumberCell.prototype */{
active: _propTypes["default"].bool,
children: _propTypes["default"].string,
disabled: _propTypes["default"].bool,
password: _propTypes["default"].bool,
passwordIcon: _propTypes["default"].string
},
defaultProps: {
password: false,
passwordIcon: 'circle'
},
styles: {
css: _InputModule["default"],
className: 'numberCell'
},
computed: {
className: function className(_ref2) {
var active = _ref2.active,
password = _ref2.password,
styler = _ref2.styler;
return styler.append({
active: active,
password: password
});
}
},
render: function render(_ref3) {
var children = _ref3.children,
password = _ref3.password,
passwordIcon = _ref3.passwordIcon,
rest = _objectWithoutProperties(_ref3, _excluded);
delete rest.active;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({
size: "large"
}, rest), {}, {
children: password && children ? passwordIcon : children
}));
}
});
var NumberFieldBase = (0, _kind["default"])({
name: 'NumberField',
propTypes: {
announce: _propTypes["default"].func,
css: _propTypes["default"].object,
disabled: _propTypes["default"].bool,
invalid: _propTypes["default"].bool,
invalidMessage: _propTypes["default"].string,
maxLength: _propTypes["default"].number,
minLength: _propTypes["default"].number,
noSubmitButton: _propTypes["default"].bool,
numberInputField: _propTypes["default"].string,
onBeforeChange: _propTypes["default"].func,
onComplete: _propTypes["default"].func,
rtl: _propTypes["default"].bool,
showKeypad: _propTypes["default"].bool,
type: _propTypes["default"].oneOf(['number', 'password']),
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
},
defaultProps: {
maxLength: _util.DEFAULT_LENGTH,
minLength: 0,
numberInputField: 'auto',
type: 'number'
},
styles: {
css: _InputModule["default"],
className: 'numberField'
},
handlers: {
onAdd: (0, _handle.handle)((0, _handle.adaptEvent)(function (_ref4, _ref5) {
var key = _ref4.key;
var maxLength = _ref5.maxLength,
value = _ref5.value;
return {
value: normalizeValue("".concat(value).concat(key), maxLength)
};
}, (0, _handle.handle)((0, _handle.returnsTrue)(function (_ref6, _ref7) {
var value = _ref6.value;
var announce = _ref7.announce,
type = _ref7.type;
announce(type === 'password' ? (0, _$L["default"])('hidden') : String(value).substr(-1));
}),
// In case onAdd was run in the short period between the last onComplete and this invocation, just bail out
function (_ref8, _ref9) {
var updatedValue = _ref8.value;
var maxLength = _ref9.maxLength,
value = _ref9.value;
return normalizeValue(updatedValue, maxLength) !== normalizeValue(value, maxLength);
}, (0, _handle.forwardCustomWithPrevent)('onBeforeChange', function (_ref10) {
var value = _ref10.value;
return {
value: value
};
}), (0, _handle.forwardCustom)('onChange', function (ev) {
return ev;
}),
// Check the length of the new value and return true (pass/proceed) if it is at or above max-length
function (_ref11, _ref12) {
var updatedValue = _ref11.value;
var maxLength = _ref12.maxLength,
minLength = _ref12.minLength,
numberInputField = _ref12.numberInputField;
var updatedLength = normalizeValue(updatedValue, maxLength).length,
autoSubmit = getSeparated(numberInputField, maxLength) && minLength === maxLength;
return autoSubmit && updatedLength >= maxLength;
}, (0, _handle.forwardCustom)('onComplete', function (ev) {
return ev;
})))),
onRemove: (0, _handle.handle)((0, _handle.returnsTrue)(function (ev, _ref13) {
var announce = _ref13.announce;
return announce((0, _$L["default"])('backspace'));
}), (0, _handle.adaptEvent)(function (ev, _ref14) {
var maxLength = _ref14.maxLength,
value = _ref14.value;
return {
value: normalizeValue(value, maxLength).toString().slice(0, -1)
};
}, (0, _handle.handle)((0, _handle.forwardCustomWithPrevent)('onBeforeChange', function (_ref15) {
var value = _ref15.value;
return {
value: value
};
}), (0, _handle.forwardCustom)('onChange', function (ev) {
return ev;
})))),
onSubmit: (0, _handle.handle)((0, _handle.adaptEvent)(function (ev, _ref16) {
var maxLength = _ref16.maxLength,
value = _ref16.value;
return {
value: normalizeValue(value, maxLength)
};
}, (0, _handle.forwardCustom)('onComplete', function (ev) {
return ev;
})))
},
computed: {
className: function className(_ref17) {
var maxLength = _ref17.maxLength,
numberInputField = _ref17.numberInputField,
type = _ref17.type,
styler = _ref17.styler;
var numberFieldStyle = getSeparated(numberInputField, maxLength) ? 'separated' : 'joined';
return styler.append(type, numberFieldStyle);
},
// Normalize the value, also prune out any non-digit characters
value: normalizeValueProp,
invalidTooltip: function invalidTooltip(_ref18) {
var css = _ref18.css,
invalid = _ref18.invalid,
_ref18$invalidMessage = _ref18.invalidMessage,
invalidMessage = _ref18$invalidMessage === void 0 ? (0, _$L["default"])('Please enter a valid value.') : _ref18$invalidMessage;
if (invalid && invalidMessage) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
css: css,
marquee: true,
relative: true,
type: "transparent",
children: invalidMessage
});
}
},
submitButton: function submitButton(_ref19) {
var css = _ref19.css,
disabled = _ref19.disabled,
invalid = _ref19.invalid,
maxLength = _ref19.maxLength,
minLength = _ref19.minLength,
noSubmitButton = _ref19.noSubmitButton,
onSubmit = _ref19.onSubmit,
value = _ref19.value,
numberInputField = _ref19.numberInputField;
var isDisabled = disabled || invalid || normalizeValue(value, maxLength).toString().length < minLength;
if (!noSubmitButton && (minLength !== maxLength || !getSeparated(numberInputField, maxLength))) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
className: css.submitButton,
disabled: isDisabled,
onClick: onSubmit,
children: (0, _$L["default"])('Submit')
});
} else {
return null;
}
},
style: function style(_ref20) {
var maxLength = _ref20.maxLength,
_style = _ref20.style;
return _objectSpread(_objectSpread({}, _style), {}, {
'--input-max-number-length': maxLength
});
}
},
render: function render(_ref21) {
var css = _ref21.css,
disabled = _ref21.disabled,
invalidTooltip = _ref21.invalidTooltip,
maxLength = _ref21.maxLength,
numberInputField = _ref21.numberInputField,
onAdd = _ref21.onAdd,
onRemove = _ref21.onRemove,
showKeypad = _ref21.showKeypad,
submitButton = _ref21.submitButton,
type = _ref21.type,
value = _ref21.value,
rest = _objectWithoutProperties(_ref21, _excluded2);
var password = type === 'password';
delete rest.announce;
delete rest.invalid;
delete rest.invalidMessage;
delete rest.minLength;
delete rest.noSubmitButton;
delete rest.onBeforeChange;
delete rest.onComplete;
delete rest.onSubmit;
delete rest.rtl;
var separated = getSeparated(numberInputField, maxLength);
var field;
if (separated) {
var values = value.split('');
var items = new Array(maxLength).fill('');
field = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Repeater["default"], _objectSpread(_objectSpread({}, rest), {}, {
component: _Layout["default"],
childComponent: _Layout.Cell,
inline: true,
children: items.map(function (_, index) {
return {
active: index === value.length,
children: values[index],
component: NumberCell,
disabled: disabled,
key: "key-".concat(index),
password: password,
shrink: true
};
})
}));
} else {
field = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
disabled: disabled,
children: password ? (0, _util.convertToPasswordFormat)(value) : value
}));
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: css.fieldWrapper,
children: [field, invalidTooltip]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), showKeypad ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Keypad["default"], {
"aria-label": " ",
disabled: disabled,
onAdd: onAdd,
onRemove: onRemove
}) : null, submitButton]
});
}
});
var NumberFieldDecorator = (0, _compose["default"])(_Changeable["default"], (0, _I18nDecorator.I18nContextDecorator)({
rtlProp: 'rtl'
}));
var NumberField = NumberFieldDecorator(NumberFieldBase);
var _default = exports["default"] = NumberField;