frus-widgets 0.4.0

frus — declarative widget tree
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
//! [`SearchAnchor`]: the view a [`SearchBar`](crate::SearchBar) opens.
//!
//! Milestone 469 built the bar and stopped there, which is where the reference also stops
//! if you only reach for `SearchBar` — a bar alone is a useful thing. This is the other
//! half: press the bar and a surface grows out of it holding the same query, a rule, and
//! whatever the application thinks you meant.
//!
//! ```ignore
//! SearchAnchor::new(app.searching, &app.query)
//!     .hint("Search mail")
//!     .on_open(Msg::OpenSearch)
//!     .on_close(Msg::CloseSearch)
//!     .on_input(Msg::Query)
//!     .on_clear(Msg::Query(String::new()))
//!     .suggestion(ListTile::new("flight to lisbon").on_tap(Msg::Pick(0)))
//!     .suggestion(ListTile::new("flights from lisbon").on_tap(Msg::Pick(1)))
//! ```
//!
//! ## It is open because the application says so
//!
//! The reference pushes a `PopupRoute` and keeps `isOpen` inside a controller, because a
//! Flutter widget owns its state. Nothing here owns state: the application holds `open` in
//! its model and gets a message back, the way [`Drawer`](crate::Drawer) has since milestone
//! 46 and [`ExpansionTile`](crate::ExpansionTile) since 463. So `on_open` is what the bar
//! emits when pressed, and `on_close` is what the back arrow and the scrim emit — and a
//! test that wants the view open just says so.
//!
//! ## Two views, one widget
//!
//! On a phone the view **is** the screen; on a desktop it hangs under the bar. The
//! reference decides by platform (`search_anchor.dart:554`) and so does this, at compile
//! time, with [`full_screen`](SearchAnchor::full_screen) to say otherwise. The difference
//! is four things and no more: how big it is, whether its corners are rounded, how tall its
//! header is, and whether anything shows around it.

use std::cell::{OnceCell, RefCell};
use std::rc::Rc;

use frus_core::{BorderRadius, BorderSide, Color, Insets, Rect, Scene, ShapeBorder, TextStyle};
use frus_layout::{Dimension, FlexDirection, Style};

use crate::flex::Flex;
use crate::interaction::Status;
use crate::portal::Placement;
use crate::theme::Theme;
use crate::widget::Widget;
use crate::widgettheme::resolve_shape;

/// The floating view's corner (`search_anchor.dart:1949`). A full-screen one is square:
/// it has no corners to round, being the screen.
pub const SEARCH_VIEW_RADIUS: f32 = 28.0;
/// The narrowest a floating view goes, and the shortest (`search_anchor.dart:1958`).
pub const SEARCH_VIEW_MIN_WIDTH: f32 = 360.0;
/// See [`SEARCH_VIEW_MIN_WIDTH`].
pub const SEARCH_VIEW_MIN_HEIGHT: f32 = 240.0;
/// The header's height once the view is the screen (`search_anchor.dart:1933`).
///
/// Sixteen more than a bar's 56, and the sixteen is the point: a header that is the top of
/// a screen has a thumb reaching past it and needs the room, where one hanging under a bar
/// on a desktop does not.
pub const SEARCH_VIEW_FULL_SCREEN_HEADER: f32 = 72.0;
/// How far off the page the view sits (`search_anchor.dart:1939`).
const ELEVATION: f32 = 6.0;
/// The room either side of the header's contents (`search_anchor.dart:1961`).
const BAR_PADDING_X: f32 = 8.0;

/// **Whether a search view takes the whole screen**, decided the way the reference decides
/// it (`search_anchor.dart:554`): by the theme's platform — iOS, Android and Fuchsia
/// open the screen; macOS, Linux and Windows do not (milestone 615).
///
/// A phone opens the screen; a desktop hangs a panel under the bar. It is a question about
/// how much room there is and how a search is got out of, not about taste — but
/// [`SearchAnchor::full_screen`] overrules it, because a tablet in landscape is a phone
/// that should be answering *no*.
const fn full_screen_by_default(platform: frus_core::TargetPlatform) -> bool {
    use frus_core::TargetPlatform as P;
    match platform {
        P::Ios | P::Android | P::Fuchsia => true,
        P::MacOs | P::Linux | P::Windows => false,
    }
}

