@aloudata/aloudata-design 0.1.0-beta1

package/src/Select/style/index.less

@@ -0,0 +1,539 @@
+// @import './variables.less';
+@import '../../style/index.less';
+
+// @component-prefix:ant-;
+.font(@style: normal, @weight: 400, @size: @size-font-base) {
+  font-weight: @weight;
+  font-size: @size;
+  font-family: @font-family-primary;
+  font-style: @style;
+}
+
+// The prefix to use for components classes
+@component-prefix: ant;
+@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+// vertical margins
+@margin-lg: 24px; // containers
+@margin-md: 16px; // small containers and buttons
+@margin-sm: 12px; // Form controls and items
+@margin-xs: 8px; // small items
+@margin-xss: 4px; // more small
+
+@border-color-base: #a3adc8;
+@border-color-split: hsv(0, 0, 94%); // split border inside a component
+@border-color-inverse: #fff;
+@border-width-base: 1px; // width of the border for a component
+@border-style-base: solid; // style of a components border
+@border-color-disabled: #dfe2ed;
+@select-option-height-lg: @height-lg;
+@select-option-line-height-lg:16px;
+@select-option-height-base:@height-base;
+@select-option-height-sm:@height-sm;
+@line-height-base: 1.5715;
+// @mode: compact;
+
+// Base Text
+// @text-color-base: #313e75;
+// @text-color-disabled: #313e75;
+@text-font-size-base: 14px;
+// @text-lint-height-base: 22px;
+
+//Background Color
+// @background-color-base: #fff;
+// @background-color-disabled: #f7f8fc;
+
+@ald-prefix: ~'@{component-prefix}';
+@select-prefix-cls-legacy: ~'@{component-prefix}-select-legacy';
+@select-input-fontSize: @text-font-size-base;
+@select-input-fontSize-sm: @text-font-size-base - 2px;
+// @color-font-list-primary-normal: @palette-black-6; // $color-black-6
+// @color-box-shadow-focused: #c0c4d3;
+// @color-background-matchHeight: #ffcf3c;
+.@{select-prefix-cls-legacy} {
+  position: relative;
+  display: inline-block;
+  min-width: 120px;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: @border-radius-base;
+  padding: 0 36px 0 12px;
+  outline: none;
+  transition: all 0.2s;
+  cursor: pointer;
+  user-select: none;
+
+  &-selector-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  &-selector {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: @height-base;
+    max-height: @height-base * 3.5px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-radius: @border-radius-base;
+    transition: all 0.2s;
+
+    &::-webkit-scrollbar {
+      width: 2px;
+      background-color: transparent;
+    }
+
+    // &::-webkit-scrollbar-thumb {
+    //   // background: @palette-gray-3;
+    // }
+  }
+
+  &-selector-label {
+    height: @height-base;
+    display: flex;
+    align-items: center;
+    line-height: @height-base;
+    font-size: @select-input-fontSize;
+    color: @NL30;
+    margin-right: @select-label-margin-right;
+    max-width: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  &-values-wrapper {
+    position: relative;
+    width: 100%;
+    line-height: @height-base;
+    color: @NL0;
+  }
+
+  &-bordered {
+    border: 1px solid @NL90;
+  }
+
+  &-bordered:not(&-disabled):not(&-focused):hover {
+    border: 1px solid @B40;
+  }
+
+  // &:not(&-bordered):not(&-disabled):hover {
+  //   // background-color: @palette-gray-2;
+  //   // border: 1px solid transparent;
+  // }
+
+  &-focused:not(&-bordered):not(&-disabled) {
+    // background-color: @color-background-tree-normal;
+    // border: 1px solid @color-background-button-primary-hover;
+    border-radius: 4px;
+  }
+
+  &-focused {
+    // box-shadow: 0 0 6px 0 @color-box-shadow-focused;
+
+    .@{select-prefix-cls-legacy} {
+      &-item-all {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &-arrow,
+  &-close {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    // color: @color-text-table-empty;
+    // transition: all 0.2s;
+
+    &-focused {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &-item {
+    max-width: 100%;
+    overflow: hidden;
+    font-size: @select-input-fontSize;
+    transition: margin 0.2s;
+
+    &-text {
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-tag-item {
+    max-width: 100%;
+    margin-right: 8px;
+    margin-bottom: 5px;
+  }
+
+  &-item-all {
+    display: inline-flex;
+    width: 100%;
+    font-size: @select-input-fontSize;
+    transition: margin 0.2s;
+    .@{select-prefix-cls-legacy}-overflow-item {
+      white-space: nowrap;
+
+      &:not(:first-child)::before {
+        content: ',';
+      }
+
+      &-rest {
+        &::before {
+          content: '' !important;
+        }
+      }
+    }
+
+    &-text {
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: @select-placeholder-color;
+  }
+
+  &-input {
+    position: absolute;
+    top: 9px;
+    left: 0;
+    box-sizing: content-box;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  &-input-tags {
+    position: relative;
+    top: 0;
+  }
+
+  &-input-reference {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    visibility: hidden;
+  }
+
+  &-small {
+    border-radius: @border-radius-sm;
+    .@{select-prefix-cls-legacy} {
+      &-selector {
+        min-height: @height-sm;
+        max-height: @height-sm * 3.5px;
+        border-radius: @border-radius-sm;
+      }
+
+      &-selector-label {
+        height: @height-sm;
+        line-height: @height-sm;
+        font-size: @select-input-fontSize-sm;
+        color: @NL30;
+      }
+
+      &-values-wrapper {
+        line-height: @height-sm;
+        font-size: @select-input-fontSize-sm;
+      }
+
+      &-item-all {
+        font-size: @select-input-fontSize-sm;
+
+        &-text {
+          font-size: @select-input-fontSize-sm;
+        }
+      }
+
+      &-placeholder {
+        font-size: @select-input-fontSize-sm;
+      }
+
+      &-tag-item {
+        margin-bottom: 2px;
+      }
+
+      &-input {
+        top: 6px;
+      }
+
+      &-input-tags {
+        top: 0;
+      }
+    }
+  }
+
+  &-large {
+    .@{select-prefix-cls-legacy} {
+      &-selector {
+        min-height: @height-lg;
+        max-height: @height-lg * 3.5px;
+      }
+
+      &-selector-label {
+        height: @height-lg;
+        line-height: @height-lg;
+        font-size: @select-input-fontSize;
+      }
+
+      &-values-wrapper {
+        line-height: @height-lg;
+      }
+
+      &-tag-item {
+        margin-bottom: 7px;
+      }
+
+      &-input {
+        top: 11px;
+      }
+
+      &-input-tags {
+        top: 0;
+      }
+    }
+  }
+
+  &-disabled {
+    color: @NL80;
+    text-shadow: none;
+    background: @NL95;
+    cursor: not-allowed !important;
+    .@{select-prefix-cls-legacy} {
+      &-selector-label {
+        color: inherit;
+      }
+
+      &-values-wrapper {
+        color: inherit;
+      }
+
+      &-placeholder {
+        color: inherit;
+      }
+    }
+  }
+
+  &-bordered&-disabled {
+    border-color: @NL90;
+  }
+
+  // &-focused&-bordered {
+  //   // border: 1px solid @color-border-input-active;
+  // }
+
+  // &-focused:not(&-bordered) {
+  //   background-color: @palette-gray-2;
+  // }
+
+  &-single {
+    .@{select-prefix-cls-legacy} {
+      &-item {
+        display: inline-flex;
+      }
+    }
+  }
+
+  &-single,
+  &-focused {
+    .@{select-prefix-cls-legacy} {
+      &-item {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  // rc-trigger
+  &-dropdown {
+    position: absolute;
+    background: @BG100;
+    border: 1px solid @NL90;
+    box-shadow: @shadow-actionsheet;
+    border-radius: @border-radius-base;
+    padding: 4px 0;
+    &.@{select-prefix-cls-legacy}-hidden {
+      display: none;
+    }
+  }
+
+  // &-search-highlight {
+  //   // background-color: @color-background-matchHeight;
+  // }
+
+  &-not-found {
+    width: 100%;
+    // color: @color-text-table-empty;
+    text-align: center;
+
+    &-icon {
+      margin-bottom: 40px;
+    }
+  }
+
+  &-gap-10 {
+    width: 10px;
+  }
+
+  &-gap-10 + div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-button {
+    margin-right: 8px;
+  }
+
+  // &-button-active {
+  //   color: @color-text-button-text-hover;
+  //   background: @palette-gray-4;
+  //   border-color: @palette-gray-4;
+  // }
+}
+
+.@{select-prefix-cls-legacy}-list {
+  box-sizing: border-box;
+  // min-width: 160px;
+  // padding: 16px 0 16px 8px;
+  outline: none;
+}
+
+.@{select-prefix-cls-legacy}-list-option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  user-select: none;
+  // margin-top: 4px;
+  padding: 8px 12px 8px 36px;
+  overflow: hidden;
+  color: @NL0;
+  font-size: 12px;
+  height: @select-option-height-lg;
+  line-height: @select-option-line-height-lg;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &-icon,
+  &-all-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 12px;
+    color: @B40;
+
+    &-checkbox {
+      .@{component-prefix}-checkbox-inner {
+        border-color: @NL90;
+        // background-color: @BG100;
+        border-radius: 4px;
+
+        // &::after {
+        //   // border-color: @B40;
+        // }
+      }
+    }
+    // .@{component-prefix}-checkbox-indeterminate {
+    //   .@{component-prefix}-checkbox-inner {
+    //     &::after {
+    //       border-color: green;
+    //     }
+    //   }
+    // }
+  }
+
+  &-isHover {
+    background-color: @NL97;
+  }
+
+  &-nomargin {
+    margin-top: 0;
+  }
+
+  &-disabled {
+    color: @NL80;
+    text-shadow: none;
+    background-color: @white;
+    cursor: not-allowed !important;
+  }
+
+  &-isSelected,
+  &-all-isSelected {
+    color: @NL0;
+    font-weight: normal;
+    // background-color: @NL97;
+  }
+}
+
+.@{select-prefix-cls-legacy}-list-option-all {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  // margin-right: 8px;
+  padding: 8px 12px 8px 36px;
+  overflow: hidden;
+  color: @NL0;
+  font-size: 12px;
+  height: @select-option-height-lg;
+  line-height: @select-option-line-height-lg;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  user-select: none;
+
+  &:not(&-disabled):hover {
+    background-color: @NL97;
+  }
+}
+
+.@{select-prefix-cls-legacy}-footer-button-group {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  width: 100%;
+  height: 52px;
+  margin-top: 4px;
+  padding: 0 20px;
+}
+
+.@{select-prefix-cls-legacy}-footer-button-group:first-child button {
+  margin-right: 8px;
+}
+
+.@{select-prefix-cls-legacy}-list-search-bar {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0 20px 16px 12px;
+}
+
+.@{select-prefix-cls-legacy}-list-group {
+  padding: 6px 12px;
+  // color: @color-background-button-primary-hover;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 20px;
+}

package/src/Select/style/index.ts

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

package/src/Select/utils.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { concat, uniqueId } from 'lodash';
+import { IOption, IOptionProps } from './interface';
+
+const ZERO_INDEX = 0;
+
+interface IGroup {
+  groupLabel?: string;
+  groupValue?: string | number;
+}
+const ungroupedOptionKeyPrefix = 'select_isungrouped_option_';
+const ungroupedOptionKey = uniqueId(ungroupedOptionKeyPrefix);
+const ungroupedOptionLabel = '未分组';
+export const customOptionKeyPrefix = 'select_custom_option_';
+export const customOptionKey = uniqueId(customOptionKeyPrefix);
+
+// ReactNode To Options
+export function convertNodeToOption(node: React.ReactElement, group: IGroup): IOption {
+  const {
+    props: { value, children, ...restProps },
+  } = node as React.ReactElement & { props: IOptionProps };
+  const { groupValue, groupLabel } = group;
+  if (groupLabel && groupLabel) {
+    return { value, label: children !== undefined ? children : value, groupValue, groupLabel, ...restProps };
+  }
+  return { value, label: children !== undefined ? children : value, ...restProps };
+}
+
+export const getFlattenOptions = (data: IOption[], hasGroup: boolean) => {
+  const groupMap = new Map();
+  if (!hasGroup) { return data; }
+  data?.map((cur: IOption) => {
+    const gValue = groupMap.get(cur.groupValue);
+    if (gValue) {
+      const { options, ...rest } = gValue;
+      return groupMap.set(cur.groupValue, {
+        options: [...options, cur],
+        ...rest,
+      });
+    }
+    return groupMap.set(cur.groupValue, {
+      label: cur.groupLabel,
+      value: cur.groupValue,
+      isSelectOptGroup: true,
+      options: [cur],
+    });
+  });
+  const flattenOption: IOption[] = [];
+  groupMap.forEach((value: IOption) => {
+    flattenOption.push(value);
+    // @ts-ignore
+    flattenOption.push(...value.options);
+  });
+  return flattenOption;
+};
+
+export function convertChildrenToData(nodes: React.ReactElement[], group = {}): IOption[] {
+  let nodeOptions: IOption[] = [];
+  React.Children.forEach(nodes, (node: React.ReactElement) => {
+    if (!React.isValidElement(node)) {
+      return;
+    }
+    const {
+      type: { isSelectOptGroup },
+      props: { children, label, value },
+    } = node as React.ReactElement & { type: { isSelectOptGroup?: boolean }; props: IOptionProps }; // 联合类型
+    if (!isSelectOptGroup) {
+      // option
+      nodeOptions.push(convertNodeToOption(node, group));
+    } else {
+      // Group
+      nodeOptions = concat(nodeOptions, convertChildrenToData(children, { groupLabel: label, groupValue: value }));
+    }
+  });
+  return nodeOptions;
+}
+// optionsMap flattenOptions
+export function handleOptions(
+  mergedOptions: IOption[],
+  setCacheOptions: (options: IOption[]) => void,
+  updateGroup: (value: boolean) => void
+) {
+  const isGroup = !!mergedOptions.find((v) => Object.prototype.hasOwnProperty.call(v, 'groupValue'));
+  const flattenOptions: IOption[] = [];
+
+  mergedOptions.forEach((option: IOption) => {
+    const { groupLabel: optionGroupLabel, groupValue: optionGroupValue } = option;
+    if (isGroup && !optionGroupValue && !optionGroupLabel) {
+      const ungroupedOption = {
+        ...option,
+        groupLabel: ungroupedOptionLabel,
+        groupValue: ungroupedOptionKey,
+      };
+      flattenOptions.push(ungroupedOption);
+    } else {
+      flattenOptions.push(option);
+    }
+  });
+  updateGroup(isGroup);
+  setCacheOptions(flattenOptions);
+  return {
+    flattenOptions,
+    isGroup,
+  };
+}
+// provide search matching hightlight;
+export const defaultLabelRenderer = (input: string, prefix: string) => (option: IOption, isGroup: boolean): React.ReactNode => {
+  const { title, label } = option;
+  if (isGroup || typeof label !== 'string') { return title || label; }
+  const index = label.indexOf(input);
+  return (
+    <div style={{ display: 'inline-block', lineHeight: '40px' }}>
+      {label.slice(ZERO_INDEX, index)}
+      <span className={`${prefix}-search-highlight`}>{label.slice(index, index + input.length)}</span>
+      {label.slice(index + input.length)}
+    </div>
+  );
+};
+export const defaultOptionLabelRenderer = (value: string | number, option?: IOption) => option?.title || option?.label || value;
+export const defaultSearchPredicate = (input: string) => (o: IOption) => (typeof o.label === 'string' ? o.label.includes(input) : true);
+export const defaultMatchPredicate = (input: string) => (o: IOption) => o.label === input;
+
+export const CustomOption = (value: string | number, withGroup = false, id = customOptionKeyPrefix): IOption => (withGroup
+  ? {
+    value,
+    label: value.toString(),
+    groupValue: id,
+    groupLabel: '自由输入',
+  }
+  : {
+    value,
+    label: value.toString(),
+  });

package/src/Tabs/TabPane.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import AntdTabs from 'antd/lib/tabs';
+
+const AntdTabPane = AntdTabs.TabPane;
+
+export interface ITabPaneProps {
+  /**
+   * @description 被隐藏时是否渲染 DOM 结构
+   * @default false
+   */
+  forceRender?: boolean;
+  /**
+   * @description 对应 activeKey
+   * @default -
+   */
+  key?: string;
+  /**
+   * @description 选项卡头显示的内容
+   * @default -
+   */
+  tab: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}
+
+export default function TabPane(props: ITabPaneProps) {
+  return <AntdTabPane {...props} />;
+}

package/src/Tabs/demo/adaptHeight/index.less

@@ -0,0 +1,3 @@
+.demo-adapt-height {
+  height: 200px;
+}