@oceanbase/ui 0.2.6 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+ /// <reference types="highlight.js" />
1
2
  import React from 'react';
2
3
  import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
3
4
  import './index.less';
@@ -1,5 +1,5 @@
1
1
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
- var _excluded = ["prefixCls", "className", "header", "locale"];
2
+ var _excluded = ["prefixCls", "className", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "locale"];
3
3
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
4
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
5
5
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,6 +23,10 @@ var PageContainer = function PageContainer(_ref) {
23
23
  var customizePrefixCls = _ref.prefixCls,
24
24
  className = _ref.className,
25
25
  header = _ref.header,
26
+ content = _ref.content,
27
+ extraContent = _ref.extraContent,
28
+ tabList = _ref.tabList,
29
+ tabBarExtraContent = _ref.tabBarExtraContent,
26
30
  locale = _ref.locale,
27
31
  restProps = _objectWithoutProperties(_ref, _excluded);
28
32
  var _useContext = useContext(ConfigProvider.ConfigContext),
@@ -32,14 +36,13 @@ var PageContainer = function PageContainer(_ref) {
32
36
  var _useStyle = useStyle(prefixCls),
33
37
  wrapSSR = _useStyle.wrapSSR,
34
38
  hashId = _useStyle.hashId;
35
- var pageContainerCls = classNames(className, hashId);
36
39
  var _ref2 = header || {},
37
40
  reload = _ref2.reload,
38
41
  subTitle = _ref2.subTitle,
39
42
  breadcrumb = _ref2.breadcrumb;
40
43
  var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
41
44
  var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
42
- var newSubTitle = /*#__PURE__*/React.createElement(Space, {
45
+ var newSubTitle = subTitle && /*#__PURE__*/React.createElement(Space, {
43
46
  size: 12
44
47
  }, reload && /*#__PURE__*/React.createElement(Tooltip, {
45
48
  title: locale.reload
@@ -48,7 +51,7 @@ var PageContainer = function PageContainer(_ref) {
48
51
  }))), subTitle);
49
52
  var newHeader = header && _objectSpread(_objectSpread({}, header), {}, {
50
53
  subTitle: newSubTitle,
51
- breadcrumb: _objectSpread({
54
+ breadcrumb: breadcrumb && _objectSpread({
52
55
  itemRender: function itemRender(route, params, routes, paths) {
53
56
  return /*#__PURE__*/React.createElement(ItemRender, {
54
57
  route: route,
@@ -59,10 +62,18 @@ var PageContainer = function PageContainer(_ref) {
59
62
  }
60
63
  }, breadcrumb)
61
64
  });
65
+ var noHasHeader = ['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon', 'breadcrumb'].every(function (item) {
66
+ return !newHeader[item];
67
+ }) && !content && !extraContent && !tabList && !tabBarExtraContent;
68
+ var pageContainerCls = classNames(_defineProperty({}, "".concat(prefixCls, "-no-page-header"), noHasHeader), className, hashId);
62
69
  return wrapSSR( /*#__PURE__*/React.createElement(AntPageContainer, _extends({
63
70
  prefixCls: customizePrefixCls,
64
71
  className: pageContainerCls,
65
- header: newHeader
72
+ header: newHeader,
73
+ content: content,
74
+ extraContent: extraContent,
75
+ tabList: tabList,
76
+ tabBarExtraContent: tabBarExtraContent
66
77
  }, restProps)));
67
78
  };
68
79
  export default LocaleWrapper({
@@ -4,7 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
4
4
  function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
5
5
  import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
6
6
  export var genPageContainerStyle = function genPageContainerStyle(token) {
7
- var _$concat, _$concat2, _$concat3, _$concat4, _ref;
7
+ var _$concat, _$concat2, _$concat3, _$concat5, _ref;
8
8
  var antCls = token.antCls,
9
9
  proComponentsCls = token.proComponentsCls,
10
10
  componentCls = token.componentCls,
@@ -49,20 +49,22 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
49
49
  paddingInline: paddingLG,
50
50
  paddingBlockStart: 0,
51
51
  paddingBlockEnd: paddingLG
52
- }), _$concat3)), _defineProperty(_ref, "".concat(componentCls, "-with-footer "), {
52
+ }), _$concat3)), _defineProperty(_ref, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
53
+ paddingBlockStart: paddingLG
54
+ })), _defineProperty(_ref, "".concat(componentCls, "-with-footer "), {
53
55
  paddingBottom: 64
54
- }), _defineProperty(_ref, "".concat(proComponentsCls, "-footer-bar"), (_$concat4 = {
56
+ }), _defineProperty(_ref, "".concat(proComponentsCls, "-footer-bar"), (_$concat5 = {
55
57
  backgroundColor: colorBgBase,
56
58
  borderRadius: borderRadius,
57
59
  boxShadow: boxShadowSecondary,
58
60
  borderBlockStart: 'none'
59
- }, _defineProperty(_$concat4, "".concat(antCls, "-btn:not(").concat(antCls, "-input-search-button)"), {
61
+ }, _defineProperty(_$concat5, "".concat(antCls, "-btn:not(").concat(antCls, "-input-search-button)"), {
60
62
  minWidth: 68,
61
63
  height: height
62
- }), _defineProperty(_$concat4, "".concat(antCls, "-radio-button-wrapper"), {
64
+ }), _defineProperty(_$concat5, "".concat(antCls, "-radio-button-wrapper"), {
63
65
  height: height,
64
66
  lineHeight: lineHeight
65
- }), _$concat4)), _ref;
67
+ }), _$concat5)), _ref;
66
68
  };
