Viewing File: /home/markqprx/iniasli.pro/client/ui/slug-editor.tsx

import React, {Fragment, useEffect, useState} from 'react';
import clsx from 'clsx';
import {RefCallBack} from 'react-hook-form';
import {Button} from './buttons/button';
import {LinkIcon} from '../icons/material/Link';
import {TextField} from './forms/input-field/text-field/text-field';
import {Trans} from '../i18n/trans';
import {useSettings} from '../core/settings/use-settings';
import {slugifyString} from '@common/utils/string/slugify-string';

export interface SlugEditorProps {
  prefix?: string;
  suffix?: string;
  host?: string;
  value?: string | null;
  placeholder?: string;
  onChange?: (value: string) => void;
  className?: string;
  inputRef?: RefCallBack;
  onInputBlur?: () => void;
  showLinkIcon?: boolean;
  pattern?: string;
  minLength?: number;
  maxLength?: number;
  hideButton?: boolean;
}
export function SlugEditor({
  host,
  value: initialValue = '',
  placeholder,
  onChange,
  className,
  inputRef,
  onInputBlur,
  showLinkIcon = true,
  pattern,
  minLength,
  maxLength,
  hideButton,
  ...props
}: SlugEditorProps) {
  const {base_url} = useSettings();
  const prefix = props.prefix ? `/${props.prefix}` : '';
  const suffix = props.suffix ? `/${props.suffix}` : '';
  const [isEditing, setIsEditing] = useState(false);
  const [value, setValue] = useState(initialValue);
  host = host || base_url;

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const handleSubmit = () => {
    if (!isEditing) {
      setIsEditing(true);
    } else {
      setIsEditing(false);
      if (value) {
        onChange?.(value);
      }
    }
  };

  let preview: string = '';
  if (value) {
    preview = value;
  } else if (placeholder) {
    preview = slugifyString(placeholder);
  }

  return (
    // can't use <form/> here as component might be used inside another form
    <div className={clsx('flex items-center', className)}>
      {showLinkIcon && <LinkIcon className="icon-md text-muted" />}
      <div className="text-primary ml-6 mr-14">
        {host}
        {prefix}
        {!isEditing && preview && (
          <Fragment>
            <span>/</span>
            <span className="font-medium">{preview}</span>
          </Fragment>
        )}
        {!isEditing ? suffix : null}
      </div>
      {isEditing && (
        <TextField
          pattern={pattern}
          minLength={minLength}
          maxLength={maxLength}
          onKeyDown={e => {
            if (e.key === 'Enter') {
              handleSubmit();
            }
          }}
          ref={inputRef}
          aria-label="slug"
          autoFocus
          className="mr-14"
          size="2xs"
          value={value as string}
          onBlur={onInputBlur}
          onChange={e => {
            setValue(e.target.value);
          }}
        />
      )}
      {!hideButton && (
        <Button
          type="button"
          color="chip"
          variant="outline"
          size="2xs"
          onClick={() => {
            handleSubmit();
          }}
        >
          {isEditing ? <Trans message="Save" /> : <Trans message="Edit" />}
        </Button>
      )}
    </div>
  );
}