@activecollab/components
Version:
ActiveCollab Components
96 lines (91 loc) • 4.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SAMPLE_NOTE = exports.NoteSkeleton = exports.NotePlaceholder = exports.NoteCard = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _shared = require("./shared");
var _Icons = require("../../../components/Icons");
var _Loaders = require("../../../components/Loaders");
var _StackedCard = require("../../../components/StackedCard");
var _Typography = require("../../../components/Typography");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* NoteCard — the new fifth type. A multi-line text card (Milanote-style): a
* title row that owns the "…" menu, then padded body rows. The body clamps at a
* line limit and fades out; auto-height, so the card grows with its content.
* Inline editing lands in task 4/8 — this is the read view + placeholder.
*/
/* The body clamps at a max height and fades out with a mask so long notes end
softly instead of hard-cropping. white-space: pre-line keeps authored breaks. */
var StyledNoteBody = (0, _styledComponents.default)(_Typography.Body2).withConfig({
displayName: "NoteCard__StyledNoteBody",
componentId: "sc-e2a7no-0"
})(["display:block;max-height:132px;overflow:hidden;white-space:pre-line;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);"]);
var SAMPLE_NOTE = exports.SAMPLE_NOTE = "Kickoff open questions before we lock the columns:\n\n\u2022 Who owns the migration off react-dnd, and does it block the canvas work or run in parallel?\n\u2022 Confirm the outline-placeholder choreography reads the same in a scrolled column.\n\u2022 Do we ship the note type in v1, or defer inline editing?";
var NoteCard = exports.NoteCard = function NoteCard(_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? "Kickoff notes" : _ref$title,
_ref$body = _ref.body,
body = _ref$body === void 0 ? SAMPLE_NOTE : _ref$body,
_ref$showProjectName = _ref.showProjectName,
showProjectName = _ref$showProjectName === void 0 ? false : _ref$showProjectName,
_ref$projectName = _ref.projectName,
projectName = _ref$projectName === void 0 ? "Marketing Site" : _ref$projectName;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
role: "title"
}, /*#__PURE__*/_react.default.createElement(_shared.StyledTitleBlock, null, showProjectName ? /*#__PURE__*/_react.default.createElement(_shared.CardProjectLine, null, projectName) : null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "bold"
}, title)), /*#__PURE__*/_react.default.createElement(_shared.EntityDots, {
"aria-label": "Note options"
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
role: "custom",
direction: "column"
}, /*#__PURE__*/_react.default.createElement(StyledNoteBody, {
color: "secondary"
}, body)));
};
/* ---- placeholder + skeleton ---- */
var NotePlaceholder = exports.NotePlaceholder = function NotePlaceholder(props) {
return /*#__PURE__*/_react.default.createElement(_shared.Placeholder, _extends({
icon: /*#__PURE__*/_react.default.createElement(_Icons.NoteIcon, null),
label: "Write a note"
}, props));
};
/* Skeleton mirrors the note anatomy: a title line, then several body lines. */
var NoteSkeleton = exports.NoteSkeleton = function NoteSkeleton() {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
role: "title"
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
style: {
height: 14,
width: "50%"
}
})), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRow, {
role: "custom",
direction: "column"
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
style: {
height: 10,
width: "100%"
}
}), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
style: {
height: 10,
width: "96%"
}
}), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
style: {
height: 10,
width: "88%"
}
}), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
style: {
height: 10,
width: "70%"
}
})));
};
//# sourceMappingURL=NoteCard.js.map