pixuireactcomponents 1.2.2 → 1.2.31

package/ui/sample/Images.tsx

@@ -1,60 +0,0 @@
-
-import btn_close from './asset/btn_close.png';
-import changtai_button from './asset/changtai_button.jpg';
-import checkbox0 from './asset/checkbox0.png';
-import checkbox1 from './asset/checkbox1.png';
-import data_arrow_down from './asset/data_arrow_down.png';
-import data_arrow_up from './asset/data_arrow_up.png';
-import dot from './asset/dot.png';
-import inner from './asset/inner.png';
-import item_reddot from './asset/item_reddot.png';
-import loading from './asset/loading.png';
-import money_dropdown from './asset/money_dropdown.png';
-import money_dropdownall from './asset/money_dropdownall.png';
-import outer from './asset/outer.png';
-import tab_choosed from './asset/tab_choosed.png';
-import tabs_bg from './asset/tabs_bg.png';
-import video_pause from './asset/video_pause.png';
-import video_play from './asset/video_play.png';
-import video_reload from './asset/video_reload.png';
-import xuanfu_button from './asset/xuanfu_button.jpg';
-import yaxia_button from './asset/yaxia_button.jpg';
-import slapface_samplepic1 from './asset/slapface_samplepic1.png'
-import slapface_samplepic2 from './asset/slapface_samplepic2.png'
-import slapface_samplepic3 from './asset/slapface_samplepic3.png'
-import slapface_samplepic4 from './asset/slapface_samplepic4.png'
-import slapface_samplepic5 from './asset/slapface_samplepic5.png'
-import slapface_samplepic6 from './asset/slapface_samplepic6.png'
-
-
-
-
-export const Images = {
-  btn_close: btn_close,
-  changtai_button: changtai_button,
-  checkbox0: checkbox0,
-  checkbox1: checkbox1,
-  data_arrow_down: data_arrow_down,
-  data_arrow_up: data_arrow_up,
-  dot: dot,
-  inner: inner,
-  item_reddot: item_reddot,
-  loading: loading,
-  money_dropdown: money_dropdown,
-  money_dropdownall: money_dropdownall,
-  outer: outer,
-  tab_choosed: tab_choosed,
-  tabs_bg: tabs_bg,
-  video_pause: video_pause,
-  video_play: video_play,
-  video_reload: video_reload,
-  xuanfu_button: xuanfu_button,
-  yaxia_button: yaxia_button,
-  slapface_samplepic1: slapface_samplepic1,
-  slapface_samplepic2: slapface_samplepic2,
-  slapface_samplepic3: slapface_samplepic3,
-  slapface_samplepic4: slapface_samplepic4,
-  slapface_samplepic5: slapface_samplepic5, 
-  slapface_samplepic6: slapface_samplepic6
-};
-

package/ui/sample/OutlineText/OutlineDemo.tsx

@@ -1,61 +0,0 @@
-import { Component, createRef, CSSProperties } from 'preact';
-import { OutlineText } from '../../components/outlinetext/OutlineText';
-
-interface DemoProps{
-    style?: CSSProperties;
-    outlineColor?: {
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-    };
-    outlineDistance?: {
-        x: number;
-        y: number;
-    };
-}
-export class OutlineDemo extends Component<DemoProps,DemoProps >{
-    constructor(param)
-    {
-        super(param);
-        this.setState({
-            style: {width:'200px', height:'200px', backgroundColor:'#FF00FFFF'},
-            outlineDistance : {
-                x : 2,
-                y : 2
-            },
-            outlineColor : {
-                r: 0,
-                g:204,
-                b: 0,
-                a: 1,
-            }
-        });
-    }
-
-
-    onClickButton() {
-        this.setState({
-            style: {width:'100px', height:'100px',  backgroundColor:'#FFFF00FF'},
-            outlineDistance : {
-                x : 1,
-                y : 1
-            },
-            outlineColor : {
-                r: 255,
-                g: 0,
-                b: 0,
-                a: 1,
-            }
-        });
-    }
-
-    render() {
-        return(
-            <div>
-                <div style={{width:'100px', height:'100px', backgroundColor:'#FF00FFFF'}} onClick={this.onClickButton.bind(this)}>点击更新组件状态</div>
-                <OutlineText style={this.state.style} outlineDistance={this.state.outlineDistance} outlineColor={this.state.outlineColor}/>
-            </div>
-        );
-    }
-}

