diff --git a/apps/st2-history/package.json b/apps/st2-history/package.json index 67f7bc5f0..6d288c55c 100644 --- a/apps/st2-history/package.json +++ b/apps/st2-history/package.json @@ -47,7 +47,7 @@ "dependencies": { "@stackstorm/module-action-reporter": "^2.4.3", "@stackstorm/module-api": "^2.4.3", - "@stackstorm/module-auto-form": "^2.4.3", + "@stackstorm/module-auto-form": "^2.4.4", "@stackstorm/module-filter": "^2.4.3", "@stackstorm/module-filter-expandable": "^2.4.3", "@stackstorm/module-flex-table": "^2.4.3", diff --git a/modules/st2-auto-form/fields/color-string.js b/modules/st2-auto-form/fields/color-string.js new file mode 100644 index 000000000..88b1c9886 --- /dev/null +++ b/modules/st2-auto-form/fields/color-string.js @@ -0,0 +1,93 @@ +// Copyright 2020 Extreme Networks, Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react'; +import PropTypes from 'prop-types'; +import StringField from './string'; +import { Label, Icon, ErrorMessage, Description, Title } from '../wrappers'; +export default class ColorStringField extends StringField { + static icon = 'V'; + + static propTypes = { + name: PropTypes.string, + spec: PropTypes.object, + value: PropTypes.any, + invalid: PropTypes.string, + disabled: PropTypes.bool, + icon: PropTypes.string, + labelClass: PropTypes.string, + options: PropTypes.array, + } + render() { + const { icon } = this.constructor; + const { invalid, open, value } = this.state; + const { spec={}, options } = this.props; + + const wrapperProps = Object.assign({}, this.props); + + if (invalid) { + wrapperProps.invalid = invalid; + } + + const inputProps = { + className: 'st2-auto-form__field', + placeholder: this.toStateValue(spec.default), + disabled: this.props.disabled, + value: value, + onChange: (e) => this.handleChange(e, e.target.value || ''), + 'data-test': this.props['data-test'], + style: { paddingLeft: 23 }, // extra padding so the color block can show up in the field + }; + + if (this.state.invalid) { + inputProps.className += ' ' + 'st2-auto-form__field--invalid'; + } + + return ( +
+
+