@aloudata/aloudata-design 0.1.0-beta1 → 0.1.1

package/es/Dropdown/demo/button/index.js

@@ -0,0 +1,159 @@
+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 Icon from '../../../Icon';
+import Radio from 'antd/lib/radio';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+import './index.less';
+var DropdownButton = Dropdown.Button;
+export default (function () {
+  var _useState = useState('default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1];
+
+  var _useState3 = useState('primary'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      type = _useState4[0],
+      setType = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      disabled = _useState6[0],
+      setDisabled = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isIcon = _useState8[0],
+      setIsIcon = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      loading = _useState10[0],
+      setLoading = _useState10[1];
+
+  var _useState11 = useState('bottomLeft'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      placement = _useState12[0],
+      setPlacement = _useState12[1];
+
+  var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "1"
+  }, "1st menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "2"
+  }, "2nd menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+    key: "3"
+  }, "3rd menu item, long long content"));
+
+  function onChangeValue(setCallback) {
+    return function (e) {
+      return setCallback(e.target.value);
+    };
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "demo-dropdown-button"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "type:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: type,
+    onChange: onChangeValue(setType)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "primary"
+  }, "primary"), /*#__PURE__*/React.createElement(Radio, {
+    value: "secondary"
+  }, "secondary"), /*#__PURE__*/React.createElement(Radio, {
+    value: "danger"
+  }, "danger"), /*#__PURE__*/React.createElement(Radio, {
+    value: "text"
+  }, "text"), /*#__PURE__*/React.createElement(Radio, {
+    value: "link"
+  }, "link"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "size:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: size,
+    onChange: onChangeValue(setSize)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "large"
+  }, "large"), /*#__PURE__*/React.createElement(Radio, {
+    value: "default"
+  }, "default"), /*#__PURE__*/React.createElement(Radio, {
+    value: "small"
+  }, "small"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "disabled:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: disabled,
+    onChange: onChangeValue(setDisabled)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: true
+  }, "true"), /*#__PURE__*/React.createElement(Radio, {
+    value: false
+  }, "false"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "icon button:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: isIcon,
+    onChange: onChangeValue(setIsIcon)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: true
+  }, "icon button"), /*#__PURE__*/React.createElement(Radio, {
+    value: false
+  }, "not icon button"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "loading:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: loading,
+    onChange: onChangeValue(setLoading)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: true
+  }, "loading"), /*#__PURE__*/React.createElement(Radio, {
+    value: false
+  }, "not loading"))), /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, "placement:"), /*#__PURE__*/React.createElement(Radio.Group, {
+    value: placement,
+    onChange: onChangeValue(setPlacement)
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "bottomLeft"
+  }, "bottomLeft"), /*#__PURE__*/React.createElement(Radio, {
+    value: "bottomCenter"
+  }, "bottomCenter"), /*#__PURE__*/React.createElement(Radio, {
+    value: "bottomRight"
+  }, "bottomRight"), /*#__PURE__*/React.createElement(Radio, {
+    value: "topLeft"
+  }, "topLeft"), /*#__PURE__*/React.createElement(Radio, {
+    value: "topCenter"
+  }, "topCenter"), /*#__PURE__*/React.createElement(Radio, {
+    value: "topRight"
+  }, "topRight")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropdownButton, {
+    overlay: menu,
+    icon: isIcon && /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow_drop_down"
+    }),
+    loading: loading,
+    disabled: disabled,
+    size: size,
+    type: type,
+    placement: placement
+  }, isIcon ? null : 'Button Content')));
+});

package/es/Dropdown/demo/placement/index.d.ts

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

package/es/Dropdown/demo/placement/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+import Space from 'antd/lib/space';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
+  key: 1
+}, "1st menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+  key: 2
+}, "2nd menu item"), /*#__PURE__*/React.createElement(Menu.Item, {
+  key: 3
+}, "3rd menu item"));
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "demo-dropdown-placement"
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement(Button, null, "bottomLeft")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomCenter"
+  }, /*#__PURE__*/React.createElement(Button, null, "bottomCenter")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomRight"
+  }, /*#__PURE__*/React.createElement(Button, null, "bottomRight"))), /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "topLeft"
+  }, /*#__PURE__*/React.createElement(Button, null, "topLeft")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "topCenter"
+  }, /*#__PURE__*/React.createElement(Button, null, "topCenter")), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "topRight"
+  }, /*#__PURE__*/React.createElement(Button, null, "topRight")))));
+});

package/es/Dropdown/demo/subMenu/index.d.ts

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

package/es/Dropdown/demo/subMenu/index.js

@@ -0,0 +1,42 @@
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import React from 'react';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+var MenuItem = Menu.Item;
+var SubMenu = Menu.SubMenu;
+var MenuDivider = Menu.Divider;
+export default (function () {
+  var menu = /*#__PURE__*/React.createElement(Menu, {
+    onClick: function onClick(info) {
+      _message.info("Click on menu item ".concat(info.key));
+    }
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"), /*#__PURE__*/React.createElement(MenuDivider, null), /*#__PURE__*/React.createElement(SubMenu, {
+    key: 4,
+    title: "sub menu"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 5
+  }, "Sub menu item5"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 6
+  }, "Sub menu item6Sub menu item6Sub menu item6Sub menu item6"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 7
+  }, "Sub menu item7"), /*#__PURE__*/React.createElement(SubMenu, {
+    key: 8,
+    title: "sub menu"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 9
+  }, "Sub menu item9"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 10
+  }, "Sub menu item10"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 11
+  }, "Sub menu item11"))));
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu
+  }, /*#__PURE__*/React.createElement("span", null, "Hover me"));
+});

