From abbd0d8cc8691d016d386a7aec96a7278521a477 Mon Sep 17 00:00:00 2001 From: Golek Date: Wed, 7 Dec 2022 15:58:09 +0700 Subject: [PATCH] segini dulu lah input file --- .../component_library/lib/src/input_file.dart | 58 ++++++------------- .../landing_menu/lib/src/landing_page.dart | 28 ++++----- .../form_fields/lib/src/error_messages.dart | 16 ++--- .../lib/src/reactive_input_file.dart | 15 ++--- .../lib/src/validators/required_file.dart | 2 +- 5 files changed, 40 insertions(+), 79 deletions(-) diff --git a/packages/component_library/lib/src/input_file.dart b/packages/component_library/lib/src/input_file.dart index c970dad..e1b818f 100644 --- a/packages/component_library/lib/src/input_file.dart +++ b/packages/component_library/lib/src/input_file.dart @@ -12,7 +12,7 @@ import '_dashed_rect.dart'; class InputFile extends StatefulWidget { const InputFile({ Key? key, - this.files = const [], + this.files, required this.onChange, this.allowMultiple = false, this.allowedExtensions = const ['jpg', 'jpeg', 'png', 'gif'], @@ -24,7 +24,7 @@ class InputFile extends StatefulWidget { this.errorMessage, }) : super(key: key); - final List files; + final List? files; final void Function(List files) onChange; final bool? allowMultiple; final List? allowedExtensions; @@ -41,37 +41,27 @@ class InputFile extends StatefulWidget { class _InputFileState extends State { List files = []; - StreamController> controller = StreamController(); - late Stream> stream; void addFileToSink(List addedFile) { - controller.sink.add(files); files = addedFile; + widget.onChange.call(files); } void removeFile(File file) { - files.removeAt(files.indexOf(file)); - controller.sink.add(files); - } - - void close() { - controller.close(); + setState(() { + files.removeAt(files.indexOf(file)); + widget.onChange.call(files); + }); } @override void initState() { super.initState(); // tambahkan initial component file value - files = widget.files; - addFileToSink(files); - // dapatkan stream dan listen ke onchange - stream = controller.stream; - } - - @override - void dispose() { - close(); - super.dispose(); + if (widget.files != null) { + files = widget.files!; + addFileToSink(files); + } } /// ketika user memilih menggunakan camera saat input file @@ -121,8 +111,7 @@ class _InputFileState extends State { Widget build(BuildContext context) { final theme = GolekTheme.of(context); print("INPUT FILE"); - print(widget.isError!); - print(widget.isTouched!); + print(files); return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -147,11 +136,7 @@ class _InputFileState extends State { children: [ const SizedBox(height: 21), OutlinedButton( - onPressed: () { - setState(() { - - }); - showModalFileToPick( + onPressed: () => showModalFileToPick( context: context, onPickCamera: (context) async { await pickFileFromCamera(context); @@ -161,8 +146,7 @@ class _InputFileState extends State { await pickFileFromGallery(context); Navigator.of(context).pop(); }, - ); - }, + ), style: OutlinedButton.styleFrom( side: BorderSide( width: 1, @@ -181,16 +165,10 @@ class _InputFileState extends State { ), ), ), - StreamBuilder( - stream: stream, - builder: (context, snapshot) { - widget.onChange.call(files); - return ListFilesBuilder( - files: files, - multiple: widget.allowMultiple!, - onRemoveFile: removeFile, - ); - }, + ListFilesBuilder( + files: files, + multiple: widget.allowMultiple!, + onRemoveFile: removeFile, ), const SizedBox(height: 5), Text( diff --git a/packages/features/landing_menu/lib/src/landing_page.dart b/packages/features/landing_menu/lib/src/landing_page.dart index b5cebe9..d444c2c 100644 --- a/packages/features/landing_menu/lib/src/landing_page.dart +++ b/packages/features/landing_menu/lib/src/landing_page.dart @@ -27,17 +27,16 @@ class _LandingPageState extends State { void dispose() { super.dispose(); } + final form = FormGroup({ + 'file_pem': FormControl>( + value: [], + validators: [requiredFile], + ), + }); @override Widget build(BuildContext context) { final theme = GolekTheme.of(context); - final form = FormGroup({ - 'foto': FormControl>( - value: [], - validators: [requiredFile], - ), - }); - return Scaffold( appBar: LandingAppBar(), body: SafeArea( @@ -46,25 +45,22 @@ class _LandingPageState extends State { child: Column( children: [ ReactiveValueListenableBuilder( - formControlName: 'foto', + formControlName: 'file_pem', builder: (context, control, child) { - print('DEBUG DI VALUE LISTEN'); - print(control.value); - print(control.touched); - print(control.errors.entries); return Container(); }, ), ReactiveInputFile( - name: 'foto', + name: 'file_pem', allowMultiple: true, ), ElevatedButton( onPressed: () { form.markAllAsTouched(); - print(form.control('foto').hasErrors); - print(form.control('foto').errors); - print(form.control('foto').touched); + print(form.control('file_pem').value); + print(form.control('file_pem').hasErrors); + print(form.control('file_pem').errors); + print(form.control('file_pem').touched); if (form.valid){ print("FORM IS VALID"); } diff --git a/packages/form_fields/lib/src/error_messages.dart b/packages/form_fields/lib/src/error_messages.dart index f740b03..4c3e689 100644 --- a/packages/form_fields/lib/src/error_messages.dart +++ b/packages/form_fields/lib/src/error_messages.dart @@ -12,20 +12,14 @@ class ErrorMessages { Map? widgetCustomMessages, }) { Map? mergedErrorMessages = { - ...?widgetCustomMessages, ...messages, + ...?widgetCustomMessages, }; - MapEntry message = const MapEntry('', ''); - print('GET UI ERROR '); - print(control.errors); - if (control.errors.entries.isNotEmpty) { - message = mergedErrorMessages.entries.firstWhere( - (element) => element.key == control.errors.entries.first.key, - orElse: () => const MapEntry('', ''), - ); - } - + final message = mergedErrorMessages.entries.firstWhere( + (element) => control.errors.entries.isNotEmpty && element.key == control.errors.entries.first.key, + orElse: () => const MapEntry('', ''), + ); return message.value.toString().replaceFirst('{_field_}', label); } } diff --git a/packages/form_fields/lib/src/reactive_input_file.dart b/packages/form_fields/lib/src/reactive_input_file.dart index 1c6ecdb..5799745 100644 --- a/packages/form_fields/lib/src/reactive_input_file.dart +++ b/packages/form_fields/lib/src/reactive_input_file.dart @@ -1,13 +1,11 @@ import 'dart:io'; import 'package:component_library/component_library.dart'; -import 'package:flutter/material.dart'; import 'package:reactive_forms/reactive_forms.dart'; import 'error_messages.dart'; class ReactiveInputFile extends ReactiveFormField, List> { - ReactiveInputFile({ required String name, allowMultiple = false, @@ -19,25 +17,20 @@ class ReactiveInputFile extends ReactiveFormField, List> { formControlName: name, builder: (field) { return InputFile( - files: field.value ?? [], + files: field.value, allowMultiple: allowMultiple, descriptionLabel: descriptionLabel, guidanceLabel: guidanceLabel, uploadButtonLabel: uploadButtonLabel, allowedExtensions: allowedExtensions, errorMessage: ErrorMessages.getUiErrorMessage( - control: field.control, - label: '', - widgetCustomMessages: { - 'requiredFile': 'Foto harus diisi' - } + control: field.control, + label: '', + widgetCustomMessages: {'required': 'Foto harus diisi'}, ), isTouched: field.control.touched, isError: field.control.hasErrors, onChange: (files) { - print('ON CAHNEF'); - print(field.control.touched); - print(field.control.hasErrors); field.didChange(files); }, ); diff --git a/packages/form_fields/lib/src/validators/required_file.dart b/packages/form_fields/lib/src/validators/required_file.dart index 03d8b71..6df090d 100644 --- a/packages/form_fields/lib/src/validators/required_file.dart +++ b/packages/form_fields/lib/src/validators/required_file.dart @@ -3,5 +3,5 @@ import 'package:reactive_forms/reactive_forms.dart'; Map? requiredFile(AbstractControl control) { return control.isNotNull && control.value?.isNotEmpty == true ? null - : {'requiredFile': true}; + : {'required': true}; }