UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 4.25 kB
1
{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../../src/base-ui/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n ({\n ref,\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n prefix,\n suffix,\n disabled,\n readOnly,\n allowClear,\n onClear,\n onPressEnter,\n onKeyDown,\n onChange,\n value,\n defaultValue,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRefs([ref, inputRef]);\n const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n const isFilled = value === undefined ? filled : hasText(value);\n const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n return (\n <div\n className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n data-disabled={disabled ? '' : undefined}\n style={style}\n >\n {prefix && (\n <span className={cx(styles.slot, classNames?.prefix)} style={customStyles?.prefix}>\n {prefix}\n </span>\n )}\n <BaseInput\n className={cx(styles.input, classNames?.input)}\n defaultValue={defaultValue}\n disabled={disabled}\n readOnly={readOnly}\n ref={mergedRef}\n style={customStyles?.input}\n value={value}\n onChange={(event) => {\n setFilled(event.currentTarget.value.length > 0);\n onChange?.(event);\n }}\n onKeyDown={(event) => {\n if (isPressEnter(event)) onPressEnter?.(event);\n onKeyDown?.(event);\n }}\n {...rest}\n />\n {showClear && (\n <ClearButton\n onClear={() => {\n clearNativeValue(inputRef.current);\n onClear?.();\n }}\n />\n )}\n {suffix && (\n <span className={cx(styles.slot, classNames?.suffix)} style={customStyles?.suffix}>\n {suffix}\n </span>\n )}\n </div>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Object.assign(Input, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EAC/E,iBAAe,WAAW,KAAK,KAAA;EACxB;EAHT,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC/B;IACJ;IACA;IACV,KAAK;IACL,OAAO,cAAc;IACd;IACP,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aACC,oBAAC,aAAD,EACE,eAAe;IACb,iBAAiB,SAAS,OAAO;IACjC,UAAU;GACZ,EACD,CAAA;GAEF,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc;AAEpB,IAAA,gBAAe,OAAO,OAAOD,SAAO,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}