67
69
  export default (function (prefixCls) {
68
70
  var useStyle = genComponentStyleHook('PageContainer', function (token) {
@@ -1,4 +1,17 @@
1
1
  import React from 'react';
2
+ import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
3
+ import type { RangeValue } from './Ranger';
4
+ import type { RangeOption } from './typing';
2
5
  export declare type QuickType = 'select' | 'dropdown';
3
- declare const _default: (props: any) => React.JSX.Element;
6
+ interface IProps extends LocaleWrapperProps {
7
+ selects: RangeOption[];
8
+ type?: QuickType;
9
+ onChange: (range: RangeValue) => void;
10
+ onNameChange?: (name: string) => void;
11
+ customable?: boolean;
12
+ name?: string;
13
+ defaultName?: string;
14
+ isMoment?: boolean;
15
+ }
16
+ declare const _default: (props: IProps) => React.JSX.Element;
4
17
  export default _default;
@@ -1,5 +1,9 @@
1
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
1
2
  var _excluded = ["selects", "value", "defaultValue", "defaultQuickValue", "mode", "quickType", "pastOnly", "onChange", "disabledDate", "locale", "size", "stickRangeName"];
2
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
6
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
3
7
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
8
  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."); }
5
9
  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); }
@@ -12,6 +16,7 @@ import { DatePicker, Space } from '@oceanbase/design';
12
16
  import dayjs from 'dayjs';
13
17
  import { isNil, noop, omit } from 'lodash';
14
18
  import moment from 'moment';
19
+ import classNames from 'classnames';
15
20
  import React, { useEffect, useMemo, useState } from 'react';
16
21
  import LocaleWrapper from "../locale/LocaleWrapper";
17
22
  import { getPrefix } from "../_util";
@@ -108,7 +113,7 @@ var Ranger = function Ranger(props) {
108
113
  var showQuickPicker = selects.length !== 0;
109
114
  return /*#__PURE__*/React.createElement(Space, {
110
115
  size: 0,
111
- className: prefix,
116
+ className: classNames(_defineProperty({}, "".concat(prefix, "-show-range"), showRange), prefix),
112
117
  style: rest.style
113
118
  }, showQuickPicker && /*#__PURE__*/React.createElement(QuickPicker, {
114
119
  customable: true,
@@ -35,7 +35,9 @@
35
35
  z-index: 1;
36
36
  }
37
37
  }
38
+ }
38
39
 
40
+ .@{prefix}-show-range {
39
41
  .ob-ranger-quick-picker.ob-ranger-quick-picker-select {
40
42
  margin-right: -1px;
41
43
 
@@ -1,3 +1,4 @@
1
+ /// <reference types="highlight.js" />
1
2
  import React from 'react';
2
3
  import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
3
4
  import './index.less';
@@ -47,6 +47,10 @@ var PageContainer = ({
47
47
  prefixCls: customizePrefixCls,
48
48
  className,
49
49
  header,
50
+ content,
51
+ extraContent,
52
+ tabList,
53
+ tabBarExtraContent,
50
54
  locale,
51
55
  ...restProps
52
56
  }) => {
@@ -54,22 +58,31 @@ var PageContainer = ({
54
58
  const rootPrefixCls = getPrefixCls();
55
59
  const prefixCls = getPrefixCls("pro-page-container", customizePrefixCls);
56
60
  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
57
- const pageContainerCls = (0, import_classnames.default)(className, hashId);
58
61
  const { reload, subTitle, breadcrumb } = header || {};
59
62
  const reloadProps = (0, import_lodash.isObject)(reload) && !import_react.default.isValidElement(reload) ? reload : {};
60
63
  const reloadCls = (0, import_classnames.default)(
61
64
  `${rootPrefixCls}-page-header-heading-reload`,
62
65
  reloadProps.className
63
66
  );
64
- const newSubTitle = /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design2.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
67
+ const newSubTitle = subTitle && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design2.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
65
68
  const newHeader = header && {
66
69
  ...header,
67
70
  subTitle: newSubTitle,
68
- breadcrumb: {
71
+ breadcrumb: breadcrumb && {
69
72
  itemRender: (route, params, routes, paths) => /* @__PURE__ */ import_react.default.createElement(import_ItemRender.default, { route, params, routes, paths }),
70
73
  ...breadcrumb
71
74
  }
72
75
  };
76
+ const noHasHeader = ["title", "subTitle", "extra", "tags", "footer", "avatar", "backIcon", "breadcrumb"].every(
77
+ (item) => !newHeader[item]
78
+ ) && !content && !extraContent && !tabList && !tabBarExtraContent;
79
+ const pageContainerCls = (0, import_classnames.default)(
80
+ {
81
+ [`${prefixCls}-no-page-header`]: noHasHeader
82
+ },
83
+ className,
84
+ hashId
85
+ );
73
86
  return wrapSSR(
74
87
  /* @__PURE__ */ import_react.default.createElement(
75
88
  import_pro_components.PageContainer,
@@ -77,6 +90,10 @@ var PageContainer = ({
77
90
  prefixCls: customizePrefixCls,
78
91
  className: pageContainerCls,
79
92
  header: newHeader,
93
+ content,
94
+ extraContent,
95
+ tabList,
96
+ tabBarExtraContent,
80
97
  ...restProps
81
98
  }
82
99
  )
@@ -88,6 +88,11 @@ var genPageContainerStyle = (token) => {
88
88
  paddingBlockEnd: paddingLG
89
89
  }
90
90
  },
91
+ [`${componentCls}-no-page-header`]: {
92
+ [`${componentCls}-children-container`]: {
93
+ paddingBlockStart: paddingLG
94
+ }
95
+ },
91
96
  [`${componentCls}-with-footer `]: {
92
97
  paddingBottom: 64
93
98
  },
@@ -1,4 +1,17 @@
1
1
  import React from 'react';
2
+ import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
3
+ import type { RangeValue } from './Ranger';
4
+ import type { RangeOption } from './typing';
2
5
  export declare type QuickType = 'select' | 'dropdown';
3
- declare const _default: (props: any) => React.JSX.Element;
6
+ interface IProps extends LocaleWrapperProps {
7
+ selects: RangeOption[];
8
+ type?: QuickType;
9
+ onChange: (range: RangeValue) => void;
10
+ onNameChange?: (name: string) => void;
11
+ customable?: boolean;
12
+ name?: string;
13
+ defaultName?: string;
14
+ isMoment?: boolean;
15
+ }
16
+ declare const _default: (props: IProps) => React.JSX.Element;
4
17
  export default _default;
@@ -36,6 +36,7 @@ var import_design = require("@oceanbase/design");
36
36
  var import_dayjs = __toESM(require("dayjs"));
37
37
  var import_lodash = require("lodash");
38
38
  var import_moment = __toESM(require("moment"));
39
+ var import_classnames = __toESM(require("classnames"));
39
40
  var import_react = __toESM(require("react"));
40
41
  var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
41
42
  var import_util = require("../_util");
@@ -119,34 +120,48 @@ var Ranger = (props) => {
119
120
  }
120
121
  const showRange = mode === "default" || rangeName === import_constant.CUSTOMIZE;
121
122
  const showQuickPicker = selects.length !== 0;
122
- return /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 0, className: prefix, style: rest.style }, showQuickPicker && /* @__PURE__ */ import_react.default.createElement(
123
- import_QuickPicker.default,
123
+ return /* @__PURE__ */ import_react.default.createElement(
124
+ import_design.Space,
124
125
  {
125
- customable: true,
126
- type: internalQuickType,
127
- onChange: rangeChange,
128
- onNameChange: handleNameChange,
129
- selects,
130
- name: rangeName,
131
- locale,
132
- isMoment,
133
- size
134
- }
135
- ), showRange && // @ts-ignore
136
- /* @__PURE__ */ import_react.default.createElement(
137
- import_design.DatePicker.RangePicker,
138
- {
139
- disabledDate: pastOnly ? disabledFuture : disabledDate,
140
- format: import_constant.DATE_TIME_FORMAT,
141
- defaultValue,
142
- value: innerValue || defaultInternalValue,
143
- onChange: datePickerChange,
144
- showTime: true,
145
- className: `${prefix}-range-picker`,
146
- size,
147
- ...(0, import_lodash.omit)(rest, "value", "onChange")
148
- }
149
- ));
126
+ size: 0,
127
+ className: (0, import_classnames.default)(
128
+ {
129
+ [`${prefix}-show-range`]: showRange
130
+ },
131
+ prefix
132
+ ),
133
+ style: rest.style
134
+ },
135
+ showQuickPicker && /* @__PURE__ */ import_react.default.createElement(
136
+ import_QuickPicker.default,
137
+ {
138
+ customable: true,
139
+ type: internalQuickType,
140
+ onChange: rangeChange,
141
+ onNameChange: handleNameChange,
142
+ selects,
143
+ name: rangeName,
144
+ locale,
145
+ isMoment,
146
+ size
147
+ }
148
+ ),
149
+ showRange && // @ts-ignore
150
+ /* @__PURE__ */ import_react.default.createElement(
151
+ import_design.DatePicker.RangePicker,
152
+ {
153
+ disabledDate: pastOnly ? disabledFuture : disabledDate,
154
+ format: import_constant.DATE_TIME_FORMAT,
155
+ defaultValue,
156
+ value: innerValue || defaultInternalValue,
157
+ onChange: datePickerChange,
158
+ showTime: true,
159
+ className: `${prefix}-range-picker`,
160
+ size,
161
+ ...(0, import_lodash.omit)(rest, "value", "onChange")
162
+ }
163
+ )
164
+ );
150
165
  };
151
166
  var Ranger_default = (0, import_LocaleWrapper.default)({
152
167
  componentName: "Ranger",
@@ -35,7 +35,9 @@
35
35
  z-index: 1;
36
36
  }
37
37
  }
38
+ }
38
39
 
40
+ .@{prefix}-show-range {
39
41
  .ob-ranger-quick-picker.ob-ranger-quick-picker-select {
40
42
  margin-right: -1px;
41
43
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oceanbase/ui",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "description": "The UI library based on OceanBase Design",
5
5
  "keywords": [
6
6
  "OceanBase",
@@ -37,7 +37,7 @@
37
37
  "dependencies": {
38
38
  "@ant-design/cssinjs": "^1.9.1",
39
39
  "@ant-design/pro-components": "^2.4.12",
40
- "@oceanbase/design": "^0.2.6",
40
+ "@oceanbase/design": "^0.2.7",
41
41
  "@oceanbase/icons": "^0.2.1",
42
42
  "@oceanbase/util": "^0.2.2",
43
43
  "ahooks": "^2.10.0",
@@ -67,5 +67,5 @@
67
67
  "react-dom": "^16.9.0",
68
68
  "react-router-dom": ">=5.2.0"
69
69
  },
70
- "gitHead": "ad719a3964434132196e732bb61004498ad829ee"
70
+ "gitHead": "aee73083e592c5060c9b72173664153783e97e23"
71
71
  }