| 1 |
- {"version":3,"file":"91308.js","mappings":"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","sources":["webpack://quran.com/./src/components/dls/Forms/Input/Input.module.scss","webpack://quran.com/./src/components/dls/Forms/Input/index.tsx"],"sourcesContent":["// Exports\nmodule.exports = {\n\t\"container\": \"Input_container__5BNOH\",\n\t\"fixedWidth\": \"Input_fixedWidth__MZoNx\",\n\t\"disabled\": \"Input_disabled__AFA4l\",\n\t\"error\": \"Input_error__cfc8q\",\n\t\"success\": \"Input_success__qb_Ue\",\n\t\"warning\": \"Input_warning__KwRSJ\",\n\t\"main\": \"Input_main__K4bVL\",\n\t\"input\": \"Input_input__za7E9\",\n\t\"rtlInput\": \"Input_rtlInput__8Yg1Q\",\n\t\"smallContainer\": \"Input_smallContainer__bxyYT\",\n\t\"mediumContainer\": \"Input_mediumContainer__jEOpT\",\n\t\"largeContainer\": \"Input_largeContainer__yafZ8\",\n\t\"label\": \"Input_label__loZWW\",\n\t\"clearContainer\": \"Input_clearContainer__3LxT4\",\n\t\"prefixSuffixContainer\": \"Input_prefixSuffixContainer__n84F6\",\n\t\"prefix\": \"Input_prefix__jYhnp\",\n\t\"suffix\": \"Input_suffix__v_BvR\"\n};\n","/* eslint-disable max-lines */\nimport React, {\n ReactNode,\n useState,\n useEffect,\n ChangeEvent,\n RefObject,\n KeyboardEvent,\n HTMLAttributes,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport Button, { ButtonShape, ButtonSize, ButtonVariant } from '../../Button/Button';\n\nimport styles from './Input.module.scss';\n\nimport ClearIcon from '@/icons/close.svg';\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport enum InputType {\n Error = 'error',\n Warning = 'warning',\n Success = 'success',\n}\n\nexport enum InputVariant {\n Default = 'default',\n Main = 'main',\n}\ninterface Props {\n id: string;\n name?: string;\n size?: InputSize;\n placeholder?: string;\n fixedWidth?: boolean;\n disabled?: boolean;\n clearable?: boolean;\n prefix?: ReactNode;\n suffix?: ReactNode;\n onClearClicked?: () => void;\n onChange?: (value: string) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];\n value?: string;\n label?: string | JSX.Element;\n type?: InputType;\n shouldFlipOnRTL?: boolean;\n variant?: InputVariant;\n containerClassName?: string;\n htmlType?: React.HTMLInputTypeAttribute;\n isRequired?: boolean;\n inputRef?: RefObject<HTMLInputElement>;\n}\n\nconst Input: React.FC<Props> = ({\n id,\n name,\n label,\n placeholder,\n size = InputSize.Medium,\n fixedWidth = true,\n disabled = false,\n clearable = false,\n type,\n variant,\n prefix,\n suffix,\n onClearClicked,\n onChange,\n onKeyDown,\n inputMode,\n value = '',\n shouldFlipOnRTL = true,\n containerClassName,\n htmlType,\n isRequired,\n inputRef,\n}) => {\n const [inputValue, setInputValue] = useState(value);\n // listen to any change in value in-case the value gets populated after and API call.\n useEffect(() => {\n setInputValue(value);\n }, [value]);\n\n const onValueChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = event.target.value;\n setInputValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n };\n\n return (\n <>\n {label && <p className={styles.label}>{label}</p>}\n <div\n className={classNames(styles.container, containerClassName, {\n [styles.smallContainer]: size === InputSize.Small,\n [styles.mediumContainer]: size === InputSize.Medium,\n [styles.largeContainer]: size === InputSize.Large,\n [styles.fixedWidth]: fixedWidth,\n [styles.disabled]: disabled,\n [styles.error]: type === InputType.Error,\n [styles.success]: type === InputType.Success,\n [styles.warning]: type === InputType.Warning,\n [styles.main]: variant === InputVariant.Main,\n })}\n >\n {prefix && (\n <div className={classNames(styles.prefix, styles.prefixSuffixContainer)}>{prefix}</div>\n )}\n <input\n className={classNames(styles.input, {\n [styles.error]: type === InputType.Error,\n [styles.success]: type === InputType.Success,\n [styles.warning]: type === InputType.Warning,\n [styles.rtlInput]: shouldFlipOnRTL,\n })}\n type={htmlType}\n required={isRequired}\n dir=\"auto\"\n id={id}\n ref={inputRef}\n disabled={disabled}\n onChange={onValueChange}\n value={inputValue}\n onKeyDown={onKeyDown}\n inputMode={inputMode}\n {...(placeholder && { placeholder })}\n {...(name && { name })}\n />\n {clearable ? (\n <>\n {inputValue && (\n <div className={styles.clearContainer}>\n <Button\n shape={ButtonShape.Circle}\n variant={ButtonVariant.Ghost}\n size={ButtonSize.Small}\n onClick={onClearClicked}\n >\n <ClearIcon />\n </Button>\n </div>\n )}\n </>\n ) : (\n <>\n {suffix && (\n <div className={classNames(styles.suffix, styles.prefixSuffixContainer)}>\n {suffix}\n </div>\n )}\n </>\n )}\n </div>\n </>\n );\n};\n\nexport default Input;\n"],"names":["React","useState","useEffect","classNames","Button","ButtonShape","ButtonSize","ButtonVariant","styles","ClearIcon","InputSize","Small","Medium","Large","InputType","Error","Warning","Success","InputVariant","Default","Main","Input","id","name","label","placeholder","size","fixedWidth","disabled","clearable","type","variant","prefix","suffix","onClearClicked","onChange","onKeyDown","inputMode","value","shouldFlipOnRTL","containerClassName","htmlType","isRequired","inputRef","inputValue","setInputValue","onValueChange","event","newValue","target","p","className","div","container","smallContainer","mediumContainer","largeContainer","error","success","warning","main","prefixSuffixContainer","input","rtlInput","required","dir","ref","clearContainer","shape","Circle","Ghost","onClick"],"sourceRoot":""}
|
