@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/lib/transfer/style/customize.less

@@ -0,0 +1,52 @@
+@import '../../style/themes/index';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
+.@{transfer-prefix-cls}-customize-list {
+  .@{transfer-prefix-cls}-list {
+    flex: 1 1 50%;
+    width: auto;
+    height: auto;
+    min-height: @transfer-list-height;
+  }
+
+  // =================== Hook Components ===================
+  .@{table-prefix-cls}-wrapper {
+    .@{table-prefix-cls}-small {
+      border: 0;
+      border-radius: 0;
+
+      .@{table-prefix-cls}-selection-column {
+        width: 40px;
+        min-width: 40px;
+      }
+
+      > .@{table-prefix-cls}-content {
+        // Header background color
+        > .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {
+          background: @table-header-bg;
+        }
+
+        .@{table-prefix-cls}-row:last-child td {
+          border-bottom: @border-width-base @border-style-base @border-color-split;
+        }
+      }
+
+      .@{table-prefix-cls}-body {
+        margin: 0;
+      }
+    }
+
+    .@{table-prefix-cls}-pagination.@{ant-prefix}-pagination {
+      margin: 16px 0 4px;
+    }
+  }
+  .@{input-prefix-cls} {
+    &[disabled] {
+      background-color: transparent;
+    }
+  }
+}

package/lib/transfer/style/index-pure.less