package/ui/sample/Slapface/SlapfaceDemo.tsx

@@ -1,30 +0,0 @@
-import { Component } from 'preact';
-import { Slapface } from 'src/pixUIReactComponents/ui/components/slapface/Slapface';
-import { Images } from 'src/pixUIReactComponents/ui/sample/Images'
-
-const settingsitems = {
-    ani_switch_type: 2,
-    is_mask: false
-}
-
-let jumpButton = {
-    pic_changtai: Images.changtai_button,
-    pic_yaxia: Images.yaxia_button,
-    pic_xuanfu: Images.xuanfu_button
-}
-
-let btn_closeButton = Images.btn_close
-
-let groupArr = [{ picture: Images.slapface_samplepic1, width: 632, height: 639 }, { picture: Images.slapface_samplepic2, width: 304, height: 331 },
-{ picture: Images.slapface_samplepic3, width: 662, height: 631 }, { picture: Images.slapface_samplepic4, width: 728, height: 651 },
-{ picture: Images.slapface_samplepic5, width: 630, height: 579 }, { picture: Images.slapface_samplepic6, width: 703, height: 621 }];
-
-export class SlapfaceDemo extends Component<any, any>{
-    render() {
-        return (
-            <div style={{position:"relative",width:"100%",height:"100%"}}>
-                <Slapface LoadGroup={groupArr} jumpButton={jumpButton} settingsitems={settingsitems}  pic_loading={Images.loading} btn_closeButton = {Images.btn_close}/>
-            </div>
-        )
-    }
-}

package/ui/sample/bulletscreen/BulletDemo.tsx

@@ -1,84 +0,0 @@
-import { createRef } from 'lib/preact/src/create-element';
-import { Component, CSSProperties } from 'preact';
-import { BulletScreenAnimation, BulletScreenAnimationData } from '../../components/bulletscreen/BulletScreenAnimation';
-
-let rootStyle: CSSProperties = {
-  width: '100%',
-  height: '750px',
-
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-
-  backgroundColor: '#FF000055'
-};
-
-let bulletScreenConfigData: BulletScreenAnimationData = {
-  generateCycle: 200,
-  channelHeight: 50,
-  screenWidth: 0,
-  screenHeight: 0,
-  totalTime: 8000
-};
-
-let GetBulletData = (function () {
-  let BULLET_NUM = 1;
-  return function () {
-    console.log('测试弹幕1');
-    return '测试弹幕' + BULLET_NUM++;
-  };
-}());
-
-export class BulletDemo extends Component<
-  any,
-  {
-    screenWidth: number;
-    screenHeight: number;
-  }>{
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      screenWidth: 0,
-      screenHeight: 0
-    };
-  }
-
-  private refRoot = createRef();
-  private refBulletScreen = createRef();
-
-  componentDidMount() {
-    let _width = this.getRootComputedSize('width');
-    let _height = this.getRootComputedSize('height');
-    console.warn(_width, '___', _height);
-
-    this.setState({
-      screenWidth: _width,
-      screenHeight: _height
-    }, () => {
-      this.refBulletScreen.current.StartRunBullets();
-    });
-  }
-
-  getRootComputedSize = (key: string) => {
-    if (key == '' || key == undefined) return undefined;
-
-    let realWidthStr = window.getComputedStyle(this.refRoot.current, null).getPropertyValue(key);
-    let widthNum = parseInt(realWidthStr.substring(0, realWidthStr.length - 2));
-
-    return widthNum;
-  }
-
-  render() {
-    console.warn('[[render]]---)))');
-    bulletScreenConfigData.screenWidth = this.state.screenWidth;
-    bulletScreenConfigData.screenHeight = this.state.screenHeight;
-
-    return (
-      <div ref={this.refRoot} style={rootStyle}>
-        <BulletScreenAnimation screenWidth={this.state.screenWidth} screenHeight={this.state.screenHeight} ref={this.refBulletScreen} isRun={true} screenData={bulletScreenConfigData} getBulletText={GetBulletData} />
-      </div>
-    );
-  }
-}

