@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
300 lines (296 loc) • 12.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.StepsDecorator = exports.StepsBase = exports.Steps = void 0;
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _util = require("@enact/core/util");
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _Repeater = _interopRequireDefault(require("@enact/ui/Repeater"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _StepsModule = _interopRequireDefault(require("./Steps.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["iconComponent", "size", "steps"];
/**
* Provides Sandstone styled component to indicate progress along a continuum.
*
* In the following example, 6 total steps will be displayed with the current step being the 3rd
* step, having passed the previous 2 steps, with 3 more to go.
*
* @example
* <Steps total={6} current={3} />
*
* @module sandstone/Steps
* @exports Steps
* @exports StepsBase
* @exports StepsDecorator
*/
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 PageIndicator = function PageIndicator(_ref) {
var className = _ref.className;
var mergedClasses = (0, _classnames["default"])(_StepsModule["default"].pageIndicator, className);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: mergedClasses
});
};
/**
* Renders a sandstone-styled steps component only basic behavior.
*
* @class StepsBase
* @memberof sandstone/Steps
* @ui
* @public
*/
var StepsBase = exports.StepsBase = (0, _kind["default"])({
name: 'Steps',
propTypes: /** @lends sandstone/Steps.StepsBase.prototype */{
/**
* 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:
*
* * `steps` - The root class name
* * `step` - Applied to each individual step
* * `numbers` - Applied on the steps designated as "numbers" special case (See: `Icon` related props below)
* * `past` - Applied to the steps preceding the current step
* * `current` - Applied to the current step
* * `future` - Applied to the steps following the current step
*
* When providing a custom `iconComponent` it will receive the classes:
* 'step' (always), 'numbers' (conditionally, based on the "numbers" value), and one of the
* following three, based on the `current` step: 'past', 'current', and 'future'.
*
* @type {Object}
* @public
*/
css: _propTypes2["default"].object,
/**
* Indicate the current step.
*
* This is 1-based, not 0-based; as in the first step is `1`.
*
* @type {Number}
* @default 1
* @public
*/
current: _propTypes2["default"].number,
/**
* The icon to use for indicating the current step.
*
* This accepts any icon supported by {@link sandstone/Icon}, in addition to a special
* value: "numbers", which instead of a standard icon, shows the number of the step.
*
* @type {String}
* @default 'numbers'
* @public
*/
currentIcon: _propTypes2["default"].string,
/**
* The icon to use for indicating all steps following the current step.
*
* This accepts any icon supported by {@link sandstone/Icon}, in addition to a special
* value: "numbers", which instead of a standard icon, shows the number of the step.
*
* @type {String}
* @default 'numbers'
* @public
*/
futureIcon: _propTypes2["default"].string,
/**
* Defines how to represent the current step.
*
* When `true`, highlight effect will be applied only to the current icon.
* When `false`, highlight effect will be applied to past and current icons.
*
* @type {Boolean}
* @public
*/
highlightCurrentOnly: _propTypes2["default"].bool,
/**
* Defines a custom element to use as the icon component.
*
* Use the `css` prop and public class name override system to target the classes applied to
* this component. This component will be repeated `total` number of times and will also
* receive the `children` and `size` props.
*
* @type {Component}
* @default sandstone/Icon.Icon
* @public
*/
iconComponent: _propTypes["default"].component,
/**
* The icon to use for indicating all steps preceding the current step.
*
* This accepts any icon supported by {@link sandstone/Icon}, in addition to a special
* value: "numbers", which instead of a standard icon, shows the number of the step.
*
* @type {String}
* @default 'check'
* @public
*/
pastIcon: _propTypes2["default"].string,
/**
* The size of the step icons.
* This accepts any `size` supported by {@link sandstone/Icon}.
*
* @type {('large'|'medium'|'small'|'tiny'|Number)}
* @default 'small'
* @public
*/
size: _propTypes2["default"].oneOfType([_propTypes2["default"].oneOf(['large', 'medium', 'small', 'tiny']), _propTypes2["default"].number]),
/**
* Indicate which steps to skip.
*
* A number or array of step numbers is acceptable.
*
* @type {Number|Number[]}
* @public
*/
skip: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].arrayOf(_propTypes2["default"].number)]),
/**
* The icon to use for any skipped steps, past or future.
*
* This accepts any icon supported by {@link sandstone/Icon}.
*
* The current step will always show the `currentIcon` regardless of whether it has been
* skipped. It's the developer's responsibility to not set `current` to a skipped step.
*
* @type {String}
* @default 'minus'
* @public
*/
skipIcon: _propTypes2["default"].string,
/**
* Indicate the total number of steps.
*
* @type {Number}
* @default 2
* @public
*/
total: _propTypes2["default"].number
},
defaultProps: {
current: 1,
iconComponent: _Icon["default"],
pastIcon: 'check',
currentIcon: 'numbers',
futureIcon: 'numbers',
size: 'small',
skipIcon: 'minus',
total: 2
},
styles: {
css: _StepsModule["default"],
className: 'steps',
publicClassNames: ['steps', 'step', 'numbers', 'past', 'current', 'future']
},
computed: {
iconComponent: function iconComponent(_ref2) {
var highlightCurrentOnly = _ref2.highlightCurrentOnly,
_iconComponent = _ref2.iconComponent;
return highlightCurrentOnly && _iconComponent === _Icon["default"] ? PageIndicator : _iconComponent;
},
steps: function steps(_ref3) {
var current = _ref3.current,
pastIcon = _ref3.pastIcon,
currentIcon = _ref3.currentIcon,
futureIcon = _ref3.futureIcon,
highlightCurrentOnly = _ref3.highlightCurrentOnly,
skip = _ref3.skip,
skipIcon = _ref3.skipIcon,
total = _ref3.total,
styler = _ref3.styler;
skip = (0, _util.coerceArray)(skip);
return Array.from(Array(total)).map(function (el, index) {
var stepNum = index + 1;
var skipStep = skip.indexOf(stepNum) >= 0;
var past = stepNum < current;
var present = stepNum === current;
var future = stepNum > current;
var children,
numbers = false;
if (present) {
numbers = currentIcon === 'numbers';
children = numbers ? stepNum.toString() : currentIcon;
} else if (past) {
numbers = pastIcon === 'numbers';
children = numbers ? stepNum.toString() : pastIcon;
} else if (future) {
numbers = futureIcon === 'numbers';
children = numbers ? stepNum.toString() : futureIcon;
}
if (skipStep && !present) {
numbers = skipIcon === 'numbers';
children = numbers ? stepNum.toString() : skipIcon;
}
return {
className: styler.join('step', {
numbers: numbers,
past: past,
current: present,
future: future,
skip: skipStep && !present,
highlightCurrentOnly: highlightCurrentOnly
}),
key: "step".concat(stepNum),
children: children
};
});
}
},
render: function render(_ref4) {
var iconComponent = _ref4.iconComponent,
size = _ref4.size,
steps = _ref4.steps,
rest = _objectWithoutProperties(_ref4, _excluded);
delete rest.current;
delete rest.currentIcon;
delete rest.futureIcon;
delete rest.highlightCurrentOnly;
delete rest.pastIcon;
delete rest.skip;
delete rest.skipIcon;
delete rest.total;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Repeater["default"], _objectSpread(_objectSpread({}, rest), {}, {
component: "div",
childComponent: iconComponent,
itemProps: {
size: size
},
children: steps
}));
}
});
/**
* Sandstone-specific behaviors to apply to {@link sandstone/Steps.StepsBase|StepsBase}.
*
* @hoc
* @memberof sandstone/Steps
* @mixes sandstone/Skinnable.Skinnable
* @public
*/
var StepsDecorator = exports.StepsDecorator = (0, _compose["default"])(_Skinnable["default"]);
/**
* A full-featured Sandstone-styled step component.
*
* @class Steps
* @memberof sandstone/Steps
* @extends sandstone/Steps.StepsBase
* @mixes sandstone/Steps.StepsDecorator
* @ui
* @public
*/
var Steps = exports.Steps = StepsDecorator(StepsBase);
var _default = exports["default"] = Steps;