@titaui/pc 1.7.45 → 1.7.49

package/src/components/select/index.scss

@@ -1,72 +0,0 @@
-.tita-common-select-wrapper {
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-}
-.tita-common-select-pop {
-  border: 1px solid #dedede;
-  border-radius: 2px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-  font-size: 12px;
-  background-color: #fff;
-}
-.tita-common-select {
-  user-select: none;
-  box-sizing: border-box;
-  display: flex;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  border-radius: 4px;
-  border: 1px solid #d9d9d9;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  background: #fff;
-  align-items: center;
-  padding: 0 5px;
-  .tita-select-text {
-    // NOTE flex: 1;  IE11 上不能用
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .common-select-arrow {
-    float: right;
-    color: #bfc3c7;
-    transition: transform 0.3s ease;
-  }
-  &-active {
-    .common-select-arrow {
-      transform: rotate(180deg);
-    }
-  }
-}
-.tita-common-selector-option:not(.active):hover {
-  background: #F7F8FA;
-}
-.tita-common-selector-option {
-  padding: 4px 14px;
-  box-sizing: border-box;
-  white-space: nowrap;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-  user-select: none;
-  text-align: center;
-  &.active {
-    color: #2879ff;
-    background: #F7F8FA;
-  }
-}
-.choose-maxHeight {
-  overflow: auto;
-}
-.tita-common-select-wrapper-o {
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-  .tita-common-select {
-    border: none;
-    font-size: 14px;
-    color: #36434d;
-    width: auto !important;
-    cursor: pointer;
-  }
-}

package/src/components/select-layer/index.scss

@@ -1,65 +0,0 @@
-$fontFamily: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-
-.base-info-select-layout__layer {
-  font-family: $fontFamily;
-  .base-info-select-layout__layer-container {
-    position: relative;
-  }
-  .select-layout__layer-text {
-    font-size: 14px;
-    color: #6f7886;
-    line-height: 20px;
-    font-weight: 400;
-    padding-left: 10px;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    height: 36px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    padding-right: 10px;
-    &:hover {
-      border: 1px solid #e9ecf0;
-      cursor: pointer;
-    }
-  }
-  .select-layout__layer-text--hidden-border {
-    &:hover {
-      border: 1px solid transparent;
-      cursor: text;
-    }
-  }
-  .select-layout__layer-text--focus {
-    border: 1px solid #e9ecf0;
-  }
-  .select-layout__layer-select-wrapper {
-    display: inline-block;
-    box-sizing: border-box;
-    background: #ffffff;
-    box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
-    border: 1px solid #f0f2f5;
-    position: relative;
-    border-radius: 4px;
-    padding: 16px 0;
-    font-weight: 400;
-    width: 100%;
-    margin-top: -1px;
-    .select-layout__layer-select-text {
-      font-size: 14px;
-      color: #3f4755;
-      line-height: 22px;
-      height: 36px;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      padding-left: 10px;
-      &:hover {
-        cursor: pointer;
-        background-color: rgba(240, 242, 245, 0.3);
-      }
-    }
-    .select-layout__layer-select-text--active {
-      color: #2879ff;
-    }
-  }
-}

package/src/components/select-layer/index.tsx

@@ -1,171 +0,0 @@
-import React, {
-  FC,
-  useState,
-  useRef,
-  useMemo,
-  useCallback,
-  useEffect,
-} from "react";
-import Popup from "../popup";
-import classNames from "classnames";
-import "./index.scss";
-
-interface ISelectLayerProps {
-  initValue?: number;
-  onChangeSelect: Function;
-  items: { label: string; value: number }[];
-  initText?: string;
-  popupProps?: {};
-  renderPrefixIcon?: any;
-  renderSuffixIcon?: any;
-  renderPrefixIconClass?: string;
-  renderSuffixIconClass?: string;
-  textClass?: string;
-  forceRenderText?: boolean;
-  canEdit?: boolean;
-  children?: any;
-}
-
-const SelectLayer: FC<ISelectLayerProps> = (props) => {
-  const {
-    initValue,
-    onChangeSelect,
-    items,
-    initText = "暂无",
-    popupProps,
-    renderPrefixIcon,
-    renderSuffixIcon,
-    renderPrefixIconClass,
-    renderSuffixIconClass,
-    textClass,
-    forceRenderText = false,
-    canEdit = true,
-    children,
-  } = props;
-
-  const [visible, setVisible] = useState(false);
-  const [selectItem, setSelectItem] = useState(
-    items.find((item) => item.value === initValue)
-  );
-
-  const popupRef = useRef();
-
-  const handleSelectItem = useCallback(
-    (key) => {
-      setVisible(false);
-      setSelectItem(key);
-      onChangeSelect && onChangeSelect(key);
-    },
-    [onChangeSelect]
-  );
-
-  useEffect(() => {
-    setSelectItem(items.find((item) => item.value === initValue));
-  }, [initValue]);
-
-  const renderSelection = useMemo(() => {
-    return (
-      <div className="select-layout__layer-select-wrapper">
-        {items.map((item, index) => (
-          <div
-            key={index}
-            onClick={(e) => handleSelectItem(item)}
-            className={classNames("select-layout__layer-select-text", {
-              "select-layout__layer-select-text--active":
-                selectItem && item.value === selectItem.value,
-            })}
-          >
-            {item.label}
-          </div>
-        ))}
-      </div>
-    );
-  }, [selectItem]);
-
-  useEffect(() => {
-    setSelectItem(items.find((item) => item.value === initValue));
-  }, [initValue]);
-
-  const handleClickText = useCallback(() => {
-    if (!canEdit) {
-      return;
-    }
-    setVisible(!visible);
-  }, [visible, canEdit]);
-
-  const renderSelectContent = useMemo(() => {
-    if (children) {
-      return React.cloneElement(children, {
-        onClick: handleClickText,
-      });
-    }
-    return (
-      <div
-        className={classNames("select-layout__layer-text", {
-          "select-layout__layer-text--focus": visible && canEdit,
-          "select-layout__layer-text--hidden-border": !canEdit,
-        })}
-        onClick={handleClickText}
-      >
-        {renderPrefixIcon && (
-          <span className={renderPrefixIconClass}>
-            {renderPrefixIcon[selectItem ? selectItem.value : 0]}
-          </span>
-        )}
-        <span className={textClass}>
-          {forceRenderText && initText
-            ? initText
-            : selectItem
-              ? selectItem.label
-              : initText}
-        </span>
-        {renderSuffixIcon && (
-          <span className={renderSuffixIconClass}>
-            {renderSuffixIcon[selectItem ? selectItem.value : 0]}
-          </span>
-        )}
-      </div>
-    );
-  }, [
-    visible,
-    canEdit,
-    selectItem,
-    initText,
-    textClass,
-    renderPrefixIcon,
-    renderPrefixIconClass,
-    renderSuffixIcon,
-    renderSuffixIconClass,
-  ]);
-
-  return (
-    <div className="base-info-select-layout__layer">
-      {/* @ts-ignore */}
-      <div
-        className="base-info-select-layout__layer-container"
-        ref={popupRef}
-      />
-
-      {canEdit && (
-        // @ts-ignore
-        <Popup
-          popupVisible={visible}
-          action={["click"]}
-          destroyPopupOnHide={true}
-          popup={renderSelection}
-          mask={false}
-          getPopupContainer={() => popupRef.current}
-          popupStyle={{ width: "100%" }}
-          {...popupProps}
-          onPopupVisibleChange={(visible) => setVisible(visible)}
-        >
-          {renderSelectContent}
-        </Popup>
-      )}
-
-      {!canEdit && renderSelectContent}
-    </div>
-  );
-};
-
-export default SelectLayer;

package/src/components/select-tags/index.scss

@@ -1,163 +0,0 @@
-.titaui-select-tags {
-  display: flex;
-
-  .rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
-    border: 1px solid #DFE3EA;
-  }
-
-  .rc-select-focused {
-    .rc-select-selector {
-      border: 1px solid #DFE3EA !important;
-    }
-  }
-
-  .rc-select-selection-item-remove {
-    display: flex;
-    align-items: center;
-  }
-
-  .rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
-    display: none;
-  }
-
-  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow {
-    overflow: hidden;
-  }
-
-  .rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input {
-    display: none;
-  }
-
-  .rc-select-single .rc-select-selector .rc-select-selection-item,
-  .rc-select-single .rc-select-selector .rc-select-selection-placeholder {
-    top: unset;
-    left: 12px;
-  }
-
-  .rc-select-single .rc-select-selector {
-    align-items: center;
-  }
-
-  .rc-select-selector {
-    cursor: pointer;
-    padding: 0 12px;
-    background: #FFFFFF;
-    border-radius: 8px;
-    border: 1px solid #DFE3EA;
-    height: 36px;
-    box-sizing: border-box;
-  }
-
-  .rc-select-multiple .rc-select-selector {
-    height: unset;
-    padding: 7px 12px 0;
-    border: 1px solid #DFE3EA;
-    max-height: 116px;
-    overflow: auto;
-  }
-
-  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 7px;
-  }
-
-  .rc-select-multiple .rc-select-selector .rc-select-selection-placeholder {
-    line-height: 1;
-    margin-bottom: 7px;
-    position: relative;
-    top: -2px;
-  }
-
-  .rc-select-selection-item-content {
-    margin-right: 8px;
-  }
-
-  .rc-select-multiple .rc-select-selector .rc-select-selection-item {
-    font-size: 12px;
-    flex: none;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    background: #F0F4FA;
-    border-radius: 10px;
-    margin-right: 2px;
-    padding: 0 5px 0 10px;
-
-    .tu-icon-cross {
-      cursor: pointer;
-      color: #a4acB9;
-      font-size: 14px;
-    }
-  }
-
-  .titaui-select-noborder {
-    .rc-select-selector {
-      border: none !important;
-      height: 22px;
-      line-height: 1;
-    }
-  }
-
-  .rc-select-arrow {
-    font-size: 16px;
-    transform: scale(0.5);
-  }
-
-  .rc-select-show-arrow .rc-select-arrow {
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    right: 12px;
-    height: 22px;
-  }
-}
-
-.titaui-dropDown {
-  z-index: 2000;
-  box-sizing: border-box;
-  padding: 16px 6px;
-  background: #FFFFFF;
-  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
-  border: 1px solid #F0F2F5;
-  border-radius: 8px;
-
-  .rc-select-item {
-    font-size: 14px;
-    padding: 7px 6px;
-  }
-
-  .rc-select-item-option {
-    height: 36px;
-    box-sizing: border-box;
-    line-height: 36px;
-    cursor: pointer;
-  }
-
-  .rc-select-item-option-selected {
-
-    color: #2879FF;
-  }
-
-  .rc-select-item-option-content {
-    line-height: 24px;
-  }
-
-  .rc-select-item-option-active {
-    border-radius: 8px;
-    color: #2879FF;
-    background: #F7F8FA;
-  }
-
-
-
-  .rc-select-item-option-state {
-    display: none;
-  }
-}
-
-.titaui-select-hasSelectItem {
-  .rc-select-item-option-state {
-    display: block;
-  }
-}

