diff --git a/Examples/AnimatedGradient/index.desktop.js b/Examples/AnimatedGradient/index.desktop.js new file mode 100644 index 0000000..0c062e5 --- /dev/null +++ b/Examples/AnimatedGradient/index.desktop.js @@ -0,0 +1,4 @@ +import { AppRegistry } from 'react-native'; +import App from './src'; + +AppRegistry.registerComponent('AnimatedGradient', () => App); diff --git a/Examples/AnimatedGradient/package.json b/Examples/AnimatedGradient/package.json index a0f747b..9c1fcec 100644 --- a/Examples/AnimatedGradient/package.json +++ b/Examples/AnimatedGradient/package.json @@ -2,13 +2,16 @@ "name": "AnimatedGradient", "version": "0.0.1", "private": true, + "desktopExternalModules": [ + "node_modules/react-native-linear-gradient/desktop" + ], "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { - "react": "16.0.0-alpha.6", - "react-native": "^0.44.0", + "react": "^16.0.0", + "react-native": "git+https://github.com/status-im/react-native-desktop.git#react-native-qt", "react-native-linear-gradient": "file:../.." }, "devDependencies": { diff --git a/desktop/CMakeLists.txt b/desktop/CMakeLists.txt new file mode 100644 index 0000000..5836dfe --- /dev/null +++ b/desktop/CMakeLists.txt @@ -0,0 +1,7 @@ +set(CMAKE_INCLUDE_CURRENT_DIR ON) + +set(REACT_NATIVE_DESKTOP_EXTERNAL_MODULES_TYPE_NAMES ${REACT_NATIVE_DESKTOP_EXTERNAL_MODULES_TYPE_NAMES} + \"BVLinearGradientManager\" PARENT_SCOPE) + +set(REACT_NATIVE_DESKTOP_EXTERNAL_MODULES_SRC ${REACT_NATIVE_DESKTOP_EXTERNAL_MODULES_SRC} + ${CMAKE_CURRENT_SOURCE_DIR}/bvlineargradientmanager.cpp PARENT_SCOPE) diff --git a/desktop/bvlineargradientmanager.cpp b/desktop/bvlineargradientmanager.cpp new file mode 100644 index 0000000..0679a73 --- /dev/null +++ b/desktop/bvlineargradientmanager.cpp @@ -0,0 +1,60 @@ +/** + * Copyright (c) 2017-present, Status Research and Development GmbH. + * 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. + * + */ + +#include "bvlineargradientmanager.h" + +#include +#include +#include +#include +#include +#include + +#include "attachedproperties.h" +#include "bridge.h" +#include "layout/flexbox.h" +#include "propertyhandler.h" +#include "utilities.h" + +using namespace utilities; + +namespace { +struct RegisterQMLMetaType { + RegisterQMLMetaType() { + qRegisterMetaType(); + } +} registerMetaType; +} // namespace + +class BVLinearGradientManagerPrivate {}; + +BVLinearGradientManager::BVLinearGradientManager(QObject* parent) : ViewManager(parent), d_ptr(new BVLinearGradientManagerPrivate) {} + +BVLinearGradientManager::~BVLinearGradientManager() {} + +QString BVLinearGradientManager::moduleName() { + return "BVLinearGradientManager"; +} + +ViewManager* BVLinearGradientManager::viewManager() { + return this; +} + +/*QString BVLinearGradientManager::qmlComponentFile() const { + return "qrc:/qml/ReactSlider.qml"; +}*/ + +void BVLinearGradientManager::configureView(QQuickItem* view) const { + ViewManager::configureView(view); + //view->setProperty("sliderManager", QVariant::fromValue((QObject*)this)); +} + +#include "bvlineargradientmanager.moc" + diff --git a/desktop/bvlineargradientmanager.h b/desktop/bvlineargradientmanager.h new file mode 100644 index 0000000..660d8c6 --- /dev/null +++ b/desktop/bvlineargradientmanager.h @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2017-present, Status Research and Development GmbH. + * 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. + * + */ + +#ifndef BVLINEARGRADIENTMANAGER_H +#define BVLINEARGRADIENTMANAGER_H + +#include "moduleinterface.h" +#include "componentmanagers/viewmanager.h" + +class BVLinearGradientManagerPrivate; +class BVLinearGradientManager : public ViewManager { + Q_OBJECT + Q_INTERFACES(ModuleInterface) + Q_DECLARE_PRIVATE(BVLinearGradientManager) + +public: + Q_INVOKABLE BVLinearGradientManager(QObject* parent = 0); + ~BVLinearGradientManager(); + + virtual ViewManager* viewManager() override; + virtual QString moduleName() override; + +private: + //virtual QString qmlComponentFile() const override; + virtual void configureView(QQuickItem* view) const override; + + QScopedPointer d_ptr; +}; + +#endif // BVLINEARGRADIENTMANAGER_H diff --git a/index.desktop.js b/index.desktop.js new file mode 100644 index 0000000..bf387ff --- /dev/null +++ b/index.desktop.js @@ -0,0 +1,84 @@ +/** + * @providesModule LinearGradient + * @flow + */ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { processColor, requireNativeComponent, PointPropType, View, ViewPropTypes } from 'react-native'; +const deprecatedPropType = require('react-native/Libraries/Utilities/deprecatedPropType.js'); + +const convertPoint = (name, point) => { + if (Array.isArray(point)) { + console.warn( + `LinearGradient '${name}' property shoule be an object with fields 'x' and 'y', ` + + 'Array type is deprecated.' + ); + + return { + x: point[0], + y: point[1] + }; + } + return point; +}; + +type PropsType = { + start?: Array | {x: number, y: number}; + end?: Array | {x: number, y: number}; + colors: Array; + locations?: Array; +} & typeof(View); + +export default class LinearGradient extends Component { + static propTypes = { + start: PropTypes.oneOfType([ + PointPropType, + deprecatedPropType( + PropTypes.arrayOf(PropTypes.number), + 'Use point object with {x, y} instead.' + ) + ]), + end: PropTypes.oneOfType([ + PointPropType, + deprecatedPropType( + PropTypes.arrayOf(PropTypes.number), + 'Use point object with {x, y} instead.' + ) + ]), + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + locations: PropTypes.arrayOf(PropTypes.number), + ...ViewPropTypes, + }; + props: PropsType; + gradientRef: any; + + setNativeProps(props: PropsType) { + this.gradientRef.setNativeProps(props); + } + + render() { + const { + start, + end, + colors, + locations, + ...otherProps + } = this.props; + if ((colors && locations) && (colors.length !== locations.length)) { + console.warn('LinearGradient colors and locations props should be arrays of the same length'); + } + + return ( + { this.gradientRef = component; }} + {...otherProps} + start={convertPoint('start', start)} + end={convertPoint('end', end)} + colors={colors.map(processColor)} + locations={locations ? locations.slice(0, colors.length) : null} + /> + ); + } +} + +const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null); diff --git a/index.js b/index.js index e4ca903..913244e 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,11 @@ import { Platform } from "react-native"; import LinearGradientIos from "./index.ios.js"; import LinearGradientAndroid from "./index.android.js"; +import LinearGradientDesktop from "./index.desktop.js"; const LinearGradient = Platform.OS === "ios" ? LinearGradientIos - : LinearGradientAndroid; + : Platform.OS === "android" ? LinearGradientAndroid + : LinearGradientDesktop; export default LinearGradient; diff --git a/package.json b/package.json index ca307d0..9749916 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ }], "repository": { "type": "git", - "url": "git@github.com:brentvatne/react-native-linear-gradient.git" + "url": "git+https://github.com/MaxRis/react-native-linear-gradient.git#desktop-platform-v230" }, "dependencies": { "prop-types": "^15.5.10"