rename <animation> to <apply-animation>

Author: waseemdev

CHANGELOG.md

@@ -1,3 +1,8 @@
+
+## [0.0.27] - 2020-10-4
+Breaking changes:
+- rename the custom property `<animation>` to `<apply-animation>`.
+
 ## [0.0.25] - 2020-06-18
 - Add item data type for builder, itemBuilder, childBuilder and repeat.
 

README.md

@@ -71,7 +71,7 @@ dependencies:
   flutter_localizations:
     sdk: flutter
   provider: ^3.0.0+1
-  flutter_xmllayout_helpers: ^0.0.7
+  flutter_xmllayout_helpers: ^0.0.8
 ```
 4. Apply one of the following steps:
     * Clear all `main.dart` content then use `fxml_app` snippet to create the app.

docs/custom-properties.md

@@ -533,8 +533,8 @@ Then add the controls in the controller class:
 ```
 
 ### 10. animation
-`animation` can be applied on any widget easily, it uses a modified version of the [animator](https://github.com/GIfatahTH/animator) but without the usage of the [states_rebuilder](https://pub.dev/packages/states_rebuilder).
-`animation` has these properties:
+`apply-animation` can be applied on any widget easily, it uses a modified version of the [animator](https://github.com/GIfatahTH/animator) but without the usage of the [states_rebuilder](https://pub.dev/packages/states_rebuilder).
+`apply-animation` has these properties:
 - `curve`: animation curve.
 - `duration`: the duration of the animation.
 - `autoTrigger`: to determine whether to start the animation at the begining or not.
@@ -544,9 +544,9 @@ Then add the controls in the controller class:
 Example:
 ```XML
 <Transform :use="translate">
-    <animation curve="easeOut" duration="milliseconds: 300" autoTrigger>
+    <apply-animation curve="easeOut" duration="milliseconds: 300" autoTrigger>
         <offset type="Offset" begin="Offset(0, 0)" end="Offset(50, 200)" />
-    </animation>
+    </apply-animation>
     <Container color="red" width="200" height="200" />
 </Transform>
 ```
@@ -572,14 +572,14 @@ AnimationBuilder(
 );
 ```
 
-`animation` can be applied on multiple properties as well:
+`apply-animation` can be applied on multiple properties as well:
 ```XML
 <Container>
-  <animation duration="milliseconds: 1000" autoTrigger cycles="5">
+  <apply-animation duration="milliseconds: 1000" autoTrigger cycles="5">
       <color type="color" begin="Colors.blue" end="Colors.red" />
       <width type="double" begin="100" end="200" />
       <height type="double" begin="100" end="300" />
-  </animation>
+  </apply-animation>
 </Container>
 ```
 Result:
@@ -606,9 +606,9 @@ AnimationBuilder(
 You also can access the `AnimationBuilderState` to trigger the animation manually by specifying the `name` property:
 ```XML
 <Container>
-  <animation name="myAnimation" duration="milliseconds: 1000" cycles="5">
+  <apply-animation name="myAnimation" duration="milliseconds: 1000" cycles="5">
       <color type="color" begin="Colors.transparent" end="Colors.red" />
-  </animation>
+  </apply-animation>
 </Container>
 ```
 Then access the variable in the controller class:

package.json

@@ -3,7 +3,7 @@
 	"displayName": "XML Layout for Flutter",
 	"description": "XML Layout for Flutter. Brings Angular's style to Flutter!",
 	"publisher": "WaseemDev",
-	"version": "0.0.26",
+	"version": "0.0.27",
 	"icon": "images/logo.png",
 	"repository": {
 		"type": "github",

src/builtin-handlers.ts

@@ -74,7 +74,7 @@ export function registerBuiltInPropertyHandlers(provider: PropertyHandlerProvide
     provider.register(':consumer', new WrapperConsumerPropertyHandler(propertyResolver));
     provider.register(':stream', new WrapperStreamPropertyHandler(propertyResolver));
     provider.register(':disable', new WrapperDisablePropertyHandler(propertyResolver));
-    provider.register('animation', new WrapperAnimationHandler(propertyResolver));
+    provider.register('apply-animation', new WrapperAnimationHandler(propertyResolver));
 
     //
     // wrapper events

src/property-handlers/wrapper-animation.test.ts

@@ -5,9 +5,9 @@ suite("Wrapper Animation Property Tests", function () {
     test("test 1", function() {
         const xml = `
 <Transform :use="translate">
-    <animation curve="easeOut" duration="milliseconds: 300" autoTrigger>
+    <apply-animation curve="easeOut" duration="milliseconds: 300" autoTrigger>
         <offset type="Offset" begin="Offset(-10, 0)" end="Offset(0, 0)" />
-    </animation>
+    </apply-animation>
     <Container color="red" width="200" height="200" />
 </Transform>
 `;
@@ -40,11 +40,11 @@ suite("Wrapper Animation Property Tests", function () {
     test("test 2", function() {
         const xml = `
 <Container>
-    <animation duration="milliseconds: 1000" autoTrigger cycles="5">
+    <apply-animation duration="milliseconds: 1000" autoTrigger cycles="5">
         <color type="color" begin="Colors.transparent" end="Colors.white" />
         <width type="int" begin="100" end="200" />
         <height type="int" begin="100" end="300" />
-    </animation>
+    </apply-animation>
 </Container>
 `;
 
@@ -75,11 +75,11 @@ suite("Wrapper Animation Property Tests", function () {
     test("test 3", function() {
         const xml = `
     <Container>
-        <animation name="myAnimation" duration="seconds: 1" >
+        <apply-animation name="myAnimation" duration="seconds: 1" >
           <color type="color" begin="Colors.blue" end="Colors.red" />
           <width type="double" begin="100" end="200" />
           <height type="double" begin="100" end="300" />
-        </animation>
+        </apply-animation>
       </Container>
 `;
 

src/property-handlers/wrapper-animation.ts

@@ -15,7 +15,7 @@ export class WrapperAnimationHandler extends WrapperPropertyHandler {
     ];
 
     constructor(propertyResolver: PropertyResolver) {
-        super(propertyResolver, [{ handler: 'animation', targetProperty: 'animation' }], 'AnimationBuilder');
+        super(propertyResolver, [{ handler: 'apply-animation', targetProperty: 'animation' }], 'AnimationBuilder');
     }
 
     protected createWrapperWidget(widget: WidgetModel, targetProperty: string, value: string, onWrapped: ((wrapper: WidgetModel) => void)[]): { wrapperWidget: WidgetModel, propertyToUpdateAfterBinding: PropertyModel | null } {