package/src/components/select-tags/index.tsx

@@ -1,78 +0,0 @@
-import React, { FC, useState } from "react";
-import Select, { Option } from "rc-select";
-import classNames from "classnames";
-import "rc-select/assets/index.less";
-import "./index.scss";
-
-interface DataProps {
-  value: any;
-  label: any;
-}
-
-interface Props {
-  data: DataProps[];
-  name?: any;
-  selected: any;
-  onChange: Function;
-  mode?: any | "single" | "multiple";
-  style?: any;
-  placeholder?: string;
-  className?: any;
-  noBorder?: boolean;
-  suffix?: string;
-}
-
-const preCls = "titaui-select-tags";
-
-const SelectTags: FC<Props> = ({
-  selected = [],
-  data = [],
-  onChange,
-  style = { width: "200px" },
-  mode = "single",
-  className,
-  placeholder = "请选择",
-  name,
-  noBorder,
-  ...restProps
-}) => {
-  const [value, setValue] = useState(selected);
-
-  const onhandleChange = (value, options) => {
-    onChange && onChange(value, options, name);
-    setValue(value);
-  };
-
-  return (
-    <div className={preCls}>
-      <Select
-        className={classNames(className, { [`${preCls}-noborder`]: noBorder })}
-        dropdownClassName={classNames(`titaui-dropDown`, {
-          [`${preCls}-hasSelectItem`]: mode === "multiple",
-        })}
-        value={value}
-        style={style}
-        mode={mode}
-        optionFilterProp="children"
-        optionLabelProp="children"
-        placeholder={placeholder}
-        onChange={onhandleChange}
-        showArrow={true}
-        removeIcon={<span className="tu-icon-cross"></span>}
-        inputIcon={<span className="tu-icon-caret-down" />}
-        menuItemSelectedIcon={<span className="tu-icon-finished" />}
-        {...restProps}
-      >
-        {data.map((item, key) => {
-          return (
-            <Option key={key} value={item.value}>
-              {item.label}
-            </Option>
-          );
-        })}
-      </Select>
-    </div>
-  );
-};
-
-export default SelectTags;

