How to use the olymp-fela.createComponent function in olymp-fela
To help you get started, we’ve selected a few olymp-fela examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
olymp / olymp / packages / collection / views / detail.tsx View on Github 
} else if (field.type.name === 'Image') {
// if image => own group
result[label || upperFirst(field.name)] = [field];
} else {
// Group
const group = field['@'].detail ? field['@'].detail.arg0 : 'Allgemein';
if (!result[group]) {
result[group] = [];
}
result[group].push(field);
}
return result;
}, {});
const Flex = createComponent(
({ theme }) => ({
paddingTop: theme.space3,
paddingX: theme.space3,
hasFlex: {
display: 'flex',
flexDirection: 'column',
},
'> ul': {
zIndex: 1,
},
'> form': {
overflow: 'auto',
},
}),
'div',
[]padding: theme.space1,
'> .ant-btn': {
flex: '1 1 auto',
margin: theme.space1
}
}
}
}
}
}),
Modal,
p => Object.keys(p)
);
// Copyright
component.Copyright = createComponent(
({ theme }) => ({
position: 'fixed',
bottom: 10,
textAlign: 'center',
right: 0,
left: 0,
'> a': {
color: 'white',
opacity: 0.3,
onHover: {
opacity: 1
}
}
}),
'div'
);width: 'container',
size: 'small',
children: [
{
width: '100%',
height: 50,
},
{
width: '100%',
height: 800,
},
],
},
];
const Label = Blocks.ImageBlockLabel.component;
const Container = createComponent(
ContainerBlock.styles,
ContainerBlock.component,
p => Object.keys(p),
);
const Inner = withEdit('article')(p => <div>);
const Peak = createComponent(
props => ({
...ImageStyles(props),
marginBottom: props.theme.space3,
}),
({ className, header, subheader, value, title }) => (
<div>
</div></div>children: [
{
width: '100%',
height: 50,
},
{
width: '100%',
height: 800,
},
],
},
];
const Header = HeaderBlock.component;
const Container = createComponent(
({ theme }) => ({
...ContainerBlock.styles({ theme }),
paddingTop: theme.space3,
}),
ContainerBlock.component,
p => Object.keys(p)
);
const Slate = withBlockTypes(props => );
const Content = createComponent(
({ theme }) => ({
paddingLeft: theme.space3,
}),
p => ,
p => Object.keys(p)size: 'small',
children: [
{
width: '100%',
height: 50,
},
{
width: '100%',
height: 800,
},
],
},
];
const Label = Blocks.ImageBlockLabel.component;
const Header = HeaderBlock.component;
const Container = createComponent(
ContainerBlock.styles,
ContainerBlock.component,
p => Object.keys(p)
);
const Slate = withBlockTypes(props => );
const Peak = createComponent(
props => ({
...ImageStyles(props),
marginBottom: props.theme.space3,
}),
({ className, header, subheader, value, title }) =>
<div>
</div>},
{
height: 400,
},
],
},
{
medium: 7,
height: 800,
},
],
},
];
const Label = Blocks.ImageBlockLabel.component;
const Header = HeaderBlock.component;
const Container = createComponent(
ContainerBlock.styles,
ContainerBlock.component,
p => Object.keys(p)
);
const Slate = withBlockTypes(props => );
const Content = createComponent(
({ theme }) => ({
width: '100%',
paddingX: theme.space5,
'& img': {
borderRadius: theme.borderRadius,
},
ifSmallDown: {
paddingX: theme.space3,
},import React from 'react';
import { Image, SimpleImageEdit } from 'olymp-cloudinary';
import { createComponent } from 'olymp-fela';
import { FaPlus, FaMinus } from 'olymp-icons';
var Container = createComponent(function (_a) {
var theme = _a.theme;
return ({
paddingY: theme.space3,
hasFlex: {
display: 'flex',
flexWrap: 'wrap',
},
clearfix: true,
});
}, 'div', function (p) { return Object.keys(p); });
var ImageContainer = createComponent(function (_a) {
var theme = _a.theme, size = _a.size;
var style = {
paddingRight: theme.space3,
paddingBottom: theme.space3,
float: 'left',
width: 100 / size + "%",
minWidth: 100 / size + "%",
hasFlex: {
display: 'flex',
},
};
style[":nth-child(" + size + "n)"] = { paddingRight: 0 };
return style;
}, 'div', function (_a) {
var size = _a.size, p = __rest(_a, ["size"]);
return Object.keys(p);}
return false;
};
var UserIcon = createComponent(function (_a) {
var theme = _a.theme, name = _a.name;
return ({
float: 'left',
borderRadius: '50%',
marginY: theme.space2,
background: "url(https://invatar0.appspot.com/svg/" + getInitials(name) + ".jpg?s=26&bg=" + encodeURIComponent(theme.color) + "&color=" + encodeURIComponent(theme.light) + ") center center no-repeat, " + theme.color,
onHover: {
opacity: 0.85,
},
});
}, function (p) { return React.createElement(Gravatar, __assign({}, p, { size: 30 })); }, function (p) { return Object.keys(p); });
var VerticalMenu = createComponent(function (_a) {
var theme = _a.theme, padding = _a.padding;
return ({
position: 'relative',
zIndex: 3,
backgroundColor: '#404040',
boxShadow: 'inset 0 -10px 10px -10px #000000',
paddingX: theme.space2,
hasFlex: {
display: 'flex',
justifyContent: 'space-between',
},
'> ul': {
zIndex: 3,
boxShadow: 'inset 0 -10px 10px -10px #000000',
},
'> ul > li.ant-menu-item-selected.ant-menu-item': {import React from 'react';
import { Link } from 'olymp-router';
import { createComponent } from 'olymp-fela';
import { Icon } from 'antd';
var ImgContainer = createComponent(function (_a) {
var disabled = _a.disabled;
return ({
marginRight: 8,
maxWidth: 37,
maxHeight: 37,
opacity: disabled ? 0.667 : 1,
overflow: 'hidden',
'> *': {
margin: '0 auto',
},
});
}, 'div', function (p) { return Object.keys(p); });
var Content = createComponent(function (_a) {
var active = _a.active, disabled = _a.disabled, theme = _a.theme;
return ({
hasFlex: {borderTop: '1px solid #eee',
'> div > .ant-btn': {
width: 'calc(50% - 4px)',
maxWidth: 200,
},
},
},
});
}, function (_a) {
var children = _a.children, className = _a.className;
return React.createElement("div", { className: className }, children);
}, function (_a) {
var right = _a.right, padding = _a.padding, paddingX = _a.paddingX, paddingY = _a.paddingY, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, p = __rest(_a, ["right", "padding", "paddingX", "paddingY", "width", "minWidth", "maxWidth"]);
return Object.keys(p);
});
var Title = createComponent(function (_a) {
var theme = _a.theme;
return ({
position: 'relative',
padding: '1rem',
'> .ant-modal-title': {
color: theme.color,
fontSize: 40,
fontWeight: 200,
padding: 10,
},
});
}, 'div', function (p) { return Object.keys(p); });
var TitleButtons = createComponent(function (_a) {
var left = _a.left, right = _a.right;
return ({
margin: 0,olymp-fela
MIT
Latest version published 6 years ago