mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-05 15:27:05 +00:00
Merge pull request #31146 from kale-stew/feature/update-spectacle-types
Update Spectacle types to reflect latest API
This commit is contained in:
Andrew Casey
Vendored
+268
-111
@@ -1,164 +1,321 @@
|
||||
// Type definitions for Spectacle 1.2.0
|
||||
// Project: https://github.com/FormidableLabs/victory
|
||||
// Type definitions for Spectacle 5.2.2
|
||||
// Project: https://github.com/FormidableLabs/spectacle
|
||||
// Definitions by: Zachary Maybury <https://github.com/zmaybury>
|
||||
// Kylie Stewart <https://github.com/kale-stew>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
/// <reference types="react"/>
|
||||
|
||||
declare module "spectacle" {
|
||||
import * as React from "react";
|
||||
import * as React from "react";
|
||||
import * as CSS from "csstype";
|
||||
/**
|
||||
* Alignment Types for Spectacle
|
||||
*/
|
||||
type alignType =
|
||||
| "flex-start flex-start"
|
||||
| "flex-start center"
|
||||
| "flex-start flex-end"
|
||||
| "center flex-start"
|
||||
| "center center"
|
||||
| "center flex-end"
|
||||
| "flex-end flex-start"
|
||||
| "flex-end center"
|
||||
| "flex-end flex-end";
|
||||
|
||||
/**
|
||||
* Transition Types for Spectacle
|
||||
*/
|
||||
type transitionType = "slide"|"zoom"|"fade"|"spin";
|
||||
/**
|
||||
* Animation Types for Spectacle
|
||||
*/
|
||||
type easeType =
|
||||
| "back"
|
||||
| "backIn"
|
||||
| "backOut"
|
||||
| "backInOut"
|
||||
| "bounce"
|
||||
| "bounceIn"
|
||||
| "bounceOut"
|
||||
| "bounceInOut"
|
||||
| "circle"
|
||||
| "circleIn"
|
||||
| "circleOut"
|
||||
| "circleInOut"
|
||||
| "linear"
|
||||
| "linearIn"
|
||||
| "linearOut"
|
||||
| "linearInOut"
|
||||
| "cubic"
|
||||
| "cubicIn"
|
||||
| "cubicOut"
|
||||
| "cubicInOut"
|
||||
| "elastic"
|
||||
| "elasticIn"
|
||||
| "elasticOut"
|
||||
| "elasticInOut"
|
||||
| "exp"
|
||||
| "expIn"
|
||||
| "expOut"
|
||||
| "expInOut"
|
||||
| "poly"
|
||||
| "polyIn"
|
||||
| "polyOut"
|
||||
| "polyInOut"
|
||||
| "quad"
|
||||
| "quadIn"
|
||||
| "quadOut"
|
||||
| "quadInOut"
|
||||
| "sin"
|
||||
| "sinIn"
|
||||
| "sinOut"
|
||||
| "sinInOut";
|
||||
|
||||
/**
|
||||
* Progress Types for Spectacle
|
||||
*/
|
||||
type progressType = "pacman"|"bar"|"number"|"none";
|
||||
/**
|
||||
* Progress Types for Spectacle
|
||||
*/
|
||||
type progressType = "pacman" | "bar" | "number" | "none";
|
||||
|
||||
/**
|
||||
* Alignment Types for Spectacle
|
||||
*/
|
||||
type alignType =
|
||||
"flex-start flex-start"|"flex-start center"|"flex-start flex-end"|
|
||||
"center flex-start"|"center center"|"center flex-end"|
|
||||
"flex-end flex-start"|"flex-end center"|"flex-end flex-end";
|
||||
/**
|
||||
* S Types for StyledS in Spectacle
|
||||
*/
|
||||
type sType = "italic" | "bold" | "line-through" | "underline";
|
||||
|
||||
/**
|
||||
* Base props for many Spectacle components
|
||||
*/
|
||||
export interface BaseProps {
|
||||
italic?:boolean,
|
||||
bold?:boolean,
|
||||
caps?:boolean,
|
||||
margin?:number|string,
|
||||
padding?:number|string,
|
||||
textColor?:string,
|
||||
textSize?:string,
|
||||
textAlign?:string,
|
||||
textFont?:string,
|
||||
bgColor?:string,
|
||||
bgImage?:string,
|
||||
bgDarken?:number
|
||||
}
|
||||
/**
|
||||
* Target Types for links
|
||||
*/
|
||||
type targetType = "_blank" | "_self" | "_parent" | "_top";
|
||||
|
||||
export type Theme = { [key: string ]: string | number }
|
||||
/**
|
||||
* Theme Types for CodePane in Spectacle
|
||||
*/
|
||||
type themeType = "dark" | "light" | "external";
|
||||
|
||||
export interface SpectacleProps {
|
||||
theme?: Theme
|
||||
}
|
||||
/**
|
||||
* Transition Types for Spectacle
|
||||
*/
|
||||
type transitionType = "slide" | "zoom" | "fade" | "spin";
|
||||
|
||||
export interface DeckProps {
|
||||
transition?:transitionType[],
|
||||
transitionDuration?:number,
|
||||
progress?:progressType,
|
||||
controls?:boolean,
|
||||
theme?: Theme
|
||||
}
|
||||
/**
|
||||
* All available DOM style properties and their types
|
||||
* https://www.npmjs.com/package/csstype
|
||||
*/
|
||||
export interface CSSProperties extends CSS.Properties<string | number> {}
|
||||
|
||||
export interface SlideProps extends BaseProps {
|
||||
align?:alignType,
|
||||
transition?:transitionType[],
|
||||
transitionDuration?:number,
|
||||
notes?:string,
|
||||
id?:string
|
||||
}
|
||||
export interface AnimProps {
|
||||
easing: easeType;
|
||||
fromStyle: CSSProperties | CSSProperties[];
|
||||
onAnim?: (forwards?: boolean, animIndex?: number) => void;
|
||||
order?: number;
|
||||
route?: object;
|
||||
style?: CSSProperties;
|
||||
toStyle: CSSProperties | CSSProperties[];
|
||||
transitionDuration: number;
|
||||
}
|
||||
|
||||
export interface MarkdownProps {
|
||||
source?:string,
|
||||
mdastConfig?:{ [key: string ]: string | number }
|
||||
}
|
||||
export interface AppearProps {
|
||||
easing?: easeType;
|
||||
endValue?: object;
|
||||
fid?: string;
|
||||
order?: number;
|
||||
startValue?: object;
|
||||
style?: BaseProps["style"];
|
||||
transitionDuration?: number;
|
||||
}
|
||||
|
||||
export interface CodePaneProps extends BaseProps {
|
||||
lang?:string,
|
||||
source?:string
|
||||
}
|
||||
/**
|
||||
* Base props for many Spectacle components
|
||||
*/
|
||||
export interface BaseProps {
|
||||
bgColor?: string;
|
||||
bgDarken?: number;
|
||||
bgImage?: string;
|
||||
bold?: boolean;
|
||||
caps?: boolean;
|
||||
className?: string;
|
||||
italic?: boolean;
|
||||
margin?: number | string;
|
||||
padding?: number | string;
|
||||
style?: CSSProperties;
|
||||
textAlign?: string;
|
||||
textColor?: string;
|
||||
textFont?: string;
|
||||
textSize?: string;
|
||||
}
|
||||
export interface CodePaneProps {
|
||||
className?: BaseProps["className"];
|
||||
contentEditable?: boolean;
|
||||
lang?: string;
|
||||
source?: string;
|
||||
style?: BaseProps["style"];
|
||||
theme?: themeType;
|
||||
}
|
||||
|
||||
export interface HeadingProps extends BaseProps {
|
||||
fit?:boolean,
|
||||
lineHeight?:number
|
||||
size?:number;
|
||||
}
|
||||
export interface ComponentPlaygroundProps {
|
||||
code?: string;
|
||||
previewBackgroundColor?: string;
|
||||
scope?: object;
|
||||
theme?: themeType;
|
||||
transformCode?: (code: string) => string;
|
||||
}
|
||||
|
||||
export interface ImageProps extends BaseProps {
|
||||
display?:string,
|
||||
height?:number,
|
||||
src?:string,
|
||||
width?:number|string
|
||||
}
|
||||
export interface DeckProps {
|
||||
autoplay?: boolean;
|
||||
autoplayDuration?: number;
|
||||
autoplayLoop?: boolean;
|
||||
controls?: boolean;
|
||||
globalStyles?: boolean;
|
||||
history?: any; // Needs a type, see https://github.com/ReactTraining/history
|
||||
progress?: progressType;
|
||||
theme?: Theme;
|
||||
transition?: transitionType[];
|
||||
transitionDuration?: number;
|
||||
}
|
||||
|
||||
export interface LinkProps extends BaseProps {
|
||||
href?:string
|
||||
}
|
||||
export interface FillProps {
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
export interface SProps extends BaseProps {
|
||||
type?:string
|
||||
}
|
||||
export interface FitProps extends FillProps {}
|
||||
|
||||
export interface TextProps extends BaseProps {
|
||||
fit?:boolean,
|
||||
lineHeight?:number
|
||||
}
|
||||
export interface GoToActionProps {
|
||||
margin?: BaseProps["margin"];
|
||||
padding?: BaseProps["padding"];
|
||||
render?: (goToSlide?: (slide: number | string) => void) => void;
|
||||
slide?: number | string;
|
||||
style?: BaseProps["style"];
|
||||
}
|
||||
|
||||
export class Spectacle extends React.Component<SpectacleProps> {}
|
||||
export interface HeadingProps extends BaseProps {
|
||||
fit?: boolean;
|
||||
lineHeight?: number;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export class Deck extends React.Component<DeckProps> {}
|
||||
export interface ImageProps {
|
||||
alt?: string;
|
||||
className?: BaseProps["className"];
|
||||
display?: string;
|
||||
height?: number | string;
|
||||
margin?: BaseProps["margin"];
|
||||
padding?: BaseProps["padding"];
|
||||
src?: string;
|
||||
width?: number | string;
|
||||
}
|
||||
|
||||
export class Slide extends React.Component<SlideProps> {}
|
||||
export interface LayoutProps {
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
export class Layout extends React.Component<any> {}
|
||||
export interface LinkProps extends BaseProps {
|
||||
href?: string;
|
||||
target?: targetType;
|
||||
}
|
||||
|
||||
export class Fit extends React.Component<any> {}
|
||||
export interface MarkdownProps {
|
||||
mdastConfig?: { [key: string]: number | string };
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export class Fill extends React.Component<any> {}
|
||||
export interface SlideProps extends BaseProps {
|
||||
align?: alignType;
|
||||
contentStyles?: CSSProperties;
|
||||
controlColor?: string;
|
||||
dispatch?: () => void;
|
||||
hash?: number | string;
|
||||
progressColor?: string;
|
||||
history?: any; // Needs a type, see https://github.com/ReactTraining/history
|
||||
id?: string;
|
||||
lastSlideIndex?: number;
|
||||
notes?: string;
|
||||
onActive?: (slideIndex: string | number) => void;
|
||||
slideIndex?: number;
|
||||
transition?: transitionType[];
|
||||
transitionDuration?: number;
|
||||
transitionIn?: transitionType[];
|
||||
transitionOut?: transitionType[];
|
||||
}
|
||||
|
||||
export class Markdown extends React.Component<MarkdownProps> {}
|
||||
export interface SProps extends BaseProps {
|
||||
type?: sType | sType[];
|
||||
}
|
||||
|
||||
export class Appear extends React.Component<any> {}
|
||||
export interface TextProps extends BaseProps {
|
||||
fit?: boolean;
|
||||
lineHeight?: number;
|
||||
}
|
||||
|
||||
export class BlockQuote extends React.Component<BaseProps> {}
|
||||
export type Theme = { [key: string]: number | string };
|
||||
|
||||
export class Quote extends React.Component<BaseProps> {}
|
||||
export class Anim extends React.Component<AnimProps> {}
|
||||
|
||||
export class Cite extends React.Component<BaseProps> {}
|
||||
export class Appear extends React.Component<AppearProps> {}
|
||||
|
||||
export class CodePane extends React.Component<CodePaneProps> {}
|
||||
export class BlockQuote extends React.Component<BaseProps> {}
|
||||
|
||||
export class Code extends React.Component<BaseProps> {}
|
||||
export class Cite extends React.Component<BaseProps> {}
|
||||
|
||||
export class Heading extends React.Component<HeadingProps> {}
|
||||
export class Code extends React.Component<BaseProps> {}
|
||||
|
||||
export class Image extends React.Component<ImageProps> {}
|
||||
export class CodePane extends React.Component<CodePaneProps> {}
|
||||
|
||||
export class Link extends React.Component<LinkProps> {}
|
||||
export class ComponentPlayground extends React.Component<
|
||||
ComponentPlaygroundProps
|
||||
> {}
|
||||
|
||||
export class List extends React.Component<BaseProps> {}
|
||||
export class Deck extends React.Component<DeckProps> {}
|
||||
|
||||
export class ListItem extends React.Component<BaseProps> {}
|
||||
export class Fill extends React.Component<FillProps> {}
|
||||
|
||||
export class S extends React.Component<SProps> {}
|
||||
export class Fit extends React.Component<FitProps> {}
|
||||
|
||||
export class Table extends React.Component<BaseProps> {}
|
||||
export class GoToAction extends React.Component<GoToActionProps> {}
|
||||
|
||||
export class TableRow extends React.Component<BaseProps> {}
|
||||
export class Heading extends React.Component<HeadingProps> {}
|
||||
|
||||
export class TableHeaderItem extends React.Component<BaseProps> {}
|
||||
export class Image extends React.Component<ImageProps> {}
|
||||
|
||||
export class TableItem extends React.Component<BaseProps> {}
|
||||
export class Layout extends React.Component<LayoutProps> {}
|
||||
|
||||
export class Text extends React.Component<TextProps> {}
|
||||
export class Link extends React.Component<LinkProps> {}
|
||||
|
||||
export class List extends React.Component<BaseProps> {}
|
||||
|
||||
export class ListItem extends React.Component<BaseProps> {}
|
||||
|
||||
export class Markdown extends React.Component<MarkdownProps> {}
|
||||
|
||||
export class Notes extends React.Component<BaseProps> {}
|
||||
|
||||
export class Quote extends React.Component<BaseProps> {}
|
||||
|
||||
export class S extends React.Component<SProps> {}
|
||||
|
||||
export class Slide extends React.Component<SlideProps> {}
|
||||
|
||||
export class SlideSet extends React.Component<BaseProps> {}
|
||||
|
||||
export class Table extends React.Component<BaseProps> {}
|
||||
|
||||
export class TableBody extends React.Component<BaseProps> {}
|
||||
|
||||
export class TableHeader extends React.Component<BaseProps> {}
|
||||
|
||||
export class TableHeaderItem extends React.Component<BaseProps> {}
|
||||
|
||||
export class TableItem extends React.Component<BaseProps> {}
|
||||
|
||||
export class TableRow extends React.Component<BaseProps> {}
|
||||
|
||||
export class Text extends React.Component<TextProps> {}
|
||||
}
|
||||
|
||||
declare module "spectacle/lib/utils/preloader" {
|
||||
const preloader: (obj: object) => void;
|
||||
export default preloader;
|
||||
const preloader: (obj: object) => void;
|
||||
export default preloader;
|
||||
}
|
||||
|
||||
declare module "spectacle/lib/themes/default" {
|
||||
import { Theme } from "spectacle";
|
||||
const createTheme: (...args: object[]) => Theme;
|
||||
export default createTheme;
|
||||
import { Theme } from "spectacle";
|
||||
const createTheme: (...args: object[]) => Theme;
|
||||
export default createTheme;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"csstype": "^2.2.0"
|
||||
}
|
||||
}
|
||||
+364
-120
@@ -1,133 +1,377 @@
|
||||
/**
|
||||
* Spectacle Test Examples
|
||||
*
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import * as React from "react";
|
||||
import {
|
||||
Appear,
|
||||
BlockQuote,
|
||||
Cite,
|
||||
Deck,
|
||||
Fill,
|
||||
Heading,
|
||||
Layout,
|
||||
Link,
|
||||
ListItem,
|
||||
List,
|
||||
Quote,
|
||||
Slide,
|
||||
Spectacle,
|
||||
Text
|
||||
Anim,
|
||||
Appear,
|
||||
BlockQuote,
|
||||
Cite,
|
||||
CodePane,
|
||||
ComponentPlayground,
|
||||
Deck,
|
||||
Fill,
|
||||
GoToAction,
|
||||
Heading,
|
||||
Image,
|
||||
Layout,
|
||||
Link,
|
||||
List,
|
||||
ListItem,
|
||||
Markdown,
|
||||
Notes,
|
||||
Quote,
|
||||
Slide,
|
||||
SlideSet,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderItem,
|
||||
TableItem,
|
||||
TableRow,
|
||||
Text
|
||||
} from "spectacle";
|
||||
|
||||
// Import image preloader util
|
||||
import preloader from 'spectacle/lib/utils/preloader'
|
||||
import preloader from "spectacle/lib/utils/preloader";
|
||||
|
||||
// Import theme
|
||||
import createTheme from 'spectacle/lib/themes/default'
|
||||
import createTheme from "spectacle/lib/themes/default";
|
||||
|
||||
const images = {
|
||||
city: 'a-url'
|
||||
}
|
||||
city: "a-url",
|
||||
logo: "another-url"
|
||||
};
|
||||
|
||||
preloader(images)
|
||||
preloader(images);
|
||||
|
||||
const theme = createTheme({
|
||||
primary: 'white',
|
||||
secondary: '#1F2022',
|
||||
tertiary: '#03A9FC',
|
||||
quartenary: '#CECECE'
|
||||
}, {
|
||||
primary: 'Montserrat',
|
||||
secondary: 'Helvetica'
|
||||
})
|
||||
const theme = createTheme(
|
||||
{
|
||||
primary: "white",
|
||||
secondary: "#1F2022",
|
||||
tertiary: "#03A9FC",
|
||||
quartenary: "#CECECE"
|
||||
},
|
||||
{
|
||||
primary: "Montserrat",
|
||||
secondary: "Helvetica"
|
||||
}
|
||||
);
|
||||
|
||||
export class SpectacleTest extends React.Component {
|
||||
callback() {
|
||||
alert('Callback: ' + JSON.stringify(arguments));
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (<Spectacle>
|
||||
<Deck transition={["zoom", "slide"]} transitionDuration={500}>
|
||||
<Slide transition={["zoom"]} bgColor="primary">
|
||||
<Heading size={1} fit caps lineHeight={1} textColor="black">
|
||||
Spectacle
|
||||
</Heading>
|
||||
<Heading size={1} fit caps>
|
||||
A ReactJS Presentation Library
|
||||
</Heading>
|
||||
<Heading size={1} fit caps textColor="black">
|
||||
Where You Can Write Your Decks In JSX
|
||||
</Heading>
|
||||
<Link href="https://github.com/FormidableLabs/spectacle">
|
||||
<Text bold caps textColor="tertiary">View on Github</Text>
|
||||
</Link>
|
||||
<Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]} bgColor="black" notes="You can even put notes on your slide. How awesome is that?">
|
||||
<Heading size={2} caps fit textColor="primary" textFont="primary">
|
||||
Wait what?
|
||||
</Heading>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]} bgDarken={0.75}>
|
||||
<Appear fid="1">
|
||||
<Heading size={1} caps fit textColor="primary">
|
||||
Full Width
|
||||
</Heading>
|
||||
</Appear>
|
||||
<Appear fid="2">
|
||||
<Heading size={1} caps fit textColor="tertiary">
|
||||
Adjustable Darkness
|
||||
</Heading>
|
||||
</Appear>
|
||||
<Appear fid="3">
|
||||
<Heading size={1} caps fit textColor="primary">
|
||||
Background Imagery
|
||||
</Heading>
|
||||
</Appear>
|
||||
</Slide>
|
||||
<Slide transition={["zoom", "fade"]} bgColor="primary">
|
||||
<Heading caps fit>Flexible Layouts</Heading>
|
||||
<Layout>
|
||||
<Fill>
|
||||
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
|
||||
Left
|
||||
</Heading>
|
||||
</Fill>
|
||||
<Fill>
|
||||
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
|
||||
Right
|
||||
</Heading>
|
||||
</Fill>
|
||||
</Layout>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]} bgColor="black">
|
||||
<BlockQuote>
|
||||
<Quote>Wonderfully formatted quotes</Quote>
|
||||
<Cite>Ken Wheeler</Cite>
|
||||
</BlockQuote>
|
||||
</Slide>
|
||||
<Slide transition={["slide", "spin"]} bgColor="primary">
|
||||
<Heading caps fit size={1} textColor="tertiary">
|
||||
Smooth
|
||||
</Heading>
|
||||
<Heading caps fit size={1} textColor="secondary">
|
||||
Combinable Transitions
|
||||
</Heading>
|
||||
</Slide>
|
||||
<Slide transition={["fade"]} bgColor="secondary" textColor="primary">
|
||||
<List>
|
||||
<Appear><ListItem>Inline style based theme system</ListItem></Appear>
|
||||
<Appear><ListItem>Autofit text</ListItem></Appear>
|
||||
<Appear><ListItem>Flexbox layout system</ListItem></Appear>
|
||||
<Appear><ListItem>React-Router navigation</ListItem></Appear>
|
||||
<Appear><ListItem>PDF export</ListItem></Appear>
|
||||
<Appear><ListItem>And...</ListItem></Appear>
|
||||
</List>
|
||||
</Slide>
|
||||
</Deck>
|
||||
</Spectacle>);
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<Deck
|
||||
transition={["zoom", "slide"]}
|
||||
theme={theme}
|
||||
transitionDuration={500}
|
||||
>
|
||||
<Slide transition={["zoom"]} bgColor="primary">
|
||||
<Heading size={1} fit caps lineHeight={1} textColor="black">
|
||||
Spectacle
|
||||
</Heading>
|
||||
<Heading size={1} fit caps>
|
||||
A ReactJS Presentation Library
|
||||
</Heading>
|
||||
<Heading size={1} fit caps textColor="black">
|
||||
Where You Can Write Your Decks In JSX
|
||||
</Heading>
|
||||
<Link href="https://github.com/FormidableLabs/spectacle">
|
||||
<Text bold caps textColor="tertiary">
|
||||
View on Github
|
||||
</Text>
|
||||
</Link>
|
||||
<Text textSize="1.5em" margin="20px 0px 0px" bold>
|
||||
Hit Your Right Arrow To Begin!
|
||||
</Text>
|
||||
</Slide>
|
||||
<Slide
|
||||
id="wait-what"
|
||||
transition={["slide"]}
|
||||
bgColor="black"
|
||||
notes="You can even put notes on your slide. How awesome is that?"
|
||||
>
|
||||
<Heading
|
||||
size={2}
|
||||
caps
|
||||
fit
|
||||
textColor="primary"
|
||||
textFont="primary"
|
||||
>
|
||||
Wait what?
|
||||
</Heading>
|
||||
</Slide>
|
||||
<Slide
|
||||
transitionIn={["zoom", "fade"]}
|
||||
transitionOut={["slide", "fade"]}
|
||||
bgDarken={0.75}
|
||||
>
|
||||
<Appear fid="1">
|
||||
<Heading size={1} caps fit textColor="primary">
|
||||
Full Width
|
||||
</Heading>
|
||||
</Appear>
|
||||
<Appear fid="2">
|
||||
<Heading size={1} caps fit textColor="tertiary">
|
||||
Adjustable Darkness
|
||||
</Heading>
|
||||
</Appear>
|
||||
<Appear fid="3">
|
||||
<Heading size={1} caps fit textColor="primary">
|
||||
Background Imagery
|
||||
</Heading>
|
||||
</Appear>
|
||||
</Slide>
|
||||
<Slide
|
||||
transitionIn={["zoom", "fade"]}
|
||||
transitionOut={["slide", "fade"]}
|
||||
bgColor="primary"
|
||||
notes="<ul><li>talk about that</li><li>and that</li></ul>"
|
||||
>
|
||||
<CodePane
|
||||
lang="jsx"
|
||||
source={""}
|
||||
style={{ margin: "20px auto" }}
|
||||
/>
|
||||
</Slide>
|
||||
<Slide>
|
||||
<ComponentPlayground theme="dark" />
|
||||
<Notes>This is a component playground</Notes>
|
||||
</Slide>
|
||||
<Slide transition={["zoom", "fade"]} bgColor="primary">
|
||||
<Heading caps fit>
|
||||
Flexible Layouts
|
||||
</Heading>
|
||||
<Layout>
|
||||
<Fill>
|
||||
<Heading
|
||||
size={4}
|
||||
caps
|
||||
textColor="secondary"
|
||||
bgColor="white"
|
||||
margin={10}
|
||||
>
|
||||
Left
|
||||
</Heading>
|
||||
</Fill>
|
||||
<Fill>
|
||||
<Heading
|
||||
size={4}
|
||||
caps
|
||||
textColor="secondary"
|
||||
bgColor="white"
|
||||
margin={10}
|
||||
>
|
||||
Right
|
||||
</Heading>
|
||||
</Fill>
|
||||
</Layout>
|
||||
</Slide>
|
||||
<Slide
|
||||
transition={["spin", "zoom"]}
|
||||
bgColor="tertiary"
|
||||
controlColor="primary"
|
||||
progressColor="primary"
|
||||
>
|
||||
<Heading caps fit size={1} textColor="primary">
|
||||
Inline Markdown
|
||||
</Heading>
|
||||
<Markdown>
|
||||
{`
|
||||
You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax
|
||||
* Lists too!
|
||||
* With ~~strikethrough~~ and _italic_
|
||||
* And let's not forget **bold**
|
||||
* Add some \`inline code\` to your sldes!
|
||||
`}
|
||||
</Markdown>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]}>
|
||||
<Anim
|
||||
onAnim={(forwards, animIndex) => {
|
||||
/* eslint-disable */
|
||||
console.log("forwards ", forwards);
|
||||
console.log("animIndex ", animIndex);
|
||||
/* eslint-enable */
|
||||
}}
|
||||
fromStyle={{
|
||||
opacity: 0,
|
||||
transform:
|
||||
"translate3d(0px, -100px, 0px) scale(1) rotate(0deg)"
|
||||
}}
|
||||
toStyle={[
|
||||
{
|
||||
opacity: 1,
|
||||
transform:
|
||||
"translate3d(0px, 0px, 0px) scale(1) rotate(0deg)"
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform:
|
||||
"translate3d(0px, 0px, 0px) scale(1.6) rotate(-15deg)"
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform:
|
||||
"translate3d(0px, 0px, 0px) scale(0.8) rotate(0deg)"
|
||||
}
|
||||
]}
|
||||
easing={"bounceOut"}
|
||||
transitionDuration={500}
|
||||
>
|
||||
<React.Fragment>
|
||||
<Heading size={6} caps fit textColor="secondary">
|
||||
Flexible
|
||||
<br />
|
||||
animations
|
||||
</Heading>
|
||||
</React.Fragment>
|
||||
</Anim>
|
||||
</Slide>
|
||||
<Slide>
|
||||
<Heading size={2} textColor="secondary" margin="0.25em">
|
||||
Mix it up!
|
||||
</Heading>
|
||||
<Heading size={6} textColor="tertiary">
|
||||
You can even jump to different slides with a standard
|
||||
button or custom component!
|
||||
</Heading>
|
||||
<GoToAction margin="1em" slide={8}>
|
||||
Jump to Slide 8
|
||||
</GoToAction>
|
||||
<GoToAction
|
||||
render={goToSlide => (
|
||||
<select
|
||||
defaultValue=""
|
||||
style={{
|
||||
background: "#000",
|
||||
color: "#fff",
|
||||
fontSize: "1.1em"
|
||||
}}
|
||||
onChange={({ target }) =>
|
||||
goToSlide(target.value)
|
||||
}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Custom Slide Picker
|
||||
</option>
|
||||
<option value="wait-what">
|
||||
Wait What!? Slide
|
||||
</option>
|
||||
<option value={3}>Slide 3</option>
|
||||
</select>
|
||||
)}
|
||||
/>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]} bgColor="black">
|
||||
<BlockQuote>
|
||||
<Quote>Wonderfully formatted quotes</Quote>
|
||||
<Cite>Ken Wheeler</Cite>
|
||||
</BlockQuote>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]} bgColor="black">
|
||||
<BlockQuote>
|
||||
<Quote>Wonderfully formatted quotes</Quote>
|
||||
<Cite>Ken Wheeler</Cite>
|
||||
</BlockQuote>
|
||||
</Slide>
|
||||
<SlideSet>
|
||||
<Slide
|
||||
transition={["fade"]}
|
||||
bgColor="secondary"
|
||||
textColor="primary"
|
||||
>
|
||||
<List>
|
||||
<Appear>
|
||||
<ListItem>
|
||||
Inline style based theme system
|
||||
</ListItem>
|
||||
</Appear>
|
||||
<Appear>
|
||||
<ListItem>Autofit text</ListItem>
|
||||
</Appear>
|
||||
<Appear>
|
||||
<ListItem>Flexbox layout system</ListItem>
|
||||
</Appear>
|
||||
<Appear>
|
||||
<ListItem>PDF export</ListItem>
|
||||
</Appear>
|
||||
<Appear>
|
||||
<ListItem>And...</ListItem>
|
||||
</Appear>
|
||||
</List>
|
||||
</Slide>
|
||||
<Slide transition={["slide"]} bgColor="primary">
|
||||
<Heading size={1} caps fit textColor="tertiary">
|
||||
You can even share styles with SlideSet
|
||||
</Heading>
|
||||
</Slide>
|
||||
</SlideSet>
|
||||
<Slide
|
||||
transition={["slide"]}
|
||||
bgColor="primary"
|
||||
notes="Hard to find cities without any pizza"
|
||||
>
|
||||
<Heading
|
||||
size={4}
|
||||
caps
|
||||
textColor="secondary"
|
||||
bgColor="white"
|
||||
margin={10}
|
||||
>
|
||||
Pizza Toppings
|
||||
</Heading>
|
||||
<Layout>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHeaderItem />
|
||||
<TableHeaderItem>2011</TableHeaderItem>
|
||||
<TableHeaderItem>2013</TableHeaderItem>
|
||||
<TableHeaderItem>2015</TableHeaderItem>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableItem>None</TableItem>
|
||||
<TableItem>61.8%</TableItem>
|
||||
<TableItem>39.6%</TableItem>
|
||||
<TableItem>35.0%</TableItem>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableItem>Pineapple</TableItem>
|
||||
<TableItem>28.3%</TableItem>
|
||||
<TableItem>54.5%</TableItem>
|
||||
<TableItem>61.5%</TableItem>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableItem>Pepperoni</TableItem>
|
||||
<TableItem />
|
||||
<TableItem>50.2%</TableItem>
|
||||
<TableItem>77.2%</TableItem>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableItem>Olives</TableItem>
|
||||
<TableItem />
|
||||
<TableItem>24.9%</TableItem>
|
||||
<TableItem>55.9%</TableItem>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Layout>
|
||||
</Slide>
|
||||
<Slide transition={["spin", "slide"]} bgColor="tertiary">
|
||||
<Heading
|
||||
size={1}
|
||||
caps
|
||||
fit
|
||||
lineHeight={1.5}
|
||||
textColor="primary"
|
||||
>
|
||||
Made with love in Seattle by
|
||||
</Heading>
|
||||
<Link href="http://www.formidable.com">
|
||||
<Image width="100%" src={images.logo} />
|
||||
</Link>
|
||||
</Slide>
|
||||
</Deck>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user