package/src/components/selector-input/debounce.js

@@ -1,26 +0,0 @@
-export default (func, wait, immediate) => {
-  var timeout, result;
-
-  var debounced = function () {
-    var context = this;
-    var args = arguments;
-    if (timeout) clearTimeout(timeout);
-    var later = function () {
-      timeout = null;
-      if (!immediate) result = func.apply(context, args);
-    };
-
-    var callNow = immediate && !timeout;
-    timeout = setTimeout(later, wait);
-    if (callNow) result = func.apply(this, args);
-
-    return result;
-  }
-
-  debounced.cancel = function () {
-    clearTimeout(timeout);
-    timeout = null;
-  };
-
-  return debounced;
-}

package/src/components/selector-input/images/close-hover.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 10</title>
-    <defs>
-        <filter id="filter-1">
-            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="选人-交互说明" transform="translate(-291.000000, -1609.000000)">
-            <g id="输入" transform="translate(100.000000, 1600.000000)">
-                <g id="编组-10" transform="translate(191.000000, 9.000000)">
-                    <circle id="椭圆形" fill="#F05E5E" cx="7.5" cy="7.5" r="7.5"></circle>
-                    <g id="icon-/-ctrl-/-close备份" transform="translate(3.000000, 3.000000)" filter="url(#filter-1)">
-                        <g>
-                            <path d="M4.47854842,3.92946834 L6.99761633,1.41040043 C7.07083964,1.33717712 7.18955807,1.33717712 7.26278137,1.41040043 L7.52794642,1.67556547 C7.60116972,1.74878878 7.60116972,1.86750721 7.52794642,1.94073052 L5.00887851,4.45979842 L7.52794642,6.97886633 C7.60116972,7.05208964 7.60116972,7.17080807 7.52794642,7.24403137 L7.26278137,7.50919642 C7.18955807,7.58241972 7.07083964,7.58241972 6.99761633,7.50919642 L4.47854842,4.99012851 L1.95948052,7.50919642 C1.88625721,7.58241972 1.76753878,7.58241972 1.69431547,7.50919642 L1.42915043,7.24403137 C1.35592712,7.17080807 1.35592712,7.05208964 1.42915043,6.97886633 L3.94821834,4.45979842 L1.42915043,1.94073052 C1.35592712,1.86750721 1.35592712,1.74878878 1.42915043,1.67556547 L1.69431547,1.41040043 C1.76753878,1.33717712 1.88625721,1.33717712 1.95948052,1.41040043 L4.47854842,3.92946834 L4.47854842,3.92946834 Z" id="路径" fill="#3F4755" fill-rule="nonzero"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/components/selector-input/images/close-new.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>下拉题</title>
-    <g id="3、最新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="初始页-交互说明" transform="translate(-668.000000, -800.000000)">
-            <g id="编组-2" transform="translate(512.000000, 331.000000)">
-                <g id="编组-13" transform="translate(0.000000, 429.000000)">
-                    <g id="三种展示O、KR、树状图" transform="translate(0.000000, 36.000000)">
-                        <g id="下拉题" transform="translate(156.000000, 4.000000)">
-                            <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="15.9688109" height="15.9688109"></rect>
-                            <path d="M8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 Z M5.17720057,4.56711159 C5.09584135,4.48575236 4.96393197,4.48575236 4.88257275,4.56711159 L4.88257275,4.56711159 L4.58794492,4.86173941 C4.50658569,4.94309864 4.50658569,5.07500801 4.58794492,5.15636724 L4.58794492,5.15636724 L7.38690926,7.95533158 L4.58794492,10.7542959 C4.50658569,10.8356552 4.50658569,10.9675645 4.58794492,11.0489237 L4.58794492,11.0489237 L4.88257275,11.3435516 C4.96393197,11.4249108 5.09584135,11.4249108 5.17720057,11.3435516 L5.17720057,11.3435516 L7.97616491,8.54458723 L10.7751293,11.3435516 C10.8564885,11.4249108 10.9883979,11.4249108 11.0697571,11.3435516 L11.0697571,11.3435516 L11.3643849,11.0489237 C11.4457441,10.9675645 11.4457441,10.8356552 11.3643849,10.7542959 L11.3643849,10.7542959 L8.56542057,7.95533158 L11.3643849,5.15636724 C11.4457441,5.07500801 11.4457441,4.94309864 11.3643849,4.86173941 L11.3643849,4.86173941 L11.0697571,4.56711159 C10.9883979,4.48575236 10.8564885,4.48575236 10.7751293,4.56711159 L10.7751293,4.56711159 L7.97616491,7.36607593 Z" id="形状结合" fill="#BFC7D5"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/components/selector-input/images/search-hover.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>search</title>
-    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="选人-交互说明" transform="translate(-1291.000000, -633.000000)" fill="#2879FF" fill-rule="nonzero">
-            <g id="search" transform="translate(1291.000000, 633.000000)">
-                <path d="M5.364698,0 C8.3275389,0 10.729396,2.3398891 10.729396,5.2262886 C10.729396,6.2817885 10.4082143,7.2642079 9.855869,8.0858512 C9.9378917,8.1166267 10.0146353,8.1651957 10.082055,8.2293195 L11.7959556,9.8594343 C12.0565651,10.1073037 12.0668931,10.5195073 11.8190237,10.7801169 C11.8115282,10.7879977 11.8038364,10.7956894 11.7959556,10.803185 C11.5180213,11.0675321 11.0816316,11.0675321 10.8036974,10.803185 L9.0897968,9.1730702 C9.0556479,9.1405908 9.0257964,9.1052897 9.0002601,9.0678778 C8.0458204,9.9275227 6.7681996,10.4525772 5.364698,10.4525772 C2.4018571,10.4525772 0,8.1126881 0,5.2262886 C0,2.3398891 2.4018571,0 5.364698,0 Z M5.364698,1.393677 C3.191948,1.393677 1.4305861,3.1095956 1.4305861,5.2262886 C1.4305861,7.3429816 3.191948,9.0589002 5.364698,9.0589002 C7.537448,9.0589002 9.2988098,7.3429816 9.2988098,5.2262886 C9.2988098,3.1095956 7.537448,1.393677 5.364698,1.393677 Z" id="Combined-Shape"></path>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/components/selector-input/images/search.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Combined Shape</title>
-    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="v" transform="translate(-44.000000, -25.000000)" fill="#BFC7D5" fill-rule="nonzero">
-            <path d="M49.364698,25 C52.3275389,25 54.729396,27.3398891 54.729396,30.2262886 C54.729396,31.2817885 54.4082143,32.2642079 53.855869,33.0858512 C53.9378917,33.1166267 54.0146353,33.1651957 54.082055,33.2293195 L55.7959556,34.8594343 C56.0565651,35.1073037 56.0668931,35.5195073 55.8190237,35.7801169 C55.8115282,35.7879977 55.8038364,35.7956894 55.7959556,35.803185 C55.5180213,36.0675321 55.0816316,36.0675321 54.8036974,35.803185 L53.0897968,34.1730702 C53.0556479,34.1405908 53.0257964,34.1052897 53.0002601,34.0678778 C52.0458204,34.9275227 50.7681996,35.4525772 49.364698,35.4525772 C46.4018571,35.4525772 44,33.1126881 44,30.2262886 C44,27.3398891 46.4018571,25 49.364698,25 Z M49.364698,26.393677 C47.191948,26.393677 45.4305861,28.1095956 45.4305861,30.2262886 C45.4305861,32.3429816 47.191948,34.0589002 49.364698,34.0589002 C51.537448,34.0589002 53.2988098,32.3429816 53.2988098,30.2262886 C53.2988098,28.1095956 51.537448,26.393677 49.364698,26.393677 Z" id="Combined-Shape"></path>
-        </g>
-    </g>
-</svg>

