@enact/limestone 1.3.0

package/Button/Button.d.ts

@@ -0,0 +1,131 @@
+// Type definitions for limestone/Button
+
+import { TooltipDecoratorProps as limestone_TooltipDecorator_TooltipDecoratorProps } from "limestone/TooltipDecorator";
+import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "limestone/Marquee";
+import { ButtonDecoratorProps as ui_Button_ButtonDecoratorProps } from "@enact/ui/Button";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { ButtonBaseProps as ui_Button_ButtonBaseProps } from "@enact/ui/Button";
+import * as React from "react";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface ButtonBaseProps extends ui_Button_ButtonBaseProps {
+  /**
+ * The background opacity of this button.
+ * 
+ * Text buttons and icon+text buttons, by default are opaque, while icon-only buttons
+default to transparent. This value can be overridden by setting this prop.
+ * 
+ * Valid values are:  `'opaque'` , and  `'transparent'` .
+ */
+  backgroundOpacity?: "opaque" | "transparent";
+  /**
+   * Adds a border to the button.
+   */
+  bordered?: boolean;
+  /**
+ * Centers the contents.
+ * 
+ * This requires that both the text and    are
+defined.
+ * 
+ * Applies the  `centered`  CSS class.
+ */
+  centered?: boolean;
+  /**
+ * The color of the underline beneath button's content.
+ * 
+ * Accepts one of the following color names, which correspond with the colored buttons on a
+standard remote control:  `'red'` ,  `'green'` ,  `'yellow'` ,  `'blue'` .
+ */
+  color?: "red" | "green" | "yellow" | "blue";
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `button`  - The root class name
+ * *  `bg`  - The background node of the button
+ * *  `large`  - Applied to a  `size='large'`  button
+ * *  `selected`  - Applied to a  `selected`  button
+ * *  `small`  - Applied to a  `size='small'`  button
+ */
+  css?: object;
+  /**
+   * Specifies on which side ( `'before'`  or  `'after'` ) of the text the icon appears.
+   */
+  iconPosition?: "before" | "after";
+  /**
+ * Boolean controlling whether this component should enforce the "minimum width" rules.
+ * 
+ * _NOTE_ : If you don't specify this prop, it works as  `false`  for icon only Button
+and as  `true`  for other Buttons.
+ */
+  minWidth?: boolean;
+  /**
+   * True if both sides of button are fully rounded.
+   */
+  roundBorder?: boolean;
+  /**
+ * Adds shadow to the text.
+It is only applied when the background opacity of the button is  `transparent` .
+ */
+  shadowed?: boolean;
+  /**
+   * The size of the button.
+   */
+  size?: "large" | "small";
+}
+/**
+ * A button component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class ButtonBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ButtonBaseProps>
+> {}
+
+export interface ButtonDecoratorProps
+  extends Merge<
+    Merge<
+      Merge<
+        Merge<
+          limestone_TooltipDecorator_TooltipDecoratorProps,
+          limestone_Marquee_MarqueeDecoratorProps
+        >,
+        ui_Button_ButtonDecoratorProps
+      >,
+      spotlight_Spottable_SpottableProps
+    >,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function ButtonDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ButtonDecoratorProps>;
+
+export interface ButtonProps
+  extends Merge<ButtonBaseProps, ButtonDecoratorProps> {}
+/**
+ * A button component, ready to use in Limestone applications.
+ * 
+ * Usage:
+ * ```
+<Button
+backgroundOpacity="transparent"
+size="small"
+icon="home"
+>
+	Press me!
+</Button>
+```
+ */
+
+export class Button extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ButtonProps>
+> {}
+
+export default Button;

package/Button/Button.js

