@zgfe/business-lib 1.0.0-beta.1

package/es/commonStyle/theme.less

@@ -0,0 +1,432 @@
+@import (reference) './variable.less';
+
+/* Select-文本框样式重构 */
+.ant-select {
+  color: @fontColor;
+  font-size: @fontSize;
+
+  &.small {
+    .ant-select-selector {
+      height: @inputHeight;
+
+      .ant-select-selection-item {
+        line-height: @inputHeight;
+      }
+    }
+  }
+
+  &.middle {
+    .ant-select-selector {
+      height: @inputHeightNormal;
+      line-height: @inputHeightNormal;
+
+      .ant-select-selection-item {
+        line-height: @inputHeightNormal;
+      }
+    }
+  }
+
+  &.large {
+    .ant-select-selector {
+      height: @inputHeightLarge;
+
+      .ant-select-selection-item {
+        line-height: @inputHeightLarge;
+      }
+    }
+  }
+
+  .ant-select-selection-item {
+    color: @fontColor;
+
+    span {
+      color: @fontColor;
+    }
+  }
+
+  &.ant-select-borderless {
+    &.biz-gray .ant-select-selector {
+      background-color: @grayColor;
+    }
+
+    .ant-select-arrow {
+      display: none;
+    }
+  }
+
+  &:not(.ant-select-customize-input) .ant-select-selector {
+    padding: @inputPadding;
+    background-color: #fff;
+    border: @boxBorder;
+    border-radius: @boxRadius;
+  }
+
+  &:not(.ant-select-customize-input).ant-select-focused:not(.ant-select-disabled),
+  &:not(.ant-select-disabled, .ant-select-customize-input):hover,
+  &.ant-select-borderless:hover,
+  &.ant-select-borderless.ant-select-focused:not(.ant-select-disabled) {
+    .ant-select-selector {
+      color: @themeColor !important;
+      background: @hoverBgColor;
+      border-color: transparent;
+      box-shadow: none;
+
+      .ant-select-selection-item {
+        color: @themeColor;
+      }
+    }
+
+    .ant-select-arrow {
+      display: inline-block;
+      color: @themeColor;
+    }
+  }
+}
+
+.ant-select-arrow {
+  height: 16px;
+  margin-top: -8px;
+  color: @iconColor;
+  font-size: 16px;
+}
+
+.ant-select-selection-placeholder {
+  color: @defaultGray;
+}
+
+/* Select-下拉框样式重构 */
+.ant-select-dropdown {
+  width: @dropdownWidth !important;
+  max-height: @dropdownHeight !important;
+  padding: @dropdownPadding;
+  border-radius: @boxRadius2;
+  box-shadow: @boxShadow;
+
+  &.small {
+    width: @dropdownWidth2 !important;
+  }
+}
+
+.ant-dropdown-menu {
+  width: @dropdownWidth2;
+  padding: @dropdownPadding;
+  border-radius: @boxRadius2;
+  box-shadow: @boxShadow;
+}
+
+.ant-dropdown.large {
+  .ant-dropdown-menu {
+    width: @dropdownWidth3;
+  }
+}
+
+.ant-dropdown-menu-submenu {
+  .ant-dropdown-menu {
+    width: 120px;
+    height: 208px;
+  }
+}
+
+.ant-dropdown-menu-submenu-vertical {
+  &:hover {
+    .box-hover();
+
+    .ant-dropdown-menu-submenu-title {
+      color: @themeColor;
+      background: transparent;
+
+      .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon {
+        color: @themeColor;
+      }
+    }
+  }
+
+  .ant-dropdown-menu-submenu-title {
+    padding: 0;
+  }
+}
+
+.ant-select-item-empty {
+  color: @fontColor;
+}
+
+.ant-select-item,
+.ant-list-item,
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-vertical,
+.ant-cascader-menu-item {
+  height: @selectItemHeight;
+  padding: @selectItemPadding;
+  color: @fontColor;
+  font-weight: @fontWeight;
+  font-size: @fontSize;
+  line-height: 20px;
+  border-radius: @boxRadius2;
+}
+
+.ant-select-item-option-active:not(.ant-select-item-option-disabled),
+.ant-cascader-menu-item:not(.ant-cascader-menu-item-disabled, .ant-cascader-menu-item-active):hover {
+  color: @hoverColor;
+  background-color: @hoverBgColor;
+
+  .biz-icon {
+    color: @hoverColor;
+  }
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled),
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+  color: @activeColor;
+  font-weight: @fontWeight;
+  background-color: @activeBgColor;
+
+  .biz-icon {
+    color: @activeColor;
+  }
+}
+
+.ant-select-item-option-disabled {
+  color: @disableColor;
+  background: #fff;
+}
+
+.ant-cascader-menu-item-active {
+  .ant-cascader-menu-item-expand-icon {
+    color: @activeColor;
+  }
+}
+
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
+  color: @activeColor;
+  background-color: @activeBgColor;
+}
+
+.ant-dropdown-menu-item {
+  &:not(.box-active):hover {
+    .box-hover();
+  }
+
+  &.box-active:hover {
+    .box-active();
+  }
+
+  .ant-dropdown-menu-item-icon {
+    margin-right: 15px;
+    font-size: @iconSize;
+  }
+}
+
+/* input-search/clear */
+
+.ant-input-affix-wrapper {
+  height: 40px;
+  line-height: 40px;
+  background-color: @grayColor;
+  border-color: transparent;
+  border-radius: @boxRadius;
+
+  &.biz-search-box {
+    margin-bottom: 12px;
+    border-radius: @boxRadius2;
+  }
+
+  .ant-input {
+    height: 100%;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:not(.ant-input-affix-wrapper-disabled):hover {
+    background-color: #fff;
+    border-color: @themeColor;
+    box-shadow: 0 0 0 4px #e8efff;
+  }
+
+  &:focus,
+  &.ant-input-affix-wrapper-focused {
+    background: #fff;
+    border-color: @themeColor;
+    box-shadow: 0 0 0 4px #e8efff;
+  }
+
+  .ant-input-suffix span {
+    color: @iconColor;
+    font-size: 16px;
+  }
+
+  .ant-input-clear-icon span {
+    width: 16px;
+    height: 16px;
+    background-color: transparent;
+    border-radius: 50%;
+
+    &:hover {
+      background: @grayColor;
+    }
+  }
+}
+
+/* 高亮 */
+.biz-light-height {
+  color: @themeColor;
+}
+
+.ant-select-item-option-selected {
+  .biz-light-height {
+    color: inherit;
+  }
+}
+
+.ant-tooltip {
+  .ant-tooltip-inner {
+    border-radius: @boxRadius2;
+  }
+
+  &.biz-tooltip {
+    width: auto;
+
+    .ant-tooltip-inner {
+      padding: 4px;
+      color: @fontColor;
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .ant-tooltip-arrow-content {
+      background-color: #fff;
+      --antd-arrow-background-color: #fff;
+    }
+  }
+}
+
+.biz-search-title {
+  // .ant-form-vertical .ant-form-item-label {
+  margin-bottom: 12px;
+  padding: 0 !important;
+  color: @titleColor;
+  font-weight: 600;
+  font-size: @fontSize;
+}
+
+.ant-form-item-explain-error {
+  font-size: 12px;
+}
+
+/* radio */
+
+.ant-radio {
+  color: @fontColor;
+
+  &.ant-radio-checked {
+    .ant-radio-inner {
+      background: #fff;
+      border: 5px solid @themeColor;
+
+      &::after {
+        background-color: #fff;
+      }
+    }
+  }
+
+  .ant-radio-inner {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+  }
+}
+
+.ant-radio-wrapper:hover .ant-radio,
+.ant-radio:hover .ant-radio-inner,
+.ant-radio-input:focus + .ant-radio-inner {
+  border-color: @themeColor;
+}
+
+.ant-radio-input:focus + .ant-radio-inner {
+  box-shadow: none;
+}
+
+.ant-radio-button-wrapper {
+  border: 1px solid @borderColor;
+
+  &:first-child {
+    border-left: 1px solid @borderColor;
+  }
+
+  &:not(:first-child)::before {
+    background-color: @borderColor;
+  }
+
+  &:not(.ant-radio-button-wrapper-checked, .ant-radio-button-wrapper-disabled):hover {
+    .box-hover();
+
+    .biz-icon {
+      color: @themeColor;
+    }
+  }
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+  color: @themeColor;
+  background: @hoverBgColor;
+  border-color: @themeColor;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+  background-color: @themeColor;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
+  border-color: @themeColor;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover,
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
+  color: @themeColor;
+  border-color: @themeColor;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active::before,
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
+  background-color: @hoverBgColor;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: none;
+}
+
+.ant-radio-button-wrapper-disabled {
+  color: @disableColor;
+  background: #fafafb;
+  border-color: @borderColor;
+  cursor: not-allowed;
+
+  .biz-icon {
+    color: @disableColor;
+  }
+}
+
+.ant-radio-button-wrapper-disabled:first-child,
+.ant-radio-button-wrapper-disabled:hover {
+  color: @disableColor;
+  background: #fafafb;
+  border-color: @borderColor;
+}
+
+.ant-radio-button-wrapper-disabled:first-child {
+  border-color: @borderColor;
+}
+
+.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+  color: @disableColor;
+  background: #fafafb;
+  border-color: @borderColor;
+  box-shadow: none;
+}
+
+.ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
+  border-right-color: @themeColor;
+}

