"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DividerDecorator = exports.DividerBase = exports.Divider = exports.default = void 0;

var _kind = _interopRequireDefault(require("@enact/core/kind"));

var _Uppercase = _interopRequireDefault(require("@enact/i18n/Uppercase"));

var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _compose = _interopRequireDefault(require("ramda/src/compose"));

var _defaultProps = _interopRequireDefault(require("recompose/defaultProps"));

var _setPropTypes = _interopRequireDefault(require("recompose/setPropTypes"));

var _react = _interopRequireDefault(require("react"));

var _Marquee = require("../Marquee");

var _Skinnable = _interopRequireDefault(require("../Skinnable"));

var _Divider = _interopRequireDefault(require("./Divider.less"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Moonstone styled labeled divider components and behaviors
 *
 * @example
 * <Divider
 *   casing="preserve"
 *   spacing="medium"
 * >
 *   A group of related components
 * </Divider>
 *
 * @module moonstone/Divider
 * @exports Divider
 * @exports DividerBase
 * @exports DividerDecorator
 */

/**
 * A labeled divider component.
 *
 * This component is most often not used directly but may be composed within another component as it
 * is within [Divider]{@link moonstone/Divider.Divider}.
 *
 * @class DividerBase
 * @memberof moonstone/Divider
 * @ui
 * @public
 */
var DividerBase = (0, _kind.default)({
  name: 'Divider',
  propTypes:
  /** @lends moonstone/Divider.DividerBase.prototype */
  {
    /**
     * The text for the label of the divider.
     *
     * A divider with no children (text content) will render simply as a horizontal line, with
     * even spacing above and below.
     *
     * @type {Node}
     * @public
     */
    children: _propTypes.default.node,

    /**
     * The size of the spacing around the divider.
     *
     * Allowed values include:
     * * `'normal'` (default) - slightly larger than the standard spotlight spacing.
     * * `'small'` - same size as spotlight spacing.
     * * `'medium'` - 2x spotlight.
     * * `'large'` - 3x spotlight.
     * * `'none'` - no spacing at all. Neighboring elements will directly touch the divider.
     *
     * _Note:_ Spacing is separate from margin with regard to `margin-top`. It ensures a
     * consistent distance from the bottom horizontal line. It's safe to use `margin-top` to add
     * additional spacing above the divider.
     *
     * @type {String}
     * @default 'normal'
     * @public
     */
    spacing: _propTypes.default.oneOf(['normal', 'small', 'medium', 'large', 'none'])
  },
  defaultProps: {
    spacing: 'normal'
  },
  styles: {
    css: _Divider.default,
    className: 'divider'
  },
  computed: {
    className: function className(_ref) {
      var spacing = _ref.spacing,
          styler = _ref.styler;
      return styler.append(spacing);
    }
  },
  render: function render(props) {
    delete props.spacing;
    return _react.default.createElement("h3", props);
  }
});
/**
 * Applies Moonstone specific behaviors to [DividerBase]{@link moonstone/Divider.DividerBase}.
 *
 * @hoc
 * @memberof moonstone/Divider
 * @mixes i18n/Uppercase.Uppercase
 * @mixes moonstone/MarqueeDecorator.MarqueeDecorator
 * @mixes moonstone/Skinnable.Skinnable
 * @public
 */

exports.DividerBase = DividerBase;
var DividerDecorator = (0, _compose.default)((0, _setPropTypes.default)({
  marqueeOn: _propTypes.default.oneOf(['hover', 'render'])
}), (0, _defaultProps.default)({
  casing: 'word',
  marqueeOn: 'render'
}), _Pure.default, _Uppercase.default, _Marquee.MarqueeDecorator, _Skinnable.default);
/**
 * A labeled divider component, ready to use in Moonstone applications.
 *
 * `Divider` may be used as a header to group related components.
 *
 * Usage:
 * ```
 * <Divider
 *   casing="preserve"
 *   spacing="medium"
 * >
 *   Related Settings
 * </Divider>
 * <CheckboxItem>A Setting</CheckboxItem>
 * <CheckboxItem>A Second Setting</CheckboxItem>
 * ```
 *
 * @class Divider
 * @memberof moonstone/Divider
 * @extends moonstone/Divider.DividerBase
 * @mixes moonstone/Divider.DividerDecorator
 * @ui
 * @public
 */

exports.DividerDecorator = DividerDecorator;
var Divider = DividerDecorator(DividerBase);
/**
 * The casing mode applied to the `children` text.
 *
 * @name casing
 * @type {String}
 * @default 'word'
 * @memberof moonstone/Divider.Divider.prototype
 * @see i18n/Uppercase#casing
 * @public
 */

/**
 * Marquee animation trigger.
 *
 * Allowed values include:
 * * `'hover'` - Marquee begins when the pointer enters the component
 * * `'render'` - Marquee begins when the component is rendered
 *
 * @name marqueeOn
 * @type {String}
 * @default 'render'
 * @memberof moonstone/Divider.Divider.prototype
 * @see moonstone/Marquee.Marquee
 * @public
 */

exports.Divider = Divider;
var _default = Divider;
exports.default = _default;