-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1881 from gluestack/fix/form-control
fix: remove select and modal examples from form control story
- Loading branch information
Showing
1 changed file
with
0 additions
and
234 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -672,240 +672,6 @@ The Textarea Component can be incorporated within the FormControl. | |
| /> | ||
| </AppProvider> | ||
|
|
||
| #### Form Control with Inline Form | ||
|
|
||
| Inline forms can utilize FormControl for seamless integration and enhanced functionality. | ||
|
|
||
| <AppProvider> | ||
| <CodePreview | ||
| showComponentRenderer={true} | ||
| showArgsController={false} | ||
| metaData={{ | ||
| code: ` | ||
| <HStack space='md'> | ||
| <FormControl> | ||
| <Input> | ||
| <InputField | ||
| placeholder="Username" | ||
| /> | ||
| </Input> | ||
| </FormControl> | ||
| <FormControl> | ||
| <Select> | ||
| <SelectTrigger> | ||
| <SelectInput placeholder="Country"/> | ||
| <SelectIcon className='mr-3'> | ||
| <Icon as={ChevronDownIcon} /> | ||
| </SelectIcon> | ||
| </SelectTrigger> | ||
| <SelectPortal> | ||
| <SelectBackdrop /> | ||
| <SelectContent> | ||
| <SelectDragIndicatorWrapper> | ||
| <SelectDragIndicator /> | ||
| </SelectDragIndicatorWrapper> | ||
| <SelectItem label="India" value="India" /> | ||
| <SelectItem label="Sri Lanka" value="Sri Lanka" /> | ||
| <SelectItem label="Uganda" value="Uganda" /> | ||
| <SelectItem label="Japan" value="Japan" /> | ||
| </SelectContent> | ||
| </SelectPortal> | ||
| </Select> | ||
| </FormControl> | ||
| <FormControl> | ||
| <Button className='bg-blue-600'> | ||
| <ButtonText className='font-medium text-sm' > | ||
| Next | ||
| </ButtonText> | ||
| </Button> | ||
| </FormControl> | ||
| </HStack> | ||
| `, | ||
| transformCode: (code) => { | ||
| return transformedCode(code); | ||
| }, | ||
| scope: { | ||
| Wrapper, | ||
| FormControl, | ||
| FormControlLabel, | ||
| FormControlLabelText, | ||
| FormControlHelper, | ||
| FormControlHelperText, | ||
| FormControlError, | ||
| FormControlErrorIcon, | ||
| FormControlErrorText, | ||
| Icon, | ||
| HStack, | ||
| ChevronDownIcon, | ||
| Input, | ||
| InputField, | ||
| Select, | ||
| SelectTrigger, | ||
| SelectInput, | ||
| SelectIcon, | ||
| SelectPortal, | ||
| SelectBackdrop, | ||
| SelectContent, | ||
| SelectDragIndicatorWrapper, | ||
| SelectDragIndicator, | ||
| SelectItem, | ||
| Button, | ||
| ButtonText, | ||
| }, | ||
| argsType: {}, | ||
| }} | ||
| /> | ||
| </AppProvider> | ||
|
|
||
| #### Form Control with Form in Modal | ||
|
|
||
| Modal or other Overlay components can utilize FormControl for state management and error control. | ||
|
|
||
| <AppProvider> | ||
| <CodePreview | ||
| showComponentRenderer={true} | ||
| showArgsController={false} | ||
| metaData={{ | ||
| code: ` | ||
| function App() { | ||
| const [showModal, setShowModal] = useState(false); | ||
| return( | ||
| <Center className='h-[500px]'> | ||
| <Button | ||
| className='bg-blue-600 py-2.5 px-3' | ||
| onPress={()=>{ | ||
| setShowModal(true); | ||
| }} | ||
| > | ||
| <ButtonText> | ||
| Change Settings | ||
| </ButtonText> | ||
| </Button> | ||
| <Modal | ||
| isOpen={showModal} | ||
| onClose={() => { | ||
| setShowModal(false) | ||
| }} | ||
| className='bg-white' | ||
| > | ||
| <ModalBackdrop/> | ||
| <ModalContent className='max-w-96'> | ||
| <ModalBody className='p-5'> | ||
| <VStack space='xs' className='mb-4'> | ||
| <Heading> | ||
| Change Settings | ||
| </Heading> | ||
| <Text size='sm'> | ||
| Make modifications to the settings with ease. | ||
| </Text> | ||
| </VStack> | ||
| <VStack className='py-2' space='xl'> | ||
| <FormControl> | ||
| <FormControlLabel> | ||
| <FormControlLabelText> | ||
| Name | ||
| </FormControlLabelText> | ||
| </FormControlLabel> | ||
| <Input> | ||
| <InputField | ||
| value='Wade Warren' | ||
| /> | ||
| </Input> | ||
| </FormControl> | ||
| <FormControl> | ||
| <FormControlLabel> | ||
| <FormControlLabelText> | ||
| </FormControlLabelText> | ||
| </FormControlLabel> | ||
| <Input> | ||
| <InputField | ||
| value='[email protected]' | ||
| /> | ||
| </Input> | ||
| </FormControl> | ||
| <FormControl> | ||
| <FormControlLabel> | ||
| <FormControlLabelText> | ||
| Volume | ||
| </FormControlLabelText> | ||
| </FormControlLabel> | ||
| <Slider defaultValue={60} sliderTrackHeight={4}> | ||
| <SliderTrack> | ||
| <SliderFilledTrack/> | ||
| </SliderTrack> | ||
| <SliderThumb | ||
| /> | ||
| </Slider> | ||
| </FormControl> | ||
| <FormControl> | ||
| <HStack space='sm'> | ||
| <Switch size='sm'/> | ||
| <FormControlLabelText> | ||
| Dark Mode | ||
| </FormControlLabelText> | ||
| </HStack> | ||
| </FormControl> | ||
| </VStack> | ||
| <Button | ||
| className='mt-4' | ||
| onPress={()=>{ | ||
| setShowModal(false); | ||
| }} | ||
| > | ||
| <ButtonText> | ||
| Save Changes | ||
| </ButtonText> | ||
| </Button> | ||
| </ModalBody> | ||
| </ModalContent> | ||
| </Modal> | ||
| </Center> | ||
| ); | ||
| } | ||
| `, | ||
| transformCode: (code) => { | ||
| return transformedCode(code, 'function', 'App'); | ||
| }, | ||
| scope: { | ||
| Wrapper, | ||
| useState, | ||
| Box, | ||
| Center, | ||
| FormControl, | ||
| FormControlLabel, | ||
| FormControlLabelText, | ||
| FormControlHelper, | ||
| FormControlHelperText, | ||
| FormControlError, | ||
| FormControlErrorIcon, | ||
| FormControlErrorText, | ||
| Input, | ||
| InputField, | ||
| Button, | ||
| ButtonText, | ||
| Slider, | ||
| SliderTrack, | ||
| SliderFilledTrack, | ||
| SliderThumb, | ||
| Switch, | ||
| Modal, | ||
| ModalBackdrop, | ||
| ModalContent, | ||
| ModalHeader, | ||
| ModalCloseButton, | ||
| ModalBody, | ||
| ModalFooter, | ||
| Text: FormControlText, | ||
| Heading, | ||
| VStack, | ||
| HStack, | ||
| }, | ||
| argsType: {}, | ||
| }} | ||
| /> | ||
| </AppProvider> | ||
|
|
||
| #### Form Control with Error | ||
|
|
||
| Error messages can be displayed using FormControl. | ||
|
|
||