ant-design/components/form/demo/customized-form-controls.tsx
9965d96259
feat(form): improve scrollToField logic (#48211)
* feat(form): improve scrollToField logic

* docs: update form faq

* test: add unit test

* fix: boundary error

* style: update code

ref: https://github.com/ant-design/ant-design/pull/48211#discussion_r1547535631
ref: https://github.com/ant-design/ant-design/pull/48211#issuecomment-2031635922

* docs: add scrolltofield demo

* chore: update snapshot

* Update components/form/demo/validate-scroll2field.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: 红 <wxh16144@qq.com>

* chore: update demo

* chore: update logic

* chore: update snapshot

* Update components/form/demo/validate-scroll-to-field.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: 红 <wxh16144@qq.com>

* chore: update demo

* chore: update snap

* chore: update

* chore: update demo

* chore: update

* chore: update docs

* chore: update

* chore: update snap

* Update components/form/demo/validate-scroll-to-field.tsx

Co-authored-by: crazyair <crazyair@users.noreply.github.com>

Signed-off-by: 红 <wxh16144@qq.com>

* chore:update logic

* test: add unit test

ref: https://github.com/ant-design/ant-design/issues/28869

* chore: update demo

* test: update snap

* chore: update demo

* chore: update

* chore: update

* chore: fix TS type

* chore: update demo fix layout

* chore: update demo

---------

Signed-off-by: 红 <wxh16144@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>
2024-04-17 17:56:29 +08:00

103 lines
2.4 KiB
TypeScript

import React, { useState } from 'react';
import { Button, Form, Input, Select } from 'antd';
const { Option } = Select;
type Currency = 'rmb' | 'dollar';
interface PriceValue {
number?: number;
currency?: Currency;
}
interface PriceInputProps {
id?: string;
value?: PriceValue;
onChange?: (value: PriceValue) => void;
}
const PriceInput: React.FC<PriceInputProps> = (props) => {
const { id, value = {}, onChange } = props;
const [number, setNumber] = useState(0);
const [currency, setCurrency] = useState<Currency>('rmb');
const triggerChange = (changedValue: { number?: number; currency?: Currency }) => {
onChange?.({ number, currency, ...value, ...changedValue });
};
const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newNumber = parseInt(e.target.value || '0', 10);
if (Number.isNaN(number)) {
return;
}
if (!('number' in value)) {
setNumber(newNumber);
}
triggerChange({ number: newNumber });
};
const onCurrencyChange = (newCurrency: Currency) => {
if (!('currency' in value)) {
setCurrency(newCurrency);
}
triggerChange({ currency: newCurrency });
};
return (
<span id={id}>
<Input
type="text"
value={value.number || number}
onChange={onNumberChange}
style={{ width: 100 }}
/>
<Select
value={value.currency || currency}
style={{ width: 80, margin: '0 8px' }}
onChange={onCurrencyChange}
>
<Option value="rmb">RMB</Option>
<Option value="dollar">Dollar</Option>
</Select>
</span>
);
};
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Received values from form: ', values);
};
const checkPrice = (_: any, value: { number: number }) => {
if (value.number > 0) {
return Promise.resolve();
}
return Promise.reject(new Error('Price must be greater than zero!'));
};
return (
<Form
name="customized_form_controls"
layout="inline"
onFinish={onFinish}
initialValues={{
price: {
number: 0,
currency: 'rmb',
},
}}
>
<Form.Item name="price" label="Price" rules={[{ validator: checkPrice }]}>
<PriceInput />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default App;