wix-style-react
Version:
wix-style-react
211 lines (204 loc) • 6.13 kB
JavaScript
import React from 'react';
import { Layout, Cell } from 'wix-style-react/Layout';
import Card from 'wix-style-react/Card';
import FormField from 'wix-style-react/FormField';
import Input from 'wix-style-react/Input';
import InputArea from 'wix-style-react/InputArea';
import Checkbox from 'wix-style-react/Checkbox';
import Text from 'wix-style-react/Text';
import Button from 'wix-style-react/Button';
import RadioGroup from 'wix-style-react/RadioGroup';
import styles from '../styles.scss';
export default (function () {
return React.createElement(
'div',
{ className: styles.exampleContainer },
React.createElement(
Layout,
null,
React.createElement(
Cell,
{ span: 8 },
React.createElement(
Layout,
null,
React.createElement(
Cell,
null,
React.createElement(
Card,
null,
React.createElement(Card.Header, { title: 'Various Inputs' }),
React.createElement(
Card.Content,
null,
React.createElement(
Layout,
null,
React.createElement(
Cell,
null,
field('Your Best Joke:', InputArea)
),
React.createElement(
Cell,
null,
field('Your Email:')
)
),
divider(),
React.createElement(
Layout,
null,
React.createElement(
Cell,
{ span: 6 },
field('First Name:')
),
React.createElement(
Cell,
{ span: 6 },
field('Second Name:')
)
),
divider(),
React.createElement(
Layout,
{ gap: '10' },
React.createElement(
Cell,
{ span: 3, vertical: true },
React.createElement(
Text,
null,
'Home Address:'
)
),
React.createElement(
Cell,
{ span: 9, vertical: true },
field('')
)
),
divider(),
React.createElement(
Layout,
{ gap: '10' },
React.createElement(
Cell,
null,
React.createElement(
Text,
null,
'Get In Touch'
)
),
['Name', 'Email', 'Phone No.'].map(function (label) {
return React.createElement(Cell, {
key: label,
span: 4,
vertical: true,
children: React.createElement(Input, { placeholder: label })
});
})
),
divider(),
React.createElement(
Layout,
null,
React.createElement(
Cell,
{ span: 8, vertical: true },
React.createElement(
Checkbox,
null,
'I Accept to Decline'
)
),
React.createElement(
Cell,
{ span: 4 },
React.createElement(
Button,
null,
'Useless Button'
)
)
)
)
)
),
['left', 'right'].map(function (direction) {
return React.createElement(
Cell,
{ span: 6, key: direction },
card('something on the ' + direction, 'Anything goes')
);
}),
['left', 'middle', 'right'].map(function (direction) {
return React.createElement(
Cell,
{ span: 4, key: direction },
card('something on the ' + direction, 'Anything goes')
);
})
)
),
React.createElement(
Cell,
{ span: 4 },
React.createElement(
Card,
null,
React.createElement(Card.Header, { title: 'Additional Info' }),
React.createElement(
Card.Content,
null,
React.createElement(
Text,
null,
'No need for <Layout> for just column'
),
divider(),
React.createElement(
RadioGroup,
null,
'Mixing and matching components is easy!'.split(' ').map(function (word) {
return React.createElement(
RadioGroup.Button,
{ key: word },
word
);
})
),
divider(),
React.createElement(
Button,
null,
'I Agree!'
)
)
)
)
)
);
});
function field(label) {
var component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Input;
return React.createElement(
FormField,
{ label: label },
React.createElement(component)
);
}
function divider() {
return React.createElement('div', { style: { height: 30 } });
}
function card(title, children) {
return React.createElement(
Card,
null,
React.createElement(Card.Header, { title: title }),
React.createElement(Card.Content, { children: children })
);
}