@chakra-ui/react#useMultiStyleConfig TypeScript Examples

Label = ({ isRequired, children, ...props }: LabelProps): JSX.Element => {
  const styles = useMultiStyleConfig('Label', props)

  return (
    <Text sx={styles.label} as="label" {...props}>
      {children}
      {isRequired && (
        <Text sx={styles.asterisk} as="span">
          *
        </Text>
      )}
    </Text>
  )
}

Control = <OptionType, IsMulti extends boolean = false>({
  innerRef,
  innerProps,
  isFocused,
  isDisabled,
  children,
  getStyles,
  ...props
}: ControlProps<OptionType, IsMulti>): JSX.Element => {
  const styles = useMultiStyleConfig('SelectWidget', props)

  return (
    <StylesProvider value={styles}>
      <Flex
        data-test-id="control"
        css={getStyles('control', props)}
        ref={innerRef}
        sx={{
          ...styles.control,
          overflow: 'hidden',
        }}
        {...innerProps}
        {...(isFocused && { 'data-focus': true })}
        {...(isDisabled && { disabled: true })}
      >
        {children}
      </Flex>
    </StylesProvider>
  )
}

LinkWidget = (props: LinkWidgetProps): JSX.Element => {
  const { name, mainDetailObject, href, helpText, style, containerStore, target = '_blank', linkProps } = props

  const context = containerStore.getState()
  const { content, widgetDescription } = useWidgetInitialization({ ...props, context })
  const linkHref = getWidgetContent(name, mainDetailObject, href, context)

  const styles = useMultiStyleConfig('LinkWidget', props)

  const handleClick = (): void => {
    pushAnalytics({
      eventName: EventNameEnum.LINK_CLICK,
      widgetType: WidgetTypeEnum.ACTION,
      value: linkHref,
      objectForAnalytics: mainDetailObject,
      ...props,
    })
  }

  const { getDataTestId } = useCreateTestId()
  return (
    <StylesProvider value={styles}>
      <StyledWidgetWrapper
        name={name}
        style={style}
        helpText={helpText || ''}
        description={widgetDescription}
        {...getDataTestId(props)}
      >
        <>
          {linkHref ? (
            <Link target={target} href={linkHref} onClick={() => handleClick()} sx={styles.control} {...linkProps}>
              {content || 'Ссылка'}
            </Link>
          ) : (
            '-'
          )}
        </>
      </StyledWidgetWrapper>
    </StylesProvider>
  )
}

ReadOnlyWidget = (props: ReadOnlyWidgetProps): JSX.Element => {
  const {
    containerStore,
    style,
    helpText,
    useClipboard,
    copyValue,
    notifier,
    name,
    innerStyle,
    containerProps,
    labelContainerProps,
    className,
    widgetClassName,
    isHtmlString,
  } = props

  const { content, isRequired, widgetDescription } = useWidgetInitialization({
    ...props,
    context: containerStore.getState(),
  })

  const styles = useMultiStyleConfig('ReadOnlyWidget', props)

  const controlStyles = { ...(styles.control || {}), ...(innerStyle || {}) }

  const { getDataTestId } = useCreateTestId()

  const isHtmlContent = getAccessor(isHtmlString) && typeof content === 'string'

  return (
    <StylesProvider value={styles}>
      <StyledWidgetWrapper
        className={className}
        name={name}
        style={style}
        helpText={helpText}
        description={widgetDescription}
        useClipboard={useClipboard}
        copyValue={getCopyHandler(content, copyValue)}
        notifier={notifier}
        required={isRequired}
        containerProps={containerProps}
        labelContainerProps={labelContainerProps}
        {...getDataTestId(props)}
      >
        <EmptyText
          as={isHtmlContent ? 'div' : undefined}
          sx={controlStyles}
          className={widgetClassName}
          dangerouslySetInnerHTML={isHtmlContent ? { __html: content } : undefined}
        >
          {isHtmlContent ? undefined : content}
        </EmptyText>
      </StyledWidgetWrapper>
    </StylesProvider>
  )
}

ChipInput = forwardRef<HTMLInputElement, ChipInputProps>((props, ref): JSX.Element => {
  const {
    value: inputValue,
    onChange,
    placeholder,
    submitKeys = ['Enter', 'Tab'],
    validator = () => true,
    errorText = 'Invalid value',
    chipClassName,
    inputClassName,
  } = props
  const [chips, setChips] = usePropState<string[]>(inputValue)
  const [value, setValue] = useState<string>('')
  const [error, setError] = useState<string>('')
  // TODO: Исправить
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const inputRef = (ref as RefObject<HTMLInputElement>) ?? useRef<HTMLInputElement>(null)

  const isValid = useCallback(
    (val: string): boolean => {
      if (!validator(val)) {
        setError(errorText)
        return false
      }
      setError('')
      return true
    },
    [errorText, validator]
  )

  const deleteChip = useCallback(
    (index: number): void => {
      const newChips = chips.filter((_, chipIndex) => chipIndex !== index)
      setChips(newChips)
      onChange(newChips)
    },
    [onChange, chips, setChips]
  )

  const finishInput = useCallback((): void => {
    const trimmedValue = value.trim()
    if (trimmedValue && isValid(trimmedValue)) {
      const newChips = [...chips, trimmedValue]
      setChips(newChips)
      onChange(newChips)
      setValue('')
      setError('')
    }
  }, [onChange, chips, setChips, isValid, value])

  const handleKeyDown = useCallback(
    (e: KeyboardEvent<HTMLInputElement>): void => {
      if (submitKeys.includes(e.key)) {
        e.preventDefault()
        finishInput()
      }
      if (e.key === 'Backspace') {
        if (!value && chips.length > 0) {
          e.preventDefault()
          deleteChip(chips.length - 1)
        }
      }
    },
    [chips.length, deleteChip, finishInput, submitKeys, value]
  )

  const { container, input, chip, chipLabel } = useMultiStyleConfig('ChipInput', props)

  return (
    <>
      <Flex __css={container} onClick={() => inputRef?.current?.focus?.()}>
        {chips.map((chipValue: string, index: number) => {
          const key = index
          return (
            <Tag key={key} minWidth={undefined} minHeight={undefined} sx={chip} className={chipClassName}>
              <TagLabel sx={chipLabel} width="100%">
                {chipValue}
              </TagLabel>
              <TagCloseButton onClick={() => deleteChip(key)} />
            </Tag>
          )
        })}
        <Input
          variant="unstyled"
          sx={input}
          value={value}
          onChange={(e: ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)}
          placeholder={placeholder}
          onKeyDown={handleKeyDown}
          isInvalid={!!error}
          ref={inputRef}
          width="auto"
          height="2rem"
          borderRadius="0px"
          onBlur={finishInput}
          className={inputClassName}
        />
      </Flex>
      {error && (
        <Text className="error" fontSize="0.7rem" color="red.400">
          {error}
        </Text>
      )}
    </>
  )
})