react-native-unistyles 2.8.0-beta.1 → 2.8.0-beta.3

package/cxx/UnistylesModel.cpp

@@ -0,0 +1,234 @@
+#include "UnistylesModel.h"
+
+std::string UnistylesModel::getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointPairs) {
+    for (size_t i = 0; i < sortedBreakpointPairs.size(); ++i) {
+        const auto& [key, value] = sortedBreakpointPairs[i];
+        const double maxVal = (i + 1 < sortedBreakpointPairs.size()) ? sortedBreakpointPairs[i + 1].second : std::numeric_limits<double>::infinity();
+
+        if (width >= value && width < maxVal) {
+            return key;
+        }
+    }
+
+    return sortedBreakpointPairs.empty() ? "" : sortedBreakpointPairs.back().first;
+}
+
+void UnistylesModel::handleScreenSizeChange(Dimensions& screen, std::optional<Insets> insets, std::optional<Dimensions> statusBar, std::optional<Dimensions> navigationBar) {
+    std::string breakpoint = this->getBreakpointFromScreenWidth(screen.width, this->sortedBreakpointPairs);
+    bool hasDifferentBreakpoint = this->breakpoint != breakpoint;
+    bool hasDifferentScreenDimensions = this->screen.width != screen.width || this->screen.height != screen.height;
+    bool hasDifferentInsets = insets.has_value()
+        ? this->insets.top != insets->top || this->insets.bottom != insets->bottom || this->insets.left != insets->left || this->insets.right != insets->right
+        : false;
+
+    // we don't need to check statusBar/navigationBar as they will only change on orientation change witch is equal to hasDifferentScreenDimensions
+    bool shouldNotify = hasDifferentBreakpoint || hasDifferentScreenDimensions || hasDifferentInsets;
+
+    this->breakpoint = breakpoint;
+    this->screen = {screen.width, screen.height};
+
+    if (insets.has_value()) {
+        this->insets = {insets->top, insets->bottom, insets->left, insets->right};
+    }
+
+    if (statusBar.has_value()) {
+        this->statusBar = {statusBar->width, statusBar->height};
+    }
+
+    if (navigationBar.has_value()) {
+        this->navigationBar = {navigationBar->width, navigationBar->height};
+    }
+
+    if (shouldNotify) {
+        this->onLayoutChange();
+    }
+}
+
+void UnistylesModel::handleAppearanceChange(std::string colorScheme) {
+    this->colorScheme = colorScheme;
+
+    if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
+        return;
+    }
+
+    if (this->themeName != this->colorScheme) {
+        this->onThemeChange(this->colorScheme);
+        this->themeName = this->colorScheme;
+    }
+}
+
+void UnistylesModel::handleContentSizeCategoryChange(std::string contentSizeCategory) {
+    if (this->contentSizeCategory == contentSizeCategory) {
+        return;
+    }
+
+    this->contentSizeCategory = contentSizeCategory;
+    this->onContentSizeCategoryChange(contentSizeCategory);
+}
+
+jsi::Value UnistylesModel::getThemeOrFail(jsi::Runtime& runtime) {
+    if (this->themes.size() == 1) {
+        std::string themeName = this->themes.at(0);
+
+        this->themeName = themeName;
+
+        return jsi::String::createFromUtf8(runtime, themeName);
+    }
+
+    return jsi::Value().undefined();
+}
+
+std::vector<std::pair<std::string, double>> UnistylesModel::toSortedBreakpointPairs(jsi::Runtime& rt, jsi::Object& breakpointsObj) {
+    jsi::Array propertyNames = breakpointsObj.getPropertyNames(rt);
+    std::vector<std::pair<std::string, double>> sortedBreakpointEntriesVec;
+
+    for (size_t i = 0; i < propertyNames.size(rt); ++i) {
+        jsi::Value propNameValue = propertyNames.getValueAtIndex(rt, i);
+        std::string name = propNameValue.asString(rt).utf8(rt);
+        jsi::PropNameID propNameID = jsi::PropNameID::forUtf8(rt, name);
+        jsi::Value value = breakpointsObj.getProperty(rt, propNameID);
+
+        if (value.isNumber()) {
+            double breakpointValue = value.asNumber();
+
+            sortedBreakpointEntriesVec.push_back(std::make_pair(name, breakpointValue));
+        }
+    }
+
+    std::sort(sortedBreakpointEntriesVec.begin(), sortedBreakpointEntriesVec.end(), [](const std::pair<std::string, double>& a, const std::pair<std::string, double>& b) {
+        return a.second < b.second;
+    });
+
+    return sortedBreakpointEntriesVec;
+}
+
+// a little bit hacky, but works like Turbo Module emitDeviceEvent
+// it will be super easy to refactor for Unistyles 3.0
+// ref: https://github.com/facebook/react-native/pull/43375
+// ref: https://github.com/facebook/react-native/blob/b5fd041917d197f256433a41a126f0dff767c429/packages/react-native/ReactCommon/react/nativemodule/core/ReactCommon/TurboModule.cpp#L42
+void UnistylesModel::emitDeviceEvent(const std::string eventType, EventPayload payload) {
+    this->callInvoker->invokeAsync([eventType, payload, this](){
+        jsi::Value emitter = this->runtime.global().getProperty(this->runtime, "__rctDeviceEventEmitter");
+
+        if (emitter.isUndefined()) {
+            return;
+        }
+
+        jsi::Object emitterObject = emitter.asObject(runtime);
+        jsi::Function emitFunction = emitterObject.getPropertyAsFunction(runtime, "emit");
+
+        std::vector<jsi::Value> arguments;
+        jsi::Object event = jsi::Object(this->runtime);
+
+        event.setProperty(this->runtime, "type", jsi::String::createFromUtf8(this->runtime, eventType));
+
+        jsi::Object eventPayload = this->parseEventPayload(payload);
+
+        event.setProperty(this->runtime, "payload", eventPayload);
+
+        arguments.emplace_back(jsi::String::createFromAscii(runtime, "__unistylesOnChange"));
+        arguments.emplace_back(std::move(event));
+
+        emitFunction.callWithThis(runtime, emitterObject, (const jsi::Value*)arguments.data(), arguments.size());
+    });
+}
+
+void UnistylesModel::onThemeChange(std::string themeName) {
+    EventPayload payload;
+    payload["themeName"] = themeName;
+
+    this->emitDeviceEvent("theme", payload);
+}
+
+void UnistylesModel::onContentSizeCategoryChange(std::string contentSizeCategory) {
+    EventPayload payload;
+    payload["contentSizeCategory"] = contentSizeCategory;
+
+    this->emitDeviceEvent("dynamicTypeSize", payload);
+}
+
+void UnistylesModel::onPluginChange() {
+    this->emitDeviceEvent("plugin", {});
+}
+
+void UnistylesModel::onLayoutChange() {
+    EventPayload payload;
+    std::string orientation = screen.width > screen.height
+        ? UnistylesOrientationLandscape
+        : UnistylesOrientationPortrait;
+
+    payload["breakpoint"] = this->breakpoint;
+    payload["orientation"] = orientation;
+
+    EventNestedValue screenPayload;
+    auto screen = this->screen;
+
+    screenPayload["width"] = screen.width;
+    screenPayload["height"] = screen.height;
+
+    payload["screen"] = screenPayload;
+
+    EventNestedValue statusBarPayload;
+    auto statusBar = this->statusBar;
+
+    statusBarPayload["width"] = statusBar.width;
+    statusBarPayload["height"] = statusBar.height;
+
+    payload["statusBar"] = statusBarPayload;
+
+    EventNestedValue navigationBarPayload;
+    auto navigationBar = this->navigationBar;
+
+    navigationBarPayload["width"] = navigationBar.width;
+    navigationBarPayload["height"] = navigationBar.height;
+
+    payload["navigationBar"] = navigationBarPayload;
+
+    EventNestedValue insetsPayload;
+    auto insets = this->insets;
+
+    insetsPayload["top"] = insets.top;
+    insetsPayload["bottom"] = insets.bottom;
+    insetsPayload["left"] = insets.left;
+    insetsPayload["right"] = insets.right;
+
+    payload["insets"] = insetsPayload;
+
+    this->emitDeviceEvent("layout", payload);
+}
+
+jsi::Object UnistylesModel::parseEventPayload(EventPayload payload) {
+    jsi::Object eventPayload = jsi::Object(this->runtime);
+
+    for (const auto& [key, value] : payload) {
+        if (std::holds_alternative<std::string>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), jsi::String::createFromUtf8(this->runtime, std::get<std::string>(value)));
+        }
+
+        if (std::holds_alternative<int>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), std::get<int>(value));
+        }
+
+        if (std::holds_alternative<EventNestedValue>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), this->parseEventNestedPayload(std::get<EventNestedValue>(value)));
+        }
+    }
+
+    return eventPayload;
+}
+
+jsi::Object UnistylesModel::parseEventNestedPayload(EventNestedValue payload) {
+    jsi::Object eventPayload = jsi::Object(this->runtime);
+
+    for (const auto& [key, value] : payload) {
+        if (std::holds_alternative<std::string>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), jsi::String::createFromUtf8(this->runtime, std::get<std::string>(value)));
+        }
+
+        if (std::holds_alternative<int>(value)) {
+            eventPayload.setProperty(this->runtime, key.c_str(), std::get<int>(value));
+        }
+    }
+
+    return eventPayload;
+}

