|
1 | | -import React from 'react'; |
| 1 | +import { debounce } from 'lodash'; |
| 2 | +import React, { useCallback, useContext, useEffect, useState } from 'react'; |
| 3 | + |
| 4 | +import { PlaygroundPythonConfigContext } from '@/components/contexts/PlaygroundConfigContext'; |
| 5 | +import InfoModal from '@/components/InfoModal'; |
2 | 6 |
|
3 | 7 | interface PythonGeneratorOptionsProps { |
4 | 8 | setNewConfig?: (queryKey: string, queryValue: any) => void; |
5 | 9 | } |
6 | 10 |
|
7 | | -interface PythonGeneratorState {} |
| 11 | +interface PythonGeneratorState { |
| 12 | + packageName?: string; |
| 13 | +} |
8 | 14 |
|
9 | 15 | export const defaultState: PythonGeneratorState = {}; |
10 | 16 |
|
11 | | -const PythonGeneratorOptions: React.FC<PythonGeneratorOptionsProps> = () => ( |
| 17 | +const PythonGeneratorOptions: React.FC<PythonGeneratorOptionsProps> = ({ setNewConfig }) => { |
| 18 | + const context = useContext(PlaygroundPythonConfigContext); |
| 19 | + const [state, setState] = useState<PythonGeneratorState>(defaultState); |
| 20 | + |
| 21 | + const debouncedSetNewConfig = debounce( |
| 22 | + (queryKey: string, queryValue: any) => setNewConfig?.(queryKey, queryValue), |
| 23 | + 500 |
| 24 | + ); |
| 25 | + |
| 26 | + useEffect(() => { |
| 27 | + setState({ ...state, packageName: context?.pythonPackageName }); |
| 28 | + }, [context?.pythonPackageName]); |
| 29 | + |
| 30 | + const onChangePackageName = useCallback( |
| 31 | + (event: React.ChangeEvent<HTMLInputElement>) => { |
| 32 | + const packageName = event.target.value; |
| 33 | + |
| 34 | + setState({ ...state, packageName }); |
| 35 | + setNewConfig && debouncedSetNewConfig('pythonPackageName', packageName); |
| 36 | + }, |
| 37 | + [setNewConfig, debouncedSetNewConfig, state] |
| 38 | + ); |
| 39 | + |
| 40 | + return ( |
12 | 41 | <ul className='flex flex-col'> |
13 | 42 | <h3 className='w-full border-b border-gray-700 py-2 text-left'>Python Specific options</h3> |
14 | | - <span className='mt-1 max-w-2xl text-sm text-gray-500'>Currently no options are available</span> |
| 43 | + <li className='flex items-center gap-1'> |
| 44 | + <InfoModal text='Package Name :'> |
| 45 | + <p> |
| 46 | + In Python, a package name is used to organize code into logical groups or containers. It serves as a namespace |
| 47 | + for the code elements within it and helps in avoiding naming conflicts. |
| 48 | + </p> |
| 49 | + </InfoModal> |
| 50 | + <label className='flex grow cursor-pointer items-center justify-between gap-1 py-2'> |
| 51 | + <span className='mt-1 max-w-2xl text-sm text-gray-500'>Package Name</span> |
| 52 | + <input |
| 53 | + type='text' |
| 54 | + className='text-md form-input w-[90%] cursor-pointer rounded-md border-gray-300 font-regular text-gray-700 focus-within:text-gray-900 hover:bg-gray-50' |
| 55 | + name='pythonPackageName' |
| 56 | + value={state?.packageName} |
| 57 | + onChange={onChangePackageName} |
| 58 | + /> |
| 59 | + </label> |
| 60 | + </li> |
15 | 61 | </ul> |
16 | 62 | ); |
| 63 | +}; |
17 | 64 |
|
18 | 65 | export default PythonGeneratorOptions; |
0 commit comments