wix-style-react
Version:
wix-style-react
85 lines (82 loc) • 2.15 kB
JavaScript
import React from 'react';
import { MessageBoxFunctionalLayout } from 'wix-style-react/MessageBox';
import { Container, Row, Col } from 'wix-style-react/Grid';
import FormField from 'wix-style-react/FormField';
import Input from 'wix-style-react/Input';
var verticalAlignColStyle = {
height: '100%',
display: 'flex',
alignItems: 'center'
};
export default (function () {
return React.createElement(
MessageBoxFunctionalLayout,
{
title: 'User Details',
confirmText: 'Save',
cancelText: 'Cancel'
},
React.createElement(
Container,
{ fluid: true },
React.createElement(
Row,
{ stretchViewsVertically: true },
React.createElement(
Col,
{ span: 3 },
React.createElement(
'span',
{ style: verticalAlignColStyle },
React.createElement(FormField, {
dataHook: 'storybook-formfield-grid',
label: 'User',
required: true
})
)
),
React.createElement(
Col,
{ span: 9 },
React.createElement(Input, null)
)
),
React.createElement(
Row,
{ stretchViewsVertically: true },
React.createElement(
Col,
{ span: 3 },
React.createElement(
'span',
{ style: verticalAlignColStyle },
React.createElement(FormField, { label: 'Email' })
)
),
React.createElement(
Col,
{ span: 9 },
React.createElement(Input, null)
)
),
React.createElement(
Row,
{ stretchViewsVertically: true },
React.createElement(
Col,
{ span: 3 },
React.createElement(
'span',
{ style: verticalAlignColStyle },
React.createElement(FormField, { label: 'Address', infoContent: 'I help you to fill info' })
)
),
React.createElement(
Col,
{ span: 9 },
React.createElement(Input, null)
)
)
)
);
});