@fto-consult/expo-ui 1.1.39 → 1.1.40

package/src/components/Chart/appexChart/index.js

@@ -0,0 +1,26 @@
+import ApexChart from 'apexcharts/dist/apexcharts.common';
+import React from "$react";
+import View from "$components/View"
+
+const AppexChartComponent = React.forwardRef(({chartContext,options,...props},ref)=>{
+    const chartRef = React.useRef(null);
+    React.useEffect(()=>{
+      chartContext.current = new ApexChart(chartRef.current,options)
+      chartContext.current.render();
+      return ()=>{
+        if (chartContext.current && typeof chartContext.current.destroy === 'function') {
+          setTimeout(()=>{
+            try {chartContext.current.destroy();} catch{}
+          },500);
+        }
+      }
+    },[]);
+    return <View
+      {...props}
+      ref = {React.mergeRefs(chartRef,ref)}
+    />
+});
+
+AppexChartComponent.displayName = "AppexChartComponent";
+
+export default AppexChartComponent;

package/src/components/Chart/appexChart/index.native.js

@@ -0,0 +1,62 @@
+const htmlTemplate = require("./index.html");
+import React from "$react";
+import WebView from "$ecomponents/WebView";
+import {defaultStr,defaultObj,uniqid} from "$utils";
+import View from "$ecomponents/View";
+
+export const ChartComponent = React.forwardRef(({chartContext,testID,webViewProps,options,...props},ref)=>{
+    webViewProps = defaultObj(webViewProps);
+    const webViewRef = React.useRef(null);
+    const chartId = React.useRef(uniqid("chart-webview-id"));
+    const jsonOptions = JSON.stringify(options);
+    const exec = (method,a)=>{
+        if(!webViewRef.current) return;
+        webViewRef.current.injectJavaScript(`
+            const method = "${method}";
+            const chartId = "${chartId}";
+            const a = ${typeof a =='string'? '"'+a.replaceAll('"','\"')+'"':typeof a =='boolean'? a : a && typeof a =='object'? JSON.stringify(a):undefined};
+            let element = document.getElementById(chartId);
+            if(!element){
+                element = document.createElement("div");
+                document.body.appendChild(element);
+            }
+            element.id = chartId;
+            if(!window.chartInstance || typeof window.chartInstance!='object') {
+                window.chartInstance = new ApexChart(element,${jsonOptions});
+            }
+            if(!window.chartInstance || typeof chartInstance[method] !='function') return;
+            try {
+                chartInstance[method](a);
+            } catch{}
+        `);
+    };
+    testID = defaultStr(testID,"RN_AppexChartComponentNative");
+    chartContext.current = React.useRef({});
+    chartContext.current.exec = exec;
+    ["updateOptions","updateSeries","destroy"].map((cb)=>{
+        chartContext.current[cb]=(a,b,c)=>{
+           return exec(cb,a,b,c);
+        }
+    });
+
+    return <View ref={ref} {...props} testID={testID} style={[{flex:1},props.style]}>
+        <WebView.Local
+            originWhitelist={["*"]}
+            testID = {testID+"_WebView"}
+            {...webViewProps}
+            file = {htmlTemplate}
+            ref = {webViewRef}
+            onLoadEnd={(event) => {
+                exec();
+                if(typeof webViewProps.onLoadEnd =='function'){
+                    webViewProps.onLoadEnd({event,webViewRef,chartContext});
+                }
+            }}
+        >
+        </WebView.Local>
+    </View>
+});
+
+ChartComponent.displayName = "ChartComponent.Native";
+
+export default ChartComponent;

package/src/components/Chart/index.js

@@ -1,22 +1,70 @@
-import FileSystem from "$file-system";
-import ApexCharts from 'apexcharts'
-import ReactApexChart from 'react-apexcharts';
-import React from "$react";
-import {defaultStr,uniqid,defaultObj} from "$utils";
-import View from "$ecomponents/View";
+import React from '$react'
+import PropTypes from 'prop-types'
+import {defaultStr} from "$utils";
+import {extend} from "./utils"
+import stableHash from 'stable-hash';
+import Chart from "./appexChart";
 
