|
| 1 | +import SwiftUI |
| 2 | + |
| 3 | +struct FlowTagsView<Tag: Hashable, Content: View>: View { |
| 4 | + |
| 5 | + // MARK: - Properties |
| 6 | + |
| 7 | + let tags: [Tag] |
| 8 | + let horizontalSpacing: CGFloat |
| 9 | + let verticalSpacing: CGFloat |
| 10 | + let content: (Tag) -> Content |
| 11 | + |
| 12 | + @State private var measuredHeight: CGFloat = 0 |
| 13 | + |
| 14 | + // MARK: - Init |
| 15 | + |
| 16 | + init( |
| 17 | + tags: [Tag], |
| 18 | + horizontalSpacing: CGFloat, |
| 19 | + verticalSpacing: CGFloat, |
| 20 | + @ViewBuilder content: @escaping (Tag) -> Content |
| 21 | + ) { |
| 22 | + self.tags = tags |
| 23 | + self.horizontalSpacing = horizontalSpacing |
| 24 | + self.verticalSpacing = verticalSpacing |
| 25 | + self.content = content |
| 26 | + } |
| 27 | + |
| 28 | + // MARK: - Body |
| 29 | + |
| 30 | + var body: some View { |
| 31 | + GeometryReader { proxy in |
| 32 | + let rows = makeRows(availableWidth: proxy.size.width) |
| 33 | + |
| 34 | + VStack(alignment: .leading, spacing: verticalSpacing) { |
| 35 | + ForEach(rows.indices, id: \.self) { rowIndex in |
| 36 | + HStack(spacing: horizontalSpacing) { |
| 37 | + ForEach(rows[rowIndex], id: \.self) { tag in |
| 38 | + content(tag) |
| 39 | + .fixedSize(horizontal: true, vertical: true) |
| 40 | + } |
| 41 | + } |
| 42 | + } |
| 43 | + } |
| 44 | + .background( |
| 45 | + GeometryReader { innerProxy in |
| 46 | + Color.clear |
| 47 | + .preference(key: HeightPreferenceKey.self, value: innerProxy.size.height) |
| 48 | + } |
| 49 | + ) |
| 50 | + } |
| 51 | + .frame(height: measuredHeight) |
| 52 | + .onPreferenceChange(HeightPreferenceKey.self) { height in |
| 53 | + if height != measuredHeight { |
| 54 | + measuredHeight = height |
| 55 | + } |
| 56 | + } |
| 57 | + .frame(maxWidth: .infinity, alignment: .leading) |
| 58 | + .fixedSize(horizontal: false, vertical: true) |
| 59 | + } |
| 60 | + |
| 61 | + // MARK: - Layout |
| 62 | + |
| 63 | + private func makeRows(availableWidth: CGFloat) -> [[Tag]] { |
| 64 | + var rows: [[Tag]] = [[]] |
| 65 | + var currentRowWidth: CGFloat = 0 |
| 66 | + |
| 67 | + for tag in tags { |
| 68 | + let tagWidth = estimatedTagWidth(tag: tag) |
| 69 | + |
| 70 | + if rows[rows.count - 1].isEmpty { |
| 71 | + rows[rows.count - 1].append(tag) |
| 72 | + currentRowWidth = tagWidth |
| 73 | + continue |
| 74 | + } |
| 75 | + |
| 76 | + let nextWidth = currentRowWidth + horizontalSpacing + tagWidth |
| 77 | + |
| 78 | + if nextWidth <= availableWidth { |
| 79 | + rows[rows.count - 1].append(tag) |
| 80 | + currentRowWidth = nextWidth |
| 81 | + } else { |
| 82 | + rows.append([tag]) |
| 83 | + currentRowWidth = tagWidth |
| 84 | + } |
| 85 | + } |
| 86 | + |
| 87 | + return rows |
| 88 | + } |
| 89 | + |
| 90 | + private func estimatedTagWidth(tag: Tag) -> CGFloat { |
| 91 | + let text = String(describing: tag) |
| 92 | + let estimatedCharacterWidth: CGFloat = 6 |
| 93 | + let horizontalPadding: CGFloat = 16 |
| 94 | + return CGFloat(text.count) * estimatedCharacterWidth + horizontalPadding |
| 95 | + } |
| 96 | +} |
| 97 | + |
| 98 | +// MARK: - Height Preference |
| 99 | + |
| 100 | +private struct HeightPreferenceKey: PreferenceKey { |
| 101 | + static var defaultValue: CGFloat = 0 |
| 102 | + |
| 103 | + static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) { |
| 104 | + value = max(value, nextValue()) |
| 105 | + } |
| 106 | +} |
0 commit comments