time_picker_template.dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'template.dart';

class TimePickerTemplate extends TokenTemplate {
  const TimePickerTemplate(super.blockName, super.fileName, super.tokens, {
    super.colorSchemePrefix = '_colors.',
    super.textThemePrefix = '_textTheme.'
  });

  static const String tokenGroup = 'md.comp.time-picker';
  static const String hourMinuteComponent = '$tokenGroup.time-selector';
  static const String dayPeriodComponent = '$tokenGroup.period-selector';
  static const String dialComponent = '$tokenGroup.clock-dial';
  static const String variant = '';

  @override
  String generate() => '''
// Generated version ${tokens["version"]}
class _${blockName}DefaultsM3 extends _TimePickerDefaults {
  _${blockName}DefaultsM3(this.context);

  final BuildContext context;

  late final ColorScheme _colors = Theme.of(context).colorScheme;
  late final TextTheme _textTheme = Theme.of(context).textTheme;

  @override
  Color get backgroundColor {
    return ${componentColor("$tokenGroup.container")};
  }

  @override
  ButtonStyle get cancelButtonStyle {
    return TextButton.styleFrom();
  }

  @override
  ButtonStyle get confirmButtonStyle {
    return TextButton.styleFrom();
  }

  @override
  BorderSide get dayPeriodBorderSide {
    return ${border('$dayPeriodComponent.outline')};
  }

  @override
  Color get dayPeriodColor {
    return MaterialStateColor.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return ${componentColor("$dayPeriodComponent.selected.container")};
      }
      // The unselected day period should match the overall picker dialog color.
      // Making it transparent enables that without being redundant and allows
      // the optional elevation overlay for dark mode to be visible.
      return Colors.transparent;
    });
  }

  @override
  OutlinedBorder get dayPeriodShape {
    return ${shape("$dayPeriodComponent.container")}.copyWith(side: dayPeriodBorderSide);
  }

  @override
  Size get dayPeriodPortraitSize {
    return ${size('$dayPeriodComponent.vertical.container')};
  }

  @override
  Size get dayPeriodLandscapeSize {
    return ${size('$dayPeriodComponent.horizontal.container')};
  }

  @override
  Size get dayPeriodInputSize {
    // Input size is eight pixels smaller than the portrait size in the spec,
    // but there's not token for it yet.
    return Size(dayPeriodPortraitSize.width, dayPeriodPortraitSize.height - 8);
  }

  @override
  Color get dayPeriodTextColor {
    return MaterialStateColor.resolveWith((Set<MaterialState> states) {
      return _dayPeriodForegroundColor.resolve(states);
    });
  }

  MaterialStateProperty<Color> get _dayPeriodForegroundColor {
    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
      Color? textColor;
      if (states.contains(MaterialState.selected)) {
        if (states.contains(MaterialState.pressed)) {
          textColor = ${componentColor("$dayPeriodComponent.selected.pressed.label-text")};
        } else {
          // not pressed
          if (states.contains(MaterialState.focused)) {
            textColor = ${componentColor("$dayPeriodComponent.selected.focus.label-text")};
          } else {
            // not focused
            if (states.contains(MaterialState.hovered)) {
              textColor = ${componentColor("$dayPeriodComponent.selected.hover.label-text")};
            }
          }
        }
      } else {
        // unselected
        if (states.contains(MaterialState.pressed)) {
          textColor = ${componentColor("$dayPeriodComponent.unselected.pressed.label-text")};
        } else {
          // not pressed
          if (states.contains(MaterialState.focused)) {
            textColor = ${componentColor("$dayPeriodComponent.unselected.focus.label-text")};
          } else {
            // not focused
            if (states.contains(MaterialState.hovered)) {
              textColor = ${componentColor("$dayPeriodComponent.unselected.hover.label-text")};
            }
          }
        }
      }
      return textColor ?? ${componentColor("$dayPeriodComponent.selected.label-text")};
    });
  }

  @override
  TextStyle get dayPeriodTextStyle {
    return ${textStyle("$dayPeriodComponent.label-text")}!.copyWith(color: dayPeriodTextColor);
  }

  @override
  Color get dialBackgroundColor {
    return ${componentColor(dialComponent)}.withOpacity(_colors.brightness == Brightness.dark ? 0.12 : 0.08);
  }

  @override
  Color get dialHandColor {
    return ${componentColor('$dialComponent.selector.handle.container')};
  }

  @override
  Size get dialSize {
    return ${size("$dialComponent.container")};
  }

  @override
  double get handWidth {
    return ${size("$dialComponent.selector.track.container")}.width;
  }

  @override
  double get dotRadius {
    return ${size("$dialComponent.selector.handle.container")}.width / 2;
  }

  @override
  double get centerRadius {
    return ${size("$dialComponent.selector.center.container")}.width / 2;
  }

  @override
  Color get dialTextColor {
    return MaterialStateColor.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return ${componentColor('$dialComponent.selected.label-text')};
      }
      return ${componentColor('$dialComponent.unselected.label-text')};
    });
  }

  @override
  TextStyle get dialTextStyle {
    return ${textStyle('$dialComponent.label-text')}!;
  }

  @override
  double get elevation {
    return ${elevation("$tokenGroup.container")};
  }

  @override
  Color get entryModeIconColor {
    return _colors.onSurface;
  }

  @override
  TextStyle get helpTextStyle {
    return MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
      final TextStyle textStyle = ${textStyle('$tokenGroup.headline')}!;
      return textStyle.copyWith(color: ${componentColor('$tokenGroup.headline')});
    });
  }

  @override
  EdgeInsetsGeometry get padding {
    return const EdgeInsets.all(24);
  }

  @override
  Color get hourMinuteColor {
    return MaterialStateColor.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        Color overlayColor = ${componentColor('$hourMinuteComponent.selected.container')};
        if (states.contains(MaterialState.pressed)) {
          overlayColor = ${componentColor('$hourMinuteComponent.selected.pressed.state-layer')};
        } else if (states.contains(MaterialState.focused)) {
          const double focusOpacity = ${opacity('$hourMinuteComponent.focus.state-layer.opacity')};
          overlayColor = ${componentColor('$hourMinuteComponent.selected.focus.state-layer')}.withOpacity(focusOpacity);
        } else if (states.contains(MaterialState.hovered)) {
          const double hoverOpacity = ${opacity('$hourMinuteComponent.hover.state-layer.opacity')};
          overlayColor = ${componentColor('$hourMinuteComponent.selected.hover.state-layer')}.withOpacity(hoverOpacity);
        }
        return Color.alphaBlend(overlayColor, ${componentColor('$hourMinuteComponent.selected.container')});
      } else {
        Color overlayColor = ${componentColor('$hourMinuteComponent.unselected.container')};
        if (states.contains(MaterialState.pressed)) {
          overlayColor = ${componentColor('$hourMinuteComponent.unselected.pressed.state-layer')};
        } else if (states.contains(MaterialState.focused)) {
          const double focusOpacity = ${opacity('$hourMinuteComponent.focus.state-layer.opacity')};
          overlayColor = ${componentColor('$hourMinuteComponent.unselected.focus.state-layer')}.withOpacity(focusOpacity);
        } else if (states.contains(MaterialState.hovered)) {
          const double hoverOpacity = ${opacity('$hourMinuteComponent.hover.state-layer.opacity')};
          overlayColor = ${componentColor('$hourMinuteComponent.unselected.hover.state-layer')}.withOpacity(hoverOpacity);
        }
        return Color.alphaBlend(overlayColor, ${componentColor('$hourMinuteComponent.unselected.container')});
      }
    });
  }

  @override
  ShapeBorder get hourMinuteShape {
    return ${shape('$hourMinuteComponent.container')};
  }

  @override
  Size get hourMinuteSize {
    return ${size('$hourMinuteComponent.container')};
  }

  @override
  Size get hourMinuteSize24Hour {
    return Size(${size('$hourMinuteComponent.24h-vertical.container')}.width, hourMinuteSize.height);
  }

  @override
  Size get hourMinuteInputSize {
    // Input size is eight pixels smaller than the regular size in the spec, but
    // there's not token for it yet.
    return Size(hourMinuteSize.width, hourMinuteSize.height - 8);
  }

  @override
  Size get hourMinuteInputSize24Hour {
    // Input size is eight pixels smaller than the regular size in the spec, but
    // there's not token for it yet.
    return Size(hourMinuteSize24Hour.width, hourMinuteSize24Hour.height - 8);
  }

  @override
  Color get hourMinuteTextColor {
    return MaterialStateColor.resolveWith((Set<MaterialState> states) {
      return _hourMinuteTextColor.resolve(states);
    });
  }

  MaterialStateProperty<Color> get _hourMinuteTextColor {
    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        if (states.contains(MaterialState.pressed)) {
          return ${componentColor("$hourMinuteComponent.selected.pressed.label-text")};
        }
        if (states.contains(MaterialState.focused)) {
          return ${componentColor("$hourMinuteComponent.selected.focus.label-text")};
        }
        if (states.contains(MaterialState.hovered)) {
          return ${componentColor("$hourMinuteComponent.selected.hover.label-text")};
        }
        return ${componentColor("$hourMinuteComponent.selected.label-text")};
      } else {
        // unselected
        if (states.contains(MaterialState.pressed)) {
          return ${componentColor("$hourMinuteComponent.unselected.pressed.label-text")};
        }
        if (states.contains(MaterialState.focused)) {
          return ${componentColor("$hourMinuteComponent.unselected.focus.label-text")};
        }
        if (states.contains(MaterialState.hovered)) {
          return ${componentColor("$hourMinuteComponent.unselected.hover.label-text")};
        }
        return ${componentColor("$hourMinuteComponent.unselected.label-text")};
      }
    });
  }

  @override
  TextStyle get hourMinuteTextStyle {
    return MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
      return ${textStyle('$hourMinuteComponent.label-text')}!.copyWith(color: _hourMinuteTextColor.resolve(states));
    });
  }

  @override
  InputDecorationTheme get inputDecorationTheme {
    // This is NOT correct, but there's no token for
    // 'time-input.container.shape', so this is using the radius from the shape
    // for the hour/minute selector. It's a BorderRadiusGeometry, so we have to
    // resolve it before we can use it.
    final BorderRadius selectorRadius = ${shape('$hourMinuteComponent.container')}
      .borderRadius
      .resolve(Directionality.of(context));
    return InputDecorationTheme(
      contentPadding: EdgeInsets.zero,
      filled: true,
      // This should be derived from a token, but there isn't one for 'time-input'.
      fillColor: hourMinuteColor,
      // This should be derived from a token, but there isn't one for 'time-input'.
      focusColor: _colors.primaryContainer,
      enabledBorder: OutlineInputBorder(
        borderRadius: selectorRadius,
        borderSide: const BorderSide(color: Colors.transparent),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: selectorRadius,
        borderSide: BorderSide(color: _colors.error, width: 2),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: selectorRadius,
        borderSide: BorderSide(color: _colors.primary, width: 2),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: selectorRadius,
        borderSide: BorderSide(color: _colors.error, width: 2),
      ),
      hintStyle: hourMinuteTextStyle.copyWith(color: _colors.onSurface.withOpacity(0.36)),
      // Prevent the error text from appearing.
      // TODO(rami-a): Remove this workaround once
      // https://github.com/flutter/flutter/issues/54104
      // is fixed.
      errorStyle: const TextStyle(fontSize: 0, height: 0),
    );
  }

  @override
  ShapeBorder get shape {
    return ${shape("$tokenGroup.container")};
  }
}
''';
}