th-design 1.0.0

package/dist/esm/components/ThSelect/typing.d.ts

@@ -0,0 +1,131 @@
+/// <reference types="react" />
+import type { TableProps } from 'antd';
+export interface ThSelectProps {
+    /**
+     * 选择模式
+     * @default "multiple"
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * 组件实例数据缓存key值,减少接口请求次数，
+     * 1、如果页面多个组件实例的下拉列表的数据来源是同一个接口，传入相同的cacheKey，达到缓存数据共享
+     * 2、每个组件实例数据来源不同，传入不同的cacheKey
+     * 3、外部传入数据不缓存，无需cacheKey
+     * 4、页面销毁，缓存同时销毁
+     * */
+    cacheKey?: string;
+    /**
+     * 选中值的名称，用于回显，多选不传
+     */
+    name?: string;
+    /**
+     * 选中值，单选模式，多选模式下，传入数组
+     */
+    value?: string | any[];
+    /**
+     * 占位符
+     */
+    placeholder?: string;
+    /**
+     * 是否显示右侧已勾选面板，多选模式下有效
+     */
+    showRightPanel?: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否支持搜索
+     */
+    showSearch?: boolean;
+    /**
+     * 自定义高级搜索区域, 用于自定义搜索条件
+     */
+    searchBar?: React.ReactNode;
+    /**
+     * 单选时，双击选中触发；或者点击确认按钮触发；或者输入模式下回车触发
+     */
+    onChange?: (value: string | any[], names?: string, values?: string | Record<string, any>) => void;
+    /**
+     * 下拉框容器类名
+     */
+    className?: string;
+    /**
+     * label和下拉框布局
+     * @default "horizontal"
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * 自定义节点 name、value、children 的字段
+     */
+    fieldNames?: Record<string, string>;
+    /**
+     * 下拉框宽度
+     * @default 500
+     */
+    width?: number;
+    /**
+     * 下拉框高度
+     * @default 400
+     */
+    height?: number;
+    /**
+     * label
+     */
+    label?: string;
+    /**
+     * 自定义label样式
+     */
+    labelStyle?: React.CSSProperties;
+    /**
+     * 是否显示清除按钮
+     * @default true
+     */
+    showClear?: boolean;
+    /**
+     * 最大显示选中标签数量
+     * @default 2
+     */
+    maxDisplayCount?: number;
+    /**
+     * 自定义表格属性
+     */
+    tableProps: TableProps;
+    /**
+     * 自定义请求参数
+     */
+    requestProps?: ThSelectRequestProps;
+    /**
+     * 是否需要输入模式，如果设置为true,单击进入输入模式，双击打开下拉列表选择模式
+     * @default false
+     */
+    needInput?: boolean;
+    /**
+     * 自定义响应数据字段，用于解析接口返回数据
+     * @default records
+     */
+    responseField?: string;
+}
+export interface ThSelectRequestProps {
+    /**
+     * 接口地址
+     */
+    url: string;
+    /**
+     * 请求方法
+     * @default "post"
+     */
+    method?: 'get' | 'post' | 'POST' | 'GET';
+    /**
+     * 请求参数
+     */
+    params?: Record<string, any>;
+    /**
+     * 自定义搜索关键字
+     */
+    transformSearchKey?: string;
+    /**
+     * 自定义搜索关键字选项
+     */
+    searchOpt?: unknown;
+}

package/dist/esm/components/ThSelect/typing.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ThTable/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './index.less';
+import type { ThTableProps } from './typing';
+/**
+ * @description table组件
+ */
+export declare const ThTable: <T extends Record<string, any>, U extends Record<string, any>>(props: ThTableProps<T, U>) => JSX.Element;
+export default ThTable;

package/dist/esm/components/ThTable/index.js