package/cxx/UnistylesModel.h

@@ -0,0 +1,112 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <ReactCommon/CallInvoker.h>
+#include <vector>
+#include <map>
+#include <optional>
+#include <variant>
+
+using namespace facebook;
+
+const std::string UnistylesOrientationPortrait = "portrait";
+const std::string UnistylesOrientationLandscape = "landscape";
+
+const std::string UnistylesDarkScheme = "dark";
+const std::string UnistylesLightScheme = "light";
+const std::string UnistylesUnspecifiedScheme = "unspecified";
+
+const std::string UnistylesErrorBreakpointsCannotBeEmpty = "You are trying to register empty breakpoints object";
+const std::string UnistylesErrorBreakpointsMustStartFromZero = "You are trying to register breakpoints that don't start from 0";
+const std::string UnistylesErrorThemesCannotBeEmpty = "You are trying to register empty themes object";
+const std::string UnistylesErrorAdaptiveThemesNotSupported = "Your platform doesn't support adaptive themes";
+
+struct Dimensions {
+    int width;
+    int height;
+};
+
+struct Insets {
+    int top;
+    int bottom;
+    int left;
+    int right;
+};
+
+using EventNestedValue = std::map<std::string, std::variant<std::string, int>>;
+using EventValue = std::variant<std::string, int>;
+using EventPayload = std::map<std::string, std::variant<std::string, int, EventNestedValue>>;
+
+struct UnistylesModel {
+    void emitDeviceEvent(const std::string eventType, EventPayload payload);
+    void onThemeChange(std::string themeName);
+    void onPluginChange();
+    void onContentSizeCategoryChange(std::string contentSizeCategory);
+    void onLayoutChange();
+    jsi::Object parseEventPayload(EventPayload payload);
+    jsi::Object parseEventNestedPayload(EventNestedValue payload);
+
+    std::function<Dimensions()> getScreenDimensions;
+    std::function<std::string()> getContentSizeCategory;
+    std::function<std::string()> getColorScheme;
+    std::function<Dimensions()> getStatusBarDimensions;
+    std::function<Dimensions()> getNavigationBarDimensions;
+    std::function<Insets()> getInsets;
+    std::optional<std::function<void(std::string)>> setStatusBarColor;
+    std::optional<std::function<void(std::string)>> setNavigationBarColor;
+
+    void setScreenDimensionsCallback(std::function<Dimensions()> callback) {
+        this->getScreenDimensions = callback;
+    }
+    void setContentSizeCategoryCallback(std::function<std::string()> callback) {
+        this->getContentSizeCategory = callback;
+    }
+    void setColorSchemeCallback(std::function<std::string()> callback) {
+        this->getColorScheme = callback;
+    }
+    void setStatusBarDimensionsCallback(std::function<Dimensions()> callback) {
+        this->getStatusBarDimensions = callback;
+    }
+    void setNavigationBarDimensionsCallback(std::function<Dimensions()> callback) {
+        this->getNavigationBarDimensions = callback;
+    }
+    void setInsetsCallback(std::function<Insets()> callback) {
+        this->getInsets = callback;
+    }
+    void setStatusBarColorCallback(std::function<void(std::string color)> callback) {
+        this->setStatusBarColor = callback;
+    }
+    void setNavigationBarColorCallback(std::function<void(std::string color)> callback) {
+        this->setNavigationBarColor = callback;
+    }
+
+    Dimensions screen = {0, 0};
+    Dimensions statusBar = {0, 0};
+    Dimensions navigationBar = {0, 0};
+    Insets insets = {0, 0, 0, 0};
+    std::string colorScheme = UnistylesUnspecifiedScheme;
+    std::string contentSizeCategory = UnistylesUnspecifiedScheme;
+
+    UnistylesModel(jsi::Runtime& rt, std::shared_ptr<react::CallInvoker> callInvoker): runtime(rt), callInvoker(callInvoker) {}
+
+    bool hasAdaptiveThemes;
+    bool supportsAutomaticColorScheme;
+
+    std::string themeName;
+    std::string breakpoint;
+    std::vector<std::string> pluginNames;
+    std::vector<std::string> themes;
+    std::vector<std::pair<std::string, double>> sortedBreakpointPairs;
+
+    void handleScreenSizeChange(Dimensions& screen, std::optional<Insets> insets, std::optional<Dimensions> statusBar, std::optional<Dimensions> navigationBar);
+    void handleAppearanceChange(std::string colorScheme);
+    void handleContentSizeCategoryChange(std::string contentSizeCategory);
+
+    jsi::Value getThemeOrFail(jsi::Runtime&);
+    std::string getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries);
+    std::vector<std::pair<std::string, double>> toSortedBreakpointPairs(jsi::Runtime&, jsi::Object&);
+
+private:
+    jsi::Runtime& runtime;
+    std::shared_ptr<react::CallInvoker> callInvoker;
+};