@aloudata/aloudata-design 0.1.0-beta.2

package/lib/Tooltip/demo/overflow/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    title: "longMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsg"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Tooltip will show on mouse enter")));
+};
+
+exports.default = _default;

package/lib/Tooltip/demo/placement/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 调整位置
+ */
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Tooltip/demo/placement/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * title: 调整位置
+ */
+var text = /*#__PURE__*/_react.default.createElement("span", null, "prompt text");
+
+var buttonWidth = 70;
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-placement"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginLeft: buttonWidth,
+      whiteSpace: 'nowrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "topLeft",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "TL")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "top",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "Top")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "topRight",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "TR"))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: buttonWidth,
+      float: 'left'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "leftTop",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "LT")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "left",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "Left")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "leftBottom",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "LB"))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: buttonWidth,
+      marginLeft: buttonWidth * 4 + 24
+    }
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "rightTop",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "RT")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "right",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "Right")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "rightBottom",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "RB"))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginLeft: buttonWidth,
+      clear: 'both',
+      whiteSpace: 'nowrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "bottomLeft",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "BL")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "bottom",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "Bottom")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    placement: "bottomRight",
+    title: text
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "BR"))));
+};
+
+exports.default = _default;

package/lib/Tooltip/demo/placement/index.less

@@ -0,0 +1,7 @@
+.demo-placement {
+  .ant-btn {
+    width: 70px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+}

package/lib/Tooltip/demo/trigger/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Tooltip/demo/trigger/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-trigger"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    title: "Tooltip",
+    trigger: "hover"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "hover")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    title: "Tooltip",
+    trigger: "click"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "click")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    title: "Tooltip",
+    trigger: "contextMenu"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "contextMenu")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
+    title: "Tooltip",
+    trigger: "focus"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "focus"))));
+};
+
+exports.default = _default;

package/lib/Tooltip/demo/trigger/index.less

@@ -0,0 +1,5 @@
+.demo-trigger {
+  .ant-btn {
+    margin-right: 8px;
+  }
+}

package/lib/Tooltip/index.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import './style';
+export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+export interface ITooltipProps {
+    /**
+     * @description 提示文字
+     * @default -
+     */
+    title: React.ReactNode;
+    /**
+     * @description 关闭后是否销毁Tooltip
+     * @default false
+     */
+    destroyTooltipOnHide?: boolean;
+    /**
+     * @description 浮层渲染父节点，默认渲染到 body 上
+     * @default () => document.body
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * @description 鼠标移入后延时多少才显示 Tooltip
+     * @default 0.1
+     */
+    mouseEnterDelay?: number;
+    /**
+     * @description 鼠标移出后延时多少才隐藏 Tooltip
+     * @default 0.1
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * @description 气泡框位置
+     * @default top
+     */
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /**
+     * @description 触发行为
+     * @type ActionType | ActionType[], 其中 ActionType 为 'hover' | 'focus' | 'click' | 'contextMenu';
+     * @default hover
+     */
+    trigger?: ActionType | ActionType[];
+    /**
+     * @description 设置 Tooltip 的 z-index
+     * @default -
+     */
+    zIndex?: number;
+    /**
+     * @description 用于手动控制浮层显隐
+     * @default -
+     */
+    visible?: boolean;
+    /**
+     * @description 显示隐藏的回调
+     * @default -
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @description 卡片类名
+     * @default -
+     */
+    overlayClassName?: string;
+    children?: React.ReactNode;
+}
+export default function Tooltip(props: ITooltipProps): JSX.Element;

package/lib/Tooltip/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tooltip;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Tooltip(props) {
+  var children = props.children,
+      title = props.title,
+      visible = props.visible,
+      onVisibleChange = props.onVisibleChange,
+      trigger = props.trigger,
+      zIndex = props.zIndex,
+      placement = props.placement,
+      mouseEnterDelay = props.mouseEnterDelay,
+      mouseLeaveDelay = props.mouseLeaveDelay,
+      getPopupContainer = props.getPopupContainer,
+      destroyTooltipOnHide = props.destroyTooltipOnHide,
+      overlayClassName = props.overlayClassName;
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    title: title,
+    overlayClassName: (0, _classnames.default)('ald-tooltip-overlay', overlayClassName),
+    visible: visible,
+    onVisibleChange: onVisibleChange,
+    trigger: trigger,
+    zIndex: zIndex,
+    placement: placement,
+    mouseEnterDelay: mouseEnterDelay,
+    mouseLeaveDelay: mouseLeaveDelay,
+    getPopupContainer: getPopupContainer,
+    destroyTooltipOnHide: destroyTooltipOnHide
+  }, children);
+}

package/lib/Tooltip/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/lib/Tooltip/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style");
+
+require("./index.less");

package/lib/Tooltip/style/index.less

@@ -0,0 +1,14 @@
+@import '../../style/index.less';
+
+.ald-tooltip-overlay {
+  .ant-tooltip-inner {
+    padding: 6px 12px;
+    border-radius: @border-radius-base;
+    box-shadow: none;
+    background: @BG10;
+  }
+
+  .ant-tooltip-arrow-content {
+    background: @BG10;
+  }
+}

