/* eslint-disable no-undef */
/* eslint-disable react/react-in-jsx-scope */
const types = {
type: 'SAMPLE_RAINBOW_TEXT_WIDGET',
icon: 'https://static.codemao.cn/appcraft/tmp-extension-widgets/development/rainbow-text.png',
title: '彩虹文字',
platforms: ['web', 'android', 'ios'],
isInvisibleWidget: false,
isGlobalWidget: false,
builtIns: {
size: {
width: 100,
height: 50,
},
},
properties: [
{
key: 'startColor',
label: '开始颜色',
valueType: 'color',
defaultValue: 'red',
},
{
key: 'endColor',
label: '结束颜色',
valueType: 'color',
defaultValue: 'blue',
},
],
methods: [
{
key: 'change',
label: '变色',
params: [],
},
],
events: [],
};
function Color() {
this.r = Math.floor(Math.random() * 255);
this.g = Math.floor(Math.random() * 255);
this.b = Math.floor(Math.random() * 255);
this.color = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',0.8)';
}
class RainbowTextWidget extends VisibleWidget {
constructor(props) {
super(props);
this.startColor = props.startColor;
this.endColor = props.endColor;
}
change = () => {
const startColor = new Color().color;
const endColor = new Color().color;
this.setProps({
startColor,
endColor,
});
};
render() {
return (
<div
onClick={this.change}
style={{
backgroundImage: `linear-gradient(to right, ${this.startColor}, ${this.endColor})`,
// backgroundImage: `linear-gradient(to right, yellow, red)`,
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
color: 'transparent',
}}>
彩虹文字
</div>
);
}
}
exports.types = types;
exports.widget = RainbowTextWidget;