mirror of
https://github.com/vale981/Vulcan
synced 2025-03-05 09:31:43 -05:00
Component fixes
This commit is contained in:
parent
24ee31f0f8
commit
4261470fad
7 changed files with 4783 additions and 1860 deletions
7
packages/vulcan-core/lib/modules/components.js
Normal file
7
packages/vulcan-core/lib/modules/components.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
/*
|
||||||
|
|
||||||
|
Also imported by Storybook
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { default as Card } from './components/Card.jsx';
|
|
@ -5,10 +5,11 @@ import PropTypes from 'prop-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import without from 'lodash/without';
|
||||||
|
|
||||||
const getLabel = (field, fieldName, collection, intl) => {
|
const getLabel = (field, fieldName, collection, intl) => {
|
||||||
const schema = collection && collection.simpleSchema()._schema;
|
const schema = collection && collection.simpleSchema()._schema;
|
||||||
return intl.formatLabel({ fieldName: fieldName, collectionName: collection._name, schema: schema });
|
return intl.formatLabel ? intl.formatLabel({ fieldName: fieldName, collectionName: collection && collection._name, schema: schema }): fieldName;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getTypeName = (field, fieldName, collection) => {
|
const getTypeName = (field, fieldName, collection) => {
|
||||||
|
@ -107,7 +108,7 @@ const getObject = object => {
|
||||||
return (
|
return (
|
||||||
<table className="table table-bordered">
|
<table className="table table-bordered">
|
||||||
<tbody>
|
<tbody>
|
||||||
{_.without(Object.keys(object), '__typename').map(key =>
|
{without(Object.keys(object), '__typename').map(key =>
|
||||||
<tr key={key}>
|
<tr key={key}>
|
||||||
<td><strong>{key}</strong></td>
|
<td><strong>{key}</strong></td>
|
||||||
<td>{getFieldValue(object[key], typeof object[key])}</td>
|
<td>{getFieldValue(object[key], typeof object[key])}</td>
|
||||||
|
@ -149,7 +150,7 @@ const CardEditForm = ({ collection, document, closeModal }) =>
|
||||||
|
|
||||||
const Card = ({ title, className, collection, document, currentUser, fields, showEdit = true }, { intl }) => {
|
const Card = ({ title, className, collection, document, currentUser, fields, showEdit = true }, { intl }) => {
|
||||||
|
|
||||||
const fieldNames = fields ? fields : _.without(_.keys(document), '__typename');
|
const fieldNames = fields ? fields : without(Object.keys(document), '__typename');
|
||||||
const canEdit = showEdit && currentUser && collection && collection.options.mutations.update.check(currentUser, document);
|
const canEdit = showEdit && currentUser && collection && collection.options.mutations.update.check(currentUser, document);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -5,6 +5,8 @@ export * from 'meteor/vulcan:lib';
|
||||||
export * from './default_mutations.js';
|
export * from './default_mutations.js';
|
||||||
export * from './default_resolvers.js';
|
export * from './default_resolvers.js';
|
||||||
|
|
||||||
|
export * from './components.js';
|
||||||
|
|
||||||
export { default as Layout } from './components/Layout.jsx';
|
export { default as Layout } from './components/Layout.jsx';
|
||||||
export { default as App } from './components/App.jsx';
|
export { default as App } from './components/App.jsx';
|
||||||
export { default as Icon } from './components/Icon.jsx';
|
export { default as Icon } from './components/Icon.jsx';
|
||||||
|
@ -17,7 +19,6 @@ export { default as Error404 } from './components/Error404.jsx';
|
||||||
export { default as DynamicLoading } from './components/DynamicLoading.jsx';
|
export { default as DynamicLoading } from './components/DynamicLoading.jsx';
|
||||||
export { default as HeadTags } from './components/HeadTags.jsx';
|
export { default as HeadTags } from './components/HeadTags.jsx';
|
||||||
export { default as Avatar } from './components/Avatar.jsx';
|
export { default as Avatar } from './components/Avatar.jsx';
|
||||||
export { default as Card } from './components/Card.jsx';
|
|
||||||
export { default as Datatable } from './components/Datatable.jsx';
|
export { default as Datatable } from './components/Datatable.jsx';
|
||||||
export { default as Flash } from './components/Flash.jsx';
|
export { default as Flash } from './components/Flash.jsx';
|
||||||
export { default as HelloWorld } from './components/HelloWorld.jsx';
|
export { default as HelloWorld } from './components/HelloWorld.jsx';
|
||||||
|
|
|
@ -1,114 +0,0 @@
|
||||||
/*
|
|
||||||
|
|
||||||
Used by Storybook
|
|
||||||
|
|
||||||
*/
|
|
||||||
import { ComponentsMockProps } from 'meteor/vulcan:lib';
|
|
||||||
import merge from 'lodash/merge';
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
Defaults & Helpers
|
|
||||||
|
|
||||||
*/
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: 'Option 1',
|
|
||||||
value: 'opt1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Option 2',
|
|
||||||
value: 'opt2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Option 3',
|
|
||||||
value: 'opt3',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const onChange = () => {};
|
|
||||||
|
|
||||||
const defaultProperties = {
|
|
||||||
inputProperties: {
|
|
||||||
value: 'hello world',
|
|
||||||
onChange,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const registerMockProps = (componentName, mockProps) => {
|
|
||||||
const componentLabel = componentName.replace('FormComponent', '');
|
|
||||||
const dynamicProps = {
|
|
||||||
inputProperties: {
|
|
||||||
label: `${componentLabel} Input`,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const props = merge({}, defaultProperties, dynamicProps, mockProps);
|
|
||||||
ComponentsMockProps[componentName] = props;
|
|
||||||
};
|
|
||||||
/*
|
|
||||||
|
|
||||||
Mock Props
|
|
||||||
|
|
||||||
*/
|
|
||||||
registerMockProps('FormComponentCheckbox');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentCheckboxGroup', {
|
|
||||||
inputProperties: {
|
|
||||||
value: ['opt1', 'opt3'],
|
|
||||||
options,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentDate', {
|
|
||||||
inputProperties: {
|
|
||||||
value: new Date()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentDate2', {
|
|
||||||
inputProperties: {
|
|
||||||
value: new Date()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentDateTime', {
|
|
||||||
inputProperties: {
|
|
||||||
value: new Date()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentDefault');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentText');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentEmail');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentNumber', {
|
|
||||||
inputProperties: {
|
|
||||||
value: 42,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentRadioGroup', {
|
|
||||||
inputProperties: {
|
|
||||||
value: 'opt2',
|
|
||||||
options,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentSelect', {
|
|
||||||
inputProperties: {
|
|
||||||
value: 'opt2',
|
|
||||||
options,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
registerMockProps('FormComponentSelectMultiple');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentStaticText');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentTextarea');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentTime');
|
|
||||||
|
|
||||||
registerMockProps('FormComponentUrl');
|
|
|
@ -2,10 +2,29 @@ import React from 'react';
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from 'react-bootstrap/Form';
|
||||||
import { Components, registerComponent } from 'meteor/vulcan:core';
|
import { Components, registerComponent } from 'meteor/vulcan:core';
|
||||||
|
|
||||||
const RadioGroupComponent = ({ refFunction, inputProperties, itemProperties }) => (
|
const RadioGroupComponent = ({ refFunction, path, inputProperties, itemProperties }) => {
|
||||||
<Components.FormItem path={inputProperties.path} label={inputProperties.label} {...itemProperties}>
|
const { options } = inputProperties;
|
||||||
<Form.Check {...inputProperties} ref={refFunction} />
|
return (
|
||||||
</Components.FormItem>
|
<Components.FormItem
|
||||||
);
|
path={inputProperties.path}
|
||||||
|
label={inputProperties.label}
|
||||||
|
{...itemProperties}>
|
||||||
|
{options.map((option, i) => (
|
||||||
|
<Form.Check
|
||||||
|
{...inputProperties}
|
||||||
|
key={i}
|
||||||
|
layout="elementOnly"
|
||||||
|
type="radio"
|
||||||
|
label={option.label}
|
||||||
|
value={option.value}
|
||||||
|
name={path}
|
||||||
|
id={`${path}.${i}`}
|
||||||
|
path={`${path}.${i}`}
|
||||||
|
ref={refFunction}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Components.FormItem>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
registerComponent('FormComponentRadioGroup', RadioGroupComponent);
|
registerComponent('FormComponentRadioGroup', RadioGroupComponent);
|
||||||
|
|
|
@ -10,7 +10,8 @@ class ModalTrigger extends PureComponent {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
clickHandler = () => {
|
clickHandler = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
if (this.props.onClick) {
|
if (this.props.onClick) {
|
||||||
this.props.onClick();
|
this.props.onClick();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue