From 5d7e585a891004a0e888ecef36285054f3dac311 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Wed, 18 Dec 2024 17:26:43 -0300 Subject: [PATCH] add properties to accordion --- .../lib/components/accordion_use_case.dart | 15 +++++-- .../src/components/accordion/accordion.dart | 5 +-- .../src/components/accordion/accordion.g.dart | 15 ------- .../components/accordion/accordion_style.dart | 24 +---------- .../accordion/accordion_widget.dart | 41 +++++++++---------- .../lib/src/themes/fortaleza/components.dart | 2 +- .../fortaleza/components/accordion_theme.dart | 5 --- 7 files changed, 34 insertions(+), 73 deletions(-) diff --git a/packages/remix/demo/lib/components/accordion_use_case.dart b/packages/remix/demo/lib/components/accordion_use_case.dart index 3717fb0ba..1afa7f688 100644 --- a/packages/remix/demo/lib/components/accordion_use_case.dart +++ b/packages/remix/demo/lib/components/accordion_use_case.dart @@ -1,4 +1,5 @@ import 'package:demo/addons/icon_data_knob.dart'; +import 'package:demo/helpers/use_case_state.dart'; import 'package:flutter/material.dart' as m; import 'package:flutter/widgets.dart'; import 'package:mix/mix.dart'; @@ -6,16 +7,21 @@ import 'package:remix/remix.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; +final _accordionKey = GlobalKey(); + @widgetbook.UseCase( name: 'Accordion Component', type: Accordion, ) Widget buildAccordionUseCase(BuildContext context) { + final knobState = WidgetbookState.of(context); + return Scaffold( body: Center( child: SizedBox( width: 300, child: Accordion( + key: _accordionKey, header: (spec) => AccordionHeaderSpecWidget( title: context.knobs.string( label: 'Title', @@ -33,11 +39,14 @@ Widget buildAccordionUseCase(BuildContext context) { ), spec: spec, ), - initiallyExpanded: true, - content: (spec) => TextSpecWidget( + expanded: + context.knobs.boolean(label: 'Expanded', initialValue: true), + content: const StyledText( 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s', - spec: spec, ), + onChanged: (value) { + knobState.updateKnob('Expanded', !value); + }, ), ), ), diff --git a/packages/remix/lib/src/components/accordion/accordion.dart b/packages/remix/lib/src/components/accordion/accordion.dart index db272e367..5f53bcbdb 100644 --- a/packages/remix/lib/src/components/accordion/accordion.dart +++ b/packages/remix/lib/src/components/accordion/accordion.dart @@ -20,7 +20,6 @@ base class AccordionSpec extends Spec with _$AccordionSpec { final AccordionHeaderSpec header; final BoxSpec contentContainer; - final TextSpec textContent; /// {@macro accordion_spec_of} static const of = _$AccordionSpec.of; @@ -31,10 +30,8 @@ base class AccordionSpec extends Spec with _$AccordionSpec { AccordionHeaderSpec? header, FlexBoxSpec? container, BoxSpec? contentContainer, - TextSpec? textContent, super.animated, }) : container = container ?? const FlexBoxSpec(), header = header ?? const AccordionHeaderSpec(), - contentContainer = contentContainer ?? const BoxSpec(), - textContent = textContent ?? const TextSpec(); + contentContainer = contentContainer ?? const BoxSpec(); } diff --git a/packages/remix/lib/src/components/accordion/accordion.g.dart b/packages/remix/lib/src/components/accordion/accordion.g.dart index 00e917355..ebcb638c3 100644 --- a/packages/remix/lib/src/components/accordion/accordion.g.dart +++ b/packages/remix/lib/src/components/accordion/accordion.g.dart @@ -36,14 +36,12 @@ mixin _$AccordionSpec on Spec { AccordionHeaderSpec? header, FlexBoxSpec? container, BoxSpec? contentContainer, - TextSpec? textContent, AnimatedData? animated, }) { return AccordionSpec( header: header ?? _$this.header, container: container ?? _$this.container, contentContainer: contentContainer ?? _$this.contentContainer, - textContent: textContent ?? _$this.textContent, animated: animated ?? _$this.animated, ); } @@ -61,7 +59,6 @@ mixin _$AccordionSpec on Spec { /// /// - [FlexBoxSpec.lerp] for [container]. /// - [BoxSpec.lerp] for [contentContainer]. - /// - [TextSpec.lerp] for [textContent]. /// For [header] and [animated], the interpolation is performed using a step function. /// If [t] is less than 0.5, the value from the current [AccordionSpec] is used. Otherwise, the value @@ -77,7 +74,6 @@ mixin _$AccordionSpec on Spec { header: _$this.header.lerp(other.header, t), container: _$this.container.lerp(other.container, t), contentContainer: _$this.contentContainer.lerp(other.contentContainer, t), - textContent: _$this.textContent.lerp(other.textContent, t), animated: t < 0.5 ? _$this.animated : other.animated, ); } @@ -91,7 +87,6 @@ mixin _$AccordionSpec on Spec { _$this.header, _$this.container, _$this.contentContainer, - _$this.textContent, _$this.animated, ]; @@ -109,13 +104,11 @@ base class AccordionSpecAttribute extends SpecAttribute { final AccordionHeaderSpecAttribute? header; final FlexBoxSpecAttribute? container; final BoxSpecAttribute? contentContainer; - final TextSpecAttribute? textContent; const AccordionSpecAttribute({ this.header, this.container, this.contentContainer, - this.textContent, super.animated, }); @@ -133,7 +126,6 @@ base class AccordionSpecAttribute extends SpecAttribute { header: header?.resolve(mix), container: container?.resolve(mix), contentContainer: contentContainer?.resolve(mix), - textContent: textContent?.resolve(mix), animated: animated?.resolve(mix) ?? mix.animation, ); } @@ -155,7 +147,6 @@ base class AccordionSpecAttribute extends SpecAttribute { container: container?.merge(other.container) ?? other.container, contentContainer: contentContainer?.merge(other.contentContainer) ?? other.contentContainer, - textContent: textContent?.merge(other.textContent) ?? other.textContent, animated: animated?.merge(other.animated) ?? other.animated, ); } @@ -169,7 +160,6 @@ base class AccordionSpecAttribute extends SpecAttribute { header, container, contentContainer, - textContent, animated, ]; } @@ -190,9 +180,6 @@ class AccordionSpecUtility late final contentContainer = BoxSpecUtility((v) => only(contentContainer: v)); - /// Utility for defining [AccordionSpecAttribute.textContent] - late final textContent = TextSpecUtility((v) => only(textContent: v)); - /// Utility for defining [AccordionSpecAttribute.animated] late final animated = AnimatedUtility((v) => only(animated: v)); @@ -210,14 +197,12 @@ class AccordionSpecUtility AccordionHeaderSpecAttribute? header, FlexBoxSpecAttribute? container, BoxSpecAttribute? contentContainer, - TextSpecAttribute? textContent, AnimatedDataDto? animated, }) { return builder(AccordionSpecAttribute( header: header, container: container, contentContainer: contentContainer, - textContent: textContent, animated: animated, )); } diff --git a/packages/remix/lib/src/components/accordion/accordion_style.dart b/packages/remix/lib/src/components/accordion/accordion_style.dart index cce240072..77c3beaae 100644 --- a/packages/remix/lib/src/components/accordion/accordion_style.dart +++ b/packages/remix/lib/src/components/accordion/accordion_style.dart @@ -14,22 +14,6 @@ class AccordionStyle extends SpecStyle { ..border.bottom.color.grey.shade400(), ]; - final contentStyle = [ - $.contentContainer.padding.bottom(16), - $.contentContainer.wrap.align( - alignment: Alignment.topCenter, - heightFactor: 0, - ), - spec.on.selected($.contentContainer.wrap.align(heightFactor: 1)), - ]; - - final textContainerStyle = [ - $.textContent.chain - ..style.fontSize(14) - ..style.height(1.4) - ..style.letterSpacing(0.2), - ]; - final headerStyle = [ $.header.container.chain ..flex.gap(6) @@ -49,12 +33,7 @@ class AccordionStyle extends SpecStyle { spec.on.selected($.header.trailingIcon.wrap.transform.rotate.d180()), ]; - return Style.create([ - ...flexContainerStyle, - ...contentStyle, - ...textContainerStyle, - ...headerStyle, - ]); + return Style.create([...flexContainerStyle, ...headerStyle]); } } @@ -70,7 +49,6 @@ class AccordionDarkStyle extends AccordionStyle { $.container.border.bottom.color.grey.shade700(), $.header.text.style.color.white(), $.header.trailingIcon.color.white(), - $.textContent.style.color.white(), ]); } } diff --git a/packages/remix/lib/src/components/accordion/accordion_widget.dart b/packages/remix/lib/src/components/accordion/accordion_widget.dart index d68f180c2..65cc09976 100644 --- a/packages/remix/lib/src/components/accordion/accordion_widget.dart +++ b/packages/remix/lib/src/components/accordion/accordion_widget.dart @@ -5,65 +5,57 @@ class Accordion extends StatefulWidget { super.key, required this.header, required this.content, + required this.onChanged, + this.expanded = false, this.variants = const [], - this.initiallyExpanded = false, this.style, }); final WidgetSpecBuilder header; - final WidgetSpecBuilder content; + final Widget content; final AccordionStyle? style; - final bool initiallyExpanded; + final bool expanded; final List variants; + final void Function(bool) onChanged; @override State createState() => _AccordionState(); } -class _AccordionState extends State with TickerProviderStateMixin { +class _AccordionState extends State { late MixWidgetStateController _controller; - late MixWidgetStateController _contentController; @override void initState() { super.initState(); - _controller = MixWidgetStateController() - ..selected = widget.initiallyExpanded; - _contentController = MixWidgetStateController() - ..selected = widget.initiallyExpanded; + _controller = MixWidgetStateController()..selected = widget.expanded; } void _handleTap() { _controller.selected = !_controller.selected; - _contentController.selected = !_contentController.selected; + widget.onChanged(widget.expanded); } @override void dispose() { _controller.dispose(); - _contentController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { - final style = widget.style ?? context.remix.components.accordion; + final Accordionstyle = widget.style ?? context.remix.components.accordion; final configuration = SpecConfiguration(context, AccordionSpecUtility.self); - final variantStyle = - style.makeStyle(configuration).applyVariants(widget.variants); + final style = + Accordionstyle.makeStyle(configuration).applyVariants(widget.variants); return RepaintBoundary( child: SpecBuilder( - controller: _contentController, - style: variantStyle, + style: style, builder: (context) { final spec = AccordionSpec.of(context); - final content = spec.contentContainer( - child: widget.content(spec.textContent), - ); - return spec.container( direction: Axis.vertical, children: [ @@ -71,7 +63,7 @@ class _AccordionState extends State with TickerProviderStateMixin { onPress: _handleTap, controller: _controller, child: SpecBuilder( - style: variantStyle, + style: style, builder: (context) { final spec = AccordionSpec.of(context); @@ -79,7 +71,12 @@ class _AccordionState extends State with TickerProviderStateMixin { }, ), ), - content, + AnimatedAlign( + alignment: Alignment.topCenter, + heightFactor: widget.expanded ? 1 : 0, + duration: const Duration(milliseconds: 200), + child: spec.contentContainer(child: widget.content), + ), ], ); }, diff --git a/packages/remix/lib/src/themes/fortaleza/components.dart b/packages/remix/lib/src/themes/fortaleza/components.dart index f131f0208..17357194a 100644 --- a/packages/remix/lib/src/themes/fortaleza/components.dart +++ b/packages/remix/lib/src/themes/fortaleza/components.dart @@ -9,7 +9,7 @@ import 'components/checkbox_theme.dart'; import 'components/chip_theme.dart'; import 'components/dialog_theme.dart'; import 'components/divider_theme.dart'; -import 'components/dropdown.dart'; +import 'components/dropdown_theme.dart'; import 'components/icon_button_theme.dart'; import 'components/menu_item_theme.dart'; import 'components/progress_theme.dart'; diff --git a/packages/remix/lib/src/themes/fortaleza/components/accordion_theme.dart b/packages/remix/lib/src/themes/fortaleza/components/accordion_theme.dart index b0134df22..94345f570 100644 --- a/packages/remix/lib/src/themes/fortaleza/components/accordion_theme.dart +++ b/packages/remix/lib/src/themes/fortaleza/components/accordion_theme.dart @@ -43,11 +43,6 @@ class FortalezaAccordionStyle extends AccordionStyle { ..animated.curve.spring(stiffness: 100) ..animated.duration(const Duration(milliseconds: 250)), - // Text Container - $.textContent.chain - ..style.color.$neutral(11) - ..style.fontWeight.w300(), - // Variants spec.on.selected($.contentContainer.border.top.style.solid()), spec.on.hover(