aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared/src/components/section_header.tsx
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-03-15 05:36:04 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-03-15 05:36:04 +0800
commit380e51ca505a880e1ac24f46b3ba7e1a736f693e (patch)
tree95e0311485834d8181171da821f258dd46a2d258 /packages/react-shared/src/components/section_header.tsx
parent6a8c2cb7172be9b0aadb34904d1d9b3348bed0cc (diff)
parentaea7207b9f9865a279243889a5f9ca1638ddc739 (diff)
downloaddexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.tar
dexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.tar.gz
dexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.tar.bz2
dexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.tar.lz
dexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.tar.xz
dexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.tar.zst
dexon-0x-contracts-380e51ca505a880e1ac24f46b3ba7e1a736f693e.zip
Merge branch 'development' into feature/utils/console-log
* development: (25 commits) Enable coverage for all other packages with tests Fix parallel coverage results reporting Fix linter issuesx Remove outdated comment Add script copying to build command Add postpublish script to sol-cov Move configuration into package.json configs section Transform input data before encoding for callAsync and getABIEncodedTransactionData Consolidate docs generation and uploading logic Use async/await instead of promise syntax Move changelog entry remove unneeded include remove unused dep Fix lint issues Re-add linter to monorepo-scripts but with tslint-config dep at earlier version to avoid cyclical dependency small fixes move scripts to monorepro-scripts Fix gitignore Move abi-gen scripts to src Add missing dep ...
Diffstat (limited to 'packages/react-shared/src/components/section_header.tsx')
-rw-r--r--packages/react-shared/src/components/section_header.tsx73
1 files changed, 73 insertions, 0 deletions
diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx
new file mode 100644
index 000000000..ee34a6c09
--- /dev/null
+++ b/packages/react-shared/src/components/section_header.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Element as ScrollElement } from 'react-scroll';
+
+import { HeaderSizes } from '../types';
+import { colors } from '../utils/colors';
+import { utils } from '../utils/utils';
+
+import { AnchorTitle } from './anchor_title';
+
+export interface SectionHeaderProps {
+ sectionName: string;
+ headerSize?: HeaderSizes;
+}
+
+interface DefaultSectionHeaderProps {
+ headerSize: HeaderSizes;
+}
+
+type PropsWithDefaults = SectionHeaderProps & DefaultSectionHeaderProps;
+
+export interface SectionHeaderState {
+ shouldShowAnchor: boolean;
+}
+
+export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
+ public static defaultProps: Partial<SectionHeaderProps> = {
+ headerSize: HeaderSizes.H2,
+ };
+ constructor(props: SectionHeaderProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const { sectionName, headerSize } = this.props as PropsWithDefaults;
+
+ const finalSectionName = this.props.sectionName.replace(/-/g, ' ');
+ const id = utils.getIdFromName(finalSectionName);
+ return (
+ <div
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <ScrollElement name={id}>
+ <AnchorTitle
+ headerSize={headerSize}
+ title={
+ <span
+ style={{
+ textTransform: 'uppercase',
+ color: colors.grey,
+ fontFamily: 'Roboto Mono',
+ fontWeight: 300,
+ fontSize: 27,
+ }}
+ >
+ {finalSectionName}
+ </span>
+ }
+ id={id}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ </ScrollElement>
+ </div>
+ );
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
+}