/// A search bar and the view it opens.
pub struct SearchAnchor<Msg = crate::callback::Callback> {
    open: bool,
    query: String,
    hint: Option<String>,
    view_hint: Option<String>,
    anchor: RefCell<Option<Box<dyn Widget<Msg>>>>,
    suggestions: RefCell<Vec<Box<dyn Widget<Msg>>>>,
    view_leading: RefCell<Option<Box<dyn Widget<Msg>>>>,
    view_trailing: RefCell<Vec<Box<dyn Widget<Msg>>>>,
    on_open: Option<Msg>,
    on_close: Option<Msg>,
    on_clear: Option<Msg>,
    on_input: Option<Rc<dyn Fn(String) -> Msg>>,
    on_submit: Option<Msg>,
    enabled: bool,
    full_screen: Option<bool>,
    background: Option<Color>,
    elevation: Option<f32>,
    shape: Option<ShapeBorder>,
    radius: Option<BorderRadius>,
    side: Option<BorderSide>,
    divider_color: Option<Color>,
    header_height: Option<f32>,
    header_text_style: Option<TextStyle>,
    header_hint_style: Option<TextStyle>,
    min_width: Option<f32>,
    min_height: Option<f32>,
    bar_padding: Option<Insets>,
    built: OnceCell<Vec<Box<dyn Widget<Msg>>>>,
}

