@difizen/libro-common 0.3.3 → 1.0.0

package/src/react/resize/styles/index.less

@@ -0,0 +1,83 @@
+@import '../../styles/variables.less';
+
+@resize-prefix-cls: ~'@{mana-prefix}-resize';
+
+.@{resize-prefix-cls} {
+  &-handle-horizontal {
+    position: relative;
+    z-index: 2;
+    width: 4px;
+    height: 100%;
+    margin-right: -2px;
+    margin-left: -2px;
+    background: transparent;
+    cursor: col-resize;
+    transition: background-color 0.1s ease-out;
+
+    &:hover {
+      background-color: #167cdb;
+    }
+
+    &:hover.with-color::before {
+      background: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 2px;
+      width: 1px;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  &-handle-vertical {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 4px;
+    margin-top: -2px;
+    margin-bottom: -2px;
+    background: transparent;
+    cursor: row-resize;
+    transition: background-color 0.1s ease-out;
+
+    &:hover {
+      background-color: #167cdb;
+    }
+
+    &:hover.with-color::before {
+      background: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 2px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      content: '';
+    }
+  }
+
+  &-overflow-hidden {
+    overflow: hidden !important;
+  }
+
+  &-with-color::before {
+    background: #43484d;
+  }
+
+  &-active {
+    background-color: #167cdb;
+  }
+
+  &-active.with-color::before {
+    background: none;
+  }
+
+  &-no-resize {
+    cursor: auto;
+  }
+}

package/src/react/styles/variables.less

@@ -0,0 +1,2 @@
+@mana-prefix: mana;
+@iconfont-css-prefix: anticon;

package/src/react/tabs/index.tsx

@@ -0,0 +1,75 @@
+import { EllipsisOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import type { TabsProps as RcTabsProps } from 'rc-tabs';
+import RcTabs, { TabPane } from 'rc-tabs';
+import type { EditableConfig } from 'rc-tabs/lib/interface';
+import * as React from 'react';
+
+import { getPrefixCls } from '../util';
+import './styles/index.less';
+
+export type { TabPaneProps } from 'rc-tabs';
+export type TabsType = 'line' | 'card' | 'editable-card';
+export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
+  type?: TabsType;
+  hideAdd?: boolean;
+  centered?: boolean;
+  addIcon?: React.ReactNode;
+  onEdit?: (
+    e: React.MouseEvent | React.KeyboardEvent | string,
+    action: 'add' | 'remove',
+  ) => void;
+}
+
+interface Tabs extends React.FC<TabsProps> {
+  TabPane: typeof TabPane;
+}
+
+export const Tabs: Tabs = ({
+  type,
+  className,
+  onEdit,
+  hideAdd,
+  centered,
+  addIcon,
+  ...props
+}: TabsProps) => {
+  const { moreIcon = <EllipsisOutlined /> } = props;
+  // const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('tabs');
+
+  let editable: EditableConfig | undefined;
+  if (type === 'editable-card') {
+    editable = {
+      onEdit: (editType, { key, event }) => {
+        onEdit?.(editType === 'add' ? event : key!, editType);
+      },
+      removeIcon: <CloseOutlined />,
+      addIcon: addIcon || <PlusOutlined />,
+      showAdd: hideAdd !== true,
+    };
+  }
+
+  return (
+    <RcTabs
+      // direction={direction}
+      {...props}
+      className={classNames(
+        {
+          // [`${prefixCls}-${size}`]: size,
+          [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
+          [`${prefixCls}-editable-card`]: type === 'editable-card',
+          [`${prefixCls}-centered`]: centered,
+        },
+        className,
+      )}
+      editable={editable}
+      moreIcon={moreIcon}
+      prefixCls={prefixCls}
+    />
+  );
+};
+
+Tabs.TabPane = TabPane;

package/src/react/tabs/styles/card.less

@@ -0,0 +1,111 @@
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls}-card {
+  > .@{tab-prefix-cls}-nav,
+  > div > .@{tab-prefix-cls}-nav {
+    .@{tab-prefix-cls}-tab {
+      margin: 0;
+      padding: 4px 4px 4px 8px;
+      background-color: var(--mana-tab-inactiveBackground);
+      border-top: none;
+      border-right: 1px solid var(--mana-tab-border);
+      border-bottom: none;
+      box-sizing: border-box;
+      height: 31px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &-active {
+        color: var(--mana-primary-color);
+        background-color: var(--mana-tab-activeBackground);
+        border-top: 1px solid var(--mana-tab-activeBorder);
+
+        .mana-tabs-tab-btn {
+          color: var(--mana-tab-activeForeground);
+          text-shadow: none;
+        }
+      }
+
+      &-tab-btn {
+        color: var(--mana-tab-inactiveForeground);
+      }
+    }
+
+    .@{tab-prefix-cls}-ink-bar {
+      visibility: hidden;
+    }
+  }
+
+  // ========================== Top & Bottom ==========================
+  &.@{tab-prefix-cls}-top,
+  &.@{tab-prefix-cls}-bottom {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &.@{tab-prefix-cls}-top {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0;
+
+        &-active {
+          border-bottom-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+  &.@{tab-prefix-cls}-bottom {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0 0 2px 2px;
+
+        &-active {
+          border-top-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+
+  // ========================== Left & Right ==========================
+  &.@{tab-prefix-cls}-left,
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+        margin-top: 0;
+      }
+    }
+  }
+
+  &.@{tab-prefix-cls}-left {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 2px 0 0 2px;
+
+        &-active {
+          border-right-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+  &.@{tab-prefix-cls}-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        border-radius: 0 2px 2px 0;
+
+        &-active {
+          border-left-color: var(--mana-color-bg-container);
+        }
+      }
+    }
+  }
+}

package/src/react/tabs/styles/dropdown.less

@@ -0,0 +1,70 @@
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls}-dropdown {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--mana-text-color);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: 1050;
+  display: block;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-menu {
+    max-height: 200px;
+    margin: 0;
+    padding: 4px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-align: left;
+    list-style-type: none;
+    background-color: var(--mana-color-bg-container);
+    background-clip: padding-box;
+    border-radius: 2px;
+    outline: none;
+    box-shadow:
+      0 3px 6px -4px rgba(0, 0, 0, 12%),
+      0 6px 16px 0 rgba(0, 0, 0, 8%),
+      0 9px 28px 8px rgba(0, 0, 0, 5%);
+
+    &-item {
+      min-width: 120px;
+      margin: 0;
+      padding: 5px 12px;
+      overflow: hidden;
+      color: var(--mana-text-color);
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+
+      &-disabled {
+        &,
+        &:hover {
+          color: var(--mana-text-quaternary);
+          background: transparent;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/src/react/tabs/styles/index.less

@@ -0,0 +1,231 @@
+@import './position';
+@import './dropdown';
+@import './card';
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--mana-text-color);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: flex;
+  overflow: hidden;
+
+  // ========================== Navigation ==========================
+  > .@{tab-prefix-cls}-nav,
+  > div > .@{tab-prefix-cls}-nav {
+    position: relative;
+    display: flex;
+    flex: none;
+    align-items: center;
+
+    .@{tab-prefix-cls}-nav-wrap {
+      position: relative;
+      display: inline-block;
+      display: flex;
+      flex: auto;
+      align-self: stretch;
+      overflow: hidden;
+      white-space: nowrap;
+      transform: translate(0); // Fix chrome render bug
+
+      // >>>>> Ping shadow
+      &::before,
+      &::after {
+        position: absolute;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-list {
+      position: relative;
+      display: flex;
+      transition: transform 0.3s;
+    }
+
+    // >>>>>>>> Operations
+    .@{tab-prefix-cls}-nav-operations {
+      display: flex;
+      align-self: stretch;
+
+      &-hidden {
+        position: absolute;
+        visibility: hidden;
+        pointer-events: none;
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-more {
+      position: relative;
+      padding: 16px;
+      background: transparent;
+      border: 0;
+
+      &::after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 5px;
+        transform: translateY(100%);
+        content: '';
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-add {
+      min-width: 28px;
+      margin-left: 0;
+      padding: 0 8px;
+      background: hsv(0, 0, 98%);
+      border: 1px solid hsv(0, 0, 94%);
+      border-radius: 2px 2px 0 0;
+      outline: none;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        color: var(--mana-text-color);
+      }
+
+      &:active,
+      &:focus {
+        color: var(--mana-text-color);
+      }
+    }
+  }
+
+  &-extra-content {
+    flex: none;
+  }
+
+  &-centered {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-nav-wrap {
+        &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  // ============================ InkBar ============================
+  &-ink-bar {
+    position: absolute;
+    background: var(--mana-primary-color);
+    pointer-events: none;
+  }
+
+  // ============================= Tabs =============================
+  &-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 12px 0;
+    font-size: 14px;
+    background: transparent;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+
+    &-btn,
+    &-remove {
+      &:focus,
+      &:active {
+        color: var(--mana-text-color);
+      }
+    }
+
+    &-btn {
+      outline: none;
+      transition: all 0.3s;
+    }
+
+    &-remove {
+      flex: none;
+      margin-right: -4px;
+      margin-left: 8px;
+      color: var(--mana-text-secondary);
+      font-size: 12px;
+      background: transparent;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        color: var(--mana-text-color);
+      }
+    }
+
+    &:hover {
+      color: var(--mana-text-color);
+      background-color: var(--mana-sideBar-background);
+    }
+
+    &&-tab-active:hover {
+      background-color: var(--mana-sideBar-background);
+    }
+
+    &&-active &-btn {
+      color: var(--mana-activityBar-foreground);
+      // color: @tabs-highlight-color;
+      text-shadow: 0 0 0.25px currentcolor;
+    }
+
+    &&-disabled {
+      color: var(--mana-text-quaternary);
+      cursor: not-allowed;
+    }
+
+    &&-disabled &-btn,
+    &&-disabled &-remove {
+      &:focus,
+      &:active {
+        color: var(--mana-text-quaternary);
+      }
+    }
+
+    & &-remove .@{iconfont-css-prefix} {
+      margin: 0;
+    }
+  }
+
+  &-tab + &-tab {
+    margin: 0 0 0 32px;
+  }
+
+  // =========================== TabPanes ===========================
+  &-content {
+    &-holder {
+      flex: auto;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &-animated {
+      transition: margin 0.3s;
+    }
+  }
+
+  &-tabpane {
+    flex: none;
+    width: 100%;
+    outline: none;
+  }
+}