package/lib/_utils/hooks/useControlledState.d.ts

@@ -0,0 +1,2 @@
+declare const useControlledState: <T>(outterState: T | (() => T) | undefined, defaultOutterState: T, callback?: ((state: T | (() => T)) => void) | undefined) => [T, (state: T | (() => T), force?: boolean | undefined) => void];
+export default useControlledState;

package/lib/_utils/hooks/useControlledState.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _lodash = require("lodash");
+
+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; }
+
+function format(_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      innerState = _ref2[0],
+      outterState = _ref2[1];
+
+  var isControlled = (0, _lodash.isUndefined)(outterState) ? 'uncontrolled' : 'controlled';
+  var value = (0, _lodash.isUndefined)(outterState) ? innerState : outterState;
+  return "State is ".concat(isControlled, " | Value is ").concat(value);
+}
+
+var useControlledState = function useControlledState(outterState, defaultOutterState, callback) {
+  // if (outterState === undefined && defaultOutterState === undefined) {
+  //   throw new TypeError('Either "value" or "defaultValue" variable must be set. Now both are undefined');
+  // }
+  var _useState = (0, _react.useState)((0, _lodash.isUndefined)(outterState) ? defaultOutterState : outterState),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerState = _useState2[0],
+      setInnerState = _useState2[1];
+
+  var setState = (0, _react.useRef)(function (state) {
+    var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    if ((0, _lodash.isUndefined)(outterState) || force) {
+      setInnerState(state);
+    }
+
+    callback === null || callback === void 0 ? void 0 : callback(state);
+  }).current; // @ts-ignore
+
+  (0, _react.useDebugValue)([innerState, outterState], format);
+  (0, _react.useEffect)(function () {
+    if (!(0, _lodash.isUndefined)(outterState)) {
+      setInnerState(outterState);
+    }
+  }, [outterState]);
+  return [innerState, setState];
+};
+
+var _default = useControlledState;
+exports.default = _default;

package/lib/_utils/hooks/usePrefixCls.d.ts

@@ -0,0 +1,2 @@
+declare const usePrefixCls: (subPrefixCls?: string | undefined, customRootPrefixCls?: string | undefined) => string;
+export default usePrefixCls;

package/lib/_utils/hooks/usePrefixCls.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/config-provider/style");
+
+var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
+
+var _react = require("react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ConfigContext = _configProvider.default.ConfigContext;
+
+var usePrefixCls = function usePrefixCls(subPrefixCls, customRootPrefixCls) {
+  var _useContext = (0, _react.useContext)(ConfigContext),
+      rootPrefixCls = _useContext.rootPrefixCls,
+      getPrefixCls = _useContext.getPrefixCls;
+
+  return getPrefixCls(subPrefixCls, customRootPrefixCls !== null && customRootPrefixCls !== void 0 ? customRootPrefixCls : rootPrefixCls);
+};
+
+var _default = usePrefixCls;
+exports.default = _default;

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../typings.d.ts" />
+export { default as Button } from './Button';
+export { default as Dropdown } from './Dropdown';
+export { default as Menu } from './Menu';
+export { default as Input } from './Input';
+export { default as Tabs } from './Tabs';
+export { default as Tooltip } from './Tooltip';
+export { default as Select } from './Select';

package/lib/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function get() {
+    return _Menu.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.default;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+var _Menu = _interopRequireDefault(require("./Menu"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/index.d.ts

@@ -0,0 +1,2 @@
+import 'antd/dist/antd.compact.css';
+import './index.less';

package/lib/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("antd/dist/antd.compact.css");
+
+require("./index.less");

package/lib/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+@import './mixins/index.less';
+@import './themes/default/index.less';

package/lib/style/themes/default/index.less

@@ -0,0 +1,36 @@
+@import './themeColor.less';
+@font-family:sans-serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol','Noto Color Emoji';
+@ald-prefix: 'ald';
+
+
+// height rules
+@height-base: 28px;
+@height-lg: 32px;
+@height-sm: 22px;
+
+
+@border-radius-base: 8px;
+@border-radius-sm: 6px;
+@border-color-base: #e7e8e9; // 边框的基础色
+
+// color
+@primary-color: @B40; // 主色调
+@error-color: @SC40; // 错误色
+@success-color: @SA40; // 成功色
+@warning-color: @SB40; // 警告色
+@init-color: rgba(39, 40, 46, 0.5); // 默认颜色
+@adapt-table-border-color: rgba(39, 40, 46, 0.1); // 可拉伸表格的颜色
+@common-text-color: #27282e;
+@tableheader-bg: #f9f9f9; // 表头背景
+@primary-bg: #fff; // 主要背景色
+@btn-shadow: unset; // 取消btn的阴影,
+@text-shadow:unset; // 取消文字阴影
+
+
+@menu-item-font-size: 14px;
+
+
+//Select
+
+@select-placeholder-color: @NL50;
+@select-label-margin-right:4px;