English | 简体中文

@ray-js/multi-socket-switch

Used for processing switches for power strips and sockets, supporting single-open and total-open capabilities

Installation

$ npm install @ray-js/multi-socket-switch
# or
$ yarn add @ray-js/multi-socket-switch

Usage

Basic usage

import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    style={{ width: 200 }}
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
      { dpCode: 'swith_3', dpValue: false },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    deviceId="123456"
  />
);

Multiple column usage

import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    style={{ width: 400 }}
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
      { dpCode: 'swith_3', dpValue: false },
      { dpCode: 'swith_4', dpValue: false },
      { dpCode: 'swith_5', dpValue: true },
      { dpCode: 'swith_6', dpValue: false },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    usbLayout="horizontal"
    deviceId="123456"
    double
  />
);

Horizontal layout

import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    deviceId="123456"
    layout="horizontal"
    usbLayout="horizontal"
  />
);

Custom

import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch.Container style={{ width: 200 }}>
    <MultiSocketSwitch.MainSwitch value onClick={() => {}} />
    <MultiSocketSwitch.SubSwitch dpCode="switch_1" dpValue onClick={() => {}} />
    <MultiSocketSwitch.SubSwitch dpCode="switch_2" dpValue onClick={() => {}} />
    <MultiSocketSwitch.SubSwitch dpCode="switch_3" dpValue onClick={() => {}} />
  </MultiSocketSwitch.Container>
);

import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    style={{ width: 200 }}
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
      { dpCode: 'swith_3', dpValue: false },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    deviceId="123456"
  />
);