@@ -0,0 +1,232 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onResize", "width", "isResizable"],
+  _excluded2 = ["columns", "request", "form", "search", "pagination", "showHeader", "scroll", "scrollX", "hideSearch", "style", "toolBarRender", "headerOperation", "options", "tableAlertRender", "btnPermissionList", "requestFormatter", "otherHeight", "footer"],
+  _excluded3 = ["pageSize", "current"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 ProTable from '@ant-design/pro-table';
+import { Button } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { Resizable } from 'react-resizable';
+import "./index.less";
+import { createUuid, formatterQueryParams, hasBtnPermission } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ResizeableTitle = function ResizeableTitle(resizeProps) {
+  var onResize = resizeProps.onResize,
+    width = resizeProps.width,
+    isResizable = resizeProps.isResizable,
+    restProps = _objectWithoutProperties(resizeProps, _excluded);
+  delete restProps.onResize;
+  if (!width || isResizable === false) {
+    return /*#__PURE__*/_jsx("th", _objectSpread({}, restProps));
+  }
+  return /*#__PURE__*/_jsx(Resizable, {
+    width: width,
+    height: 0,
+    onResize: onResize,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    children: /*#__PURE__*/_jsx("th", _objectSpread({}, restProps))
+  });
+};
+
+/**
+ * @description table组件
+ */
+export var ThTable = function ThTable(props) {
+  var columns = props.columns,
+    request = props.request,
+    _props$form = props.form,
+    form = _props$form === void 0 ? {} : _props$form,
+    _props$search = props.search,
+    search = _props$search === void 0 ? {} : _props$search,
+    _props$pagination = props.pagination,
+    pagination = _props$pagination === void 0 ? {} : _props$pagination,
+    showHeader = props.showHeader,
+    scroll = props.scroll,
+    _props$scrollX = props.scrollX,
+    scrollX = _props$scrollX === void 0 ? '100%' : _props$scrollX,
+    _props$hideSearch = props.hideSearch,
+    hideSearch = _props$hideSearch === void 0 ? {} : _props$hideSearch,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {
+      height: '100%'
+    } : _props$style,
+    toolBarRender = props.toolBarRender,
+    _props$headerOperatio = props.headerOperation,
+    headerOperation = _props$headerOperatio === void 0 ? [] : _props$headerOperatio,
+    _props$options = props.options,
+    options = _props$options === void 0 ? {
+      density: false
+    } : _props$options,
+    _props$tableAlertRend = props.tableAlertRender,
+    tableAlertRender = _props$tableAlertRend === void 0 ? false : _props$tableAlertRend,
+    _props$btnPermissionL = props.btnPermissionList,
+    btnPermissionList = _props$btnPermissionL === void 0 ? [] : _props$btnPermissionL,
+    requestFormatter = props.requestFormatter,
+    _props$otherHeight = props.otherHeight,
+    otherHeight = _props$otherHeight === void 0 ? 0 : _props$otherHeight,
+    footer = props.footer,
+    rest = _objectWithoutProperties(props, _excluded2);
+  var tableRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCollapsed = _useState4[0],
+    setIsCollapsed = _useState4[1];
+  var toolBarHeight = !toolBarRender && headerOperation.length === 0 && !options ? 0 : 64;
+  var headerHeight = showHeader === false ? 0 : 47;
+  var paginationHeight = pagination ? 60 : 0;
+  var footerHeight = footer ? 47 : 0;
+  var searchPanelHeight = search ? 124 : 0;
+  var id = "thTable_".concat(createUuid().split('-')[0]);
+  var _useState5 = useState(columns || []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tableColumns = _useState6[0],
+    setTableColumns = _useState6[1];
+  useEffect(function () {
+    if (columns) {
+      setTableColumns(columns);
+    }
+  }, [columns]);
+  var components = {
+    header: {
+      cell: ResizeableTitle
+    }
+  };
+  var handleResize = function handleResize(index) {
+    return function (e, _ref) {
+      var size = _ref.size;
+      var width = size.width || e.target.offsetWidth;
+      var nextColumns = _toConsumableArray(tableColumns);
+      nextColumns[index] = _objectSpread(_objectSpread({}, nextColumns[index]), {}, {
+        width: width
+      });
+      setTableColumns(nextColumns);
+    };
+  };
+  var formatterRequest = function formatterRequest(params, sorter, filter) {
+    var pageSize = params.pageSize,
+      current = params.current,
+      queryPrams = _objectWithoutProperties(params, _excluded3);
+    return request(_objectSpread({
+      pageSize: pageSize,
+      current: current,
+      sorter: sorter,
+      filter: filter
+    }, formatterQueryParams(queryPrams, hideSearch, columns)));
+  };
+  useEffect(function () {
+    var _tableRef$current;
+    setHeight(((_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientHeight) || 0);
+  }, []);
+  var headerTitle = headerOperation.map(function (item) {
+    var key = item.key,
+      type = item.type,
+      name = item.name,
+      onClick = item.onClick,
+      btnRender = item.btnRender,
+      btnPermissionCode = item.btnPermissionCode,
+      icon = item.icon,
+      buttonRender = item.buttonRender;
+    if (hasBtnPermission(btnPermissionList, btnPermissionCode)) {
+      return btnRender || /*#__PURE__*/_jsx(Button, {
+        type: type || 'primary',
+        icon: icon,
+        onClick: onClick,
+        className: 'bool-button',
+        children: buttonRender ? buttonRender() : name
+      }, key);
+    }
+    return null;
+  });
+  var tableClassName = classNames('tableStyles', _defineProperty({}, 'tableHasSearch', !!search));
+  var collapseRenderBtn = function collapseRenderBtn(collapsed) {
+    return /*#__PURE__*/_jsxs(Button, {
+      children: [/*#__PURE__*/_jsx("i", {
+        className: "iconfont ".concat(collapsed ? 'icon-ic-zhankai' : 'icon-ic-shouqi'),
+        style: {
+          color: '#9AA5B4',
+          fontSize: 14
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        children: collapsed ? '展开' : '收起'
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: tableRef,
+    id: id,
+    className: tableClassName,
+    style: style,
+    children: [/*#__PURE__*/_jsx(ProTable, _objectSpread({
+      columns: tableColumns.map(function (col, index) {
+        return _objectSpread(_objectSpread({}, col), {}, {
+          onHeaderCell: function onHeaderCell(column) {
+            return {
+              width: column.width,
+              onResize: handleResize(index)
+            };
+          }
+        });
+      }),
+      components: components,
+      request: requestFormatter || formatterRequest,
+      form: _objectSpread(_objectSpread({}, form), {}, {
+        layout: 'vertical'
+      }),
+      search: search ? _objectSpread(_objectSpread({}, search), {}, {
+        searchText: search.searchText || '搜索',
+        collapsed: isCollapsed === null ? true : isCollapsed,
+        collapseRender: search.collapseRender || collapseRenderBtn,
+        onCollapse: search.onCollapse || setIsCollapsed
+      }) : false,
+      pagination: pagination ? _objectSpread({
+        showQuickJumper: true,
+        showTotal: function showTotal(total) {
+          return "\u5171 ".concat(total, "\u6761");
+        }
+      }, pagination) : false,
+      scroll: scroll ? {
+        y: height - headerHeight - paginationHeight - toolBarHeight - footerHeight - otherHeight - searchPanelHeight,
+        x: scrollX
+      } : undefined,
+      headerTitle: headerTitle,
+      toolBarRender: toolBarRender,
+      options: options,
+      onSubmit: function onSubmit() {
+        if (!isCollapsed && isCollapsed !== null) {
+          setIsCollapsed(true);
+        }
+      },
+      rowClassName: function rowClassName(record, index) {
+        return index % 2 === 1 ? "tableColorTwo" : "tableColorOne";
+      },
+      tableAlertRender: tableAlertRender
+    }, rest)), /*#__PURE__*/_jsx("div", {
+      className: "SearchMask ".concat(isCollapsed === null ? '' : isCollapsed ? 'hide' : 'show')
+    })]
+  });
+};
+export default ThTable;

package/dist/esm/components/ThTable/index.less

@@ -0,0 +1,337 @@
+@primary-color: #1890ff; // 临时定义，或从其他地方获取
+@padding: 24px;
+
+.tableStyles {
+  position: relative;
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #dee2e8;
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f5f7f8;
+  }
+
+  .ant-pro-table {
+    position: relative;
+    z-index: unset;
+
+    .ant-table-body {
+      overflow-y: auto !important;
+      border-right: 1px solid #f5f7f8;
+      border-left: 1px solid #f5f7f8;
+    }
+
+    .ant-pro-card {
+      padding: 0 @padding;
+    }
+
+    .bool-button {
+      margin-right: 5px;
+    }
+
+    .ant-pro-table-search {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      padding: 20px @padding 0 @padding;
+
+      .ant-space-align-center {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+        width: 100%;
+      }
+    }
+
+    .ant-pro-table-list-toolbar-setting-item {
+      display: inline-block;
+      width: 36px;
+      height: 36px;
+      margin: unset !important;
+      color: #9aa5b4 !important;
+      line-height: 36px !important;
+      text-align: center;
+      background: #f5f7f8;
+      border: 1px solid #e1e3e6;
+
+      :hover {
+        color: @primary-color;
+        background-color: #f8fbfd;
+      }
+
+      & > span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .ant-pro-card-body {
+      padding: 0;
+      // margin-top: 100px;
+    }
+
+    //分页样式
+    .ant-pagination {
+      color: #666;
+
+      .ant-pagination-options {
+        flex: 1;
+        order: -1;
+
+        .select-scroll-wrapper {
+          margin: 0;
+        }
+
+        .ant-pagination-options-size-changer {
+          float: left;
+
+          .ant-select-selector {
+            height: 28px !important;
+          }
+        }
+
+        .ant-pagination-options-quick-jumper {
+          float: right;
+
+          input {
+            width: 32px;
+            height: 28px;
+          }
+        }
+      }
+
+      .ant-pagination-total-text {
+        order: -2;
+        height: 28px;
+        line-height: 28px;
+      }
+
+      .ant-pagination-prev {
+        a {
+          &::after {
+            color: rgba(0, 185, 255, 0.3);
+          }
+        }
+      }
+
+      .ant-pagination-next {
+        background-size: 100% 100%;
+
+        a {
+          &::after {
+            color: rgba(0, 185, 255, 0.3);
+          }
+        }
+      }
+
+      //分页颜色调整
+      .ant-pagination-item {
+        z-index: 1;
+        min-width: 28px;
+        height: 28px;
+        margin: 0 4px;
+        color: #9aa5b4;
+        line-height: 28px;
+        background-color: #f5f7f8 !important;
+        border: 0;
+        border-radius: 0 !important;
+
+        a {
+          color: #9aa5b4;
+        }
+      }
+
+      .ant-pagination-item-active:hover a {
+        color: #fff;
+        background-color: @primary-color !important;
+        border-color: @primary-color !important;
+      }
+
+      .ant-pagination-item-active a {
+        color: #fff !important;
+        background-color: @primary-color !important;
+        border-color: @primary-color !important;
+      }
+
+      .ant-pagination-prev,
+      .ant-pagination-next,
+      .ant-pagination-jump-prev,
+      .ant-pagination-jump-next {
+        z-index: 1;
+        width: 28px;
+        height: 28px;
+        margin: 0 12px;
+      }
+
+      .ant-pagination-prev .ant-pagination-item-link,
+      .ant-pagination-next .ant-pagination-item-link {
+        color: #9aa5b4;
+        border: 1px solid #e1e3e6;
+      }
+
+      .ant-pagination-jump-next {
+        &::after {
+          color: white;
+        }
+      }
+    }
+
+    //修改表头文字、背景颜色
+    .ant-table-thead > tr > th {
+      height: 51px;
+      padding: 0 16px;
+      overflow: hidden;
+      color: #000;
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 51px;
+      white-space: nowrap;
+      text-align: center;
+      text-overflow: ellipsis;
+      background: #f5f7f8 !important;
+      border-right: 1px solid #f0f0f0;
+      border-bottom: 1px solid #c4cbd5 !important;
+    }
+
+    .ant-table-thead
+      > tr
+      > th:not(:last-child):not(.ant-table-selection-column):not(
+        .ant-table-row-expand-icon-cell
+      ):not([colspan])::before {
+      background-color: unset !important;
+    }
+
+    .ant-table-tbody > tr > td {
+      height: 51px;
+      // line-height: 60px;
+      padding: 0 16px;
+      color: #666;
+      font-size: 14px;
+      text-align: center;
+      border-bottom: 1px solid #f5f7f8;
+
+      .ant-space-align-center {
+        gap: unset !important;
+
+        .ant-space-item {
+          height: 24px;
+          line-height: 24px;
+
+          button {
+            height: 24px !important;
+            padding: 0 15px;
+            line-height: 24px;
+            border-left: 1px solid #e1e3e6;
+          }
+        }
+
+        .ant-space-item:first-child button {
+          border-left: unset !important;
+        }
+      }
+    }
+  }
+
+  .tableColorOne,
+  .tableColorOne .ant-table-column-sort {
+    background-color: #ffffff !important;
+  }
+
+  .tableColorTwo,
+  .tableColorTwo .ant-table-column-sort {
+    background-color: #f5f7f8 !important;
+  }
+
+  .react-resizable {
+    position: relative;
+    background-clip: padding-box;
+  }
+
+  .react-resizable-handle {
+    position: absolute;
+    right: -5px;
+    bottom: 0;
+    z-index: 1;
+    width: 10px;
+    height: 100%;
+    cursor: col-resize;
+  }
+
+  &.tableHasSearch {
+    .ant-pro-card-body {
+      margin-top: 124px;
+    }
+  }
+
+  .SearchMask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.38);
+
+    &.show {
+      animation: show-mask 0.2s ease-in forwards;
+    }
+
+    &.hide {
+      animation: hide-mask 0.2s ease-in forwards;
+    }
+  }
+}
+
+@keyframes show-mask {
+  0% {
+    height: 0;
+  }
+
+  25% {
+    height: 25%;
+  }
+
+  50% {
+    height: 50%;
+  }
+
+  75% {
+    height: 75%;
+  }
+
+  100% {
+    height: 100%;
+  }
+}
+
+@keyframes hide-mask {
+  0% {
+    height: 100%;
+  }
+
+  25% {
+    height: 75%;
+  }
+
+  50% {
+    height: 50%;
+  }
+
+  75% {
+    height: 25%;
+  }
+
+  100% {
+    height: 0;
+  }
+}