Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add properties to accordion
Browse files Browse the repository at this point in the history
tilucasoli committed Dec 18, 2024
1 parent 61f9e8b commit 5d7e585
Showing 7 changed files with 34 additions and 73 deletions.
15 changes: 12 additions & 3 deletions packages/remix/demo/lib/components/accordion_use_case.dart
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
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';
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);
},
),
),
),
5 changes: 1 addition & 4 deletions packages/remix/lib/src/components/accordion/accordion.dart
Original file line number Diff line number Diff line change
@@ -20,7 +20,6 @@ base class AccordionSpec extends Spec<AccordionSpec> 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<AccordionSpec> 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();
}
15 changes: 0 additions & 15 deletions packages/remix/lib/src/components/accordion/accordion.g.dart

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 1 addition & 23 deletions packages/remix/lib/src/components/accordion/accordion_style.dart
Original file line number Diff line number Diff line change
@@ -14,22 +14,6 @@ class AccordionStyle extends SpecStyle<AccordionSpecUtility> {
..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<AccordionSpecUtility> {
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(),
]);
}
}
41 changes: 19 additions & 22 deletions packages/remix/lib/src/components/accordion/accordion_widget.dart
Original file line number Diff line number Diff line change
@@ -5,81 +5,78 @@ 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<AccordionHeaderSpec> header;
final WidgetSpecBuilder<TextSpec> content;
final Widget content;
final AccordionStyle? style;
final bool initiallyExpanded;
final bool expanded;
final List<Variant> variants;
final void Function(bool) onChanged;

@override
State<Accordion> createState() => _AccordionState();
}

class _AccordionState extends State<Accordion> with TickerProviderStateMixin {
class _AccordionState extends State<Accordion> {
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: [
Pressable(
onPress: _handleTap,
controller: _controller,
child: SpecBuilder(
style: variantStyle,
style: style,
builder: (context) {
final spec = AccordionSpec.of(context);

return widget.header(spec.header);
},
),
),
content,
AnimatedAlign(
alignment: Alignment.topCenter,
heightFactor: widget.expanded ? 1 : 0,
duration: const Duration(milliseconds: 200),
child: spec.contentContainer(child: widget.content),
),
],
);
},
2 changes: 1 addition & 1 deletion packages/remix/lib/src/themes/fortaleza/components.dart
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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(

0 comments on commit 5d7e585

Please sign in to comment.