@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.3

package/es/Tooltip/index.d.ts

@@ -0,0 +1,64 @@
+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;
+    getTooltipContainer?: (node: HTMLElement) => HTMLElement;
+    children?: React.ReactNode;
+}
+export default function Tooltip(props: ITooltipProps): JSX.Element;

package/es/Tooltip/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import AntdTooltip from 'antd/lib/tooltip';
+import classNames from 'classnames';
+import './style';
+export default 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,
+      getTooltipContainer = props.getTooltipContainer,
+      overlayClassName = props.overlayClassName;
+  return /*#__PURE__*/React.createElement(AntdTooltip, {
+    title: title,
+    overlayClassName: classNames('ald-tooltip-overlay', overlayClassName),
+    visible: visible,
+    onVisibleChange: onVisibleChange,
+    trigger: trigger,
+    zIndex: zIndex,
+    placement: placement,
+    mouseEnterDelay: mouseEnterDelay,
+    mouseLeaveDelay: mouseLeaveDelay,
+    getPopupContainer: getPopupContainer,
+    destroyTooltipOnHide: destroyTooltipOnHide,
+    getTooltipContainer: getTooltipContainer
+  }, children);
+}

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

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

package/es/Tooltip/style/index.js

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

package/es/_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/es/_utils/hooks/useControlledState.js

@@ -0,0 +1,54 @@
+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 { useState, useEffect, useRef, useDebugValue } from 'react';
+import { isUndefined } from 'lodash';
+
+function format(_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      innerState = _ref2[0],
+      outterState = _ref2[1];
+
+  var isControlled = isUndefined(outterState) ? 'uncontrolled' : 'controlled';
+  var value = 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 = useState(isUndefined(outterState) ? defaultOutterState : outterState),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerState = _useState2[0],
+      setInnerState = _useState2[1];
+
+  var setState = useRef(function (state) {
+    var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+    if (isUndefined(outterState) || force) {
+      setInnerState(state);
+    }
+
+    callback === null || callback === void 0 ? void 0 : callback(state);
+  }).current; // @ts-ignore
+
+  useDebugValue([innerState, outterState], format);
+  useEffect(function () {
+    if (!isUndefined(outterState)) {
+      setInnerState(outterState);
+    }
+  }, [outterState]);
+  return [innerState, setState];
+};
+
+export default useControlledState;

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

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

package/es/_utils/hooks/usePrefixCls.js

@@ -0,0 +1,14 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import { useContext } from 'react';
+var ConfigContext = _ConfigProvider.ConfigContext;
+
+var usePrefixCls = function usePrefixCls(subPrefixCls, customRootPrefixCls) {
+  var _useContext = useContext(ConfigContext),
+      rootPrefixCls = _useContext.rootPrefixCls,
+      getPrefixCls = _useContext.getPrefixCls;
+
+  return getPrefixCls(subPrefixCls, customRootPrefixCls !== null && customRootPrefixCls !== void 0 ? customRootPrefixCls : rootPrefixCls);
+};
+
+export default usePrefixCls;

package/es/index.d.ts

@@ -0,0 +1,11 @@
+/// <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';
+export { default as Table, } from './Table';
+export type { ISort, TSortOrder, ITableProps, IColumn } from './Table/interface';
+export { default as Navigator } from './Navigator';

package/{src/index.ts → es/index.js}

@@ -5,4 +5,6 @@ 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';
+export { default as Select } from './Select';
+export { default as Table } from './Table';
+export { default as Navigator } from './Navigator';

package/es/style/index.d.ts

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

package/{src → es}/style/themes/default/index.less

@@ -1,4 +1,4 @@
-@import './themeColor.less';
+@import './themeColor.module.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';
 

package/es/style/themes/default/themeColor.module.less.d.ts