package/es/Dropdown/demo/trigger/index.d.ts

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

package/es/Dropdown/demo/trigger/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+var MenuItem = Menu.Item;
+export default (function () {
+  var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/React.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"));
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    trigger: ['click']
+  }, /*#__PURE__*/React.createElement("span", null, "Click me"));
+});

package/es/Dropdown/index.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react';
+import DropdownButton from './Button';
+import './style';
+export declare type ActionType = 'hover' | 'click' | 'contextMenu';
+export interface IDropdownProps {
+    /**
+     * @description 关闭后是否销毁Dropdown
+     * @default false
+     */
+    destroyPopupOnHide?: boolean;
+    /**
+     * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位
+     * @default () => document.body
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * @description 菜单
+     * @type Menu | () => Menu
+     * @default -
+     */
+    overlay: ReactElement | (() => ReactElement);
+    /**
+     * @description 下拉根元素的类名称
+     * @default -
+     */
+    overlayClassName?: string;
+    /**
+     * @description 菜单弹出位置
+     * @default bottomLeft
+     */
+    placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
+    /**
+     * @description 触发下拉的行为
+     * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
+     * @default [hover]
+     */
+    trigger?: ActionType[];
+    /**
+     * @description 菜单是否显示
+     * @default -
+     */
+    visible?: boolean;
+    /**
+     * @description 菜单显示状态改变时调用，参数为 visible，点击菜单按钮导致的消失不会触发
+     * @default -
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    children?: React.ReactNode;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function Dropdown(props: IDropdownProps): JSX.Element;
+declare namespace Dropdown {
+    var Button: typeof DropdownButton;
+}
+export default Dropdown;

package/es/Dropdown/index.js

@@ -0,0 +1,33 @@
+import "antd/es/dropdown/style";
+import _Dropdown from "antd/es/dropdown";
+var _excluded = ["children", "visible"];
+
+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; }
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+// eslint-disable-next-line import/no-cycle
+import DropdownButton from './Button';
+import './style';
+export default function Dropdown(props) {
+  var children = props.children,
+      visible = props.visible,
+      otherProps = _objectWithoutProperties(props, _excluded); // antd根据visible字段是否存在来判断visible是否是可控模式
+
+
+  var antdDropdownProps = otherProps;
+
+  if (visible !== undefined) {
+    antdDropdownProps.visible = visible;
+  }
+
+  return /*#__PURE__*/React.createElement(_Dropdown, _objectSpread({}, antdDropdownProps), children);
+}
+Dropdown.Button = DropdownButton;

package/es/Dropdown/style/index.d.ts

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

package/es/Dropdown/style/index.js

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

package/{src → es}/Icon/iconfont/demo_index.html

@@ -56,6 +56,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe63d;</span>
+                <div class="name">more_vert</div>
+                <div class="code-name">&amp;#xe63d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">check</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe616;</span>
                 <div class="name">cancel</div>
@@ -189,9 +201,9 @@
 >@font-face {
   font-family: 'iconfont';
   src: 
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-       url('iconfont.woff?t=1646214023180') format('woff'),
-       url('iconfont.ttf?t=1646214023180') format('truetype');
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('iconfont.woff?t=1646383527898') format('woff'),
+       url('iconfont.ttf?t=1646383527898') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -217,6 +229,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont more_vert"></span>
+            <div class="name">
+              more_vert
+            </div>
+            <div class="code-name">.more_vert
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont check"></span>
+            <div class="name">
+              check
+            </div>
+            <div class="code-name">.check
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont cancel"></span>
             <div class="name">
@@ -415,6 +445,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#more_vert"></use>
+                </svg>
+                <div class="name">more_vert</div>
+                <div class="code-name">#more_vert</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#check"></use>
+                </svg>
+                <div class="name">check</div>
+                <div class="code-name">#check</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#cancel"></use>

package/es/Icon/iconfont/iconfont.css

@@ -0,0 +1,101 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3211525 */
+  /* Color fonts */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('iconfont.woff?t=1646383527898') format('woff'),
+       url('iconfont.ttf?t=1646383527898') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.more_vert:before {
+  content: "\e63d";
+}
+
+.check:before {
+  content: "\e615";
+}
+
+.cancel:before {
+  content: "\e616";
+}
+
+.arrow_drop_down:before {
+  content: "\e60f";
+}
+
+.add:before {
+  content: "\e612";
+}
+
+.arrow_right:before {
+  content: "\e613";
+}
+
+.check_circle:before {
+  content: "\e61c";
+}
+
+.content_copy:before {
+  content: "\e620";
+}
+
+.close:before {
+  content: "\e621";
+}
+
+.eye_off:before {
+  content: "\e630";
+}
+
+.eye:before {
+  content: "\e631";
+}
+
+.flash_on_line-1:before {
+  content: "\e635";
+}
+
+.Groupby_flash_on_line:before {
+  content: "\e639";
+}
+
+.search:before {
+  content: "\e64b";
+}
+
+.waiting:before {
+  content: "\e658";
+}
+
+.view_Partial_line:before {
+  content: "\e659";
+}
+
+.arrow_drop_up:before {
+  content: "\e678";
+}
+
+.chevron_Left_SM:before {
+  content: "\e690";
+}
+
+.chevron_Right_SM:before {
+  content: "\e691";
+}
+
+.expand_more1:before {
+  content: "\e697";
+}
+
+.expand_less1:before {
+  content: "\e698";
+}
+