crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix website errors related to props/children

Browse Source
This commit is contained in:
Fred Carlsen 2019-02-25 15:22:35 +01:00
parent d48af7c4c2
commit c6cdea77b6
9 changed files with 67 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/website/ts/components/aboutPageLayout.tsx
View File

@ -34,9 +34,9 @@ export const AboutPageLayout = (props: Props) => (
<Column width="100%" maxWidth="680px">
<AnimatedHeading size="medium">{props.title}</AnimatedHeading>
<AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
<AnimatedIntro>
{props.description}
</AnimatedParagraph>
</AnimatedIntro>
{props.linkLabel && (props.href || props.to) && (
<AnimatedLink
@ -61,7 +61,7 @@ const AnimatedHeading = styled(Heading)`
${addFadeInAnimation('0.5s')};
`;
const AnimatedParagraph = styled(Paragraph)`
const AnimatedIntro = styled.div`
${addFadeInAnimation('0.5s', '0.15s')};
`;

13
packages/website/ts/components/button.tsx
View File

@ -5,8 +5,11 @@ import styled from 'styled-components';
import { ThemeInterface } from 'ts/components/siteWrap';
import { colors } from 'ts/style/colors';
import { withFilteredProps } from 'ts/utils/filter_props';
export interface ButtonInterface {
isDisabled?: boolean;
className?: string;
bgColor?: string;
borderColor?: string;
color?: string;
@ -22,27 +25,29 @@ export interface ButtonInterface {
type?: string;
target?: string;
to?: string;
onClick?: (e: Event) => any;
onClick?: (e: any) => any;
theme?: ThemeInterface;
shouldUseAnchorTag?: boolean;
}
export const Button: React.StatelessComponent<ButtonInterface> = (props: ButtonInterface) => {
const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props;
const { children, href, isWithArrow, to, shouldUseAnchorTag, target, isDisabled, className } = props;
const isButton = !href && !to;
let linkElem;
if (href || shouldUseAnchorTag) {
linkElem = 'a';
}
if (to) {
linkElem = ReactRouterLink;
linkElem = withFilteredProps(ReactRouterLink, ['className', 'href', 'to', 'onClick', 'target']);
}
const Component = linkElem ? ButtonBase.withComponent<any>(linkElem) : ButtonBase;
const targetProp = href && target ? { target } : {};
const buttonProps = isButton ? { disabled: isDisabled } : {};
return (
<Component {...props} {...targetProp}>
<Component className={className} {...buttonProps} {...props} {...targetProp}>
{children}
{isWithArrow && (

3
packages/website/ts/components/image.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { withFilteredProps } from 'ts/utils/filter_props';
interface Props {
alt?: string;
@ -12,6 +13,6 @@ const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
return <img {...props} />;
};
export const Image = styled(ImageClass)<Props>`
export const Image = styled(withFilteredProps(ImageClass, ['alt', 'src']))<Props>`
margin: ${props => props.isCentered && `0 auto`};
`;

4
packages/website/ts/pages/about/jobs.tsx
View File

@ -92,10 +92,10 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout
title="Join Us in Our Mission"
description={
<>
<Paragraph size="medium">
<Paragraph size="medium" isMuted={0.65}>
To create a tokenized world where all value can flow freely.
</Paragraph>
<Paragraph size="medium">
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
We are growing an ecosystem of businesses and projects by solving difficult challenges to
make our technology intuitive, flexible, and accessible to all. Join us in building
infrastructure upon which the exchange of all assets will take place.

11
packages/website/ts/pages/about/mission.tsx
View File

@ -7,7 +7,7 @@ import { Definition } from 'ts/components/definition';
import { DocumentTitle } from 'ts/components/document_title';
import { Image } from 'ts/components/image';
import { Column, Section } from 'ts/components/newLayout';
import { Heading } from 'ts/components/text';
import { Heading, Paragraph } from 'ts/components/text';
import { constants } from 'ts/utils/constants';
import { documentConstants } from 'ts/utils/document_meta_constants';
@ -35,7 +35,13 @@ const values = [
export const NextAboutMission = () => (
<AboutPageLayout
title="Creating a tokenized world where all value can flow freely."
description="0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past."
description={
<>
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past.
</Paragraph>
</>
}
linkLabel="Our mission and values"
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
>
@ -57,6 +63,7 @@ export const NextAboutMission = () => (
<Column width="100%" maxWidth="800px">
{_.map(values, (item, index) => (
<StyledDefinition
key={`coreValue-${index}`}
icon={item.icon}
title={item.title}
description={item.description}

2
packages/website/ts/pages/about/press.tsx
View File

@ -57,7 +57,7 @@ export const NextAboutPress = () => (
title="Press Highlights"
description={
<>
<Paragraph size="medium" marginBottom="60px">
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
Want to write about 0x? <a href="mailto:team@0xproject.com">Get in touch.</a>
</Paragraph>

8
packages/website/ts/pages/about/team.tsx
View File

@ -191,7 +191,13 @@ const advisors: TeamMember[] = [
export const NextAboutTeam = () => (
<AboutPageLayout
title="We are a global, growing team"
description="We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life."
description={
<>
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life.
</Paragraph>
</>
}
linkLabel="Join the team"
to={WebsitePaths.AboutJobs}
>

5
packages/website/ts/pages/instant/select.tsx
View File

@ -26,13 +26,12 @@ export const Select: React.FunctionComponent<SelectProps> = ({
}) => {
return (
<Container>
<StyledSelect id={id} onChange={onChange}>
<StyledSelect id={id} onChange={onChange} defaultValue={value}>
{shouldIncludeEmpty && <option value="">{emptyText}</option>}
{items.map((item, index) => (
<option
key={`${id}-item-${index}`}
value={item.value}
selected={item.value === value}
onClick={item.onClick}
>
{item.label}
@ -40,7 +39,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({
))}
</StyledSelect>
<Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11 1L6 6 1 1" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</Caret>
</Container>
);

32
packages/website/ts/utils/filter_props.tsx Normal file
View File

@ -0,0 +1,32 @@
import * as React from 'react';
interface FilteredPropsInterface {
[key: string]: any;
}
export const withFilteredProps = (Component: React.ComponentType<any>, allowedProps: string[]) =>
class WithFilteredProps extends React.Component<FilteredPropsInterface> {
constructor(props: FilteredPropsInterface) {
super(props);
}
public filterProps(): any {
const props = this.props;
/* tslint:disable:no-any */
const filteredProps: FilteredPropsInterface = {};
let key;
for (key in this.props) {
if (allowedProps.includes(key)) {
/* tslint:disable:no-any */
filteredProps[key] = props[key];
}
}
/* tslint:disable:no-any */
return filteredProps;
}
public render(): React.ReactNode {
const filteredProps = this.filterProps();
return <Component {...filteredProps}>{this.props.children}</Component>;
}
};