Skip to content

Commit 47a93b9

Browse files
TomPlumTomPlum
committed
chore(docs): fixed props anchor tag hierarchy in docs
1 parent af4e0b7 commit 47a93b9

File tree

3 files changed

+189
-184
lines changed

3 files changed

+189
-184
lines changed

‎README.md‎

Lines changed: 93 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,21 @@ A flexible and interactive React component for visualising Git commit history. D
3030
* [GitLogPaged](#gitlogpaged)
3131
* [Optional](#optional)
3232
* [GitLog](#gitlog-1)
33-
* [GitLogPaged](#gitlogpaged-1)
34-
* [GitLogStylingProps](#gitlogstylingprops)
3533
* [GitLogPaging](#gitlogpaging)
36-
* [GitLogIndexStatus](#gitlogindexstatus)
37-
* [GitLogUrlBuilder](#gitlogurlbuilder)
38-
* [CommitFilter](#commitfilter)
34+
* [GitLogPaged](#gitlogpaged-1)
3935
* [GraphHTMLGrid](#graphhtmlgrid)
36+
* [CustomCommitNode](#customcommitnode)
4037
* [GraphCanvas2D](#graphcanvas2d)
41-
* [NodeTheme](#nodetheme)
4238
* [Table](#table)
4339
* [GitLogTableStylingProps](#gitlogtablestylingprops)
4440
* [CustomTableRow](#customtablerow)
45-
* [CustomCommitNode](#customcommitnode)
46-
* [BreakPointTheme](#breakpointtheme)
41+
* [Common Types](#common-types)
42+
* [GitLogStylingProps](#gitlogstylingprops)
43+
* [GitLogIndexStatus](#gitlogindexstatus)
44+
* [GitLogUrlBuilder](#gitlogurlbuilder)
45+
* [CommitFilter](#commitfilter)
46+
* [NodeTheme](#nodetheme)
47+
* [BreakPointTheme](#breakpointtheme)
4748
* [Development](#development)
4849
* [References](#references)
4950
* [Roadmap](#roadmap)
@@ -303,6 +304,13 @@ All components have optional props to further configure the log.
303304
| `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. |
304305
| `filter` | [`CommitFilter<T>`](#commitfilter) | Filters the commits in the log based on the response from the function. |
305306

307+
#### GitLogPaging
308+
309+
| Prop | Type | Description |
310+
|--------|----------|-------------------------------------------------|
311+
| `size` | `number` | The number of rows to show per page. |
312+
| `page` | `number` | The page number to display (first page is `0`). |
313+
306314
### GitLogPaged
307315

308316
| Property | Type | Description |
@@ -322,52 +330,6 @@ All components have optional props to further configure the log.
322330
| `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. |
323331
| `filter` | [`CommitFilter<T>`](#commitfilter) | Filters the commits in the log based on the response from the function. |
324332

325-
326-
#### GitLogStylingProps
327-
| Property | Type | Description |
328-
|-------------------|-----------------|--------------------------------------------------------------------------------|
329-
| `containerClass` | `string` | Class name for the wrapping `<div>` containing branches, graph, and log table. |
330-
| `containerStyles` | `CSSProperties` | React CSS styling object for the wrapping container `<div>`. |
331-
332-
#### GitLogPaging
333-
334-
| Prop | Type | Description |
335-
|--------|----------|-------------------------------------------------|
336-
| `size` | `number` | The number of rows to show per page. |
337-
| `page` | `number` | The page number to display (first page is `0`). |
338-
339-
#### GitLogIndexStatus
340-
341-
| Prop | Type | Description |
342-
|------------|----------|---------------------------------------------------------------------------|
343-
| `added` | `number` | The number of added files in the git index for the checked-out branch. |
344-
| `deleted` | `number` | The number of deleted files in the git index for the checked-out branch. |
345-
| `modified` | `number` | The number of modified files in the git index for the checked-out branch. |
346-
347-
#### GitLogUrlBuilder
348-
349-
A function with the following signature
350-
```typescript
351-
type GitLogUrlBuilder = (args: GitLogUrlBuilderArgs) => GitLogUrls
352-
```
353-
Returns an object of type `GitLogUrls` with the following fields.
354-
355-
| Prop | Type | Description |
356-
|------------|----------|------------------------------------------------------------------------------------------|
357-
| `commit` | `string` | A resolved URL to a particular commit hash on the external Git providers remote website. |
358-
| `branch` | `string` | A resolved URL to a branch on the external Git providers remote website. |
359-
360-
#### CommitFilter
361-
362-
A function with the following signature
363-
```typescript
364-
type CommitFilter<T> = (commits: Commit<T>[]) => Commit<T>[]
365-
```
366-
367-
Is passed the array of `Commit<T>` objects from the log based on the current pagination configuration and must return the filtered array based on your own domain-specific behaviour.
368-
369-
The logs' subcomponents will respond accordingly based on the filtered list of commits.
370-
371333
### GraphHTMLGrid
372334

373335
| Property | Type | Description |
@@ -382,6 +344,42 @@ The logs' subcomponents will respond accordingly based on the filtered list of c
382344
| `node` | [`CustomCommitNode`](#customcommitnode) | A function that returns a custom commit node implementation used by the graph. |
383345
| `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. |
384346

347+
#### CustomCommitNode
348+
349+
A function with the following signature:
350+
```typescript
351+
type CustomCommitNode = (props: CustomCommitNodeProps) => ReactElement
352+
```
353+
354+
For example:
355+
```typescript jsx
356+
<GitLog.GraphHTMLGrid
357+
nodeSize={25}
358+
node={({ nodeSize, colour, isIndexPseudoNode, rowIndex }) => (
359+
<div
360+
className={styles.Node}
361+
style={{
362+
width: nodeSize,
363+
height: nodeSize,
364+
background: `url('https://placecats.com/${images[rowIndex % images.length]}/50/50?fit=contain&position=top') 50% 50%`,
365+
border: `2px ${isIndexPseudoNode ? 'dotted' : 'solid'} ${colour}`
366+
}}
367+
/>
368+
)}
369+
/>
370+
```
371+
372+
The following properties are injected into the functions `props` argument:
373+
374+
| Property | Type | Description |
375+
|---------------------|-----------|---------------------------------------------------------------------------------------------------------|
376+
| `commit` | `Commit` | Details of the commit that the node is being rendered for. |
377+
| `colour` | `string` | The colour of the commit based on the column in its and the theme. |
378+
| `rowIndex` | `number` | The (zero-based) index of the row that the node is in. |
379+
| `columnIndex` | `number` | The (zero-based) index of the column that the node is in. |
380+
| `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. |
381+
| `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. |
382+
385383
### GraphCanvas2D
386384
387385
| Property | Type | Description |
@@ -392,13 +390,6 @@ The logs' subcomponents will respond accordingly based on the filtered list of c
392390
| `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. |
393391
| `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. |
394392
395-
#### NodeTheme
396-
397-
| Prop | Type | Description |
398-
|-----------|----------|-----------------------------------------------------------------------|
399-
| `default` | `string` | The default theme where nodes change their style based on their type. |
400-
| `plain` | `string` | All nodes look the same, except for their colours. |
401-
402393
### Table
403394
404395
| Property | Type | Description |
@@ -460,43 +451,55 @@ The following properties are injected into the functions `props` argument:
460451
| `previewed` | `boolean` | Whether the row is previewed (is being hovered over). |
461452
| `backgroundColour` | `string` | The colour of the background as is normally applied to the table row. |
462453
463-
#### CustomCommitNode
454+
## Common Types
464455
465-
A function with the following signature:
456+
### GitLogStylingProps
457+
| Property | Type | Description |
458+
|-------------------|-----------------|--------------------------------------------------------------------------------|
459+
| `containerClass` | `string` | Class name for the wrapping `<div>` containing branches, graph, and log table. |
460+
| `containerStyles` | `CSSProperties` | React CSS styling object for the wrapping container `<div>`. |
461+
462+
463+
### GitLogIndexStatus
464+
465+
| Prop | Type | Description |
466+
|------------|----------|---------------------------------------------------------------------------|
467+
| `added` | `number` | The number of added files in the git index for the checked-out branch. |
468+
| `deleted` | `number` | The number of deleted files in the git index for the checked-out branch. |
469+
| `modified` | `number` | The number of modified files in the git index for the checked-out branch. |
470+
471+
### GitLogUrlBuilder
472+
473+
A function with the following signature
466474
```typescript
467-
type CustomCommitNode = (props: CustomCommitNodeProps) => ReactElement
475+
type GitLogUrlBuilder = (args: GitLogUrlBuilderArgs) => GitLogUrls
468476
```
477+
Returns an object of type `GitLogUrls` with the following fields.
469478
470-
For example:
471-
```typescript jsx
472-
<GitLog.GraphHTMLGrid
473-
nodeSize={25}
474-
node={({ nodeSize, colour, isIndexPseudoNode, rowIndex }) => (
475-
<div
476-
className={styles.Node}
477-
style={{
478-
width: nodeSize,
479-
height: nodeSize,
480-
background: `url('https://placecats.com/${images[rowIndex % images.length]}/50/50?fit=contain&position=top') 50% 50%`,
481-
border: `2px ${isIndexPseudoNode ? 'dotted' : 'solid'} ${colour}`
482-
}}
483-
/>
484-
)}
485-
/>
479+
| Prop | Type | Description |
480+
|------------|----------|------------------------------------------------------------------------------------------|
481+
| `commit` | `string` | A resolved URL to a particular commit hash on the external Git providers remote website. |
482+
| `branch` | `string` | A resolved URL to a branch on the external Git providers remote website. |
483+
484+
### CommitFilter
485+
486+
A function with the following signature
487+
```typescript
488+
type CommitFilter<T> = (commits: Commit<T>[]) => Commit<T>[]
486489
```
487490
488-
The following properties are injected into the functions `props` argument:
491+
Is passed the array of `Commit<T>` objects from the log based on the current pagination configuration and must return the filtered array based on your own domain-specific behaviour.
489492
490-
| Property | Type | Description |
491-
|---------------------|-----------|---------------------------------------------------------------------------------------------------------|
492-
| `commit` | `Commit` | Details of the commit that the node is being rendered for. |
493-
| `colour` | `string` | The colour of the commit based on the column in its and the theme. |
494-
| `rowIndex` | `number` | The (zero-based) index of the row that the node is in. |
495-
| `columnIndex` | `number` | The (zero-based) index of the column that the node is in. |
496-
| `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. |
497-
| `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. |
493+
The logs' subcomponents will respond accordingly based on the filtered list of commits.
494+
495+
### NodeTheme
496+
497+
| Prop | Type | Description |
498+
|-----------|----------|-----------------------------------------------------------------------|
499+
| `default` | `string` | The default theme where nodes change their style based on their type. |
500+
| `plain` | `string` | All nodes look the same, except for their colours. |
498501
499-
#### BreakPointTheme
502+
### BreakPointTheme
500503
501504
The following themes are available:
502505

0 commit comments

Comments
 (0)