@@ -0,0 +1,108 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'B10': string;
+  'B20': string;
+  'B30': string;
+  'B40': string;
+  'B50': string;
+  'B60': string;
+  'B70': string;
+  'B80': string;
+  'B90': string;
+  'B95': string;
+  'B98': string;
+  'BBG10': string;
+  'BBG15': string;
+  'BBG20': string;
+  'BBG30': string;
+  'BBG40': string;
+  'BBG50': string;
+  'BBG60': string;
+  'BBG70': string;
+  'BBG80': string;
+  'BBG90': string;
+  'BBG95': string;
+  'BBG97': string;
+  'BBG98': string;
+  'BG0': string;
+  'BG10': string;
+  'BG100': string;
+  'BG20': string;
+  'BG30': string;
+  'BG40': string;
+  'BG50': string;
+  'BG60': string;
+  'BG70': string;
+  'BG80': string;
+  'BG90': string;
+  'BG95': string;
+  'BG97': string;
+  'BLACK': string;
+  'IMAGE_HOLDER': string;
+  'MATE': string;
+  'ND0': string;
+  'ND10': string;
+  'ND20': string;
+  'ND30': string;
+  'ND40': string;
+  'ND50': string;
+  'ND60': string;
+  'ND70': string;
+  'ND80': string;
+  'ND90': string;
+  'ND95': string;
+  'ND97': string;
+  'NL0': string;
+  'NL10': string;
+  'NL20': string;
+  'NL30': string;
+  'NL40': string;
+  'NL50': string;
+  'NL60': string;
+  'NL70': string;
+  'NL80': string;
+  'NL90': string;
+  'NL95': string;
+  'NL97': string;
+  'SA10': string;
+  'SA20': string;
+  'SA30': string;
+  'SA40': string;
+  'SA50': string;
+  'SA60': string;
+  'SA70': string;
+  'SA80': string;
+  'SA90': string;
+  'SA95': string;
+  'SA98': string;
+  'SB10': string;
+  'SB20': string;
+  'SB30': string;
+  'SB40': string;
+  'SB50': string;
+  'SB60': string;
+  'SB70': string;
+  'SB80': string;
+  'SB90': string;
+  'SB95': string;
+  'SB98': string;
+  'SC10': string;
+  'SC20': string;
+  'SC30': string;
+  'SC40': string;
+  'SC50': string;
+  'SC60': string;
+  'SC70': string;
+  'SC80': string;
+  'SC90': string;
+  'SC95': string;
+  'SC98': string;
+  'SHADOW_ACTIONSHEET': string;
+  'SHADOW_CARD': string;
+  'SHADOW_NOTIFICATION': string;
+  'SHADOW_OPTION': string;
+  'WHITE': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/lib/Button/demo/basic/index.less