package/es/commonStyle/variable.less

@@ -0,0 +1,124 @@
+/** 全局变量 **/
+@themeColor: #165dff;
+@borderColor: #ecedf0;
+@hoverBgColor: #e8efff;
+/*中性色/默认灰*/
+@defaultGray: #9797af;
+/* 字体颜色 */
+@fontColor: #021429;
+/* 中性色/次要-信息2 */
+@fontColor2: #242541;
+/* 中性色/次要-信息3 */
+@fontColor3: #5f6085;
+
+/* 中性色/gray-8背景色 */
+@grayBgColor: #fafafb;
+/*中性色/置灰-信息线框5*/
+/* 灰色*/
+@grayColor: #f6f6f6;
+@disableColor: #cacdd4;
+/*辅助色/错误/底色*/
+@errorColorHover: #fed5d1;
+@errorColor: #fb5547;
+/*box-shadow*/
+@boxShadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+
+/* 标题颜色 */
+@titleColor: @fontColor3;
+/* 图标颜色 */
+@iconColor: @fontColor3;
+/* layout icon颜色 */
+@layoutIconColor: @fontColor2;
+/* hover背景色 */
+// @hoverBgColor: @hoverColor;
+
+/* hover字体颜色 */
+@hoverColor: @themeColor;
+/* active背景色 */
+@activeBgColor: @themeColor;
+/* active字体颜色 */
+@activeColor: #ffffff;
+/* 删除hover背景色 */
+@deleteHoverBgColor: @errorColorHover;
+/* 删除hover字体色 */
+@deleteHoverColor: @errorColor;
+/* 按钮 */
+@btnPrimaryBgColor: @themeColor;
+@btnPrimaryFontColor: #ffffff;
+/* border */
+@boxBorder: 1px solid @borderColor;
+
+/* 字体大小 */
+@fontSize: 14px;
+/* 图标大小 */
+@iconSize: 16px;
+/* 字体weight */
+@fontWeight: 400;
+/*下拉框宽度*/
+@dropdownWidth: 284px;
+/* 分析维度， 关系 */
+@dropdownWidth2: 120px;
+/*更多操作*/
+@dropdownWidth3: 200px;
+/* 指标下拉框= 200+284*/
+@dropdownHeight: 400px;
+
+/*输入框，下拉框高度*/
+@inputHeight: 32px;
+@inputHeightNormal: 40px;
+@inputHeightLarge: 48px;
+
+/*下拉选项高度*/
+@selectItemHeight: 40px;
+/*下拉选项内边距*/
+@selectItemPadding: 10px 8px;
+/* 下拉框外框 */
+@dropdownPadding: 8px;
+/* padding */
+@layoutPadding1: 24px;
+@layoutPadding2: 32px;
+@inputPadding: 0px 8px;
+/* 边框圆角 */
+@boxRadius: 4px;
+/* 特殊圆角 */
+@boxRadius2: 10px;
+/* icon圆角 */
+@iconRadius: 3px;
+
+.boxBg {
+  color: @fontColor;
+  background-color: #fff;
+
+  &:hover:not(.box-active, .box-disabled) {
+    color: @hoverColor;
+    background-color: @hoverBgColor;
+
+    .biz-icon {
+      color: @hoverColor;
+    }
+  }
+}
+
+.box-hover {
+  color: @hoverColor;
+  background-color: @hoverBgColor;
+
+  .biz-icon {
+    color: @hoverColor;
+  }
+}
+
+.box-active {
+  color: @activeColor !important;
+  background-color: @activeBgColor;
+
+  .biz-icon {
+    color: @activeColor;
+  }
+}
+
+.box-disabled {
+  color: @fontColor !important;
+  background-color: #f5f5f5;
+  cursor: not-allowed !important;
+}

