wix-style-react
Version:
wix-style-react
230 lines (228 loc) • 7.99 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemSectionBuilder = exports.default = exports.TYPES = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ListItemSectionSt = require("./ListItemSection.st.css");
var _Divider = _interopRequireDefault(require("../Divider"));
var _Text = _interopRequireWildcard(require("../Text"));
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _constants = require("./constants");
var _StringUtils = require("../utils/StringUtils");
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ListItemSection/ListItemSection.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var TYPES = exports.TYPES = {
WHITESPACE: 'whitespace',
DIVIDER: 'divider',
TITLE: 'title',
SUBHEADER: 'subheader'
};
/** ListItemSection description */
class ListItemSection extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {};
this._renderDivisionElements = children => {
var {
dataHook,
type
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _ListItemSectionSt.st)(_ListItemSectionSt.classes.root, {
[type]: true
}),
"data-hook": dataHook,
onClick: e => e.stopPropagation(),
children: children,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 7
}
});
};
this._renderSuffix = () => {
var {
suffix,
onClick,
ellipsis
} = this.props;
return (0, _StringUtils.isString)(suffix) ? /*#__PURE__*/_react.default.createElement("div", {
className: _ListItemSectionSt.classes.suffixWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
ellipsis: ellipsis,
dataHook: _constants.dataHooks.SUFFIX,
size: "tiny",
onClick: onClick,
className: _ListItemSectionSt.classes.suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 9
}
}, suffix)) : /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.SUFFIX,
className: _ListItemSectionSt.classes.suffixWrapper,
onClick: onClick,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 7
}
}, suffix);
};
this._renderTitle = () => {
var {
dataHook,
className,
type,
title,
suffix,
ellipsis
} = this.props;
var isSubheader = type === TYPES.SUBHEADER;
var getTextWeight = newColorsBranding => {
if (!newColorsBranding) {
return _Text.WEIGHTS.thin;
}
return isSubheader ? _Text.WEIGHTS.normal : _Text.WEIGHTS.bold;
};
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _ListItemSectionSt.st)(_ListItemSectionSt.classes.root, {
subheader: isSubheader,
ellipsis,
suffix: !!suffix,
newColorsBranding
}, className),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _ListItemSectionSt.classes.titleWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.dataHooks.TITLE,
tagName: "div",
size: "small",
className: _ListItemSectionSt.classes.title,
ellipsis: ellipsis,
enterDelay: 300,
weight: getTextWeight(newColorsBranding),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 15
}
}, title)), suffix && this._renderSuffix());
});
};
}
render() {
var {
type
} = this.props;
if (type === TYPES.WHITESPACE) return this._renderDivisionElements();
if (type === TYPES.DIVIDER) return this._renderDivisionElements(/*#__PURE__*/_react.default.createElement(_Divider.default, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 43
}
}));
return this._renderTitle();
}
}
ListItemSection.displayName = 'ListItemSection';
ListItemSection.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.string,
/** A list item section can be
* * `title` - Acts as a title for following list items.
* * `subheader` - Acts as separator between list items for differentiation.
* * `whitespace` - Adds some padding between list items.
* * `divider` - Same as whitespace, but with a line.
*/
type: _propTypes.default.oneOf(Object.values(TYPES)),
/** Text of the list item */
title: _propTypes.default.node,
/** Suffix node. Renders TextButton for a string otherwise the node itself.*/
suffix: _propTypes.default.node,
/** If true, long text won't break into more than one line and will be terminated with an ellipsis */
ellipsis: _propTypes.default.bool,
/** A callback function called when suffix is clicked */
onClick: _propTypes.default.func
};
ListItemSection.defaultProps = {
type: TYPES.TITLE,
ellipsis: false
};
var _default = exports.default = ListItemSection;
var listItemSectionBuilder = _ref2 => {
var {
id,
className,
dataHook,
type,
title,
suffix,
ellipsis
} = _ref2;
return {
id,
overrideOptionStyle: true,
disabled: true,
value: props => /*#__PURE__*/_react.default.createElement(ListItemSection, (0, _extends2.default)({
className: className,
dataHook: dataHook,
type: type,
title: title,
suffix: suffix,
ellipsis: ellipsis
}, props, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 5
}
}))
};
};
exports.listItemSectionBuilder = listItemSectionBuilder;
//# sourceMappingURL=ListItemSection.js.map