@@ -2797,7 +2790,6 @@ exports[`components/PluginManagement should match snapshot, text entered into th
}
onChange={[Function]}
setByEnv={false}
- type="input"
value="marketplace.example.com"
/>
{
/>
{
onChange={this.handleChange}
disabled={this.props.isDisabled || this.state.pushNotificationServerType !== PUSH_NOTIFICATIONS_CUSTOM}
setByEnv={this.isSetByEnv('EmailSettings.PushNotificationServer')}
- type='input'
/>
{
test('render component with required props', () => {
- const onChange = jest.fn();
renderWithIntl(
- {textField.modal_label}
- {false}
-
- ),
- maxLength: 100,
- placeholder: 'The hint',
- resizable: false,
- type: 'input',
- value: '',
- id: baseDialogTextProps.name,
- helpText: ( {
}}
/>,
);
- expect(wrapper.matchesElement(
-
- {textField.modal_label}
- {{' (optional)'} }
-
- )}
- type='input'
- />,
- )).toEqual(true);
+
+ expect(wrapper.find(TextSetting).props().type).toEqual('text');
});
it('subtype blank', () => {
@@ -86,12 +57,7 @@ describe('components/apps_form/apps_form_field/AppsFormField', () => {
/>,
);
- expect(wrapper.matchesElement(
- {
}
}
- let textType: InputTypes = 'input';
- if (subtype && TextSetting.validTypes.includes(subtype)) {
- textType = subtype as InputTypes;
- }
-
const textValue = value as string;
return (
{
},
onChange: jest.fn(),
};
- const baseTextSettingProps = {
- id: baseDialogProps.name,
- maxLength: 100,
- resizable: false,
- value: '',
- label: (
-
- {baseDialogProps.displayName}
- {' *'}
-
- ),
- };
+
it('subtype blank', () => {
const wrapper = shallow(
{
subtype=''
/>,
);
- expect(wrapper.matchesElement(
- {
errorText,
optional,
options,
+ type,
+ maxLength,
} = this.props;
- let {type, maxLength} = this.props;
-
let displayNameContent: React.ReactNode = displayName;
if (optional) {
displayNameContent = (
@@ -155,16 +155,11 @@ export default class DialogElement extends React.PureComponent {
}
if (type === 'text' || type === 'textarea') {
+ let textSettingMaxLength;
if (type === 'text') {
- maxLength = maxLength || TEXT_DEFAULT_MAX_LENGTH;
-
- if (subtype && TextSetting.validTypes.includes(subtype)) {
- type = subtype;
- } else {
- type = 'input';
- }
+ textSettingMaxLength = maxLength || TEXT_DEFAULT_MAX_LENGTH;
} else {
- maxLength = maxLength || TEXTAREA_DEFAULT_MAX_LENGTH;
+ textSettingMaxLength = maxLength || TEXTAREA_DEFAULT_MAX_LENGTH;
}
const textValue = value as string;
@@ -172,9 +167,9 @@ export default class DialogElement extends React.PureComponent {
+
+
+
+`;
diff --git a/webapp/channels/src/components/widgets/settings/text_setting.test.tsx b/webapp/channels/src/components/widgets/settings/text_setting.test.tsx
index cb757fc577..8605d7558c 100644
--- a/webapp/channels/src/components/widgets/settings/text_setting.test.tsx
+++ b/webapp/channels/src/components/widgets/settings/text_setting.test.tsx
@@ -17,24 +17,8 @@ describe('components/widgets/settings/TextSetting', () => {
onChange={onChange}
/>,
);
- expect(wrapper).toMatchInlineSnapshot(`
-
-
- `);
+
+ expect(wrapper).toMatchSnapshot();
});
test('render with textarea type', () => {
@@ -48,26 +32,8 @@ describe('components/widgets/settings/TextSetting', () => {
onChange={onChange}
/>,
);
- expect(wrapper).toMatchInlineSnapshot(`
-
-
-
- `);
+
+ expect(wrapper).toMatchSnapshot();
});
test('onChange', () => {
diff --git a/webapp/channels/src/components/widgets/settings/text_setting.tsx b/webapp/channels/src/components/widgets/settings/text_setting.tsx
index 0310e9c3f3..b963fe5a11 100644
--- a/webapp/channels/src/components/widgets/settings/text_setting.tsx
+++ b/webapp/channels/src/components/widgets/settings/text_setting.tsx
@@ -1,108 +1,95 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import React from 'react';
+import React, {ChangeEvent, ReactNode} from 'react';
import Setting from './setting';
-export type InputTypes = 'input' | 'textarea' | 'number' | 'email' | 'tel' | 'url' | 'password'
+const INPUT_TYPES = ['text', 'textarea', 'number', 'email', 'tel', 'url', 'password'] as const;
+export type InputTypes = typeof INPUT_TYPES[number];
-export type WidgetTextSettingProps = {
+export type Props = {
id: string;
- label: React.ReactNode;
+ label: ReactNode;
labelClassName?: string;
placeholder?: string;
- helpText?: React.ReactNode;
- footer?: React.ReactNode;
+ helpText?: ReactNode;
+ footer?: ReactNode;
value: string | number;
inputClassName?: string;
maxLength?: number;
resizable?: boolean;
- onChange(name: string, value: any): void;
+ onChange(id: string, value: any): void;
disabled?: boolean;
- type: InputTypes;
+
+ // This is a custom prop that is not part of the HTML input element type
+ type?: InputTypes;
autoFocus?: boolean;
}
-// Since handle change is read from input and textarea element
-type HandleChangeTypes = React.ChangeEventHandler
+function TextSetting(props: Props) {
+ const {labelClassName = '', inputClassName = '', maxLength = -1, resizable = true, type = 'text'} = props;
-export default class TextSetting extends React.PureComponent {
- public static validTypes: string[] = ['input', 'textarea', 'number', 'email', 'tel', 'url', 'password'];
-
- public static defaultProps: Partial = {
- labelClassName: '',
- inputClassName: '',
- type: 'input',
- maxLength: -1, // A negative number allows for values of any length
- resizable: true,
- };
-
- private handleChange: HandleChangeTypes = (e) => {
- if (this.props.type === 'number') {
- this.props.onChange(this.props.id, parseInt(e.target.value, 10));
+ function handleChange(event: ChangeEvent) {
+ if (props.type === 'number') {
+ props.onChange(props.id, parseInt(event.target.value, 10));
} else {
- this.props.onChange(this.props.id, e.target.value);
+ props.onChange(props.id, event.target.value);
}
- };
+ }
- public render(): JSX.Element {
- const {resizable} = this.props;
- let {type} = this.props;
- let input = null;
+ let input = null;
+ if (type === 'textarea') {
+ input = (
+
+ );
+ } else {
+ const inputType = INPUT_TYPES.includes(type) ? type : 'text';
- if (type === 'textarea') {
- let style = {};
- if (!resizable) {
- style = Object.assign({}, {resize: 'none'});
- }
+ // a lot of our e2e test rely on 'input' being in the test id if it's a text/textarea input
+ const testId = inputType === 'text' ? `${props.id}input` : `${props.id}${inputType}`;
- input = (
-
- );
- } else {
- type = ['input', 'email', 'tel', 'number', 'url', 'password'].includes(type) ? type : 'input';
-
- input = (
-
- {input}
-
+ input = (
+
+ {input}
+
+ );
}
+
+export default TextSetting;