package/src/components/selector-input/index.js

@@ -1,50 +0,0 @@
-import React, { useState, useRef } from 'react';
-import classNames from 'classnames';
-import debounce from './debounce';
-import './index.scss';
-
-export default props => {
-  const { placeholder = '搜索', onChange } = props;
-
-  const [heiglight, setHeiglight] = useState(false);
-  const [heiglightClose, setHeiglightClose] = useState(false);
-  const [searchKey, setSearchKey] = useState('');
-
-  const onInputFocus = () => {
-    setHeiglight(true);
-  }
-
-  const onInputBlur = () => {
-    setHeiglight(false);
-  }
-  const delayChange = useRef(debounce(val => onChange(val), 300)).current;
-
-  const onInputChange = e => {
-    let val = e.target.value;
-    setSearchKey(val);
-    delayChange(val);
-    if (val) setHeiglightClose(true);
-    if (!val) setHeiglightClose(false);
-  }
-
-  const onEmpty = () => {
-    setSearchKey('');
-    setHeiglightClose(false);
-    onChange('');
-  }
-
-  const wrapperClickHandler = e => {
-    e.stopPropagation()
-  }
-
-  return <div className={classNames("persel-selector", {
-    'persel-selector__heiglight': heiglight,
-    'persel-selector__heiglight-close': heiglightClose
-  })} onClick={wrapperClickHandler}>
-    <span className="persel-selector__icon"></span>
-    <span className="persel-selector__input">
-      <input placeholder={placeholder} onFocus={onInputFocus} value={searchKey} onBlur={onInputBlur} onChange={onInputChange} autoComplete='off' />
-      <span className="persel-selector__input--closable" onClick={onEmpty}></span>
-    </span>
-  </div>
-}