Web Component Source Code

The Web component source code is consistent with the implementation of custom React components.

Source Code Example

js Implementation

Note that in src/web/components/index.js, you must export a component instance with the same name as the component, for example, Button.

Refer to the example:

• https://github.com/TencentCloudBase/weda-custom-components/blob/main/src/web/index.js
• https://github.com/TencentCloudBase/weda-custom-components/blob/main/src/web/components/index.js

src/web/components/button/index.js

import * as React from "react";
import * as PropTypes from "prop-types";
import "weui";
import "./index.css";

export default React.forwardRef(function Button(props, ref) {
  const {
    text,
    size = "default",
    type = "primary",
    loading = false,
    disabled = false,
    plain = false,
    events,
    titleSlot,
    ...rest
  } = props;

  React.useImperativeHandle(
    ref,
    () => {
      return {
        methods: {
          innermethod: () => {
            console.log("Call the component internal method");
          },
        },
      };
    },
    []
  );

  return (
    <button
      type={type}
      size={size === "mini" ? "small" : "normal"}
      disabled={disabled}
      plain={plain}
      onClick={events.customevent}
      {...rest}
    >
      {loading && <i className="weui-loading" />}
      {text || titleSlot}
    </button>
  );
});

Button.propTypes = {
  /**
   * Component Type
   */
  type: PropTypes.oneOf(["primary", "warn", "default"]),
  /**
   * Button Size
   */
  size: PropTypes.oneOf(["default", "mini"]),
  /**
   * Whether to disable
   */
  disabled: PropTypes.bool,

  /**
   * Loading
   */
  loading: PropTypes.bool,

  /**
   * Hollow
   */
  plain: PropTypes.bool,

  /**
   * Button Content
   */
  text: PropTypes.string,

  /**
   * Event triggers injected by the low-code platform
   */
  events: PropTypes.objectOf(PropTypes.func),
};

/**
 * Default Property
 */
Button.defaultProps = {
  type: "primary",
  size: "default",
};

Style Configuration

src/web/components/button/index.css

/* This example does not use additional styles, so this file is empty. */

Source Code Parameter Description

props

Corresponds to the data field in Component Configuration. Parameters configured by users in the Data panel of the low-code editor will be passed through to this field.

props.style

Platform reserved field. Parameters configured by users in the Style panel of the low-code editor will be passed through to this field.

props.events

Platform reserved field. Corresponds to the events field in Component Configuration. Trigger custom events at the appropriate time via the props.events.$customevent method.