package/ui/sample/button/ButtonDemo.tsx

@@ -1,19 +0,0 @@
-import { Component } from 'preact';
-import {Button} from '../../components/button/Button';
-import { Images } from '../Images';
-
-export class ButtonDemo extends Component<any,any> {
-    public clickArr = [1,2,3]
-    private clickEvent = (arr1,arr2,arr3)=>{
-        console.log("1",arr1)
-        console.log("2",arr2)
-        console.log("3",arr3)
-    }
-    render(){
-        return(
-            <div>
-               <Button pic_changtai = {Images.changtai_button} pic_yaxia = {Images.yaxia_button} pic_xuanfu = {Images.xuanfu_button} clickEvent = {this.clickEvent} clickArr = {this.clickArr} />
-            </div>
-        )
-    }
-}

package/ui/sample/carousel/carouselDemo.tsx

@@ -1,52 +0,0 @@
-import { useState } from 'preact/hooks';
-import { useRef } from '../../../../../lib/preact/hooks/src';
-import { Carousel } from '../../components/carousel/Carousel';
-/*
-      选项：
-      defaultIndex: number = 1, //默认index，从1开始
-      compWidth: number = 100, //组件宽度
-      compHeight: number = 100, //组件高度
-      autoplay: boolean = true, //自动轮播
-      switchDuration: number = 3000, //自动轮播切换间隔（>1000）
-      loop: boolean = true, //播到最后是否停止
-      isVertical: boolean = false, //轮播元素滚动方向
-      touchable: boolean = true, //是否允许手势切换
-      onSlideChange: Function | null  = null//切换元素后的回调函数
-      onclickEvent: Function
-      cRef: PropRef //Carousel的引用，通过ref可以拿到组件的切换方法
-*/
-export function CarouselDemo() {
-  const CarouselRef = useRef();
-  let carouselData = [1, 2, 3];
-  let clicked = (i) => {
-    console.log('clicked ' + i);
-  };
-  const switchNext = () => {
-    (CarouselRef.current as any).handleNext();
-  };
-  const switchPrev = () => {
-    (CarouselRef.current as any).handlePrev();
-  };
-  let [aut,setaut] = useState(true);
-
-  return (
-    <div>
-      <div onClick={switchNext} style={{ width: '50px', height: '50px', backgroundColor: 'green' }}>next</div>
-      <div onClick={switchPrev} style={{ width: '50px', height: '50px', backgroundColor: 'green' }}>prev</div>
-
-      <div onClick={()=>{setaut(true)}} style={{ width: '50px', height: '50px', backgroundColor: 'green' }}>auto</div>
-      <div onClick={()=>{setaut(false)}} style={{ width: '50px', height: '50px', backgroundColor: 'green' }}>notauto</div>
-
-      <Carousel onclickEvent={clicked} compWidth={300} compHeight={100} switchDuration={1000} cRef={CarouselRef} autoplay = {aut}>
-        {/* 在Carousel.Item的子节点放入要展示的内容，节点宽高要和compWidth，compHeight一致 */}
-        {carouselData.map((item, i) => (
-          <Carousel.Item>
-            <div style={{ width: '300px', height: '100px', backgroundColor: 'yellow' }} >{item}</div>
-          </Carousel.Item>
-        ))}
-      </Carousel>
-
-    </div>
-
-  );
-}

package/ui/sample/checkBox/checkBoxDemo.tsx

@@ -1,7 +0,0 @@
-import { Checkbox } from '../../components/checkBox/CheckBox';
-
-export function CheckboxDemo() {
-    return (
-        <Checkbox defauleSelected={false} selectedChanged={(b) => { console.log(b); }} />
-    );
-}

package/ui/sample/dropdown/DropdownDemo.tsx