impl<Msg: Clone + 'static> SearchAnchor<Msg> {
    /// An anchor showing `query`, with its view open or shut.
    pub fn new(open: bool, query: impl Into<String>) -> Self {
        Self {
            open,
            query: query.into(),
            hint: None,
            view_hint: None,
            anchor: RefCell::new(None),
            suggestions: RefCell::new(Vec::new()),
            view_leading: RefCell::new(None),
            view_trailing: RefCell::new(Vec::new()),
            on_open: None,
            on_close: None,
            on_clear: None,
            on_input: None,
            on_submit: None,
            enabled: true,
            full_screen: None,
            background: None,
            elevation: None,
            shape: None,
            radius: None,
            side: None,
            divider_color: None,
            header_height: None,
            header_text_style: None,
            header_hint_style: None,
            min_width: None,
            min_height: None,
            bar_padding: None,
            built: OnceCell::new(),
        }
    }

    /// What the **bar** says while it is empty.
    pub fn hint(mut self, hint: impl Into<String>) -> Self {
        self.hint = Some(hint.into());
        self.rebuild();
        self
    }

    /// What the **view's header** says, when it differs. Unset, the bar's — a view that
    /// renamed the thing being searched the moment it opened would be answering a
    /// different question.
    pub fn view_hint(mut self, hint: impl Into<String>) -> Self {
        self.view_hint = Some(hint.into());
        self.rebuild();
        self
    }

    /// The widget in the flow, in place of the [`SearchBar`](crate::SearchBar) this builds
    /// by default — the reference's `builder` (`search_anchor.dart:151`). A bar is the
    /// usual anchor and not the only one: an icon button in an app bar is a search anchor
    /// too.
    pub fn anchor(self, anchor: impl Widget<Msg> + 'static) -> Self {
        self.anchor_boxed(Box::new(anchor))
    }

    /// [`Self::anchor`], for a widget already boxed.
    pub fn anchor_boxed(mut self, anchor: Box<dyn Widget<Msg>>) -> Self {
        *self.anchor.borrow_mut() = Some(anchor);
        self.rebuild();
        self
    }

    /// Adds a row to the view — the reference's `suggestionsBuilder`
    /// (`search_anchor.dart:152`), which is a builder there because the widget owns the
    /// query and has to re-ask on every keystroke. Here the application owns it, so these
    /// are simply what it decided the query meant.
    pub fn suggestion(self, suggestion: impl Widget<Msg> + 'static) -> Self {
        self.suggestion_boxed(Box::new(suggestion))
    }

    /// [`Self::suggestion`], for a widget already boxed.
    pub fn suggestion_boxed(mut self, suggestion: Box<dyn Widget<Msg>>) -> Self {
        self.suggestions.borrow_mut().push(suggestion);
        self.rebuild();
        self
    }

    /// The widget before the view's field, in place of the back arrow it builds by
    /// default (`search_anchor.dart:1040`).
    pub fn view_leading(self, leading: impl Widget<Msg> + 'static) -> Self {
        self.view_leading_boxed(Box::new(leading))
    }

    /// [`Self::view_leading`], for a widget already boxed.
    pub fn view_leading_boxed(mut self, leading: Box<dyn Widget<Msg>>) -> Self {
        *self.view_leading.borrow_mut() = Some(leading);
        self.rebuild();
        self
    }

    /// Adds a widget after the view's field, in place of the clear cross it builds by
    /// default.
    pub fn view_trailing(self, trailing: impl Widget<Msg> + 'static) -> Self {
        self.view_trailing_boxed(Box::new(trailing))
    }

    /// [`Self::view_trailing`], for a widget already boxed.
    pub fn view_trailing_boxed(mut self, trailing: Box<dyn Widget<Msg>>) -> Self {
        self.view_trailing.borrow_mut().push(trailing);
        self.rebuild();
        self
    }

    /// What the bar emits when it is pressed. Without it the anchor opens nothing, which
    /// is a bar and not an anchor.
    pub fn on_open(mut self, message: impl Into<Msg>) -> Self {
        self.on_open = Some(message.into());
        self.rebuild();
        self
    }

    /// What the back arrow and the scrim emit.
    pub fn on_close(mut self, message: impl Into<Msg>) -> Self {
        self.on_close = Some(message.into());
        self.rebuild();
        self
    }

    /// What the clear cross emits. **The cross only exists when there is something to
    /// clear** (`search_anchor.dart:1048`) — and only when there is somewhere for it to
    /// say so.
    pub fn on_clear(mut self, message: impl Into<Msg>) -> Self {
        self.on_clear = Some(message.into());
        self.rebuild();
        self
    }

    /// What the view's field emits on every keystroke.
    pub fn on_input<R: crate::callback::IntoMsg<Msg>>(
        mut self,
        on_input: impl Fn(String) -> R + 'static,
    ) -> Self {
        self.on_input = Some(Rc::new(crate::callback::handler1(on_input)));
        self.rebuild();
        self
    }

    /// What it emits when the search is confirmed.
    pub fn on_submit(mut self, message: impl Into<Msg>) -> Self {
        self.on_submit = Some(message.into());
        self.rebuild();
        self
    }

    /// Whether the anchor can be used at all.
    pub fn enabled(mut self, enabled: bool) -> Self {
        self.enabled = enabled;
        self.rebuild();
        self
    }

    /// Whether the view takes the whole screen.
    ///
    /// Unset, the platform decides, the way the reference decides it
    /// (`search_anchor.dart:554`): a phone opens the screen, a desktop hangs a panel under
    /// the bar. It is a question about how much room there is and how a search is got out
    /// of, not about taste — but a tablet in landscape is a phone that should be answering
    /// *no*, which is what this is for.
    pub fn full_screen(mut self, full_screen: bool) -> Self {
        self.full_screen = Some(full_screen);
        self.rebuild();
        self
    }

    /// The view's fill. Unset, the scheme's `surface_container_high`
    /// (`search_anchor.dart:1936`) — the same rung the bar takes, so the one grows out of
    /// the other rather than changing colour on the way.
    pub fn view_background_color(mut self, color: Color) -> Self {
        self.background = Some(color);
        self.rebuild();
        self
    }

    /// How far off the page the view sits. Unset, `6`.
    pub fn view_elevation(mut self, elevation: f32) -> Self {
        self.elevation = Some(elevation);
        self
    }

    /// The view's shape. Unset, corners of [`SEARCH_VIEW_RADIUS`] floating and square
    /// full-screen.
    pub fn view_shape(mut self, shape: ShapeBorder) -> Self {
        self.shape = Some(shape);
        self
    }

    /// Its corners, for the ordinary case. See [`Self::view_shape`].
    pub fn view_radius(mut self, radius: impl Into<BorderRadius>) -> Self {
        self.radius = Some(radius.into());
        self
    }

    /// An outline around it. Unset, none (`search_anchor.dart:1944`).
    pub fn view_side(mut self, width: f32, color: Color) -> Self {
        self.side = Some(BorderSide { width, color });
        self
    }

    /// The rule under the header. Unset, the scheme's `outline`
    /// (`search_anchor.dart:1967`).
    pub fn divider_color(mut self, color: Color) -> Self {
        self.divider_color = Some(color);
        self.rebuild();
        self
    }

    /// The header's height. Unset, [`SEARCH_VIEW_FULL_SCREEN_HEADER`] full-screen and the
    /// bar's own height floating.
    pub fn header_height(mut self, height: f32) -> Self {
        self.header_height = Some(height);
        self.rebuild();
        self
    }

    /// The header's type. Unset, `bodyLarge` in `on_surface`.
    pub fn header_text_style(mut self, style: TextStyle) -> Self {
        self.header_text_style = Some(style);
        self.rebuild();
        self
    }

    /// The header hint's type. Unset, `bodyLarge` in `on_surface_variant`.
    pub fn header_hint_style(mut self, style: TextStyle) -> Self {
        self.header_hint_style = Some(style);
        self.rebuild();
        self
    }

    /// The narrowest the view goes. Unset, [`SEARCH_VIEW_MIN_WIDTH`].
    pub fn view_min_width(mut self, width: f32) -> Self {
        self.min_width = Some(width);
        self.rebuild();
        self
    }

    /// The shortest. Unset, [`SEARCH_VIEW_MIN_HEIGHT`].
    pub fn view_min_height(mut self, height: f32) -> Self {
        self.min_height = Some(height);
        self.rebuild();
        self
    }

    /// The room either side of the header's contents. Unset, `8`.
    pub fn view_bar_padding(mut self, padding: Insets) -> Self {
        self.bar_padding = Some(padding);
        self.rebuild();
        self
    }

    fn rebuild(&mut self) {
        self.built.take();
    }

    /// Whether this view is the screen.
    fn is_full_screen(&self, theme: &Theme) -> bool {
        self.full_screen
            .unwrap_or(full_screen_by_default(theme.platform))
    }

    /// The view's shape, resolved. **A full-screen view has no corners to round**: it is
    /// the screen, and a rounded screen is a rounded rectangle with the wallpaper showing
    /// through the corners (`search_anchor.dart:1947`).
    fn view_outline(&self, theme: &Theme) -> ShapeBorder {
        let t = &theme.widgets.search_view;
        let shape = resolve_shape(
            self.shape,
            t.shape,
            self.radius.or(t.radius),
            if self.is_full_screen(theme) {
                ShapeBorder::rounded(BorderRadius::ZERO)
            } else {
                ShapeBorder::rounded(BorderRadius::uniform(SEARCH_VIEW_RADIUS))
            },
        );
        match self.side.or(t.side) {
            Some(side) => shape.with_side(side),
            None => shape,
        }
    }

    /// The header's height, resolved.
    fn header(&self, theme: &Theme) -> f32 {
        self.header_height
            .or(theme.widgets.search_view.header_height)
            .unwrap_or(if self.is_full_screen(theme) {
                SEARCH_VIEW_FULL_SCREEN_HEADER
            } else {
                crate::SEARCH_BAR_HEIGHT
            })
    }

    /// The bar in the flow: the caller's, or one this builds.
    fn build_anchor(&self) -> Box<dyn Widget<Msg>> {
        if let Some(anchor) = self.anchor.borrow_mut().take() {
            return anchor;
        }
        let mut bar = crate::SearchBar::<Msg>::new(self.query.clone())
            .enabled(self.enabled)
            // **The bar an anchor builds does not take typing.** Pressing it opens the
            // view, and the view is where the words are entered — a bar that took both
            // would have two fields holding one query, and the reference's own anchor bar
            // is a tap target for exactly this reason (`search_anchor.dart:577`).
            .read_only(true);
        if let Some(hint) = &self.hint {
            bar = bar.hint(hint.clone());
        }
        if let Some(message) = &self.on_open {
            bar = bar.on_tap(message.clone());
        }
        Box::new(bar)
    }

    /// The view's header: the same field again, on the view's own surface.
    fn build_header(&self, theme: &Theme) -> Box<dyn Widget<Msg>> {
        let words = crate::localizations::of();
        let room = self
            .bar_padding
            .or(theme.widgets.search_view.bar_padding)
            .unwrap_or(Insets::new(0.0, BAR_PADDING_X, 0.0, BAR_PADDING_X));
        let mut header = crate::SearchBar::<Msg>::new(self.query.clone())
            // **Transparent and flat.** The view is already a raised surface; a raised
            // pill inside it would be a second one, with its own shadow falling on the
            // suggestions. The reference says the same three things
            // (`search_anchor.dart:1163`).
            .background_color(Color::TRANSPARENT)
            .elevation(0.0)
            .min_width(0.0)
            .height(self.header(theme))
            .padding(room);
        if let Some(hint) = self.view_hint.as_ref().or(self.hint.as_ref()) {
            header = header.hint(hint.clone());
        }
        if let Some(style) = self
            .header_text_style
            .or(theme.widgets.search_view.header_text_style)
        {
            header = header.text_style(style);
        }
        if let Some(style) = self
            .header_hint_style
            .or(theme.widgets.search_view.header_hint_style)
        {
            header = header.hint_style(style);
        }
        header = match self.view_leading.borrow_mut().take() {
            Some(leading) => header.leading_boxed(leading),
            None => {
                let mut back = crate::BackButton::<Msg>::new().icon_size(20.0);
                if let Some(message) = &self.on_close {
                    back = back.on_press(message.clone());
                }
                header.leading(back)
            }
        };
        let told = std::mem::take(&mut *self.view_trailing.borrow_mut());
        if told.is_empty() {
            // **A cross with nothing to clear is a cross that lies.** It appears with the
            // first character and goes when the last one does (`search_anchor.dart:1048`).
            if !self.query.is_empty() {
                if let Some(message) = &self.on_clear {
                    header = header.trailing(
                        crate::IconButton::new(crate::Icons::CLOSE)
                            .icon_size(20.0)
                            .label(words.clear_button_label())
                            .on_press(message.clone()),
                    );
                }
            }
        } else {
            for trailing in told {
                header = header.trailing_boxed(trailing);
            }
        }
        Box::new(header)
    }

    /// The view: the header, the rule, the suggestions.
    fn build_view(&self, theme: &Theme) -> Box<dyn Widget<Msg>> {
        let t = &theme.widgets.search_view;
        let full = self.is_full_screen(theme);
        let screen = crate::MediaQuery::of().size;

        // **The column fills the view, and the list fills the column.** Two flex factors
        // for one idea, and both are needed: the view has a floor of 240 that its content
        // does not reach, so a column sized by its content leaves the list nothing to grow
        // into and a scroll view with nothing to grow into collapses to nothing and clips
        // everything in it. The picture was a view with a header, a rule, and a blank.
        let mut column = Flex::<Msg>::column()
            .flex(1.0)
            .child_boxed(self.build_header(theme));
        column = column.child(
            crate::Divider::new().height(1.0).color(
                self.divider_color
                    .or(t.divider_color)
                    .unwrap_or(theme.scheme.outline),
            ),
        );
        let mut list = Flex::<Msg>::column();
        for suggestion in std::mem::take(&mut *self.suggestions.borrow_mut()) {
            list = list.child_boxed(suggestion);
        }
        column = column.child(
            crate::SingleChildScrollView::<Msg>::new()
                .flex(1.0)
                .child(list),
        );

        Box::new(SearchView {
            children: vec![Box::new(column)],
            full,
            screen: (screen.width, screen.height),
            min_width: self
                .min_width
                .or(t.min_width)
                .unwrap_or(SEARCH_VIEW_MIN_WIDTH),
            min_height: self
                .min_height
                .or(t.min_height)
                .unwrap_or(SEARCH_VIEW_MIN_HEIGHT),
            background: self
                .background
                .or(t.background_color)
                .unwrap_or(theme.scheme.surface_container_high),
            elevation: self.elevation.or(t.elevation).unwrap_or(ELEVATION),
            shape: self.view_outline(theme),
        })
    }

    /// The whole thing: the anchor, and the view over it while it is open.
    fn assemble(&self, theme: &Theme) -> Vec<Box<dyn Widget<Msg>>> {
        let anchor = self.build_anchor();
        let mut portal = crate::OverlayPortal::<Msg>::new_boxed(anchor);
        if self.open && self.enabled {
            // **Where the view goes.** Under the bar on a desktop, over everything on a
            // phone — the second one is `Center` and not a placement of its own because a
            // view that is the size of the screen is centred on it by arithmetic.
            let placement = if self.is_full_screen(theme) {
                Placement::Center
            } else {
                Placement::Below
            };
            portal = portal.overlay_boxed(self.build_view(theme), placement);
            if let Some(message) = &self.on_close {
                portal = portal.dismiss(message.clone());
            }
        }
        vec![Box::new(portal)]
    }
}

