bixi/src/app/shared/components/color-box/color-box.component.ts

企业级中后台前端解决方案

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

interface IColor {
  name: string;
  value: string;
  color: string;
  main?: boolean;
}

@Component({
  selector: 'color-box',
  exportAs: 'colorBox',
  styleUrls: ['./color-box.component.less'],
  templateUrl: './color-box.component.html'
})

export class ColorBoxComponent {

  selectedColor: IColor | null;
  modalVisible = false;

  constructor(
    // tslint:disable-next-line:no-any
    @Inject(DOCUMENT) private dom: any,
    private message: NzMessageService) { }

  colorList: IColor[][] = [
    [
      {
        name: '@bixi-blue-lighter',
        value: '#D4E7FC',
        color: '#2E3440'
      }, {
        name: '@bixi-blue-light',
        value: '#3FA9FF',
        color: '#2E3440'
      }, {
        name: '@bixi-blue',
        value: '#107CEE',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-blue-dark',
        value: '#086DD9',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-green-lighter',
        value: '#D7F3D8',
        color: '#2E3440'
      }, {
        name: '@bixi-green-light',
        value: '#9AE396',
        color: '#2E3440'
      }, {
        name: '@bixi-green',
        value: '#21BC29',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-green-dark',
        value: '#14961E',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-orange-lighter',
        value: '#FFEDD7',
        color: '#2E3440'
      }, {
        name: '@bixi-orange-light',
        value: '#FFD078',
        color: '#2E3440'
      }, {
        name: '@bixi-orange',
        value: '#FF9D1F',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-orange-dark',
        value: '#D97B0F',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-red-lighter',
        value: '#FCE0DD',
        color: '#2E3440'
      }, {
        name: '@bixi-red-light',
        value: '#FF7876',
        color: '#2E3440'
      }, {
        name: '@bixi-red',
        value: '#EE5144',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-red-dark',
        value: '#DA373F',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-gray-lighter',
        value: '#F9F9F9',
        color: '#2E3440'
      }, {
        name: '@bixi-gray-light',
        value: '#F0F0F0',
        color: '#2E3440'
      }, {
        name: '@bixi-gray',
        value: '#E8E8E8',
        main: true,
        color: '#2E3440'
      }, {
        name: '@bixi-gray-dark',
        value: '#D9D9D9',
        color: '#2E3440'
      }
    ],
    [
      {
        name: '@bixi-black-lighter',
        value: '#BFBFBF',
        color: '#2E3440'
      }, {
        name: '@bixi-black-light',
        value: '#8C8C8C',
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-black',
        value: '#595959',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-black-dark',
        value: '#262626',
        color: 'rgba(255,255,255,0.9)'
      }
    ],
    [
      {
        name: '@bixi-white-lighter',
        value: '#FFFFFF',
        color: '#2E3440'
      }, {
        name: '@bixi-white-light',
        value: '#FBFBFC',
        color: '#2E3440'
      }, {
        name: '@bixi-white',
        value: '#F6F7F8',
        main: true,
        color: '#2E3440'
      }, {
        name: '@bixi-white-dark',
        value: '#F1F2F4',
        color: '#2E3440'
      }
    ],
    [
      {
        name: '@bixi-geekblack-lighter',
        value: '#676D84',
        color: '#2E3440'
      }, {
        name: '@bixi-geekblack-light',
        value: '#373B49',
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-geekblack',
        value: '#242733',
        main: true,
        color: 'rgba(255,255,255,0.9)'
      }, {
        name: '@bixi-geekblack-dark',
        value: '#1A1D2B',
        color: 'rgba(255,255,255,0.9)'
      }
    ]
  ];

  onColorClick(color: IColor): void {
    this.selectedColor = color;
    this.modalVisible = true;
  }

  private _copy(value: string): Promise<string> {
    const promise = new Promise<string>((resolve): void => {
      let copyTextArea = (null as any) as HTMLTextAreaElement; // tslint:disable-line:no-any
      try {
        copyTextArea = this.dom.createElement('textarea');
        copyTextArea.style.height = '0px';
        copyTextArea.style.opacity = '0';
        copyTextArea.style.width = '0px';
        this.dom.body.appendChild(copyTextArea);
        copyTextArea.value = value;
        copyTextArea.select();
        this.dom.execCommand('copy');
        resolve(value);
      } finally {
        if (copyTextArea && copyTextArea.parentNode) {
          copyTextArea.parentNode.removeChild(copyTextArea);
        }
      }
    });

    return promise;
  }

  onCopy(value: string) {
    this.modalVisible = false;
    this.message.remove();
    if (value) {
      this._copy(value).then(() => {
        this.message.create('success', '复制成功');
      });
    } else {
      this.message.warning('复制失败');
    }
  }

  onClose() {
    this.modalVisible = false;
  }
}