On this page
Getting StartedBasic useRay & SDM

Usage

Getting Started

You can quickly learn how to access generic abilities in your panel app development using basic JavaScript or Ray & SDM integration with the following example code snippets:

Basic use

Here's an example of accessing generic abilities using basic JavaScript:

import { SmartAlarmAbility } from '@ray-js/panel-sdk';

// Create an instance of SmartAlarmAbility
const alarm = new SmartAlarmAbility().init();

// Use the functionalities of SmartAlarmAbility
alarm.getBuiltInAlarmList(params)
  .then(result => {
    // Handle the returned result
  })
  .catch(error => {
    // Handle error cases
  });

Ray & SDM

Here's an example of accessing generic abilities using Ray and SDM. By integrating with SDM, you can enjoy better TypeScript type hints and the development experience provided by React Hooks:

src/devices/index.ts

Create a smart device model for the sensor with built-in alarm capability

import { SmartDeviceModel, SmartAlarmAbility } from '@ray-js/panel-sdk';

const options = {
  abilities: [new SmartAlarmAbility()],
};

const devices = {
  sensor: new SmartDeviceModel<SmartDeviceSchema, { alarm: SmartAlarmAbility }>(options)
};

src/app.tsx

Access the React ecosystem through SdmProvider

import React from 'react';
import 'ray';
// Import other dependencies
import { kit, SdmProvider } from '@ray-js/panel-sdk';
import { devices } from '@/devices';
 
const { initPanelEnvironment } = kit;
 
interface Props {
  children: React.ReactNode;
}
 
initPanelEnvironment({ useDefaultOffline: true });
 
export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }
 
  render() {
    return (
      <SdmProvider value={devices.sensor}>{this.props.children}</SdmProvider>
    );
  }
}

src/pages/home.tsx

Fetch the alarm list and display it using TyList

import React from 'react';
import { View } from '@ray-js/ray';
import { useBuiltInAlarm } from '@ray-js/panel-sdk';
import { AlarmList } from '@ray-js/api/lib/cloud/interface';
import TyList from '@ray-js/components-ty-cell';
import TySwitch from '@ray-js/components-ty-switch';

function PageSdmAlarm() {
  const { loading, data, getBuiltInAlarmList, setBuiltInAlarmStatus } = useBuiltInAlarm();

  React.useEffect(() => {
    getBuiltInAlarmList();
  }, []);

  const handleValueChange = React.useCallback(
    (item: AlarmList) => (value: boolean) => {
      setBuiltInAlarmStatus({ disabled: !value, ruleIds: item.id });
    },
    []
  );

  const rowKey = React.useCallback((item: AlarmList) => item.id, []);

  console.log('=== rerender builtInAlarm', data, loading);
  return (
    <View>
      <TyList<AlarmList>
        dataSource={data}
        renderItem={item => (
          <TyList.Item
            key={item.id}
            title={item.name}
            content={<TySwitch checked={item.enabled} onChange={handleValueChange(item)} />}
          />
        )}
        rowKey={rowKey}
      />
    </View>
  );
}