impl<Msg: Clone + 'static> Widget<Msg> for SearchAnchor<Msg> {
    fn style(&self) -> Style {
        Style {
            flex_direction: FlexDirection::Column,
            ..Default::default()
        }
    }

    fn build_themed(&self, theme: &Theme) {
        let _ = self.built.set(self.assemble(theme));
    }

    fn children(&self) -> &[Box<dyn Widget<Msg>>] {
        self.built.get_or_init(|| self.assemble(&Theme::default()))
    }

    fn paint(&self, _bounds: Rect, _status: Status, _theme: &Theme, _scene: &mut Scene) {}

    fn on_click(&self) -> Option<Msg> {
        None
    }
}

/// The floating surface itself: a box of the right size, filled and raised.
///
/// Separate from [`SearchAnchor`] because the two answer different questions — the anchor
/// decides *whether* there is a view and what goes in it, and this decides how big it is
/// and what it looks like. It is private: an application asks the anchor.
struct SearchView<Msg> {
    children: Vec<Box<dyn Widget<Msg>>>,
    full: bool,
    /// The window, for a full-screen view to fill.
    screen: (f32, f32),
    min_width: f32,
    min_height: f32,
    background: Color,
    elevation: f32,
    shape: ShapeBorder,
}

impl<Msg: Clone> Widget<Msg> for SearchView<Msg> {
    /// **The screen, or a panel with a floor.**
    ///
    /// A full-screen view asks for the window exactly; a floating one asks for nothing in
    /// particular and refuses to go below 360 × 240. The reference expresses both as
    /// constraints on one box (`search_anchor.dart:1115`); here the two are the same two
    /// numbers said twice.
    fn style(&self) -> Style {
        if self.full {
            Style {
                width: Dimension::Length(self.screen.0),
                height: Dimension::Length(self.screen.1),
                flex_direction: FlexDirection::Column,
                ..Default::default()
            }
        } else {
            Style {
                min_width: Dimension::Length(self.min_width),
                min_height: Dimension::Length(self.min_height),
                flex_direction: FlexDirection::Column,
                ..Default::default()
            }
        }
    }