@@ -1,4 +1,3 @@
-
 .ald-button-demo {
   .ant-btn {
     margin-right: 8px;

package/lib/Button/index.js

@@ -39,7 +39,7 @@ function Button(props) {
   var prefix = (0, _usePrefixCls.default)('btn');
 
   var _props$type = props.type,
-      type = _props$type === void 0 ? 'primary' : _props$type,
+      type = _props$type === void 0 ? 'secondary' : _props$type,
       _props$size = props.size,
       size = _props$size === void 0 ? 'default' : _props$size,
       _props$shape = props.shape,
@@ -50,7 +50,7 @@ function Button(props) {
 
   function getButtonType(buttonType) {
     if (!['primary', 'secondary', 'danger', 'text', 'link'].includes(buttonType)) {
-      return 'primary';
+      return 'default';
     }
 
     if (buttonType === 'danger') {

package/lib/Button/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/index.less'; 
+@import '../../style/index.less';
 
 @ald-prefix:ant;
 @ald-iconfont-css-prefix:anticon;
@@ -15,13 +15,13 @@
     &-text,
     &-link {
       font-size: 12px;
-      height: 28px;
+      height: @height-base;
       padding: 0 12px;
       display: inline-flex;
-      line-height: 1;
+      line-height: @height-base;
       align-items: center;
       font-weight: 500;
-      justify-content: space-between;
+      justify-content: center;
       .@{ald-iconfont-css-prefix} {
         + span {
           margin-left: 4px;
@@ -252,4 +252,4 @@
       }
     }
   }
-}
+}

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

@@ -169,7 +169,7 @@ var _default = function _default() {
   }, "topRight")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DropdownButton, {
     overlay: menu,
     icon: isIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "Positioning"
+      type: "arrow_drop_down"
     }),
     loading: loading,
     disabled: disabled,

package/lib/Empty/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style';
+interface IEmptyProps {
+    description?: string;
+    children?: React.ReactNode;
+}
+declare const _default: ({ description, children }: IEmptyProps) => JSX.Element;
+export default _default;

package/lib/Empty/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));
+
+require("./style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @ts-nocheck
+var _default = function _default(_ref) {
+  var description = _ref.description,
+      children = _ref.children;
+  var prefixCls = (0, _usePrefixCls.default)('empty');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "75",
+    height: "79",
+    viewBox: "0 0 75 79",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M37.4999 78.9999C58.2106 78.9999 74.9999 62.2106 74.9999 41.4999C74.9999\n           20.7893 58.2106 4 37.4999 4C16.7893 4 0 20.7893 0 41.4999C0 62.2106 16.7893 78.9999 37.4999 78.9999Z",
+    fill: "#EBF3FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M58.9999 25.5H16C14.6193 25.5 13.5 26.5414 13.5 27.8261V76.6738C13.5\n          77.9585 14.6193 78.9999 16 78.9999H58.9999C60.3806 78.9999 61.4999\n          77.9585 61.4999 76.6738V27.8261C61.4999 26.5414 60.3806 25.5 58.9999 25.5Z",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 33H19.5C18.6716 33 18 33.6716 18 34.5C18 35.3284 18.6716 36 19.5\n           36H32.5C33.3284 36 34 35.3284 34 34.5C34 33.6716 33.3284 33 32.5 33Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 39.5H19.5C18.6716 39.5 18 40.1716 18 41C18 41.8284 18.6716 42.5\n          19.5 42.5H41.5C42.3284 42.5 43 41.8284 43 41C43 40.1716 42.3284 39.5 41.5 39.5Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 46.5H19.5C18.6716 46.5 18 47.1716 18 48C18 48.8284 18.6716 49.5\n          19.5 49.5H32.5C33.3284 49.5 34 48.8284 34 48C34 47.1716 33.3284 46.5 32.5 46.5Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 53H19.5C18.6716 53 18 53.6716 18 54.5C18 55.3284 18.6716 56 19.5\n          56H41.5C42.3284 56 43 55.3284 43 54.5C43 53.6716 42.3284 53 41.5 53Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 60H19.5C18.6716 60 18 60.6716 18 61.5C18 62.3284 18.6716 63 19.5\n           63H32.5C33.3284 63 34 62.3284 34 61.5C34 60.6716 33.3284 60 32.5 60Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 66.5H19.5C18.6716 66.5 18 67.1716 18 68C18 68.8284 18.6716 69.5\n           19.5 69.5H41.5C42.3284 69.5 43 68.8284 43 68C43 67.1716 42.3284 66.5 41.5 66.5Z",
+    fill: "#F3F8FF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M58.9998 0H15.9999C14.6192 0 13.4999 1.11929 13.4999 2.5V17.5C13.4999\n           18.8807 14.6192 20 15.9999 20H58.9998C60.3805 20 61.4998 18.8807 61.4998\n            17.5V2.5C61.4998 1.11929 60.3805 0 58.9998 0Z",
+    fill: "#A0B5D5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M32.5 5.49902H19.5C18.6716 5.49902 18 6.1706 18 6.99902C18 7.82745\n          18.6716 8.49902 19.5 8.49902H32.5C33.3284 8.49902 34 7.82745 34 6.99902C34 6.1706 33.3284 5.49902 32.5 5.49902Z",
+    fill: "#D7E7FE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M41.5 12H19.5C18.6716 12 18 12.6716 18 13.5C18 14.3284 18.6716 15\n           19.5 15H41.5C42.3284 15 43 14.3284 43 13.5C43 12.6716 42.3284 12 41.5 12Z",
+    fill: "white"
+  })), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-description")
+  }, description), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-footer")
+  }, children)));
+};
+
+exports.default = _default;

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

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

package/lib/Empty/style/index.js

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

package/lib/Empty/style/index.less

@@ -0,0 +1,23 @@
+@import '../../style/index.less';
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+.@{ald-prefix}-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 46px 0;
+  height: 100%;
+
+  &-content {
+    text-align: center;
+  }
+
+  &-description {
+    font-size: 12px;
+    font-weight: 500;
+    color: @NL0;
+    text-align: center;
+    line-height: 16px;
+  }
+}

package/lib/Icon/iconfont/demo_index.html

@@ -56,6 +56,30 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">sort_descending</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">sort_ascending</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <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 +213,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=1648447992265') format('woff'),
+       url('iconfont.ttf?t=1648447992265') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -217,6 +241,42 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont sort_descending"></span>
+            <div class="name">
+              sort_descending
+            </div>
+            <div class="code-name">.sort_descending
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont sort_ascending"></span>
+            <div class="name">
+              sort_ascending
+            </div>
+            <div class="code-name">.sort_ascending
+            </div>
+          </li>
+          
+          <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 +475,38 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#sort_descending"></use>
+                </svg>
+                <div class="name">sort_descending</div>
+                <div class="code-name">#sort_descending</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#sort_ascending"></use>
+                </svg>
+                <div class="name">sort_ascending</div>
+                <div class="code-name">#sort_ascending</div>
+            </li>
+          
+            <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>