1. /* eslint-disable no-undef */
    2. /* eslint-disable react/react-in-jsx-scope */
    3. const types = {
    4.   type: 'SAMPLE_RAINBOW_TEXT_WIDGET',
    5.   icon: 'https://static.codemao.cn/appcraft/tmp-extension-widgets/development/rainbow-text.png',
    6.   title: '彩虹文字',
    7.   platforms: ['web', 'android', 'ios'],
    8.   isInvisibleWidget: false,
    9.   isGlobalWidget: false,
    10.   builtIns: {
    11.     size: {
    12.       width: 100,
    13.       height: 50,
    14.     },
    15.   },
    16.   properties: [
    17.     {
    18.       key: 'startColor',
    19.       label: '开始颜色',
    20.       valueType: 'color',
    21.       defaultValue: 'red',
    22.     },
    23.     {
    24.       key: 'endColor',
    25.       label: '结束颜色',
    26.       valueType: 'color',
    27.       defaultValue: 'blue',
    28.     },
    29.   ],
    30.   methods: [
    31.     {
    32.       key: 'change',
    33.       label: '变色',
    34.       params: [],
    35.     },
    36.   ],
    37.   events: [],
    38. };
    40. function Color() {
    41.   this.r = Math.floor(Math.random() * 255);
    42.   this.g = Math.floor(Math.random() * 255);
    43.   this.b = Math.floor(Math.random() * 255);
    44.   this.color = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',0.8)';
    45. }
    47. class RainbowTextWidget extends VisibleWidget {
    48.   constructor(props) {
    49.     super(props);
    50.     this.startColor = props.startColor;
    51.     this.endColor = props.endColor;
    52.   }
    54.   change = () => {
    55.     const startColor = new Color().color;
    56.     const endColor = new Color().color;
    57.     this.setProps({
    58.       startColor,
    59.       endColor,
    60.     });
    61.   };
    63.   render() {
    64.     return (
    65.       <div
    66.         onClick={this.change}
    67.         style={{
    68.           backgroundImage: `linear-gradient(to right, ${this.startColor}, ${this.endColor})`,
    69.           // backgroundImage: `linear-gradient(to right, yellow, red)`,
    70.           backgroundClip: 'text',
    71.           WebkitBackgroundClip: 'text',
    72.           color: 'transparent',
    73.         }}>
    74.         彩虹文字
    75.       </div>
    76.     );
    77.   }
    78. }
    80. exports.types = types;
    81. exports.widget = RainbowTextWidget;