68e94f524b
* Refactored to use a common <OrganizationPicker /> component. * Small refactor to organization <option />s. * Renamed files from OrgSettings* to OrganizationPicker* * Brought orgsettings inline to article form. * Brought orgsettings inline to listings form. * Rename onBlur to onToggle for org picker instances. Ooops. * Updated <OrganizationPicker /> test.
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { organizationPropType } from '../src/components/common-prop-types';
|
|
|
|
const orgOptions = (organizations, organizationId) => {
|
|
const orgs = organizations.map(organization => {
|
|
if (organizationId === organization.id) {
|
|
return (
|
|
<option value={organization.id} selected>
|
|
{organization.name}
|
|
</option>
|
|
);
|
|
}
|
|
return <option value={organization.id}>{organization.name}</option>;
|
|
});
|
|
const nullOrgOption =
|
|
organizationId === null ? (
|
|
<option value="" selected>
|
|
None
|
|
</option>
|
|
) : (
|
|
<option value="">None</option>
|
|
);
|
|
|
|
return [nullOrgOption, ...orgs];
|
|
};
|
|
|
|
export const OrganizationPicker = ({
|
|
name,
|
|
id,
|
|
organizations,
|
|
organizationId,
|
|
onToggle,
|
|
}) => (
|
|
<select name={name} id={id} onBlur={onToggle}>
|
|
{orgOptions(organizations, organizationId)}
|
|
</select>
|
|
);
|
|
|
|
OrganizationPicker.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
id: PropTypes.string.isRequired,
|
|
onToggle: PropTypes.func.isRequired,
|
|
organizationId: PropTypes.number.isRequired,
|
|
organizations: PropTypes.arrayOf(organizationPropType).isRequired,
|
|
};
|