owncast/web/components/config/EditValueArray.tsx
James Young d1f3fffe2f
reafctor: normalize component formatting (#2082)
* refactor: move/rename BanUserButton file

* refactor: move/rename Chart file

* refactor: update generic component filenames to PascalCase

* refactor: update config component filenames to PascalCase

* refactor: update AdminLayout component filename to PascalCase

* refactor: update/move VideoJS component

* chore(eslint): disable bad react/require-default-props rule

* refactor: normalize ActionButton component

* refactor: normalize ActionButtonRow component

* refactor: normalize FollowButton component

* refactor: normalize NotifyButton component

* refactor: normalize ChatActionMessage component

* refactor: normalize ChatContainer component

* refactor: normalize ChatJoinMessage component

* refactor: normalize ChatModerationActionMenu component

* refactor: normalize ChatModerationDetailsModal component

* refactor: normalize ChatModeratorNotification component

* refactor: normalize ChatSocialMessage component

* refactor: normalize ChatSystemMessage component

* refactor: normalize ChatTextField component

* refactor: normalize ChatUserBadge component

* refactor: normalize ChatUserMessage component

* refactor: normalize ContentHeader component

* refactor: normalize OwncastLogo component

* refactor: normalize UserDropdown component

* chore(eslint): modify react/function-component-definition rule

* refactor: normalize CodecSelector component

* refactor: update a bunch of functional components using eslint

* refactor: update a bunch of functional components using eslint, pt2

* refactor: update a bunch of functional components using eslint, pt3

* refactor: replace all component->component default imports with named imports

* refactor: replace all component-stories->component default imports with named imports

* refactor: remove default exports from most components

* chore(eslint): add eslint config files for the components and pages dirs

* fix: use-before-define error in ChatContainer

* Fix ChatContainer import

* Only process .tsx files in Next builds

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2022-09-07 00:00:28 -07:00

93 lines
2.4 KiB
TypeScript

/* eslint-disable react/no-array-index-key */
import React, { FC, useState } from 'react';
import { Typography, Tag } from 'antd';
import { TextField } from './TextField';
import { UpdateArgs } from '../../types/config-section';
import { StatusState } from '../../utils/input-statuses';
import { FormStatusIndicator } from './FormStatusIndicator';
const { Title } = Typography;
export const TAG_COLOR = '#5a67d8';
export type EditStringArrayProps = {
title: string;
description?: string;
placeholder: string;
maxLength?: number;
values: string[];
submitStatus?: StatusState;
continuousStatusMessage?: StatusState;
handleDeleteIndex: (index: number) => void;
handleCreateString: (arg: string) => void;
};
export const EditValueArray: FC<EditStringArrayProps> = ({
title,
description,
placeholder,
maxLength,
values,
handleDeleteIndex,
handleCreateString,
submitStatus,
continuousStatusMessage,
}) => {
const [newStringInput, setNewStringInput] = useState<string>('');
const handleInputChange = ({ value }: UpdateArgs) => {
setNewStringInput(value);
};
const handleSubmitNewString = () => {
const newString = newStringInput.trim();
handleCreateString(newString);
setNewStringInput('');
};
return (
<div className="edit-string-array-container">
<Title level={3} className="section-title">
{title}
</Title>
<p className="description">{description}</p>
<div className="edit-current-strings">
{values?.map((tag, index) => {
const handleClose = () => {
handleDeleteIndex(index);
};
return (
<Tag closable onClose={handleClose} color={TAG_COLOR} key={`tag-${tag}-${index}`}>
{tag}
</Tag>
);
})}
</div>
{continuousStatusMessage && (
<div className="continuous-status-section">
<FormStatusIndicator status={continuousStatusMessage} />
</div>
)}
<div className="add-new-string-section">
<TextField
fieldName="string-input"
value={newStringInput}
onChange={handleInputChange}
onPressEnter={handleSubmitNewString}
maxLength={maxLength}
placeholder={placeholder}
status={submitStatus}
/>
</div>
</div>
);
};
EditValueArray.defaultProps = {
maxLength: 50,
description: null,
submitStatus: null,
continuousStatusMessage: null,
};