@alicloud/console-components/lib/rc/icon/demos/demo2.js

Alibaba Cloud React Components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * title: "图标列表"
 * description: "点击图标复制代码。"
 */
var react_1 = __importDefault(require("react"));
var console_components_1 = require("@alicloud/console-components");
var react_copy_to_clipboard_1 = __importDefault(require("react-copy-to-clipboard"));
var types = [
    'like-line1',
    'like-fill1',
    'downvote-line',
    'downvote-fill',
    'smile',
    'cry',
    'success',
    'warning',
    'prompt',
    'error',
    'help',
    'clock',
    'success-filling',
    'delete-filling',
    'favorites-filling',
    'add',
    'minus',
    'arrow-up',
    'arrow-down',
    'arrow-left',
    'arrow-right',
    'arrow-double-left',
    'arrow-double-right',
    'switch',
    'sorting',
    'descending',
    'ascending',
    'select',
    'semi-select',
    'loading',
    'search',
    'close',
    'ellipsis',
    'picture',
    'calendar',
    'ashbin',
    'upload',
    'download',
    'set',
    'edit',
    'refresh',
    'filter',
    'attachment',
    'account',
    'email',
    'atm',
];
var customTypes = [
    'star-solid',
    'cloud-machine',
    'display-code',
    'display-arrow-left',
    'account-add-solid',
    'paper-plane',
    'pause',
    'cog',
    'angle-double-up',
    'remove',
    'lock',
    'arrow-alt-left',
    'arrow-alt-right',
    'cart',
    'terminal',
    'points',
    'account-circle',
    'nail-fixed',
    'caret-left',
    'heart-regular',
    'lock-open',
    'arrow-alt-from-bottom',
    'training',
    'supervisor-account',
    'supervise',
    'scatter-plot',
    'share',
    'subtract',
    'search-minus',
    'chart-pie',
    'online',
    'arrows-alt',
    'ban',
    'new-releases',
    'menu',
    'location',
    'mail',
    'list-expansion',
    'chart-line',
    'list-collapsed',
    'installation-package',
    'heart-solid',
    'Keys',
    'question-circle',
    'expand-arrows-alt',
    'folder-add',
    'folder-open',
    'folder',
    'chart-bar',
    'stop',
    'shoppingcart',
    'service',
    'check',
    'scanning',
    'save',
    'sync-alt',
    'rights',
    'renewals',
    'release',
    'process',
    'rank',
    'print',
    'play',
    'position',
    'phone-untie',
    'phone',
    'phone-binding',
    'news',
    'nail',
    'management',
    'multiple-tips',
    'map',
    'more',
    'mains',
    'light',
    'layers',
    'filter-list',
    'angle-double-down',
    'search-plus',
    'arrow-to-bottom',
    'early-warning',
    'data',
    'collapse-card1',
    'collapse-card',
    'data-set',
    'invisible',
    'integral',
    'label',
    'import',
    'file-sql',
    'external-link-alt',
    'flag',
    'file',
    'file-add',
    'eye',
    'dollar',
    'export',
    'arrow-alt-from-top',
    'connection',
    'cut',
    'compass',
    'copy',
    'comment',
    'cloud-upload',
    'cell-phone',
    'cloud-download',
    'bug-report',
    'box',
    'calendar-alt',
    'arrow-to-top',
    'backspace',
    'angle-up',
    'angle-right',
    'caret-right',
    'caret-down',
    'caret-up',
    'angle-down',
    'annex',
    'angle-left',
    'all',
    'accesskeys',
    'icon-drag',
];
var IconStyle = {
    display: 'inline-block',
    width: '140px',
    padding: '30px 0',
    color: '#666',
    cursor: 'pointer',
    textAlign: 'center',
};
var handleCopy = function () { return console_components_1.Message.success('Copied!'); };
exports.default = (function () { return (react_1.default.createElement("div", null,
    react_1.default.createElement("div", { className: "icon-list-title" }, "Base Icon"),
    react_1.default.createElement(console_components_1.Grid.Row, { className: "icon-list", wrap: true }, types.map(function (type, index) { return (react_1.default.createElement(console_components_1.Grid.Col, { span: "3", style: IconStyle },
        react_1.default.createElement(react_copy_to_clipboard_1.default, { key: index, text: "<Icon type=\"".concat(type, "\" />"), onCopy: handleCopy },
            react_1.default.createElement("div", null,
                react_1.default.createElement(console_components_1.Icon, { type: type, size: "xl" }),
                react_1.default.createElement("div", null, type))))); })),
    customTypes.length ? (react_1.default.createElement("div", null,
        react_1.default.createElement("div", { className: "icon-list-custom-title" }, "Custom Icon"),
        react_1.default.createElement(console_components_1.Grid.Row, { className: "icon-list", wrap: true }, customTypes.map(function (type, index) { return (react_1.default.createElement(console_components_1.Grid.Col, { span: "3", style: IconStyle },
            react_1.default.createElement(react_copy_to_clipboard_1.default, { key: index, text: "<Icon type=\"".concat(type, "\" />"), onCopy: handleCopy },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("div", null,
                        react_1.default.createElement(console_components_1.Icon, { type: type, size: "xl" })),
                    react_1.default.createElement("div", null, type))))); })))) : null)); });