1/*
2 * Copyright (c) 2023-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { KeyCode } from '@ohos.multimodalInput.keyCode'
17
18export enum EditableLeftIconType {
19  Back,
20  Cancel
21}
22
23export declare type EditableTitleBarMenuItem = {
24  value: ResourceStr
25  isEnabled: boolean
26  action?: () => void
27}
28
29const PUBLIC_CANCEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3Gw' +
30  'HAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IA' +
31  'rs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAABKpJREFUeNrt3bFrlHccx/Ff4o2dgkOQ4' +
32  'JzR4SYJgksnbYcGOrTQsUPtpE4d/RNcFBeFlg7NUlTSTrXQQgsKGV0KHTs4ODiJSL8PdxaUGJK7pPc893m94TvleZLnnt' +
33  '/7fcc9z5FrDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnDQrPTuej2u2a87VvKp5XLNT87OlGiSf1lx' +
34  '6Zz2/q3kkgLdZr7k5lX8/7tZ8XfOCU4OgW887U/n341bN9T6s56menLAfaj464OfdM8iF6XYv+dV7+X+pOX/ANuOatZqH' +
35  'Amjti5prh9jurAgGI//mIbbtIvi15u9FHvBqD07a50fYdqtmt+YDrg1a/jd8tuiD7kMA4yNuL4LlkH+WtV/KAEYz7COC4' +
36  'cs/69ovXQB7M+4ngmHLP8/aL1UAD+bYVwTDlX/etT8W+nAV6M82uQS6PuP+rg4NV/5vBNDa6za5HLY9xzO5CIYl/9OaT5' +
37  'obYf/xrE1uioggQ/6LNf/04QGd6tHJFQH5owMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH' +
38  '54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDEAH54wMQAfnjAxAB+eMDSI6A/AKIjYD8AoiN' +
39  'gPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI2A/AKIj' +
40  'YD8AoiNgPwCiI2A/AKIjYD8AoiNgPwCiI1gjfyLY8UpmJnNqbjrc/yO32pOk98rQPIrwWnyCyA5AvILQATkF4AIyC8AEZ' +
41  'BfACIgvwBEQH4BiID8J8qqU3BiPJ8O+XuMO8Eng8/2CID85BcA+ckvAPKT35tg8h+n/KP2/3/2SADojfzf1+yKYH7cBxi' +
42  'm/N39hWX8RnsBkP9Q8r9BBAKIlV8EAoiXXwQCiJdfBAKIl18EAoiXXwQz4D5A/+Tv2KjZmuPvdfu6T+AVYJDyd3Qfo17G' +
43  'b7QXAPkPzTMRCCBVfhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RCCBefhEIIF5+EQggXn4RC' +
44  'CBefhEIIF5+EQggXn4RCCBefhEIwD+qFUFuAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0' +
45  'FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBbADkF0FsAOQXQWwA5BdBdAD3a8bkj4rgTM2PAmj' +
46  'ty5or5I+L4FzNHzV/LfKB9OGb4rfJP0iO49xvL/pB9CGAMfljIxgLoLUR+WMjGAmgtT3yx0awJ4DWdsgfG8HOog+6D1eB' +
47  'ntR8WLNB/sFzlKtDnfw3BNDa65rfp2+I3hfBo5rL5B9UBFttcoNzP35qk8vfLxZ9sCs9OnHdG6Kvps8e3TXiVzWPp88Ut' +
48  '3k1OLr1vFpz6Z31/LbmntMDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAO/wLvsR65mx80NAAAAABJRU' +
49  '5ErkJggg=='
50
51const PUBLIC_OK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3' +
52  'GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZ' +
53  'iS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA+lJREFUeNrt3bFrFgccx+GLlSDi4JDBITiJZHBwEBGRIoqKoIu6iVMd3' +
54  'OosCg6W0sm/wEFUDDgpCDoIDoqOKqIoHUrp4CDFoUMRB39HLotoeXMpMXff54EfFE0ivv1+kpQGrmkAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
55  'AAAAAAAAAAAAAAIBJTHkJGIhddT/V7ajbUPey7l7dlbpPAmCs1tb9Wne2++cvPa07Vfd7nw/+g9eXVT7+m3Wn69Z8421m6w7WXa37KADGN' +
56  'v4TE7ztTN36uvtL/UPWeJ0Z+PgXnejzBwmAMYx/8VuhTQIgcfy9CYCxjP9D3TsBkPqZf95XAFLH3372vyAAEsf/T93Ruvd93tn/CWbo4z9' +
57  'c96jvBxAAseMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0' +
58  'eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eMXANHjFwDR4xcA0eP/HgG0z3f9uVl45uu2ZuGBBu3zXn9rej7mEuMfSgDtA46v1c195ff+rbt' +
59  'U94stGv9KWqnHpLaPsXxSt/k//iXsq9vY9HjUJca/2gNoH2e/c4K32yUC4x9bAOvqrjeTP41GBMY/qgC2151Z4vuIwPhXxEo8I2xdz/c7W' +
60  '3fZXo1/6F8B/q471/N9fSUw/sEH8LEb8hYRGH9iAK3HdafrpkVg/IkBtA8yflt3bBn/3SEC4x9sAK3Xda9EYPypAYjA+OMDEIHxxwcgAuO' +
61  'PD0AExh8fgAiMPz4AERh/fAAiMP74AERg/PEBiMD44wMQgfHHByAC448PQATGHx+ACIw/PgARGH98AMkRGL8AYiMwfgHERmD8AoiNwPgFE' +
62  'BuB8QsgNgLjF0BsBMYvgNgIjF8AsREYvwBiIzB+AcRGYPwCiI3A+AUQG4HxCyA2AuMXQGwExi+A2AiMXwCxERi/AGIjMH4BjDaCTXUP6j5' +
63  '9423aJ2PeMH4BjDWCHd24n9f9+cXvHa+7U7fb+Fe/qeC/ezvU+e5bleX40A11pm6u+xapMX5fARK+Eix+u7O1brbp/1Bw4xfAoCP4Pxi/A' +
64  'GIjMH4BxEZg/AKIjcD4BRAbgfELIDYC4xdAbATGL4DYCIxfAIOL4EXdkbrpZX6sd3WH6p56WQUwJG/qbtX92Cz8EFwfD+sO1L31cq4uU16' +
65  'CibU/M3Sy7nzdlgnf51ndxbrbXj4BjCmEPXX76/Y2Cz8DNNP9+l91f3Sf8e92AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +
66  'AAAAAzKZwK1uX4kZ6mnAAAAAElFTkSuQmCC'
67
68const PUBLIC_BACK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAY' +
69  'AAABS3GwHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAA' +
70  'XNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA8VJREFUeNrt3LFLlHEYwPFXz0G' +
71  'iIZpEoikkwsFRIiK3gqCigxIC/4Kmhv6OoChouaGoqKCgCKducGh0cDAIamhwiCaHCIeelztpUszee/vl8/nAM3Vd8nufr' +
72  '+fddVYVAAAAAAAAAAAAAAAAAAAAAABQijFH0KhrMd2Y2ZitmNWYRzHLjkYAB9lUzMOYizv8eS/mZsymoypLxxE0svzvY07' +
73  'vcpu5mOmY145LAAdx+U/u4bZzwx+JPjq2cow7glaWf1vXsQkg6/JvPwoggJTLjwDSL/8nRyiAzN/5nzpGAWRd/n7MM0cpg' +
74  'IzLvx6z6CjL453gdpZ/IWbDcQrA8iMAy48ALD8CsPwIwPIjAMuPACw/ArD8CMDyIwDLjwAsPwKw/AjA8iMAy48ALD8CsPw' +
75  'IwPIjAMuPACw/ArD85A3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2A' +
76  'MtP2gAsP2kDsPykDcDykzYAy0/aACw/aQOw/KQNwPKTNgDLT9oALD9pA7D8pA3A8pM2AMtP2gAsP2kDsPykDcDykzYAy0/' +
77  'aACw/aQOw/KQNwPLz3xlv6H4mYp5YfrI+AizF9BwnI/AlZi3mbsxy03feaeh+HsQcc60YgSMxMzE3YmZj3sX8LOlHoPoLn' +
78  'HedaEE35n5pzwF856dN9SPBpZICmHRNaNnlkgL46nrQsvmSAqhftlx1TWjR4ZICqPVcE1q0XloA96rBa7XQhl5pAWzFXKm' +
79  '8i8vo9WMeN3VnnQa/sO8xL2POxEy7Toxo+RdjNpu6w1F9HuBqNXi99lw1eKMM9utHzIeYV8MftbccCQAAAAAAsBdt/XLc+s' +
80  'Py9W+MmPqL+1iJuVA1+C4gdFr6d77FvK0GH2nb739lPR5zNuZ51eBnQhFAJQIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE' +
81  'IAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAI' +
82  'EIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIEIAIE8M8jmBlGgABSRnAqZiXms+MUQNYIDnkUKMu4I/gj6z' +
83  'ELMRv7/PsnHKEAMkcw6fgEkDmCNUcngMwRvHFsngRnfWJcL/9tRyaAgxrB+ZijO9ymH7MUs+m4yjLmCBozEXMr5nr1+9We1' +
84  'ZgXMXccDwAAAAAAAAAAAAAAAAAAAAAAwO5+AfVgtqHKRnawAAAAAElFTkSuQmCC'
85
86@Component
87export struct EditableTitleBar {
88  leftIconStyle: EditableLeftIconType
89  title: ResourceStr
90  menuItems: Array<EditableTitleBarMenuItem>
91  onSave?: () => void
92  onCancel?: () => void
93
94  @State titleMaxWidth: number = 0
95
96  static readonly maxCountOfExtraItems = 2
97  private static readonly totalHeight = 56
98  private static readonly leftPadding = 12
99  private static readonly rightPadding = 12
100  private static readonly titlePadding = 16
101
102  build() {
103    Flex({
104      justifyContent: FlexAlign.SpaceBetween,
105      alignItems: ItemAlign.Stretch
106    }) {
107      Row() {
108        if (this.leftIconStyle == EditableLeftIconType.Back) {
109          Navigator() {
110            ImageMenuItem({ item: {
111              value: PUBLIC_BACK,
112              isEnabled: true
113            } })
114          }
115        } else {
116          ImageMenuItem({ item: {
117            value: PUBLIC_CANCEL,
118            isEnabled: true,
119            action: () => this.onCancel && this.onCancel()
120          } })
121        }
122
123        Column() {
124          Text(this.title)
125            .fontWeight(FontWeight.Medium)
126            .fontSize($r('sys.float.ohos_id_text_size_headline8'))
127            .fontColor($r('sys.color.ohos_id_color_titlebar_text'))
128            .maxLines(1)
129            .textOverflow({ overflow: TextOverflow.Ellipsis })
130            .constraintSize({ maxWidth: this.titleMaxWidth })
131        }
132        .justifyContent(FlexAlign.Start)
133        .alignItems(HorizontalAlign.Start)
134        .constraintSize({ maxWidth: this.titleMaxWidth })
135      }
136      .margin({ left: $r('sys.float.ohos_id_default_padding_start') })
137
138      EditableTitleBarMenuSection({
139        menuItems: this.menuItems,
140        onSave: this.onSave
141      })
142    }
143    .width('100%')
144    .height(EditableTitleBar.totalHeight)
145    .backgroundColor($r('sys.color.ohos_id_color_background'))
146    .onAreaChange((_oldValue: Area, newValue: Area) => {
147      let nValue = Number(newValue.width)
148      nValue = nValue - EditableTitleBar.leftPadding - EditableTitleBar.rightPadding - EditableTitleBar.titlePadding
149      nValue = nValue - ImageMenuItem.imageHotZoneWidth - ImageMenuItem.imageHotZoneWidth
150      if (this.menuItems === undefined) {
151        this.titleMaxWidth = nValue
152        return
153      }
154      if (this.menuItems.length > EditableTitleBar.maxCountOfExtraItems) {
155        this.titleMaxWidth = nValue - ImageMenuItem.imageHotZoneWidth * EditableTitleBar.maxCountOfExtraItems
156      } else {
157        this.titleMaxWidth = nValue - ImageMenuItem.imageHotZoneWidth * this.menuItems.length
158      }
159    })
160  }
161}
162
163@Component
164struct EditableTitleBarMenuSection {
165  menuItems: Array<EditableTitleBarMenuItem>
166  onSave?: () => void
167
168  build() {
169    Column() {
170      Row() {
171        if (this.menuItems !== undefined && this.menuItems.length > 0) {
172          ForEach(this.menuItems.slice(0, EditableTitleBar.maxCountOfExtraItems), (item: EditableTitleBarMenuItem) => {
173            ImageMenuItem({ item: item })
174          })
175        }
176        ImageMenuItem({ item: {
177          value: PUBLIC_OK,
178          isEnabled: true,
179          action: () => this.onSave && this.onSave()
180        } })
181      }
182    }
183    .margin({
184      left: $r('sys.float.ohos_id_elements_margin_vertical_l'),
185      right: $r('sys.float.ohos_id_default_padding_end')
186    })
187    .justifyContent(FlexAlign.Center)
188  }
189}
190
191@Component
192struct ImageMenuItem {
193  item: EditableTitleBarMenuItem
194
195  static readonly imageSize = 24
196  static readonly imageHotZoneWidth = 48
197  static readonly buttonBorderRadius = 8
198  static readonly focusBorderWidth = 2
199  static readonly disabledImageOpacity = 0.4
200
201  @State isOnFocus: boolean = false
202  @State isOnHover: boolean = false
203  @State isOnClick: boolean = false
204
205  getFgColor() {
206    return this.isOnClick
207      ? $r('sys.color.ohos_id_color_titlebar_icon_pressed')
208      : $r('sys.color.ohos_id_color_titlebar_icon')
209  }
210
211  getBgColor() {
212    if (this.isOnClick) {
213      return $r('sys.color.ohos_id_color_click_effect')
214    } else if (this.isOnHover) {
215      return $r('sys.color.ohos_id_color_hover')
216    } else {
217      return Color.Transparent
218    }
219  }
220
221  build() {
222    Row() {
223      Image(this.item.value)
224        .width(ImageMenuItem.imageSize)
225        .height(ImageMenuItem.imageSize)
226        .focusable(this.item.isEnabled)
227    }
228    .width(ImageMenuItem.imageHotZoneWidth)
229    .height(ImageMenuItem.imageHotZoneWidth)
230    .borderRadius(ImageMenuItem.buttonBorderRadius)
231    .foregroundColor(this.getFgColor())
232    .backgroundColor(this.getBgColor())
233    .justifyContent(FlexAlign.Center)
234    .opacity(this.item.isEnabled ? 1 : ImageMenuItem.disabledImageOpacity)
235    .border(this.isOnFocus ?
236      { width: ImageMenuItem.focusBorderWidth,
237        color: $r('sys.color.ohos_id_color_emphasize'),
238        style: BorderStyle.Solid
239      } : { width: 0 })
240    .onFocus(() => {
241      if (!this.item.isEnabled) {
242        return
243      }
244      this.isOnFocus = true
245    })
246    .onBlur(() => this.isOnFocus = false)
247    .onHover((isOn) => {
248      if (!this.item.isEnabled) {
249        return
250      }
251      this.isOnHover = isOn
252    })
253    .onKeyEvent((event) => {
254      if (!this.item.isEnabled) {
255        return
256      }
257      if (event.keyCode !== KeyCode.KEYCODE_ENTER && event.keyCode !== KeyCode.KEYCODE_SPACE) {
258        return
259      }
260      if (event.type === KeyType.Down) {
261        this.isOnClick = true
262      }
263      if (event.type === KeyType.Up) {
264        this.isOnClick = false
265      }
266    })
267    .onTouch((event) => {
268      if (!this.item.isEnabled) {
269        return
270      }
271      if (event.type === TouchType.Down) {
272        this.isOnClick = true
273      }
274      if (event.type === TouchType.Up) {
275        this.isOnClick = false
276      }
277    })
278    .onClick(() => this.item.isEnabled && this.item.action && this.item.action())
279  }
280}
281
282export default { EditableLeftIconType, EditableTitleBar }