amis-theme-editor/lib/component/InputTree.js

amis主题编辑器

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

'use strict';

var tslib = require('tslib');
var React = require('react');
var amisCore = require('amis-core');
var tpl = require('../tpl.js');
var index = require('./index.js');
var cx = require('classnames');
var i18nRuntime = require('i18n-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

var inputTreeSchema = {
  type: 'input-tree',
  name: 'tree',
  label: 'Tree',
  options: [{
    label: 'Folder A',
    value: 1,
    children: [{
      label: 'file A',
      value: 2
    }, {
      label: 'Folder B',
      value: 3,
      children: [{
        label: 'file b1',
        value: 3.1
      }]
    }]
  }]
};
var InputTreeStateFunc = function (visibleOn, state, type, props) {
  return [{
    title: i18nRuntime.i18n("6a04fec740a9454aade1a505133e06e0") + state,
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
      labelMode: 'input',
      name: "".concat(state, ".body.color"),
      options: '${colorOptions}'
    }]
  }, {
    title: i18nRuntime.i18n("6704ffe2922cd6bdce754ac6600878c2") + state,
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("9fd51696a4f356286ac845e144980979"),
      labelMode: 'input',
      name: "".concat(state, ".body.expandColor"),
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-select',
      name: "size.body.expandMarginRight",
      label: i18nRuntime.i18n("31e3752986d64c8b36897c8641c8628d"),
      extraUnit: ['px'],
      options: '${sizesOptions}'
    }]
  }, {
    title: i18nRuntime.i18n("2fa7e8a7ac426fd43b720f5440de7b98") + state,
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-select',
      name: "size.body.nodeMarginRight",
      label: i18nRuntime.i18n("31e3752986d64c8b36897c8641c8628d"),
      extraUnit: ['px'],
      options: '${sizesOptions}'
    }]
  }];
};
var InputTreeTypeConfig = function (type, props) {
  return tpl.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([{
    title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
    body: [{
      type: 'input-text',
      label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
      disabled: true,
      name: 'label'
    }, {
      type: 'select',
      name: 'state',
      label: i18nRuntime.i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
      selectFirst: true,
      options: [{
        label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
        value: 'default'
      }, {
        label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
        value: 'hover'
      }, {
        label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
        value: 'active'
      }, {
        label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
        value: 'disabled'
      }]
    }]
  }], InputTreeStateFunc("${state == 'default' || !state}", 'default'), true), InputTreeStateFunc("${state == 'hover'}", 'hover'), true), InputTreeStateFunc("${state == 'active'}", 'active'), true), InputTreeStateFunc("${state == 'disabled'}", 'disabled'), true));
};
var ThemeInputTreeCommon = function (props) {
  var title = props.title,
    edit = props.edit,
    body = props.body,
    activeId = props.activeId,
    refreshToken = props.refreshToken;
  function handleEdit() {
    props.onEdit(edit);
  }
  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
    className: "theme-component"
  }, React__default["default"].createElement("div", {
    className: "theme-component-title"
  }, title), React__default["default"].createElement("div", {
    className: cx__default["default"]('theme-component-content', activeId === edit.path && 'theme-component-content--active'),
    onClick: function () {
      handleEdit();
    }
  }, refreshToken === edit.path ? null : body)));
};
var ThemeInputTree = function (props) {
  return {
    title: i18nRuntime.i18n("5ff2517600918e8e5a45063c1f81ec97"),
    body: [{
      title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
      body: [{
        title: i18nRuntime.i18n("c4b07f2e6b60c5752a70551ff77ccedf"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeInputTreeCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18nRuntime.i18n("c4b07f2e6b60c5752a70551ff77ccedf"),
            edit: {
              title: i18nRuntime.i18n("67c5d85363745c8dd722313da3ef5bb7"),
              path: 'component.inputTree.base.base',
              body: InputTreeTypeConfig()
            },
            body: React__default["default"].createElement("div", {
              className: "theme-component-content-wrap input-tree"
            }, amisCore.render(tslib.__assign(tslib.__assign({}, inputTreeSchema), {
              label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
              className: 'themeEditor-inputTree-base--default'
            })), amisCore.render(tslib.__assign(tslib.__assign({}, inputTreeSchema), {
              label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
              className: 'themeEditor-inputTree-base--hover'
            })), amisCore.render(tslib.__assign(tslib.__assign({}, inputTreeSchema), {
              label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
              className: 'themeEditor-inputTree-base--active'
            })), amisCore.render(tslib.__assign(tslib.__assign({}, inputTreeSchema), {
              label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
              disabled: true,
              className: 'themeEditor-inputTree-base--disabled'
            })))
          });
        }
      }, {
        title: i18nRuntime.i18n("65189f26368d52d06a6f1a7f86b6c174"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeInputTreeCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18nRuntime.i18n("65189f26368d52d06a6f1a7f86b6c174"),
            edit: {
              title: i18nRuntime.i18n("a95f178e0a6fef57f235f12639a67778"),
              path: 'component.inputTree.base.checkboxes',
              body: tpl.getSchemaTpl('collapseGroup', [{
                title: i18nRuntime.i18n("db98f889ce6bc235e66bd4b2a788d137"),
                body: [{
                  type: 'amis-theme-select',
                  name: "size.body.marginRight",
                  label: i18nRuntime.i18n("31e3752986d64c8b36897c8641c8628d"),
                  extraUnit: ['px'],
                  options: '${sizesOptions}'
                }]
              }])
            },
            body: React__default["default"].createElement("div", {
              className: "theme-component-content-wrap input-tree"
            }, amisCore.render({
              type: 'input-tree',
              name: 'tree1',
              label: false,
              multiple: true,
              className: 'themeEditor-inputTree-base--checkboxes',
              options: [{
                label: 'B',
                value: 'b',
                children: [{
                  label: 'B-1',
                  value: 'b-1'
                }]
              }]
            }))
          });
        }
      }]
    }]
  };
};
index.registerComponent('input-tree', {
  type: 'data-entry',
  label: i18nRuntime.i18n("ab4df3d184901ee930f4157b56f78b10"),
  key: 'input-tree',
  component: function () {
    return ThemeInputTree;
  }
});