    fn children(&self) -> &[Box<dyn Widget<Msg>>] {
        &self.children
    }

    fn paint(&self, bounds: Rect, status: Status, theme: &Theme, scene: &mut Scene) {
        let o = status.opacity;
        if self.elevation > 0.0 {
            // The reference's shadows for this height (milestone 606).
            frus_core::paint_elevation(
                scene,
                bounds,
                // The corners of the shape it is drawn in: a view shown as a floating panel
                // is rounded.
                self.shape
                    .as_rounded(bounds)
                    .map(|(_, radius)| radius)
                    .unwrap_or(BorderRadius::ZERO),
                self.elevation,
                theme.scheme.shadow.fade(o),
            );
        }
        scene.draw_shape(bounds, self.shape, self.background.fade(o));
    }

    fn on_click(&self) -> Option<Msg> {
        None
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    /// **The theme's platform decides** (`search_anchor.dart:554`, milestone 615): the
    /// screen on iOS, Android and Fuchsia, a panel on the three desktops — whatever this
    /// test runs on — and `full_screen` overrules it either way.
    #[test]
    fn the_view_takes_the_screen_where_the_theme_s_platform_does() {
        use frus_core::TargetPlatform as P;
        for platform in P::ALL {
            let theme = Theme::default().with_platform(platform);
            let phone = matches!(platform, P::Ios | P::Android | P::Fuchsia);
            let anchor = SearchAnchor::<()>::new(true, "");
            assert_eq!(anchor.is_full_screen(&theme), phone, "{platform}");
            let told = SearchAnchor::<()>::new(true, "").full_screen(!phone);
            assert_eq!(told.is_full_screen(&theme), !phone, "told, {platform}");
        }
    }
    use frus_core::Primitive;

    #[derive(Clone, Debug, PartialEq)]
    enum Msg {
        Open,
        Close,
        Clear,
        Query(String),
    }

    fn anchor(open: bool, query: &str) -> SearchAnchor<Msg> {
        SearchAnchor::new(open, query)
            .hint("Search mail")
            .on_open(Msg::Open)
            .on_close(Msg::Close)
            .on_input(Msg::Query)
    }

    /// The portal the anchor built: `[bar]` shut, `[bar, view]` open.
    fn portal(anchor: &SearchAnchor<Msg>, theme: &Theme) -> Vec<String> {
        anchor.build_themed(theme);
        let built = Widget::<Msg>::children(anchor);
        assert_eq!(built.len(), 1, "one portal");
        built[0]
            .children()
            .iter()
            .map(|child| child.debug_name().to_string())
            .collect()
    }

    /// Every widget in a built subtree whose short type name matches.
    fn find<'a>(node: &'a dyn Widget<Msg>, name: &str, out: &mut Vec<&'a dyn Widget<Msg>>) {
        if node.debug_name() == name {
            out.push(node);
        }
        for child in node.children() {
            find(&**child, name, out);
        }
    }