package/es/datePicker/data.d.ts

@@ -0,0 +1,9 @@
+export declare const allDate: {
+    unit: string;
+    timeList: string[];
+}[];
+export declare const dateType: {
+    label: string;
+    value: string;
+}[];
+export declare const dateList: any;

package/es/datePicker/data.js

@@ -0,0 +1,65 @@
+export var allDate = [{
+  unit: '按小时',
+  timeList: ['昨天', '前天']
+}, {
+  unit: '按天',
+  timeList: ['7天', '14天', '30天']
+}, {
+  unit: '按周',
+  timeList: ['4周', '8周', '12周']
+}, {
+  unit: '按月',
+  timeList: ['1个月', '2个月', '3个月']
+}];
+export var dateType = [{
+  label: '按小时',
+  value: 'hour'
+}, {
+  label: '按天',
+  value: 'day'
+}, {
+  label: '按周',
+  value: 'week'
+}, {
+  label: '按月',
+  value: 'month'
+}];
+export var dateList = {
+  hour: [{
+    value: '昨天',
+    count: 1
+  }, {
+    value: '前天',
+    count: 2
+  }],
+  day: [{
+    value: '7天',
+    count: 7
+  }, {
+    value: '14天',
+    count: 14
+  }, {
+    value: '30天',
+    count: 30
+  }],
+  week: [{
+    value: '4周',
+    count: 4
+  }, {
+    value: '8周',
+    count: 8
+  }, {
+    value: '12周',
+    count: 12
+  }],
+  month: [{
+    value: '1个月',
+    count: 1
+  }, {
+    value: '2个月',
+    count: 2
+  }, {
+    value: '3个月',
+    count: 3
+  }]
+};

package/es/datePicker/demo/form.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/datePicker/demo/form.js

@@ -0,0 +1,53 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import { Button, Form } from 'antd';
+import { BizDatePicker } from 'business-lib';
+export default (function () {
+  var _Form$useForm = Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _useState = useState({
+    time: {}
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      formData = _useState2[0],
+      setFormData = _useState2[1];
+
+  var onFinish = function onFinish(values) {
+    setFormData(values);
+  };
+
+  var onFinishFailed = function onFinishFailed(errorInfo) {
+    console.log('Failed:', errorInfo);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    onFinish: onFinish,
+    onFinishFailed: onFinishFailed,
+    initialValues: formData
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: "",
+    name: "time"
+  }, /*#__PURE__*/React.createElement(BizDatePicker, null)), /*#__PURE__*/React.createElement(Form.Item, {
+    wrapperCol: {
+      offset: 8,
+      span: 16
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit"))), /*#__PURE__*/React.createElement("p", null, JSON.stringify(formData)));
+});

package/es/datePicker/demo/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;