label-cell.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
  2. /* This Source Code Form is subject to the terms of the Mozilla Public
  3. * License, v. 2.0. If a copy of the MPL was not distributed with this
  4. * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  5. "use strict";
  6. // Make this available to both AMD and CJS environments
  7. define(function (require, exports, module) {
  8. // ReactJS
  9. const React = require("devtools/client/shared/vendor/react");
  10. // Shortcuts
  11. const { td, span } = React.DOM;
  12. const PropTypes = React.PropTypes;
  13. /**
  14. * Render the default cell used for toggle buttons
  15. */
  16. let LabelCell = React.createClass({
  17. displayName: "LabelCell",
  18. // See the TreeView component for details related
  19. // to the 'member' object.
  20. propTypes: {
  21. member: PropTypes.object.isRequired
  22. },
  23. render: function () {
  24. let member = this.props.member;
  25. let level = member.level || 0;
  26. // Compute indentation dynamically. The deeper the item is
  27. // inside the hierarchy, the bigger is the left padding.
  28. let rowStyle = {
  29. "paddingInlineStart": (level * 16) + "px",
  30. };
  31. let iconClassList = ["treeIcon"];
  32. if (member.hasChildren && member.loading) {
  33. iconClassList.push("devtools-throbber");
  34. } else if (member.hasChildren) {
  35. iconClassList.push("theme-twisty");
  36. }
  37. if (member.open) {
  38. iconClassList.push("open");
  39. }
  40. return (
  41. td({
  42. className: "treeLabelCell",
  43. key: "default",
  44. style: rowStyle},
  45. span({ className: iconClassList.join(" ") }),
  46. span({
  47. className: "treeLabel " + member.type + "Label",
  48. "data-level": level
  49. }, member.name)
  50. )
  51. );
  52. }
  53. });
  54. // Exports from this module
  55. module.exports = LabelCell;
  56. });