{"size": 987, "ext": "js", "max_stars_repo_path": "Client/src/components/FormItems/SeatsWithCarInput/SeatsWithCarInput.js", "max_stars_repo_name": "todor-tsankov/day-tripper", "max_stars_repo_stars_event_min_datetime": "2021-10-04T18:31:21.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-04T18:31:21.000Z", "max_issues_repo_path": "Client/src/components/FormItems/SeatsWithCarInput/SeatsWithCarInput.js", "max_issues_repo_name": "todor-tsankov/day-tripper", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "Client/src/components/FormItems/SeatsWithCarInput/SeatsWithCarInput.js", "max_forks_repo_name": "todor-tsankov/day-tripper", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.0294117647, "max_line_length": 78, "alphanum_fraction": 0.4660587639}
import { useState } from 'react';
import { Form, Switch, InputNumber } from 'antd';

function SeatsWithCarInput({withCar}) {
    const [seatsDisabled, setSeatsDisabled] = useState(!withCar);
    const onWithCarChange = (value) => setSeatsDisabled(!value);

    return (
        <>
            <Form.Item
                name="withCar"
                label="I have a car"
            >
                <Switch defaultChecked={withCar} onChange={onWithCarChange} />
            </Form.Item>
            <Form.Item
                name="seats"
                label="Seats available:"
                rules={[{
                    required: !seatsDisabled,
                    message: 'Number of avaible seats is required!'
                }]}
            >
                <InputNumber
                    disabled={seatsDisabled}
                    min={1}
                    max={10}
                />
            </Form.Item>
        </>
    );
}

export default SeatsWithCarInput;