Component fixes

This commit is contained in:
SachaG 2019-02-25 11:12:10 +09:00
parent 24ee31f0f8
commit 4261470fad
7 changed files with 4783 additions and 1860 deletions

View file

@ -0,0 +1,7 @@
/*
Also imported by Storybook
*/
export { default as Card } from './components/Card.jsx';

View file

@ -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 (

View file

@ -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';

View file

@ -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');

View file

@ -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);

View file

@ -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();
} }

6480
yarn.lock

File diff suppressed because it is too large Load diff