@enact/limestone 1.9.3 → 1.10.0

package/Input/InputField.js

@@ -13,11 +13,12 @@ var _AnnounceDecorator = require("@enact/ui/AnnounceDecorator");
 var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _speech = require("@enact/webos/speech");
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames3 = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
 var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Marquee = require("../Marquee");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _Tooltip = _interopRequireDefault(require("../TooltipDecorator/Tooltip"));
 var _util2 = require("../internal/util");
@@ -26,7 +27,23 @@ var _InputFieldSpotlightDecorator = _interopRequireDefault(require("./InputField
 var _util3 = require("./util");
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "dir", "disabled", "iconAfter", "iconBefore", "invalidTooltip", "onChange", "placeholder", "type", "value"];
+var _excluded = ["css", "dir", "disabled", "iconAfter", "iconBefore", "invalidTooltip", "marqueeContent", "onChange", "placeholder", "type", "value"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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(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); }
+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; }
+var MarqueeText = (0, _Marquee.MarqueeDecorator)({
+  css: {
+    text: _InputFieldModule["default"].marqueeTextInner,
+    animate: _InputFieldModule["default"].marqueeTextAnimate,
+    willAnimate: _InputFieldModule["default"].marqueeTextWillAnimate
+  }
+}, 'div');
+
 /**
  * A Limestone styled input component.
  *
@@ -38,17 +55,16 @@ var _excluded = ["css", "dir", "disabled", "iconAfter", "iconBefore", "invalidTo
  * @ui
  * @public
  */
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-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(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); }
-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; }
 var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
   name: 'InputField',
   propTypes: /** @lends limestone/Input.InputFieldBase.prototype */{
+    /**
+     * Indicates the input is currently active/focused for editing
+     *
+     * @type {Boolean}
+     * @private
+     */
+    active: _propTypes["default"].bool,
     /**
      * Passed by AnnounceDecorator for accessibility.
      *
@@ -56,6 +72,14 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
      * @public
      */
     announce: _propTypes["default"].func,
+    /**
+     * Moves the caret to the end of the text when the input receives focus.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    caretToEndOnFocus: _propTypes["default"].bool,
     /**
      * Customizes the component by mapping the supplied collection of CSS class names to the
      * corresponding internal elements and states of this component.
@@ -128,6 +152,14 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
      * @public
      */
     invalidMessage: _propTypes["default"].string,
+    /**
+     * Wraps the input's value/placeholder display in a marquee.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    marqueeContent: _propTypes["default"].bool,
     /**
      * Called before the input value is changed.
      *
@@ -224,9 +256,12 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
   },
   defaultProps: {
+    active: false,
+    caretToEndOnFocus: false,
     disabled: false,
     dismissOnEnter: false,
     invalid: false,
+    marqueeContent: false,
     placeholder: '',
     size: 'small',
     type: 'text'
@@ -234,7 +269,7 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
   styles: {
     css: _InputFieldModule["default"],
     className: 'inputField',
-    publicClassNames: ['bg', 'inputField', 'input', 'inputHighlight', 'tooltip', 'tooltipLabel']
+    publicClassNames: ['bg', 'inputField', 'input', 'inputHighlight', 'inputWrapper', 'marqueeText', 'placeholderText', 'tooltip', 'tooltipLabel']
   },
   handlers: {
     onChange: (0, _handle.handle)((0, _handle.forwardCustomWithPrevent)('onBeforeChange', function (ev) {
@@ -266,14 +301,18 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       return (0, _util3.calcAriaLabel)(title, type, value);
     },
     className: function className(_ref3) {
-      var iconAfter = _ref3.iconAfter,
+      var active = _ref3.active,
+        iconAfter = _ref3.iconAfter,
         iconBefore = _ref3.iconBefore,
         invalid = _ref3.invalid,
+        marqueeContent = _ref3.marqueeContent,
         size = _ref3.size,
         styler = _ref3.styler;
       return styler.append({
+        active: active,
         hasIconAfter: iconAfter,
         hasIconBefore: iconBefore,
+        hasMarquee: marqueeContent,
         invalid: invalid
       }, size);
     },
@@ -310,6 +349,7 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       iconAfter = _ref7.iconAfter,
       iconBefore = _ref7.iconBefore,
       invalidTooltip = _ref7.invalidTooltip,
+      marqueeContent = _ref7.marqueeContent,
       onChange = _ref7.onChange,
       placeholder = _ref7.placeholder,
       type = _ref7.type,
@@ -321,7 +361,9 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
     if (type === 'password' || type === 'passwordtel') {
       inputProps.spellCheck = false;
     }
+    delete rest.active;
     delete rest.announce;
+    delete rest.caretToEndOnFocus;
     delete rest.dismissOnEnter;
     delete rest.invalid;
     delete rest.invalidMessage;
@@ -341,17 +383,24 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: css.inputHighlight,
         children: value ? value : placeholder
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), voiceProps), {}, {
-        "aria-hidden": isPasswordtel,
-        className: (0, _classnames2["default"])(css.input, _defineProperty({}, css.passwordtel, isPasswordtel)),
-        dir: dir,
-        disabled: disabled,
-        onChange: onChange,
-        placeholder: placeholder,
-        tabIndex: -1,
-        type: isPasswordtel ? 'tel' : type,
-        value: value
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFieldDecoratorIcon["default"], {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: css.inputWrapper,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), voiceProps), {}, {
+          "aria-hidden": isPasswordtel,
+          className: (0, _classnames3["default"])(css.input, _defineProperty({}, css.passwordtel, isPasswordtel)),
+          dir: dir,
+          disabled: disabled,
+          onChange: onChange,
+          placeholder: placeholder,
+          tabIndex: -1,
+          type: isPasswordtel ? 'tel' : type,
+          value: value
+        })), marqueeContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarqueeText, {
+          className: (0, _classnames3["default"])(css.marqueeText, _defineProperty(_defineProperty({}, css.passwordtel, isPasswordtel || type === 'password'), css.placeholderText, value === '')),
+          disabled: disabled,
+          children: value !== '' ? value : placeholder
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFieldDecoratorIcon["default"], {
         className: css.iconAfter,
         position: "after",
         size: "large",
@@ -387,7 +436,9 @@ var AnnounceDecorator = function AnnounceDecorator(Wrapped) {
  */
 var InputFieldDecorator = exports.InputFieldDecorator = (0, _compose["default"])(_Pure["default"], (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}), _Changeable["default"], _InputFieldSpotlightDecorator["default"], AnnounceDecorator, _Skinnable["default"]);
+}), _Changeable["default"], _InputFieldSpotlightDecorator["default"], AnnounceDecorator, (0, _Marquee.MarqueeController)({
+  marqueeOnFocus: true
+}), _Skinnable["default"]);
 
 /**
  * A Spottable, Limestone styled input component with embedded icon support.