@@ -0,0 +1,222 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../checkbox/style/mixin';
+@import './customize';
+@import './status';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
+
+@transfer-header-vertical-padding: ceil(
+  ((@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2)
+);
+
+.@{transfer-prefix-cls} {
+  .reset-component();
+
+  position: relative;
+  display: flex;
+  align-items: stretch;
+
+  &-disabled {
+    .@{transfer-prefix-cls}-list {
+      background: @transfer-disabled-bg;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+    height: @transfer-list-height;
+    border: @border-width-base @border-style-base @border-color-base;
+    border-radius: @border-radius-base;
+
+    &-with-pagination {
+      width: 250px;
+      height: auto;
+    }
+
+    &-search {
+      .anticon-search {
+        color: @disabled-color;
+      }
+    }
+
+    &-header {
+      display: flex;
+      flex: none;
+      align-items: center;
+      height: @transfer-header-height;
+      // border-top is on the transfer dom. We should minus 1px for this
+      padding: (@transfer-header-vertical-padding - 1px) @control-padding-horizontal
+        @transfer-header-vertical-padding;
+      color: @text-color;
+      background: @component-background;
+      border-bottom: @border-width-base @border-style-base @border-color-split;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+
+      > *:not(:last-child) {
+        margin-right: 4px;
+      }
+
+      > * {
+        flex: none;
+      }
+
+      &-title {
+        flex: auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: right;
+        text-overflow: ellipsis;
+      }
+
+      &-dropdown {
+        font-size: 10px;
+        transform: translateY(10%);
+        cursor: pointer;
+
+        &[disabled] {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    &-body {
+      display: flex;
+      flex: auto;
+      flex-direction: column;
+      overflow: hidden;
+      font-size: @font-size-base;
+
+      &-search-wrapper {
+        position: relative;
+        flex: none;
+        padding: @padding-sm;
+      }
+    }
+
+    &-content {
+      flex: auto;
+      margin: 0;
+      padding: 0;
+      overflow: auto;
+      list-style: none;
+
+      &-item {
+        display: flex;
+        align-items: center;
+        min-height: @transfer-item-height;
+        padding: @transfer-item-padding-vertical @control-padding-horizontal;
+        line-height: @transfer-item-height - 2 * @transfer-item-padding-vertical;
+        transition: all 0.3s;
+
+        > *:not(:last-child) {
+          margin-right: 8px;
+        }
+
+        > * {
+          flex: none;
+        }
+
+        &-text {
+          flex: auto;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        &-remove {
+          position: relative;
+          color: @border-color-base;
+          cursor: pointer;
+          transition: all 0.3s;
+
+          &:hover {
+            color: @link-hover-color;
+          }
+
+          &::after {
+            position: absolute;
+            top: -@transfer-item-padding-vertical;
+            right: -50%;
+            bottom: -@transfer-item-padding-vertical;
+            left: -50%;
+            content: '';
+          }
+        }
+      }
+
+      &-item:not(&-item-disabled) {
+        &:hover {
+          background-color: @transfer-item-hover-bg;
+          cursor: pointer;
+        }
+
+        &.@{transfer-prefix-cls}-list-content-item-checked:hover {
+          background-color: @transfer-item-selected-hover-bg;
+        }
+      }
+
+      // Do not change hover style when `oneWay` mode
+      &-show-remove &-item:not(&-item-disabled):hover {
+        background: transparent;
+        cursor: default;
+      }
+
+      &-item-checked {
+        background-color: @item-active-bg;
+      }
+
+      &-item-disabled {
+        color: @btn-disable-color;
+        cursor: not-allowed;
+      }
+    }
+
+    &-pagination {
+      padding: @padding-xs 0;
+      text-align: right;
+      border-top: @border-width-base @border-style-base @border-color-split;
+    }
+
+    &-body-not-found {
+      flex: none;
+      width: 100%;
+      margin: auto 0;
+      color: @disabled-color;
+      text-align: center;
+    }
+
+    &-footer {
+      border-top: @border-width-base @border-style-base @border-color-split;
+    }
+  }
+
+  &-operation {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-self: center;
+    margin: 0 8px;
+    vertical-align: middle;
+
+    .@{ant-prefix}-btn {
+      display: block;
+
+      &:first-child {
+        margin-bottom: 4px;
+      }
+
+      .@{iconfont-css-prefix} {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .@{ant-prefix}-empty-image {
+    max-height: (@transfer-header-height / 2) - 22;
+  }
+}
+
+@import './rtl';

package/lib/transfer/style/index.css

@@ -0,0 +1,281 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+@keyframes antCheckboxEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+.ant-transfer-customize-list .ant-transfer-list {
+  flex: 1 1 50%;
+  width: auto;
+  height: auto;
+  min-height: 200px;
+}
+.ant-transfer-customize-list .ant-table-wrapper .ant-table-small {
+  border: 0;
+  border-radius: 0;
+}
+.ant-transfer-customize-list .ant-table-wrapper .ant-table-small .ant-table-selection-column {
+  width: 40px;
+  min-width: 40px;
+}
+.ant-transfer-customize-list .ant-table-wrapper .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th {
+  background: #fafafa;
+}
+.ant-transfer-customize-list .ant-table-wrapper .ant-table-small > .ant-table-content .ant-table-row:last-child td {
+  border-bottom: 1px solid #f0f0f0;
+}
+.ant-transfer-customize-list .ant-table-wrapper .ant-table-small .ant-table-body {
+  margin: 0;
+}
+.ant-transfer-customize-list .ant-table-wrapper .ant-table-pagination.ant-pagination {
+  margin: 16px 0 4px;
+}
+.ant-transfer-customize-list .ant-input[disabled] {
+  background-color: transparent;
+}
+.ant-transfer-status-error .ant-transfer-list {
+  border-color: #ff4d4f;
+}
+.ant-transfer-status-error .ant-transfer-list-search:not([disabled]) {
+  border-color: #d9d9d9;
+}
+.ant-transfer-status-error .ant-transfer-list-search:not([disabled]):hover {
+  border-color: #40a9ff;
+  border-right-width: 1px;
+}
+.ant-transfer-status-error .ant-transfer-list-search:not([disabled]):focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  border-right-width: 1px;
+  outline: 0;
+}
+.ant-transfer-status-warning .ant-transfer-list {
+  border-color: #faad14;
+}
+.ant-transfer-status-warning .ant-transfer-list-search:not([disabled]) {
+  border-color: #d9d9d9;
+}
+.ant-transfer-status-warning .ant-transfer-list-search:not([disabled]):hover {
+  border-color: #40a9ff;
+  border-right-width: 1px;
+}
+.ant-transfer-status-warning .ant-transfer-list-search:not([disabled]):focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  border-right-width: 1px;
+  outline: 0;
+}
+.ant-transfer {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+.ant-transfer-disabled .ant-transfer-list {
+  background: #f5f5f5;
+}
+.ant-transfer-list {
+  display: flex;
+  flex-direction: column;
+  width: 180px;
+  height: 200px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+.ant-transfer-list-with-pagination {
+  width: 250px;
+  height: auto;
+}
+.ant-transfer-list-search .anticon-search {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-transfer-list-header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  height: 40px;
+  padding: 8px 12px 9px;
+  color: rgba(0, 0, 0, 0.85);
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  border-radius: 2px 2px 0 0;
+}
+.ant-transfer-list-header > *:not(:last-child) {
+  margin-right: 4px;
+}
+.ant-transfer-list-header > * {
+  flex: none;
+}
+.ant-transfer-list-header-title {
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: right;
+  text-overflow: ellipsis;
+}
+.ant-transfer-list-header-dropdown {
+  font-size: 10px;
+  transform: translateY(10%);
+  cursor: pointer;
+}
+.ant-transfer-list-header-dropdown[disabled] {
+  cursor: not-allowed;
+}
+.ant-transfer-list-body {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  overflow: hidden;
+  font-size: 14px;
+}
+.ant-transfer-list-body-search-wrapper {
+  position: relative;
+  flex: none;
+  padding: 12px;
+}
+.ant-transfer-list-content {
+  flex: auto;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+.ant-transfer-list-content-item {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 6px 12px;
+  line-height: 20px;
+  transition: all 0.3s;
+}
+.ant-transfer-list-content-item > *:not(:last-child) {
+  margin-right: 8px;
+}
+.ant-transfer-list-content-item > * {
+  flex: none;
+}
+.ant-transfer-list-content-item-text {
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ant-transfer-list-content-item-remove {
+  position: relative;
+  color: #d9d9d9;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.ant-transfer-list-content-item-remove:hover {
+  color: #40a9ff;
+}
+.ant-transfer-list-content-item-remove::after {
+  position: absolute;
+  top: -6px;
+  right: -50%;
+  bottom: -6px;
+  left: -50%;
+  content: '';
+}
+.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
+  background-color: #f5f5f5;
+  cursor: pointer;
+}
+.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled).ant-transfer-list-content-item-checked:hover {
+  background-color: #dcf4ff;
+}
+.ant-transfer-list-content-show-remove .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
+  background: transparent;
+  cursor: default;
+}
+.ant-transfer-list-content-item-checked {
+  background-color: #e6f7ff;
+}
+.ant-transfer-list-content-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-transfer-list-pagination {
+  padding: 8px 0;
+  text-align: right;
+  border-top: 1px solid #f0f0f0;
+}
+.ant-transfer-list-body-not-found {
+  flex: none;
+  width: 100%;
+  margin: auto 0;
+  color: rgba(0, 0, 0, 0.25);
+  text-align: center;
+}
+.ant-transfer-list-footer {
+  border-top: 1px solid #f0f0f0;
+}
+.ant-transfer-operation {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-self: center;
+  margin: 0 8px;
+  vertical-align: middle;
+}
+.ant-transfer-operation .ant-btn {
+  display: block;
+}
+.ant-transfer-operation .ant-btn:first-child {
+  margin-bottom: 4px;
+}
+.ant-transfer-operation .ant-btn .anticon {
+  font-size: 12px;
+}
+.ant-transfer .ant-empty-image {
+  max-height: -2px;
+}
+.ant-transfer-rtl {
+  direction: rtl;
+}
+.ant-transfer-rtl .ant-transfer-list-search {
+  padding-right: 8px;
+  padding-left: 24px;
+}
+.ant-transfer-rtl .ant-transfer-list-search-action {
+  right: auto;
+  left: 12px;
+}
+.ant-transfer-rtl .ant-transfer-list-header > *:not(:last-child) {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.ant-transfer-rtl .ant-transfer-list-header {
+  right: 0;
+  left: auto;
+}
+.ant-transfer-rtl .ant-transfer-list-header-title {
+  text-align: left;
+}
+.ant-transfer-rtl .ant-transfer-list-content-item > *:not(:last-child) {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.ant-transfer-rtl .ant-transfer-list-pagination {
+  text-align: left;
+}
+.ant-transfer-rtl .ant-transfer-list-footer {
+  right: 0;
+  left: auto;
+}

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

@@ -0,0 +1,8 @@
+import '../../style/default.less';
+import './index.less';
+import '../../button/style';
+import '../../checkbox/style';
+import '../../dropdown/style';
+import '../../empty/style';
+import '../../input/style';
+import '../../pagination/style';

package/lib/transfer/style/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+require("../../style/default.less");
+
+require("./index.less");
+
+require("../../button/style");
+
+require("../../checkbox/style");
+
+require("../../dropdown/style");
+
+require("../../empty/style");
+
+require("../../input/style");
+
+require("../../pagination/style");

package/lib/transfer/style/index.less

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

package/lib/transfer/style/rtl.less

@@ -0,0 +1,71 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../checkbox/style/mixin';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
+
+.@{transfer-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-list {
+    &-search {
+      .@{transfer-prefix-cls}-rtl & {
+        padding-right: @control-padding-horizontal-sm;
+        padding-left: 24px;
+      }
+
+      &-action {
+        .@{transfer-prefix-cls}-rtl & {
+          right: auto;
+          left: 12px;
+        }
+      }
+    }
+
+    &-header {
+      > *:not(:last-child) {
+        .@{transfer-prefix-cls}-rtl & {
+          margin-right: 0;
+          margin-left: 4px;
+        }
+      }
+
+      .@{transfer-prefix-cls}-rtl & {
+        right: 0;
+        left: auto;
+      }
+
+      &-title {
+        .@{transfer-prefix-cls}-rtl & {
+          text-align: left;
+        }
+      }
+    }
+
+    &-content {
+      &-item {
+        > *:not(:last-child) {
+          .@{transfer-prefix-cls}-rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    &-pagination {
+      .@{transfer-prefix-cls}-rtl & {
+        text-align: left;
+      }
+    }
+
+    &-footer {
+      .@{transfer-prefix-cls}-rtl & {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+}

package/lib/transfer/style/status.less

@@ -0,0 +1,31 @@
+@import '../../input/style/mixin';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
+
+.transfer-status-color(@color) {
+  .@{transfer-prefix-cls}-list {
+    border-color: @color;
+
+    &-search:not([disabled]) {
+      border-color: @input-border-color;
+
+      &:hover {
+        .hover();
+      }
+
+      &:focus {
+        .active();
+      }
+    }
+  }
+}
+
+.@{transfer-prefix-cls} {
+  &-status-error {
+    .transfer-status-color(@error-color);
+  }
+
+  &-status-warning {
+    .transfer-status-color(@warning-color);
+  }
+}

package/lib/tree/DirectoryTree.d.ts

@@ -0,0 +1,20 @@
+import type RcTree from 'rc-tree';
+import type { BasicDataNode } from 'rc-tree';
+import type { DataNode, Key } from 'rc-tree/lib/interface';
+import * as React from 'react';
+import type { TreeProps } from './Tree';
+export type ExpandAction = false | 'click' | 'doubleClick';
+export interface DirectoryTreeProps<T extends BasicDataNode = DataNode> extends TreeProps<T> {
+    expandAction?: ExpandAction;
+}
+type DirectoryTreeCompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(props: React.PropsWithChildren<DirectoryTreeProps<T>> & {
+    ref?: React.Ref<RcTree>;
+}) => React.ReactElement) & {
+    displayName?: string;
+};
+export interface DirectoryTreeState {
+    expandedKeys?: Key[];
+    selectedKeys?: Key[];
+}
+declare const ForwardDirectoryTree: DirectoryTreeCompoundedComponent;
+export default ForwardDirectoryTree;