-
-export const ChartComponent = React.forwardRef(({options,data,containerProps,containerId,...props},ref)=>{
-    const elementIdRef = React.useRef(defaultStr(containerId,uniqid("chart-container-id")))
-    const elementId = elementIdRef.current;
-    const containerRef = React.useRef(null);
-    const cId = elementId+"-container";
-    containerProps = defaultObj(containerProps);
-    return <View autoHeight  ref={containerRef} testID="RNComponentCharContainerTestID" {...containerProps} style={[{flex:1,paddingBottom:10},containerProps.style]} >
-        <ReactApexChart height={300} data={data} {...props} {...options} options={options}/>
-    </View>
+/**** le composant Chart s'appuie sur le composant appexChart : https://apexcharts.com/ 
+ * les props requis duduit composant sont : 
+ *  type {string}, le type de chart
+ *  series {array} - //les series appexchart 
+ *  width {number} - la largeur du chart
+ *  height {number} - la longueur du chart
+ *  options {number} - les options supplémentaires au chart
+ * 
+*/
+const ChartComponent = React.forwardRef(({type, height, width, series, options,testID,webViewProps, ...props },ref)=>{
+  const chartContext = React.useRef(null);
+  const config = extend(options,{
+    chart: {
+      type,
+      height,
+      width
+    },
+    series,
+  });
+  testID = defaultStr(testID,"RN_ChartComponent");
+  const prevWidth = React.usePrevious(width), prevHeight = React.usePrevious(height);
+  const prevOptions = React.usePrevious(options,stableHash);
+  const prevSeries = React.usePrevious(series,JSON.stringify);
+  React.useEffect(()=>{
+    if(chartContext.current && chartContext.current.updateOptions){
+        if((JSON.stringify(prevSeries) == JSON.stringify(series)) || width != prevWidth || height != prevHeight){
+            chartContext.current.updateOptions(config);
+        } else if(JSON.stringify(prevOptions) != JSON.stringify(options)){
+            chartContext.current.updateSeries(series);
+        } 
+    }
+  },[stableHash({type,options,series,width,height})])
+  return <Chart {...props} options={config} chartContext={chartContext} testID={testID} ref={ref}/>
 });
 
+
+ChartComponent.propTypes = {
+  type: PropTypes.string.isRequired,
+  width: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  height: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  series: PropTypes.array.isRequired,
+  options: PropTypes.shape({
+    xaxis : PropTypes.object,
+  }).isRequired,
+  ///lorsque le chart est rendu en environnement native, les props du webView
+  webViewProps : PropTypes.object,
+}
+
+ChartComponent.defaultProps = {
+  type: 'line',
+  width: '100%',
+  height: 'auto'
+}
+
 ChartComponent.displayName = "ChartComponent";
 
 export default ChartComponent;

package/src/components/Chart/utils.js

@@ -0,0 +1,25 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import {isObj} from "$utils";
+export function extend (target,source){
+    const output = Object.assign({}, target);
+    if (isObj(target) && isObj(source)) {
+      Object.keys(source).forEach((key) => {
+        if (isObj(source[key])) {
+          if (!(key in target)) {
+            Object.assign(output, {
+              [key]: source[key]
+            })
+          } else {
+            output[key] = this.extend(target[key], source[key])
+          }
+        } else {
+          Object.assign(output, {
+            [key]: source[key]
+          })
+        }
+      })
+    }
+    return output
+}

package/src/components/WebView/index.js

@@ -1,3 +1,7 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
 import WebView from "./Component";
 import {defaultStr} from "$utils";
 import React from "$react";
@@ -7,7 +11,9 @@ import FileSystem from "$file-system";
 
 const  WebViewComponent = React.forwardRef(({children,source,style,testID,...props},ref)=>{
     testID = defaultStr(testID,"RN_WebviewComponent");
-    return <WebView ref={ref} {...props} 
+    return <WebView  
+        ref={ref}
+         {...props} 
         testID = {testID} 
         style={[{backgroundColor:'transparent'},style]}
         source = {defaultObj(source)}