@@ -1,65 +0,0 @@
-import { Component, CSSProperties } from 'preact';
-import { Dropdown, DropdownConfig } from '../../components/dropdown/Dropdown';
-import { Images } from '../Images';
-import { MoneyDropdownOption } from './MoneyDropdownOption';
-import { MoneyDropdownSpreadMain } from './MoneyDropdownSpreadMain';
-import { MoneyDropdownUnspreadMain } from './MoneyDropdownUnspreadMain';
-
-const dropdownAreaStyle: CSSProperties = {
-    position: 'absolute',
-    top: '0px',
-    right: '17px',
-    width: '98px',
-    height: '40px',
-    // backgroundColor: '#FF00FF33',
-};
-
-const TYPES: string[] = ['团队', '单人路', '打野', '中路', '射手', '辅助'];
-
-export class DropdownDemo extends Component<any, any>{
-    constructor(props) {
-        super(props);
-    }
-
-    onChoose = () => {
-
-    }
-
-    render() {
-
-
-        // dropdown展开的样式
-        const _spreadStyle: CSSProperties = {
-            position: 'absolute',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            borderImage: `url(${Images.money_dropdownall}) 45 10 10 10`,
-            width: '98px',
-            height: '182px',
-            top: '4px',
-        };
-
-        let _config: DropdownConfig<string> = {
-            spreadStyle: _spreadStyle,
-            datas: TYPES,
-        };
-
-        let _options: MoneyDropdownOption[] = Array(TYPES.length).fill('').map((value, index) => {
-            return <MoneyDropdownOption index={index} info={TYPES[index]} />;
-        });
-
-        return (
-            <div style={dropdownAreaStyle}>
-                <Dropdown<string, MoneyDropdownUnspreadMain, MoneyDropdownSpreadMain, MoneyDropdownOption>
-                    config={_config}
-                    onChoose={this.onChoose}
-                    unspreadMainUI={<MoneyDropdownUnspreadMain />}
-                    spreadMainUI={<MoneyDropdownSpreadMain />}
-                    optionsUI={_options}
-                    defaultIndex={this.state.selectedType} />
-            </div>
-        );
-    }
-}

package/ui/sample/dropdown/MoneyDropdownOption.tsx

@@ -1,50 +0,0 @@
-import { CSSProperties } from 'preact';
-import { DropdownOptionUI } from '../../components/dropdown/DropdownOptionUI';
-import videoLess from './../less/video.less';
-
-
-
-const rootStyle: CSSProperties = {
-    width: '98px',
-    height: '29px',
-    flexShrink: 0,       //如果需要使用滚动条需加该属性
-    // backgroundColor: "#FF000044"
-};
-
-const textStyle: CSSProperties = {
-    color: '#CDBE91',
-    fontSize: 14,
-    marginLeft: '17px',   // 13 + 4
-
-    marginTop: '7px'
-};
-
-const lineStyle: CSSProperties = {
-    height: '1px',
-    width: '65px',
-    marginLeft: '17px',
-    backgroundColor: '#C4C4C4',
-};
-
-
-export class MoneyDropdownOption extends DropdownOptionUI<string>{
-    private isLast = false
-    constructor(props) {
-        super(props);
-
-        if (props['isLast']) this.isLast = true;
-        // this.props.isLast : boolean
-        // 最后一个不要横线...
-    }
-
-    render() {
-        return (
-            <div style={rootStyle} className={videoLess.column_start_start} onClick={this.props.onChoose}>
-                <div style={{ width: '100%', height: '28px' }} className={videoLess.row_start_center}>
-                    <text style={textStyle}>{this.props.info}</text>
-                </div>
-                {this.isLast ? null : <div style={lineStyle}></div>}
-            </div>
-        );
-    }
-}

package/ui/sample/dropdown/MoneyDropdownSpreadMain.tsx

