Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 498x 498x 498x 498x 498x 498x 498x 498x 498x 3x 3x 2x 2x 3x 498x 3x 3x 3x 3x 3x 3x 3x 3x 498x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { FormGroup, IFormGroupProps, Intent, IOptionProps, IRadioGroupProps, RadioGroup } from '@blueprintjs/core'
import {
DataTooltipInterface,
ExpressionAndRuntimeType,
ExpressionAndRuntimeTypeProps,
FormikTooltipContext,
HarnessDocTooltip,
MultiTypeInputValue
} from '@wings-software/uicore'
import { connect } from 'formik'
import cx from 'classnames'
import { get } from 'lodash-es'
import { errorCheck } from '@common/utils/formikHelpers'
import css from './MultiTypeRadioGroup.module.scss'
export interface MultiTypeRadioGroupProps
extends Omit<ExpressionAndRuntimeTypeProps, 'fixedTypeComponent' | 'fixedTypeComponentProps'> {
radioGroupProps?: Omit<IRadioGroupProps, 'name' | 'selectedValue' | 'onChange' | 'options'>
name: string
options: IOptionProps[]
}
export const MultiTypeRadioGroup: React.FC<MultiTypeRadioGroupProps> = ({
radioGroupProps,
value = '',
options,
...rest
}) => {
const { className = '', ...restProps } = radioGroupProps || {}
const fixedTypeComponent = React.useCallback(
props => {
const { onChange } = props
return (
<RadioGroup
className={cx(css.input, className)}
{...restProps}
options={options}
selectedValue={value as string}
name={rest.name}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
onChange?.(event.currentTarget.value, MultiTypeInputValue.STRING)
}}
/>
)
},
[value, options, name]
)
return <ExpressionAndRuntimeType value={value} {...rest} fixedTypeComponent={fixedTypeComponent} />
}
export interface FormMultiTypeRadioGroupProps extends Omit<IFormGroupProps, 'label'> {
label: string
name: string
options: IOptionProps[]
// eslint-disable-next-line @typescript-eslint/no-explicit-any
formik?: any // TODO: Remove this but not sure why FormikContext<any> was not working
multiTypeRadioGroup?: Omit<MultiTypeRadioGroupProps, 'onChange'>
tooltipProps?: DataTooltipInterface
onChange?: MultiTypeRadioGroupProps['onChange']
}
export const FormMultiTypeRadioGroup: React.FC<FormMultiTypeRadioGroupProps> = props => {
const { label, multiTypeRadioGroup, options, formik, name, onChange, ...restProps } = props
const hasError = errorCheck(name, formik)
const {
intent = hasError ? Intent.DANGER : Intent.NONE,
helperText = hasError ? get(formik?.errors, name) : null,
disabled,
...rest
} = restProps
const { radioGroupProps, ...restMultiProps } = multiTypeRadioGroup || {}
const value: string = get(formik?.values, name, '')
const tooltipContext = React.useContext(FormikTooltipContext)
const dataTooltipId =
props.tooltipProps?.dataTooltipId || (tooltipContext?.formName ? `${tooltipContext?.formName}_${name}` : '')
return (
<FormGroup
{...rest}
labelFor={name}
helperText={helperText}
intent={intent}
disabled={disabled}
label={label ? <HarnessDocTooltip tooltipId={dataTooltipId} labelText={label} /> : label}
>
<MultiTypeRadioGroup
radioGroupProps={radioGroupProps}
name={name}
value={value}
options={options}
{...restMultiProps}
onChange={(val, valueType, type) => {
formik?.setFieldValue(name, val)
onChange?.(val, valueType, type)
}}
/>
</FormGroup>
)
}
export const FormMultiTypeRadioGroupField = connect(FormMultiTypeRadioGroup)
|