eapp-amis-theme-editor/lib/component/InputDate.js

amis主题编辑器

/**
 * amis-theme-editor v2.0.11-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 cx = require('classnames');
var index = require('./index.js');
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 ComponentStateFunc = function (visibleOn, state, type) {
  return [{
    type: 'amis-theme-wrapper',
    label: false,
    title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
    visibleOn: visibleOn,
    body: [{
      mode: 'default',
      type: 'amis-theme-border',
      name: "".concat(state, ".body.border")
    }]
  }, {
    type: 'amis-theme-wrapper',
    label: false,
    title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
      labelMode: 'input',
      name: "".concat(state, ".body.color"),
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
      labelMode: 'input',
      name: "".concat(state, ".body.bg-color"),
      options: '${colorOptions}'
    }]
  }];
};
var OptionStateFunc = function (visibleOn, state, type) {
  return [{
    type: 'amis-theme-wrapper',
    label: false,
    title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
      labelMode: 'input',
      name: "".concat(state, ".body.option-color"),
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
      labelMode: 'input',
      name: "".concat(state, ".body.option-bg-color"),
      options: '${colorOptions}'
    }]
  }];
};
var ComponentTypeConfig = function (type, props) {
  return tpl.getSchemaTpl('collapseGroup', [{
    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'
      }]
    }]
  }, {
    title: i18nRuntime.i18n("a381364954fa81c14e2743345e54a8da"),
    body: tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], ComponentStateFunc("${state == 'default' || !state}", 'default'), true), ComponentStateFunc("${state == 'hover'}", 'hover'), true), ComponentStateFunc("${state == 'active'}", 'active'), true), ComponentStateFunc("${state == 'disabled'}", 'disabled'), true), [{
      type: 'amis-theme-font-editor',
      label: false,
      hasSenior: false,
      visibleOn: "${state == 'default' || !state}",
      hideColor: true,
      hideLineHeight: true,
      hideFontFamily: true,
      name: 'default.body.font'
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        type: 'amis-theme-size-editor',
        name: 'default.body.size',
        hideWidth: true,
        hideMinWidth: true,
        label: false
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("841d77223f0ec8cd0b530ed8e0775b20"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        mode: 'default',
        type: 'amis-theme-padding-and-margin',
        name: 'default.body.padding-and-margin',
        hideMargin: true,
        source: '${sizesOptions}'
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        mode: 'default',
        type: 'amis-theme-radius',
        disableBorder: true,
        name: 'default.body.border'
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("86c6876a6379e56ae31d7fcbf7029a9d"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        name: 'default.body.icon',
        label: i18nRuntime.i18n("598f69a9b640508d8e124fd7d33131f0"),
        type: 'icon-select',
        returnSvg: true,
        onChange: function (svg) {
          if (!svg && svg !== '') {
            return;
          }
          setTimeout(function () {
            props.handleReFreshToken('component.inputDate.base');
          }, 400);
        }
      }, {
        type: 'amis-theme-color-picker',
        label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
        labelMode: 'input',
        name: 'default.body.icon-color',
        options: '${colorOptions}'
      }, {
        type: 'amis-theme-select',
        name: 'default.body.icon-size',
        label: i18nRuntime.i18n("58f966670529f4753fb3c5a0647606be"),
        extraUnit: ['px'],
        options: '${sizesOptions}'
      }]
    }, {
      type: 'amis-theme-shadow-editor',
      name: 'active.body.shadow',
      label: false,
      visibleOn: "${state == 'active'}",
      hasSenior: false
    }], false)
  }, {
    title: i18nRuntime.i18n("7c5f468f51162d29c90f146a296e1371"),
    body: tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], OptionStateFunc("${state == 'default' || !state}", 'default'), true), OptionStateFunc("${state == 'hover'}", 'hover'), true), OptionStateFunc("${state == 'active'}", 'active'), true), OptionStateFunc("${state == 'disabled'}", 'disabled'), true), [{
      type: 'amis-theme-wrapper',
      label: false,
      title: false,
      visibleOn: "${state == 'default' || !state}",
      body: [{
        type: 'amis-theme-color-picker',
        label: i18nRuntime.i18n("41ff026d4075053f24666341e7f91d49"),
        labelMode: 'input',
        name: 'default.body.option-today-border-color',
        options: '${colorOptions}'
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        mode: 'default',
        type: 'amis-theme-radius',
        disableBorder: true,
        name: 'default.body.option-border'
      }]
    }], false)
  }, {
    title: i18nRuntime.i18n("7523f06aca1a77db5c8f56285c6e1033"),
    visibleOn: "${state == 'default' || !state || state == 'hover'}",
    body: [{
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        type: 'amis-theme-color-picker',
        label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
        labelMode: 'input',
        name: 'default.body.title-color',
        options: '${colorOptions}'
      }, {
        type: 'amis-theme-color-picker',
        label: i18nRuntime.i18n("b5a15cf44a9b3fd7efaf276c6738cda9"),
        labelMode: 'input',
        name: 'default.body.title-arrow-color',
        options: '${colorOptions}'
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
      visibleOn: "${state == 'hover'}",
      body: [{
        type: 'amis-theme-color-picker',
        label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
        labelMode: 'input',
        name: 'hover.body.title-color',
        options: '${colorOptions}'
      }, {
        type: 'amis-theme-color-picker',
        label: i18nRuntime.i18n("b5a15cf44a9b3fd7efaf276c6738cda9"),
        labelMode: 'input',
        name: 'hover.body.title-arrow-color',
        options: '${colorOptions}'
      }]
    }]
  }]);
};
var OtherStateFunc = function (visibleOn, state, type) {
  return [{
    type: 'amis-theme-wrapper',
    label: false,
    title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
      labelMode: 'input',
      name: "".concat(state, ".body.color"),
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
      labelMode: 'input',
      name: "".concat(state, ".body.bg-color"),
      options: '${colorOptions}'
    }]
  }];
};
var ComponentOtherConfig = function (type) {
  return tpl.getSchemaTpl('collapseGroup', [{
    title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
    body: [{
      type: 'input-text',
      label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
      disabled: true,
      value: i18nRuntime.i18n("fad8b42e1ed63b54f63c71e2ea236c99")
    }, {
      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'
      }]
    }]
  }, {
    title: i18nRuntime.i18n("2aafc8011eec22ee269853b9f23614b8"),
    body: tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], OtherStateFunc("${state == 'default' || !state}", 'default'), true), OtherStateFunc("${state == 'hover'}", 'hover'), true), OtherStateFunc("${state == 'active'}", 'active'), true), OtherStateFunc("${state == 'disabled'}", 'disabled'), true), [{
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        mode: 'default',
        type: 'amis-theme-radius',
        disableBorder: true,
        name: 'default.body.border'
      }]
    }], false)
  }]);
};
var ThemeInputDateCommon = 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 ThemeInputDate = function (props) {
  return {
    title: i18nRuntime.i18n("9df643ddd5b6122c6ed1bcde5a0e18b6"),
    body: [{
      title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
      body: [{
        title: i18nRuntime.i18n("18c63459a2c069022c7790430f761214"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeInputDateCommon, {
            activeId: props.activeId,
            refreshToken: props.refreshToken,
            onEdit: onEdit,
            title: "\u9ED8\u8BA4",
            edit: {
              title: i18nRuntime.i18n("c51efb736b7b9d54241ab06fd71e68b4"),
              path: 'component.inputDate.base',
              body: ComponentTypeConfig('', props)
            },
            body: React__default["default"].createElement("div", {
              className: "theme-component-content-wrap"
            }, amisCore.render({
              type: 'input-date',
              name: 'default',
              label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e")
            }), amisCore.render({
              type: 'input-date',
              name: 'hover',
              label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
              className: 'themeEditor-inputDate-status--hover'
            }), amisCore.render({
              type: 'input-date',
              name: 'active',
              label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
              className: 'themeEditor-inputDate-status--active'
            }), amisCore.render({
              type: 'input-date',
              name: 'disabled',
              label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
              disabled: true
            }))
          });
        }
      }, {
        title: i18nRuntime.i18n("fad8b42e1ed63b54f63c71e2ea236c99"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeInputDateCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: "\u5176\u4ED6\u7C7B\u578B",
            edit: {
              title: i18nRuntime.i18n("3607ff776765cd3178c9d4d25196cc6d"),
              path: 'component.inputDate.other',
              body: ComponentOtherConfig()
            },
            body: React__default["default"].createElement("div", {
              className: "theme-component-content-wrap"
            }, amisCore.render({
              type: 'input-month',
              name: 'month',
              minDate: '20220501',
              label: i18nRuntime.i18n("a0fc142384ddee4823bfbf464d6a7aa5")
            }), amisCore.render({
              type: 'input-quarter',
              name: 'quarter',
              minDate: '20220501',
              label: i18nRuntime.i18n("b3907ebd1f522f2a577ba9b596bcf2c7")
            }), amisCore.render({
              type: 'input-year',
              name: 'year',
              minDate: '20220501',
              label: i18nRuntime.i18n("ed82101599c90fc49b929d6aea1a5dad")
            }))
          });
        }
      }]
    }, {
      title: i18nRuntime.i18n("7866226eb814f681dcc4037e7489aab8"),
      body: [{
        title: i18nRuntime.i18n("18c63459a2c069022c7790430f761214"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeInputDateCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: "\u9ED8\u8BA4",
            edit: {
              title: i18nRuntime.i18n("c51efb736b7b9d54241ab06fd71e68b4"),
              path: 'component.inputDate.range.body',
              body: tpl.getSchemaTpl('normal', [{
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("73fb66653995d4aa5ce9bd8c92ec4cb9"),
                body: [{
                  type: 'amis-theme-select',
                  name: 'line-height',
                  label: 'H',
                  extraUnit: ['px'],
                  options: '${borderWidthOptions}'
                }, {
                  type: 'amis-theme-color-picker',
                  label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
                  labelMode: 'input',
                  name: 'line-color',
                  options: '${colorOptions}'
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("8c47ecd40d7f739e308567de89accd56"),
                body: [{
                  type: 'amis-theme-select',
                  name: 'separator-width',
                  label: 'W',
                  options: '${sizesOptions}'
                }, {
                  type: 'amis-theme-select',
                  name: 'separator-margin',
                  label: i18nRuntime.i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
                  options: '${sizesOptions}'
                }, {
                  type: 'amis-theme-color-picker',
                  label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
                  labelMode: 'input',
                  name: 'separator-color',
                  options: '${colorOptions}'
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("bc9d5a034781e33d1ef3f156c2e53070"),
                body: [{
                  type: 'amis-theme-color-picker',
                  label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
                  labelMode: 'input',
                  name: 'between-color',
                  options: '${colorOptions}'
                }]
              }])
            },
            body: amisCore.render({
              type: 'input-date-range',
              name: 'date-range',
              label: false
            })
          });
        }
      }]
    }]
  };
};
index.registerComponent('input-date', {
  type: 'data-entry',
  label: i18nRuntime.i18n("a55d501e08cd08df3b85c95818b90aad"),
  key: 'input-date',
  component: function () {
    return ThemeInputDate;
  }
});