owncast/web/components/config/edit-string-array.tsx

95 lines
2.5 KiB
TypeScript
Raw Normal View History

/* eslint-disable react/no-array-index-key */
import React, { useState } from 'react';
import { Typography, Tag } from 'antd';
import TextField from './form-textfield';
import { UpdateArgs } from '../../types/config-section';
import { StatusState } from '../../utils/input-statuses';
import FormStatusIndicator from './form-status-indicator';
const { Title } = Typography;
export const TAG_COLOR = '#5a67d8';
interface EditStringArrayProps {
title: string;
description?: string;
placeholder: string;
maxLength?: number;
values: string[];
submitStatus?: StatusState;
continuousStatusMessage?: StatusState;
handleDeleteIndex: (index: number) => void;
handleCreateString: (arg: string) => void;
}
export default function EditValueArray(props: EditStringArrayProps) {
const [newStringInput, setNewStringInput] = useState<string>('');
const {
title,
description,
placeholder,
maxLength,
values,
handleDeleteIndex,
handleCreateString,
submitStatus,
continuousStatusMessage,
} = props;
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">
Admin social features (#408) * ActivityPub admin pages for configuration * Fix dev build * Add support for requiring follow approval. Closes https://github.com/owncast/owncast/issues/1208 * Point at admin version of followers endpoint * Add setting for toggling displaying fediverse engagement in admin. https://github.com/owncast/owncast/issues/1404 * Add instance URL textfield to federation config and disable federation if it is empty * If instance URL is not https disable federation * Tweak federation toggle text. Make go live message optional * Add federation info modal. Closes https://github.com/owncast/owncast/issues/1544 * Add support for blocked federated domains. For https://github.com/owncast/owncast/issues/1209 * Simplify fediverse post input * Add placeholder Fediverse icon * Tweak federation logo in admin menu. Closes https://github.com/owncast/owncast/issues/1603 * Add global button for composing a fediverse post. Closes https://github.com/owncast/owncast/issues/1610 * Federation -> Social * Add page for listing federated actions. Closes https://github.com/owncast/owncast/issues/1573 * Auto-close social post modal after success * Make user modal action buttons look nicer * Center and reduce width and center count column. Closes https://github.com/owncast/owncast/issues/1580 * Update the followers table to be clearer * Fix exception thrown when passing undefined * Disable federation settings if feature is disabled * Update enable social modal. For https://github.com/owncast/owncast/issues/1594 * Fix type props * Quiet, linter * Move compose button to the left * Add tooltip for compose button * Add NSFW toggle to federation config. Closes https://github.com/owncast/owncast/issues/1628 * Add support for blocking/removing followers. For https://github.com/owncast/owncast/issues/1630 * Allow editing the server url field even when federation is disabled * Continue to update the copy around the social features * Use relative path to action images. Fixes https://github.com/owncast/owncast/issues/1646 * Link IRIs and make action verbse present tense * Update caniuse
2022-01-13 00:52:37 +03:00
{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,
};