Skip to content

Support SelectDropdown placeholder & Fix Metadata default option #3980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maxceem merged 2 commits into from
May 4, 2020
Merged

Support SelectDropdown placeholder & Fix Metadata default option #3980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c3b34d
feat: SelectDropdown support placeholder
May 4, 2020
42a3645
fix: metadata default dropdown option
May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions src/components/SelectDropdown/SelectDropdownBase.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,15 @@ class SelectDropdown extends PureComponent {
}

componentWillMount() {
this.updateSelectedOptionValue(_.toString(this.props.value))
this.updateSelectedOptionValue(this.props.value)
}

updateSelectedOptionValue(value) {
const { options } = this.props

let selectedOption = _.find(options, (o) => o.value === value)
if (!selectedOption) {
selectedOption = options[0]
}

const selectedOption = _.find(options, { value }) || null

this.setState({
selectedOption
}/*, function() {
Expand Down Expand Up @@ -89,9 +88,9 @@ class SelectDropdown extends PureComponent {
}

render() {
const { options, theme, disabled } = this.props
const { options, theme, disabled, placeholder } = this.props
const { selectedOption, confirmOption } = this.state
const selectedValue = selectedOption.title
const selectedValue = selectedOption ? selectedOption.title : placeholder
const renderOption = (option, optIdx) => {
if (option.hide) {
return null
Expand Down Expand Up @@ -160,18 +159,28 @@ class SelectDropdown extends PureComponent {
}
}

const valuePropType = PT.oneOfType([PT.string, PT.number])

SelectDropdown.defaultProps = {
placeholder: ' - Select - '
}

SelectDropdown.propTypes = {
onSelect : PT.func,
options : PT.arrayOf(PT.shape({
title: PT.string.isRequired,
value: PT.string.isRequired,
value: valuePropType.isRequired,
disabled: PT.bool,
hide: PT.bool,
confirm: PT.oneOfType([PT.string, PT.bool]),
toolTipMessage: PT.string,
})).isRequired,
theme : PT.string,
selectedOption : PT.object
value : valuePropType,
/**
* Placeholder to show when there is no selected option
*/
placeholder: PT.string,
}

export default SelectDropdown
20 changes: 11 additions & 9 deletions src/routes/metadata/components/MetaDataPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ class MetaDataPanel extends React.Component {
getVersionOptions(versionOptions) {
return _.map(versionOptions, (versionOption) => {
return {
value: _.toString(versionOption.version),
value: versionOption.version,
title: _.toString(versionOption.version)
}
})
Expand All @@ -350,8 +350,8 @@ class MetaDataPanel extends React.Component {
const metadata = this.getMetadata(props)
if (metadataType === 'productTemplate') {
const prodCatOptions = this.getProductCategoryOptions(templates.productCategories)
const categoryValue = metadata && metadata.category ? metadata.category : prodCatOptions[0].value
const subCategoryValue = metadata && metadata.subCategory ? metadata.subCategory : prodCatOptions[0].value
const categoryValue = metadata && metadata.category
const subCategoryValue = metadata && metadata.subCategory
fields = fields.concat([
{ key: 'id', type: 'number' },
{ key: 'name', type: 'text' },
Expand All @@ -367,16 +367,16 @@ class MetaDataPanel extends React.Component {
{ key: 'isAddOn', type: 'checkbox' },
])
} else if (metadataType === 'projectTemplate') {
const projectTypeOptions = this.getProductCategoryOptions(templates.projectTypes)
const value = metadata && metadata.category ? metadata.category : projectTypeOptions[0].value
const subCategoryVal = metadata && metadata.subCategory ? metadata.subCategory : ''
const projectTypeOptions = [{title: '--', value: null}, ...this.getProductCategoryOptions(templates.projectTypes)]
const value = metadata && metadata.category
const subCategoryVal = metadata && metadata.subCategory
const metadataVal = metadata && metadata.metadataVal ? metadata.metadataVal : {}
fields = fields.concat([
{ key: 'id', type: 'number' },
{ key: 'name', type: 'text' },
{ key: 'key', type: 'text' },
{ key: 'category', type: 'dropdown', options: projectTypeOptions, value },
{ key: 'subCategory', type: 'dropdown', options: projectTypeOptions.concat({title: '--', value: ''}), value: subCategoryVal },
{ key: 'subCategory', type: 'dropdown', options: projectTypeOptions, value: subCategoryVal },
{ key: 'icon', type: 'text' },
{ key: 'question', type: 'text' },
{ key: 'info', type: 'text' },
Expand Down Expand Up @@ -406,7 +406,7 @@ class MetaDataPanel extends React.Component {
])
} else {
const projectVersionOptions = this.getVersionOptions(templates.versionOptions)
const value = metadata && metadata.version ? metadata.version : ''
const value = metadata && metadata.version
fields = fields.concat([
{ key: 'key', type: 'text' },
{ key: 'version', type: 'dropdown', options: projectVersionOptions, value },
Expand All @@ -433,6 +433,8 @@ class MetaDataPanel extends React.Component {
}
})

const productTemplateValue = metadata && metadata.referenceId

fields = fields.concat([
{ key: 'name', type: 'text' },
{ key: 'description', type: 'textarea' },
Expand All @@ -444,7 +446,7 @@ class MetaDataPanel extends React.Component {
{ key: 'completedText', type: 'textarea' },
{ key: 'blockedText', type: 'textarea' },
{ key: 'reference', type: 'text', readonly: true, value: 'productTemplate' },
{ key: 'referenceId', type: 'dropdown', options: productTemplateOptions, value: String(productTemplateOptions[0].value) },
{ key: 'referenceId', type: 'dropdown', options: productTemplateOptions, value: productTemplateValue },
{ key: 'metadata', type: 'json' },
{ key: 'hidden', type: 'checkbox' },
])
Expand Down