build(aio): improve `enum` API rendering (#23872)

* The member details section is now called "Members", rather
than "Properties".
* The property table now displays appropriate table headings:
"Member", "Value", "Description".
* The "Value" column is not shown if none of the members have
a value.

Closes #22678

PR Close #23872
This commit is contained in:
Pete Bacon Darwin 2018-05-12 13:30:19 +01:00 committed by Alex Rickabaugh
parent a2e8b3a6a8
commit 02acb5e3e5
4 changed files with 50 additions and 4 deletions

View File

@ -0,0 +1,9 @@
module.exports = function hasValues() {
return {
name: 'hasValues',
process: function(list, property) {
if (!list || !Array.isArray(list)) return false;
return list.some(item => item[property]);
}
};
};

View File

@ -0,0 +1,19 @@
const factory = require('./hasValues');
describe('hasValues filter', () => {
let filter;
beforeEach(function() { filter = factory(); });
it('should be called "hasValues"', function() { expect(filter.name).toEqual('hasValues'); });
it('should return true if the specified property is truthy on any item in the list', function() {
expect(filter.process([], 'a')).toEqual(false);
expect(filter.process(0), 'a').toEqual(false);
expect(filter.process({}, 'a')).toEqual(false);
expect(filter.process([{a: 1}], 'a')).toEqual(true);
expect(filter.process([{b: 2}], 'a')).toEqual(false);
expect(filter.process([{a: 1, b: 2}], 'a')).toEqual(true);
expect(filter.process([{b: 2}, {a: 1}], 'a')).toEqual(true);
});
});

View File

@ -1 +1,14 @@
{% extends 'class.template.html' -%}
{% import "lib/memberHelpers.html" as memberHelpers -%}
{% extends 'export-base.template.html' -%}
{% block details %}
<section class="enum-overview">
<code-example language="ts" hideCopy="true">
enum {$ doc.name $} {{$ memberHelpers.renderMembers(doc) $}
}
</code-example>
</section>
{% include "includes/description.html" %}
{$ memberHelpers.renderProperties(doc.properties, 'members', 'member', 'Members', ['Member', 'Value']) $}
{% endblock %}

View File

@ -135,20 +135,25 @@
{%- endmacro -%}
{%- macro renderProperties(properties, containerClass, propertyClass, headingText) -%}
{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings) -%}
{% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %}
{% set hasTypes = properties | hasValues('type') %}
{% if nonInternalProperties.length -%}
<section class="{$ containerClass $}">
<h2>{$ headingText $}</h2>
<table class="is-full-width list-table properties-table">
<thead>
<tr><th>Property</th><th>Type</th><th>Description</th></tr>
<tr>
<th>{$ headings[0] or 'Property' $}</th>
{% if hasTypes %}<th>{$ headings[1] or 'Type' $}</th>{% endif %}
<th>{$ headings[2] or 'Description' $}</th>
</tr>
</thead>
<tbody>
{% for property in nonInternalProperties %}
<tr class="{$ propertyClass $}">
<td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
<td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>
{% if hasTypes %}<td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>{% endif %}
<td>
{%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
{% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}