@@ -0,0 +1,351 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ButtonDecorator = exports.ButtonBase = exports.Button = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _Button = require("@enact/ui/Button");
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Marquee = require("../Marquee");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _TooltipDecorator = _interopRequireDefault(require("../TooltipDecorator"));
+var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css"];
+/**
+ * Limestone styled button components and behaviors.
+ *
+ * @example
+ * <Button>Hello Enact!</Button>
+ *
+ * @module limestone/Button
+ * @exports Button
+ * @exports ButtonBase
+ * @exports ButtonDecorator
+ */
+/**
+ * A button component.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link limestone/Button.Button|Button}.
+ *
+ * @class ButtonBase
+ * @memberof limestone/Button
+ * @extends ui/Button.ButtonBase
+ * @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 ButtonBase = exports.ButtonBase = (0, _kind["default"])({
+  name: 'Button',
+  propTypes: /** @lends limestone/Button.ButtonBase.prototype */{
+    /**
+     * The background opacity of this button.
+     *
+     * Text buttons and icon+text buttons, by default are opaque, while icon-only buttons
+     * default to transparent. This value can be overridden by setting this prop.
+     *
+     * Valid values are: `'opaque'`, and `'transparent'`.
+     *
+     * @type {('opaque'|'transparent')}
+     * @default 'opaque'
+     * @public
+     */
+    backgroundOpacity: _propTypes2["default"].oneOf(['opaque', 'transparent']),
+    /**
+     * Adds a border to the button.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    bordered: _propTypes2["default"].bool,
+    /**
+     * Centers the contents.
+     *
+     * This requires that both the text and {@link ui/Button.ButtonBase.icon|icon} are
+     * defined.
+     *
+     * Applies the `centered` CSS class.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    centered: _propTypes2["default"].bool,
+    /**
+     * Enables the `collapsed` feature.
+     *
+     * This requires that both the text and {@link ui/Button.ButtonBase.icon|icon} are
+     * defined.
+     *
+     * Use {@link limestone/Button.ButtonBase.collapsed|collapsed} to toggle the collapsed state.
+     *
+     * @type {Boolean}
+     * @default false
+     * @see {@link limestone/Button.ButtonBase.collapsed}
+     * @private
+     */
+    collapsable: _propTypes2["default"].bool,
+    /**
+     * Toggles the collapsed state of this button, down to just its icon.
+     *
+     * This requires that {@link limestone/Button.ButtonBase.collapsable|collapsable} is enabled
+     * and both the text and {@link ui/Button.ButtonBase.icon|icon} are defined.
+     *
+     * @type {Boolean}
+     * @default false
+     * @see {@link limestone/Button.ButtonBase.collapsable}
+     * @private
+     */
+    collapsed: _propTypes2["default"].bool,
+    /**
+     * The color of the underline beneath button's content.
+     *
+     * Accepts one of the following color names, which correspond with the colored buttons on a
+     * standard remote control: `'red'`, `'green'`, `'yellow'`, `'blue'`.
+     *
+     * @type {('red'|'green'|'yellow'|'blue')}
+     * @public
+     */
+    color: _propTypes2["default"].oneOf(['red', 'green', 'yellow', 'blue']),
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `button` - The root class name
+     * * `bg` - The background node of the button
+     * * `large` - Applied to a `size='large'` button
+     * * `selected` - Applied to a `selected` button
+     * * `small` - Applied to a `size='small'` button
+     *
+     * @type {Object}
+     * @public
+     */
+    // `client` was intentionally excluded from the above documented exported classes as they do
+    // not appear to provide value to the end-developer, but are needed by PopupTabLayout
+    // internally for its design guidelines. Same for `pressed` which is used by Dropdown to
+    // nullify the key-press activate animation.
+    css: _propTypes2["default"].object,
+    /**
+     * Set the visual effect applied to the button when focused.
+     *
+     * @type {('expand'|'static')}
+     * @default 'expand'
+     * @private
+     */
+    focusEffect: _propTypes2["default"].oneOf(['expand', 'static']),
+    /**
+     * The component used to render the {@link limestone/Button.ButtonBase.icon|icon}.
+     *
+     * This component will receive the `icon` class to customize its styling.
+     *
+     * @type {Component|Node}
+     * @private
+     */
+    iconComponent: _propTypes["default"].componentOverride,
+    /**
+     * True if button is an icon only button.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    iconOnly: _propTypes2["default"].bool,
+    /**
+     * Specifies on which side (`'before'` or `'after'`) of the text the icon appears.
+     *
+     * @type {('before'|'after')}
+     * @default 'before'
+     * @public
+     */
+    iconPosition: _propTypes2["default"].oneOf(['before', 'after']),
+    /**
+     * Boolean controlling whether this component should enforce the "minimum width" rules.
+     *
+     * *NOTE*: If you don't specify this prop, it works as `false` for icon only Button
+     * and as `true` for other Buttons.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    minWidth: _propTypes2["default"].bool,
+    /**
+     * True if both sides of button are fully rounded.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    roundBorder: _propTypes2["default"].bool,
+    /**
+     * Adds shadow to the text.
+     * It is only applied when the background opacity of the button is `transparent`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    shadowed: _propTypes2["default"].bool,
+    /**
+     * The size of the button.
+     *
+     * @type {('large'|'small')}
+     * @default 'large'
+     * @public
+     */
+    size: _propTypes2["default"].oneOf(['large', 'small'])
+  },
+  defaultProps: {
+    backgroundOpacity: null,
+    collapsable: false,
+    collapsed: false,
+    focusEffect: 'expand',
+    iconComponent: _Icon["default"],
+    iconOnly: false,
+    iconPosition: 'before',
+    roundBorder: false,
+    size: 'large'
+  },
+  styles: {
+    css: _ButtonModule["default"],
+    publicClassNames: ['button', 'bg', 'client', 'hasIcon', 'icon', 'iconAfter', 'iconBefore', 'large', 'pressed', 'selected', 'small']
+  },
+  computed: {
+    className: function className(_ref) {
+      var backgroundOpacity = _ref.backgroundOpacity,
+        bordered = _ref.bordered,
+        centered = _ref.centered,
+        collapsable = _ref.collapsable,
+        collapsed = _ref.collapsed,
+        color = _ref.color,
+        focusEffect = _ref.focusEffect,
+        iconOnly = _ref.iconOnly,
+        iconPosition = _ref.iconPosition,
+        roundBorder = _ref.roundBorder,
+        shadowed = _ref.shadowed,
+        size = _ref.size,
+        styler = _ref.styler;
+      return styler.append({
+        bordered: bordered,
+        centered: centered,
+        collapsable: collapsable,
+        collapsed: collapsed,
+        hasColor: color,
+        iconOnly: iconOnly,
+        roundBorder: roundBorder,
+        shadowed: shadowed && (backgroundOpacity ? backgroundOpacity === 'transparent' : iconOnly)
+      }, backgroundOpacity || (iconOnly ? 'transparent' : 'opaque'),
+      // Defaults to opaque, unless otherwise specified
+      color, "focus".concat((0, _util.cap)(focusEffect)),
+      // iconBefore/iconAfter only applies when using text and an icon
+      !iconOnly && "icon".concat((0, _util.cap)(iconPosition)), size);
+    },
+    minWidth: function minWidth(_ref2) {
+      var iconOnly = _ref2.iconOnly,
+        _minWidth = _ref2.minWidth;
+      return _minWidth != null ? _minWidth : !iconOnly;
+    }
+  },
+  render: function render(_ref3) {
+    var css = _ref3.css,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    delete rest.backgroundOpacity;
+    delete rest.bordered;
+    delete rest.centered;
+    delete rest.color;
+    delete rest.collapsable;
+    delete rest.collapsed;
+    delete rest.focusEffect;
+    delete rest.iconOnly;
+    delete rest.iconPosition;
+    delete rest.roundBorder;
+    delete rest.shadowed;
+    return _Button.ButtonBase.inline(_objectSpread(_objectSpread({
+      'data-webos-voice-intent': 'Select'
+    }, rest), {}, {
+      css: css
+    }));
+  }
+});
+
+/**
+ * A higher-order component that determines if it is a button that only displays an icon.
+ *
+ * @class IconButtonDecorator
+ * @memberof limestone/Button
+ * @hoc
+ * @private
+ */
+var IconButtonDecorator = (0, _hoc["default"])(function (config, Wrapped) {
+  return (0, _kind["default"])({
+    name: 'IconButtonDecorator',
+    computed: {
+      iconOnly: function iconOnly(_ref4) {
+        var children = _ref4.children;
+        return _react.Children.toArray(children).filter(Boolean).length === 0;
+      }
+    },
+    render: function render(props) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
+    }
+  });
+});
+
+/**
+ * Applies Limestone specific behaviors to {@link limestone/Button.ButtonBase|Button} components.
+ *
+ * @hoc
+ * @memberof limestone/Button
+ * @mixes limestone/TooltipDecorator.TooltipDecorator
+ * @mixes limestone/Marquee.MarqueeDecorator
+ * @mixes ui/Button.ButtonDecorator
+ * @mixes spotlight/Spottable.Spottable
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var ButtonDecorator = exports.ButtonDecorator = (0, _compose["default"])(_Button.ButtonDecorator, _Pure["default"], IconButtonDecorator, (0, _TooltipDecorator["default"])({
+  tooltipDestinationProp: 'decoration'
+}),
+// Future note: This should eventually be conditionally applied via hooks (after refactoring)
+(0, _Marquee.MarqueeDecorator)({
+  css: _ButtonModule["default"]
+}), _Spottable["default"], _Skinnable["default"]);
+
+/**
+ * A button component, ready to use in Limestone applications.
+ *
+ * Usage:
+ * ```
+ * <Button
+ *	backgroundOpacity="transparent"
+ *	size="small"
+ *	icon="home"
+ * >
+ * 	Press me!
+ * </Button>
+ * ```
+ *
+ * @class Button
+ * @memberof limestone/Button
+ * @extends limestone/Button.ButtonBase
+ * @mixes limestone/Button.ButtonDecorator
+ * @ui
+ * @public
+ */
+var Button = exports.Button = ButtonDecorator(ButtonBase);
+var _default = exports["default"] = Button;