mobile / react · Commits

Go to a project

Authored by 张丽霞
Commit 474d4a495b029f251ff8aeecb9946bfcd7f7f7e1 1 parent 23b2a217

add files

Inline Side-by-side
Showing 60 changed files with 4766 additions and 0 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 60 of 60+ files are displayed.

{
"rules": {
// This folder currently runs through babel and doesn't need to be
// compatible with node 4
"comma-dangle": 0
}
}
... ...
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
0CF68B051AF0549300FF9E5C /* ARTGroup.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68ADE1AF0549300FF9E5C /* ARTGroup.m */; };
0CF68B061AF0549300FF9E5C /* ARTNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE01AF0549300FF9E5C /* ARTNode.m */; };
0CF68B071AF0549300FF9E5C /* ARTRenderable.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE21AF0549300FF9E5C /* ARTRenderable.m */; };
0CF68B081AF0549300FF9E5C /* ARTShape.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE41AF0549300FF9E5C /* ARTShape.m */; };
0CF68B091AF0549300FF9E5C /* ARTSurfaceView.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE61AF0549300FF9E5C /* ARTSurfaceView.m */; };
0CF68B0A1AF0549300FF9E5C /* ARTText.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE81AF0549300FF9E5C /* ARTText.m */; };
0CF68B0B1AF0549300FF9E5C /* ARTBrush.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEC1AF0549300FF9E5C /* ARTBrush.m */; };
0CF68B0C1AF0549300FF9E5C /* ARTLinearGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEE1AF0549300FF9E5C /* ARTLinearGradient.m */; };
0CF68B0D1AF0549300FF9E5C /* ARTPattern.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF01AF0549300FF9E5C /* ARTPattern.m */; };
0CF68B0E1AF0549300FF9E5C /* ARTRadialGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF21AF0549300FF9E5C /* ARTRadialGradient.m */; };
0CF68B0F1AF0549300FF9E5C /* ARTSolidColor.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF41AF0549300FF9E5C /* ARTSolidColor.m */; };
0CF68B101AF0549300FF9E5C /* RCTConvert+ART.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF71AF0549300FF9E5C /* RCTConvert+ART.m */; };
0CF68B111AF0549300FF9E5C /* ARTGroupManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFA1AF0549300FF9E5C /* ARTGroupManager.m */; };
0CF68B121AF0549300FF9E5C /* ARTNodeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFC1AF0549300FF9E5C /* ARTNodeManager.m */; };
0CF68B131AF0549300FF9E5C /* ARTRenderableManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFE1AF0549300FF9E5C /* ARTRenderableManager.m */; };
0CF68B141AF0549300FF9E5C /* ARTShapeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B001AF0549300FF9E5C /* ARTShapeManager.m */; };
0CF68B151AF0549300FF9E5C /* ARTSurfaceViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */; };
0CF68B161AF0549300FF9E5C /* ARTTextManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B041AF0549300FF9E5C /* ARTTextManager.m */; };
325CF7AD1E5F2ABA00AC9606 /* ARTBrush.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEC1AF0549300FF9E5C /* ARTBrush.m */; };
325CF7AE1E5F2ABA00AC9606 /* ARTLinearGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AEE1AF0549300FF9E5C /* ARTLinearGradient.m */; };
325CF7AF1E5F2ABA00AC9606 /* ARTPattern.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF01AF0549300FF9E5C /* ARTPattern.m */; };
325CF7B01E5F2ABA00AC9606 /* ARTRadialGradient.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF21AF0549300FF9E5C /* ARTRadialGradient.m */; };
325CF7B11E5F2ABA00AC9606 /* ARTSolidColor.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF41AF0549300FF9E5C /* ARTSolidColor.m */; };
325CF7B21E5F2ABA00AC9606 /* ARTGroupManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFA1AF0549300FF9E5C /* ARTGroupManager.m */; };
325CF7B31E5F2ABA00AC9606 /* ARTNodeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFC1AF0549300FF9E5C /* ARTNodeManager.m */; };
325CF7B41E5F2ABA00AC9606 /* ARTRenderableManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AFE1AF0549300FF9E5C /* ARTRenderableManager.m */; };
325CF7B51E5F2ABA00AC9606 /* ARTShapeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B001AF0549300FF9E5C /* ARTShapeManager.m */; };
325CF7B61E5F2ABA00AC9606 /* ARTSurfaceViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */; };
325CF7B71E5F2ABA00AC9606 /* ARTTextManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68B041AF0549300FF9E5C /* ARTTextManager.m */; };
325CF7B81E5F2ABA00AC9606 /* ARTGroup.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68ADE1AF0549300FF9E5C /* ARTGroup.m */; };
325CF7B91E5F2ABA00AC9606 /* ARTNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE01AF0549300FF9E5C /* ARTNode.m */; };
325CF7BA1E5F2ABA00AC9606 /* ARTRenderable.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE21AF0549300FF9E5C /* ARTRenderable.m */; };
325CF7BB1E5F2ABA00AC9606 /* ARTShape.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE41AF0549300FF9E5C /* ARTShape.m */; };
325CF7BC1E5F2ABA00AC9606 /* ARTSurfaceView.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE61AF0549300FF9E5C /* ARTSurfaceView.m */; };
325CF7BD1E5F2ABA00AC9606 /* ARTText.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AE81AF0549300FF9E5C /* ARTText.m */; };
325CF7BE1E5F2ABA00AC9606 /* RCTConvert+ART.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CF68AF71AF0549300FF9E5C /* RCTConvert+ART.m */; };
/* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */
0CF68ABF1AF0540F00FF9E5C /* CopyFiles */ = {
isa = PBXCopyFilesBuildPhase;
buildActionMask = 2147483647;
dstPath = "include/$(PRODUCT_NAME)";
dstSubfolderSpec = 16;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
323A12851E5F266B004975B8 /* CopyFiles */ = {
isa = PBXCopyFilesBuildPhase;
buildActionMask = 2147483647;
dstPath = "include/$(PRODUCT_NAME)";
dstSubfolderSpec = 16;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference section */
0CF68AC11AF0540F00FF9E5C /* libART.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libART.a; sourceTree = BUILT_PRODUCTS_DIR; };
0CF68ADB1AF0549300FF9E5C /* ARTCGFloatArray.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTCGFloatArray.h; sourceTree = "<group>"; };
0CF68ADC1AF0549300FF9E5C /* ARTContainer.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTContainer.h; sourceTree = "<group>"; };
0CF68ADD1AF0549300FF9E5C /* ARTGroup.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTGroup.h; sourceTree = "<group>"; };
0CF68ADE1AF0549300FF9E5C /* ARTGroup.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTGroup.m; sourceTree = "<group>"; };
0CF68ADF1AF0549300FF9E5C /* ARTNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTNode.h; sourceTree = "<group>"; };
0CF68AE01AF0549300FF9E5C /* ARTNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTNode.m; sourceTree = "<group>"; };
0CF68AE11AF0549300FF9E5C /* ARTRenderable.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTRenderable.h; sourceTree = "<group>"; };
0CF68AE21AF0549300FF9E5C /* ARTRenderable.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTRenderable.m; sourceTree = "<group>"; };
0CF68AE31AF0549300FF9E5C /* ARTShape.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTShape.h; sourceTree = "<group>"; };
0CF68AE41AF0549300FF9E5C /* ARTShape.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTShape.m; sourceTree = "<group>"; };
0CF68AE51AF0549300FF9E5C /* ARTSurfaceView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTSurfaceView.h; sourceTree = "<group>"; };
0CF68AE61AF0549300FF9E5C /* ARTSurfaceView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTSurfaceView.m; sourceTree = "<group>"; };
0CF68AE71AF0549300FF9E5C /* ARTText.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTText.h; sourceTree = "<group>"; };
0CF68AE81AF0549300FF9E5C /* ARTText.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTText.m; sourceTree = "<group>"; };
0CF68AE91AF0549300FF9E5C /* ARTTextFrame.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTTextFrame.h; sourceTree = "<group>"; };
0CF68AEB1AF0549300FF9E5C /* ARTBrush.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTBrush.h; sourceTree = "<group>"; };
0CF68AEC1AF0549300FF9E5C /* ARTBrush.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTBrush.m; sourceTree = "<group>"; };
0CF68AED1AF0549300FF9E5C /* ARTLinearGradient.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTLinearGradient.h; sourceTree = "<group>"; };
0CF68AEE1AF0549300FF9E5C /* ARTLinearGradient.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTLinearGradient.m; sourceTree = "<group>"; };
0CF68AEF1AF0549300FF9E5C /* ARTPattern.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTPattern.h; sourceTree = "<group>"; };
0CF68AF01AF0549300FF9E5C /* ARTPattern.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTPattern.m; sourceTree = "<group>"; };
0CF68AF11AF0549300FF9E5C /* ARTRadialGradient.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTRadialGradient.h; sourceTree = "<group>"; };
0CF68AF21AF0549300FF9E5C /* ARTRadialGradient.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTRadialGradient.m; sourceTree = "<group>"; };
0CF68AF31AF0549300FF9E5C /* ARTSolidColor.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTSolidColor.h; sourceTree = "<group>"; };
0CF68AF41AF0549300FF9E5C /* ARTSolidColor.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTSolidColor.m; sourceTree = "<group>"; };
0CF68AF61AF0549300FF9E5C /* RCTConvert+ART.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "RCTConvert+ART.h"; sourceTree = "<group>"; };
0CF68AF71AF0549300FF9E5C /* RCTConvert+ART.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = "RCTConvert+ART.m"; sourceTree = "<group>"; };
0CF68AF91AF0549300FF9E5C /* ARTGroupManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTGroupManager.h; sourceTree = "<group>"; };
0CF68AFA1AF0549300FF9E5C /* ARTGroupManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTGroupManager.m; sourceTree = "<group>"; };
0CF68AFB1AF0549300FF9E5C /* ARTNodeManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTNodeManager.h; sourceTree = "<group>"; };
0CF68AFC1AF0549300FF9E5C /* ARTNodeManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTNodeManager.m; sourceTree = "<group>"; };
0CF68AFD1AF0549300FF9E5C /* ARTRenderableManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTRenderableManager.h; sourceTree = "<group>"; };
0CF68AFE1AF0549300FF9E5C /* ARTRenderableManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTRenderableManager.m; sourceTree = "<group>"; };
0CF68AFF1AF0549300FF9E5C /* ARTShapeManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTShapeManager.h; sourceTree = "<group>"; };
0CF68B001AF0549300FF9E5C /* ARTShapeManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTShapeManager.m; sourceTree = "<group>"; };
0CF68B011AF0549300FF9E5C /* ARTSurfaceViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTSurfaceViewManager.h; sourceTree = "<group>"; };
0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTSurfaceViewManager.m; sourceTree = "<group>"; };
0CF68B031AF0549300FF9E5C /* ARTTextManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ARTTextManager.h; sourceTree = "<group>"; };
0CF68B041AF0549300FF9E5C /* ARTTextManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ARTTextManager.m; sourceTree = "<group>"; };
323A12871E5F266B004975B8 /* libART-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libART-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
0CF68ABE1AF0540F00FF9E5C /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
323A12841E5F266B004975B8 /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
0CF68AB81AF0540F00FF9E5C = {
isa = PBXGroup;
children = (
0CF68AEA1AF0549300FF9E5C /* Brushes */,
0CF68AF81AF0549300FF9E5C /* ViewManagers */,
0CF68ADB1AF0549300FF9E5C /* ARTCGFloatArray.h */,
0CF68ADC1AF0549300FF9E5C /* ARTContainer.h */,
0CF68ADD1AF0549300FF9E5C /* ARTGroup.h */,
0CF68ADE1AF0549300FF9E5C /* ARTGroup.m */,
0CF68ADF1AF0549300FF9E5C /* ARTNode.h */,
0CF68AE01AF0549300FF9E5C /* ARTNode.m */,
0CF68AE11AF0549300FF9E5C /* ARTRenderable.h */,
0CF68AE21AF0549300FF9E5C /* ARTRenderable.m */,
0CF68AE31AF0549300FF9E5C /* ARTShape.h */,
0CF68AE41AF0549300FF9E5C /* ARTShape.m */,
0CF68AE51AF0549300FF9E5C /* ARTSurfaceView.h */,
0CF68AE61AF0549300FF9E5C /* ARTSurfaceView.m */,
0CF68AE71AF0549300FF9E5C /* ARTText.h */,
0CF68AE81AF0549300FF9E5C /* ARTText.m */,
0CF68AE91AF0549300FF9E5C /* ARTTextFrame.h */,
0CF68AF61AF0549300FF9E5C /* RCTConvert+ART.h */,
0CF68AF71AF0549300FF9E5C /* RCTConvert+ART.m */,
0CF68AC21AF0540F00FF9E5C /* Products */,
);
indentWidth = 2;
sourceTree = "<group>";
tabWidth = 2;
usesTabs = 0;
};
0CF68AC21AF0540F00FF9E5C /* Products */ = {
isa = PBXGroup;
children = (
0CF68AC11AF0540F00FF9E5C /* libART.a */,
323A12871E5F266B004975B8 /* libART-tvOS.a */,
);
name = Products;
sourceTree = "<group>";
};
0CF68AEA1AF0549300FF9E5C /* Brushes */ = {
isa = PBXGroup;
children = (
0CF68AEB1AF0549300FF9E5C /* ARTBrush.h */,
0CF68AEC1AF0549300FF9E5C /* ARTBrush.m */,
0CF68AED1AF0549300FF9E5C /* ARTLinearGradient.h */,
0CF68AEE1AF0549300FF9E5C /* ARTLinearGradient.m */,
0CF68AEF1AF0549300FF9E5C /* ARTPattern.h */,
0CF68AF01AF0549300FF9E5C /* ARTPattern.m */,
0CF68AF11AF0549300FF9E5C /* ARTRadialGradient.h */,
0CF68AF21AF0549300FF9E5C /* ARTRadialGradient.m */,
0CF68AF31AF0549300FF9E5C /* ARTSolidColor.h */,
0CF68AF41AF0549300FF9E5C /* ARTSolidColor.m */,
);
path = Brushes;
sourceTree = "<group>";
};
0CF68AF81AF0549300FF9E5C /* ViewManagers */ = {
isa = PBXGroup;
children = (
0CF68AF91AF0549300FF9E5C /* ARTGroupManager.h */,
0CF68AFA1AF0549300FF9E5C /* ARTGroupManager.m */,
0CF68AFB1AF0549300FF9E5C /* ARTNodeManager.h */,
0CF68AFC1AF0549300FF9E5C /* ARTNodeManager.m */,
0CF68AFD1AF0549300FF9E5C /* ARTRenderableManager.h */,
0CF68AFE1AF0549300FF9E5C /* ARTRenderableManager.m */,
0CF68AFF1AF0549300FF9E5C /* ARTShapeManager.h */,
0CF68B001AF0549300FF9E5C /* ARTShapeManager.m */,
0CF68B011AF0549300FF9E5C /* ARTSurfaceViewManager.h */,
0CF68B021AF0549300FF9E5C /* ARTSurfaceViewManager.m */,
0CF68B031AF0549300FF9E5C /* ARTTextManager.h */,
0CF68B041AF0549300FF9E5C /* ARTTextManager.m */,
);
path = ViewManagers;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
0CF68AC01AF0540F00FF9E5C /* ART */ = {
isa = PBXNativeTarget;
buildConfigurationList = 0CF68AD51AF0540F00FF9E5C /* Build configuration list for PBXNativeTarget "ART" */;
buildPhases = (
0CF68ABD1AF0540F00FF9E5C /* Sources */,
0CF68ABE1AF0540F00FF9E5C /* Frameworks */,
0CF68ABF1AF0540F00FF9E5C /* CopyFiles */,
);
buildRules = (
);
dependencies = (
);
name = ART;
productName = ART;
productReference = 0CF68AC11AF0540F00FF9E5C /* libART.a */;
productType = "com.apple.product-type.library.static";
};
323A12861E5F266B004975B8 /* ART-tvOS */ = {
isa = PBXNativeTarget;
buildConfigurationList = 323A128D1E5F266B004975B8 /* Build configuration list for PBXNativeTarget "ART-tvOS" */;
buildPhases = (
323A12831E5F266B004975B8 /* Sources */,
323A12841E5F266B004975B8 /* Frameworks */,
323A12851E5F266B004975B8 /* CopyFiles */,
);
buildRules = (
);
dependencies = (
);
name = "ART-tvOS";
productName = "ART-tvOS";
productReference = 323A12871E5F266B004975B8 /* libART-tvOS.a */;
productType = "com.apple.product-type.library.static";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
0CF68AB91AF0540F00FF9E5C /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0620;
TargetAttributes = {
0CF68AC01AF0540F00FF9E5C = {
CreatedOnToolsVersion = 6.2;
};
323A12861E5F266B004975B8 = {
CreatedOnToolsVersion = 6.2;
ProvisioningStyle = Automatic;
};
};
};
buildConfigurationList = 0CF68ABC1AF0540F00FF9E5C /* Build configuration list for PBXProject "ART" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
);
mainGroup = 0CF68AB81AF0540F00FF9E5C;
productRefGroup = 0CF68AC21AF0540F00FF9E5C /* Products */;
projectDirPath = "";
projectRoot = "";
targets = (
0CF68AC01AF0540F00FF9E5C /* ART */,
323A12861E5F266B004975B8 /* ART-tvOS */,
);
};
/* End PBXProject section */
/* Begin PBXSourcesBuildPhase section */
0CF68ABD1AF0540F00FF9E5C /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
0CF68B161AF0549300FF9E5C /* ARTTextManager.m in Sources */,
0CF68B111AF0549300FF9E5C /* ARTGroupManager.m in Sources */,
0CF68B0D1AF0549300FF9E5C /* ARTPattern.m in Sources */,
0CF68B0A1AF0549300FF9E5C /* ARTText.m in Sources */,
0CF68B121AF0549300FF9E5C /* ARTNodeManager.m in Sources */,
0CF68B051AF0549300FF9E5C /* ARTGroup.m in Sources */,
0CF68B131AF0549300FF9E5C /* ARTRenderableManager.m in Sources */,
0CF68B091AF0549300FF9E5C /* ARTSurfaceView.m in Sources */,
0CF68B0E1AF0549300FF9E5C /* ARTRadialGradient.m in Sources */,
0CF68B151AF0549300FF9E5C /* ARTSurfaceViewManager.m in Sources */,
0CF68B081AF0549300FF9E5C /* ARTShape.m in Sources */,
0CF68B071AF0549300FF9E5C /* ARTRenderable.m in Sources */,
0CF68B101AF0549300FF9E5C /* RCTConvert+ART.m in Sources */,
0CF68B061AF0549300FF9E5C /* ARTNode.m in Sources */,
0CF68B0F1AF0549300FF9E5C /* ARTSolidColor.m in Sources */,
0CF68B0C1AF0549300FF9E5C /* ARTLinearGradient.m in Sources */,
0CF68B0B1AF0549300FF9E5C /* ARTBrush.m in Sources */,
0CF68B141AF0549300FF9E5C /* ARTShapeManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
323A12831E5F266B004975B8 /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
325CF7B71E5F2ABA00AC9606 /* ARTTextManager.m in Sources */,
325CF7B21E5F2ABA00AC9606 /* ARTGroupManager.m in Sources */,
325CF7AF1E5F2ABA00AC9606 /* ARTPattern.m in Sources */,
325CF7BD1E5F2ABA00AC9606 /* ARTText.m in Sources */,
325CF7B31E5F2ABA00AC9606 /* ARTNodeManager.m in Sources */,
325CF7B81E5F2ABA00AC9606 /* ARTGroup.m in Sources */,
325CF7B41E5F2ABA00AC9606 /* ARTRenderableManager.m in Sources */,
325CF7BC1E5F2ABA00AC9606 /* ARTSurfaceView.m in Sources */,
325CF7B01E5F2ABA00AC9606 /* ARTRadialGradient.m in Sources */,
325CF7B61E5F2ABA00AC9606 /* ARTSurfaceViewManager.m in Sources */,
325CF7BB1E5F2ABA00AC9606 /* ARTShape.m in Sources */,
325CF7BA1E5F2ABA00AC9606 /* ARTRenderable.m in Sources */,
325CF7BE1E5F2ABA00AC9606 /* RCTConvert+ART.m in Sources */,
325CF7B91E5F2ABA00AC9606 /* ARTNode.m in Sources */,
325CF7B11E5F2ABA00AC9606 /* ARTSolidColor.m in Sources */,
325CF7AE1E5F2ABA00AC9606 /* ARTLinearGradient.m in Sources */,
325CF7AD1E5F2ABA00AC9606 /* ARTBrush.m in Sources */,
325CF7B51E5F2ABA00AC9606 /* ARTShapeManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin XCBuildConfiguration section */
0CF68AD31AF0540F00FF9E5C /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
SKIP_INSTALL = YES;
};
name = Debug;
};
0CF68AD41AF0540F00FF9E5C /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = NO;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
SKIP_INSTALL = YES;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
0CF68AD61AF0540F00FF9E5C /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = "$(TARGET_NAME)";
};
name = Debug;
};
0CF68AD71AF0540F00FF9E5C /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = "$(TARGET_NAME)";
};
name = Release;
};
323A128E1E5F266B004975B8 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
CLANG_ANALYZER_NONNULL = YES;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
DEBUG_INFORMATION_FORMAT = dwarf;
ENABLE_TESTABILITY = YES;
GCC_NO_COMMON_BLOCKS = YES;
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = "$(TARGET_NAME)";
SDKROOT = appletvos;
SKIP_INSTALL = YES;
TVOS_DEPLOYMENT_TARGET = 9.2;
};
name = Debug;
};
323A128F1E5F266B004975B8 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
CLANG_ANALYZER_NONNULL = YES;
CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
GCC_NO_COMMON_BLOCKS = YES;
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = "$(TARGET_NAME)";
SDKROOT = appletvos;
SKIP_INSTALL = YES;
TVOS_DEPLOYMENT_TARGET = 9.2;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
0CF68ABC1AF0540F00FF9E5C /* Build configuration list for PBXProject "ART" */ = {
isa = XCConfigurationList;
buildConfigurations = (
0CF68AD31AF0540F00FF9E5C /* Debug */,
0CF68AD41AF0540F00FF9E5C /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
0CF68AD51AF0540F00FF9E5C /* Build configuration list for PBXNativeTarget "ART" */ = {
isa = XCConfigurationList;
buildConfigurations = (
0CF68AD61AF0540F00FF9E5C /* Debug */,
0CF68AD71AF0540F00FF9E5C /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
323A128D1E5F266B004975B8 /* Build configuration list for PBXNativeTarget "ART-tvOS" */ = {
isa = XCConfigurationList;
buildConfigurations = (
323A128E1E5F266B004975B8 /* Debug */,
323A128F1E5F266B004975B8 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 0CF68AB91AF0540F00FF9E5C /* Project object */;
}
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
// A little helper to make sure we have the right memory allocation ready for use.
// We assume that we will only this in one place so no reference counting is necessary.
// Needs to be freed when dealloced.
// This is fragile since this relies on these values not getting reused. Consider
// wrapping these in an Obj-C class or some ARC hackery to get refcounting.
typedef struct {
size_t count;
CGFloat *array;
} ARTCGFloatArray;
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <Foundation/Foundation.h>
@protocol ARTContainer <NSObject>
// This is used as a hook for child to mark it's parent as dirty.
// This bubbles up to the root which gets marked as dirty.
- (void)invalidate;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <Foundation/Foundation.h>
#import "ARTContainer.h"
#import "ARTNode.h"
@interface ARTGroup : ARTNode <ARTContainer>
@property (nonatomic, assign) CGRect clipping;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTGroup.h"
@implementation ARTGroup
- (void)renderLayerTo:(CGContextRef)context
{
if (!CGRectIsEmpty(self.clipping)) {
CGContextClipToRect(context, self.clipping);
}
for (ARTNode *node in self.subviews) {
[node renderTo:context];
}
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <React/UIView+React.h>
/**
* ART nodes are implemented as empty UIViews but this is just an implementation detail to fit
* into the existing view management. They should also be shadow views and painted on a background
* thread.
*/
@interface ARTNode : UIView
@property (nonatomic, assign) CGFloat opacity;
- (void)invalidate;
- (void)renderTo:(CGContextRef)context;
/**
* renderTo will take opacity into account and draw renderLayerTo off-screen if there is opacity
* specified, then composite that onto the context. renderLayerTo always draws at opacity=1.
* @abstract
*/
- (void)renderLayerTo:(CGContextRef)context;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTNode.h"
#import "ARTContainer.h"
@implementation ARTNode
- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
{
[super insertReactSubview:subview atIndex:atIndex];
[self insertSubview:subview atIndex:atIndex];
[self invalidate];
}
- (void)removeReactSubview:(UIView *)subview
{
[super removeReactSubview:subview];
[self invalidate];
}
- (void)didUpdateReactSubviews
{
// Do nothing, as subviews are inserted by insertReactSubview:
}
- (void)setOpacity:(CGFloat)opacity
{
[self invalidate];
_opacity = opacity;
}
- (void)setTransform:(CGAffineTransform)transform
{
[self invalidate];
super.transform = transform;
}
- (void)invalidate
{
id<ARTContainer> container = (id<ARTContainer>)self.superview;
[container invalidate];
}
- (void)renderTo:(CGContextRef)context
{
if (self.opacity <= 0) {
// Nothing to paint
return;
}
if (self.opacity >= 1) {
// Just paint at full opacity
CGContextSaveGState(context);
CGContextConcatCTM(context, self.transform);
CGContextSetAlpha(context, 1);
[self renderLayerTo:context];
CGContextRestoreGState(context);
return;
}
// This needs to be painted on a layer before being composited.
CGContextSaveGState(context);
CGContextConcatCTM(context, self.transform);
CGContextSetAlpha(context, self.opacity);
CGContextBeginTransparencyLayer(context, NULL);
[self renderLayerTo:context];
CGContextEndTransparencyLayer(context);
CGContextRestoreGState(context);
}
- (void)renderLayerTo:(CGContextRef)context
{
// abstract
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <Foundation/Foundation.h>
#import "ARTBrush.h"
#import "ARTCGFloatArray.h"
#import "ARTNode.h"
@interface ARTRenderable : ARTNode
@property (nonatomic, strong) ARTBrush *fill;
@property (nonatomic, assign) CGColorRef stroke;
@property (nonatomic, assign) CGFloat strokeWidth;
@property (nonatomic, assign) CGLineCap strokeCap;
@property (nonatomic, assign) CGLineJoin strokeJoin;
@property (nonatomic, assign) ARTCGFloatArray strokeDash;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTRenderable.h"
@implementation ARTRenderable
- (void)setFill:(ARTBrush *)fill
{
[self invalidate];
_fill = fill;
}
- (void)setStroke:(CGColorRef)stroke
{
if (stroke == _stroke) {
return;
}
[self invalidate];
CGColorRelease(_stroke);
_stroke = CGColorRetain(stroke);
}
- (void)setStrokeWidth:(CGFloat)strokeWidth
{
[self invalidate];
_strokeWidth = strokeWidth;
}
- (void)setStrokeCap:(CGLineCap)strokeCap
{
[self invalidate];
_strokeCap = strokeCap;
}
- (void)setStrokeJoin:(CGLineJoin)strokeJoin
{
[self invalidate];
_strokeJoin = strokeJoin;
}
- (void)setStrokeDash:(ARTCGFloatArray)strokeDash
{
if (strokeDash.array == _strokeDash.array) {
return;
}
if (_strokeDash.array) {
free(_strokeDash.array);
}
[self invalidate];
_strokeDash = strokeDash;
}
- (void)dealloc
{
CGColorRelease(_stroke);
if (_strokeDash.array) {
free(_strokeDash.array);
}
}
- (void)renderTo:(CGContextRef)context
{
if (self.opacity <= 0 || self.opacity >= 1 || (self.fill && self.stroke)) {
// If we have both fill and stroke, we will need to paint this using normal compositing
[super renderTo: context];
return;
}
// This is a terminal with only one painting. Therefore we don't need to paint this
// off-screen. We can just composite it straight onto the buffer.
CGContextSaveGState(context);
CGContextConcatCTM(context, self.transform);
CGContextSetAlpha(context, self.opacity);
[self renderLayerTo:context];
CGContextRestoreGState(context);
}
- (void)renderLayerTo:(CGContextRef)context
{
// abstract
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ARTSerializablePath
*/
'use strict';
// TODO: Move this into an ART mode called "serialized" or something
var Class = require('art/core/class.js');
var Path = require('art/core/path.js');
var MOVE_TO = 0;
var CLOSE = 1;
var LINE_TO = 2;
var CURVE_TO = 3;
var ARC = 4;
var SerializablePath = Class(Path, {
initialize: function(path) {
this.reset();
if (path instanceof SerializablePath) {
this.path = path.path.slice(0);
} else if (path) {
if (path.applyToPath) {
path.applyToPath(this);
} else {
this.push(path);
}
}
},
onReset: function() {
this.path = [];
},
onMove: function(sx, sy, x, y) {
this.path.push(MOVE_TO, x, y);
},
onLine: function(sx, sy, x, y) {
this.path.push(LINE_TO, x, y);
},
onBezierCurve: function(sx, sy, p1x, p1y, p2x, p2y, x, y) {
this.path.push(CURVE_TO, p1x, p1y, p2x, p2y, x, y);
},
_arcToBezier: Path.prototype.onArc,
onArc: function(sx, sy, ex, ey, cx, cy, rx, ry, sa, ea, ccw, rotation) {
if (rx !== ry || rotation) {
return this._arcToBezier(
sx, sy, ex, ey, cx, cy, rx, ry, sa, ea, ccw, rotation
);
}
this.path.push(ARC, cx, cy, rx, sa, ea, ccw ? 0 : 1);
},
onClose: function() {
this.path.push(CLOSE);
},
toJSON: function() {
return this.path;
}
});
module.exports = SerializablePath;
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <Foundation/Foundation.h>
#import "ARTRenderable.h"
@interface ARTShape : ARTRenderable
@property (nonatomic, assign) CGPathRef d;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTShape.h"
@implementation ARTShape
- (void)setD:(CGPathRef)d
{
if (d == _d) {
return;
}
[self invalidate];
CGPathRelease(_d);
_d = CGPathRetain(d);
}
- (void)dealloc
{
CGPathRelease(_d);
}
- (void)renderLayerTo:(CGContextRef)context
{
if ((!self.fill && !self.stroke) || !self.d) {
return;
}
CGPathDrawingMode mode = kCGPathStroke;
if (self.fill) {
if ([self.fill applyFillColor:context]) {
mode = kCGPathFill;
} else {
CGContextSaveGState(context);
CGContextAddPath(context, self.d);
CGContextClip(context);
[self.fill paint:context];
CGContextRestoreGState(context);
if (!self.stroke) {
return;
}
}
}
if (self.stroke) {
CGContextSetStrokeColorWithColor(context, self.stroke);
CGContextSetLineWidth(context, self.strokeWidth);
CGContextSetLineCap(context, self.strokeCap);
CGContextSetLineJoin(context, self.strokeJoin);
ARTCGFloatArray dash = self.strokeDash;
if (dash.count) {
CGContextSetLineDash(context, 0, dash.array, dash.count);
}
if (mode == kCGPathFill) {
mode = kCGPathFillStroke;
}
}
CGContextAddPath(context, self.d);
CGContextDrawPath(context, mode);
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <UIKit/UIKit.h>
#import "ARTContainer.h"
@interface ARTSurfaceView : UIView <ARTContainer>
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTSurfaceView.h"
#import <React/RCTLog.h>
#import "ARTNode.h"
@implementation ARTSurfaceView
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
self.opaque = NO;
}
return self;
}
- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
{
[super insertReactSubview:subview atIndex:atIndex];
[self insertSubview:subview atIndex:atIndex];
[self invalidate];
}
- (void)removeReactSubview:(UIView *)subview
{
[super removeReactSubview:subview];
[self invalidate];
}
- (void)didUpdateReactSubviews
{
// Do nothing, as subviews are inserted by insertReactSubview:
}
- (void)invalidate
{
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
for (ARTNode *node in self.subviews) {
[node renderTo:context];
}
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <Foundation/Foundation.h>
#import "ARTRenderable.h"
#import "ARTTextFrame.h"
@interface ARTText : ARTRenderable
@property (nonatomic, assign) CTTextAlignment alignment;
@property (nonatomic, assign) ARTTextFrame textFrame;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTText.h"
#import <CoreText/CoreText.h>
@implementation ARTText
- (void)setAlignment:(CTTextAlignment)alignment
{
[self invalidate];
_alignment = alignment;
}
static void ARTFreeTextFrame(ARTTextFrame frame)
{
if (frame.count) {
// We must release each line before freeing up this struct
for (int i = 0; i < frame.count; i++) {
CFRelease(frame.lines[i]);
}
free(frame.lines);
free(frame.widths);
}
}
- (void)setTextFrame:(ARTTextFrame)frame
{
if (frame.lines != _textFrame.lines) {
ARTFreeTextFrame(_textFrame);
}
[self invalidate];
_textFrame = frame;
}
- (void)dealloc
{
ARTFreeTextFrame(_textFrame);
}
- (void)renderLayerTo:(CGContextRef)context
{
ARTTextFrame frame = self.textFrame;
if ((!self.fill && !self.stroke) || !frame.count) {
return;
}
// to-do: draw along a path
CGTextDrawingMode mode = kCGTextStroke;
if (self.fill) {
if ([self.fill applyFillColor:context]) {
mode = kCGTextFill;
} else {
for (int i = 0; i < frame.count; i++) {
CGContextSaveGState(context);
// Inverse the coordinate space since CoreText assumes a bottom-up coordinate space
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetTextDrawingMode(context, kCGTextClip);
[self renderLineTo:context atIndex:i];
// Inverse the coordinate space back to the original before filling
CGContextScaleCTM(context, 1.0, -1.0);
[self.fill paint:context];
// Restore the state so that the next line can be clipped separately
CGContextRestoreGState(context);
}
if (!self.stroke) {
return;
}
}
}
if (self.stroke) {
CGContextSetStrokeColorWithColor(context, self.stroke);
CGContextSetLineWidth(context, self.strokeWidth);
CGContextSetLineCap(context, self.strokeCap);
CGContextSetLineJoin(context, self.strokeJoin);
ARTCGFloatArray dash = self.strokeDash;
if (dash.count) {
CGContextSetLineDash(context, 0, dash.array, dash.count);
}
if (mode == kCGTextFill) {
mode = kCGTextFillStroke;
}
}
CGContextSetTextDrawingMode(context, mode);
// Inverse the coordinate space since CoreText assumes a bottom-up coordinate space
CGContextScaleCTM(context, 1.0, -1.0);
for (int i = 0; i < frame.count; i++) {
[self renderLineTo:context atIndex:i];
}
}
- (void)renderLineTo:(CGContextRef)context atIndex:(int)index
{
ARTTextFrame frame = self.textFrame;
CGFloat shift;
switch (self.alignment) {
case kCTTextAlignmentRight:
shift = frame.widths[index];
break;
case kCTTextAlignmentCenter:
shift = (frame.widths[index] / 2);
break;
default:
shift = 0;
break;
}
// We should consider snapping this shift to device pixels to improve rendering quality
// when a line has subpixel width.
CGContextSetTextPosition(context, -shift, -frame.baseLine - frame.lineHeight * index);
CTLineRef line = frame.lines[index];
CTLineDraw(line, context);
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <CoreText/CoreText.h>
// A little helper to make sure we have a set of lines including width ready for use.
// We assume that we will only this in one place so no reference counting is necessary.
// Needs to be freed when dealloced.
// This is fragile since this relies on these values not getting reused. Consider
// wrapping these in an Obj-C class or some ARC hackery to get refcounting.
typedef struct {
size_t count;
CGFloat baseLine; // Distance from the origin to the base line of the first line
CGFloat lineHeight; // Distance between lines
CTLineRef *lines;
CGFloat *widths; // Width of each line
} ARTTextFrame;
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <CoreGraphics/CoreGraphics.h>
#import <Foundation/Foundation.h>
@interface ARTBrush : NSObject
/* @abstract */
- (instancetype)initWithArray:(NSArray *)data NS_DESIGNATED_INITIALIZER;
/**
* For certain brushes we can fast path a combined fill and stroke.
* For those brushes we override applyFillColor which sets the fill
* color to be used by those batch paints. Those return YES.
* We can't batch gradient painting in CoreGraphics, so those will
* return NO and paint gets called instead.
* @abstract
*/
- (BOOL)applyFillColor:(CGContextRef)context;
/**
* paint fills the context with a brush. The context is assumed to
* be clipped.
* @abstract
*/
- (void)paint:(CGContextRef)context;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTBrush.h"
#import <React/RCTDefines.h>
@implementation ARTBrush
- (instancetype)initWithArray:(NSArray *)data
{
return [super init];
}
RCT_NOT_IMPLEMENTED(- (instancetype)init)
- (BOOL)applyFillColor:(CGContextRef)context
{
return NO;
}
- (void)paint:(CGContextRef)context
{
// abstract
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTBrush.h"
@interface ARTLinearGradient : ARTBrush
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTLinearGradient.h"
#import <React/RCTLog.h>
#import "RCTConvert+ART.h"
@implementation ARTLinearGradient
{
CGGradientRef _gradient;
CGPoint _startPoint;
CGPoint _endPoint;
}
- (instancetype)initWithArray:(NSArray<NSNumber *> *)array
{
if ((self = [super initWithArray:array])) {
if (array.count < 5) {
RCTLogError(@"-[%@ %@] expects 5 elements, received %@",
self.class, NSStringFromSelector(_cmd), array);
return nil;
}
_startPoint = [RCTConvert CGPoint:array offset:1];
_endPoint = [RCTConvert CGPoint:array offset:3];
_gradient = CGGradientRetain([RCTConvert CGGradient:array offset:5]);
}
return self;
}
- (void)dealloc
{
CGGradientRelease(_gradient);
}
- (void)paint:(CGContextRef)context
{
CGGradientDrawingOptions extendOptions =
kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
CGContextDrawLinearGradient(context, _gradient, _startPoint, _endPoint, extendOptions);
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTBrush.h"
@interface ARTPattern : ARTBrush
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTPattern.h"
#import <React/RCTLog.h>
#import "RCTConvert+ART.h"
@implementation ARTPattern
{
CGImageRef _image;
CGRect _rect;
}
- (instancetype)initWithArray:(NSArray<id /* imagesource + numbers */> *)array
{
if ((self = [super initWithArray:array])) {
if (array.count < 6) {
RCTLogError(@"-[%@ %@] expects 6 elements, received %@",
self.class, NSStringFromSelector(_cmd), array);
return nil;
}
_image = CGImageRetain([RCTConvert CGImage:array[1]]);
_rect = [RCTConvert CGRect:array offset:2];
}
return self;
}
- (void)dealloc
{
CGImageRelease(_image);
}
// Note: This could use applyFillColor with a pattern. This could be more efficient but
// to do that, we need to calculate our own user space CTM.
- (void)paint:(CGContextRef)context
{
CGContextDrawTiledImage(context, _rect, _image);
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTBrush.h"
@interface ARTRadialGradient : ARTBrush
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTRadialGradient.h"
#import <React/RCTLog.h>
#import "RCTConvert+ART.h"
@implementation ARTRadialGradient
{
CGGradientRef _gradient;
CGPoint _focusPoint;
CGPoint _centerPoint;
CGFloat _radius;
CGFloat _radiusRatio;
}
- (instancetype)initWithArray:(NSArray<NSNumber *> *)array
{
if ((self = [super initWithArray:array])) {
if (array.count < 7) {
RCTLogError(@"-[%@ %@] expects 7 elements, received %@",
self.class, NSStringFromSelector(_cmd), array);
return nil;
}
_radius = [RCTConvert CGFloat:array[3]];
_radiusRatio = [RCTConvert CGFloat:array[4]] / _radius;
_focusPoint.x = [RCTConvert CGFloat:array[1]];
_focusPoint.y = [RCTConvert CGFloat:array[2]] / _radiusRatio;
_centerPoint.x = [RCTConvert CGFloat:array[5]];
_centerPoint.y = [RCTConvert CGFloat:array[6]] / _radiusRatio;
_gradient = CGGradientRetain([RCTConvert CGGradient:array offset:7]);
}
return self;
}
- (void)dealloc
{
CGGradientRelease(_gradient);
}
- (void)paint:(CGContextRef)context
{
CGAffineTransform transform = CGAffineTransformMakeScale(1, _radiusRatio);
CGContextConcatCTM(context, transform);
CGGradientDrawingOptions extendOptions = kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
CGContextDrawRadialGradient(context, _gradient, _focusPoint, 0, _centerPoint, _radius, extendOptions);
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTBrush.h"
@interface ARTSolidColor : ARTBrush
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTSolidColor.h"
#import <React/RCTLog.h>
#import "RCTConvert+ART.h"
@implementation ARTSolidColor
{
CGColorRef _color;
}
- (instancetype)initWithArray:(NSArray<NSNumber *> *)array
{
if ((self = [super initWithArray:array])) {
_color = CGColorRetain([RCTConvert CGColor:array offset:1]);
}
return self;
}
- (void)dealloc
{
CGColorRelease(_color);
}
- (BOOL)applyFillColor:(CGContextRef)context
{
CGContextSetFillColorWithColor(context, _color);
return YES;
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <QuartzCore/QuartzCore.h>
#import <React/RCTConvert.h>
#import "ARTBrush.h"
#import "ARTCGFloatArray.h"
#import "ARTTextFrame.h"
@interface RCTConvert (ART)
+ (CGPathRef)CGPath:(id)json;
+ (CTTextAlignment)CTTextAlignment:(id)json;
+ (ARTTextFrame)ARTTextFrame:(id)json;
+ (ARTCGFloatArray)ARTCGFloatArray:(id)json;
+ (ARTBrush *)ARTBrush:(id)json;
+ (CGPoint)CGPoint:(id)json offset:(NSUInteger)offset;
+ (CGRect)CGRect:(id)json offset:(NSUInteger)offset;
+ (CGColorRef)CGColor:(id)json offset:(NSUInteger)offset;
+ (CGGradientRef)CGGradient:(id)json offset:(NSUInteger)offset;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTConvert+ART.h"
#import <React/RCTFont.h>
#import <React/RCTLog.h>
#import "ARTLinearGradient.h"
#import "ARTPattern.h"
#import "ARTRadialGradient.h"
#import "ARTSolidColor.h"
@implementation RCTConvert (ART)
+ (CGPathRef)CGPath:(id)json
{
NSArray *arr = [self NSNumberArray:json];
NSUInteger count = [arr count];
#define NEXT_VALUE [self double:arr[i++]]
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 0);
@try {
NSUInteger i = 0;
while (i < count) {
NSUInteger type = [arr[i++] unsignedIntegerValue];
switch (type) {
case 0:
CGPathMoveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE);
break;
case 1:
CGPathCloseSubpath(path);
break;
case 2:
CGPathAddLineToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE);
break;
case 3:
CGPathAddCurveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE);
break;
case 4:
CGPathAddArc(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE == 0);
break;
default:
RCTLogError(@"Invalid CGPath type %llu at element %llu of %@", (unsigned long long)type, (unsigned long long)i, arr);
CGPathRelease(path);
return NULL;
}
}
}
@catch (NSException *exception) {
RCTLogError(@"Invalid CGPath format: %@", arr);
CGPathRelease(path);
return NULL;
}
return (CGPathRef)CFAutorelease(path);
}
RCT_ENUM_CONVERTER(CTTextAlignment, (@{
@"auto": @(kCTTextAlignmentNatural),
@"left": @(kCTTextAlignmentLeft),
@"center": @(kCTTextAlignmentCenter),
@"right": @(kCTTextAlignmentRight),
@"justify": @(kCTTextAlignmentJustified),
}), kCTTextAlignmentNatural, integerValue)
// This takes a tuple of text lines and a font to generate a CTLine for each text line.
// This prepares everything for rendering a frame of text in ARTText.
+ (ARTTextFrame)ARTTextFrame:(id)json
{
NSDictionary *dict = [self NSDictionary:json];
ARTTextFrame frame;
frame.count = 0;
NSArray *lines = [self NSArray:dict[@"lines"]];
NSUInteger lineCount = [lines count];
if (lineCount == 0) {
return frame;
}
CTFontRef font = (__bridge CTFontRef)[self UIFont:dict[@"font"]];
if (!font) {
return frame;
}
// Create a dictionary for this font
CFDictionaryRef attributes = (__bridge CFDictionaryRef)@{
(NSString *)kCTFontAttributeName:(__bridge id)font,
(NSString *)kCTForegroundColorFromContextAttributeName: @YES
};
// Set up text frame with font metrics
CGFloat size = CTFontGetSize(font);
frame.count = lineCount;
frame.baseLine = size; // estimate base line
frame.lineHeight = size * 1.1; // Base on ART canvas line height estimate
frame.lines = malloc(sizeof(CTLineRef) * lineCount);
frame.widths = malloc(sizeof(CGFloat) * lineCount);
[lines enumerateObjectsUsingBlock:^(NSString *text, NSUInteger i, BOOL *stop) {
CFStringRef string = (__bridge CFStringRef)text;
CFAttributedStringRef attrString = CFAttributedStringCreate(kCFAllocatorDefault, string, attributes);
CTLineRef line = CTLineCreateWithAttributedString(attrString);
CFRelease(attrString);
frame.lines[i] = line;
frame.widths[i] = CTLineGetTypographicBounds(line, NULL, NULL, NULL);
}];
return frame;
}
+ (ARTCGFloatArray)ARTCGFloatArray:(id)json
{
NSArray *arr = [self NSNumberArray:json];
NSUInteger count = arr.count;
ARTCGFloatArray array;
array.count = count;
array.array = NULL;
if (count) {
// Ideally, these arrays should already use the same memory layout.
// In that case we shouldn't need this new malloc.
array.array = malloc(sizeof(CGFloat) * count);
for (NSUInteger i = 0; i < count; i++) {
array.array[i] = [arr[i] doubleValue];
}
}
return array;
}
+ (ARTBrush *)ARTBrush:(id)json
{
NSArray *arr = [self NSArray:json];
NSUInteger type = [self NSUInteger:arr.firstObject];
switch (type) {
case 0: // solid color
// These are probably expensive allocations since it's often the same value.
// We should memoize colors but look ups may be just as expensive.
return [[ARTSolidColor alloc] initWithArray:arr];
case 1: // linear gradient
return [[ARTLinearGradient alloc] initWithArray:arr];
case 2: // radial gradient
return [[ARTRadialGradient alloc] initWithArray:arr];
case 3: // pattern
return [[ARTPattern alloc] initWithArray:arr];
default:
RCTLogError(@"Unknown brush type: %llu", (unsigned long long)type);
return nil;
}
}
+ (CGPoint)CGPoint:(id)json offset:(NSUInteger)offset
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset + 2) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(2 + offset), arr);
return CGPointZero;
}
return (CGPoint){
[self CGFloat:arr[offset]],
[self CGFloat:arr[offset + 1]],
};
}
+ (CGRect)CGRect:(id)json offset:(NSUInteger)offset
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset + 4) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(4 + offset), arr);
return CGRectZero;
}
return (CGRect){
{[self CGFloat:arr[offset]], [self CGFloat:arr[offset + 1]]},
{[self CGFloat:arr[offset + 2]], [self CGFloat:arr[offset + 3]]},
};
}
+ (CGColorRef)CGColor:(id)json offset:(NSUInteger)offset
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset + 4) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)(4 + offset), arr);
return NULL;
}
return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]];
}
+ (CGGradientRef)CGGradient:(id)json offset:(NSUInteger)offset
{
NSArray *arr = [self NSArray:json];
if (arr.count < offset) {
RCTLogError(@"Too few elements in array (expected at least %llu): %@", (unsigned long long)offset, arr);
return NULL;
}
arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}];
ARTCGFloatArray colorsAndOffsets = [self ARTCGFloatArray:arr];
size_t stops = colorsAndOffsets.count / 5;
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(
rgb,
colorsAndOffsets.array,
colorsAndOffsets.array + stops * 4,
stops
);
CGColorSpaceRelease(rgb);
free(colorsAndOffsets.array);
return (CGGradientRef)CFAutorelease(gradient);
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactNativeART
*/
'use strict';
var Color = require('art/core/color');
var Path = require('ARTSerializablePath');
var Transform = require('art/core/transform');
var React = require('React');
var PropTypes = require('prop-types');
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
var createReactNativeComponentClass = require('createReactNativeComponentClass');
var merge = require('merge');
var invariant = require('fbjs/lib/invariant');
// Diff Helpers
function arrayDiffer(a, b) {
if (a == null || b == null) {
return true;
}
if (a.length !== b.length) {
return true;
}
for (var i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return true;
}
}
return false;
}
function fontAndLinesDiffer(a, b) {
if (a === b) {
return false;
}
if (a.font !== b.font) {
if (a.font === null) {
return true;
}
if (b.font === null) {
return true;
}
if (
a.font.fontFamily !== b.font.fontFamily ||
a.font.fontSize !== b.font.fontSize ||
a.font.fontWeight !== b.font.fontWeight ||
a.font.fontStyle !== b.font.fontStyle
) {
return true;
}
}
return arrayDiffer(a.lines, b.lines);
}
// Native Attributes
var SurfaceViewAttributes = merge(ReactNativeViewAttributes.UIView, {
// This should contain pixel information such as width, height and
// resolution to know what kind of buffer needs to be allocated.
// Currently we rely on UIViews and style to figure that out.
});
var NodeAttributes = {
transform: { diff: arrayDiffer },
opacity: true,
};
var GroupAttributes = merge(NodeAttributes, {
clipping: { diff: arrayDiffer }
});
var RenderableAttributes = merge(NodeAttributes, {
fill: { diff: arrayDiffer },
stroke: { diff: arrayDiffer },
strokeWidth: true,
strokeCap: true,
strokeJoin: true,
strokeDash: { diff: arrayDiffer },
});
var ShapeAttributes = merge(RenderableAttributes, {
d: { diff: arrayDiffer },
});
var TextAttributes = merge(RenderableAttributes, {
alignment: true,
frame: { diff: fontAndLinesDiffer },
path: { diff: arrayDiffer }
});
// Native Components
var NativeSurfaceView = createReactNativeComponentClass('ARTSurfaceView',
() => ({
validAttributes: SurfaceViewAttributes,
uiViewClassName: 'ARTSurfaceView',
}));
var NativeGroup = createReactNativeComponentClass('ARTGroup',
() => ({
validAttributes: GroupAttributes,
uiViewClassName: 'ARTGroup',
}));
var NativeShape = createReactNativeComponentClass('ARTShape',
() => ({
validAttributes: ShapeAttributes,
uiViewClassName: 'ARTShape',
}));
var NativeText = createReactNativeComponentClass('ARTText',
() => ({
validAttributes: TextAttributes,
uiViewClassName: 'ARTText',
}));
// Utilities
function childrenAsString(children) {
if (!children) {
return '';
}
if (typeof children === 'string') {
return children;
}
if (children.length) {
return children.join('\n');
}
return '';
}
// Surface - Root node of all ART
class Surface extends React.Component {
static childContextTypes = {
isInSurface: PropTypes.bool,
};
getChildContext() {
return { isInSurface: true };
}
render() {
var props = this.props;
var w = extractNumber(props.width, 0);
var h = extractNumber(props.height, 0);
return (
<NativeSurfaceView style={[props.style, { width: w, height: h }]}>
{this.props.children}
</NativeSurfaceView>
);
}
}
// Node Props
// TODO: The desktop version of ART has title and cursor. We should have
// accessibility support here too even though hovering doesn't work.
function extractNumber(value, defaultValue) {
if (value == null) {
return defaultValue;
}
return +value;
}
var pooledTransform = new Transform();
function extractTransform(props) {
var scaleX = props.scaleX != null ? props.scaleX :
props.scale != null ? props.scale : 1;
var scaleY = props.scaleY != null ? props.scaleY :
props.scale != null ? props.scale : 1;
pooledTransform
.transformTo(1, 0, 0, 1, 0, 0)
.move(props.x || 0, props.y || 0)
.rotate(props.rotation || 0, props.originX, props.originY)
.scale(scaleX, scaleY, props.originX, props.originY);
if (props.transform != null) {
pooledTransform.transform(props.transform);
}
return [
pooledTransform.xx, pooledTransform.yx,
pooledTransform.xy, pooledTransform.yy,
pooledTransform.x, pooledTransform.y,
];
}
function extractOpacity(props) {
// TODO: visible === false should also have no hit detection
if (props.visible === false) {
return 0;
}
if (props.opacity == null) {
return 1;
}
return +props.opacity;
}
// Groups
// Note: ART has a notion of width and height on Group but AFAIK it's a noop in
// ReactART.
class Group extends React.Component {
static contextTypes = {
isInSurface: PropTypes.bool.isRequired,
};
render() {
var props = this.props;
invariant(
this.context.isInSurface,
'ART: <Group /> must be a child of a <Surface />'
);
return (
<NativeGroup
opacity={extractOpacity(props)}
transform={extractTransform(props)}>
{this.props.children}
</NativeGroup>
);
}
}
class ClippingRectangle extends React.Component {
render() {
var props = this.props;
var x = extractNumber(props.x, 0);
var y = extractNumber(props.y, 0);
var w = extractNumber(props.width, 0);
var h = extractNumber(props.height, 0);
var clipping = [x, y, w, h];
// The current clipping API requires x and y to be ignored in the transform
var propsExcludingXAndY = merge(props);
delete propsExcludingXAndY.x;
delete propsExcludingXAndY.y;
return (
<NativeGroup
clipping={clipping}
opacity={extractOpacity(props)}
transform={extractTransform(propsExcludingXAndY)}>
{this.props.children}
</NativeGroup>
);
}
}
// Renderables
var SOLID_COLOR = 0;
var LINEAR_GRADIENT = 1;
var RADIAL_GRADIENT = 2;
var PATTERN = 3;
function insertColorIntoArray(color, targetArray, atIndex) {
var c = new Color(color);
targetArray[atIndex + 0] = c.red / 255;
targetArray[atIndex + 1] = c.green / 255;
targetArray[atIndex + 2] = c.blue / 255;
targetArray[atIndex + 3] = c.alpha;
}
function insertColorsIntoArray(stops, targetArray, atIndex) {
var i = 0;
if ('length' in stops) {
while (i < stops.length) {
insertColorIntoArray(stops[i], targetArray, atIndex + i * 4);
i++;
}
} else {
for (var offset in stops) {
insertColorIntoArray(stops[offset], targetArray, atIndex + i * 4);
i++;
}
}
return atIndex + i * 4;
}
function insertOffsetsIntoArray(stops, targetArray, atIndex, multi, reverse) {
var offsetNumber;
var i = 0;
if ('length' in stops) {
while (i < stops.length) {
offsetNumber = i / (stops.length - 1) * multi;
targetArray[atIndex + i] = reverse ? 1 - offsetNumber : offsetNumber;
i++;
}
} else {
for (var offsetString in stops) {
offsetNumber = (+offsetString) * multi;
targetArray[atIndex + i] = reverse ? 1 - offsetNumber : offsetNumber;
i++;
}
}
return atIndex + i;
}
function insertColorStopsIntoArray(stops, targetArray, atIndex) {
var lastIndex = insertColorsIntoArray(stops, targetArray, atIndex);
insertOffsetsIntoArray(stops, targetArray, lastIndex, 1, false);
}
function insertDoubleColorStopsIntoArray(stops, targetArray, atIndex) {
var lastIndex = insertColorsIntoArray(stops, targetArray, atIndex);
lastIndex = insertColorsIntoArray(stops, targetArray, lastIndex);
lastIndex = insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, false);
insertOffsetsIntoArray(stops, targetArray, lastIndex, 0.5, true);
}
function applyBoundingBoxToBrushData(brushData, props) {
var type = brushData[0];
var width = +props.width;
var height = +props.height;
if (type === LINEAR_GRADIENT) {
brushData[1] *= width;
brushData[2] *= height;
brushData[3] *= width;
brushData[4] *= height;
} else if (type === RADIAL_GRADIENT) {
brushData[1] *= width;
brushData[2] *= height;
brushData[3] *= width;
brushData[4] *= height;
brushData[5] *= width;
brushData[6] *= height;
} else if (type === PATTERN) {
// todo
}
}
function extractBrush(colorOrBrush, props) {
if (colorOrBrush == null) {
return null;
}
if (colorOrBrush._brush) {
if (colorOrBrush._bb) {
// The legacy API for Gradients allow for the bounding box to be used
// as a convenience for specifying gradient positions. This should be
// deprecated. It's not properly implemented in canvas mode. ReactART
// doesn't handle update to the bounding box correctly. That's why we
// mutate this so that if it's reused, we reuse the same resolved box.
applyBoundingBoxToBrushData(colorOrBrush._brush, props);
colorOrBrush._bb = false;
}
return colorOrBrush._brush;
}
var c = new Color(colorOrBrush);
return [SOLID_COLOR, c.red / 255, c.green / 255, c.blue / 255, c.alpha];
}
function extractColor(color) {
if (color == null) {
return null;
}
var c = new Color(color);
return [c.red / 255, c.green / 255, c.blue / 255, c.alpha];
}
function extractStrokeCap(strokeCap) {
switch (strokeCap) {
case 'butt': return 0;
case 'square': return 2;
default: return 1; // round
}
}
function extractStrokeJoin(strokeJoin) {
switch (strokeJoin) {
case 'miter': return 0;
case 'bevel': return 2;
default: return 1; // round
}
}
// Shape
// Note: ART has a notion of width and height on Shape but AFAIK it's a noop in
// ReactART.
class Shape extends React.Component {
render() {
var props = this.props;
var path = props.d || childrenAsString(props.children);
var d = (path instanceof Path ? path : new Path(path)).toJSON();
return (
<NativeShape
fill={extractBrush(props.fill, props)}
opacity={extractOpacity(props)}
stroke={extractColor(props.stroke)}
strokeCap={extractStrokeCap(props.strokeCap)}
strokeDash={props.strokeDash || null}
strokeJoin={extractStrokeJoin(props.strokeJoin)}
strokeWidth={extractNumber(props.strokeWidth, 1)}
transform={extractTransform(props)}
d={d}
/>
);
}
}
// Text
var cachedFontObjectsFromString = {};
var fontFamilyPrefix = /^[\s"']*/;
var fontFamilySuffix = /[\s"']*$/;
function extractSingleFontFamily(fontFamilyString) {
// ART on the web allows for multiple font-families to be specified.
// For compatibility, we extract the first font-family, hoping
// we'll get a match.
return fontFamilyString.split(',')[0]
.replace(fontFamilyPrefix, '')
.replace(fontFamilySuffix, '');
}
function parseFontString(font) {
if (cachedFontObjectsFromString.hasOwnProperty(font)) {
return cachedFontObjectsFromString[font];
}
var regexp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?)[ptexm\%]*(?:\s*\/.*?)?\s+)?\s*\"?([^\"]*)/i;
var match = regexp.exec(font);
if (!match) {
return null;
}
var fontFamily = extractSingleFontFamily(match[3]);
var fontSize = +match[2] || 12;
var isBold = /bold/.exec(match[1]);
var isItalic = /italic/.exec(match[1]);
cachedFontObjectsFromString[font] = {
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: isBold ? 'bold' : 'normal',
fontStyle: isItalic ? 'italic' : 'normal',
};
return cachedFontObjectsFromString[font];
}
function extractFont(font) {
if (font == null) {
return null;
}
if (typeof font === 'string') {
return parseFontString(font);
}
var fontFamily = extractSingleFontFamily(font.fontFamily);
var fontSize = +font.fontSize || 12;
var fontWeight = font.fontWeight != null ? font.fontWeight.toString() : '400';
return {
// Normalize
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: fontWeight,
fontStyle: font.fontStyle,
};
}
var newLine = /\n/g;
function extractFontAndLines(font, text) {
return { font: extractFont(font), lines: text.split(newLine) };
}
function extractAlignment(alignment) {
switch (alignment) {
case 'right':
return 1;
case 'center':
return 2;
default:
return 0;
}
}
class Text extends React.Component {
render() {
var props = this.props;
var path = props.path;
var textPath = path ? (path instanceof Path ? path : new Path(path)).toJSON() : null;
var textFrame = extractFontAndLines(
props.font,
childrenAsString(props.children)
);
return (
<NativeText
fill={extractBrush(props.fill, props)}
opacity={extractOpacity(props)}
stroke={extractColor(props.stroke)}
strokeCap={extractStrokeCap(props.strokeCap)}
strokeDash={props.strokeDash || null}
strokeJoin={extractStrokeJoin(props.strokeJoin)}
strokeWidth={extractNumber(props.strokeWidth, 1)}
transform={extractTransform(props)}
alignment={extractAlignment(props.alignment)}
frame={textFrame}
path={textPath}
/>
);
}
}
// Declarative fill type objects - API design not finalized
function LinearGradient(stops, x1, y1, x2, y2) {
var type = LINEAR_GRADIENT;
if (arguments.length < 5) {
var angle = ((x1 == null) ? 270 : x1) * Math.PI / 180;
var x = Math.cos(angle);
var y = -Math.sin(angle);
var l = (Math.abs(x) + Math.abs(y)) / 2;
x *= l; y *= l;
x1 = 0.5 - x;
x2 = 0.5 + x;
y1 = 0.5 - y;
y2 = 0.5 + y;
this._bb = true;
} else {
this._bb = false;
}
var brushData = [type, +x1, +y1, +x2, +y2];
insertColorStopsIntoArray(stops, brushData, 5);
this._brush = brushData;
}
function RadialGradient(stops, fx, fy, rx, ry, cx, cy) {
if (ry == null) {
ry = rx;
}
if (cx == null) {
cx = fx;
}
if (cy == null) {
cy = fy;
}
if (fx == null) {
// As a convenience we allow the whole radial gradient to cover the
// bounding box. We should consider dropping this API.
fx = fy = rx = ry = cx = cy = 0.5;
this._bb = true;
} else {
this._bb = false;
}
// The ART API expects the radial gradient to be repeated at the edges.
// To simulate this we render the gradient twice as large and add double
// color stops. Ideally this API would become more restrictive so that this
// extra work isn't needed.
var brushData = [RADIAL_GRADIENT, +fx, +fy, +rx * 2, +ry * 2, +cx, +cy];
insertDoubleColorStopsIntoArray(stops, brushData, 7);
this._brush = brushData;
}
function Pattern(url, width, height, left, top) {
this._brush = [PATTERN, url, +left || 0, +top || 0, +width, +height];
}
var ReactART = {
LinearGradient: LinearGradient,
RadialGradient: RadialGradient,
Pattern: Pattern,
Transform: Transform,
Path: Path,
Surface: Surface,
Group: Group,
ClippingRectangle: ClippingRectangle,
Shape: Shape,
Text: Text,
};
module.exports = ReactART;
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTNodeManager.h"
@interface ARTGroupManager : ARTNodeManager
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTGroupManager.h"
#import "ARTGroup.h"
#import "RCTConvert+ART.h"
@implementation ARTGroupManager
RCT_EXPORT_MODULE()
- (ARTNode *)node
{
return [ARTGroup new];
}
RCT_EXPORT_VIEW_PROPERTY(clipping, CGRect)
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <React/RCTViewManager.h>
@class ARTNode;
@interface ARTNodeManager : RCTViewManager
- (ARTNode *)node;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTNodeManager.h"
#import "ARTNode.h"
@implementation ARTNodeManager
RCT_EXPORT_MODULE()
- (ARTNode *)node
{
return [ARTNode new];
}
- (UIView *)view
{
return [self node];
}
- (RCTShadowView *)shadowView
{
return nil;
}
RCT_EXPORT_VIEW_PROPERTY(opacity, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(transform, CGAffineTransform)
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTNodeManager.h"
#import "ARTRenderable.h"
@interface ARTRenderableManager : ARTNodeManager
- (ARTRenderable *)node;
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTRenderableManager.h"
#import "RCTConvert+ART.h"
@implementation ARTRenderableManager
RCT_EXPORT_MODULE()
- (ARTRenderable *)node
{
return [ARTRenderable new];
}
RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(strokeCap, CGLineCap)
RCT_EXPORT_VIEW_PROPERTY(strokeJoin, CGLineJoin)
RCT_EXPORT_VIEW_PROPERTY(fill, ARTBrush)
RCT_EXPORT_VIEW_PROPERTY(stroke, CGColor)
RCT_EXPORT_VIEW_PROPERTY(strokeDash, ARTCGFloatArray)
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTRenderableManager.h"
@interface ARTShapeManager : ARTRenderableManager
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTShapeManager.h"
#import "ARTShape.h"
#import "RCTConvert+ART.h"
@implementation ARTShapeManager
RCT_EXPORT_MODULE()
- (ARTRenderable *)node
{
return [ARTShape new];
}
RCT_EXPORT_VIEW_PROPERTY(d, CGPath)
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <React/RCTViewManager.h>
@interface ARTSurfaceViewManager : RCTViewManager
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTSurfaceViewManager.h"
#import "ARTSurfaceView.h"
@implementation ARTSurfaceViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [ARTSurfaceView new];
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTRenderableManager.h"
@interface ARTTextManager : ARTRenderableManager
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "ARTTextManager.h"
#import "ARTText.h"
#import "RCTConvert+ART.h"
@implementation ARTTextManager
RCT_EXPORT_MODULE()
- (ARTRenderable *)node
{
return [ARTText new];
}
RCT_EXPORT_VIEW_PROPERTY(alignment, CTTextAlignment)
RCT_REMAP_VIEW_PROPERTY(frame, textFrame, ARTTextFrame)
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ActionSheetIOS
* @flow
* @format
*/
'use strict';
const RCTActionSheetManager = require('NativeModules').ActionSheetManager;
const invariant = require('fbjs/lib/invariant');
const processColor = require('processColor');
/**
* Display action sheets and share sheets on iOS.
*
* See http://facebook.github.io/react-native/docs/actionsheetios.html
*/
const ActionSheetIOS = {
/**
* Display an iOS action sheet.
*
* The `options` object must contain one or more of:
*
* - `options` (array of strings) - a list of button titles (required)
* - `cancelButtonIndex` (int) - index of cancel button in `options`
* - `destructiveButtonIndex` (int) - index of destructive button in `options`
* - `title` (string) - a title to show above the action sheet
* - `message` (string) - a message to show below the title
*
* The 'callback' function takes one parameter, the zero-based index
* of the selected item.
*
* See http://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions
*/
showActionSheetWithOptions(
options: {|
+title?: ?string,
+message?: ?string,
+options: Array<string>,
+destructiveButtonIndex?: ?number,
+cancelButtonIndex?: ?number,
+anchor?: ?number,
+tintColor?: number | string,
|},
callback: (buttonIndex: number) => void,
) {
invariant(
typeof options === 'object' && options !== null,
'Options must be a valid object',
);
invariant(typeof callback === 'function', 'Must provide a valid callback');
RCTActionSheetManager.showActionSheetWithOptions(
{...options, tintColor: processColor(options.tintColor)},
callback,
);
},
/**
* Display the iOS share sheet. The `options` object should contain
* one or both of `message` and `url` and can additionally have
* a `subject` or `excludedActivityTypes`:
*
* - `url` (string) - a URL to share
* - `message` (string) - a message to share
* - `subject` (string) - a subject for the message
* - `excludedActivityTypes` (array) - the activities to exclude from
* the ActionSheet
* - `tintColor` (color) - tint color of the buttons
*
* The 'failureCallback' function takes one parameter, an error object.
* The only property defined on this object is an optional `stack` property
* of type `string`.
*
* The 'successCallback' function takes two parameters:
*
* - a boolean value signifying success or failure
* - a string that, in the case of success, indicates the method of sharing
*
* See http://facebook.github.io/react-native/docs/actionsheetios.html#showshareactionsheetwithoptions
*/
showShareActionSheetWithOptions(
options: Object,
failureCallback: Function,
successCallback: Function,
) {
invariant(
typeof options === 'object' && options !== null,
'Options must be a valid object',
);
invariant(
typeof failureCallback === 'function',
'Must provide a valid failureCallback',
);
invariant(
typeof successCallback === 'function',
'Must provide a valid successCallback',
);
RCTActionSheetManager.showShareActionSheetWithOptions(
{...options, tintColor: processColor(options.tintColor)},
failureCallback,
successCallback,
);
},
};
module.exports = ActionSheetIOS;
... ...
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
14C644C41AB0DFC900DE3C65 /* RCTActionSheetManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 14C644C21AB0DFC900DE3C65 /* RCTActionSheetManager.m */; };
/* End PBXBuildFile section */
/* Begin PBXFileReference section */
134814201AA4EA6300B7C361 /* libRCTActionSheet.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTActionSheet.a; sourceTree = BUILT_PRODUCTS_DIR; };
14C644C11AB0DFC900DE3C65 /* RCTActionSheetManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; lineEnding = 0; path = RCTActionSheetManager.h; sourceTree = "<group>"; xcLanguageSpecificationIdentifier = xcode.lang.objcpp; };
14C644C21AB0DFC900DE3C65 /* RCTActionSheetManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTActionSheetManager.m; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXGroup section */
134814211AA4EA7D00B7C361 /* Products */ = {
isa = PBXGroup;
children = (
134814201AA4EA6300B7C361 /* libRCTActionSheet.a */,
);
name = Products;
sourceTree = "<group>";
};
58B511D21A9E6C8500147676 = {
isa = PBXGroup;
children = (
14C644C11AB0DFC900DE3C65 /* RCTActionSheetManager.h */,
14C644C21AB0DFC900DE3C65 /* RCTActionSheetManager.m */,
134814211AA4EA7D00B7C361 /* Products */,
);
indentWidth = 2;
sourceTree = "<group>";
tabWidth = 2;
usesTabs = 0;
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
58B511DA1A9E6C8500147676 /* RCTActionSheet */ = {
isa = PBXNativeTarget;
buildConfigurationList = 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "RCTActionSheet" */;
buildPhases = (
58B511D71A9E6C8500147676 /* Sources */,
);
buildRules = (
);
dependencies = (
);
name = RCTActionSheet;
productName = RCTDataManager;
productReference = 134814201AA4EA6300B7C361 /* libRCTActionSheet.a */;
productType = "com.apple.product-type.library.static";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
58B511D31A9E6C8500147676 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
58B511DA1A9E6C8500147676 = {
CreatedOnToolsVersion = 6.1.1;
};
};
};
buildConfigurationList = 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "RCTActionSheet" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
);
mainGroup = 58B511D21A9E6C8500147676;
productRefGroup = 58B511D21A9E6C8500147676;
projectDirPath = "";
projectRoot = "";
targets = (
58B511DA1A9E6C8500147676 /* RCTActionSheet */,
);
};
/* End PBXProject section */
/* Begin PBXSourcesBuildPhase section */
58B511D71A9E6C8500147676 /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
14C644C41AB0DFC900DE3C65 /* RCTActionSheetManager.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin XCBuildConfiguration section */
58B511ED1A9E6C8500147676 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_INITIALIZER_NOT_FULLY_BRACKETED = YES;
GCC_WARN_SHADOW = YES;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
SKIP_INSTALL = YES;
WARNING_CFLAGS = (
"-Werror",
"-Wall",
);
};
name = Debug;
};
58B511EE1A9E6C8500147676 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_INITIALIZER_NOT_FULLY_BRACKETED = YES;
GCC_WARN_SHADOW = YES;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
SKIP_INSTALL = YES;
VALIDATE_PRODUCT = YES;
WARNING_CFLAGS = (
"-Werror",
"-Wall",
);
};
name = Release;
};
58B511F01A9E6C8500147676 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
CLANG_STATIC_ANALYZER_MODE = deep;
LIBRARY_SEARCH_PATHS = "$(inherited)";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = RCTActionSheet;
RUN_CLANG_STATIC_ANALYZER = YES;
};
name = Debug;
};
58B511F11A9E6C8500147676 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
CLANG_STATIC_ANALYZER_MODE = deep;
LIBRARY_SEARCH_PATHS = "$(inherited)";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = RCTActionSheet;
RUN_CLANG_STATIC_ANALYZER = NO;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "RCTActionSheet" */ = {
isa = XCConfigurationList;
buildConfigurations = (
58B511ED1A9E6C8500147676 /* Debug */,
58B511EE1A9E6C8500147676 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "RCTActionSheet" */ = {
isa = XCConfigurationList;
buildConfigurations = (
58B511F01A9E6C8500147676 /* Debug */,
58B511F11A9E6C8500147676 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 58B511D31A9E6C8500147676 /* Project object */;
}
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <UIKit/UIKit.h>
#import <React/RCTBridge.h>
@interface RCTActionSheetManager : NSObject <RCTBridgeModule>
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTActionSheetManager.h"
#import <React/RCTBridge.h>
#import <React/RCTConvert.h>
#import <React/RCTLog.h>
#import <React/RCTUIManager.h>
#import <React/RCTUtils.h>
@interface RCTActionSheetManager () <UIActionSheetDelegate>
@end
@implementation RCTActionSheetManager
{
// Use NSMapTable, as UIAlertViews do not implement <NSCopying>
// which is required for NSDictionary keys
NSMapTable *_callbacks;
}
RCT_EXPORT_MODULE()
@synthesize bridge = _bridge;
- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();
}
/*
* The `anchor` option takes a view to set as the anchor for the share
* popup to point to, on iPads running iOS 8. If it is not passed, it
* defaults to centering the share popup on screen without any arrows.
*/
- (CGRect)sourceRectInView:(UIView *)sourceView
anchorViewTag:(NSNumber *)anchorViewTag
{
if (anchorViewTag) {
UIView *anchorView = [self.bridge.uiManager viewForReactTag:anchorViewTag];
return [anchorView convertRect:anchorView.bounds toView:sourceView];
} else {
return (CGRect){sourceView.center, {1, 1}};
}
}
RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
callback:(RCTResponseSenderBlock)callback)
{
if (RCTRunningInAppExtension()) {
RCTLogError(@"Unable to show action sheet from app extension");
return;
}
if (!_callbacks) {
_callbacks = [NSMapTable strongToStrongObjectsMapTable];
}
NSString *title = [RCTConvert NSString:options[@"title"]];
NSString *message = [RCTConvert NSString:options[@"message"]];
NSArray<NSString *> *buttons = [RCTConvert NSStringArray:options[@"options"]];
NSInteger destructiveButtonIndex = options[@"destructiveButtonIndex"] ? [RCTConvert NSInteger:options[@"destructiveButtonIndex"]] : -1;
NSInteger cancelButtonIndex = options[@"cancelButtonIndex"] ? [RCTConvert NSInteger:options[@"cancelButtonIndex"]] : -1;
UIViewController *controller = RCTPresentedViewController();
if (controller == nil) {
RCTLogError(@"Tried to display action sheet but there is no application window. options: %@", options);
return;
}
/*
* The `anchor` option takes a view to set as the anchor for the share
* popup to point to, on iPads running iOS 8. If it is not passed, it
* defaults to centering the share popup on screen without any arrows.
*/
NSNumber *anchorViewTag = [RCTConvert NSNumber:options[@"anchor"]];
UIView *sourceView = controller.view;
CGRect sourceRect = [self sourceRectInView:sourceView anchorViewTag:anchorViewTag];
UIAlertController *alertController =
[UIAlertController alertControllerWithTitle:title
message:message
preferredStyle:UIAlertControllerStyleActionSheet];
NSInteger index = 0;
for (NSString *option in buttons) {
UIAlertActionStyle style = UIAlertActionStyleDefault;
if (index == destructiveButtonIndex) {
style = UIAlertActionStyleDestructive;
} else if (index == cancelButtonIndex) {
style = UIAlertActionStyleCancel;
}
NSInteger localIndex = index;
[alertController addAction:[UIAlertAction actionWithTitle:option
style:style
handler:^(__unused UIAlertAction *action){
callback(@[@(localIndex)]);
}]];
index++;
}
alertController.modalPresentationStyle = UIModalPresentationPopover;
alertController.popoverPresentationController.sourceView = sourceView;
alertController.popoverPresentationController.sourceRect = sourceRect;
if (!anchorViewTag) {
alertController.popoverPresentationController.permittedArrowDirections = 0;
}
[controller presentViewController:alertController animated:YES completion:nil];
alertController.view.tintColor = [RCTConvert UIColor:options[@"tintColor"]];
}
RCT_EXPORT_METHOD(showShareActionSheetWithOptions:(NSDictionary *)options
failureCallback:(RCTResponseErrorBlock)failureCallback
successCallback:(RCTResponseSenderBlock)successCallback)
{
if (RCTRunningInAppExtension()) {
RCTLogError(@"Unable to show action sheet from app extension");
return;
}
NSMutableArray<id> *items = [NSMutableArray array];
NSString *message = [RCTConvert NSString:options[@"message"]];
if (message) {
[items addObject:message];
}
NSURL *URL = [RCTConvert NSURL:options[@"url"]];
if (URL) {
if ([URL.scheme.lowercaseString isEqualToString:@"data"]) {
NSError *error;
NSData *data = [NSData dataWithContentsOfURL:URL
options:(NSDataReadingOptions)0
error:&error];
if (!data) {
failureCallback(error);
return;
}
[items addObject:data];
} else {
[items addObject:URL];
}
}
if (items.count == 0) {
RCTLogError(@"No `url` or `message` to share");
return;
}
UIActivityViewController *shareController = [[UIActivityViewController alloc] initWithActivityItems:items applicationActivities:nil];
NSString *subject = [RCTConvert NSString:options[@"subject"]];
if (subject) {
[shareController setValue:subject forKey:@"subject"];
}
NSArray *excludedActivityTypes = [RCTConvert NSStringArray:options[@"excludedActivityTypes"]];
if (excludedActivityTypes) {
shareController.excludedActivityTypes = excludedActivityTypes;
}
UIViewController *controller = RCTPresentedViewController();
shareController.completionWithItemsHandler = ^(NSString *activityType, BOOL completed, __unused NSArray *returnedItems, NSError *activityError) {
if (activityError) {
failureCallback(activityError);
} else {
successCallback(@[@(completed), RCTNullIfNil(activityType)]);
}
};
shareController.modalPresentationStyle = UIModalPresentationPopover;
NSNumber *anchorViewTag = [RCTConvert NSNumber:options[@"anchor"]];
if (!anchorViewTag) {
shareController.popoverPresentationController.permittedArrowDirections = 0;
}
shareController.popoverPresentationController.sourceView = controller.view;
shareController.popoverPresentationController.sourceRect = [self sourceRectInView:controller.view anchorViewTag:anchorViewTag];
[controller presentViewController:shareController animated:YES completion:nil];
shareController.view.tintColor = [RCTConvert UIColor:options[@"tintColor"]];
}
#pragma mark UIActionSheetDelegate Methods
- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
RCTResponseSenderBlock callback = [_callbacks objectForKey:actionSheet];
if (callback) {
callback(@[@(buttonIndex)]);
[_callbacks removeObjectForKey:actionSheet];
} else {
RCTLogWarn(@"No callback registered for action sheet: %@", actionSheet.title);
}
}
@end
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule Alert
* @flow
*/
'use strict';
const AlertIOS = require('AlertIOS');
const NativeModules = require('NativeModules');
const Platform = require('Platform');
import type { AlertType, AlertButtonStyle } from 'AlertIOS';
export type Buttons = Array<{
text?: string,
onPress?: ?Function,
style?: AlertButtonStyle,
}>;
type Options = {
cancelable?: ?boolean,
onDismiss?: ?Function,
};
/**
* Launches an alert dialog with the specified title and message.
*
* See http://facebook.github.io/react-native/docs/alert.html
*/
class Alert {
/**
* Launches an alert dialog with the specified title and message.
*
* See http://facebook.github.io/react-native/docs/alert.html#alert
*/
static alert(
title: ?string,
message?: ?string,
buttons?: Buttons,
options?: Options,
type?: AlertType,
): void {
if (Platform.OS === 'ios') {
if (typeof type !== 'undefined') {
console.warn('Alert.alert() with a 5th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
AlertIOS.alert(title, message, buttons, type);
return;
}
AlertIOS.alert(title, message, buttons);
} else if (Platform.OS === 'android') {
AlertAndroid.alert(title, message, buttons, options);
}
}
}
/**
* Wrapper around the Android native module.
*/
class AlertAndroid {
static alert(
title: ?string,
message?: ?string,
buttons?: Buttons,
options?: Options,
): void {
var config = {
title: title || '',
message: message || '',
};
if (options) {
config = {...config, cancelable: options.cancelable};
}
// At most three buttons (neutral, negative, positive). Ignore rest.
// The text 'OK' should be probably localized. iOS Alert does that in native.
var validButtons: Buttons = buttons ? buttons.slice(0, 3) : [{text: 'OK'}];
var buttonPositive = validButtons.pop();
var buttonNegative = validButtons.pop();
var buttonNeutral = validButtons.pop();
if (buttonNeutral) {
config = {...config, buttonNeutral: buttonNeutral.text || '' };
}
if (buttonNegative) {
config = {...config, buttonNegative: buttonNegative.text || '' };
}
if (buttonPositive) {
config = {...config, buttonPositive: buttonPositive.text || '' };
}
NativeModules.DialogManagerAndroid.showAlert(
config,
(errorMessage) => console.warn(errorMessage),
(action, buttonKey) => {
if (action === NativeModules.DialogManagerAndroid.buttonClicked) {
if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) {
buttonNeutral.onPress && buttonNeutral.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) {
buttonNegative.onPress && buttonNegative.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) {
buttonPositive.onPress && buttonPositive.onPress();
}
} else if (action === NativeModules.DialogManagerAndroid.dismissed) {
options && options.onDismiss && options.onDismiss();
}
}
);
}
}
module.exports = Alert;
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule AlertIOS
* @flow
* @jsdoc
*/
'use strict';
var RCTAlertManager = require('NativeModules').AlertManager;
/**
* An Alert button type
*/
export type AlertType = $Enum<{
/**
* Default alert with no inputs
*/
'default': string,
/**
* Plain text input alert
*/
'plain-text': string,
/**
* Secure text input alert
*/
'secure-text': string,
/**
* Login and password alert
*/
'login-password': string,
}>;
/**
* An Alert button style
*/
export type AlertButtonStyle = $Enum<{
/**
* Default button style
*/
'default': string,
/**
* Cancel button style
*/
'cancel': string,
/**
* Destructive button style
*/
'destructive': string,
}>;
/**
* Array or buttons
* @typedef {Array} ButtonsArray
* @property {string=} text Button label
* @property {Function=} onPress Callback function when button pressed
* @property {AlertButtonStyle=} style Button style
*/
export type ButtonsArray = Array<{
/**
* Button label
*/
text?: string,
/**
* Callback function when button pressed
*/
onPress?: ?Function,
/**
* Button style
*/
style?: AlertButtonStyle,
}>;
/**
* Use `AlertIOS` to display an alert dialog with a message or to create a prompt for user input on iOS. If you don't need to prompt for user input, we recommend using `Alert.alert() for cross-platform support.
*
* See http://facebook.github.io/react-native/docs/alertios.html
*/
class AlertIOS {
/**
* Create and display a popup alert.
*
* See http://facebook.github.io/react-native/docs/alertios.html#alert
*/
static alert(
title: ?string,
message?: ?string,
callbackOrButtons?: ?(() => void) | ButtonsArray,
type?: AlertType,
): void {
if (typeof type !== 'undefined') {
console.warn('AlertIOS.alert() with a 4th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.');
this.prompt(title, message, callbackOrButtons, type);
return;
}
this.prompt(title, message, callbackOrButtons, 'default');
}
/**
* Create and display a prompt to enter some text.
*
* See http://facebook.github.io/react-native/docs/alertios.html#prompt
*/
static prompt(
title: ?string,
message?: ?string,
callbackOrButtons?: ?((text: string) => void) | ButtonsArray,
type?: ?AlertType = 'plain-text',
defaultValue?: string,
keyboardType?: string
): void {
if (typeof type === 'function') {
console.warn(
'You passed a callback function as the "type" argument to AlertIOS.prompt(). React Native is ' +
'assuming you want to use the deprecated AlertIOS.prompt(title, defaultValue, buttons, callback) ' +
'signature. The current signature is AlertIOS.prompt(title, message, callbackOrButtons, type, defaultValue, ' +
'keyboardType) and the old syntax will be removed in a future version.');
var callback = type;
var defaultValue = message;
RCTAlertManager.alertWithArgs({
title: title || '',
type: 'plain-text',
defaultValue,
}, (id, value) => {
callback(value);
});
return;
}
var callbacks = [];
var buttons = [];
var cancelButtonKey;
var destructiveButtonKey;
if (typeof callbackOrButtons === 'function') {
callbacks = [callbackOrButtons];
}
else if (callbackOrButtons instanceof Array) {
callbackOrButtons.forEach((btn, index) => {
callbacks[index] = btn.onPress;
if (btn.style === 'cancel') {
cancelButtonKey = String(index);
} else if (btn.style === 'destructive') {
destructiveButtonKey = String(index);
}
if (btn.text || index < (callbackOrButtons || []).length - 1) {
var btnDef = {};
btnDef[index] = btn.text || '';
buttons.push(btnDef);
}
});
}
RCTAlertManager.alertWithArgs({
title: title || '',
message: message || undefined,
buttons,
type: type || undefined,
defaultValue,
cancelButtonKey,
destructiveButtonKey,
keyboardType,
}, (id, value) => {
var cb = callbacks[id];
cb && cb(value);
});
}
}
module.exports = AlertIOS;
... ...
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule RCTAlertManager
*/
'use strict';
var NativeModules = require('NativeModules');
function emptyCallback() {}
module.exports = {
alertWithArgs: function(args, callback) {
// TODO(5998984): Polyfill it correctly with DialogManagerAndroid
NativeModules.DialogManagerAndroid.showAlert(
args,
emptyCallback,
callback || emptyCallback);
},
};
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule RCTAlertManager
* @flow
*/
'use strict';
var RCTAlertManager = require('NativeModules').AlertManager;
module.exports = RCTAlertManager;
... ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Animated</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<script src="https://fb.me/react-with-addons-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="../release/dist/animated.js"></script>
<style>
</style>
<script>
var TOTAL_EXAMPLES = 0;
function example() {
var scripts = document.getElementsByTagName('script');
var last = scripts[scripts.length - 2];
last.className = 'Example' + (++TOTAL_EXAMPLES);
}
</script>
<script type="text/jsx;harmony=true;stripTypes=true">
var HorizontalPan = function(anim, config) {
config = config || {};
return {
onMouseDown: function(event) {
anim.stopAnimation(startValue => {
config.onStart && config.onStart();
var startPosition = event.clientX;
var lastTime = Date.now();
var lastPosition = event.clientX;
var velocity = 0;
function updateVelocity(event) {
var now = Date.now();
if (event.clientX === lastPosition || now === lastTime) {
return;
}
velocity = (event.clientX - lastPosition) / (now - lastTime);
lastTime = now;
lastPosition = event.clientX;
}
var moveListener, upListener;
window.addEventListener('mousemove', moveListener = (event) => {
var value = startValue + (event.clientX - startPosition);
anim.setValue(value);
updateVelocity(event);
});
window.addEventListener('mouseup', upListener = (event) => {
updateVelocity(event);
window.removeEventListener('mousemove', moveListener);
window.removeEventListener('mouseup', upListener);
config.onEnd && config.onEnd({velocity});
});
});
}
}
};
var EXAMPLE_COUNT = 0;
function examplify(Component) {
if (EXAMPLE_COUNT) {
var previousScript = document.getElementsByClassName('Example' + EXAMPLE_COUNT)[0].innerText;
} else {
var previousScript = `
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0), // ignore
};
},
render: function() {
return (
<Animated.div // ignore
style={{left: this.state.anim}} // ignore
className="circle"
/>
);
},
}));
`;
}
var script = document.getElementsByClassName('Example' + ++EXAMPLE_COUNT)[0];
var previousLines = {};
previousScript.split(/\n/g).forEach(line => { previousLines[line.trim()] = 1; });
var code = document.createElement('div');
script.parentNode.insertBefore(code, script);
var Example = React.createClass({
render() {
return (
<div className="code">
<div className="example">
<button
className="reset"
onClick={() => this.forceUpdate()}>
Reset
</button>
<Component key={Math.random()} />
</div>
<hr />
<pre>{'React.createClass({'}</pre>
{script.innerText
.trim()
.split(/\n/g)
.slice(1, -1)
.map(line =>
<pre
className={!previousLines[line.trim()] && 'highlight'}>
{line}
</pre>
)
}
<pre>{'});'}</pre>
</div>
);
}
})
React.render(<Example />, code);
}
</script>
</head>
<body>
<div class="container">
<h1>Animated</h1>
<p>Animations have for a long time been a weak point of the React ecosystem. The <code>Animated</code> library aims at solving this problem. It embraces the declarative aspect of React and obtains performance by using raw DOM manipulation behind the scenes instead of the usual diff.</p>
<h2>Animated.Value</h2>
<p>The basic building block of this library is <code>Animated.Value</code>. This is a variable that's going to drive the animation. You use it like a normal value in <code>style</code> attribute. Only animated components such as <code>Animated.div</code> will understand it.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(100),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
/>
);
},
}));
</script><script>example();</script>
<h2>setValue</h2>
<p>As you can see, the value is being used inside of <code>render()</code> as you would expect. However, you don't call <code>setState()</code> in order to update the value. Instead, you can call <code>setValue()</code> directly on the value itself. We are using a form of data binding.</p>
<p>The <code>Animated.div</code> component when rendered tracks which animated values it received. This way, whenever that value changes, we don't need to re-render the entire component, we can directly update the specific style attribute that changed.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
handleClick: function() {
this.state.anim.setValue(400);
},
}));
</script><script>example();</script>
<h2>Animated.timing</h2>
<p>Now that we understand how the system works, let's play with some animations! The hello world of animations is to move the element somewhere else. To do that, we're going to animate the value from the current value 0 to the value 400.</p>
<p>On every frame (via <code>requestAnimationFrame</code>), the <code>timing</code> animation is going to figure out the new value based on the current time, update the animated value which in turn is going to update the corresponding DOM node.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
handleClick: function() {
Animated.timing(this.state.anim, {toValue: 400}).start();
},
}));
</script><script>example();</script>
<h2>Interrupt Animations</h2>
<p>As a developer, the mental model is that most animations are fire and forget. When the user presses the button, you want it to shrink to 80% and when she releases, you want it to go back to 100%.</p>
<p>There are multiple challenges to implement this correctly. You need to stop the current animation, grab the current value and restart an animation from there. As this is pretty tedious to do manually, <code>Animated</code> will do that automatically for you.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{transform: [{scale: this.state.anim}]}}
className="circle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}>
Press
</Animated.div>
);
},
handleMouseDown: function() {
Animated.timing(this.state.anim, { toValue: 0.8 }).start();
},
handleMouseUp: function() {
Animated.timing(this.state.anim, { toValue: 1 }).start();
},
}));
</script><script>example();</script>
<h2>Animated.spring</h2>
<p>Unfortunately, the <code>timing</code> animation doesn't feel good. The main reason is that no matter how far you are in the animation, it will trigger a new one with always the same duration.</p>
<p>The commonly used solution for this problem is to use the equation of a real-world spring. Imagine that you attach a spring to the target value, stretch it to the current value and let it go. The spring movement is going to be the same as the update.</p>
<p>It turns out that this model is useful in a very wide range of animations. I highly recommend you to always start with a <code>spring</code> animation instead of a <code>timing</code> animation. It will make your interface feels much better.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{transform: [{scale: this.state.anim}]}}
className="circle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}>
Press
</Animated.div>
);
},
handleMouseDown: function() {
Animated.spring(this.state.anim, { toValue: 0.8 }).start();
},
handleMouseUp: function() {
Animated.spring(this.state.anim, { toValue: 1 }).start();
},
}));
</script><script>example();</script>
<h2>interpolate</h2>
<p>It is very common to animate multiple attributes during the same animation. The usual way to implement it is to start a separate animation for each of the attribute. The downside is that you now have to manage a different state per attribute which is not ideal.</p>
<p>With <code>Animated</code>, you can use a single state variable and render it in multiple attributes. When the value is updated, all the places will reflect the change.</p>
<p>In the following example, we're going to model the animation with a variable where 1 means fully visible and 0 means fully hidden. We can pass it directly to the scale attribute as the ranges match. But for the rotation, we need to convert [0 ; 1] range to [260deg ; 0deg]. This is where <code>interpolate()</code> comes handy.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{
transform: [
{rotate: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: ['260deg', '0deg']
})},
{scale: this.state.anim},
]
}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
handleClick: function() {
Animated.spring(this.state.anim, {toValue: 0}).start();
}
}));
</script><script>example();</script>
<h2>stopAnimation</h2>
<p>The reason why we can get away with not calling <code>render()</code> and instead modify the DOM directly on updates is because the animated values are <strong>opaque</strong>. In render, <strong>you cannot know the current value</strong>, which prevents you from being able to modify the structure of the DOM.</p>
<p><code>Animated</code> can offload the animation to a different thread (CoreAnimation, CSS transitions, main thread...) and we don't have a good way to know the real value. If you try to query the value then modify it, you are going to be out of sync and the result will look terrible.</p>
<p>There's however one exception: when you want to stop the current animation. You need to know where it stopped in order to continue from there. We cannot know the value synchronously so we give it via a callback in <code>stopAnimation</code>. It will not suffer from being out of sync since the animation is no longer running.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0)
};
},
render: function() {
return (
<div>
<button onClick={() => this.handleClick(-1)}>&lt;</button>
<Animated.div
style={{
transform: [
{rotate: this.state.anim.interpolate({
inputRange: [0, 4],
outputRange: ['0deg', '360deg']
})},
],
position: 'relative'
}}
className="circle"
/>
<button onClick={() => this.handleClick(+1)}>&gt;</button>
</div>
);
},
handleClick: function(delta) {
this.state.anim.stopAnimation(value => {
Animated.spring(this.state.anim, {
toValue: Math.round(value) + delta
}).start();
});
},
}));
</script><script>example();</script>
<h1>Gesture-based Animations</h1>
<p>Most animations libraries only deal with time-based animations. But, as we move to mobile, a lot of animations are also gesture driven. Even more problematic, they often switch between both modes: once the gesture is over, you start a time-based animation using the same interpolations.</p>
<p><code>Animated</code> has been designed with this use case in mind. The key aspect is that there are three distinct and separate concepts: inputs, value, output. The same value can be updated either from a time-based animation or a gesture-based one. Because we use this intermediate representation for the animation, we can keep the same rendering as output.</p>
<h2>HorizontalPan</h2>
<p>The code needed to drag elements around is very messy with the DOM APIs. On mousedown, you need to register a mousemove listener on window otherwise you may drop touches if you move too fast. <code>removeEventListener</code> takes the same arguments as <code>addEventListener</code> instead of an id like <code>clearTimeout</code>. It's also really easy to forget to remove a listener and have a leak. And finally, you need to store the current position and value at the beginning and update only compared to it.</p>
<p>We introduce a little helper called <code>HorizontalPan</code> which handles all this annoying code for us. It takes an <code>Animated.Value</code> as first argument and returns the event handlers required for it to work. We just have to bind this value to the <code>left</code> attribute and we're good to go.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
{...HorizontalPan(this.state.anim)}>
Drag
</Animated.div>
);
},
}));
</script><script>example();</script>
<h2>Animated.decay</h2>
<p>One of the big breakthrough of the iPhone is the fact that when you release the finger while scrolling, it will not abruptly stop but instead keep going for some time.</p>
<p>In order to implement this effect, we are using a second real-world simulation: an object moving on an icy surface. All it needs is two values: the current velocity and a deceleration coefficient. It is implemented by <code>Animated.decay</code>.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
{...HorizontalPan(this.state.anim, {
onEnd: this.handleEnd
})}>
Throw
</Animated.div>
);
},
handleEnd: function({velocity}) {
Animated.decay(this.state.anim, {velocity}).start();
}
}));
</script><script>example();</script>
<h2>Animation Chaining</h2>
<p>The target for an animation is usually a number but sometimes it is convenient to use another value as a target. This way, the first value will track the second. Using a spring animation, we can get a nice trailing effect.</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0));
Animated.spring(anims[0], {toValue: anims[1]}).start();
Animated.spring(anims[1], {toValue: anims[2]}).start();
Animated.spring(anims[2], {toValue: anims[3]}).start();
Animated.spring(anims[3], {toValue: anims[4]}).start();
return {
anims: anims,
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{left: anim}}
className="circle"
{...(i === 4 && HorizontalPan(anim, {
onEnd: this.handleEnd
}))}>
{i === 4 && 'Drag'}
</Animated.div>
)}
</div>
);
},
handleEnd: function({velocity}) {
Animated.decay(this.state.anims[4], {velocity}).start();
}
}));
</script><script>example();</script>
<h2>addListener</h2>
<p>As I said earlier, if you track a spring</p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(i * 100));
anims[0].addListener(this.handleChange);
return {
selected: null,
anims: anims,
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{
left: anim,
opacity: i === 0 || i === this.state.selected ? 1 : 0.5
}}
className="circle"
{...(i === 0 && HorizontalPan(anim, { onEnd: this.handleEnd }))}>
{i === 0 && 'Drag'}
{i === this.state.selected && 'Selected!'}
</Animated.div>
)}
</div>
);
},
handleChange: function({value}) {
var selected = null;
this.state.anims.forEach((_, i) => {
if (i !== 0 && i * 100 - 50 < value && value <= i * 100 + 50) {
selected = i;
}
});
if (selected !== this.state.selected) {
this.select(selected)
}
},
select(selected) {
this.setState({selected}, () => {
this.state.anims.forEach((anim, i) => {
if (i === 0) { return; }
if (selected === i) {
Animated.spring(anim, {toValue: this.state.anims[0]}).start();
} else {
Animated.spring(anim, {toValue: i * 100}).start();
}
});
});
},
handleEnd() {
this.select(null);
Animated.spring(this.state.anims[0], {toValue: 0}).start();
}
}));
</script><script>example();</script>
<h2>Animated.sequence</h2>
<p>It is very common to animate </p>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{opacity: anim, position: 'relative'}}
className="circle"
onClick={i === 0 && this.handleClick}>
{i === 0 && 'Click'}
</Animated.div>
)}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => { anim.setValue(0.2); });
Animated.sequence(
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
).start();
},
}));
</script><script>example();</script>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{opacity: anim, position: 'relative'}}
className="circle"
onClick={i === 0 && this.handleClick}>
{i === 0 && 'Click'}
</Animated.div>
)}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => { anim.setValue(0.2); });
Animated.stagger(
100,
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
).start();
},
}));
</script><script>example();</script>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{opacity: anim, position: 'relative'}}
className="circle"
onClick={i === 0 && this.handleClick}>
{i === 0 && 'Click'}
</Animated.div>
)}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => { anim.setValue(0.2); });
Animated.sequence([
Animated.parallel(
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
),
Animated.stagger(
100,
this.state.anims.map(anim => Animated.spring(anim, { toValue: 0.2 }))
),
]).start();
},
}));
</script><script>example();</script>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
handleClick: function() {
var rec = () => {
Animated.sequence([
Animated.timing(this.state.anim, {toValue: -1, duration: 150}),
Animated.timing(this.state.anim, {toValue: 1, duration: 150}),
]).start(rec);
};
rec();
},
render: function() {
return (
<Animated.div
style={{
left: this.state.anim.interpolate({
inputRange: [-1, -0.5, 0.5, 1],
outputRange: [0, 5, 0, 5]
}),
transform: [
{rotate: this.state.anim.interpolate({
inputRange: [-1, 1],
outputRange: ['-10deg', '10deg']
})}
]
}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
}));
</script><script>example();</script>
<script type="text/jsx;harmony=true;stripTypes=true">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0)
};
},
render: function() {
return (
<div
style={{overflow: 'scroll', height: 60}}
onScroll={Animated.event([
{target: {scrollLeft: this.state.anim}}
])}>
<div style={{width: 1000, height: 1}} />
{[0, 1, 2, 3, 4].map(i =>
<Animated.div
style={{
left: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, (i + 1)]
}),
pointerEvents: 'none',
}}
className="circle">
{i === 4 && 'H-Scroll'}
</Animated.div>
)}
</div>
);
},
}));
</script><script>example();</script>
</div>
</body>
</html>
... ...
html, h1, h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.container {
width: 800px;
margin: 0 auto;
}
.circle {
margin: 2px;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
box-shadow: 0 1px 2px #999;
text-shadow: 0 1px 2px #999;
background-image: url(pic1.jpg);
background-size: cover;
line-height: 80px;
vertical-align: bottom;
text-align: center;
color: white;
font-size: 10px;
}
.circle:nth-child(2) {
background-image: url(pic2.jpg);
}
.circle:nth-child(3) {
background-image: url(pic3.jpg);
}
div.code {
box-shadow: 0 1px 2px #999;
width: 600px;
padding: 5px;
position: relative;
margin: 0 auto;
margin-bottom: 40px;
}
div.code .reset {
float: right;
}
div.code pre {
padding: 2px;
}
hr {
border: none;
border-bottom: 1px solid #D9D9D9;
margin: 0;
}
button {
vertical-align: top;
}
.example > span {
color: #333;
font-size: 13px;
}
.example {
position: relative;
height: 60px;
}
.code pre {
margin: 0;
font-size: 11px;
line-height: 1;
}
.highlight {
background: rgb(228, 254, 253);
}
... ...
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
* @providesModule gulpfile
*/
'use strict';
var babel = require('gulp-babel');
var babelPluginDEV = require('fbjs-scripts/babel/dev-expression');
var babelPluginModules = require('fbjs-scripts/babel/rewrite-modules');
var del = require('del');
var derequire = require('gulp-derequire');
var flatten = require('gulp-flatten');
var gulp = require('gulp');
var gulpUtil = require('gulp-util');
var header = require('gulp-header');
var objectAssign = require('object-assign');
var runSequence = require('run-sequence');
var webpackStream = require('webpack-stream');
var DEVELOPMENT_HEADER = [
'/**',
' * Animated v<%= version %>',
' */'
].join('\n') + '\n';
var PRODUCTION_HEADER = [
'/**',
' * Animated v<%= version %>',
' *',
' * Copyright 2013-2015, Facebook, Inc.',
' * All rights reserved.',
' *',
' * This source code is licensed under the BSD-style license found in the',
' * LICENSE file in the root directory of this source tree. An additional grant',
' * of patent rights can be found in the PATENTS file in the same directory.',
' *',
' */'
].join('\n') + '\n';
var babelOpts = {
nonStandard: true,
loose: [
'es6.classes'
],
stage: 1,
plugins: [babelPluginDEV, babelPluginModules],
_moduleMap: objectAssign({}, require('fbjs/module-map'), {
'React': 'react',
})
};
var buildDist = function(opts) {
var webpackOpts = {
debug: opts.debug,
externals: {
'react': 'React',
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel'}
],
},
output: {
filename: opts.output,
library: 'Animated'
},
plugins: [
new webpackStream.webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(
opts.debug ? 'development' : 'production'
),
}),
new webpackStream.webpack.optimize.OccurenceOrderPlugin(),
new webpackStream.webpack.optimize.DedupePlugin()
]
};
if (!opts.debug) {
webpackOpts.plugins.push(
new webpackStream.webpack.optimize.UglifyJsPlugin({
compress: {
hoist_vars: true,
screw_ie8: true,
warnings: false
}
})
);
}
return webpackStream(webpackOpts, null, function(err, stats) {
if (err) {
throw new gulpUtil.PluginError('webpack', err);
}
if (stats.compilation.errors.length) {
throw new gulpUtil.PluginError('webpack', stats.toString());
}
});
};
var paths = {
dist: 'dist',
entry: 'lib/AnimatedWeb.js',
lib: 'lib',
src: [
'*src/**/*.js',
'!src/**/__tests__/**/*.js',
'!src/**/__mocks__/**/*.js'
],
};
gulp.task('clean', function(cb) {
del([paths.dist, paths.lib], cb);
});
gulp.task('modules', function() {
return gulp
.src(paths.src, {cwd: '../'})
.pipe(babel(babelOpts))
.pipe(flatten())
.pipe(gulp.dest(paths.lib));
});
gulp.task('dist', ['modules'], function () {
var distOpts = {
debug: true,
output: 'animated.js'
};
return gulp
.src(paths.entry)
.pipe(buildDist(distOpts))
.pipe(derequire())
.pipe(header(DEVELOPMENT_HEADER, {
version: process.env.npm_package_version
}))
.pipe(gulp.dest(paths.dist));
});
gulp.task('dist:min', ['modules'], function () {
var distOpts = {
debug: false,
output: 'animated.min.js'
};
return gulp
.src(paths.entry)
.pipe(buildDist(distOpts))
.pipe(header(PRODUCTION_HEADER, {
version: process.env.npm_package_version
}))
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function() {
gulp.watch(paths.src, ['modules']);
});
gulp.task('default', function(cb) {
runSequence('clean', 'modules', ['dist', 'dist:min'], cb);
});
... ...
{
"name": "react-animated",
"description": "Animated provides powerful mechanisms for animating your React views",
"version": "0.1.0",
"keywords": [
"react",
"animated",
"animation"
],
"license": "BSD-3-Clause",
"main": "Animated.js",
"dependencies": {
"fbjs": "^0.2.1"
},
"scripts": {
"build": "gulp"
},
"devDependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"del": "^1.2.0",
"fbjs-scripts": "^0.2.0",
"gulp": "^3.9.0",
"gulp-babel": "^5.1.0",
"gulp-derequire": "^2.1.0",
"gulp-flatten": "^0.1.0",
"gulp-header": "^1.2.2",
"gulp-util": "^3.0.6",
"object-assign": "^3.0.0",
"run-sequence": "^1.1.2",
"webpack": "1.11.0",
"webpack-stream": "^2.1.0"
}
}
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule Animated
* @flow
*/
'use strict';
var AnimatedImplementation = require('AnimatedImplementation');
var Image = require('Image');
var Text = require('Text');
var View = require('View');
let AnimatedScrollView;
const Animated = {
View: AnimatedImplementation.createAnimatedComponent(View),
Text: AnimatedImplementation.createAnimatedComponent(Text),
Image: AnimatedImplementation.createAnimatedComponent(Image),
get ScrollView() {
// Make this lazy to avoid circular reference.
if (!AnimatedScrollView) {
AnimatedScrollView = AnimatedImplementation.createAnimatedComponent(require('ScrollView'));
}
return AnimatedScrollView;
},
};
Object.assign((Animated: Object), AnimatedImplementation);
module.exports = ((Animated: any): (typeof AnimatedImplementation) & typeof Animated);
... ...
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule AnimatedEvent
* @flow
* @format
*/
'use strict';
const AnimatedValue = require('./nodes/AnimatedValue');
const NativeAnimatedHelper = require('./NativeAnimatedHelper');
const ReactNative = require('ReactNative');
const invariant = require('fbjs/lib/invariant');
const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
export type Mapping = {[key: string]: Mapping} | AnimatedValue;
export type EventConfig = {
listener?: ?Function,
useNativeDriver?: boolean,
};
function attachNativeEvent(
viewRef: any,
eventName: string,
argMapping: Array<?Mapping>,
) {
// Find animated values in `argMapping` and create an array representing their
// key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x'].
const eventMappings = [];
const traverse = (value, path) => {
if (value instanceof AnimatedValue) {
value.__makeNative();
eventMappings.push({
nativeEventPath: path,
animatedValueTag: value.__getNativeTag(),
});
} else if (typeof value === 'object') {
for (const key in value) {
traverse(value[key], path.concat(key));
}
}
};
invariant(
argMapping[0] && argMapping[0].nativeEvent,
'Native driven events only support animated values contained inside `nativeEvent`.',
);
// Assume that the event containing `nativeEvent` is always the first argument.
traverse(argMapping[0].nativeEvent, []);
const viewTag = ReactNative.findNodeHandle(viewRef);
eventMappings.forEach(mapping => {
NativeAnimatedHelper.API.addAnimatedEventToView(
viewTag,
eventName,
mapping,
);
});
return {
detach() {
eventMappings.forEach(mapping => {
NativeAnimatedHelper.API.removeAnimatedEventFromView(
viewTag,
eventName,
mapping.animatedValueTag,
);
});
},
};
}
class AnimatedEvent {
_argMapping: Array<?Mapping>;
_listeners: Array<Function> = [];
_callListeners: Function;
_attachedEvent: ?{
detach: () => void,
};
__isNative: boolean;
constructor(argMapping: Array<?Mapping>, config?: EventConfig = {}) {
this._argMapping = argMapping;
if (config.listener) {
this.__addListener(config.listener);
}
this._callListeners = this._callListeners.bind(this);
this._attachedEvent = null;
this.__isNative = shouldUseNativeDriver(config);
if (__DEV__) {
this._validateMapping();
}
}
__addListener(callback: Function): void {
this._listeners.push(callback);
}
__removeListener(callback: Function): void {
this._listeners = this._listeners.filter(listener => listener !== callback);
}
__attach(viewRef: any, eventName: string) {
invariant(
this.__isNative,
'Only native driven events need to be attached.',
);
this._attachedEvent = attachNativeEvent(
viewRef,
eventName,
this._argMapping,
);
}
__detach(viewTag: any, eventName: string) {
invariant(
this.__isNative,
'Only native driven events need to be detached.',
);
this._attachedEvent && this._attachedEvent.detach();
}
__getHandler() {
if (this.__isNative) {
return this._callListeners;
}
return (...args: any) => {
const traverse = (recMapping, recEvt, key) => {
if (typeof recEvt === 'number' && recMapping instanceof AnimatedValue) {
recMapping.setValue(recEvt);
} else if (typeof recMapping === 'object') {
for (const mappingKey in recMapping) {
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for
* React. To see the error delete this comment and run Flow. */
traverse(recMapping[mappingKey], recEvt[mappingKey], mappingKey);
}
}
};
if (!this.__isNative) {
this._argMapping.forEach((mapping, idx) => {
traverse(mapping, args[idx], 'arg' + idx);
});
}
this._callListeners(...args);
};
}
_callListeners(...args) {
this._listeners.forEach(listener => listener(...args));
}
_validateMapping() {
const traverse = (recMapping, recEvt, key) => {
if (typeof recEvt === 'number') {
invariant(
recMapping instanceof AnimatedValue,
'Bad mapping of type ' +
typeof recMapping +
' for key ' +
key +
', event value must map to AnimatedValue',
);
return;
}
invariant(
typeof recMapping === 'object',
'Bad mapping of type ' + typeof recMapping + ' for key ' + key,
);
invariant(
typeof recEvt === 'object',
'Bad event of type ' + typeof recEvt + ' for key ' + key,
);
for (const mappingKey in recMapping) {
traverse(recMapping[mappingKey], recEvt[mappingKey], mappingKey);
}
};
}
}
module.exports = {AnimatedEvent, attachNativeEvent};
... ...