@@ -1,42 +0,0 @@
-import { CSSProperties } from 'preact';
-import { DropdownSpreadMainUI } from '../../components/dropdown/DropdownSpreadMainUI';
-import { Images } from '../Images';
-import videoLess from './../less/video.less';
-
-
-const rootStyle: CSSProperties = {
-    width: '98px',
-    height: '32px',
-    // backgroundColor: '#FF000F77'
-};
-
-const textStyle: CSSProperties = {
-    color: '#CDBE91',
-    fontSize: 16,
-    marginLeft: '13px',
-    top: '4px',
-};
-
-const arrowStyle: CSSProperties = {
-    width: '15px',
-    height: '18px',
-    marginRight: '20px',
-    top: '-2px',
-};
-
-
-export class MoneyDropdownSpreadMain extends DropdownSpreadMainUI<string>{
-    constructor(props) {
-        super(props);
-        // console.warn("MoneyDropdownSpreadMain constructor ---")
-    }
-
-    render() {
-        return (
-            <div style={rootStyle} className={videoLess.row_between_center} onClick={this.props.closeList}>
-                <text style={textStyle}>{this.props.info}</text>
-                <img style={arrowStyle} src={Images.data_arrow_up} />
-            </div>
-        );
-    }
-}

package/ui/sample/dropdown/MoneyDropdownUnspreadMain.tsx

@@ -1,44 +0,0 @@
-import { CSSProperties } from 'preact';
-import { DropdownUnspreadMainUI } from '../../components/dropdown/DropdownUnspreadMainUI';
-import { Images } from '../Images';
-import videoLess from './../less/video.less';
-
-
-
-const rootStyle: CSSProperties = {
-    width: '98px',
-    height: '40px',
-    top: '4px',
-    backgroundImage: `url(${Images.money_dropdown})`
-};
-
-const textStyle: CSSProperties = {
-    color: '#CDBE91',
-    fontSize: 16,
-    marginLeft: '13px',
-};
-
-const arrowStyle: CSSProperties = {
-    width: '15px',
-    height: '18px',
-    marginRight: '20px',
-    top: '-4px',
-};
-
-
-export class MoneyDropdownUnspreadMain extends DropdownUnspreadMainUI<string>{
-    constructor(props) {
-        super(props);
-
-        // console.warn("UnspreadMain constructor----")
-    }
-
-    render() {
-        return (
-            <div style={rootStyle} className={videoLess.row_between_center} onClick={this.props.openList}>
-                <text style={textStyle}>{this.props.info}</text>
-                <img style={arrowStyle} src={Images.data_arrow_down} />
-            </div>
-        );
-    }
-}

package/ui/sample/gradient/GradientDemo.tsx

@@ -1,51 +0,0 @@
-import { Component, CSSProperties, } from 'preact';
-import { GradientText } from '../../components/gradient/GradientText';
-
-interface DemoProps {
-    buttonText?: string;
-    fontSize?: number;
-    text?: string;
-    fontStyle?: string;
-    style?: CSSProperties;
-    colorTop?: string;
-    direction?: string;
-}
-
-export class GradientTextDemo extends Component<DemoProps, DemoProps> {
-
-    constructor(param) {
-        super(param);
-        this.setState({
-            buttonText: '点击更新组件属性',
-            fontSize: 25,
-            text: '1111',
-            fontStyle: 'Normal',
-            style: { width: '200px', height: '200px', backgroundColor: '#FFFFFFFF' },
-            colorTop: '#4CE0314F',
-            direction: 'Vertical',
-        });
-    }
-
-
-    onClickButton() {
-        this.setState({
-            buttonText: '已更新属性',
-            fontSize: 30,
-            fontStyle: 'BoldAndItalic',
-            text: '123123',
-            style: { width: '500px', height: '200px', backgroundColor: '#FFFFFFFF' },
-            colorTop: '#8757FFFF',
-            direction: 'Both',
-        });
-    }
-
-    render() {
-        console.log(this.state.text + '|22222222222222222222222222222222222222222222222222222222222222222222222222');
-        return (
-            <div>
-                <div style={{ width: '150px', height: '50px', backgroundColor: '#FF00FFFF' }} onClick={this.onClickButton.bind(this)}>{this.state.buttonText}</div>
-                <GradientText style={this.state.style} fontStyle={this.state.fontStyle} fontSize={this.state.fontSize} text={this.state.text} colorTop={this.state.colorTop} direction={this.state.direction} />
-            </div>
-        );
-    }
-}