Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: limit max character length on select/multiselect options (#1246)

Browse Source 
* Add maxLength of 30 characters and truncation to text fields

* Add dynamic height

* Add maxLength param

* Add maxLength in Rounded Field
This commit is contained in:
vortixhead 2022-10-07 20:24:05 -05:00 committed by GitHub
parent 2537a04fef
commit fa9e32d86a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart
View File

@ -142,11 +142,12 @@ class _TextField extends StatelessWidget {
value: (option) => option);
return SizedBox(
height: 42,
height: 62,
child: SelectOptionTextField(
options: state.options,
selectedOptionMap: optionMap,
distanceToText: _editorPanelWidth * 0.7,
maxLength: 30,
tagController: _tagController,
onClick: () => popoverMutex.close(),
newText: (text) {

6
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
View File

@ -6,6 +6,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/select_option.pb.dart';
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:textfield_tags/textfield_tags.dart';
@ -20,6 +21,7 @@ class SelectOptionTextField extends StatefulWidget {
final Function(String) onSubmitted;
final Function(String) newText;
final VoidCallback? onClick;
final int? maxLength;
const SelectOptionTextField({
required this.options,
@ -29,6 +31,7 @@ class SelectOptionTextField extends StatefulWidget {
required this.onSubmitted,
required this.newText,
this.onClick,
this.maxLength,
TextEditingController? textController,
FocusNode? focusNode,
Key? key,
@ -93,6 +96,9 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
}
},
maxLines: 1,
maxLength: widget.maxLength,
maxLengthEnforcement:
MaxLengthEnforcement.truncateAfterCompositionEnds,
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(

7
frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
View File

@ -9,6 +9,7 @@ class InputTextField extends StatefulWidget {
final void Function() onCanceled;
final bool autoClearWhenDone;
final String text;
final int? maxLength;
const InputTextField({
required this.text,
@ -16,6 +17,7 @@ class InputTextField extends StatefulWidget {
required this.onCanceled,
this.onChanged,
this.autoClearWhenDone = false,
this.maxLength,
Key? key,
}) : super(key: key);
@ -41,11 +43,14 @@ class _InputTextFieldState extends State<InputTextField> {
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final height = widget.maxLength == null ? 36.0 : 56.0;
return RoundedInputField(
controller: _controller,
focusNode: _focusNode,
autoFocus: true,
height: 36,
height: height,
maxLength: widget.maxLength,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
normalBorderColor: theme.shader4,
focusBorderColor: theme.main1,

1
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart
View File

@ -256,6 +256,7 @@ class _CreateOptionTextField extends StatelessWidget {
final text = state.newOptionName.foldRight("", (a, previous) => a);
return InputTextField(
autoClearWhenDone: true,
maxLength: 30,
text: text,
onCanceled: () {
context

1
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
View File

@ -106,6 +106,7 @@ class _OptionNameTextField extends StatelessWidget {
Widget build(BuildContext context) {
return InputTextField(
text: name,
maxLength: 30,
onCanceled: () {},
onDone: (optionName) {
if (name != optionName) {

6
frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart
View File

@ -2,6 +2,7 @@ import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/widget/rounded_button.dart';
import 'package:flutter/material.dart';
import 'package:flowy_infra/time/duration.dart';
import 'package:flutter/services.dart';
class RoundedInputField extends StatefulWidget {
final String? hintText;
@ -24,6 +25,7 @@ class RoundedInputField extends StatefulWidget {
final FocusNode? focusNode;
final TextEditingController? controller;
final bool autoFocus;
final int? maxLength;
const RoundedInputField({
Key? key,
@ -47,6 +49,7 @@ class RoundedInputField extends StatefulWidget {
this.focusNode,
this.controller,
this.autoFocus = false,
this.maxLength,
}) : super(key: key);
@override
@ -89,6 +92,9 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
initialValue: widget.initialValue,
focusNode: widget.focusNode,
autofocus: widget.autoFocus,
maxLength: widget.maxLength,
maxLengthEnforcement:
MaxLengthEnforcement.truncateAfterCompositionEnds,
onChanged: (value) {
inputText = value;
if (widget.onChanged != null) {