amis-theme-editor/esm/global/Color.js

amis主题编辑器

/**
 * amis-theme-editor v2.0.22-beta.2
 * Copyright 2018-2023 @fex
 */

import { __assign } from 'tslib';
import { Button, Icon } from 'amis-ui';
import cloneDeep from 'lodash/cloneDeep';
import React__default from 'react';
import { ColorGenerator } from 'amis-theme-editor-helper';
import '../icons/index.js';
import cx from 'classnames';
import { uuid, render } from 'amis-core';
import findIndex from 'lodash/findIndex';
import { i18n } from 'i18n-runtime';
import { SketchPicker } from 'react-color';
import { getSchemaTpl } from '../tpl.js';
import { Icon as Icon$1 } from 'amis';

function setColor(body, colors, prefix) {
  body.colors = colors.map(function (item, i) {
    return {
      token: prefix + (i + 1),
      label: "".concat(i + 1, "-").concat(item.hex),
      color: item.hex,
      index: i
    };
  });
}
function setAllColor(value, data) {
  var _a;
  var tempData = cloneDeep(data);
  var colorGenerator = new ColorGenerator(value);
  var derivedColors = colorGenerator.getDerivedColor();
  var functionColors = colorGenerator.getFunctionalColor();
  var neutralColors = colorGenerator.getNeutralColor();
  var colors = colorGenerator.getDataColor();
  setColor(tempData.global.colors.brand.body, derivedColors, tempData.global.colors.brand.token);
  //中性色
  tempData.global.colors.neutral.body.forEach(function (color) {
    color.body.colors = neutralColors.map(function (item, i) {
      var token = color.token;
      return {
        token: token + (i + 1),
        label: "".concat(i, "-").concat(item.hex),
        color: item.hex,
        index: i
      };
    });
  });
  functionColors.forEach(function (color, i) {
    tempData.global.colors.func.body[i].body.main = color.hex;
    var funcColorGenerator = new ColorGenerator(color.hex);
    var colors = funcColorGenerator.getDerivedColor();
    setColor(tempData.global.colors.func.body[i].body, colors, tempData.global.colors.func.body[i].token);
  });
  // 数据色
  (_a = tempData.global.colors.data) === null || _a === void 0 ? void 0 : _a.body.forEach(function (item, i) {
    if (i < 3) {
      item.colors = colors[i].map(function (n) {
        return {
          value: n.checkedColor
        };
      });
    }
  });
  return tempData;
}
// 根据主色生成色阶按钮
function CreateColorButton(props) {
  var changeAll = false;
  var ConfigButton = render({
    type: 'button',
    level: 'link',
    label: i18n("e366ccf1556c0672dcecba135ed5472e"),
    size: 'xs',
    tooltip: i18n("c91314c81f9f6c7edc0476b6f1c169db"),
    tooltipPlacement: 'top',
    actionType: 'dialog',
    dialog: {
      className: 'theme-color-config-dialog',
      title: [{
        type: 'icon',
        icon: 'alert-warning',
        className: 'icon title-color'
      }, i18n("bbed50fd3a066f9974441671d541b212")],
      body: i18n("67179ff9e68ecae99931d84d42eb9316"),
      actions: [{
        type: 'checkbox',
        name: 'checkbox',
        visible: !!props.isBrand,
        className: 'brand-color-check',
        option: i18n("5b72549d59ffd2803c3a2e58228ece0c"),
        onChange: function (value) {
          changeAll = value;
        }
      }, {
        type: 'button',
        actionType: 'cancel',
        label: i18n("625fb26b4b3340f7872b411f401e754c")
      }, {
        type: 'button',
        actionType: 'confirm',
        label: i18n("e83a256e4f5bb4ff8b3d804b5473217a"),
        primary: true,
        onClick: function () {
          var tempData = cloneDeep(props.data);
          var pathTemp = props.path.split('.');
          var children = tempData[pathTemp[0]];
          for (var i = 1; i < pathTemp.length; i++) {
            children = children[pathTemp[i]];
          }
          var mainColor = children.body.colors[4].color;
          children.body.main = mainColor;
          var funcColorGenerator = new ColorGenerator(mainColor);
          var colors = funcColorGenerator.getDerivedColor();
          setColor(children.body, colors, children.token);
          if (changeAll && props.isBrand) {
            tempData = setAllColor(mainColor, tempData);
          }
          props.onChange(tempData);
          // 关闭右侧抽屉，避免数据混乱
          props.handleCloseRightPanel();
        }
      }]
    }
  });
  return ConfigButton;
}
function ColorPicker(_a) {
  var defaultColor = _a.defaultColor,
    onColorChange = _a.onColorChange;
  var _b = React__default.useState(defaultColor || '#2468f2'),
    color = _b[0],
    setColor = _b[1];
  React__default.useEffect(function () {
    setColor(defaultColor || '#2468f2');
  }, [defaultColor]);
  return React__default.createElement(SketchPicker, {
    width: "230px",
    disableAlpha: true,
    color: color,
    onChangeComplete: function (value) {
      setColor(value.hex);
      onColorChange && onColorChange(value.hex);
    }
  });
}
var ColorPanel = function (props) {
  var colors = props.colors,
    token = props.token,
    activeToken = props.activeToken,
    activeId = props.activeId,
    onEdit = props.onEdit,
    title = props.title,
    path = props.path,
    data = props.data,
    onChange = props.onChange;
  var common = colors.common;
  var commonColorMap = common.map(function (item) {
    return item.color;
  });
  var colorMap = colors.colors;
  var leftColorMap = colors.colors.filter(function (item, i) {
    return commonColorMap.indexOf(i) === -1;
  });
  var isActive = token === activeToken;
  var isNeutral = token.indexOf('--colors-neutral-') > -1;
  var isNeutralText = token === '--colors-neutral-text-';
  // 编辑常用颜色
  function handleColorPicker(index, isCheck, isSystem) {
    if (!isCheck && isSystem) {
      // 文字前5个固定，其余前4个固定
      return;
    }
    var pathTemp = path.split('.');
    var colors = data[pathTemp[0]];
    for (var i = 1; i < pathTemp.length; i++) {
      colors = colors[pathTemp[i]];
    }
    if (isCheck) {
      colors.common.push({
        id: leftColorMap[index].index + 1,
        label: leftColorMap[index].label,
        color: leftColorMap[index].index
      });
    } else {
      colors.common.splice(index, 1);
    }
    onChange && onChange(data);
  }
  // 修改颜色
  function handleColorEdit(index, item, isSystem) {
    // 中性色颜色路径特殊处理
    var isBrandMain = path === 'global.colors.brand.body' && item.color === 4;
    var changeAll = isBrandMain ? data.global.colors.brand.body.common[0].changeAll : false;
    // TODO: themeData暂时在存一份解决问题，需要解决函数内数据不更新的问题
    var themeData = data;
    onEdit({
      title: title,
      path: "".concat(path, ".common.").concat(index),
      body: getSchemaTpl('normal', [{
        name: 'label',
        type: 'input-text',
        label: i18n("3649bbe5c9b1627ff779ef11058ce176"),
        disabled: isSystem,
        required: true,
        onChange: function (value) {
          var pathTemp = path.split('.');
          var colors = themeData[pathTemp[0]];
          for (var i = 1; i < pathTemp.length; i++) {
            colors = colors[pathTemp[i]];
          }
          colors.colors[item.color].label = value;
          colors.common[index].label = value;
          onChange && onChange(themeData);
        }
      }, {
        type: 'input-text',
        disabled: true,
        label: i18n("122afa60000b5367d28fe360cc1ab400"),
        required: true,
        value: colorMap[item.color].token
      }, {
        asFormItem: true,
        required: true,
        label: i18n("ce0aa1714cde2342fa6583664845fc94"),
        mode: 'normal',
        defaultColor: colorMap[item.color].color,
        component: ColorPicker,
        onColorChange: function (value) {
          var pathTemp = path.split('.');
          var colors = themeData[pathTemp[0]];
          for (var i = 1; i < pathTemp.length; i++) {
            colors = colors[pathTemp[i]];
          }
          colors.colors[item.color].color = value;
          if (changeAll && isBrandMain) {
            themeData = setAllColor(value, themeData);
          }
          onChange && onChange(themeData);
        }
      }, {
        type: 'fieldSet',
        title: i18n("6e196ba10b126b5c96ae29984967efa2"),
        visible: isBrandMain,
        body: [{
          name: 'changeAll',
          type: 'switch',
          label: i18n("5b72549d59ffd2803c3a2e58228ece0c"),
          labelWidth: 200,
          onChange: function (value) {
            themeData.global.colors.brand.body.common[0].changeAll = value;
            changeAll = value;
            onChange && onChange(themeData);
          }
        }]
      }])
    });
  }
  return React__default.createElement("div", {
    className: "ThemeEditor-color"
  }, React__default.createElement("div", {
    className: "ThemeEditor-color-common"
  }, common.map(function (item, i) {
    var token = colorMap[item.color].token.replace('--colors-', '');
    var isSystem = i <= 3 || isNeutralText && i <= 4; // 系统给定，不可修改
    return React__default.createElement("div", {
      className: cx('ThemeEditor-color-common-item', activeId === "".concat(path, ".common.").concat(i) && 'ThemeEditor-color-common-active', isActive && isSystem && 'ThemeEditor-color-common-system'),
      key: item.id || i,
      onClick: function () {
        isActive ? handleColorPicker(i, false, isSystem) : handleColorEdit(i, item, isSystem);
      }
    }, React__default.createElement("div", {
      className: "ThemeEditor-color-common-bg",
      style: {
        background: colorMap[item.color].color || 'fff',
        color: ColorGenerator.getFontColor(colorMap[item.color].color || '')
      }
    }, colorMap[item.color].color, i === 0 && !isNeutral && React__default.createElement("span", {
      className: "ThemeEditor-color-common-base"
    }, i18n("549c3eb3ef1d8c0142c27ac6fa6e5e57"))), React__default.createElement("div", {
      className: "ThemeEditor-color-common-description"
    }, React__default.createElement("div", {
      className: "ThemeEditor-color-common-token"
    }, token), React__default.createElement("div", {
      className: "ThemeEditor-color-common-label"
    }, i18n(item.label)), isActive && React__default.createElement(Icon$1, {
      icon: "checkbox-check",
      className: "ThemeEditor-color-common-check"
    })));
  }), isActive && leftColorMap.map(function (item, i) {
    var token = item.token.replace('--colors-', '');
    return React__default.createElement("div", {
      className: "ThemeEditor-color-common-item",
      key: item.token || i,
      onClick: function () {
        handleColorPicker(i, true, false);
      }
    }, React__default.createElement("div", {
      className: "ThemeEditor-color-common-bg",
      style: {
        background: item.color || 'fff',
        color: ColorGenerator.getFontColor(item.color || '')
      }
    }, item.color), React__default.createElement("div", {
      className: "ThemeEditor-color-common-description"
    }, React__default.createElement("div", {
      className: "ThemeEditor-color-common-token"
    }, token), React__default.createElement("div", {
      className: "ThemeEditor-color-common-label"
    }, item.label), React__default.createElement(Icon$1, {
      icon: "checkbox",
      className: "ThemeEditor-color-common-check"
    })));
  })));
};
var BrandColorPanel = function (props) {
  var data = props.data,
    onChange = props.onChange;
  var colors = props.data.global.colors;
  var brand = colors.brand;
  return React__default.createElement(ColorPanel, {
    colors: brand.body,
    token: brand.token,
    activeToken: props.activeToken,
    activeId: props.activeId,
    onEdit: props.onEdit,
    title: i18n("92544546c88558b7ecda8ce79b579803"),
    path: "global.colors.brand.body",
    data: data,
    onChange: onChange
  });
};
var NeutralColorPanel = function (props) {
  var data = props.data,
    onChange = props.onChange,
    handleSetActiveToken = props.handleSetActiveToken,
    activeToken = props.activeToken,
    activeId = props.activeId,
    onEdit = props.onEdit;
  var neutral = props.data.global.colors.neutral.body;
  return React__default.createElement(React__default.Fragment, null, neutral.map(function (item, index) {
    return React__default.createElement("div", {
      className: "ThemeEditor-body-content-item ThemeEditor-body-content-item--sub",
      key: item.token
    }, React__default.createElement("div", {
      className: "ThemeEditor-body-content-item-title ThemeEditor-body-content-item-title--sub"
    }, i18n(item.label), React__default.createElement(Button, {
      level: "link",
      size: "xs",
      onClick: function () {
        handleSetActiveToken(item.token);
      }
    }, activeToken === item.token ? i18n("769d88e425e03120b83ee4ed6b9d588e") : i18n("95b351c86267f3aedf89520959bce689"))), React__default.createElement(ColorPanel, {
      colors: item.body,
      token: item.token,
      activeId: activeId,
      activeToken: activeToken,
      onEdit: onEdit,
      title: i18n("95b351c86267f3aedf89520959bce689").concat(item.label),
      path: "global.colors.neutral.body.".concat(index, ".body"),
      data: data,
      onChange: onChange
    }));
  }));
};
var FuncColorPanel = function (props) {
  var colorTypes = props.colorTypes,
    data = props.data,
    onChange = props.onChange,
    onEdit = props.onEdit,
    activeToken = props.activeToken,
    activeId = props.activeId,
    handleSetActiveToken = props.handleSetActiveToken,
    handleCloseRightPanel = props.handleCloseRightPanel;
  var otherIndex = findIndex(colorTypes, function (item) {
    return item.token === '--colors-other-';
  });
  var _a = React__default.useState(otherIndex),
    hiddenIndex = _a[0],
    setHiddenIndex = _a[1];
  return React__default.createElement(React__default.Fragment, null, colorTypes.map(function (item, index) {
    var isHidden = hiddenIndex === index;
    var isActive = item.token === activeToken;
    return React__default.createElement("div", {
      className: "ThemeEditor-body-content-item ThemeEditor-body-content-item--sub",
      key: item.token
    }, React__default.createElement("div", {
      className: "ThemeEditor-body-content-item-title ThemeEditor-body-content-item-title--sub"
    }, i18n(item.label), index === colorTypes.length - 1 && React__default.createElement(Icon, {
      icon: "right-arrow",
      className: cx('ThemeEditor-arrow-icon', isHidden && 'ThemeEditor-arrow-icon-reverse'),
      onClick: function () {
        !isActive && setHiddenIndex(isHidden ? -1 : index);
      }
    }), React__default.createElement(Button, {
      level: "link",
      size: "xs",
      onClick: function () {
        isHidden && setHiddenIndex(-1);
        handleSetActiveToken(item.token);
      }
    }, activeToken === item.token ? i18n("769d88e425e03120b83ee4ed6b9d588e") : i18n("95b351c86267f3aedf89520959bce689")), React__default.createElement(CreateColorButton, {
      data: data,
      path: "global.colors.func.body.".concat(index),
      onChange: onChange,
      handleCloseRightPanel: handleCloseRightPanel
    })), !isHidden && React__default.createElement(ColorPanel, {
      colors: item.body,
      token: item.token,
      activeId: activeId,
      activeToken: activeToken,
      onEdit: onEdit,
      title: i18n("95b351c86267f3aedf89520959bce689").concat(item.label),
      path: "global.colors.func.body.".concat(index, ".body"),
      data: data,
      onChange: onChange
    }));
  }));
};
var DataColorPanel = function (props) {
  var _a;
  var data = props.data,
    onEdit = props.onEdit,
    activeId = props.activeId;
  var dataColors = ((_a = data.global.colors.data) === null || _a === void 0 ? void 0 : _a.body) || [];
  function editColor(index) {
    onEdit({
      title: i18n("11e9d79e5e4152d28b299d2bd53c4a0b"),
      path: "global.colors.data.body.".concat(index),
      body: getSchemaTpl('normal', [{
        name: 'label',
        type: 'input-text',
        label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
        required: true
      }, {
        name: 'colors',
        type: 'combo',
        label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
        required: true,
        multiple: true,
        items: [{
          type: 'input-color',
          name: 'value'
        }]
      }])
    });
  }
  function handleDataColorDelete(index) {
    var _a;
    var tempData = cloneDeep(props.data);
    (_a = tempData.global.colors.data) === null || _a === void 0 ? void 0 : _a.body.splice(index, 1);
    props.onChange(tempData);
  }
  return React__default.createElement(React__default.Fragment, null, dataColors.map(function (item, index) {
    return React__default.createElement("div", {
      className: "ThemeEditor-color-data",
      key: index
    }, React__default.createElement("div", {
      className: "ThemeEditor-color-data-title"
    }, item.label, item.custom ? React__default.createElement(Button, {
      className: "theme-icon",
      level: "link",
      onClick: function () {
        return handleDataColorDelete(index);
      }
    }, React__default.createElement(Icon, {
      icon: "delete-button",
      className: "theme-icon-svg theme-delete-icon"
    })) : null), React__default.createElement("div", {
      className: cx('ThemeEditor-color-data-items', activeId === "global.colors.data.body.".concat(index) && 'ThemeEditor-color-data-items--active'),
      onClick: function () {
        return editColor(index);
      }
    }, item.colors.map(function (n, i) {
      return React__default.createElement("div", {
        className: "ThemeEditor-color-data-item",
        style: {
          background: n.value
        },
        key: i
      }, n.value);
    })));
  }));
};
var ThemeColor = function (props) {
  var data = props.data,
    activeToken = props.activeToken,
    handleSetActiveToken = props.handleSetActiveToken,
    onChange = props.onChange,
    handleCloseRightPanel = props.handleCloseRightPanel;
  var _a = data.global.colors,
    brand = _a.brand,
    func = _a.func;
  return {
    title: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
    body: [{
      title: i18n("2b250fe214bc8b93fb78d795a47d7a6c"),
      action: {
        colorEditButton: {
          type: 'button',
          level: 'link',
          label: activeToken === brand.token ? i18n("769d88e425e03120b83ee4ed6b9d588e") : i18n("95b351c86267f3aedf89520959bce689"),
          size: 'xs',
          onClick: function () {
            handleSetActiveToken(brand.token);
          }
        },
        configButton: React__default.createElement(CreateColorButton, {
          data: data,
          path: "global.colors.brand",
          onChange: onChange,
          isBrand: true,
          handleCloseRightPanel: handleCloseRightPanel
        })
      },
      body: function (onEdit) {
        return React__default.createElement(BrandColorPanel, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18n("af09bd51b66a26d8db3119e95b5d28fe"),
      body: function (onEdit) {
        return React__default.createElement(NeutralColorPanel, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18n("b6c3e2dcf4053e5f24d15b63a29f5afd"),
      body: function (onEdit) {
        return React__default.createElement(FuncColorPanel, __assign({
          colorTypes: func.body
        }, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18n("328215447d0e128a845729dab5ce9837"),
      action: {
        addButton: {
          title: i18n("db31a89fcdba29c16f19d5c5bc7c82f2"),
          className: 'theme-color-config-dialog',
          body: {
            type: 'form',
            body: [{
              name: 'label',
              type: 'input-text',
              label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
              required: true
            }, {
              name: 'colors',
              type: 'combo',
              label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
              required: true,
              multiple: true,
              items: [{
                type: 'input-color',
                name: 'value'
              }]
            }],
            onFinished: function (data) {
              var label = data.label,
                colors = data.colors;
              var newDataColor = {
                custom: true,
                token: uuid(),
                label: label,
                colors: colors
              };
              var tempData = cloneDeep(props.data);
              if (!tempData.global.colors.data) {
                tempData.global.colors.data = {
                  label: i18n("328215447d0e128a845729dab5ce9837"),
                  body: []
                };
              }
              tempData.global.colors.data.body.push(newDataColor);
              props.onChange(tempData);
            }
          }
        }
      },
      body: function (onEdit) {
        return React__default.createElement(DataColorPanel, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
var Color = (function () {
  return ThemeColor;
});

export { Color as default };