import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { withTheme } from 'styled-components';
import { compose } from 'react-apollo';
import { Link } from 'react-router-dom';
import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux';
import { set } from 'react-redux-values';
import { destroy, reset } from 'redux-form';
import get from 'lodash.get';
import Step, {
Header as StepHeader,
Description as StepDescription,
Preview as StepPreview,
Outlet as StepOutlet
} from 'joyent-ui-resource-step';
import { Button, MetadataIcon } from 'joyent-ui-toolkit';
import { KeyValue } from 'joyent-ui-resource-widgets';
import { Forms, Values } from '../constants';
import { default as Preview } from './components';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
import { addMetadata as validateMetadata } from '../validators';
const { IR_MD_F_ADD, IR_MD_F_EDIT } = Forms;
const { IR_MD_V_ADD_OPEN, IR_MD_V_MD } = Values;
const Metadata = ({
handleValidate,
handleGetValue,
preview = [],
metadata = [],
addOpen,
handleCancelEdit,
handleRemoveMetadata,
handleToggleExpanded,
handleUpdateMetadata,
handleAddMetadata,
shouldAsyncValidate,
handleAsyncValidate,
handleChangeAddOpen,
theme = {},
...props
}) => {
const mobile = theme.screen === 'mobile';
return (
}>Metadata
Metadata can be used to pass data to the instance. It can also be used
to inject a custom boot script. Unlike tags, metadata is only viewable
inside the instance.
{({ next }) => (
{metadata.length ? (
) : null}
{props =>
addOpen ? (
handleChangeAddOpen(false)}
editor={Editor}
expanded
shadow={false}
/>
) : (
)
}
)}
);
};
export default compose(
connect(({ values }, ownProps) => {
const addOpen = get(values, IR_MD_V_ADD_OPEN, false);
const metadata = get(values, IR_MD_V_MD, []);
return {
addOpen,
metadata
};
}),
connect(null, (dispatch, { metadata = [], history }) => ({
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
handleGetValue: () => metadata,
handleAsyncValidate: validateMetadata,
handleAddMetadata: value => {
const toggleToClosed = set({ name: IR_MD_V_ADD_OPEN, value: false });
const appendMetadata = set({
name: IR_MD_V_MD,
value: metadata.concat([{ ...value, open: false }])
});
return dispatch([destroy(IR_MD_F_ADD), toggleToClosed, appendMetadata]);
},
handleUpdateMetadata: (index, newMetadata) => {
metadata[index] = {
...newMetadata,
open: false
};
return dispatch([
destroy(IR_MD_F_EDIT(index)),
set({ name: IR_MD_V_MD, value: metadata.slice() })
]);
},
handleChangeAddOpen: value => {
return dispatch([
reset(IR_MD_F_ADD),
set({ name: IR_MD_V_ADD_OPEN, value })
]);
},
handleToggleExpanded: index => {
metadata[index] = {
...metadata[index],
open: !metadata[index].open
};
return dispatch(set({ name: IR_MD_V_MD, value: metadata.slice() }));
},
handleCancelEdit: index => {
metadata[index] = {
...metadata[index],
open: false
};
return dispatch([
reset(IR_MD_F_EDIT(index)),
set({ name: IR_MD_V_MD, value: metadata.slice() })
]);
},
handleRemoveMetadata: index => {
metadata.splice(index, 1);
return dispatch([
destroy(IR_MD_F_EDIT(index)),
set({ name: IR_MD_V_MD, value: metadata.slice() })
]);
}
}))
)(withTheme(({ ...rest }) => ));