react-input-pin-code/dist/components/pin-input/index.d.ts.map

Pin input built with React component and styled-components

{"version":3,"file":"index.d.ts","sources":["../../../src/components/pin-input/component.tsx"],"sourcesContent":["import cx from \"clsx\";\r\nimport { useEffect, useMemo, useRef } from \"react\";\r\nimport { Component } from \"./types\";\r\n\r\nimport styles from './styles.module.scss';\r\n\r\nimport { PinInputField } from \"../pin-input-field\";\r\nimport { validateToPattern } from \"../../utils/string\";\r\nimport { useCssVariable } from \"../../hooks\";\r\nimport { colorParser } from \"./utils\";\r\nimport { SIZE_MEDIUM } from \"../../constants\";\r\nimport {\r\n  DEFAULT_BORDER_COLOR,\r\n  DEFAULT_ERROR_BACKGROUND_COLOR,\r\n  DEFAULT_ERROR_BORDER_COLOR,\r\n  DEFAULT_FOCUS_BACKGROUND_COLOR,\r\n  DEFAULT_FOCUS_BORDER_COLOR,\r\n  DEFAULT_VALID_BACKGROUND_COLOR,\r\n  DEFAULT_VALID_BORDER_COLOR\r\n} from \"../../constants/styles\";\r\n\r\nexport const PinInput: Component = ({\r\n  values,\r\n  type = 'number',\r\n  mask = false,\r\n  size = SIZE_MEDIUM,\r\n  validate,\r\n  format,\r\n  showState = true,\r\n  autoFocus = false,\r\n  autoTab = true,\r\n  containerClassName,\r\n  containerStyle = {},\r\n  inputClassName,\r\n  inputStyle = {},\r\n  borderColor = DEFAULT_BORDER_COLOR,\r\n  errorBorderColor = DEFAULT_ERROR_BORDER_COLOR,\r\n  focusBorderColor = DEFAULT_FOCUS_BORDER_COLOR,\r\n  validBorderColor = DEFAULT_VALID_BORDER_COLOR,\r\n  onChange,\r\n  onComplete,\r\n  'aria-describedby': ariaDescribedby,\r\n  'aria-label': ariaLabel,\r\n  'aria-labelledby': ariaLabelledby,\r\n  autoComplete,\r\n  disabled,\r\n  id,\r\n  inputMode,\r\n  name,\r\n  onBlur,\r\n  onFocus,\r\n  onKeyDown,\r\n  placeholder,\r\n  required,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement | null>(null);\r\n  const completed = useMemo(\r\n    () => values.every((val) => val),\r\n    [values]\r\n  );\r\n\r\n  if (completed && onComplete) {\r\n    if (validate) {\r\n      if (\r\n        values.every((val) => {\r\n          const pattern = validateToPattern(validate);\r\n          \r\n          if (pattern) {\r\n            return new RegExp(pattern).test(val);\r\n          }\r\n\r\n          return false;\r\n        })\r\n      ) {\r\n        onComplete(values);\r\n      }\r\n    } else {\r\n      onComplete(values);\r\n    }\r\n  }\r\n\r\n  const {\r\n    setCssVariable: setInputCssVariable,\r\n  } = useCssVariable({\r\n    targetElRef: containerRef,\r\n  });\r\n\r\n  const parsedFocusBorderColor = useMemo(\r\n    () => colorParser(focusBorderColor),\r\n    [focusBorderColor]\r\n  );\r\n  const parsedErrorBorderColor = useMemo(\r\n    () => colorParser(errorBorderColor),\r\n    [errorBorderColor]\r\n  );\r\n  const parsedValidBorderColor = useMemo(\r\n    () => colorParser(focusBorderColor),\r\n    [validBorderColor]\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (containerRef.current) {\r\n      setInputCssVariable(\r\n        styles.inputBorderColorCssVar,\r\n        colorParser(borderColor) ? borderColor : DEFAULT_BORDER_COLOR,\r\n      );\r\n      setInputCssVariable(\r\n        styles.inputFocusBorderColorCssVar,\r\n        parsedFocusBorderColor ? focusBorderColor : DEFAULT_FOCUS_BORDER_COLOR,\r\n      );\r\n      setInputCssVariable(\r\n        styles.inputFocusBackgroundColorCssVar,\r\n        parsedFocusBorderColor\r\n          ? `rgba(${parsedFocusBorderColor.r},${parsedFocusBorderColor.g},${parsedFocusBorderColor.b},0.1)`\r\n          : DEFAULT_FOCUS_BACKGROUND_COLOR,\r\n      );\r\n      setInputCssVariable(\r\n        styles.inputErrorBorderColorCssVar,\r\n        colorParser(errorBorderColor) ? errorBorderColor : DEFAULT_ERROR_BORDER_COLOR,\r\n      );\r\n      setInputCssVariable(\r\n        styles.inputErrorBackgroundColorCssVar,\r\n        parsedErrorBorderColor\r\n          ? `rgba(${parsedErrorBorderColor.r},${parsedErrorBorderColor.g},${parsedErrorBorderColor.b},0.1)`\r\n          : DEFAULT_ERROR_BACKGROUND_COLOR,\r\n      );\r\n      setInputCssVariable(\r\n        styles.inputValidBorderColorCssVar,\r\n        colorParser(validBorderColor) ? validBorderColor : DEFAULT_VALID_BORDER_COLOR,\r\n      );\r\n      setInputCssVariable(\r\n        styles.inputValidBackgroundColorCssVar,\r\n        parsedValidBorderColor\r\n          ? `rgba(${parsedValidBorderColor.r},${parsedValidBorderColor.g},${parsedValidBorderColor.b},0.1)`\r\n          : DEFAULT_VALID_BACKGROUND_COLOR,\r\n      );\r\n    }\r\n  }, [containerRef.current]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={cx(\r\n        styles.pinCodeContainer,\r\n        containerClassName\r\n      )}\r\n      style={containerStyle}\r\n    >\r\n      {values.map((value, i) => (\r\n        <PinInputField\r\n          key={id ? `${id}-${i}` : i}\r\n          index={i}\r\n          value={value}\r\n          values={values}\r\n          completed={completed}\r\n          type={type}\r\n          mask={mask}\r\n          size={size}\r\n          validate={validate}\r\n          showState={showState}\r\n          autoFocus={autoFocus}\r\n          autoTab={autoTab}\r\n          inputClassName={inputClassName}\r\n          inputStyle={inputStyle}\r\n          aria-describedby={ariaDescribedby}\r\n          aria-label={ariaLabel}\r\n          aria-labelledby={ariaLabelledby}\r\n          autoComplete={autoComplete}\r\n          disabled={disabled}\r\n          inputMode={inputMode}\r\n          id={id}\r\n          name={name}\r\n          placeholder={placeholder}\r\n          required={required}\r\n          format={format}\r\n          onChange={onChange}\r\n          onBlur={onBlur}\r\n          onFocus={onFocus}\r\n          onKeyDown={onKeyDown}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n};"],"names":[],"mappings":";;;;AACO,cAAA,QAAA,EAAA,SAAA;;;;"}