this.ref = ref} className={`idyll-step ${className || ''}`} {...props} />
13 | );
14 | }
15 | }
16 |
17 | module.exports = Step;
18 |
--------------------------------------------------------------------------------
/components/default/stepper-control.js:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 |
3 | class StepperControl extends React.Component {
4 |
5 | componentDidMount() {
6 | }
7 | render() {
8 | const { idyll, ...props } = this.props;
9 | return
this.ref = ref} className={`idyll-step ${className || ''}`} style={{margin: '10vh 0 60vh 0'}} {...props} />
21 | // );
22 | }
23 | }
24 |
25 | module.exports = StepperControl;
26 |
--------------------------------------------------------------------------------
/components/default/stepper.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { getProperty } from 'idyll-ast';
3 | const { filterChildren, mapChildren } = require('idyll-component-children');
4 |
5 | const Step = require('./step');
6 |
7 | class Stepper extends React.PureComponent {
8 |
9 | constructor(props) {
10 | super(props);
11 | this.SCROLL_STEP_MAP = {};
12 | this.SCROLL_NAME_MAP = {};
13 | }
14 |
15 |
16 | registerStep(elt, name, val) {
17 | this.SCROLL_STEP_MAP[elt] = val;
18 | this.SCROLL_NAME_MAP[elt] = name;
19 | }
20 |
21 | getSteps() {
22 | return filterChildren(
23 | this.props.children,
24 | (c) => {
25 | return c.type.name && c.type.name.toLowerCase() === 'step';
26 | }
27 | )
28 | }
29 |
30 | next() {
31 | this.props.updateProps({ currentStep: (this.props.currentStep + 1) % (this.getSteps().length) });
32 | }
33 | previous() {
34 | let newStep = this.props.currentStep - 1;
35 | if (newStep < 0) {
36 | newStep = (this.getSteps().length) + newStep;
37 | }
38 |
39 | this.props.updateProps({ currentStep: newStep });
40 | }
41 |
42 | getSelectedStep() {
43 | const { currentState, currentStep } = this.props;
44 | const steps = this.getSteps();
45 | if (currentState) {
46 | return filterChildren(
47 | steps,
48 | (c) => {
49 | return c.props.state === currentState
50 | }
51 | )[0];
52 | }
53 | return steps[currentStep % steps.length];
54 | }
55 |
56 | render() {
57 | const { children, height, ...props } = this.props;
58 | return (
59 |
60 |
61 | {filterChildren(
62 | children,
63 | (c) => {
64 | return c.type.name && c.type.name.toLowerCase() === 'graphic';
65 | }
66 | )}
67 |
68 |
69 | {
70 | mapChildren(this.getSelectedStep(), (c) => {
71 | return React.cloneElement(c, {
72 | registerStep: this.registerStep.bind(this)
73 | })
74 | })
75 | }
76 |
77 | {mapChildren(filterChildren(
78 | children,
79 | (c) => {
80 | return c.type.name && c.type.name.toLowerCase() === 'steppercontrol';
81 | }
82 | ), (c) => {
83 | return React.cloneElement(c, {
84 | next: this.next.bind(this),
85 | previous: this.previous.bind(this)
86 | })
87 | })}
88 |
89 | );
90 | }
91 | }
92 |
93 |
94 | Stepper.defaultProps = {
95 | currentStep: 0,
96 | height: 500
97 | };
98 |
99 | Stepper._idyll = {
100 | name: "Stepper",
101 | tagType: "open",
102 | children: [`
103 | [Step]This is the content for step 1[/Step]
104 | [Step]This is the content for step 2[/Step]
105 | [Step]This is the content for step 3[/Step]`],
106 | props: [{
107 | name: "currentStep",
108 | type: "number",
109 | example: '0'
110 | }]
111 | }
112 | export default Stepper;
113 |
--------------------------------------------------------------------------------
/components/default/svg.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import InlineSVG from 'react-inlinesvg';
3 |
4 | class SVG extends React.PureComponent {
5 | render() {
6 | return (
7 |
8 | );
9 | }
10 | }
11 |
12 | SVG.defaultProps = {
13 | src: ''
14 | }
15 |
16 | SVG._idyll = {
17 | name: "SVG",
18 | tagType: "closed",
19 | props: [{
20 | name: "src",
21 | type: "string",
22 | example: '"https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"'
23 | }]
24 | }
25 |
26 | export default SVG;
27 |
28 |
--------------------------------------------------------------------------------
/components/default/table.js:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const Table = require('react-table').default;
3 |
4 | class TableComponent extends React.PureComponent {
5 | getColumns() {
6 | if (this.props.columns) {
7 | if (this.props.columns.length && typeof this.props.columns[0] === 'string') {
8 | return this.props.columns.map((d) => {
9 | return {
10 | Header: d,
11 | accessor: d
12 | };
13 | })
14 | }
15 |
16 | return this.props.columns;
17 | }
18 | if ((this.props.data || []).length) {
19 | return Object.keys(this.props.data[0]).map((d) => {
20 | return {
21 | Header: d,
22 | accessor: d
23 | }
24 | })
25 | }
26 |
27 | return [];
28 | }
29 | render() {
30 | return (
31 |
38 | );
39 | }
40 | }
41 |
42 | TableComponent.defaultProps = {
43 | showPagination: false,
44 | showPageSizeOptions: false,
45 | showPageJump: false
46 | }
47 |
48 | TableComponent._idyll = {
49 | name: "Table",
50 | tagType: "closed",
51 | props: [{
52 | name: "data",
53 | type: "array",
54 | example: 'x'
55 | }, {
56 | name: "showPagination",
57 | type: "boolean",
58 | example: 'false'
59 | }, {
60 | name: "showPageSizeOptions",
61 | type: "boolean",
62 | example: 'false'
63 | }, {
64 | name: "showPageJump",
65 | type: "boolean",
66 | example: 'false'
67 | }]
68 | }
69 |
70 | module.exports = TableComponent;
71 |
--------------------------------------------------------------------------------
/components/default/text-container.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class TextContainer extends React.PureComponent {
4 | render() {
5 | const { idyll, children, className, hasError, updateProps, ...props } = this.props;
6 | const { styles, ...layout } = idyll.layout;
7 | const { styles: _, ...theme } = idyll.theme;
8 | const style = { ...layout, ...theme };
9 | const cn = (className || '') + ' idyll-text-container';
10 | return (
11 |
{children}
12 | );
13 | }
14 | }
15 |
16 | export default TextContainer;
17 |
--------------------------------------------------------------------------------
/components/default/text-input.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const ReactDOM = require('react-dom');
3 |
4 | class TextInput extends React.PureComponent {
5 | constructor(props) {
6 | super(props);
7 | this.onChange = this.onChange.bind(this);
8 | }
9 |
10 | onChange(e) {
11 | this.props.updateProps({ value: e.target.value });
12 | }
13 |
14 | render() {
15 | const { idyll, hasError, updateProps, ...props } = this.props;
16 | return (
17 |
18 | );
19 | }
20 | }
21 |
22 | TextInput._idyll = {
23 | name: "TextInput",
24 | tagType: "closed",
25 | props: [{
26 | name: "value",
27 | type: "string",
28 | example: '"Hello"'
29 | }]
30 | }
31 |
32 | export default TextInput;
33 |
--------------------------------------------------------------------------------
/components/default/utils/container.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const ReactDOM = require('react-dom');
3 |
4 | class Container extends React.Component {
5 | constructor (props) {
6 | super(props);
7 |
8 | this.state = {
9 | expandLeft: 0,
10 | expandRight: 0
11 | };
12 |
13 | this.setPosition = this.setPosition.bind(this);
14 | }
15 |
16 | componentDidMount() {
17 | window.addEventListener('resize', this.setPosition);
18 | try {
19 | this.node = ReactDOM.findDOMNode(this)
20 | this.setPosition();
21 | } catch(e) {}
22 | }
23 |
24 | //shouldComponentUpdate (nextProps, nextState) {
25 | //return Math.round(nextState.expandLeft) !== Math.round(this.state.expandLeft) ||
26 | //Math.round(nextState.expandRight) !== Math.round(this.state.expandRight);
27 | //}
28 |
29 | setPosition () {
30 | var expandLeft, expandRight;
31 | var rect = this.node.getBoundingClientRect();
32 | var pageWidth = window.innerWidth;
33 |
34 | if (this.props.fullBleed) {
35 | expandLeft = Infinity;
36 | expandRight = Infinity;
37 | } else {
38 | expandLeft = this.props.expandLeft === undefined ? this.props.expand : this.props.expandLeft;
39 | expandRight = this.props.expandRight === undefined ? this.props.expand : this.props.expandRight;
40 | }
41 |
42 | var left = Math.max(rect.left - expandLeft, this.props.padding);
43 | var right = Math.min(rect.right + expandRight, pageWidth - this.props.padding);
44 |
45 | this.setState({
46 | expandLeft: left - rect.left,
47 | expandRight: rect.right - right
48 | });
49 | }
50 |
51 | render () {
52 | var expandStyle = Object.assign({}, this.props.style || {}, {
53 | marginLeft: this.state.expandLeft,
54 | marginRight: this.state.expandRight
55 | });
56 |
57 | return
61 |
62 | {this.props.children}
63 |
64 |
65 | }
66 | }
67 |
68 | Container.defaultProps = {
69 | padding: 15,
70 | expand: 0,
71 | fullBleed: false
72 | }
73 |
74 | export default Container;
75 |
--------------------------------------------------------------------------------
/components/default/utils/screen.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import Container from './container';
5 |
6 | class Screen extends React.PureComponent {
7 | constructor (props) {
8 | super(props);
9 | }
10 |
11 |
12 | render () {
13 | let overlayStyle = {
14 | position: this.props.display ? this.props.display : 'relative',
15 | zIndex: 1,
16 | width: this.props.fullBleed ? '100%' : undefined,
17 | left: this.props.display === 'fixed' ? 0 : undefined,
18 | pointerEvents: 'none',
19 | transition: 'background 0.5s'
20 | };
21 |
22 | if (this.props.height) {
23 | overlayStyle.minHeight = this.props.height;
24 | } else {
25 | overlayStyle.height = '100vh';
26 | }
27 |
28 | if (this.props.backgroundImage) {
29 | overlayStyle.backgroundImage = 'url(' + this.props.backgroundImage + ')';
30 | overlayStyle.backgroundSize = 'cover';
31 | overlayStyle.backgroundPosition = 'top center';
32 | }
33 |
34 | let contentContainerStyle = Object.assign({
35 | flexDirection: this.props.direction || 'column',
36 | display: 'flex',
37 | height: '100%',
38 | justifyContent: {
39 | center: 'center'
40 | }[this.props.justify] || undefined
41 | }, this.props.contentContainerStyle || {});
42 |
43 | let contentStyle = {
44 | alignSelf: {
45 | left: 'flex-start',
46 | center: 'center',
47 | right: 'flex-end',
48 | stretch: 'stretch'
49 | }[this.props.align] || 'flex-end',
50 | pointerEvents: 'all'
51 | }
52 |
53 | if (this.props.fullBleed) {
54 | return (
55 |
56 |
57 |
58 |
59 |
60 | {this.props.children}
61 |
62 |
63 |
64 |
65 |
66 |
67 | );
68 | }
69 |
70 | return
78 |
79 |
80 |
81 | {this.props.children}
82 |
83 |
84 |
86 | }
87 | }
88 |
89 | Screen.defaultProps = {
90 | position: 0.5,
91 | padding: 0,
92 | fullBleed: false,
93 | align: 'left',
94 | };
95 |
96 | export default Screen;
97 |
--------------------------------------------------------------------------------
/components/default/waypoint.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Screen from './utils/screen';
4 |
5 | class Waypoint extends React.PureComponent {
6 | constructor (props) {
7 | super(props);
8 | }
9 |
10 | render() {
11 | return
;
12 | }
13 |
14 | }
15 |
16 | Waypoint._idyll = {
17 | name: "Waypoint",
18 | tagType: "open",
19 | props: [{
20 | name: "onEnterView",
21 | type: "event",
22 | example: "`x = true`"
23 | }]
24 | }
25 |
26 | export default Waypoint;
27 |
--------------------------------------------------------------------------------
/components/image.js:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 |
3 | class CustomComponent extends React.Component {
4 |
5 | componentDidCatch(e) {
6 | console.log(e);
7 | }
8 | render() {
9 | const { hasError, updateProps, children, ...props } = this.props;
10 | return (
11 |
![]()
12 | );
13 | }
14 | }
15 |
16 | module.exports = CustomComponent;
--------------------------------------------------------------------------------
/components/multiRiffle.js:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 |
3 | class multiRiffle extends React.PureComponent {
4 | render() {
5 | const { onClick, hasError, updateProps, iter, points, ...props } = this.props;
6 | return (
7 |