UNPKG

@lobehub/ui

Version:

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

1 lines 4.47 kB
{"version":3,"file":"ControlInput.mjs","names":["Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Input, { type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n onChange?: (value: string) => void;\n onChangeEnd?: (value: string) => void;\n onValueChanging?: (value: string) => void;\n submitIcon?: ActionIconProps['icon'];\n texts?: {\n reset?: string;\n submit?: string;\n };\n value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n ({\n value,\n onChange,\n onValueChanging,\n onChangeEnd,\n onCompositionEnd,\n onCompositionStart,\n onPressEnter,\n onFocus,\n submitIcon,\n style,\n texts,\n ...rest\n }) => {\n const ref = useRef<InputRef>(null);\n const [input, setInput] = useState<string>(value || '');\n\n const isChineseInput = useRef(false);\n\n useEffect(() => {\n if (value !== undefined) setInput(value);\n }, [value]);\n\n const handleUpload = () => {\n onChange?.(input);\n ref?.current?.blur();\n onChangeEnd?.(input);\n };\n\n return (\n <Input\n autoFocus\n ref={ref}\n value={input}\n style={{\n width: '100%',\n ...style,\n }}\n suffix={\n value === input ? (\n <span />\n ) : (\n <Flexbox\n horizontal\n gap={2}\n style={{\n marginRight: -4,\n zIndex: 1,\n }}\n >\n <ActionIcon\n icon={RotateCcw}\n size=\"small\"\n title={texts?.reset || 'Reset'}\n onClick={(e) => {\n e.preventDefault();\n setInput(value || '');\n }}\n />\n <ActionIcon\n icon={submitIcon || Save}\n size=\"small\"\n title={texts?.submit || 'Submit'}\n variant={'filled'}\n onClick={(e) => {\n e.preventDefault();\n handleUpload();\n }}\n />\n </Flexbox>\n )\n }\n onFocus={onFocus}\n onChange={(e) => {\n setInput(e.target.value);\n onValueChanging?.(e.target.value);\n }}\n onCompositionEnd={(e) => {\n isChineseInput.current = false;\n onCompositionEnd?.(e);\n }}\n onCompositionStart={(e) => {\n isChineseInput.current = true;\n onCompositionStart?.(e);\n }}\n onPressEnter={(e) => {\n if (!e.shiftKey && !isChineseInput.current) {\n e.preventDefault();\n handleUpload();\n onPressEnter?.(e);\n }\n }}\n {...rest}\n />\n );\n },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAiB,IAAI;CACjC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAAC,OAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACA,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;aANF,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}