Fix setSelectIndex method name typo in Dropdownlist

doc/component/Arc.md

@@ -0,0 +1,80 @@
+# Component Arc mapping [lvgl lv_arc)](https://docs.lvgl.io/master/widgets/arc.html)
+
+## Api
+- [style](../api/style.md)
+- [moveToFront](../api/moveToFront.md)
+- [moveToBackground](../api/moveToBackground.md)
+- [setStyle](../api/setStyle.md)
+- [scrollIntoView](../api/scrollIntoView.md)
+
+## Props
+- [style](../props/style.md)
+- [align](../props/align.md)
+- [alignTo](../props/alignTo.md)
+- [onPressedStyle](../props/onPressedStyle.md)
+- [indicatorStyle](../props/indicatorStyle.md)
+- [onIndicatorPressedStyle](../props/onIndicatorPressedStyle.md)
+- [knobStyle](../props/knobStyle.md)
+- [onKnobPressedStyle](../props/onKnobPressedStyle.md)
+- [onChange](../props/onChange/3.md)
+- [range](../props/range.md)
+- [value](../props/value/2.md)
+- startAngle, set [the start angle of the indicator arc](https://docs.lvgl.io/master/widgets/arc.html#angles), zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in clockwise direction
+    - type Number (0-360)
+- endAngle, set the end angle of the indicator arc
+    - type Number (0-360)
+- backgroundStartAngle, set the start angle of the background arc
+    - type Number (0-360)
+- backgroundEndAngle, set the end angle of the background arc
+    - type Number (0-360)
+- rotation, set [an offset to the zero degree position](https://docs.lvgl.io/master/widgets/arc.html#rotation)
+    - type Number
+- mode, controll [how the indicator arc is drawn between the range value](https://docs.lvgl.io/master/widgets/arc.html#modes), with following values
+    - normal, symmetrical, reverse
+- changeRate, limit [the max rate of the value change on click](https://docs.lvgl.io/master/widgets/arc.html#change-rate), in degrees per second
+    - type Number
+
+## Controlled Mode
+Component Arc support [controlled mode](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-05/), achieve by onChange and value props
+
+## Usage
+```jsx
+import { Arc } from 'lvgljs-ui'
+import { useState } from 'react'
+
+function Component () {
+    const [value, setValue] = useState(50)
+    return (
+        <React.Fragment>
+            {/* controlled */}
+            <Arc
+              style={style.arc}
+              onChange={(e) => setValue(e.value)}
+              value={value}
+              range={[0, 100]}
+            />
+            {/* not controlled */}
+            <Arc
+              style={style.arc}
+              backgroundStartAngle={135}
+              backgroundEndAngle={45}
+              rotation={0}
+              mode="normal"
+              value={30}
+              indicatorStyle={style.indicator}
+              knobStyle={style.knob}
+              onChange={(e) => console.log(e.value)}
+            />
+        </React.Fragment>
+    )
+}
+
+const style = {
+    arc: {
+        width: 150,
+        height: 150,
+    },
+    indicator: {},
+    knob: {},
+}
+```

doc/component/GIF.md

@@ -0,0 +1,55 @@
+# Component GIF mapping [lvgl lv_gif)](https://docs.lvgl.io/master/libs/gif.html)
+
+## Api
+- [style](../api/style.md)
+- [moveToFront](../api/moveToFront.md)
+- [moveToBackground](../api/moveToBackground.md)
+- [setStyle](../api/setStyle.md)
+- [scrollIntoView](../api/scrollIntoView.md)
+- pause, pause the GIF animation
+- resume, resume the paused GIF animation
+
+## Props
+- [style](../props/style.md)
+- [align](../props/align.md)
+- [alignTo](../props/alignTo.md)
+- [onClick](../props/onClick.md)
+- [src](../props/src.md)
+- paused, controll the play state of the GIF animation, when true pause the animation, when false resume it (also applied after the GIF loads)
+    - type Boolean
+
+## Usage
+```jsx
+import { GIF, EAlignType } from 'lvgljs-ui'
+import { useState } from 'react'
+
+const path = require('path')
+function Component () {
+    const [paused, setPaused] = useState(false)
+    return (
+        <React.Fragment>
+            <GIF src={path.resolve(__dirname, './assets/images/1.gif')} />
+            <GIF src={'https://somewebsite/images/1.gif'} />
+            <GIF
+                align={{
+                    type: EAlignType.ALIGN_CENTER,
+                }}
+                style={style.gif}
+                src={'./sample.gif'}
+                paused={paused}
+                onClick={() => setPaused((prev) => !prev)}
+            />
+        </React.Fragment>
+    )
+}
+
+const style = {
+    gif: {
+        width: 'auto',
+        height: 'auto',
+    },
+}
+```
+
+## Demo
+test/gif

doc/component/Tabs.md

@@ -0,0 +1,65 @@
+# Component Tabs mapping [lvgl lv_tabview)](https://docs.lvgl.io/master/widgets/tabview.html)
+
+Each child of Tabs becomes the content of one tab, matched in order with the names in the tabs prop.
+
+## Api
+- [style](../api/style.md)
+- [moveToFront](../api/moveToFront.md)
+- [moveToBackground](../api/moveToBackground.md)
+- [setStyle](../api/setStyle.md)
+- [scrollIntoView](../api/scrollIntoView.md)
+
+## Props
+- [style](../props/style.md)
+- [align](../props/align.md)
+- [alignTo](../props/alignTo.md)
+- [onClick](../props/onClick.md)
+- [onPressed](../props/onPressed.md)
+- [onLongPressed](../props/onLongPressed.md)
+- [onLongPressRepeat](../props/onLongPressRepeat.md)
+- tabs, set the name of each tab button, each child of Tabs is matched to a tab name in order
+    - type String[]
+- tabPosition, control [the position of the tab buttons](https://docs.lvgl.io/master/widgets/tabview.html), only applied on creation, with following values
+    - left, top (default), right, bottom
+- tabSize, control the size of the tab buttons area (height for top/bottom position, width for left/right position), only applied on creation
+    - type Number
+
+## Usage
+```jsx
+import { Tabs, View, Text } from 'lvlgjs-ui'
+
+function Component () {
+    return (
+        <Tabs
+            style={style.tabs}
+            tabs={['Profile', 'Analytics', 'Shop']}
+            tabPosition="top"
+            tabSize={70}
+        >
+            <View style={style.tabContent}>
+                <Text>Profile tab content</Text>
+            </View>
+            <View style={style.tabContent}>
+                <Text>Analytics tab content</Text>
+            </View>
+            <View style={style.tabContent}>
+                <Text>Shop tab content</Text>
+            </View>
+        </Tabs>
+    )
+}
+
+const style = {
+    tabs: {
+        width: 480,
+        height: 320,
+    },
+    tabContent: {
+        width: '100%',
+        height: '100%',
+    },
+}
+```
+
+## Demo
+demo/widgets

readme.md

@@ -61,6 +61,9 @@ to compile for a target device.
 - [Keyboard](./doc/component/Keyboard.md)
 - [Calendar](./doc/component/Calendar.md)
 - [Chart](./doc/component/Chart.md)
+- [Arc](./doc/component/Arc.md)
+- [GIF](./doc/component/GIF.md)
+- [Tabs](./doc/component/Tabs.md)
 
 ## Font
 [Buitin-Symbol](./doc/Symbol/symbol.md)

src/render/native/components/dropdownlist/dropdownlist.cpp

@@ -19,9 +19,8 @@ void Dropdownlist::setItems (std::vector<std::string>& items) {
     } else {
         std::string str;
         for(int i=0; i < items.size(); i++) {
-            std::string item = items[i];
-            item.append("\n");
-            str.append(item.c_str());
+            if (i > 0) str.append("\n");
+            str.append(items[i]);
         }
         str.append("\0");
         lv_dropdown_set_options(this->instance, str.c_str());

src/render/react/components/Dropdownlist/comp.ts

@@ -43,7 +43,7 @@ function setListProps(comp, newProps: DropdownListProps, oldProps: DropdownListP
     },
     selectIndex(selectIndex) {
       if (selectIndex !== oldProps.selectIndex) {
-        comp.setselectIndex(selectIndex);
+        comp.setSelectIndex(selectIndex);
       }
     },
     text(text) {