    fn all<'a>(
        anchor: &'a SearchAnchor<Msg>,
        name: &str,
        theme: &Theme,
    ) -> Vec<&'a dyn Widget<Msg>> {
        anchor.build_themed(theme);
        let mut out = Vec::new();
        for child in Widget::<Msg>::children(anchor) {
            find(&**child, name, &mut out);
        }
        out
    }

    /// **It is open because the application says so.** No route, no controller: the model
    /// holds the flag and the widget draws what the flag says.
    #[test]
    fn the_view_is_there_when_the_application_says_it_is() {
        let theme = Theme::default();
        assert_eq!(portal(&anchor(false, ""), &theme), vec!["SearchBar"]);
        assert_eq!(
            portal(&anchor(true, ""), &theme),
            vec!["SearchBar", "SearchView"],
        );
        assert_eq!(
            portal(&anchor(true, "").enabled(false), &theme),
            vec!["SearchBar"],
            "and an anchor that cannot be used opens nothing, whatever the flag says"
        );
    }

    /// **The bar an anchor builds does not take typing.** Pressing it opens the view, and
    /// the view is where the words go — a bar that took both would be two fields holding
    /// one query.
    #[test]
    fn the_anchors_own_bar_is_a_tap_target() {
        let theme = Theme::default();
        let shut = anchor(false, "");
        let bars = all(&shut, "SearchBar", &theme);
        assert_eq!(bars.len(), 1);
        assert_eq!(
            bars[0].on_click(),
            Some(Msg::Open),
            "pressing it opens the view"
        );
    }

    /// **A cross with nothing to clear is a cross that lies.** It appears with the first
    /// character and goes when the last one does.
    #[test]
    fn the_clear_cross_comes_and_goes_with_the_query() {
        let theme = Theme::default();
        let empty = anchor(true, "").on_clear(Msg::Clear);
        assert_eq!(
            all(&empty, "IconButton", &theme).len(),
            0,
            "nothing to clear, nothing to press"
        );

        let typed = anchor(true, "lisbon").on_clear(Msg::Clear);
        let crosses = all(&typed, "IconButton", &theme);
        assert_eq!(crosses.len(), 1);
        assert_eq!(crosses[0].on_click(), Some(Msg::Clear));

        let nowhere = anchor(true, "lisbon");
        assert_eq!(
            all(&nowhere, "IconButton", &theme).len(),
            0,
            "and a cross with nowhere to say so is not offered either"
        );
    }

    /// **A full-screen view has no corners to round**: it is the screen, and a rounded
    /// screen is a rounded rectangle with the wallpaper showing through the corners.
    #[test]
    fn the_screen_is_square_and_the_panel_is_not() {
        let theme = Theme::default();
        assert_eq!(
            anchor(true, "").full_screen(true).view_outline(&theme),
            ShapeBorder::rounded(BorderRadius::ZERO)
        );
        assert_eq!(
            anchor(true, "").full_screen(false).view_outline(&theme),
            ShapeBorder::rounded(BorderRadius::uniform(SEARCH_VIEW_RADIUS))
        );
    }

    /// And a screen's header is taller than a panel's, by the sixteen a thumb needs.
    #[test]
    fn the_screens_header_is_the_taller_one() {
        let theme = Theme::default();
        assert_eq!(
            anchor(true, "").full_screen(true).header(&theme),
            SEARCH_VIEW_FULL_SCREEN_HEADER
        );
        assert_eq!(
            anchor(true, "").full_screen(false).header(&theme),
            crate::SEARCH_BAR_HEIGHT
        );
        assert_eq!(
            anchor(true, "").header_height(40.0).header(&theme),
            40.0,
            "and a caller still has the last word"
        );
    }

    /// The floating view refuses to go below the reference's floor; the full-screen one
    /// asks for the window exactly.
    #[test]
    fn the_panel_has_a_floor_and_the_screen_has_a_size() {
        let panel = SearchView::<Msg> {
            children: Vec::new(),
            full: false,
            screen: (390.0, 844.0),
            min_width: SEARCH_VIEW_MIN_WIDTH,
            min_height: SEARCH_VIEW_MIN_HEIGHT,
            background: Color::BLACK,
            elevation: 0.0,
            shape: ShapeBorder::stadium(),
        };
        let style = Widget::<Msg>::style(&panel);
        assert_eq!(style.min_width, Dimension::Length(SEARCH_VIEW_MIN_WIDTH));
        assert_eq!(style.min_height, Dimension::Length(SEARCH_VIEW_MIN_HEIGHT));
        assert_eq!(style.width, Dimension::Auto, "and no width of its own");

        let screen = SearchView::<Msg> {
            full: true,
            ..panel
        };
        let style = Widget::<Msg>::style(&screen);
        assert_eq!(style.width, Dimension::Length(390.0));
        assert_eq!(style.height, Dimension::Length(844.0));
    }

    /// **A bar with no surface has no state layer.** The view's header is a bar painted
    /// onto a surface that is already there; lerping from a transparent ground toward
    /// `on_surface` would put a grey wash over the view rather than a highlight on the bar.
    #[test]
    fn a_bar_with_no_surface_does_not_light() {
        let theme = Theme::default();
        let hovered = Status {
            opacity: 1.0,
            hover_progress: 1.0,
            ..Default::default()
        };
        let fill = |bar: &crate::SearchBar<Msg>, status: Status| {
            let mut scene = Scene::new();
            bar.paint(Rect::new(0.0, 0.0, 400.0, 56.0), status, &theme, &mut scene);
            scene
                .primitives()
                .iter()
                .rev()
                .find_map(|p| match p {
                    Primitive::Rect { color, blur, .. } if *blur == 0.0 => Some(*color),
                    _ => None,
                })
                .expect("it paints its pill")
        };
        let bare = crate::SearchBar::<Msg>::new("").background_color(Color::TRANSPARENT);
        assert_eq!(
            fill(&bare, hovered),
            fill(
                &bare,
                Status {
                    opacity: 1.0,
                    ..Default::default()
                }
            ),
            "there is no ground to light"
        );

        let solid = crate::SearchBar::<Msg>::new("");
        assert_ne!(
            fill(
                &solid,
                Status {
                    opacity: 1.0,
                    ..Default::default()
                }
            ),
            fill(&solid, hovered),
            "and one with a surface still answers a pointer"
        );
    }

    /// The view's hint falls back to the bar's: a view that renamed the thing being
    /// searched the moment it opened would be answering a different question.
    #[test]
    fn the_views_hint_falls_back_to_the_bars() {
        let theme = Theme::default();
        let plain = anchor(true, "");
        plain.build_themed(&theme);
        let heard: Vec<String> = all(&plain, "SearchBar", &theme)
            .iter()
            .filter_map(|bar| bar.semantics()?.label)
            .collect();
        assert_eq!(heard.len(), 2, "the bar and the view's header");
        assert!(heard.iter().all(|hint| hint == "Search mail"));

        let told = anchor(true, "").view_hint("Search all mail");
        let heard: Vec<String> = all(&told, "SearchBar", &theme)
            .iter()
            .filter_map(|bar| bar.semantics()?.label)
            .collect();
        assert_eq!(heard, vec!["Search mail", "Search all mail"]);
    }

    /// The builders are order-independent, the subtree being thrown away by each of them.
    #[test]
    fn saying_it_afterwards_says_it() {
        let theme = Theme::default();
        let after = SearchAnchor::<Msg>::new(true, "")
            .on_close(Msg::Close)
            .full_screen(true)
            .hint("Search");
        assert_eq!(portal(&after, &theme).len(), 2);
        assert_eq!(after.header(&theme), SEARCH_VIEW_FULL_SCREEN_HEADER);
    }
}